/**
 * Styles de la section Appel défilant (widget « arvy-appel-defilant »).
 *
 * Des lignes de très grand texte qui défilent sans fin, une sur deux en sens
 * inverse. Le tout est un seul lien.
 *
 * Défilement en CSS pur : chaque piste contient deux séries identiques et se
 * décale d'exactement la moitié ; au retour à zéro, la seconde série occupe
 * la place de la première, la boucle est invisible. Le script traduit la
 * vitesse (px/s) en durée, ajoute des exemplaires si la série est trop courte
 * pour l'écran, et fait suivre la bulle à la souris. Sans lui, le texte défile
 * quand même (durée de repli) et les bulles restent dans le texte.
 *
 * Ce fichier ne contient que de la structure et des valeurs de repli : les
 * couleurs, tailles et durées sont des contrôles Elementor, qui posent les
 * variables --arvy-ad-*.
 */

/* Le texte déborde de l'écran par nature : rogné au bord du widget.
   « clip » et pas « hidden » : la bulle qui suit la souris peut dépasser en
   haut et en bas, et un ancêtre collé (sticky) n'est pas cassé. min-width :
   dans un conteneur flex, la piste ferait sinon déborder la page entière. */
.elementor-widget-arvy-appel-defilant {
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

.e-con:has( > .elementor-widget-arvy-appel-defilant ) {
	flex-wrap: nowrap;
}

.arvy-section--arvy-appel-defilant,
.arvy-section--arvy-appel-defilant .arvy-section__inner {
	min-width: 0;
	max-width: 100%;
}

.arvy-appel-defilant {
	/* Vitesse en pixels par seconde, lue par le script. */
	--arvy-ad-vitesse: 75;
	--arvy-ad-bulle: 96px;
	position: relative;
	overflow-x: clip;
}

/* ---- Le lien (ou la div s'il n'y a pas de lien) ----
   Deux classes au moins : le kit du site colore les liens, Hello leur pose un
   halo au focus. */

.arvy-appel-defilant .arvy-appel-defilant__lien,
.arvy-appel-defilant .arvy-appel-defilant__lien:hover,
.arvy-appel-defilant .arvy-appel-defilant__lien:focus {
	display: flex;
	flex-direction: column;
	gap: var(--arvy-ad-ecart-lignes, 0px);
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	outline: none;
}

/* Focus clavier : contour à l'intérieur (le bord du widget rogne
   l'extérieur). Le défilement se met en pause (plus bas). */
.arvy-appel-defilant .arvy-appel-defilant__lien:focus-visible {
	outline: 2px solid var(--arvy-ad-focus, #2E5DFF);
	outline-offset: -2px;
	box-shadow: none;
}

/* Texte lu par les lecteurs d'écran, une seule fois, alors que les lignes le
   répètent dix fois à l'écran (elles sont masquées aux lecteurs). */
.arvy-appel-defilant .arvy-appel-defilant__libelle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Lignes, pistes, séries ---- */

.arvy-appel-defilant__ligne {
	display: flex;
	min-width: 0;
}

.arvy-appel-defilant__piste {
	display: flex;
	flex: none;
	width: max-content;
	animation: arvy-ad-defile var(--arvy-ad-duree, 40s) linear var(--arvy-ad-decalage, 0s) infinite;
	will-change: transform;
}

/* Sens inverse : la même animation jouée à l'envers. */
.arvy-appel-defilant__ligne--droite .arvy-appel-defilant__piste {
	animation-direction: reverse;
}

@keyframes arvy-ad-defile {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.arvy-appel-defilant__serie {
	display: flex;
	flex: none;
}

/* Un exemplaire : le texte et sa bulle. L'espace est porté par l'élément (et
   pas par un gap) : les deux séries restent strictement identiques, la moitié
   de la piste tombe juste. La typographie est posée ici, sur le conteneur
   commun. */
.arvy-appel-defilant .arvy-appel-defilant__element {
	display: flex;
	flex: none;
	align-items: center;
	padding-inline: calc(var(--arvy-ad-espace, 32px) / 2);
	color: var(--arvy-ad-texte, #1A1A1B);
	font-size: 10vw;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	white-space: nowrap;
	transition: color var(--arvy-ad-douceur, 0.35s) ease;
}

@media (hover: hover) {
	.arvy-appel-defilant .arvy-appel-defilant__lien:hover .arvy-appel-defilant__element {
		color: var(--arvy-ad-texte-survol, var(--arvy-ad-texte, #1A1A1B));
	}
}

.arvy-appel-defilant .arvy-appel-defilant__lien:focus-visible .arvy-appel-defilant__element {
	color: var(--arvy-ad-texte-survol, var(--arvy-ad-texte, #1A1A1B));
}

.arvy-appel-defilant__texte {
	display: block;
}

/* ---- Bulles ---- */

/* Dans le texte : là où il n'y a pas de souris (doigt, stylet, sans script). */
.arvy-appel-defilant .arvy-appel-defilant__bulle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--arvy-ad-bulle, 64px);
	height: var(--arvy-ad-bulle, 64px);
	margin-left: var(--arvy-ad-bulle-ecart, 16px);
	color: var(--arvy-ad-bulle-dessin, #FFFFFF);
	background-color: var(--arvy-ad-bulle-fond, #2E5DFF);
	border-radius: 50%;
}

/* Le tracé de la flèche occupe 10 unités sur 24 : le réglage donne la taille
   visible de la flèche, en % du diamètre de la bulle. */
.arvy-appel-defilant .arvy-appel-defilant__bulle svg,
.arvy-appel-defilant .arvy-appel-defilant__curseur svg {
	display: block;
	flex: none;
	width: calc(var(--arvy-ad-fleche, 30) * 2.4%);
	height: calc(var(--arvy-ad-fleche, 30) * 2.4%);
	overflow: visible;
	stroke-width: var(--arvy-ad-fleche-trait, 1.3);
}

/* Qui suit la souris. Positionnée par le script (transform sur ce bloc), elle
   grandit sur un enfant : les deux mouvements ne se mélangent pas. */
.arvy-appel-defilant .arvy-appel-defilant__curseur {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--arvy-ad-curseur, 96px);
	height: var(--arvy-ad-curseur, 96px);
	margin: calc(var(--arvy-ad-curseur, 96px) / -2) 0 0 calc(var(--arvy-ad-curseur, 96px) / -2);
	pointer-events: none;
	visibility: hidden;
}

.arvy-appel-defilant__curseur-rond {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--arvy-ad-bulle-dessin, #FFFFFF);
	background-color: var(--arvy-ad-bulle-fond, #2E5DFF);
	border-radius: 50%;
	transform: scale(0);
	transition: transform var(--arvy-ad-curseur-duree, 0.9s) var(--arvy-ad-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

/* Posées par le script, seulement avec une vraie souris et hors de l'éditeur. */
.arvy-appel-defilant.est-curseur-pret .arvy-appel-defilant__curseur { visibility: visible; }
.arvy-appel-defilant.est-curseur-pret .arvy-appel-defilant__bulle { display: none; }
.arvy-appel-defilant.est-curseur-pret .arvy-appel-defilant__lien { cursor: none; }
.arvy-appel-defilant.est-survol .arvy-appel-defilant__curseur-rond { transform: scale(1); }

/* ---- Pauses : hors écran, focus clavier, survol (option) ---- */

.arvy-appel-defilant.est-hors-ecran .arvy-appel-defilant__piste,
.arvy-appel-defilant:has( .arvy-appel-defilant__lien:focus-visible ) .arvy-appel-defilant__piste,
.arvy-appel-defilant--pause.est-survol .arvy-appel-defilant__piste {
	animation-play-state: paused;
}

@media (hover: hover) {
	.arvy-appel-defilant--pause .arvy-appel-defilant__lien:hover .arvy-appel-defilant__piste {
		animation-play-state: paused;
	}
}

/* ---- Mouvement réduit ----
   Un défilement sans fin est précisément ce que ces visiteurs demandent à ne
   pas subir. Les lignes s'arrêtent : la première montre le début du texte, la
   seconde sa fin. !important : les règles de pause, plus spécifiques, ne
   doivent pas pouvoir relancer quoi que ce soit. arvy-no-motion est posée par
   le socle. */
@media (prefers-reduced-motion: reduce) {
	.arvy-appel-defilant .arvy-appel-defilant__piste {
		animation: none !important;
		transform: none !important;
	}

	.arvy-appel-defilant .arvy-appel-defilant__ligne--droite {
		justify-content: flex-end;
	}
}

.arvy-no-motion .arvy-appel-defilant .arvy-appel-defilant__piste {
	animation: none !important;
	transform: none !important;
}

.arvy-no-motion .arvy-appel-defilant .arvy-appel-defilant__ligne--droite {
	justify-content: flex-end;
}

/* ---- Replis par appareil (sans CSS généré) ---- */

@media (max-width: 1024px) {
	.arvy-appel-defilant {
		--arvy-ad-espace: 16px;
		--arvy-ad-bulle: 64px;
	}

	.arvy-appel-defilant .arvy-appel-defilant__element {
		font-size: 11vw;
	}
}

@media (max-width: 767px) {
	.arvy-appel-defilant {
		--arvy-ad-vitesse: 50;
	}

	.arvy-appel-defilant .arvy-appel-defilant__element {
		font-size: 20vw;
	}
}