/*
 * cards/eventail — engagement 5 : aucun hexadecimal, valeurs de repli comprises.
 *
 * Tout est cadre sous .ivy-cards--eventail. Le CSS de TOUTES les compositions
 * d'un rayon est charge sur chaque page qui l'emploie : sans ce cadre, les
 * trois produits se repeindraient l'un l'autre selon l'ordre de chargement.
 * Defaut constate sur le rayon navbar, pas suppose.
 *
 * ZERO JavaScript. C'est le point de cette composition : la source pilotait
 * grid-template-columns depuis un ecouteur de survol, alors que :hover et
 * :focus-within disent exactement la meme chose au CSS. Le socle interdit au
 * JavaScript de decider de l'apparence ; ici il n'a carrement rien a faire.
 */

.ivy-cards--eventail {
	/* La part qu'occupe le panneau ouvert, contre 1 pour les autres. */
	--ivy-eventail-ouvert: 1.9;
	--ivy-eventail-gap: 14px;

	/*
	 * Les colonnes du panneau, gardees ENTIERES dans une propriete plutot
	 * que reconstruites autour d'un nombre. « minmax( 0, var( --x ) fr ) »
	 * n'est pas du CSS : var() substitue des jetons, et « 0.95 fr » n'est
	 * pas une valeur. Pire qu'une erreur visible — une declaration qui
	 * contient var() et se revele invalide vaut `unset`, elle ne retombe
	 * PAS sur la declaration precedente. grid-template-columns reprenait
	 * donc `none`, le panneau n'avait plus qu'une colonne, et l'image se
	 * rangeait sous le texte au lieu de s'ouvrir a cote. Constate a
	 * l'ecran, pas au parseur.
	 */
	--ivy-eventail-ferme: minmax( 0, 1fr ) minmax( 0, 0fr );
	--ivy-eventail-ouvertes: minmax( 0, 1fr ) minmax( 0, 0.95fr );

	width: 100%;
	color: var( --ivy-ink, rgb( 17 17 17 ) );
}

/*
 * L'INTRO — label, titre, description, tous facultatifs — se pose AVANT la
 * bande, et non dedans : la bande est une surface, l'intro la presente. Elle
 * s'aligne donc sur le bord exterieur de la surface, pas sur le texte du
 * premier panneau, qui est deja rentre de deux marges.
 *
 * Meme geometrie que les deux autres produits du rayon, ecrite au long dans
 * cards/etapes : grille, largeur pleine, et chaque partie qui porte son
 * propre `justify-self` pour que le choix Left / Center / Right du panneau
 * deplace vraiment le bloc.
 */
.ivy-cards--eventail .ivy-cards__intro {
	display: grid;
	width: 100%;
	margin: 0 0 clamp( 24px, 4vw, 40px );
}

.ivy-cards--eventail .ivy-cards__intro-eyebrow {
	display: block;
	margin-bottom: 12px;
	color: var( --ivy-intro_eyebrow-color, var( --ivy-muted, rgb( 82 82 82 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ivy-cards--eventail .ivy-cards__intro-title {
	margin: 0;
	color: var( --ivy-intro_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-h2 );
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.ivy-cards--eventail .ivy-cards__intro-text {
	margin: 12px 0 0;
	color: var( --ivy-intro_text-color, var( --ivy-muted, rgb( 110 110 110 ) ) );
	line-height: 1.6;
}

/* La mesure de lecture, et le choix d'alignement de CHAQUE partie.
   `inline-size: fit-content` est ce qui rend `justify-self` operant : un bloc
   large comme son parent n'a nulle part ou aller. */
.ivy-cards--eventail .ivy-cards__intro-eyebrow,
.ivy-cards--eventail .ivy-cards__intro-title,
.ivy-cards--eventail .ivy-cards__intro-text {
	inline-size: fit-content;
	max-inline-size: 100%;
	justify-self: var( --ivy-alignment, start );
}

.ivy-cards--eventail .ivy-cards__intro-title {
	max-inline-size: min( 100%, 62ch );
}

.ivy-cards--eventail .ivy-cards__intro-text {
	max-inline-size: min( 100%, 58ch );
}

.ivy-cards--eventail .ivy-cards__band {
	display: flex;
	gap: var( --ivy-eventail-gap );
	width: 100%;
	margin: 0;
	padding: var( --ivy-eventail-gap );
	border-radius: var( --ivy-radius-surface, 24px );
	background: color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 6%, transparent );
	list-style: none;
}

/*
 * Le panneau. Deux colonnes : le texte, puis l'image qui vaut zero tant que
 * le panneau est ferme. C'est ce rapport-la qui s'anime, pas une largeur en
 * pixels — la bande reste donc juste quel que soit le nombre de panneaux.
 */
.ivy-cards--eventail .ivy-cards__panel {
	position: relative;
	display: grid;
	grid-template-columns: var( --ivy-eventail-ferme );
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: max( 0px, calc( var( --ivy-radius-surface, 24px ) - 8px ) );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	transition:
		flex-grow calc( 550ms * var( --ivy-motion, 1 ) ) cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		grid-template-columns calc( 550ms * var( --ivy-motion, 1 ) )
			cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		box-shadow calc( 300ms * var( --ivy-motion, 1 ) ) ease;
}

/*
 * Les trois etats d'ouverture, et il n'en existe pas d'autre :
 *
 * 1. le panneau survole ;
 * 2. le panneau qui contient le focus — c'est ce qui rend l'eventail
 *    utilisable au clavier sans qu'aucun panneau ne soit focalisable ;
 * 3. le PREMIER panneau, tant que la bande n'est ni survolee ni focalisee —
 *    l'etat de repos, que la source posait par une classe ecrite en PHP.
 *
 * Regroupes ici parce qu'ils portent la meme declaration : les separer
 * inviterait a les faire diverger.
 */
.ivy-cards--eventail .ivy-cards__panel:hover,
.ivy-cards--eventail .ivy-cards__panel:focus-within,
.ivy-cards--eventail .ivy-cards__band:not( :hover ):not( :focus-within ) .ivy-cards__panel:first-child {
	flex-grow: var( --ivy-eventail-ouvert );
	grid-template-columns: var( --ivy-eventail-ouvertes );
	box-shadow: 0 18px 45px color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 8%, transparent );
}

/*
 * PAS D'IMAGE, PAS DE PISTE. Le gabarit ne rend le media ni sans image ni
 * quand la partie est masquee — engagement 3 — mais une grille declare ses
 * pistes sans savoir ce qui sera rendu. Le panneau ouvert reservait donc la
 * piste de l'image dans tous les cas : mesure a 1440 px sur
 * /vitrine-eventail/, 202 px de vide sur 415 de panneau, la MOITIE. Defaut
 * rapporte sur un site client, capture a l'appui. Meme forme que `faq/image`,
 * ecrite au long dans PASSATION §3.
 *
 * `:has()` regarde ce qui est REELLEMENT rendu, ce qu'aucune condition PHP ne
 * peut faire savoir a la feuille.
 *
 * Ce sont les DEUX PROPRIETES qu'on redefinit, pas grid-template-columns : le
 * panneau ouvert et le panneau ferme lisent chacun la leur depuis trois
 * regles d'etat differentes — repos, survol, focus. Corriger la propriete les
 * couvre toutes ensemble, et aucune ne peut plus diverger ; corriger la
 * declaration aurait demande de rejouer les trois selecteurs, donc d'en
 * oublier un. Le panneau continue de s'elargir : le geste de l'eventail ne
 * dependait pas de l'image, c'est le texte qui prend sa place.
 */
.ivy-cards--eventail .ivy-cards__panel:not( :has( .ivy-cards__media ) ) {
	--ivy-eventail-ferme: minmax( 0, 1fr );
	--ivy-eventail-ouvertes: minmax( 0, 1fr );
}

.ivy-cards--eventail .ivy-cards__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px;
}

.ivy-cards--eventail .ivy-cards__number {
	margin-bottom: 10px;
	color: var( --ivy-number-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	line-height: 1;
	letter-spacing: 0.08em;
}

.ivy-cards--eventail .ivy-cards__title {
	margin: 0 0 14px;
	color: var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
}

/* Le lien herite : le controle de couleur du titre ecrit sur le <h3>, et une
   liste separee par des virgules est interdite par le contrat. */
.ivy-cards--eventail .ivy-cards__title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

/* La surface entiere devient cliquable sans envelopper le panneau dans un
   <a>, qui avalerait l'image dans le nom accessible du lien. */
.ivy-cards--eventail .ivy-cards__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ivy-cards--eventail .ivy-cards__text {
	margin: 0;
	line-height: 1.7;
	color: var( --ivy-text-color, var( --ivy-muted, rgb( 110 110 110 ) ) );
}

.ivy-cards--eventail .ivy-cards__media {
	position: relative;
	min-width: 0;
	min-height: 0;
	align-self: stretch;
	margin: 20px 20px 20px 0;
	overflow: hidden;
	border-radius: max( 0px, calc( var( --ivy-radius-surface, 24px ) - 10px ) );
	opacity: 0;
	transition: opacity calc( 280ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-cards--eventail .ivy-cards__panel:hover .ivy-cards__media,
.ivy-cards--eventail .ivy-cards__panel:focus-within .ivy-cards__media,
.ivy-cards--eventail .ivy-cards__band:not( :hover ):not( :focus-within ) .ivy-cards__panel:first-child .ivy-cards__media {
	opacity: 1;
}

.ivy-cards--eventail .ivy-cards__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * L'IMAGE SUIT LE RAYON DE SON CADRE. La famille `border` pose son
	 * `border-radius` sur la figure, jamais sur l'img : sans cet heritage,
	 * un `img { border-radius }` de kit de site gouverne l'image et le
	 * reglage du panneau est visuellement muet. Mesure du 22 aout 2026 sur
	 * l'atelier 8893 : figure a 3 px, image a 30 px.
	 */
	border-radius: inherit;
}

/*
 * DES-EVENTAILLAGE. Le survol n'existe pas sur un ecran tactile : garder
 * l'eventail y rendrait deux images sur trois inatteignables. La bande
 * devient donc une grille, et TOUTES les images sont visibles ensemble.
 *
 * Le point de rupture est declare en largeur plutot qu'en (hover: none) : un
 * portable a ecran tactile a les deux, et c'est la place disponible, pas le
 * materiel, qui decide si trois panneaux tiennent cote a cote.
 */
@media ( max-width: 1024px ) {
	.ivy-cards--eventail .ivy-cards__band {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.ivy-cards--eventail .ivy-cards__panel,
	.ivy-cards--eventail .ivy-cards__panel:hover,
	.ivy-cards--eventail .ivy-cards__panel:focus-within,
	.ivy-cards--eventail .ivy-cards__band:not( :hover ):not( :focus-within ) .ivy-cards__panel:first-child {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		box-shadow: none;
		transition: none;
	}

	/* Un troisieme panneau seul sur sa ligne prend toute la largeur plutot
	   que de laisser un trou. Repris de la source, et c'est juste. */
	.ivy-cards--eventail .ivy-cards__panel:nth-child( 3 ):last-child {
		grid-column: 1 / -1;
	}

	.ivy-cards--eventail .ivy-cards__content {
		padding: 28px;
	}

	.ivy-cards--eventail .ivy-cards__media,
	.ivy-cards--eventail .ivy-cards__panel:hover .ivy-cards__media,
	.ivy-cards--eventail .ivy-cards__panel:focus-within .ivy-cards__media,
	.ivy-cards--eventail .ivy-cards__band:not( :hover ):not( :focus-within ) .ivy-cards__panel:first-child .ivy-cards__media {
		aspect-ratio: 4 / 3;
		align-self: auto;
		margin: 0 24px 24px;
		opacity: 1;
	}
}

@media ( max-width: 640px ) {
	.ivy-cards--eventail .ivy-cards__band {
		grid-template-columns: minmax( 0, 1fr );
		padding: 12px;
		border-radius: max( 0px, calc( var( --ivy-radius-surface, 24px ) - 4px ) );
	}

	.ivy-cards--eventail .ivy-cards__content {
		padding: 26px;
	}

	.ivy-cards--eventail .ivy-cards__media {
		margin: 0 20px 20px;
	}
}

/*
 * Engagement 8. L'ouverture reste — c'est elle qui donne acces a l'image, et
 * la supprimer retirerait du contenu a qui demande moins de mouvement. Ce
 * qui tombe, c'est le TRAJET : le panneau bascule d'un etat a l'autre sans
 * transition.
 */
@media ( prefers-reduced-motion: reduce ) {
	.ivy-cards--eventail .ivy-cards__panel,
	.ivy-cards--eventail .ivy-cards__media {
		transition: none;
	}
}