/* ==========================================================================
   CELESTA v2 - kit .cvp-* : les cinq pages filles du silo Evenementiel
   Parti « la ligne de partage » : une couture verticale separe ce que porte
   l agence (gauche) de ce que Celesta prend en charge (droite).
   Chargee UNIQUEMENT sur les pages 147, 149, 151, 153 et 124.
   Variables de couleur : menu.css. Echelle de titres : accueil.css.
   ========================================================================== */

/* ---------- 0. Socle de page ---------- */

/* Le fond du body doit etre pose : sans cela il reste blanc et se voit
   dans le moindre interstice entre deux sections racine. */
body:has(.cvp-sec) { background: var(--cv2-abysse); }

/* ⛔ Le coeur pose margin-block-start sur <main> lui-meme, parce qu il est le
   second enfant de .wp-site-blocks. accueil.css l annule pour body:has(.cvh-sec)
   et body:has(.cvh-hero) : un kit parallele n est PAS couvert par ce garde-fou.
   Mesure du 2026-08-21 : 19,2px de fond de body entre le menu et le heros,
   la ou la page de reference 126 mesure 0. */
body:has(.cvp-sec) main,
body:has(.cvp-hero) main { margin-block-start: 0; }

/* Neutralisation du blockGap du coeur sur les sections racine.
   :root :where(.is-layout-flow) > * vaut (0,2,0) : on repond en (0,3,0). */
.wp-site-blocks .wp-block-post-content > .cvp-sec,
.wp-site-blocks .wp-block-post-content > .cvp-hero { margin-block: 0; }

.cvp-sec { position: relative; color: #F3F3F3; }
.cvp-sec--encre  { background: var(--cv2-abysse); }
.cvp-sec--nuit   { background: var(--cv2-nuit); }
.cvp-sec--marine { background: var(--cv2-marine); }
.cvp-sec--noir   { background: #000000; }

.cvp-int {
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(64px, 8vw, 104px) clamp(20px, 3.2vw, 32px);
}

/* Le kit .cvh ne stylise les boutons que sous .cvh-hero / .cvh-sec / .cvh-drones :
   les boutons d une section .cvp sortiraient nus. On redeclare ici, meme forme. */
.cvp-hero .wp-block-button__link,
.cvp-sec .wp-block-button__link {
	background: var(--cv2-degrade-bouton);
	color: var(--cv2-blanc);
	border-radius: 0;
	border: 0;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	padding: 15px 26px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cvp-hero .wp-block-button__link:hover,
.cvp-sec .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(12, 103, 222, 0.45);
	transform: translateY(-1px);
}
.cvp-hero .is-style-outline .wp-block-button__link,
.cvp-sec .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: var(--cv2-blanc);
}

/* ⭐ QUI NEUTRALISE REDECLARE. La regle ci-dessous pose margin-block: 0 sur
   TOUS les blocs de boutons du kit. Un bloc de boutons place apres un conteneur
   (reperes chiffres, grille de references) se retrouvait donc COLLE : 0 px
   mesure a l ecran, contre 30 et 34 px pour les blocs d origine. Defaut vu par
   le client. La respiration se redeclare a une specificite superieure.
   ⚠ Le bandeau final est EXCLU : son chapo lui donne deja 34 px, et le
   traiter ici changerait les cinq pages du kit sans raison. */
.wp-site-blocks .cvp-sec .cvp-int:not(.cvp-bandeau__int) > .wp-block-buttons {
	margin-block-start: clamp(32px, 3.4vw, 48px);
}

.wp-site-blocks .cvp-hero .wp-block-buttons,
.wp-site-blocks .cvp-sec .wp-block-buttons { margin-block: 0; gap: 12px; }

/* ---------- 1. Titres et textes courants du kit ---------- */

.cvp-sec h2, .cvp-hero h1 { margin: 0; }
.wp-site-blocks .cvp-sec h2.cvp-titre { font-size: var(--cv2-t2); font-weight: 700; line-height: 1.14; margin-block: 0 20px; }
.wp-site-blocks .cvp-sec h3.cvp-stitre { font-size: var(--cv2-t3); font-weight: 700; line-height: 1.25; margin-block: 0 12px; }

/* Le surlignage des titres : couleur SEULE, degrade de marque, jamais de trait */
.cvp-sec mark, .cvp-hero mark {
	background: var(--cv2-degrade-titre);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding: 0;
}

.wp-site-blocks .cvp-sec p.cvp-chapo {
	max-width: 1040px;
	margin-block: 0 34px;
	font-size: var(--cv2-t5);
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.80);
}
.cvp-sec .cvp-int--centre { text-align: center; }
.cvp-sec .cvp-int--centre .cvp-chapo,
.cvp-sec .cvp-int--centre .cvh-surtitre { margin-inline: auto; }
.cvp-sec .cvp-int--centre .cvh-surtitre { justify-content: center; }

/* ---------- 2. LA COUTURE : le composant de signature ---------- */

.cvp-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	align-items: stretch;
	row-gap: 18px;
	column-gap: 0;
}
/* la marge du coeur retomberait entre les cellules : on l annule puis le
   row-gap ci-dessus fait seul le rythme vertical */
.wp-site-blocks .cvp-duo > * { margin-block: 0; }

.cvp-duo::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-0.5px);
	background: linear-gradient(180deg,
		rgba(12, 103, 222, 0) 0%,
		var(--cv2-bleu) 9%,
		var(--cv2-ciel) 50%,
		var(--cv2-bleu) 91%,
		rgba(12, 103, 222, 0) 100%);
	pointer-events: none;
	z-index: 2;
}

/* les deux libelles de tete, poses de part et d autre de la couture */
.cvp-duo__lib {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cv2-accent);
	padding-block: 0 16px;
}
.cvp-duo__lib--vous { justify-content: flex-end; padding-right: 30px; text-align: right; }
.cvp-duo__lib--nous { padding-left: 30px; }
.cvp-duo__lib--vous::after,
.cvp-duo__lib--nous::before { content: ''; width: 26px; height: 2px; background: var(--cv2-degrade); flex: 0 0 auto; }

/* les cellules : les DEUX cotes sont toujours remplis, aucune rangee ne peut
   rester a moitie vide (regle client : aucun vide dans une composition) */
.cvp-cell {
	box-sizing: border-box;
	padding: 30px 34px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cvp-cell--vous {
	background: rgba(255, 255, 255, 0.028);
	border-top: 1px solid rgba(86, 181, 235, 0.16);
	margin-right: 30px;
}
.cvp-cell--nous {
	background: rgba(12, 103, 222, 0.13);
	border-top: 1px solid rgba(86, 181, 235, 0.42);
	margin-left: 30px;
}
.wp-site-blocks .cvp-cell > * { margin-block: 0; }

.wp-site-blocks .cvp-cell p.cvp-cell__num {
	font-size: var(--cv2-t6);
	font-weight: 800;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	color: var(--cv2-accent);
	margin-block: 0 2px;
}
.wp-site-blocks .cvp-cell h3 {
	font-size: var(--cv2-t4);
	font-weight: 700;
	line-height: 1.3;
	color: #FFFFFF;
	margin-block: 0;
}
.wp-site-blocks .cvp-cell p {
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
	margin-block: 0;
}
.cvp-cell a { color: var(--cv2-accent); text-decoration: underline; text-underline-offset: 3px; }
.cvp-cell a:hover { color: #FFFFFF; }

/* ---------- 3. Heros plein ecran ---------- */

.cvp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: calc(100svh - var(--cvs-header, var(--cv2-hdr-h, 76px)));
	background: #000000;
	overflow: hidden;
	color: #FFFFFF;
}
.cvp-hero__img, .cvp-hero__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.cvp-hero__img img { object-fit: cover; object-position: 50% 42%; }
/* voile NOIR en deux couches : verticale pour la lisibilite du bas et le
   raccord avec la section suivante, horizontale pour le cote du texte */
/* Voile ALLEGE du heros (client, 27/08).
   Mesure AVANT : luminance composee de 0,0087 a 0,0361 sur les cinq pages,
   avec un arret a 0,96 en bas. Voile ramene a 0,62/0,34/0,08/0,18 et
   0,54/0,24/0,46/0,62, plus un RENFORT elliptique ancre A GAUCHE, ou vit la
   colonne de texte.
   Mesure APRES : l image gagne un facteur 1,3 a 1,9 et AUCUNE page ne perd
   en lisibilite (0 a 0,46 % de pixels sous seuil, etalon client 0,657 %).
   ⚠ Le renfort est ancre a 20 % en X : centre, il protegerait le milieu
   de l image et pas la colonne de texte. */
.cvp-hero__img::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 46% at 20% 56%, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.24) 62%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0.08) 78%, rgba(0, 0, 0, 0.18) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.46) 74%, rgba(0, 0, 0, 0.62) 100%);
}
.cvp-hero__int {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 1420px;
	margin-inline: auto;
	/* ⛔⛔ Le calibrage de 2026-08-21 avait ete fait a 1366x900 SEULEMENT.
	   Remesure le 26/08 a 1568x750 : les CINQ pages du kit debordaient de 92px.
	   La cause est toujours la meme : un retrait indexe sur la LARGEUR alors
	   qu il decide d une HAUTEUR. Le min() ne resserre que la ou la hauteur
	   manque et laisse le dessin intact sur un grand ecran. */
	padding: min(clamp(84px, 9vw, 118px), 8.4vh) clamp(20px, 3.2vw, 32px) min(clamp(52px, 5.6vw, 78px), 5.4vh);
}
.wp-site-blocks .cvp-hero__int > * { margin-block: 0; }
.wp-site-blocks .cvp-hero h1.cvp-hero__titre {
	/* ⛔⛔ 17ch posait le H1 sur 722px alors que sa colonne en fait 1420 :
	   les CINQ pages du kit avaient un titre sur QUATRE lignes. Un titre ne se
	   borne pas en caracteres, c est une mesure de PARAGRAPHE. 24ch est un
	   compromis : il laisse la colonne respirer sans etaler le titre sur toute
	   la largeur. text-wrap: balance est pose en transverse dans accueil.css. */
	max-width: none;
	font-size: var(--cv2-t1);
	font-weight: 800;
	line-height: 1.08;
	margin-block: 0 22px;
}
.wp-site-blocks .cvp-hero p.cvp-hero__chapo {
	max-width: 62ch;
	font-size: var(--cv2-t5);
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.86);
	margin-block: 0 30px;
}
.wp-site-blocks .cvp-hero .wp-block-buttons { margin-block: 0 34px; }

.cvp-hero__gages { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 0; margin: 0; }
.wp-site-blocks .cvp-hero__gages li {
	margin-block: 0;
	padding-left: 20px;
	position: relative;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.90);
}
.cvp-hero__gages li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 2px;
	background: var(--cv2-degrade);
}

/* ---------- 4. Cartes de gage (plaque sur miroir) ---------- */

.cvp-gages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wp-site-blocks .cvp-gages > * { margin-block: 0; }

.cvp-gage {
	position: relative;
	box-sizing: border-box;
	padding: 30px 26px 28px;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(0, 2, 30, 0.10) 100%),
		rgba(0, 2, 30, 0.62);
	border: 1px solid rgba(86, 181, 235, 0.20);
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
/* arete haute qui s allume */
.cvp-gage::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(86, 181, 235, 0.85), transparent);
	opacity: 0.55;
	transition: opacity 0.25s ease;
}
/* bande speculaire visible au repos, qui glisse au survol, DERRIERE le texte */
.cvp-gage::after {
	content: '';
	position: absolute;
	top: -20%;
	left: -60%;
	width: 46%;
	height: 140%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
	transform: rotate(9deg);
	z-index: 1;
	transition: transform 0.55s ease, left 0.55s ease;
	pointer-events: none;
}
.cvp-gage:hover { border-color: rgba(86, 181, 235, 0.48); transform: translateY(-2px); }
.cvp-gage:hover::before { opacity: 1; }
.cvp-gage:hover::after { left: 110%; }
.cvp-gage > * { position: relative; z-index: 2; }
.wp-site-blocks .cvp-gage > * { margin-block: 0; }
.wp-site-blocks .cvp-gage h3 {
	font-size: var(--cv2-t4);
	font-weight: 700;
	line-height: 1.28;
	color: #FFFFFF;
	margin-block: 0 10px;
}
.wp-site-blocks .cvp-gage p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.80); margin-block: 0; }

/* ---------- 5. Profils de cible (trois colonnes) ---------- */

.cvp-profils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wp-site-blocks .cvp-profils > * { margin-block: 0; }
.cvp-profil {
	position: relative;
	box-sizing: border-box;
	padding: 28px 26px 28px 28px;
	background: rgba(255, 255, 255, 0.035);
	transition: background 0.25s ease;
}
/* le filet d accent est un pseudo-element, jamais un border-image :
   un border-image sur un seul cote se comporte mal des qu un palier le retouche */
.cvp-profil::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--cv2-degrade);
}
.cvp-profil:hover { background: rgba(12, 103, 222, 0.16); }
.wp-site-blocks .cvp-profil > * { margin-block: 0; }
.wp-site-blocks .cvp-profil h3 { font-size: var(--cv2-t4); font-weight: 700; color: #FFFFFF; margin-block: 0 10px; }
.wp-site-blocks .cvp-profil p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.80); margin-block: 0; }

/* ---------- 6. Les deux horloges + les quatre reperes ---------- */

.cvp-horloges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.wp-site-blocks .cvp-horloges > * { margin-block: 0; }
.cvp-horloge {
	box-sizing: border-box;
	padding: 32px 30px;
	background: rgba(0, 2, 30, 0.55);
	border: 1px solid rgba(86, 181, 235, 0.24);
}
.wp-site-blocks .cvp-horloge > * { margin-block: 0; }
.wp-site-blocks .cvp-horloge p.cvp-horloge__val {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	background: var(--cv2-degrade);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-block: 0 8px;
}
.wp-site-blocks .cvp-horloge h3 { font-size: var(--cv2-t4); font-weight: 700; color: #FFFFFF; margin-block: 0 10px; }
.wp-site-blocks .cvp-horloge p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); margin-block: 0; }

.cvp-reperes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(86, 181, 235, 0.22); }
.wp-site-blocks .cvp-reperes > * { margin-block: 0; }
.cvp-repere { box-sizing: border-box; padding: 24px 20px; background: var(--cv2-marine); text-align: center; }
.wp-site-blocks .cvp-repere > * { margin-block: 0; }
.wp-site-blocks .cvp-repere p.cvp-repere__val {
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.1;
	color: #FFFFFF;
	margin-block: 0 4px;
}
.wp-site-blocks .cvp-repere p.cvp-repere__lib {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv2-accent);
	margin-block: 0 6px;
}
.wp-site-blocks .cvp-repere p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.76); margin-block: 0; }

/* ---------- 7. Bandeau d appel final ---------- */

.cvp-bandeau { position: relative; background: #000000; overflow: hidden; }
.cvp-bandeau__img, .cvp-bandeau__img img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.cvp-bandeau__img img { object-fit: cover; object-position: 50% 46%; }
/* Voile ALLEGE du bandeau (client, 27/08, troisieme rappel).
   ⛔⛔ Mesure AVANT : les CINQ pages du kit avaient une luminance moyenne
   composee de 0,0055 a 0,0205, soit jusqu a HUIT fois sous le plancher de
   0,045. Les images brutes, elles, sont correctes (0,059 a 0,215) : c est le
   voile qui les tuait, avec des arrets jusqu a 0,92.
   ⭐ Le voile general tombe a 0,60/0,44/0,28 et 0,62/0,38/0,64, et un
   RENFORT elliptique centre protege la seule zone de texte. Mesure APRES :
   l image gagne un facteur 2,0 a 2,4 sur les cinq pages, et le texte reste
   sous 1,61 % de pixels au-dessous du seuil (etalon client valide : 0,657 %).
   ⚠ Une seule page atteint le plancher : sur les autres la limite est
   l IMAGE elle-meme, pas le voile. */
.cvp-bandeau__img::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(62% 40% at 50% 46%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.21) 62%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.44) 52%, rgba(0, 0, 0, 0.28) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.64) 100%);
}
.cvp-bandeau__int { position: relative; z-index: 2; }
.wp-site-blocks .cvp-bandeau__int > * { margin-block: 0; }

/* ---------- 8. Revelation ---------- */
/* On reemploie la classe .cvh-anim de la bibliotheque : c est elle que le JS
   attrape, elle a deja ses deux ceintures et son etat de repos VISIBLE.
   Rien a redeclarer ici : ecrire un .cvp-anim aurait produit une classe
   qu aucun script ne revele. */

/* ---------- 9. Paliers ---------- */

@media (max-width: 1200px) {
	.cvp-gages { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
	.cvp-profils { grid-template-columns: 1fr; }
	.cvp-horloges { grid-template-columns: 1fr; }
	.cvp-reperes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	/* la couture disparait : tout s empile, chaque cellule garde son bord */
	.cvp-duo { grid-template-columns: 1fr; row-gap: 0; }
	.cvp-duo::before { display: none; }
	.cvp-duo__lib { display: none; }
	.cvp-cell--vous, .cvp-cell--nous { margin-inline: 0; }
	.cvp-cell--vous { border-top: 1px solid rgba(86, 181, 235, 0.16); }
	.cvp-cell--nous { border-top: 0; border-left: 2px solid rgba(86, 181, 235, 0.45); margin-bottom: 18px; }
	/* en empile, un libelle par cellule remplace les deux entetes de colonne */
	.cvp-cell--vous::before,
	.cvp-cell--nous::before {
		font-size: var(--cv2-t6);
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--cv2-accent);
	}
	.cvp-cell--vous::before { content: 'Vous'; }
	.cvp-cell--nous::before { content: 'Nous'; }
	/* Le heros doit TENIR dans l ecran. Mesure du 2026-08-21 : le header .cv2-hdr
	   fait 77px et il est en position relative, donc il OCCUPE le flux. Avec le
	   retrait de bureau, le dernier gage passait 102px sous la ligne de flottaison. */
	.cvp-hero { align-items: flex-end; min-height: calc(100svh - var(--cvs-header, 77px)); }
	.cvp-hero__int { padding-top: 48px; padding-bottom: 36px; }
	.cvp-hero__gages { gap: 8px 20px; }
	.wp-site-blocks .cvp-hero p.cvp-hero__chapo { margin-block: 0 22px; }
	.wp-site-blocks .cvp-hero .wp-block-buttons { margin-block: 0 24px; }
	.wp-site-blocks .cvp-hero h1.cvp-hero__titre { max-width: none; margin-block: 0 16px; }
	.cvp-gages { grid-template-columns: 1fr; }
	.cvp-cell { padding: 24px 22px; }
}

@media (max-width: 520px) {
	.cvp-reperes { grid-template-columns: 1fr; }
	.cvp-hero__gages { gap: 10px 20px; }
	.wp-site-blocks .cvp-hero .wp-block-buttons { gap: 10px; }
}

/* ---------- 10. Mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.cvp-gage, .cvp-gage::before, .cvp-gage::after, .cvp-profil { transition: none; }
	.cvp-gage:hover { transform: none; }
}

/* ---------- 11. Variante TROIS colonnes de la grille de gages ----------
   ⛔⛔ Reproche client du 26/08 : la palette des disciplines montrait
   TROIS doublons cote a cote (drones lumineux / shows de drones, feux et
   pyrotechnie / finals pyromusicaux, video mapping / mapping architectural).
   La taxonomie de production les separe, mais elle les presente en carrousel :
   la redondance ne s y voit pas. Dans une grille, elle saute aux yeux.
   ⭐ Les paires sont fusionnees, la palette tombe a SIX disciplines reelles,
   et la grille passe a trois colonnes pour rester pleine : 2 x 3, sans
   cellule orpheline. Ne pas revenir a quatre colonnes avec six cartes.
   ⚠️ Ecrit APRES les media queries de .cvp-gages : a specificite egale,
   le dernier ecrit gagne, et les paliers doivent donc etre repris ici. */
.cvp-gages--trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) {
	.cvp-gages--trois { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	.cvp-gages--trois { grid-template-columns: 1fr; }
}

/* ---------- 12. Boutons centres dans un conteneur centre ----------
   ⛔ Defaut present sur les CINQ pages du kit depuis l origine : le
   conteneur .cvp-int--centre centre le surtitre, le titre et le chapo, mais
   PAS les boutons. Le coeur rend .wp-block-buttons en `display: grid` ici,
   et `text-align: center` n a aucun effet sur une grille : ses pistes
   restaient calees a gauche. Il faut justify-content. */
/* ⚠️ MESURE : le conteneur des boutons ne fait que 382px de large dans
   une colonne de 1420, le theme lui posant une largeur ajustee au contenu.
   Centrer son CONTENU ne servait donc a rien : il faut d abord lui rendre
   toute la largeur, sinon les boutons s empilent dans une boîte etroite
   toujours calee a gauche. Vu a l ecran apres une premiere correction ratee. */
/* ⭐ Grille a colonnes EGALES plutot que flex : en flex les deux boutons prenaient
   leur largeur naturelle (mesure : 206 et 164 px), ce qui viole la regle client
   des boutons de meme taille. width: max-content + 1fr egalise les pistes sur la
   plus large, margin-inline: auto centre l ensemble. */
.cvp-sec .cvp-int--centre .wp-block-buttons {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	justify-content: center;
}
.cvp-sec .cvp-int--centre .wp-block-buttons > .wp-block-button {
	width: auto;
}

/* Sous 560px les deux boutons passent l un sous l autre, toujours egaux. */
@media (max-width: 560px) {
	.cvp-sec .cvp-int--centre .wp-block-buttons { grid-auto-flow: row; width: 100%; }
}

/* ---------- 13. Section a FOND PHOTOGRAPHIQUE et cartes en verre ----------
   Demande client du 26/08 : une image de fond, un voile peu dense pour la
   laisser apercevoir, et les cartes en glassmorphisme.
   ⭐ Reglage MESURE sur l image retenue (mapping-feu-artifice-culture-2) :
     luminance moyenne composee 0,0788, soit 1,75 fois le plancher client
     de 0,045 : l image se voit franchement ;
     titre pose sur la photo, 0,95 % de pixels sous 4,5, en blanc gras ;
     cartes a 0,72 avec un flou de 40px : texte a 80 % de blanc a 4,63,
     blanc a 7,9, pour une transmittance de 28 %.
   ⚠️ Le flou est SIMULE avant reglage (image integrale) : sans cela le
   pire pixel condamne toute plaque translucide. Voir glassmorphisme-flou-mesure.
   ⛔ La bande speculaire ::after de .cvp-gage ajoute environ 0,008 de
   luminance : elle est comptee dans le reglage, ne pas la renforcer ici.
   ⛔ Rayon ZERO malgre l usage courant du glassmorphisme : regle client. */
.cvp-sec--photo { position: relative; background: #000000; overflow: hidden; }
/* A17 : la figure de fond doit rester ABSOLUE, sinon elle rentre dans le flux
   et la section prend toute la hauteur de la photo. */
.cvp-sec__img, .cvp-sec__img img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.cvp-sec__img img { object-fit: cover; object-position: 50% 46%; }
.cvp-sec__img::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.30) 48%, rgba(0, 0, 0, 0.08) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.24) 30%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0.20) 100%),
		/* Renfort ELLIPTIQUE ancre a mi-hauteur du bord gauche, sous la seule
		   colonne de texte : un voile plat aurait noye l image entiere. */
		radial-gradient(64% 52% at 10% 40%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.26) 52%, rgba(0, 0, 0, 0) 76%);
}
.cvp-sec--photo > .cvp-int { position: relative; z-index: 2; }

/* Voile ALLEGE, reserve aux sections dont les textes ont de la marge.
   Mesure au canvas sur la 151 : la luminance moyenne composee passe de
   0,0249 a 0,0328 (+32 % de visibilite de l image) sans qu AUCUN texte ne
   descende sous son seuil : surtitre 8,75, titre 3,90, chapo 4,89, zero
   pixel sous seuil sur les trois zones.
   ⛔ Ne PAS etendre a la 124 : ses textes y sont deja a 3,65 et 4,42,
   l allegement les ferait passer dessous. */
.cvp-sec--clair .cvp-sec__img::after {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.04) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.04) 70%, rgba(0, 0, 0, 0.14) 100%),
		radial-gradient(64% 52% at 10% 40%, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.23) 52%, rgba(0, 0, 0, 0) 76%);
}

/* Les cartes deviennent du verre depoli, dans CETTE section seulement : le
   meme composant sert quatre autres pages sur fond plat. */
.cvp-sec--photo .cvp-gage {
	background: rgba(0, 0, 0, 0.66);
	-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.08);
	backdrop-filter: blur(30px) saturate(180%) brightness(1.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.30),
		inset 0 -1px 0 rgba(255, 255, 255, 0.07),
		inset 1px 0 0 rgba(255, 255, 255, 0.09),
		inset -1px 0 0 rgba(255, 255, 255, 0.09),
		0 28px 64px rgba(0, 0, 0, 0.55);
}
.cvp-sec--photo .cvp-gage::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); }

/* Ce qui PAIE l ouverture du verre : le texte des cartes passe de 80 a 88 %
   de blanc. Sans cela le pire pixel tombe a 4,17 sur l image marketing. */
.wp-site-blocks .cvp-sec--photo .cvp-gage p { color: rgba(255, 255, 255, 0.88); }

/* Sur PHOTO le bleu ne tient pas : mesure au canvas sur la boite Range du
   mark, il tombe a 1,01 avec 97 % de ses pixels sous le seuil. Le mark et
   le chapo passent au blanc dans les sections a fond photographique.
   Mesure apres correction : mark 3,72 sans aucun pixel sous 3,
   chapo 3,90 avec 0,02 % sous 4,5 (etalon client validee : 0,657 %). */
.wp-site-blocks .cvp-sec--photo .cvp-titre mark { color: #FFFFFF; }
.wp-site-blocks .cvp-sec--photo p.cvp-chapo { color: #FFFFFF; }

.cvp-sec--photo .cvp-gage:hover {
	border-color: rgba(255, 255, 255, 0.40);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 -1px 0 rgba(255, 255, 255, 0.10),
		inset 1px 0 0 rgba(255, 255, 255, 0.14),
		inset -1px 0 0 rgba(255, 255, 255, 0.14),
		0 34px 76px rgba(0, 0, 0, 0.60);
}

/* ⚠️ Sans flou, le verre ne protege plus rien : la carte redevient pleine. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.cvp-sec--photo .cvp-gage { background: rgba(0, 2, 30, 0.90); }
}

/* ---------- 14. References choisies (shortcode [celesta_reals]) ----------
   Cartes de realisation pour une selection EDITORIALE d IDs.
   ⛔ Le bloc core/query ne sait pas porter une telle selection : teste le
   26/08, postIn ET include sont ignores et la boucle remonte des fiches
   anglaises. D ou le shortcode celesta-reals-choisies.php.
   ⭐ Le nombre de colonnes suit le nombre de cartes REELLEMENT rendues, et
   a deux colonnes la carte orpheline prend toute la largeur : aucune rangee
   ne peut rester incomplete, quel que soit le nombre de fiches publiees. */
.cvp-reals { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.cvp-reals--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cvp-reals--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cvp-reals--un { grid-template-columns: minmax(0, 1fr); }

.cvp-real {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: rgba(0, 2, 30, 0.62);
	border: 1px solid rgba(86, 181, 235, 0.20);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.cvp-real:hover,
.cvp-real:focus-visible { border-color: rgba(86, 181, 235, 0.48); transform: translateY(-2px); }

.cvp-real__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000000; }
.cvp-real__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.cvp-real:hover .cvp-real__media img { transform: scale(1.04); }

.cvp-real__corps { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: clamp(20px, 2.2vw, 26px); }
.cvp-real__badge { font-size: var(--cv2-t6); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv2-accent); }
.cvp-real__titre { font-size: var(--cv2-t5); line-height: 1.32; font-weight: 700; color: #FFFFFF; }
.cvp-real__txt { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.80); }
.cvp-real__fleche { margin-top: auto; padding-top: 12px; font-size: var(--cv2-t6); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv2-accent); }
.cvp-real__fleche::after { content: ''; display: inline-block; width: 22px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--cv2-degrade); transition: width 0.28s ease; }
.cvp-real:hover .cvp-real__fleche::after { width: 34px; }

/* Palier borne des DEUX cotes : une resorption ecrite pour deux colonnes ne
   doit pas survivre au palier qui n en met qu une (piege C15ter). */
@media (min-width: 621px) and (max-width: 900px) {
	.cvp-reals--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cvp-reals--trois > .cvp-real:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
	.cvp-reals--trois,
	.cvp-reals--deux { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.cvp-real,
	.cvp-real__media img,
	.cvp-real__fleche::after { transition: none; }
	.cvp-real:hover { transform: none; }
	.cvp-real:hover .cvp-real__media img { transform: none; }
}

/* ================= CARROUSEL PILOTE DEPUIS LE BACK-OFFICE (client, 27/08) =========
   Le contenu est une GALERIE Gutenberg native : le client ajoute, retire et
   reordonne les images depuis l editeur de la page, le carrousel suit.
   Zero border-radius (charte Celesta). Aucun filet d accent sur les vignettes. */
.cvp-carrousel { position: relative; }
.cvp-carrousel__cadre { position: relative; }

/* la galerie native est une grille : on la remet en piste horizontale */
.wp-site-blocks .cvp-carrousel .wp-block-gallery.cvp-carrousel__piste {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	margin: 0;
	padding: 2px 0 14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste::-webkit-scrollbar { display: none; }

/* chaque vignette : largeur imposee, ratio fixe, aucun rayon */
.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image {
	flex: 0 0 auto;
	width: calc((100% - 40px) / 3);
	margin: 0;
	scroll-snap-align: start;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(86, 181, 235, 0.20);
	border-radius: 0;
	background: #00021E;
}
.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image:hover img { transform: scale(1.05); }

/* la legende native reste masquee : le carrousel est une bande d images */
.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image figcaption { display: none; }

/* ---- commandes, injectees par le script ---- */
.cvp-carrousel__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 26px;
}
.cvp-carrousel__points { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cvp-carrousel__point {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(220, 221, 239, 0.26);
	cursor: pointer;
	transition: background 0.35s ease, width 0.35s ease;
}
.cvp-carrousel__point:hover { background: rgba(220, 221, 239, 0.50); }
.cvp-carrousel__point.est-actif { width: 46px; background: var(--cv2-degrade); }
.cvp-carrousel__fleches { display: flex; gap: 12px; flex: 0 0 auto; }
.cvp-carrousel__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 1px solid rgba(86, 181, 235, 0.42);
	border-radius: 0;
	background: rgba(12, 103, 222, 0.08);
	color: #DCDDEF;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cvp-carrousel__fleche:hover { background: rgba(12, 103, 222, 0.26); border-color: #56B5EB; color: #FFFFFF; }
.cvp-carrousel__fleche:focus-visible { outline: 2px solid #56B5EB; outline-offset: 3px; }
.cvp-carrousel__fleche[disabled] { opacity: 0.34; cursor: default; }
.cvp-carrousel__fleche svg { width: 17px; height: 17px; }

@media (max-width: 980px) {
	.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image { width: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
	.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image { width: 82%; }
	.cvp-carrousel__nav { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste { scroll-behavior: auto; }
	.wp-site-blocks .cvp-carrousel .cvp-carrousel__piste > figure.wp-block-image img { transition: none; }
}

/* air entre le titre et la bande d images : 20px mesures, trop serres */
.wp-site-blocks .cvp-carrousel .cvp-carrousel__cadre { margin-top: 38px; }

/* ================= FOND PHOTO FIXE, EFFET DE PARALLAXE (client, 27/08) =========
   L image reste immobile pendant que la section defile devant elle.
   ⭐ L image vit dans le HTML (figure .cvp-sec__img) : le client la change depuis
   l editeur. Le script la recopie en background pour obtenir le fixed, puis masque
   la balise. SANS JavaScript, la classe est-parallaxe n arrive jamais et la section
   reste une section photo ordinaire : rien ne disparait.
   ⛔ background-attachment fixed est ignore par iOS et couteux sur petits ecrans :
   il repasse en scroll sous 900px et si le visiteur demande moins d animation. */
.cvp-sec--parallax.est-parallaxe {
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.cvp-sec--parallax.est-parallaxe .cvp-sec__img img { visibility: hidden; }

@media (max-width: 900px) {
	.cvp-sec--parallax.est-parallaxe { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
	.cvp-sec--parallax.est-parallaxe { background-attachment: scroll; }
}

/* Les deux horloges passent au verre sur photo : leur fond a 0,55 laissait le texte
   reposer a moitie sur l image. Meme parti que les cartes de la section photo. */
.cvp-sec--photo .cvp-horloge {
	background: rgba(0, 2, 30, 0.72);
	-webkit-backdrop-filter: blur(26px) saturate(170%);
	backdrop-filter: blur(26px) saturate(170%);
	border-color: rgba(255, 255, 255, 0.2);
}
.cvp-sec--photo .cvp-repere {
	background: rgba(0, 2, 30, 0.78);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.cvp-sec--photo .cvp-reperes { background: rgba(255, 255, 255, 0.14); }

/* Le surtitre en ciel #56B5EB ne tient pas sur une photographie : meme constat que
   pour le mark et le chapo, deja passes au blanc plus haut. Le FILET reste bleu,
   c est le texte seul qui change. */
.wp-site-blocks .cvp-sec--photo .cvh-surtitre { color: #FFFFFF; }