/**
 * AVENA — Hero slider machine à écrire
 * Couleurs : voir tokens.css. Chevrons désormais en SVG (assets/images/,
 * export Figma officiel) — voir class-hero-slider-widget.php pour le détail
 * de quel fichier va où.
 * Breakpoint 600px = celui du prototype desktop.
 */
.avena-sim-hero-slider {
	/*
	 * max-width fixe retiré (confirmé en DevTools comme cause du décalage/
	 * bande blanche à gauche sur desktop) : Elementor doit rester maître de
	 * la largeur de section/page, ce widget ne fait que remplir son
	 * conteneur parent. Largeur définitive réglée côté Elementor (Content
	 * Width de la Section), pas ici.
	 */
	max-width: 100% !important;
	width: 100%;
	Height: 720px;
	margin: 0 auto !important;
	background: var( --avena-color-ink );
	border-radius: 4px;
	/*
	 * padding augmenté au-delà de la valeur du prototype (60px 40px 90px) à
	 * la demande explicite du client suite au test staging ("trop compact").
	 * Note : la valeur précédente (60/40/90) correspondait déjà exactement
	 * au prototype validé — si ce bloc paraissait plus compact que ça en
	 * production, ça pointe probablement vers le même souci de déploiement
	 * obsolète que le bug JS (cf. réponse). À revérifier après un déploiement
	 * frais avant de pousser ce padding encore plus loin.
	 *
	 * padding-top porté de 80px à 100px : .avena-header est passé en
	 * position:absolute et superpose désormais le haut du hero (cf.
	 * avena-header.css) au lieu d'être empilé au-dessus dans le flux normal.
	 * ~100px ≈ hauteur du header (padding vertical 24+24 + contenu ~43px) ;
	 * à ajuster visuellement si le header change de hauteur.
	 */
	padding: 100px 40px 110px;
	display: flex;
	align-items: center;
	gap: 18px;
	font-family: var( --avena-font-family );
	box-sizing: border-box;
}

.avena-sim-hero-slider__chevron {
	flex-shrink: 0;
}

/*
 * Titre.svg en inline (cf. class-hero-slider-widget.php) — même forme que
 * Slider_1/Slider_2 mais rendu plus grand, devant le titre. Remplace
 * l'ancien "<" texte coloré en --avena-color-green-muted (ancienne valeur
 * provisoire, supprimée de tokens.css). Couleur fixée ici en
 * --avena-color-mint (#BAE3CB, palette officielle du client) — en inline
 * plutôt qu'en <img> car le même fichier Titre.svg sert aussi au chevron
 * du formulaire de lead, qui doit lui rester #009E4D : modifier le fichier
 * source aurait changé les deux à la fois.
 */
.avena-sim-hero-slider__chevron--left {
	display: inline-flex;
	/*
	 * align-self:flex-start : .avena-sim-hero-slider est passé en
	 * align-items:center (hauteur 720px fixe), ce qui centrait le chevron
	 * sur toute la hauteur du bloc titre (2 lignes) + ligne animée. On le
	 * ré-ancre en haut du bloc pour qu'il reste au niveau de la 1ère ligne
	 * du titre ("Votre plan de prévoyance"), margin-top affine l'alignement
	 * avec le cap-height du texte.
	 */
	align-self: flex-start;
	margin-top: 150px;
}

.avena-sim-hero-slider__chevron--left svg {
	display: block;
	width: 80px;
	height: 79.43px;
}

.avena-sim-hero-slider__chevron--left path {
	/*
	 * #85C695 exact Figma pour ce chevron (green officiel) — codé en dur
	 * plutôt qu'en var() : tokens.css ne définit actuellement AUCUNE
	 * variable --avena-color-mint ni --avena-color-green (seulement les
	 * anciens noms provisoires --avena-color-mint-light/-medium/
	 * green-soft/-muted, dont aucune valeur ne vaut #85C695). Signalé
	 * séparément — plusieurs autres var(--avena-color-mint) dans le CSS
	 * du plugin sont donc actuellement invalides elles aussi.
	 */
	fill: #85c695;
}

/*
 * Slider_2.svg en inline (cf. class-hero-slider-widget.php) : le span
 * reste la cible de hero-slider.js (chevronRight.style.color = ...),
 * fill:currentColor sur le <path> ci-dessous fait remonter cette couleur
 * dans le SVG sans toucher au fichier source.
 */
.avena-sim-hero-slider__chevron--right {
	display: inline-flex;
	transition: color 0.3s ease;
}

.avena-sim-hero-slider__chevron--right svg {
	display: block;
	width: 40px;
	height: 40px;
}

.avena-sim-hero-slider__chevron--right path {
	fill: currentColor;
}

.avena-sim-hero-slider__text-block {
	flex: 1;
	min-width: 0;
}

.avena-sim-hero-slider__static {
	color: var( --avena-color-white );
	/* Valeurs Figma exactes : 80px / Medium (500) / line-height 100% / letter-spacing 0%. */
	font-size: 80px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	margin: 0 0 14px;
}

.avena-sim-hero-slider__static-mobile {
	display: none;
}

.avena-sim-hero-slider__animated-row {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 40px;
}

.avena-sim-hero-slider__animated {
	/* 22px -> 26px (+18%), demande client. Ajustable si besoin d'affiner. */
	font-size: 26px;
	font-weight: 700;
	white-space: nowrap;
}

.avena-sim-hero-slider__caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: currentColor;
	margin-left: 2px;
	vertical-align: -0.15em;
	animation: avena-hero-caret-blink 0.9s steps( 1 ) infinite;
}

@keyframes avena-hero-caret-blink {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

/*
 * Desktop uniquement (symétrique du breakpoint mobile ci-dessous, non
 * touché) — spec Figma exacte pour la ligne animée : 42px/gras(700, déjà
 * en place)/interligne 100%/letter-spacing 0, alignée à droite. justify-
 * content:flex-end sur la ligne (plutôt que text-align sur le span, qui
 * n'aurait aucun effet visible ici en flex + white-space:nowrap) pousse
 * tout le groupe texte+curseur+chevron vers la droite du bloc de texte.
 */
@media ( min-width: 601px ) {
	/*
	 * .avena-sim-hero-slider__text-block est un flex item (flex:1) de
	 * .avena-sim-hero-slider (display:flex). Avec max-width:960px, il ne
	 * peut plus grandir jusqu'à occuper tout l'espace que flex:1 lui
	 * réserverait normalement — l'espace libre restant dans la ligne flex
	 * doit donc être explicitement centré via justify-content sur le
	 * parent (margin:auto sur le flex item lui-même interagirait mal avec
	 * flex-grow ici). .avena-sim-hero-slider__chevron--left suit le
	 * mouvement (même ligne flex), ce qui garde le chevron collé au bord
	 * gauche du titre plutôt que fixé au bord gauche du bandeau.
	 */
	.avena-sim-hero-slider {
		justify-content: center;
	}

	/*
	 * max-width SANS !important (contrairement à .avena-sim-hero-slider
	 * lui-même) : ici on veut seulement contraindre le texte pour retrouver
	 * le retour à ligne de la maquette (titre sur 2 lignes), pas bloquer le
	 * fond du widget — .avena-sim-hero-slider garde width:100% (cf. plus
	 * haut), c'est bien lui qui reste pleine largeur.
	 */
	.avena-sim-hero-slider__text-block {
		max-width: 960px;
	}

	.avena-sim-hero-slider__animated-row {
		justify-content: flex-end;
	}

	.avena-sim-hero-slider__animated {
		font-size: 42px;
		line-height: 1;
		letter-spacing: 0;
	}
}

@media ( max-width: 500px ) {
	.avena-sim-hero-slider {
		/*
		 * height:auto tenté ici (2026-08-24, deux essais) pour supprimer le
		 * vide sous le titre en mobile — retiré : le vrai bug signalé par le
		 * client (header qui reste collé/chevauche le contenu au scroll)
		 * n'était pas résolu par ça, et réduire cette hauteur rendait le
		 * chevauchement plus visible/plus tôt (le hero, plus court, laisse
		 * le contenu suivant remonter sous un header qui, lui, ne bouge pas).
		 * Dimensions mobiles précédentes conservées ; le header et son menu
		 * restent superposés au hero.
		 */
		height: 720px;
		padding: 250px 18px 56px;
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
	}

	.avena-sim-hero-slider__chevron--left {
		align-self: flex-start;
		margin-top: 0;
	}

	.avena-sim-hero-slider__chevron--left svg {
		width: 48px;
		height: 48px;
	}

	.avena-sim-hero-slider__chevron--right {
		margin-top: 1px;
	}

	.avena-sim-hero-slider__chevron--right svg {
		width: 45px;
		height: 45px;
	}

	.avena-sim-hero-slider__text-block {
		flex: 0 1 260px;
		max-width: 260px;
	}

	.avena-sim-hero-slider__static {
		/*
		 * Pas de spec Figma mobile fournie pour ce titre — 42px reprend
		 * grossièrement le même ratio que l'ancien couple 42px desktop/22px
		 * mobile, appliqué à la nouvelle taille desktop (80px). À ajuster
		 * si une spec mobile officielle arrive.
		 */
		font-size: 38px;
		line-height: 1.05;
		margin: 0 0 52px;
	}

	.avena-sim-hero-slider__static-desktop {
		display: none;
	}

	.avena-sim-hero-slider__static-mobile {
		display: inline;
	}

	.avena-sim-hero-slider__animated-row {
		/*
		 * flex-start -> center : sur mobile réel (photo client), le chevron
		 * flottait au-dessus de la ligne de texte au lieu d'être aligné avec
		 * elle — flex-start le cale sur le haut de la ligne (line-height:1.35
		 * laisse du blanc au-dessus du texte), pas sur le texte lui-même.
		 * center recolle visuellement le chevron au texte tant que celui-ci
		 * tient sur une ligne ; si une variante longue passe sur 2 lignes, le
		 * chevron se retrouvera centré sur les 2 lignes (compromis acceptable
		 * ici, à revoir si ça choque en pratique).
		 */
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 45px;
	}

	.avena-sim-hero-slider__animated {
		/* 15px -> 18px (+20%), même bump proportionnel qu'en desktop. */
		font-size: 20px;
		line-height: 1.35;
		white-space: normal;
	}

	.avena-sim-hero-slider__caret {
		vertical-align: -0.1em;
	}
}