/*
 * intro/manifeste-cartes — la declaration ET sa suite de cartes, dans UNE
 * boite epinglee.
 *
 * Eyebrow, titre et texte restent colles pendant que jusqu'a quatre cartes
 * les rejoignent une a une, puis le bouton ; l'ensemble repart ensemble.
 * Tout ce qui touche la sequence part de l'etat REPLIE et s'enrichit sous
 * `.ivy-scene-ready` : ecrit dans l'autre sens, une page sans JavaScript
 * rendrait des cartes invisibles.
 *
 * Le titre s'allume MOT A MOT, pilote par `--ivy-scene` — voir `template.php`
 * pour le pourquoi.
 *
 * NE PARTAGE AUCUNE CLASSE avec `intro/manifeste`. Le rayon charge toutes ses
 * feuilles sur chaque page (PASSATION §3) : une regle ecrite sous
 * `.ivy-intro--manifeste` habillerait ce produit-ci par accident. Les regles
 * communes de la declaration sont donc recopiees sous la racine de CE produit.
 */
.ivy-intro--manifeste-cartes {
	--ivy-manifeste-top: 0px;

	padding-inline: clamp( 20px, 5vw, 72px );
	background: transparent;
}

/* ---- le bloc de declaration ----
   AUCUNE BORNE DE LARGEUR : la mesure appartient au conteneur parent et au
   controle `Width` du panneau. Ni `max-width`, ni `place-content` — son
   `justify-content: center` sort la colonne du mode etire. Garde en
   `IntroManifesteCartesLargeurTest`. */
.ivy-intro--manifeste-cartes .ivy-intro__inner {
	display: grid;
	inline-size: 100%;
	align-content: center;
	justify-items: center;
	text-align: center;
}

.ivy-intro--manifeste-cartes .ivy-intro__eyebrow {
	display: block;
	margin-bottom: clamp( 24px, 4vw, 48px );
	color: var( --ivy-eyebrow-color, var( --ivy-muted, rgb( 82 82 82 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ivy-intro--manifeste-cartes .ivy-intro__title {
	margin: 0;
	color: var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: .96;
	text-align: center;
}

/* Le texte n'a pas de regle superieure ici : dans la boite epinglee c'est la
   rangee de cartes qui pose la ligne. */
.ivy-intro--manifeste-cartes .ivy-intro__text {
	margin-top: clamp( 24px, 3.5vw, 40px );
	color: var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) );
	font-size: var( --ivy-font-body );
	line-height: 1.7;
	text-align: center;
}

/* ---- la boite epinglee ---- */
.ivy-intro--manifeste-cartes .ivy-intro__scene {
	position: relative;
}

/* Collant PAR DEFAUT : le runtime epingle en LISANT `position: sticky`, et
   --ivy-pin-lead le pose au milieu de la fenetre (PASSATION §3). */
.ivy-intro--manifeste-cartes .ivy-intro__pin {
	position: sticky;
	top: max( var( --ivy-manifeste-top ), var( --ivy-pin-lead, 0px ) );
	display: grid;
	min-height: 100svh;
	align-content: center;
	justify-items: center;
	gap: clamp( 24px, 4vh, 56px );
	padding-block: clamp( 48px, 7vh, 96px );
}

.ivy-intro--manifeste-cartes .ivy-intro__spacer {
	height: var( --ivy-scene-distance, 0px );
}

/* Reveil du titre au caractere, cadence par `--ivy-scene` et non par un
   ScrollTrigger : chaque MOT porte son rang `--wi` (les caracteres l'heritent),
   et s'ouvre sur une fenetre etroite de la course — tout est plein avant la
   premiere carte, comme le `data-ivy-split-scroll` du manifeste nu. */
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word { --wi: 0; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 2 ) { --wi: 1; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 3 ) { --wi: 2; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 4 ) { --wi: 3; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 5 ) { --wi: 4; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 6 ) { --wi: 5; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 7 ) { --wi: 6; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 8 ) { --wi: 7; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 9 ) { --wi: 8; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( 10 ) { --wi: 9; }
.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-word:nth-child( n + 11 ) { --wi: 10; }

.ivy-motion-ready .ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-char {
	opacity: .12;
}

.ivy-intro--manifeste-cartes .ivy-scene-ready .ivy-intro__title .ivy-split-char {
	--lit: clamp( 0, calc( ( var( --ivy-scene, 0 ) - var( --wi, 0 ) * .006 ) * 17 ), 1 );

	opacity: calc( .12 + .88 * var( --lit ) );
	will-change: opacity;
}

/* ---- la rangee de cartes : elle suit le conteneur, pas une borne ---- */
.ivy-intro--manifeste-cartes .ivy-intro__cards {
	display: grid;
	inline-size: 100%;
	margin: 0 auto;
	padding: 0;
	gap: clamp( 14px, 2vw, 32px );
	grid-template-columns: repeat( var( --ivy-count, 1 ), minmax( 0, 1fr ) );
	list-style: none;
}

.ivy-intro--manifeste-cartes .ivy-intro__card {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: clamp( 6px, .8vw, 12px );
	padding-top: 16px;
	border: var( --ivy-item-border-width, 0 ) solid var( --ivy-item-border-color, rgb( 17 17 17 / 20% ) );
	border-radius: var( --ivy-item-border-radius, 0 );
	background: var( --ivy-item-background-color, transparent );
	text-align: center;

	/* LA CARTE DECLENCHE LE SURVOL, comme une Icon Box (composition.json,
	   `selectors.*_hover`). Proprietes NOMMEES, jamais `all` : l'opacite et
	   la translation appartiennent a la course de la scene. */
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ivy-intro--manifeste-cartes .ivy-intro__icon {
	display: grid;
	width: 40px;
	aspect-ratio: 1;
	place-items: center;
	border: var( --ivy-item_icon-border-width, 0 ) solid var( --ivy-item_icon-border-color, transparent );
	border-radius: var( --ivy-item_icon-border-radius, 50% );
	background: var( --ivy-item_icon-background-color, transparent );
	color: var( --ivy-item_icon-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	font-size: 1.35rem;
	line-height: 1;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ivy-intro--manifeste-cartes .ivy-intro__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ivy-intro--manifeste-cartes .ivy-intro__card-title {
	margin: 0;
	color: var( --ivy-item_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.12;
}

.ivy-intro--manifeste-cartes .ivy-intro__card-text {
	max-width: 24ch;
	margin: 0;
	color: var( --ivy-item_text-color, var( --ivy-muted, rgb( 82 82 82 ) ) );
	font-size: var( --ivy-font-label );
	line-height: 1.45;
}

/* ---- le bouton, dernier a s'ouvrir ---- */
.ivy-intro--manifeste-cartes .ivy-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp( 8px, 1.5vh, 24px );
	align-items: center;
	justify-content: center;
}

:where( .ivy-intro--manifeste-cartes ) .ivy-intro__cta--secondary {
	border-color: var( --ivy-cta_secondary-border-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	background: var( --ivy-cta_secondary-background-color, transparent );
	color: var( --ivy-cta_secondary-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
}

:where( .ivy-intro--manifeste-cartes ) .ivy-intro__cta {
	display: inline-flex;
	min-height: 48px;
	max-width: 100%;
	padding: .82em 1.5em;
	align-items: center;
	justify-content: center;
	border: var( --ivy-cta-border-width, 1px ) solid var( --ivy-cta-border-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	border-radius: var( --ivy-cta-border-radius, var( --ivy-radius-action, 999px ) );
	background: var( --ivy-cta-background-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	color: var( --ivy-cta-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease;
}

:where( .ivy-intro--manifeste-cartes ) .ivy-intro__cta:hover {
	background: transparent;
	color: var( --ivy-cta-color_hover, var( --ivy-ink, rgb( 17 17 17 ) ) );
}

:where( .ivy-intro--manifeste-cartes ) .ivy-intro__cta:focus-visible {
	outline: 3px solid var( --ivy-accent, rgb( 17 17 17 ) );
	outline-offset: 4px;
}

/*
 * ETAT TENU. --ivy-place porte tout le geste : la carte de rang i s'ouvre sur
 * le cran [i, i+1], le bouton sur le dernier.
 *
 * --ivy-lead est l'amorce : sur les premiers 12 % de la course, --ivy-place
 * reste negatif — rien ne s'ouvre — pendant que le titre finit de s'allumer.
 * C'est la moitie « rejoins par les cartes APRES » du contrat.
 *
 * Le .85 est une MESURE : les derniers pixels d'une course epinglee ne sont
 * pas atteignables quand la section finit la page — bouton mesure a 0,71
 * d'ouverture le 24 aout, fenetre de 720. La sequence finit donc a 85 %, et
 * les 15 % restants sont une pause assumee.
 */
.ivy-intro--manifeste-cartes .ivy-intro__scene.ivy-scene-ready {
	--ivy-lead: .12;
	--ivy-place: calc( ( var( --ivy-scene, 0 ) - var( --ivy-lead ) ) * ( var( --ivy-count, 1 ) + 1 ) / ( .85 - var( --ivy-lead ) ) );
}

.ivy-intro--manifeste-cartes .ivy-scene-ready .ivy-intro__card {
	--ivy-show: clamp( 0, calc( var( --ivy-place ) - var( --ivy-index ) ), 1 );

	opacity: var( --ivy-show );
	transform: translate3d( 0, calc( ( 1 - var( --ivy-show ) ) * 44px ), 0 );
	will-change: transform;
}

.ivy-intro--manifeste-cartes .ivy-scene-ready .ivy-intro__actions {
	--ivy-show: clamp( 0, calc( var( --ivy-place ) - var( --ivy-count, 1 ) ), 1 );

	opacity: var( --ivy-show );
	transform: translate3d( 0, calc( ( 1 - var( --ivy-show ) ) * 32px ), 0 );
}

/* Un element a opacite nulle reste focalisable : sans ceci, le clavier
   atteint le bouton avant son ouverture. */
.ivy-intro--manifeste-cartes .ivy-scene-ready .ivy-intro__card:focus-within,
.ivy-intro--manifeste-cartes .ivy-scene-ready .ivy-intro__actions:focus-within {
	opacity: 1;
	transform: none;
}

@media ( max-width: 900px ) {
	.ivy-intro--manifeste-cartes .ivy-intro__title {
		line-height: .98;
	}

	.ivy-intro--manifeste-cartes .ivy-intro__pin {
		gap: clamp( 20px, 3.5vh, 40px );
		padding-block: clamp( 40px, 6vh, 72px );
	}

	/* Deux colonnes : la sequence se lit en Z, l'ordre reste lisible. */
	.ivy-intro--manifeste-cartes .ivy-intro__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: clamp( 14px, 3vw, 24px );
	}

	.ivy-intro--manifeste-cartes .ivy-intro__card-text {
		max-width: 28ch;
	}
}

@media ( max-width: 560px ) {
	.ivy-intro--manifeste-cartes .ivy-intro__cards {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Fenetre courte : moins d'air autour de la boite epinglee. */
@media ( max-height: 820px ) {
	.ivy-intro--manifeste-cartes .ivy-intro__pin {
		gap: clamp( 16px, 2.5vh, 32px );
		padding-block: clamp( 32px, 5vh, 56px );
	}

	.ivy-intro--manifeste-cartes .ivy-intro__text {
		margin-top: clamp( 16px, 2.5vw, 28px );
	}
}

/* Fenetre trop courte : le pin cesse d'etre collant, le runtime le LIT et
   lache la scene. Sur la HAUTEUR, c'est elle qui manque a une rangee. */
@media ( max-height: 620px ) {
	.ivy-intro--manifeste-cartes .ivy-intro__pin {
		position: relative;
		top: auto;
		min-height: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	/* Engagement 8 : le runtime ne tient pas la scene ici ; ces lignes ne
	   servent que si un navigateur ignore la branche. */
	.ivy-intro--manifeste-cartes .ivy-intro__pin {
		position: relative;
		top: auto;
		min-height: 0;
	}

	.ivy-intro--manifeste-cartes .ivy-intro__title .ivy-split-char {
		opacity: 1;
		will-change: auto;
	}

	.ivy-intro--manifeste-cartes .ivy-intro__card,
	.ivy-intro--manifeste-cartes .ivy-intro__actions {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	/* Le survol change d'etat, il ne le fait pas glisser. */
	.ivy-intro--manifeste-cartes .ivy-intro__card,
	.ivy-intro--manifeste-cartes .ivy-intro__icon {
		transition: none;
	}
}