/**
 * Styles de la section Appel à l'action (widget « arvy-cta »).
 *
 * Une scène : au centre le surtitre, le titre, la description et le bouton ;
 * tout autour, des photos posées librement qui flottent au mouvement de la
 * souris et dérivent au défilement. Aucun fond propre : la section laisse
 * voir le fond de la page.
 *
 * Chaque photo est placée par son CENTRE, en % de la scène, avec une largeur
 * en % : la composition garde ses proportions à toute largeur. Position,
 * largeur, format et affichage sont des variables posées par photo
 * ({{CURRENT_ITEM}}) et par appareil.
 *
 * Tout ce qui change d'état (survol, focus, apparition) lit une variable posée
 * par un contrôle Elementor. Les valeurs de repli reprennent la charte ARVY et
 * ne servent qu'en l'absence de CSS généré.
 *
 * Les sélecteurs de repli sont à deux classes : le kit du site stylise h2 et
 * les liens (.elementor-kit-XXXX h2 — une classe et une balise), et doit
 * perdre face à la section.
 */

/* Sécurité 1 : un conteneur Elementor en colonne avec « flex-wrap: wrap » fige
   la hauteur de sa ligne au premier calcul ; une section dont la hauteur varie
   (retour à la ligne, police chargée tard) déborderait sur la suite. */
.e-con:has( > .elementor-widget-arvy-cta ),
.elementor-element:has( > .elementor-widget-arvy-cta ) {
	flex-wrap: nowrap;
}

/* Sécurité 2 : un élément de flex ne rétrécit pas sous la largeur de son
   contenu (min-width: auto). Les photos placées au bord sont rognées au bord
   du widget, jamais au-delà : aucun défilement horizontal de la page.
   « clip » plutôt que « hidden » : n'empêche pas un « sticky » plus haut. */
.elementor-widget-arvy-cta {
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

/* ─── Scène ───────────────────────────────────────────────────────────────────
   Au moins sa hauteur réglée, et toujours assez pour garder la bande réservée
   aux photos au-dessus et au-dessous du contenu : si le contenu grandit, la
   scène grandit et les photos, placées en %, s'écartent avec elle. */

.arvy-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--arvy-cta-hauteur, 600px);
	padding-block: var(--arvy-cta-reserve, 120px);
}

/* ─── Photos ──────────────────────────────────────────────────────────────── */

.arvy-cta__photos {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.arvy-cta__photo {
	position: absolute;
	display: var(--arvy-cta-photo-affichage, block);
	left: var(--arvy-cta-photo-x, 50%);
	top: var(--arvy-cta-photo-y, 50%);
	width: var(--arvy-cta-photo-largeur, 12%);
	transform: translate(-50%, -50%);
}

/* Le script écrit ici le déplacement (souris et défilement). */
.arvy-cta__deplacement {
	will-change: transform;
}

.arvy-cta__cadre {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--arvy-cta-photo-format, 3 / 2);
	border-radius: var(--arvy-cta-photo-rayon, 16px);
	background-color: rgba(26, 26, 27, 0.06);
	transition:
		opacity var(--arvy-cta-apparition-duree, 1.2s) var(--arvy-cta-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-cta-delai, 0s),
		transform var(--arvy-cta-apparition-duree, 1.2s) var(--arvy-cta-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-cta-delai, 0s);
}

/* Sélecteur descendant : le garde-fou du socle (img { height: auto }) l'emporterait
   sur une seule classe. */
.arvy-cta .arvy-cta__cadre img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--arvy-cta-photo-cadrage, center center);
}

/* ─── Contenu ─────────────────────────────────────────────────────────────────
   Relatif et sans z-index : il passe devant les photos (qui le précèdent dans
   le HTML) sans créer de groupe isolé — le texte du bouton reste transparent. */

.arvy-cta__contenu {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	max-width: var(--arvy-cta-contenu-largeur, 900px);
	text-align: center;
}

.arvy-cta .arvy-cta__surtitre {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--arvy-cta-point-ecart, 10px);
	margin: 0 0 var(--arvy-cta-espace-surtitre, 20px);
	color: #1A1A1B;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.arvy-cta__point {
	flex: none;
	width: var(--arvy-cta-point-taille, 8px);
	height: var(--arvy-cta-point-taille, 8px);
	border-radius: 50%;
	background-color: var(--arvy-cta-point-couleur, #2E5DFF);
}

.arvy-cta .arvy-cta__titre {
	margin: 0;
	color: #1A1A1B;
	font-size: 66px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	text-wrap: balance;
}

.arvy-cta .arvy-cta__description {
	max-width: var(--arvy-cta-description-largeur, 560px);
	margin: var(--arvy-cta-espace-description, 24px) 0 0;
	color: #6B7477;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Un élément vide n'est pas rendu : les espaces ne se cumulent jamais. */
.arvy-cta .arvy-cta__surtitre:last-child {
	margin-bottom: 0;
}

.arvy-cta .arvy-cta__surtitre + .arvy-cta__description,
.arvy-cta .arvy-cta__description:first-child {
	margin-top: 0;
}

.arvy-cta__action {
	max-width: 100%;
	margin-top: var(--arvy-cta-espace-bouton, 36px);
}

.arvy-cta__action:first-child {
	margin-top: 0;
}

/* ─── Bouton (modèle ARVY commun à toutes les sections) ───────────────────────
   Pastille pleine, texte et flèche « découpés » : ils laissent voir le fond.
   Le découpage est un vrai mode de fusion, pas une couleur recopiée : il reste
   juste sur une photo ou un dégradé.
   - Foncé (fond clair, défaut) : pastille foncée, texte blanc, fusion
     « produit » → le blanc devient transparent, le foncé reste foncé.
   - Clair (fond sombre) : pastille blanche, texte noir, fusion « écran ».
   Au survol, la pastille se vide : contour et texte prennent sa couleur.
   ⚠️ Aucun parent du bouton ne doit recevoir transform, opacity ou filter : il
   isolerait le bouton du fond et le texte perdrait sa transparence. */

.arvy-cta .arvy-cta__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--arvy-cta-bouton-ecart, 10px);
	max-width: 100%;
	padding: 14px 24px;
	color: var(--arvy-cta-bouton-texte, #FFFFFF);
	background-color: var(--arvy-cta-bouton-fond, #1A1A1B);
	border: 1px solid var(--arvy-cta-bouton-fond, #1A1A1B);
	border-radius: 999px;
	box-shadow: none;
	mix-blend-mode: var(--arvy-cta-bouton-fusion, multiply);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.8px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--arvy-cta-bouton-douceur, 0.35s) ease,
		background-color var(--arvy-cta-bouton-douceur, 0.35s) ease,
		border-color var(--arvy-cta-bouton-douceur, 0.35s) ease,
		opacity var(--arvy-cta-apparition-duree, 1.2s) var(--arvy-cta-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-cta-delai, 0s),
		transform var(--arvy-cta-apparition-duree, 1.2s) var(--arvy-cta-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-cta-delai, 0s);
}

/* Sur un écran très étroit, le texte passe sur deux lignes, centrées, plutôt
   que d'être coupé. Quand il tient sur une ligne, rien ne change. */
.arvy-cta .arvy-cta__bouton-texte {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

.arvy-cta .arvy-cta__bouton-fleche {
	flex: none;
	display: block;
	width: var(--arvy-cta-bouton-fleche, 0.8em);
	height: var(--arvy-cta-bouton-fleche, 0.8em);
	overflow: visible;
}

a.arvy-cta__bouton:hover,
a.arvy-cta__bouton:focus-visible {
	cursor: pointer;
}

.arvy-cta a.arvy-cta__bouton:hover,
.arvy-cta a.arvy-cta__bouton:focus-visible {
	color: var(--arvy-cta-bouton-texte-survol, var(--arvy-cta-bouton-fond, #1A1A1B));
	background-color: var(--arvy-cta-bouton-fond-survol, transparent);
	border-color: var(--arvy-cta-bouton-bordure-survol, var(--arvy-cta-bouton-fond, #1A1A1B));
	text-decoration: none;
}

/* Le thème Hello pose un halo blanc et un contour noir sur tout lien au focus :
   on les remplace par un contour de la couleur de la pastille. */
.arvy-cta a.arvy-cta__bouton:focus {
	outline: none;
	box-shadow: none;
}

.arvy-cta a.arvy-cta__bouton:focus-visible {
	outline: 2px solid var(--arvy-cta-bouton-fond, #1A1A1B);
	outline-offset: 4px;
	box-shadow: none;
}

/* ─── Apparition au défilement ────────────────────────────────────────────────
   Le script ne met en attente (« est-en-attente ») que si la section est encore
   sous l'écran : sans script, en cas d'erreur ou en mouvement réduit, rien n'est
   jamais masqué. Le bouton et les photos ont leur transition plus haut. */

.arvy-cta__surtitre[data-arvy-apparition],
.arvy-cta__titre[data-arvy-apparition],
.arvy-cta__description[data-arvy-apparition] {
	transition:
		opacity var(--arvy-cta-apparition-duree, 1.2s) var(--arvy-cta-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-cta-delai, 0s),
		transform var(--arvy-cta-apparition-duree, 1.2s) var(--arvy-cta-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-cta-delai, 0s);
}

.arvy-cta.est-en-attente [data-arvy-apparition] {
	opacity: 0;
	transform: translateY( var(--arvy-cta-apparition-distance, 32px) );
}

.arvy-cta.est-en-attente .arvy-cta__cadre[data-arvy-apparition] {
	transform: scale( var(--arvy-cta-photo-depart, 0.6) );
}

/* ─── Mouvement réduit, impression ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.arvy-cta.est-en-attente [data-arvy-apparition] {
		opacity: 1 !important;
		transform: none !important;
	}

	.arvy-cta .arvy-cta__deplacement {
		transform: none !important;
	}
}

.arvy-no-motion .arvy-cta.est-en-attente [data-arvy-apparition] {
	opacity: 1 !important;
	transform: none !important;
}

.arvy-no-motion .arvy-cta .arvy-cta__deplacement {
	transform: none !important;
}

@media print {
	.arvy-cta.est-en-attente [data-arvy-apparition] {
		opacity: 1 !important;
		transform: none !important;
	}
}