/**
 * AVENA — Cartes flip 3D
 * Couleurs : voir tokens.css. Mécanique du flip et timings repris à
 * l'identique de avena-cartes-flip3d-prototype.html (survol desktop) et
 * sa variante mobile (tap). Breakpoint 820px = celui du prototype desktop.
 */
.avena-sim-flip-cards {
	/*
	 * 420px -> 460px : le verso des cartes 1/2 (titre + SVG 5ans/5050 +
	 * sous-texte + marges) débordait/chevauchait avec la hauteur d'origine,
	 * calibrée pour l'ancien contenu texte (nombre en font-size:60px), plus
	 * compact que les SVG sur-mesure du Figma.
	 */
	--avena-flip-card-min-h: 460px;
	/*
	 * 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%;
	margin: 0 auto !important;
	/*
	 * Bandeau de fond confirmé avec le client (absent des prototypes HTML
	 * d'origine, ajouté après validation Figma) : la rangée de cartes se
	 * détache du blanc de la page. Couleurs des cartes individuelles
	 * (ink/lime/green) inchangées, elles restent au-dessus de ce fond.
	 * Padding/border-radius : valeurs de jugement (non spécifiées), à
	 * ajuster si Margot en veut plus/moins.
	 */
	background-color: var( --avena-color-background );
	border-radius: 4px;
	padding: 56px 40px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	font-family: var( --avena-font-family );
}

.avena-sim-flip-card {
	scroll-margin-top: 90px;
	perspective: 1400px;
	min-height: var( --avena-flip-card-min-h );
	/*
	 * PAS de border-radius/overflow:hidden ici. Ça avait été ajouté pour
	 * masquer le contour de focus natif du <button> qui dépassait des
	 * coins arrondis des faces (20px) — mais cet élément porte aussi
	 * perspective:1400px, ancêtre direct de .avena-sim-flip-card__inner
	 * qui est en rotation 3D active (rotateY + preserve-3d). Combiner
	 * overflow:hidden/border-radius avec un enfant en 3D sur un conteneur
	 * perspective déclenche un bug de compositing WebKit/Safari connu :
	 * un flash magenta/rose ("texture manquante") sur les bords pendant
	 * la rotation, visible uniquement sur le rendu navigateur réel (pas
	 * en éditeur/capture statique) — confirmé en prod sur la carte verte.
	 * Le focus natif est déjà neutralisé sans ce clipping, voir
	 * :focus-visible ci-dessous (box-shadow inset, qui respecte de
	 * lui-même le border-radius de sa propre face, sans clipper l'ancêtre).
	 */
}

.avena-sim-flip-card__trigger {
	all: unset;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: var( --avena-flip-card-min-h );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent !important;
	/*
	 * !important sur les 4 lignes ci-dessous : "all: unset" ne protège que
	 * contre les styles UA par défaut, ce n'est pas du !important — une
	 * règle générique du thème/Elementor ciblant <button> (button:hover,
	 * button:active, button:focus...) peut donc encore repasser par-dessus
	 * si elle est chargée après ou suffisamment spécifique. C'est le
	 * suspect principal du liseré rouge persistant pendant le flip
	 * (:active correspond exactement au moment du tap/clic qui déclenche
	 * l'animation) — on verrouille explicitement plutôt que de compter sur
	 * unset seul.
	 */
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.avena-sim-flip-card__trigger:hover,
.avena-sim-flip-card__trigger:active,
.avena-sim-flip-card__trigger:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Remplace le contour de focus natif par un anneau interne (box-shadow
   inset, qui respecte nativement le border-radius de la face), visible
   seulement au clavier — pas besoin de clipper l'ancêtre pour ça. */
.avena-sim-flip-card__trigger:focus-visible {
	box-shadow: inset 0 0 0 3px var( --avena-color-primary ) !important;
}

.avena-sim-flip-card__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: var( --avena-flip-card-min-h );
	transition: transform 0.7s cubic-bezier( 0.4, 0.2, 0.2, 1 );
	transform-style: preserve-3d !important;
}

/* Desktop : flip au survol, uniquement quand un vrai pointeur fin est disponible. */
@media ( hover: hover ) and ( pointer: fine ) {
	.avena-sim-flip-card:hover .avena-sim-flip-card__inner {
		transform: rotateY( -180deg );
	}
}

/* Mobile/tactile : flip au tap, classe posée par flip-cards.js. */
.avena-sim-flip-card.is-flipped .avena-sim-flip-card__inner {
	transform: rotateY( -180deg );
}

.avena-sim-flip-card__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 20px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	text-align: left;
	color: var( --avena-color-white );
	box-sizing: border-box;
}

.avena-sim-flip-card__face--front {
	transform: rotateY( 0deg );
}

.avena-sim-flip-card__face--back {
	transform: rotateY( 180deg );
}

.avena-sim-flip-card--ink .avena-sim-flip-card__face {
	background: var( --avena-color-ink );
}

.avena-sim-flip-card--green .avena-sim-flip-card__face {
	background: var( --avena-color-primary );
}

.avena-sim-flip-card--lime .avena-sim-flip-card__face {
	background: var( --avena-color-secondary );
	color: var( --avena-color-ink );
}

/*
 * Carte 3 (verte, bg_color "green" — 3e entrée du repeater par défaut, cf.
 * get_default_cards() dans class-flip-cards-widget.php) uniquement : un peu
 * plus d'espacement entre les lettres des paragraphes (recto __text, verso
 * __sub), demande client. Sélecteur composé (spécificité 0,0,2,0) : gagne
 * naturellement sur les règles génériques __text/__sub, y compris leurs
 * variantes dans le media query desktop plus bas, sans !important.
 */
.avena-sim-flip-card--green .avena-sim-flip-card__text,
.avena-sim-flip-card--green .avena-sim-flip-card__sub {
	letter-spacing: 0;
}

.avena-sim-flip-card__title {
	margin: 0 0 20px;
	font-size: 19px;
	line-height: 1.2;
	font-weight: 800;
}

.avena-sim-flip-card__text {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
}

/* Cartes.svg (blanc) — remplace le ">" texte du recto. Taille réduite (30px -> 22px) sur demande client. */
.avena-sim-flip-card__arrow {
	display: block;
	align-self: flex-end;
	margin-top: auto;
	height: 22px;
	width: auto;
}

.avena-sim-flip-card__big {
	/* margin-bottom élargi (16px -> 24px) : marge de respiration avant le sous-texte, cf. correctif chevauchement. */
	margin: 12px 0 24px;
}

/*
 * 5ans.svg / 5050.svg (verso cartes 1 & 2, cf. class-flip-cards-widget.php) —
 * dessins sur-mesure du Figma, pas du texte. height réduite (72px -> 64px)
 * + max-width en garde-fou, width auto pour conserver leurs proportions
 * naturelles (~235x253 et ~262x261) sans jamais les déformer.
 */
.avena-sim-flip-card__big-img {
	display: inline-block;
	height: 64px;
	width: auto;
	max-width: 100%;
}

/* PLUS UTILISÉE depuis le passage de la carte "5 ans" à 5ans.svg (verso image, pas texte+exposant) — laissée au cas où back_type=big_number serait un jour réaffiché en texte. */
.avena-sim-flip-card__unit {
	font-size: 20px;
	vertical-align: super;
	font-weight: 700;
	margin-left: 4px;
}

.avena-sim-flip-card__sub {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	margin-top: 20px;
	/*
	 * margin-bottom ajouté : la flèche (.avena-sim-flip-card__arrow) est
	 * poussée en bas de la carte via margin-top:auto sur un parent flex,
	 * ce qui absorbe l'espace restant — mais quand le contenu (titre + SVG
	 * + sous-texte) remplit presque toute la hauteur de la carte, cet
	 * espace "auto" devient trop petit et le sous-texte se retrouve collé
	 * à la flèche/au bord bas. Cette marge garantit un minimum fixe,
	 * demande client.
	 */
	margin-bottom: 20px;
}

.avena-sim-flip-card__intro {
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	margin-bottom: 16px;
}

/* Indice visuel de tap — affiché uniquement en contexte tactile, cf. flip-cards.js. */
.avena-sim-flip-card__tap-hint {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.65;
	padding: 4px 8px;
	border-radius: 100px;
	border: 1px solid currentColor;
}

.avena-sim-flip-card.is-flipped .avena-sim-flip-card__tap-hint {
	opacity: 0;
}

/*
 * Desktop uniquement (symétrique du breakpoint mobile ci-dessous, qui a
 * déjà son propre text-align:center par élément) — maquette Figma : titre
 * + texte centrés sur le recto ET le verso des 3 cartes. Ciblé par élément
 * plutôt que sur .avena-sim-flip-card__face directement, pour ne pas
 * toucher la règle générique text-align:left (qui, elle, doit rester
 * inchangée pour ne pas affecter le mobile par ricochet).
 */
@media ( min-width: 821px ) {
	/*
	 * Colonnes plafonnées à 398px (largeur de la carte de référence Figma,
	 * cf. les 342px de contenu texte + padding 28px×2) au lieu de 1fr pur :
	 * le fond de la section reste pleine largeur (.avena-sim-flip-cards
	 * garde width:100%, cf. plus haut, on n'y touche pas), mais sur un
	 * grand écran, 1fr aurait fait grandir chaque carte avec tout l'espace
	 * disponible — et comme la hauteur suit la largeur via aspect-ratio
	 * ci-dessous, les cartes devenaient démesurément hautes (grand vide
	 * avant la flèche). minmax(0, 398px) + justify-content:center centre
	 * le groupe des 3 cartes (à leur taille maximale voulue) dans la
	 * pleine largeur du bandeau, comme pour .avena-sim-hero-slider__text-block.
	 */
	.avena-sim-flip-cards {
		grid-template-columns: repeat( 3, minmax( 0, 398px ) );
		justify-content: center;
	}

	/*
	 * Carte verticale (maquette) plutôt qu'horizontale. aspect-ratio plutôt
	 * qu'une height fixe pour rester robuste selon la largeur réelle de la
	 * colonne desktop. min-height (--avena-flip-card-min-h, 460px) reste en
	 * place comme garde-fou : aspect-ratio ne fait qu'ajouter une hauteur
	 * calculée depuis la largeur, il n'entre pas en conflit avec min-height
	 * (qui reste un plancher) — à une largeur de carte normale sur desktop
	 * (~300px+), 2/3 donne déjà une hauteur > 460px, donc c'est bien le
	 * ratio qui pilote visuellement, min-height ne sert que de filet de
	 * sécurité si la colonne devient très étroite près du breakpoint.
	 */
	.avena-sim-flip-card {
		aspect-ratio: 2 / 3;
	}

	/*
	 * Verso uniquement (pas .avena-sim-flip-card__face générique) : le
	 * recto gère déjà son espace vertical via margin-top:auto sur la
	 * flèche, qui absorbe l'espace libre avant que justify-content ait à
	 * intervenir — ajouter ceci sur le recto n'aurait de toute façon aucun
	 * effet visible, mais on cible explicitement le verso pour rester clair
	 * sur l'intention. Centre le bloc titre + SVG/texte + sous-texte comme
	 * un groupe dans la nouvelle hauteur portrait de la carte.
	 */
	.avena-sim-flip-card__face--back {
		justify-content: center;
	}

	/*
	 * Recto : revert du centrage vertical précédent — le texte doit rester
	 * collé en haut (comportement de base : flex-start implicite +
	 * margin-top:auto sur la flèche, cf. règles hors media query), le vide
	 * doit s'accumuler EN DESSOUS du texte, avant la flèche, pas au-dessus.
	 * Rien à déclarer ici : on ne fait qu'annuler l'override précédent
	 * (justify-content:center + position:absolute sur la flèche), les
	 * règles de base suffisent à elles seules pour ce rendu.
	 */

	.avena-sim-flip-card__big,
	.avena-sim-flip-card__intro {
		text-align: center;
	}

	/*
	 * Spec Figma exacte (sous-texte verso, ex: "C'est le temps conseillé...") —
	 * letter-spacing "2%" converti en em comme ailleurs dans cette spec.
	 * ATTENTION débordement : ce sous-texte était à 14px/1.45 suite à un
	 * correctif anti-chevauchement (cartes 1/2, cf. min-height et margins
	 * ci-dessus) — 20px/interligne 100% est une hausse de densité notable,
	 * dans une carte maintenant plus étroite (portrait). À vérifier
	 * visuellement avant de considérer ce point clos.
	 */
	.avena-sim-flip-card__sub {
		text-align: left;
		font-weight: 700;
		font-style: italic;
		font-size: 20px;
		line-height: 1.2;
		letter-spacing: 0;
	}

	/*
	 * Spec Figma (texte du corps recto). Aligné à GAUCHE (correction :
	 * le centrage du Point 1 initial est annulé sur le recto uniquement —
	 * cette classe n'est utilisée que par le recto dans le markup, aucun
	 * risque d'impact verso). PAS de max-width : les cartes réelles sont
	 * plus larges que la carte de référence Figma (~398px, d'où le
	 * 342px de contenu) suite au retrait du max-width global de la
	 * section — capper à 342px fixe laissait du vide à droite sur les
	 * cartes réelles, plus larges. Le paragraphe s'étire donc sur toute
	 * la largeur dispo de la carte (flex stretch par défaut du parent
	 * .avena-sim-flip-card__face, aucune règle ne le limite).
	 */
	.avena-sim-flip-card__text {
		/*
		 * Uniformisé avec .avena-sim-flip-card__sub sur les 3 cartes :
		 * line-height 1, letter-spacing 0.1em (demande client, annule le
		 * line-height 1.2 testé précédemment sur le seul recto).
		 */
		text-align: left;
		font-weight: 700;
		font-size: 20px;
		line-height: 1.2;
		letter-spacing: 0;
		margin-top: 18px;
	}

	/*
	 * Titre : classe PARTAGÉE recto/verso (même sélecteur, même texte des
	 * deux côtés). text-align retiré d'ici et reporté sur 2 règles scopées
	 * par face ci-dessous, pour que le recto passe à gauche SANS changer le
	 * verso (déjà validé, centré). Couleur toujours gérée par
	 * .avena-sim-flip-card--lime/.face, indépendamment de ceci.
	 */
	.avena-sim-flip-card__title {
		font-weight: 700;
		font-size: 30px;
		line-height: 1.2;
		letter-spacing: 0;
	}

	/*
	 * margin-bottom augmenté (20px -> 32px) recto uniquement : plus d'air
	 * entre le titre et le paragraphe. Scopé --front pour ne pas changer
	 * l'espacement titre/contenu du verso (déjà validé).
	 */
	.avena-sim-flip-card__face--front .avena-sim-flip-card__title {
		margin-bottom: 32px;
		text-align: center;
	}

	.avena-sim-flip-card__face--back .avena-sim-flip-card__title {
		text-align: center;
	}
}

@media ( max-width: 820px ) {
	.avena-sim-flip-cards {
		/*
		 * 380px -> 440px : le 1er correctif sous-estimait le besoin mobile.
		 * La largeur de contenu réelle de la face en mobile (~236px : 320px
		 * de wrapper - 2×20px de padding wrapper - 2×22px de padding face)
		 * est proche de celle d'une carte desktop (~248px) alors que le
		 * texte n'est réduit que de ~1-2px (13px vs 14px de sous-texte,
		 * 17px vs 19px de titre) — le nombre de lignes ne se réduit donc
		 * quasiment pas malgré une police plus petite, contrairement à ce
		 * que laissait supposer le calcul du correctif précédent. On se
		 * rapproche donc de la valeur desktop plutôt que de continuer à
		 * réduire proportionnellement.
		 */
		--avena-flip-card-min-h: 440px;
		grid-template-columns: 1fr;
		max-width: 320px;
		padding: 32px 20px; /* même bandeau mint que desktop, padding réduit */
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.avena-sim-flip-card__face {
		padding: 24px 20px;
	}

	.avena-sim-flip-card__title {
		margin: 0 0 22px;
		font-size: 17px;
		text-align: center;
	}

	.avena-sim-flip-card__text {
		font-size: 18px;
		line-height: 1.5;
		margin: 0;
	}

	.avena-sim-flip-card__big {
		margin: 10px 0 20px;
		text-align: center;
	}

	/*
	 * Dimensionnement relatif plutôt que hauteur fixe : 52px fixe pouvait
	 * ne plus correspondre à l'espace réellement disponible selon le
	 * conteneur (Elementor peut re-réduire la largeur en dessous de 320px
	 * dans certaines mises en page). max-width en % du conteneur
	 * (.avena-sim-flip-card__big, ~236px de large ici) + height:auto pour
	 * dériver la hauteur depuis le ratio d'aspect natif de chaque SVG
	 * (~235x253 pour 5ans.svg, ~262x261 pour 5050.svg) sans le déformer.
	 * 20% ≈ 47px de large, avec la même hauteur visuelle qu'avant (~50px)
	 * pour les deux fichiers malgré leurs ratios légèrement différents.
	 */
	.avena-sim-flip-card__big-img {
		max-width: 20%;
		height: auto;
	}

	.avena-sim-flip-card__unit {
		font-size: 18px;
	}

	.avena-sim-flip-card__sub {
		font-size: 13px;
		margin-top: 16px;
		margin-bottom: 16px;
		text-align: center;
	}

	.avena-sim-flip-card__intro {
		font-size: 13px;
		margin-bottom: 14px;
		text-align: center;
	}

	.avena-sim-flip-card__arrow {
		height: 22px !important;
		max-width: 40px;
		margin-top: auto;
	}

	/*
	 * Recto mobile conforme à la maquette. Toutes les règles ci-dessous
	 * sont volontairement limitées à --front : le verso validé reste intact.
	 */
	.avena-sim-flip-card__face--front {
		padding: 36px 24px 28px;
		border-radius: 36px;
	}

	.avena-sim-flip-card__face--front .avena-sim-flip-card__title {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 58px;
		margin: 0 0 34px;
		font-size: 23px;
		font-weight: 800;
		line-height: 1.15;
		text-align: center;
	}

	.avena-sim-flip-card__face--front .avena-sim-flip-card__text {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: 0;
		text-align: left;
	}

	.avena-sim-flip-card__face--front .avena-sim-flip-card__arrow {
		position: absolute;
		right: 24px;
		bottom: 28px;
		width: 45px;
		height: 45px !important;
		max-width: none;
		margin: 0;
	}

	.avena-sim-flip-card__face--front .avena-sim-flip-card__tap-hint {
		display: none !important;
	}
}