/* =============================================================================
   HERO D'ACCUEIL
   Maquette 1440 : en-tête pilule (70 px) dans la colonne gauche, visuel arrondi
   (40 px), trois cartes blanches à droite (230 × 150), carte actualité rose
   à cheval sur le bas du visuel. Fond : la section marine qui l'entoure.

   Variables pilotées par hero.js pendant le défilement épinglé :
     --k1 --k2 --k3   avancement des trois cartes (0 → 1), en escalier
     --p              avancement global (celui de la carte la plus lente)
   Et sur <body> : --split, la place laissée aux cartes (lue par l'en-tête).
   ============================================================================= */

.cci-hero {
	--cartes: clamp(12.5rem, 8rem + 7vw, 14.375rem);  /* 230 px à 1440 */
	--ecart: 1rem;
	--k1: 0;
	--k2: 0;
	--k3: 0;
	--p: 0;
	position: relative;
	color: var(--blanc);
}

/* --- Structure : épinglage (grand écran) ------------------------------------ */
.cci-hero__pin {
	position: relative;
}

/* Indice de défilement : grand écran épinglé uniquement (voir plus bas). */
.cci-hero__indice {
	display: none;
}

.cci-hero__cadre {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--cartes);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: var(--ecart);
	padding: var(--pad);
}

.cci-hero__main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	grid-row: 1 / -1;
	/* La place de l'en-tête du thème, posé en position fixe au-dessus. */
	padding-top: calc(var(--header-h) + 1.3rem);
}

/* --- Visuel ------------------------------------------------------------------ */
.cci-hero__visuel {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 30rem;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--marine);
}

.cci-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cci-hero .cci-hero__img,
.cci-hero .cci-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(calc(1.07 - var(--p) * 0.07));
	transform-origin: 50% 50%;
}

.cci-hero__video {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.cci-hero__video.is-playing {
	opacity: 1;
}

/* Voile de lisibilité : dégradé de la maquette (marine opaque à gauche,
   bleu translucide à droite), plus un fond uniforme léger. Les couleurs sont
   des mélanges des tokens : aucune valeur en dur. */
.cci-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--marine) 82%, transparent),
			color-mix(in srgb, var(--marine) 45%, transparent) 55%,
			color-mix(in srgb, var(--marine) 20%, transparent));
}

.cci-hero__contenu {
	position: relative;
	padding: clamp(1.5rem, 1rem + 2.6vw, 3.8rem);
	max-width: 52rem;
}

.cci-hero__titre {
	color: var(--blanc);
}

/* Chaque ligne glisse depuis sa propre fenêtre masquée. */
.cci-hero__ligne {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.cci-hero__ligne > span {
	display: block;
}

/* Bouton pause de la vidéo (posé par le script quand la vidéo démarre). */
.cci-hero__pause {
	position: absolute;
	z-index: 2;
	left: 1rem;
	bottom: 1rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: var(--blanc);
}

.cci-hero__pause-icone {
	width: 0.75rem;
	height: 0.875rem;
	border-inline: 0.25rem solid currentColor;
}

.cci-hero__pause[aria-pressed='true'] .cci-hero__pause-icone {
	width: 0;
	height: 0;
	margin-left: 0.2rem;
	border-style: solid;
	border-width: 0.4375rem 0 0.4375rem 0.75rem;
	border-color: transparent transparent transparent currentColor;
}

/* --- Recherche guidée -------------------------------------------------------- */
.cci-finder {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.8rem);
	padding: 0.1875rem 0.1875rem 0.1875rem 0.5rem; /* pilule de 54 px, bouton de 48 */
	border-radius: var(--r-pill);
	background: var(--blanc);
	color: var(--marine);
	max-width: 100%;
}

.cci-finder__champ {
	position: relative;
	display: flex;
	align-items: center;
}

.cci-finder__champ + .cci-finder__champ::before {
	/* Séparateur vertical de la maquette (46 px). */
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	height: 2.875rem;
	border-left: 1px solid var(--rose);
	transform: translateY(-50%);
}

.cci-finder__select {
	appearance: none;
	height: 2.75rem;
	padding: 0 2.4rem 0 1.25rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--marine);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

.cci-finder__chevron {
	position: absolute;
	right: 1rem;
	width: 1rem;
	height: 1rem;
	color: var(--rouge);
	pointer-events: none;
	transition: transform 0.4s var(--ease-out);
}

.cci-finder__go {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 3rem;           /* 48, comme la loupe de l'en-tête */
	min-width: 3rem;
	margin-left: 0.25rem;
	padding: 0 0.6rem;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--rouge);
	color: var(--blanc);
	overflow: hidden;
	transition: background-color 0.4s ease, padding 0.6s var(--ease-out), gap 0.6s var(--ease-out);
}

.cci-finder__go:hover {
	background: var(--marine);
}

.cci-finder__loupe {
	width: 1.625rem;
	height: 1.625rem;
}

/* Le texte du bouton existe toujours (nom accessible du bouton), il n'est
   déplié qu'une fois les choix faits. */
.cci-finder__go-texte {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	font-size: 0.9375rem;
	font-weight: var(--fw-semibold);
	transition: max-width 0.7s var(--ease-out), opacity 0.4s ease 0.15s;
}

.cci-finder.is-pret .cci-finder__go {
	gap: 0.5rem;
	padding: 0 1.1rem 0 0.8rem;
}

.cci-finder.is-pret .cci-finder__go-texte {
	max-width: 16rem;
	opacity: 1;
}

.cci-finder.is-pret .cci-finder__go::after {
	/* Reflet qui passe : le bouton invite à cliquer, sans clignoter. */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	translate: -120% 0;
	animation: cci-reflet 2.6s var(--ease-out) 0.5s infinite;
}

@keyframes cci-reflet {
	0% { translate: -120% 0; }
	45%, 100% { translate: 120% 0; }
}

/* Version améliorée (script) : boutons à la place des listes natives. */
.cci-finder.is-guide .cci-finder__select {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.cci-finder__sel {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	height: 2.75rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--marine);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.cci-finder__sel .cci-finder__chevron {
	position: static;
}

.cci-finder__sel[aria-expanded='true'] .cci-finder__chevron {
	transform: rotate(180deg);
}

.cci-finder__sel.is-choisi .cci-finder__val {
	color: var(--rouge-texte);
	font-weight: var(--fw-semibold);
}

.cci-finder__val {
	display: inline-block;
	max-width: 11rem;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: transform 0.45s var(--ease-out), opacity 0.3s ease;
}

.cci-finder__val.is-sortant {
	transform: translateY(-110%);
	opacity: 0;
}

.cci-finder__val.is-entrant {
	transform: translateY(110%);
	opacity: 0;
	transition: none;
}

/* Pastille rose qui glisse sous l'étape ouverte. */
.cci-finder__surligne {
	position: absolute;
	z-index: 0;
	top: 0.375rem;
	bottom: 0.375rem;
	left: 0;
	width: 0;
	border-radius: var(--r-pill);
	background: var(--rose);
	opacity: 0;
	transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), opacity 0.3s ease;
}

/* Panneau des réponses (ajouté au <body> par le script). */
.cci-finder-voile {
	position: fixed;
	inset: 0;
	z-index: 140;
	/* Posé DANS la zone épinglée du hero : l'en-tête du site reste net
	   au-dessus, seul le hero se floute derrière la question posée. */
	background: color-mix(in srgb, var(--marine) 55%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.cci-finder-voile.is-ouvert {
	opacity: 1;
	pointer-events: auto;
}

/* ⚠️ PAS D'`isolation` NI DE z-index SUR LE VISUEL ET LE CONTENU : le
   formulaire doit pouvoir passer AU-DESSUS du voile (posé dans la même zone
   épinglée), et un contexte d'empilement intermédiaire l'en empêcherait. */
.cci-hero.is-recherche .cci-finder {
	z-index: 150;
	box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.3);
}

.cci-finder-panneau {
	position: fixed;
	z-index: 160;
	left: 0;
	top: 0;
	width: min(29rem, calc(100vw - 1.5rem));
	padding: 1.25rem 1.375rem 1rem;
	border-radius: var(--r-lg);
	background: var(--blanc);
	color: var(--marine);
	box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, 0.3);
	opacity: 0;
	scale: 0.94;
	translate: 0 -0.5rem;
	pointer-events: none;
	transition: opacity 0.35s ease, scale 0.5s var(--ease-out), translate 0.5s var(--ease-out), left 0.6s var(--ease-out), top 0.6s var(--ease-out);
}

.cci-finder-panneau.is-ouvert {
	opacity: 1;
	scale: 1;
	translate: 0 0;
	pointer-events: auto;
}

.cci-finder-panneau__etapes {
	display: flex;
	gap: 0.375rem;
	margin-bottom: 1rem;
}

.cci-finder-panneau__etapes i {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: var(--creme);
	overflow: hidden;
}

.cci-finder-panneau__etapes i::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--rouge);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.6s var(--ease-out);
}

.cci-finder-panneau__etapes i.on::after {
	transform: scaleX(1);
}

.cci-finder-panneau__num {
	margin-bottom: 0.25rem;
	color: var(--rouge-texte);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
}

.cci-finder-panneau__question {
	margin-bottom: 1rem;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.cci-finder-panneau__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cci-finder-panneau__opt {
	padding: 0.625rem 1rem;
	border: 1.5px solid var(--rose);
	border-radius: var(--r-pill);
	background: var(--blanc);
	color: var(--marine);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	opacity: 0;
	translate: 0 0.75rem;
	animation: cci-opt 0.5s var(--ease-out) forwards;
	animation-delay: calc(var(--k) * 45ms + 80ms);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cci-finder-panneau__opt:hover {
	background: var(--rose);
}

.cci-finder-panneau__opt[aria-pressed='true'] {
	border-color: var(--rouge);
	background: var(--rouge);
	color: var(--blanc);
}

@keyframes cci-opt {
	to {
		opacity: 1;
		translate: 0 0;
	}
}

.cci-finder-panneau__pied {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.125rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--creme);
	font-size: 0.875rem;
}

.cci-finder-panneau__pied button {
	padding: 0.25rem 0.125rem;
	border: 0;
	background: none;
	color: var(--rouge-texte);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- Cartes d'accès ---------------------------------------------------------- */
.cci-hero__acces {
	display: flex;
	flex-direction: column;
	gap: var(--ecart);
	min-height: 0;
}

.cci-hero__carte {
	--k: var(--k1);
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-end;
	min-height: 7.5rem;
	padding: 1.25rem 1.5rem 1.4rem 1.75rem;
	border-radius: var(--r-lg);
	background: var(--blanc);
	color: var(--marine);
	text-decoration: none;
	transform: translateX(calc(var(--k) * (var(--cartes) + var(--ecart) + var(--pad) + 1.25rem)));
}

.cci-hero__carte:nth-child(2) { --k: var(--k2); }
.cci-hero__carte:nth-child(3) { --k: var(--k3); }

.cci-hero__carte-label {
	max-width: 8em;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.cci-hero__carte .pastille {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}

.cci-hero__carte:hover .pastille,
.cci-hero__carte:focus-visible .pastille {
	background: var(--rouge);
	color: var(--blanc);
	transform: rotate(45deg);
}

/* --- Carte actualité --------------------------------------------------------
   À cheval sur le visuel. L'anneau de la couleur du fond (box-shadow) dessine
   l'encoche de la maquette : le visuel semble découpé autour de la carte. */
.cci-hero__actu {
	--k: var(--k3);
	position: relative;
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	display: flex;
	align-items: stretch;
	gap: 1rem;
	width: min(32.2rem, 38vw);
	min-height: 9.375rem;
	padding: 0.5rem;
	border-radius: var(--r-lg);
	background: var(--rose);
	color: var(--marine);
	box-shadow: 0 0 0 var(--ecart) var(--bg);
	transform: translateX(calc(var(--k) * (100% + var(--pad) + 2rem)));
}

.cci-hero__actu-texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex: 1;
	padding: 0.5rem 0.25rem 0.5rem 1.25rem;
}

.cci-hero__actu-tag {
	padding: 0.0625rem 0.6875rem;
	border-radius: var(--r-pill);
	background: var(--rouge);   /* blanc sur rouge : 4,8:1, conforme AA */
	color: var(--blanc);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.cci-hero__actu-titre {
	margin-top: auto;
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.cci-hero .cci-hero__actu-lien {
	color: inherit;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	/* Écrit explicitement : Elementor retire le soulignement des liens. */
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Toute la carte est cliquable (un seul lien, étendu). */
.cci-hero__actu-lien::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cci-hero .cci-hero__actu-img {
	width: 43%;
	max-width: 13.9rem;
	object-fit: cover;
	border-radius: var(--r-md);
}

/* --- Bandeau d'accès (bas d'écran) ------------------------------------------ */
.cci-bandeau {
	position: fixed;
	z-index: 90;
	left: 50%;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	display: flex;
	gap: 0.6875rem;
	max-width: calc(100vw - var(--pad) * 2);
	padding: 0.375rem;
	border-radius: var(--r-pill);
	background: var(--marine);
	box-shadow: 0 0.875rem 2.5rem rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.14);
	opacity: 0;
	transform: translate(-50%, calc(100% + 2.5rem)) scale(0.96);
	transition: transform 1s var(--ease-out), opacity 0.6s ease;
}

.cci-bandeau.is-visible {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

.cci-bandeau__lien {
	display: flex;
	align-items: center;
	gap: 1.375rem;
	height: 2.8125rem;
	padding: 0 0.25rem 0 1.25rem;
	border-radius: var(--r-pill);
	background: var(--blanc);
	color: var(--marine);
	font-size: 1.0625rem;
	font-weight: var(--fw-medium);
	text-decoration: none;
	white-space: nowrap;
}

.cci-bandeau__fleche {
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--rose);
	color: var(--rouge);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--ease-out);
}

.cci-bandeau__fleche .icon {
	width: 1rem;
	height: 1rem;
}

.cci-bandeau__lien:hover .cci-bandeau__fleche {
	background: var(--rouge);
	color: var(--blanc);
	transform: rotate(45deg);
}

/* --- Arrivée (après le voile d'accueil) -------------------------------------
   `.cci-avant-intro` est posé par le voile et retiré quand le rideau se lève :
   les transitions ci-dessous jouent alors. Sans voile, rien n'est masqué. */
.cci-hero__visuel {
	transition: opacity 0.9s ease, scale 2.2s var(--ease-out);
}

.cci-hero__ligne > span {
	transition: translate 1.1s var(--ease-out) calc(0.35s + var(--i, 0) * 0.09s);
}

.cci-finder {
	transition: translate 0.9s var(--ease-out) 0.75s, opacity 0.7s ease 0.75s, box-shadow 0.5s ease;
}

.cci-hero__carte,
.cci-hero__actu {
	transition: translate 1.1s var(--ease-out) calc(0.3s + var(--i, 3) * 0.1s), opacity 0.8s ease calc(0.3s + var(--i, 3) * 0.1s);
}

.cci-avant-intro .cci-hero__visuel {
	opacity: 0;
	scale: 1.06;
}

.cci-avant-intro .cci-hero__ligne > span {
	translate: 0 108%;
}

.cci-avant-intro .cci-finder {
	translate: 0 1rem;
	opacity: 0;
}

.cci-avant-intro .cci-hero__carte,
.cci-avant-intro .cci-hero__actu {
	translate: 3rem 0;
	opacity: 0;
}

/* --- Grand écran : épinglage et proportions de la maquette ----------------
   Tout le hero est dimensionné en « pixels maquette » : --u vaut 1 px à
   1440 px de large et suit la largeur de l'écran (bornée), si bien que la
   composition reste celle de Figma quel que soit l'écran : cartes 229 × 150,
   écart 14, H1 80, carte actu 600 × 176 (agrandie à la demande de Beekom).
   Hauteur : 85 % de l'écran, bornée (voir --hero-h). */
@media (min-width: 64rem) {
	body.has-cci-hero {
		--u: clamp(0.8px, 100vw / 1440, 1px); /* jamais plus grand que la maquette */
		--split: calc(229 * var(--u) + 14 * var(--u));
	}

	.cci-hero {
		--cartes: calc(229 * var(--u));
		--ecart: calc(14 * var(--u));
		--carte-h: calc(150 * var(--u));
		--actu-h: calc(176 * var(--u));
		--actu-ecart: calc(21 * var(--u));
		/* 85 % de l'écran (demande Beekom), jamais moins que la composition de
		   la maquette, jamais plus que l'écran. Les cartes d'accès se
		   partagent la hauteur restante au-dessus de l'actu. */
		--hero-h: min(100svh, max(36rem, 85svh, calc(var(--carte-h) * 3 + var(--ecart) * 2 + var(--actu-ecart) + var(--actu-h) + var(--pad) * 2)));
	}

	.cci-hero__cadre {
		grid-template-rows: minmax(0, 1fr) var(--actu-h);
		row-gap: var(--actu-ecart);
		height: var(--hero-h);
	}

	.cci-hero__main {
		/* Pendant l'épinglage, la colonne gagne la place des cartes. */
		grid-column: 1 / -1;
		margin-right: calc((var(--cartes) + var(--ecart)) * (1 - var(--k3)));
		padding-top: calc(var(--header-h) + 22 * var(--u));
	}

	.cci-hero__visuel {
		min-height: 0;
	}

	.cci-hero__contenu {
		max-width: none;
		padding: calc(40 * var(--u)) calc(62 * var(--u));
	}

	.cci-hero .titre--hero {
		font-size: calc(80 * var(--u));
		line-height: 0.98;
	}

	/* Une ligne saisie = une ligne affichée, comme sur la maquette. */
	.cci-hero__ligne {
		white-space: nowrap;
	}

	.cci-hero__acces {
		grid-column: 2;
		grid-row: 1;
	}

	.cci-hero__carte {
		min-height: 0;
		padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u));
	}

	.cci-hero__carte-label {
		max-width: 6em; /* « Je trouve / ma voie », « Pré- / inscription » */
		font-size: max(1.125rem, calc(24 * var(--u)));
	}

	.cci-finder {
		margin-top: calc(48 * var(--u));
	}

	/* La carte actualité reste en place pendant tout le défilement épinglé :
	   seules les trois cartes d'accès s'en vont. */
	.cci-hero__actu {
		width: calc(600 * var(--u));
		min-height: 0;
		height: var(--actu-h);
		box-shadow: 0 0 0 var(--actu-ecart) var(--bg);
		transform: none;
	}

	/* Encoche de la maquette : l'anneau marine (box-shadow) découpe le
	   visuel autour de la carte, et les deux angles du visuel qui bordent
	   l'encoche sont arrondis comme ses autres angles. Chaque angle est un
	   carré marine percé d'un quart de cercle transparent, posé à la jonction :
	     ::before — au-dessus de l'encoche, contre le bord droit du visuel
	                (qui se décale quand les cartes s'en vont : --k3) ;
	     ::after  — à gauche de l'encoche, contre le bas du visuel. */
	.cci-hero__actu::before,
	.cci-hero__actu::after {
		content: '';
		position: absolute;
		width: var(--r-xl);
		height: var(--r-xl);
		background: radial-gradient(circle at 0 0, transparent calc(var(--r-xl) - 0.5px), var(--bg) var(--r-xl));
		pointer-events: none;
	}

	.cci-hero__actu::before {
		bottom: calc(100% + var(--actu-ecart));
		right: calc((var(--cartes) + var(--ecart)) * (1 - var(--k3)));
	}

	/* Le pseudo de gauche couvre aussi la bande de l'anneau : l'anneau
	   (box-shadow) arrondit son angle bas-gauche et laissait voir un coin
	   de photo entre lui et le bas du visuel. */
	.cci-hero__actu::after {
		bottom: 0;
		left: calc(-1 * var(--actu-ecart) - var(--r-xl));
		width: calc(var(--r-xl) + var(--actu-ecart));
		background:
			radial-gradient(circle at 0 0, transparent calc(var(--r-xl) - 0.5px), var(--bg) var(--r-xl)) 0 0 / var(--r-xl) 100% no-repeat,
			linear-gradient(var(--bg), var(--bg)) 100% 0 / var(--actu-ecart) 100% no-repeat;
	}

	.cci-hero__actu-texte {
		padding: calc(10 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) calc(24 * var(--u));
	}

	.cci-hero__actu-titre {
		font-size: max(1.125rem, calc(26 * var(--u)));
	}

	.cci-hero .cci-hero__actu-img {
		width: 46%;
		max-width: none;
	}

	/* Épinglé, le cadre (85 %) est posé en haut d'un écran entier : la bande
	   restante accueille l'indice de défilement. */
	.cci-hero--epingle {
		--pin-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
		height: calc(max(var(--pin-h), var(--hero-h)) + var(--hero-longueur) * 100svh);
	}

	.cci-hero--epingle .cci-hero__pin {
		height: max(var(--pin-h), var(--hero-h));
	}

	.cci-hero__indice {
		position: absolute;
		left: 50%;
		top: calc(var(--hero-h) + (max(var(--pin-h), var(--hero-h)) - var(--hero-h)) / 2);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.625rem;
		color: var(--blanc);
		font-size: var(--fs-xs);
		font-weight: var(--fw-medium);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
		/* Reste affiché pendant toute la sortie des cartes (le hero est
		   épinglé, la page ne bouge pas encore) et s'efface sur la fin, juste
		   avant que la page elle-même se mette à défiler. */
		opacity: calc((1 - var(--p)) * 8);
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	/* Bande trop étroite : pas d'indice. */
	@media (min-aspect-ratio: 21 / 9) {
		.cci-hero__indice {
			display: none;
		}
	}

	/* Trait vertical : une goutte de lumière y descend en boucle, vers le
	   bas, dans le sens du défilement. */
	.cci-hero__indice-trait {
		position: relative;
		width: 2px;
		height: 2.75rem;
		overflow: hidden;
		border-radius: 1px;
		background: color-mix(in srgb, var(--blanc) 25%, transparent);
	}

	.cci-hero__indice-trait::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(transparent, var(--blanc));
		animation: cci-indice 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	@keyframes cci-indice {
		0% { transform: translateY(-100%); }
		60%, 100% { transform: translateY(100%); }
	}

	/* Apparition discrète, une fois la page arrivée. */
	@keyframes cci-indice-entree {
		from { opacity: 0; }
	}

	.cci-hero__indice {
		animation: cci-indice-entree 0.8s ease 1.6s backwards;
	}

	.cci-avant-intro .cci-hero__indice {
		animation-play-state: paused;
	}

	/* ⚠️ Épinglé SOUS la barre d'administration WordPress quand elle est là
	   (connecté) : épinglé à 0, le hero remontait de 32 px au premier coup de
	   molette et passait sous le menu, qui, lui, reste fixe. */
	.cci-hero--epingle .cci-hero__pin {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		overflow: clip;
	}
}

/* --- Tablette et mobile ------------------------------------------------------ */
@media (max-width: 63.99rem) {
	.cci-hero__cadre {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto;
		gap: 0.625rem;
		padding: 0.625rem;
	}

	.cci-hero__main {
		grid-column: 1 / -1;
		grid-row: auto;
		padding-top: calc(var(--header-h) + 1.25rem);
	}

	.cci-hero__visuel {
		min-height: min(70svh, 36rem);
		align-items: flex-end;
	}

	.cci-hero__acces {
		display: contents;
	}

	.cci-hero__carte {
		min-height: 7rem;
		padding: 0.875rem;
		transform: none;
	}

	.cci-hero__carte-label {
		font-size: 1rem;
	}

	.cci-hero__carte .pastille {
		width: 2.25rem;
		height: 2.25rem;
	}

	.cci-hero__actu {
		grid-column: 1 / -1;
		grid-row: auto;
		width: auto;
		justify-self: stretch;
		box-shadow: none;
		transform: none;
	}

	.cci-finder {
		flex-wrap: wrap;
		border-radius: var(--r-lg);
		padding: 0.375rem;
		width: 100%;
	}

	.cci-finder__champ,
	.cci-finder__sel {
		flex: 1 1 auto;
	}

	.cci-finder__surligne {
		display: none;
	}

	.cci-finder__go {
		flex: 1 0 100%;
		margin: 0.25rem 0 0;
		height: 2.75rem;
	}

	.cci-finder__go-texte {
		max-width: 16rem;
		opacity: 1;
	}

	.cci-finder__go {
		gap: 0.5rem;
	}

	.cci-finder-panneau {
		left: 0.75rem !important;
		right: 0.75rem;
		top: auto !important;
		bottom: 0.75rem;
		width: auto;
		translate: 0 1.5rem;
	}

	.cci-bandeau {
		left: 0.625rem;
		right: 0.625rem;
		max-width: none;
		transform: translateY(calc(100% + 2.5rem)) scale(0.96);
		gap: 0.375rem;
	}

	.cci-bandeau.is-visible {
		transform: none;
	}

	.cci-bandeau__lien {
		flex: 1;
		justify-content: center;
		padding: 0 0.5rem;
		font-size: 0.8125rem;
		line-height: 1.1;
		text-align: center;
		white-space: normal;
	}

	.cci-bandeau__fleche {
		display: none;
	}
}

@media (max-width: 40rem) {
	.cci-hero__carte {
		min-height: 6rem;
		padding: 0.75rem 0.625rem 0.75rem 0.75rem;
		border-radius: var(--r-md);
	}

	.cci-hero__carte-label {
		font-size: 0.875rem;
		line-height: 1.15;
	}

	.cci-hero__carte .pastille {
		top: 0.375rem;
		right: 0.375rem;
		width: 1.875rem;
		height: 1.875rem;
	}

	.cci-finder__champ::before {
		display: none;
	}

	.cci-hero .cci-hero__actu-img {
		width: 34%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cci-finder.is-pret .cci-finder__go::after,
	.cci-hero__indice-trait::after {
		animation: none;
	}
}