/* =========================================================================
   Celesta v2 - kit « plan de vol », page mere du silo Spectacle de drone (118)
   Charge UNIQUEMENT sur la 118. Aucune classe partagee avec .cva-*.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. BLOCKGAP - le heros doit toucher le menu
   Le coeur pose margin-block-start sur <main> LUI-MEME, second enfant de
   .wp-site-blocks. accueil.css ne l annule que pour .cvh-, atelier.css pour
   .cva-. Sans les deux lignes ci-dessous : 19,2px de fond de page entre le
   menu et le heros. C est une bande blanche, parfaitement visible.
   ------------------------------------------------------------------------- */
body:has(.cvd-hero) main,
body:has(.cvd-sec) main { margin-block-start: 0; }
body:has(.cvd-hero) .wp-block-post-content,
body:has(.cvd-sec) .wp-block-post-content { margin-block-start: 0; }

.wp-site-blocks .wp-block-post-content > .cvd-sec,
.wp-site-blocks .wp-block-post-content > .cvd-hero,
.wp-site-blocks .wp-block-post-content > .cvd-appel { margin-block: 0; }

.wp-site-blocks .cvd-sec > *,
.wp-site-blocks .cvd-hero > *,
.wp-site-blocks .cvd-appel > * { margin-block: 0; }

/* -------------------------------------------------------------------------
   1. JETONS
   ------------------------------------------------------------------------- */
.cvd-hero, .cvd-sec, .cvd-appel {
	--cvd-trait: rgba(86, 181, 235, 0.24);
	--cvd-trait-fort: rgba(86, 181, 235, 0.55);
	--cvd-texte: #DCDDEF;
	--cvd-verre-fond: rgba(255, 255, 255, 0.045);
	--cvd-verre-bord: rgba(255, 255, 255, 0.13);
	--cvd-verre-haut: rgba(255, 255, 255, 0.30);
	/* Trame d essaim, purement decorative. */
	--cvd-essaim:
		radial-gradient(1.5px 1.5px at 12% 22%, rgba(86, 181, 235,0.60), transparent 100%),
		radial-gradient(1.5px 1.5px at 74% 14%, rgba(86, 181, 235,0.45), transparent 100%),
		radial-gradient(2px 2px at 38% 68%, rgba(12, 103, 222,0.55), transparent 100%),
		radial-gradient(1.5px 1.5px at 88% 58%, rgba(86, 181, 235,0.40), transparent 100%),
		radial-gradient(1.5px 1.5px at 26% 86%, rgba(12, 103, 222,0.48), transparent 100%),
		radial-gradient(2px 2px at 62% 40%, rgba(86, 181, 235,0.32), transparent 100%),
		radial-gradient(1.5px 1.5px at 8% 54%, rgba(12, 103, 222,0.36), transparent 100%),
		radial-gradient(1.5px 1.5px at 94% 88%, rgba(86, 181, 235,0.32), transparent 100%);
}

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

.cvd-sec--noir   { background: #000000; }
.cvd-sec--abysse { background: var(--cv2-abysse); }
.cvd-sec--nuit   { background: var(--cv2-nuit); }
.cvd-sec--marine { background: var(--cv2-marine); }

/* Halo tres doux au sommet de chaque section : evite l aplat mort que le
   client reproche, sans creer de bande visible entre deux sections. */
.wp-site-blocks .cvd-sec { position: relative; overflow: hidden; }
.wp-site-blocks .cvd-sec::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 60% at 78% -10%, rgba(12, 103, 222, 0.16), transparent 62%),
		radial-gradient(90% 50% at 0% 108%, rgba(86, 181, 235, 0.07), transparent 60%);
}
.wp-site-blocks .cvd-sec > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   2. VERRE - la matiere des cartes
   ------------------------------------------------------------------------- */
.cvd-verre {
	position: relative;
	background: var(--cvd-verre-fond);
	border: 1px solid var(--cvd-verre-bord);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
	box-sizing: border-box;
}
/* Le filet lumineux du haut : c est lui qui donne l aspect verre poli. */
.cvd-verre::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cvd-verre-haut), transparent);
	pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* Sans backdrop-filter, un fond a 4,5% ne se voit pas : on l opacifie. */
	.cvd-verre { background: rgba(255, 255, 255, 0.075); }
}

/* -------------------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-hero {
	position: relative;
	/* Le heros TIENT DANS LE VIEWPORT, menu deduit. svh evite le saut de la
	   barre d adresse mobile ; le repli en vh sert aux navigateurs anciens. */
	min-height: calc(100vh - var(--cv2-hdr-h, 76px));
	min-height: calc(100svh - var(--cv2-hdr-h, 76px));
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Parallaxe : l image est plus haute que le cadre et remonte au defilement.
   La variable est posee par drone.js ; sans JS elle vaut 0 et rien ne bouge. */
.wp-site-blocks .cvd-hero > img.wp-block-cover__image-background {
	height: 122%;
	top: -11%;
	will-change: transform;
	transform: translate3d(0, var(--cvd-par, 0px), 0);
}

.wp-site-blocks .cvd-hero > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	z-index: 1;
	opacity: 1;
	background:
		linear-gradient(100deg, rgba(0,0,0,0.72) 0, rgba(0,0,0,0.56) 46%, rgba(0,0,0,0.24) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.62));
}

.wp-site-blocks .cvd-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: var(--cvd-essaim);
	background-size: 420px 320px;
	opacity: 0.9;
}

.wp-site-blocks .cvd-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	max-width: 1280px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
	padding: clamp(40px, 6vw, 72px) clamp(20px, 3.2vw, 32px);
}

.cvd-hero__bloc { max-width: 820px; }

.cvd-hero .cvd-sur {
	position: relative;
	display: inline-block;
	padding-left: 46px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cvd-texte);
	margin: 0 0 clamp(16px, 2vw, 24px);
}
.cvd-hero .cvd-sur::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 32px; height: 1px;
	background: var(--cvd-trait-fort);
}
.cvd-hero .cvd-sur::after {
	content: "";
	position: absolute;
	left: 14px; top: 50%;
	width: 5px; height: 5px;
	margin-top: -2px;
	background: var(--cv2-ciel);
}

.wp-site-blocks .cvd-hero__titre {
	font-size: var(--cv2-t1);
	font-weight: 700;
	line-height: 1.06;
	color: #ffffff;
	margin: 0 0 clamp(16px, 2vw, 24px);
}
.wp-site-blocks .cvd-hero__titre mark {
	background: var(--cv2-degrade-titre);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wp-site-blocks .cvd-hero__chapo {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.66;
	color: var(--cvd-texte);
	max-width: 64ch;
	margin: 0 0 clamp(22px, 2.6vw, 32px);
}

.wp-site-blocks .cvd-coord {
	list-style: none;
	margin: clamp(22px, 2.6vw, 32px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-top: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-coord > li {
	margin: 0;
	padding: clamp(13px, 1.5vw, 18px) clamp(18px, 2.2vw, 28px) 0 0;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cvd-texte);
	line-height: 1.5;
}
.wp-site-blocks .cvd-coord > li + li {
	padding-left: clamp(18px, 2.2vw, 28px);
	border-left: 1px solid var(--cvd-trait);
}

/* -------------------------------------------------------------------------
   4. BOUTONS
   ⛔ Les styles de bouton du site sont SCOPES sur .cvh-hero, .cvh-sec,
   .cvh-coll, .cvh-drones. Un kit neuf n en herite pas : sans les regles
   ci-dessous, les boutons retombent sur le noir par defaut du theme et
   deviennent invisibles sur fond sombre. Mesure avant correctif : le
   « 09 81 45 75 60 » du rappel final ressortait a 1,08 de contraste.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-hero .wp-block-button__link,
.wp-site-blocks .cvd-appel .wp-block-button__link {
	background: var(--cv2-degrade-bouton);
	color: var(--cv2-blanc);
	border-radius: 0;
	border: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
	padding: 16px 28px;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.wp-site-blocks .cvd-hero .wp-block-button__link:hover,
.wp-site-blocks .cvd-appel .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(12, 103, 222, 0.45);
	transform: translateY(-1px);
}
.wp-site-blocks .cvd-hero .is-style-outline .wp-block-button__link,
.wp-site-blocks .cvd-appel .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: var(--cv2-blanc);
}
.wp-site-blocks .cvd-hero .is-style-outline .wp-block-button__link:hover,
.wp-site-blocks .cvd-appel .is-style-outline .wp-block-button__link:hover {
	border-color: var(--cv2-ciel);
	box-shadow: none;
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   5. TETE DE SECTION
   ------------------------------------------------------------------------- */
.cvd-tete { max-width: none; }

.wp-site-blocks .cvd-sur {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0 0 14px;
}
.wp-site-blocks .cvd-titre {
	font-size: var(--cv2-t2);
	font-weight: 700;
	line-height: 1.14;
	color: #ffffff;
	margin: 0 0 18px;
}
.wp-site-blocks .cvd-titre mark {
	background: var(--cv2-degrade-titre);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wp-site-blocks .cvd-chapo {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.66;
	color: var(--cvd-texte);
	margin: 0;
}

/* ⛔ FILET DE SECURITE : tout texte du kit part en clair.
   Sans cette regle, un element non explicitement colore herite du #111 du
   theme et devient illisible sur fond sombre. Mesure : 9 textes entre 1,04
   et 1,11 de contraste a la premiere livraison. */
.wp-site-blocks .cvd-sec,
.wp-site-blocks .cvd-appel { color: var(--cvd-texte); }
.wp-site-blocks .cvd-sec h2,
.wp-site-blocks .cvd-sec h3,
.wp-site-blocks .cvd-appel h2,
.wp-site-blocks .cvd-appel h3 { color: #ffffff; }

/* -------------------------------------------------------------------------
   6. DEFINITION
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-enonce {
	font-size: var(--cv2-t3);
	font-weight: 300;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	padding: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 34px);
	border-left: 2px solid var(--cv2-bleu);
}

.wp-site-blocks .cvd-etapes {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 2.4vw, 30px);
	padding-block-start: clamp(34px, 3.8vw, 46px);
	border-top: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-etape {
	position: relative;
	padding: clamp(24px, 2.6vw, 32px);
}
.wp-site-blocks .cvd-etape__num {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--cv2-ciel);
	margin: 0 0 10px;
}
.wp-site-blocks .cvd-etape__titre {
	font-size: var(--cv2-t4);
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 10px;
}
.wp-site-blocks .cvd-etape p:not(.cvd-etape__num) {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.66;
	color: var(--cvd-texte);
	margin: 0;
}

/* -------------------------------------------------------------------------
   7. BALANCE
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-balance {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 2.6vw, 32px);
}
.wp-site-blocks .cvd-plateau,
.wp-site-blocks .cvd-synthese { padding: clamp(26px, 3vw, 38px); }

.wp-site-blocks .cvd-plateau__tete {
	margin: 0 0 18px;
	padding-block-end: 16px;
	border-bottom: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-plateau__cle {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0;
}
.wp-site-blocks .cvd-plateau__titre {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1.24;
	color: #ffffff;
	margin: 0 0 16px;
}
/* ⛔ Cibler .cvd-plateau seul laissait le paragraphe de la synthese au #111
   du theme : 1,04 de contraste, texte invisible. Les deux blocs sont vises. */
.wp-site-blocks .cvd-plateau p:not(.cvd-plateau__cle),
.wp-site-blocks .cvd-synthese p:not(.cvd-plateau__cle) {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.68;
	color: var(--cvd-texte);
	margin: 0;
}
.wp-site-blocks .cvd-synthese {
	border-left: 3px solid var(--cv2-bleu);
}

/* -------------------------------------------------------------------------
   8. CADRE reglementaire
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-cadre { display: grid; grid-template-columns: 1fr; gap: 0; }
.wp-site-blocks .cvd-cadre__media { margin: 0; position: relative; overflow: hidden; }
.wp-site-blocks .cvd-cadre__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-site-blocks .cvd-cadre:hover .cvd-cadre__media img { transform: scale(1.04); }
.wp-site-blocks .cvd-cadre__fiche { padding: clamp(28px, 3.2vw, 42px); }
.wp-site-blocks .cvd-cadre__titre {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1.26;
	color: #ffffff;
	margin: 0 0 16px;
}
.wp-site-blocks .cvd-cadre__fiche > p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvd-texte);
	margin: 0 0 22px;
}
.wp-site-blocks .cvd-pieces { list-style: none; margin: 0; padding: 0; counter-reset: cvdp; }
.wp-site-blocks .cvd-pieces > li {
	counter-increment: cvdp;
	position: relative;
	margin: 0;
	padding: 16px 0 16px 52px;
	border-top: 1px solid var(--cvd-trait);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvd-texte);
}
.wp-site-blocks .cvd-pieces > li::before {
	content: "0" counter(cvdp);
	position: absolute;
	left: 0; top: 16px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--cv2-ciel);
}
.wp-site-blocks .cvd-pieces > li strong { color: #ffffff; font-weight: 700; }

/* -------------------------------------------------------------------------
   9. TERRAINS - cartes photo cliquables
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-terrains {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.2vw, 26px);
}
.wp-site-blocks .cvd-terrain {
	position: relative;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(24px, 2.6vw, 32px);
	overflow: hidden;
	isolation: isolate;
}
.wp-site-blocks .cvd-terrain .cvd-terrain__media {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.wp-site-blocks .cvd-terrain .cvd-terrain__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-site-blocks .cvd-terrain:hover .cvd-terrain__media img { transform: scale(1.06); }
/* Voile NOIR, comme partout sur le site. */
.wp-site-blocks .cvd-terrain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.42) 34%, rgba(0,0,0,0.86) 55%, rgba(0,0,0,0.95) 100%);
}
.wp-site-blocks .cvd-terrain > *:not(.cvd-terrain__media) { position: relative; z-index: 2; }
.wp-site-blocks .cvd-terrain__titre {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1.24;
	color: #ffffff;
	margin: 0 0 12px;
}
.wp-site-blocks .cvd-terrain__titre a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid var(--cvd-trait-fort);
	padding-bottom: 3px;
	transition: border-color 0.18s ease;
}
.wp-site-blocks .cvd-terrain__titre a:hover,
.wp-site-blocks .cvd-terrain__titre a:focus-visible { border-bottom-color: var(--cv2-ciel); }
/* Toute la carte est cliquable, sans dupliquer le lien pour les lecteurs. */
.wp-site-blocks .cvd-terrain__titre a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.wp-site-blocks .cvd-terrain p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvd-texte);
	margin: 0;
}

/* -------------------------------------------------------------------------
   10. REGLE - le budget
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-regle__barre {
	height: 3px;
	background: linear-gradient(90deg, rgba(86, 181, 235,0.20) 0%, var(--cv2-bleu) 34%, var(--cv2-ciel) 100%);
	margin: 0 0 clamp(22px, 2.4vw, 30px);
}
.wp-site-blocks .cvd-crans {
	display: grid;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.wp-site-blocks .cvd-cran {
	position: relative;
	margin: 0;
	padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
}
.wp-site-blocks .cvd-cran::before {
	content: "";
	position: absolute;
	top: -5px; left: clamp(18px, 2vw, 24px);
	width: 9px; height: 9px;
	background: var(--cv2-ciel);
}
.wp-site-blocks .cvd-cran__val {
	font-size: var(--cv2-t4);
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin: 0 0 8px;
	/* Un montant ne se coupe jamais au milieu. */
	text-wrap: balance;
}
.wp-site-blocks .cvd-cran__lib {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.62;
	color: var(--cvd-texte);
	margin: 0;
}
.wp-site-blocks .cvd-cran--drone { border-color: rgba(12, 103, 222, 0.55); }
.wp-site-blocks .cvd-cran--drone::before { background: var(--cv2-bleu); width: 13px; height: 13px; top: -7px; }
.wp-site-blocks .cvd-cran--drone .cvd-cran__val { color: var(--cv2-ciel); }

.wp-site-blocks .cvd-notes {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 2.4vw, 30px);
}
.wp-site-blocks .cvd-note { padding: clamp(22px, 2.4vw, 30px); }
.wp-site-blocks .cvd-note__titre {
	font-size: var(--cv2-t4);
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 10px;
}
.wp-site-blocks .cvd-note p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvd-texte);
	margin: 0;
}

/* -------------------------------------------------------------------------
   11. ALTITUDE - la frise
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-altitude { margin: 0; padding: 0; }
.wp-site-blocks .cvd-palier {
	position: relative;
	margin: 0;
	padding: 0 0 clamp(30px, 3.4vw, 42px) clamp(30px, 3.4vw, 44px);
	border-left: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-palier:last-child { padding-bottom: 0; border-left-color: transparent; }
.wp-site-blocks .cvd-palier::before {
	content: "";
	position: absolute;
	left: -5px; top: 6px;
	width: 9px; height: 9px;
	background: var(--cv2-ciel);
	box-shadow: 0 0 0 5px rgba(86, 181, 235, 0.14);
}
.wp-site-blocks .cvd-palier__val {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin: 0 0 8px;
}
.wp-site-blocks .cvd-palier__lib {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.64;
	color: var(--cvd-texte);
	margin: 0;
	max-width: 52ch;
}

/* -------------------------------------------------------------------------
   12. REALISATIONS
   ⛔ Les « decalages horribles » signales par le client venaient de trois
   causes cumulees : des images de hauteurs differentes, un contenu qui ne
   s etirait pas, et un lien « Voir la realisation » pose apres un texte de
   longueur variable. On fige le ratio de l image, on etire la carte, et on
   pousse le lien en bas par une marge automatique.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-reals .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.2vw, 28px);
	align-items: stretch;
}
/* Le <li> genere par le coeur doit lui aussi s etirer, sinon la carte
   qu il contient ne peut pas atteindre la hauteur de la rangee. */
.wp-site-blocks .cvd-reals .wp-block-post-template > * {
	display: flex;
	height: 100%;
	margin: 0;
}
.wp-site-blocks .cvd-realcarte {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.wp-site-blocks .cvd-realcarte .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex: 0 0 auto;
}
.wp-site-blocks .cvd-realcarte .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-site-blocks .cvd-realcarte:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.wp-site-blocks .cvd-realcarte__contenu {
	padding: clamp(20px, 2.2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}
.wp-site-blocks .cvd-realcarte__contenu > * { margin: 0; }
.wp-site-blocks .cvd-badge,
.wp-site-blocks .cvd-badge a {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	text-decoration: none;
}
.wp-site-blocks .cvd-realcarte h3 {
	font-size: var(--cv2-t4);
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}
.wp-site-blocks .cvd-realcarte h3 a { color: #ffffff; text-decoration: none; }
.wp-site-blocks .cvd-realcarte h3 a:hover { color: var(--cv2-ciel); }
.wp-site-blocks .cvd-realcarte .wp-block-post-excerpt { margin: 0; }
.wp-site-blocks .cvd-realcarte .wp-block-post-excerpt__excerpt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvd-texte);
	margin: 0;
}
/* margin-top:auto pousse le lien en pied de carte quel que soit le texte. */
.wp-site-blocks .cvd-realcarte .wp-block-read-more {
	margin-top: auto;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	text-decoration: none;
	border-bottom: 1px solid var(--cvd-trait-fort);
	padding-bottom: 3px;
	align-self: flex-start;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.wp-site-blocks .cvd-realcarte .wp-block-read-more:hover {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

/* -------------------------------------------------------------------------
   13. APPEL final
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-appel {
	position: relative;
	overflow: hidden;
	background: var(--cv2-abysse);
}
.wp-site-blocks .cvd-appel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--cvd-essaim);
	background-size: 380px 280px;
	opacity: 0.75;
}
/* Une lueur centrale : le rappel final ne doit pas etre un aplat mort. */
.wp-site-blocks .cvd-appel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(70% 90% at 50% 50%, rgba(12, 103, 222, 0.24), transparent 68%);
}
.wp-site-blocks .cvd-appel > .cvd-int { position: relative; z-index: 1; }
.cvd-appel__bloc { max-width: 760px; margin-inline: auto; text-align: center; }
.wp-site-blocks .cvd-appel__bloc > p:not(.cvd-sur) {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.68;
	color: var(--cvd-texte);
	margin: 0 0 clamp(26px, 3vw, 34px);
}
.wp-site-blocks .cvd-appel .wp-block-buttons { margin-inline: auto; }

/* -------------------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-faq { counter-reset: cvdq; border-top: 1px solid var(--cvd-trait); }
.wp-site-blocks .cvd-faq > * { margin-block: 0; }
.wp-site-blocks .cvd-faq .wp-block-details {
	counter-increment: cvdq;
	border-bottom: 1px solid var(--cvd-trait);
	padding: 0;
	transition: background-color 0.2s ease;
}
.wp-site-blocks .cvd-faq .wp-block-details[open] { background: rgba(255, 255, 255, 0.028); }
.wp-site-blocks .cvd-faq .wp-block-details > summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: clamp(20px, 2.2vw, 26px) 48px clamp(20px, 2.2vw, 26px) 56px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.36;
	color: #ffffff;
}
.wp-site-blocks .cvd-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-site-blocks .cvd-faq .wp-block-details > summary::before {
	content: "0" counter(cvdq);
	position: absolute;
	left: 4px; top: clamp(22px, 2.4vw, 29px);
	font-size: var(--cv2-t6);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--cv2-ciel);
}
.wp-site-blocks .cvd-faq .wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 10px; top: 50%;
	width: 10px; height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--cv2-ciel);
	border-bottom: 2px solid var(--cv2-ciel);
	transform: rotate(45deg);
	transition: transform 0.24s ease;
}
.wp-site-blocks .cvd-faq .wp-block-details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wp-site-blocks .cvd-faq .wp-block-details > p {
	margin: 0;
	padding: 0 48px clamp(24px, 2.6vw, 30px) 56px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--cvd-texte);
	max-width: 92ch;
}

/* -------------------------------------------------------------------------
   15. ANIMATIONS
   Le mecanisme est celui du site : accueil.js pose .cvh-anim sur les cibles
   puis .cvh-vu quand elles entrent dans le champ. Rien n est masque sans JS.
   ------------------------------------------------------------------------- */
@keyframes cvdMonte {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
@keyframes cvdParait {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes cvdBarre {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.cvd-anim { opacity: 1; transform: none; }
.cvd-anim.cvh-vu { animation: cvdMonte 0.78s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* La reglette de budget se trace au lieu d apparaitre. */
.wp-site-blocks .cvd-regle__barre { transform-origin: left center; }
.cvd-regle__barre.cvd-anim.cvh-vu { animation: cvdBarre 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* Le point de chaque palier arrive apres son texte. */
.cvd-palier.cvd-anim.cvh-vu::before { animation: cvdParait 0.5s ease 0.18s backwards; }

@media (prefers-reduced-motion: reduce) {
	.cvd-anim.cvh-vu,
	.cvd-regle__barre.cvd-anim.cvh-vu,
	.cvd-palier.cvd-anim.cvh-vu::before { animation: none; }
	.wp-site-blocks .cvd-hero > img.wp-block-cover__image-background { transform: none; }
	.wp-site-blocks .cvd-faq .wp-block-details > summary::after,
	.wp-site-blocks .cvd-realcarte .wp-block-post-featured-image img,
	.wp-site-blocks .cvd-terrain .cvd-terrain__media img,
	.wp-site-blocks .cvd-cadre__media img { transition: none; }
}

/* -------------------------------------------------------------------------
   16. MARGES - neutralisation du blockGap dans les conteneurs de grille
   Le coeur pose margin-block-start: 1.2em en (0,2,0) sur le 2e enfant et les
   suivants. Dans une grille, cette marge ne separe pas : elle RETRECIT l
   element de 19,2px. On neutralise en (0,3,0) puis on redeclare les seules
   marges voulues, plus bas, a la meme specificite.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-int > *,
.wp-site-blocks .cvd-def > *,
.wp-site-blocks .cvd-etapes > *,
.wp-site-blocks .cvd-balance > *,
.wp-site-blocks .cvd-cadre > *,
.wp-site-blocks .cvd-terrains > *,
.wp-site-blocks .cvd-regle > *,
.wp-site-blocks .cvd-crans > *,
.wp-site-blocks .cvd-notes > *,
.wp-site-blocks .cvd-altitude > *,
.wp-site-blocks .cvd-reals .wp-block-post-template > * { margin-block: 0; }

.wp-site-blocks .cvd-sec .cvd-tete { margin-block-end: clamp(40px, 4.6vw, 60px); }
.wp-site-blocks .cvd-int > .cvd-etapes { margin-block-start: clamp(40px, 4.4vw, 58px); }
.wp-site-blocks .cvd-int > .cvd-regle { margin-block-end: clamp(36px, 4vw, 52px); }
.wp-site-blocks .cvd-regle > .cvd-regle__barre { margin-block-end: clamp(22px, 2.4vw, 30px); }

/* -------------------------------------------------------------------------
   17. PALIERS RESPONSIVES - mobile d abord
   ------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.wp-site-blocks .cvd-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-site-blocks .cvd-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvd-reals .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvd-terrains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.wp-site-blocks .cvd-balance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvd-synthese { grid-column: 1 / -1; }
	.wp-site-blocks .cvd-cadre { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.wp-site-blocks .cvd-reals .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-site-blocks .cvd-crans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* La section 2 : la tete a gauche, l enonce a droite, alignes en haut. */
	.wp-site-blocks .cvd-def {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(30px, 3.6vw, 56px);
		align-items: start;
	}
	.wp-site-blocks .cvd-def > .cvd-tete { margin-block-end: 0; }
}

/* Resorption : une requete peut ne ramener qu une ou deux fiches. Bornee a
   partir de 600px pour ne pas battre la regle mobile a une colonne. */
@media (min-width: 600px) {
	@supports selector(:has(*)) {
		.wp-site-blocks .cvd-reals .wp-block-post-template:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 1fr); }
		.wp-site-blocks .cvd-reals .wp-block-post-template:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
}
@media (min-width: 600px) and (max-width: 899px) {
	.wp-site-blocks .cvd-reals .wp-block-post-template > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Sous 480px, deux colonnes ne laissent que 166px par cran et les montants
   cassent en deux lignes. Un prix qui se lit sur deux lignes se lit mal. */
@media (max-width: 479px) {
	.wp-site-blocks .cvd-crans { grid-template-columns: minmax(0, 1fr); }
}

/* Sous 600px, les coordonnees du heros passent en colonne : un filet
   vertical entre deux blocs empiles n aurait aucun sens. */
@media (max-width: 599px) {
	.wp-site-blocks .cvd-coord > li { padding-right: 0; width: 100%; }
	.wp-site-blocks .cvd-coord > li + li {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--cvd-trait);
		margin-top: 12px;
		padding-top: 12px;
	}
	.wp-site-blocks .cvd-cadre__media img { min-height: 220px; }
	/* Le heros doit rester tenable meme quand le texte est long. */
	.wp-site-blocks .cvd-hero { min-height: calc(100svh - var(--cv2-hdr-h, 76px)); }
}

/* Le parallaxe est desactive sous 900px : sur un ecran tactile il coute plus
   qu il ne rapporte, et la barre d adresse fausse le calcul. */
@media (max-width: 899px) {
	.wp-site-blocks .cvd-hero > img.wp-block-cover__image-background {
		height: 100%;
		top: 0;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   18. APPLICATION DE LA MATIERE VERRE
   Posee ici plutot que par une classe dans le contenu : le balisage reste
   lisible, et une carte ajoutee plus tard herite du traitement sans qu on
   ait a y penser.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-etape,
.wp-site-blocks .cvd-plateau,
.wp-site-blocks .cvd-synthese,
.wp-site-blocks .cvd-cran,
.wp-site-blocks .cvd-note,
.wp-site-blocks .cvd-cadre__fiche,
.wp-site-blocks .cvd-realcarte,
.wp-site-blocks .cvd-enonce {
	position: relative;
	background: var(--cvd-verre-fond);
	border: 1px solid var(--cvd-verre-bord);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30);
	box-sizing: border-box;
}
/* L enonce garde son filet bleu a gauche, plus fort que la bordure de verre. */
.wp-site-blocks .cvd-enonce { border-left: 2px solid var(--cv2-bleu); }
.wp-site-blocks .cvd-synthese { border-left: 3px solid var(--cv2-bleu); }

/* Le filet lumineux du haut : c est lui qui fait lire « verre » et non
   « rectangle gris ». Pose en ::after pour laisser ::before aux composants
   qui s en servent deja (le point du cran, le voile du terrain). */
.wp-site-blocks .cvd-etape::after,
.wp-site-blocks .cvd-plateau::after,
.wp-site-blocks .cvd-synthese::after,
.wp-site-blocks .cvd-note::after,
.wp-site-blocks .cvd-cadre__fiche::after,
.wp-site-blocks .cvd-realcarte::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cvd-verre-haut), transparent);
	pointer-events: none;
	z-index: 2;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks .cvd-etape,
	.wp-site-blocks .cvd-plateau,
	.wp-site-blocks .cvd-synthese,
	.wp-site-blocks .cvd-cran,
	.wp-site-blocks .cvd-note,
	.wp-site-blocks .cvd-cadre__fiche,
	.wp-site-blocks .cvd-realcarte,
	.wp-site-blocks .cvd-enonce { background: rgba(255, 255, 255, 0.075); }
}

/* Le survol souleve la carte : le site vend du haut de gamme, une carte
   totalement inerte au pointeur ne le dit pas. */
.wp-site-blocks .cvd-plateau,
.wp-site-blocks .cvd-note,
.wp-site-blocks .cvd-etape,
.wp-site-blocks .cvd-realcarte {
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.wp-site-blocks .cvd-plateau:hover,
.wp-site-blocks .cvd-note:hover,
.wp-site-blocks .cvd-etape:hover,
.wp-site-blocks .cvd-realcarte:hover {
	transform: translateY(-3px);
	border-color: rgba(86, 181, 235, 0.42);
	box-shadow: 0 26px 54px rgba(0, 0, 0, 0.42);
}

/* -------------------------------------------------------------------------
   19. BRANCHEMENT DES ANIMATIONS
   accueil.js pose .cvh-anim sur ses cibles puis .cvh-vu a l entree dans le
   champ ; accueil.css joue alors cvhMonte. Les regles ci-dessous ne servent
   qu aux deux cas ou l entree par le bas ne convient pas.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-regle__barre.cvh-anim.cvh-vu {
	animation: cvdBarre 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.wp-site-blocks .cvd-palier.cvh-anim.cvh-vu::before {
	animation: cvdParait 0.5s ease 0.18s backwards;
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .cvd-regle__barre.cvh-anim.cvh-vu,
	.wp-site-blocks .cvd-palier.cvh-anim.cvh-vu::before { animation: none; }
	.wp-site-blocks .cvd-plateau,
	.wp-site-blocks .cvd-note,
	.wp-site-blocks .cvd-etape,
	.wp-site-blocks .cvd-realcarte { transition: none; }
	.wp-site-blocks .cvd-plateau:hover,
	.wp-site-blocks .cvd-note:hover,
	.wp-site-blocks .cvd-etape:hover,
	.wp-site-blocks .cvd-realcarte:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   20. ANIMATIONS - declenchement sur .cvh-vu SEUL
   ⛔ accueil.js retire .cvh-anim au bout de 1,2s par un filet de securite.
   Mesure du 25/08 : sur la page temoin 170 comme ici, .cvh-anim vaut 0 et
   .cvh-vu vaut 5. Une regle ecrite `.X.cvh-anim.cvh-vu` ne joue donc JAMAIS
   pour les sections revelees au defilement. .cvh-vu, lui, est ajoute par l
   observateur et n est jamais retire : c est le seul crochet fiable.
   Rien n est masque au repos, conformement a la regle du site.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-hero__bloc > .cvh-vu,
.wp-site-blocks .cvd-tete > .cvh-vu,
.wp-site-blocks .cvd-enonce.cvh-vu,
.wp-site-blocks .cvd-etape.cvh-vu,
.wp-site-blocks .cvd-plateau.cvh-vu,
.wp-site-blocks .cvd-synthese.cvh-vu,
.wp-site-blocks .cvd-cadre__media.cvh-vu,
.wp-site-blocks .cvd-cadre__fiche > .cvh-vu,
.wp-site-blocks .cvd-terrain.cvh-vu,
.wp-site-blocks .cvd-cran.cvh-vu,
.wp-site-blocks .cvd-note.cvh-vu,
.wp-site-blocks .cvd-palier.cvh-vu,
.wp-site-blocks .cvd-reals .wp-block-post-template > .cvh-vu,
.wp-site-blocks .cvd-faq > details.cvh-vu,
.wp-site-blocks .cvd-appel__bloc > .cvh-vu {
	animation: cvdMonte 0.78s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* La reglette se trace, elle ne monte pas. */
.wp-site-blocks .cvd-regle__barre.cvh-vu {
	animation: cvdBarre 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* Le point du palier arrive apres son texte. */
.wp-site-blocks .cvd-palier.cvh-vu::before {
	animation: cvdParait 0.5s ease 0.2s backwards;
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .cvd-hero__bloc > .cvh-vu,
	.wp-site-blocks .cvd-tete > .cvh-vu,
	.wp-site-blocks .cvd-enonce.cvh-vu,
	.wp-site-blocks .cvd-etape.cvh-vu,
	.wp-site-blocks .cvd-plateau.cvh-vu,
	.wp-site-blocks .cvd-synthese.cvh-vu,
	.wp-site-blocks .cvd-cadre__media.cvh-vu,
	.wp-site-blocks .cvd-cadre__fiche > .cvh-vu,
	.wp-site-blocks .cvd-terrain.cvh-vu,
	.wp-site-blocks .cvd-cran.cvh-vu,
	.wp-site-blocks .cvd-note.cvh-vu,
	.wp-site-blocks .cvd-palier.cvh-vu,
	.wp-site-blocks .cvd-reals .wp-block-post-template > .cvh-vu,
	.wp-site-blocks .cvd-faq > details.cvh-vu,
	.wp-site-blocks .cvd-appel__bloc > .cvh-vu,
	.wp-site-blocks .cvd-regle__barre.cvh-vu,
	.wp-site-blocks .cvd-palier.cvh-vu::before { animation: none; }
}

/* -------------------------------------------------------------------------
   21. HAUTEUR DU HEROS - l en-tete fait 114px, pas 76
   ⛔ --cv2-hdr-h vaut 76px, mais l en-tete rendu (barre de service + menu)
   mesure 114px et il est sticky. Deduire 76 laissait le bas du heros 38px
   SOUS la ligne de flottaison. drone.js mesure l en-tete et pose --cvd-hdr ;
   le repli ci-dessous vaut la mesure du 25/08.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-hero {
	min-height: calc(100vh - var(--cvd-hdr, 114px));
	min-height: calc(100svh - var(--cvd-hdr, 114px));
}
@media (max-width: 599px) {
	.wp-site-blocks .cvd-hero { min-height: calc(100svh - var(--cvd-hdr, 114px)); }
}

/* -------------------------------------------------------------------------
   22. CARTES DE TERRAIN - plaque de verre sous le texte
   ⛔ Mesure du 25/08 : le texte de ces cartes ne se pose PAS en pied, il
   occupe de 24% a 91% de la hauteur. Un voile en degrade calcule pour le
   pied ne le couvre donc pas, et renforcer ce pied ne changeait rien
   (3,37 puis 3,33 : l ecart est du bruit).
   Procede retenu : une plaque opaque derriere le texte seul. Le contraste ne
   depend plus de la photo - garanti meme sur une image entierement blanche -
   et l image reste nette au-dessus de la plaque.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvd-terrain {
	min-height: 430px;
	padding: 0;
}
/* Le degrade ne sert plus qu a lier l image a la plaque, pas a porter le
   texte : il reste donc leger et laisse voir la photo. */
.wp-site-blocks .cvd-terrain::before {
	background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.52) 100%);
}

/* Titre et paragraphe partagent le meme fond : colles, ils forment une seule
   plaque continue. 0,86 d opacite garantit 5,53 de contraste dans le pire
   cas d une photo blanche - tres au-dessus des 4,5 requis. */
.wp-site-blocks .cvd-terrain__titre,
.wp-site-blocks .cvd-terrain p {
	background: rgba(0, 0, 0, 0.86);
	-webkit-backdrop-filter: blur(10px) saturate(115%);
	backdrop-filter: blur(10px) saturate(115%);
	margin: 0;
}
.wp-site-blocks .cvd-terrain__titre {
	padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) 0;
	border-top: 1px solid var(--cvd-verre-bord);
}
.wp-site-blocks .cvd-terrain p {
	padding: 12px clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px);
}
/* Le filet lumineux du haut de plaque, comme sur les autres cartes du kit. */
.wp-site-blocks .cvd-terrain__titre::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	margin-top: calc(-1 * clamp(20px, 2.2vw, 26px) - 1px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cvd-verre-haut), transparent);
	pointer-events: none;
}
.wp-site-blocks .cvd-terrain__titre { position: relative; }

/* Au survol, la plaque s opacifie encore : le lien reste net. */
.wp-site-blocks .cvd-terrain:hover .cvd-terrain__titre,
.wp-site-blocks .cvd-terrain:hover p { background: rgba(0, 0, 0, 0.92); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks .cvd-terrain__titre,
	.wp-site-blocks .cvd-terrain p { background: rgba(0, 0, 0, 0.90); }
}

/* =========================================================================
   23. CARTE PHOTO - composant commun a l arbitrage et aux terrains
   ⛔ Les plaques de texte des cartes de terrain ne s alignaient pas d une
   carte a l autre : l image servait de fond et le texte flottait au-dessus,
   donc sa hauteur dependait de la longueur du texte. Ici l image occupe un
   ratio FIXE en haut de carte et le corps prend le reste : les corps
   demarrent tous a la meme hauteur, quel que soit le texte.
   Le corps a son propre fond opaque : le contraste ne depend plus de la
   photo, il se calcule sur un aplat.
   ========================================================================= */
.wp-site-blocks .cvd-cphotos {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.2vw, 26px);
	align-items: stretch;
}
.wp-site-blocks .cvd-cphoto {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--cvd-verre-fond);
	border: 1px solid var(--cvd-verre-bord);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.wp-site-blocks .cvd-cphoto:hover {
	transform: translateY(-3px);
	border-color: rgba(86, 181, 235, 0.42);
	box-shadow: 0 26px 54px rgba(0, 0, 0, 0.42);
}
/* Filet lumineux du haut : la signature verre du kit. */
.wp-site-blocks .cvd-cphoto::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	z-index: 3;
	background: linear-gradient(90deg, transparent, var(--cvd-verre-haut), transparent);
	pointer-events: none;
}

.wp-site-blocks .cvd-cphoto__media {
	margin: 0;
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}
.wp-site-blocks .cvd-cphoto__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-site-blocks .cvd-cphoto:hover .cvd-cphoto__media img { transform: scale(1.06); }
/* Voile NOIR sur la photo : elle reste lisible mais se fond dans la carte. */
.wp-site-blocks .cvd-cphoto__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.34) 62%, rgba(0,0,0,0.72) 100%);
	pointer-events: none;
}

/* Le corps porte son propre aplat : le texte n est jamais sur la photo. */
.wp-site-blocks .cvd-cphoto__corps {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(22px, 2.4vw, 30px);
	background: rgba(0, 0, 0, 0.58);
}
.wp-site-blocks .cvd-cphoto__corps > * { margin: 0; }
.wp-site-blocks .cvd-cphoto__cle {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	padding-block-end: 12px;
	border-bottom: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-cphoto__titre {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1.24;
	color: #ffffff;
}
.wp-site-blocks .cvd-cphoto__titre a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.18s ease;
}
.wp-site-blocks .cvd-cphoto__titre a:hover { color: var(--cv2-ciel); }
/* Toute la carte est cliquable quand son titre porte un lien. */
.wp-site-blocks .cvd-cphoto__titre a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.wp-site-blocks .cvd-cphoto__corps p:not(.cvd-cphoto__cle) {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.66;
	color: var(--cvd-texte);
}
/* Le lien de pied est pousse en bas : les pieds s alignent d une carte a
   l autre meme si les textes n ont pas la meme longueur. */
.wp-site-blocks .cvd-cphoto__lien {
	margin-top: auto;
	padding-top: 6px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 1px solid var(--cvd-trait-fort);
	padding-bottom: 3px;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.wp-site-blocks .cvd-cphoto:hover .cvd-cphoto__lien { color: #ffffff; border-bottom-color: #ffffff; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks .cvd-cphoto { background: rgba(255, 255, 255, 0.075); }
}

@media (min-width: 700px) {
	.wp-site-blocks .cvd-cphotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .cvd-cphoto,
	.wp-site-blocks .cvd-cphoto__media img { transition: none; }
	.wp-site-blocks .cvd-cphoto:hover { transform: none; }
	.wp-site-blocks .cvd-cphoto:hover .cvd-cphoto__media img { transform: none; }
}

/* =========================================================================
   24. SECTION 2 REFONDUE - diptyque image / propos
   L ancienne composition posait la tete a gauche et un encadre a droite,
   sans image : une section plate, avec une zone vide sous l encadre.
   Ici l image occupe la colonne gauche sur toute la hauteur du bloc, le
   propos et l enonce tiennent la droite, et les trois etapes restent en
   cartes de verre sous un filet.
   ========================================================================= */
.wp-site-blocks .cvd-diptyque {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(26px, 3vw, 44px);
	align-items: stretch;
}
.wp-site-blocks .cvd-diptyque__media {
	margin: 0;
	position: relative;
	overflow: hidden;
	min-height: 280px;
	border: 1px solid var(--cvd-verre-bord);
}
.wp-site-blocks .cvd-diptyque__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-site-blocks .cvd-diptyque:hover .cvd-diptyque__media img { transform: scale(1.04); }
/* Voile noir leger : l image doit rester lisible, aucun texte n est pose
   dessus, donc pas besoin de la noyer. */
.wp-site-blocks .cvd-diptyque__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(160deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.58) 100%);
}
.wp-site-blocks .cvd-diptyque__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(22px, 2.4vw, 30px);
}
.wp-site-blocks .cvd-diptyque__col > * { margin: 0; }

@media (min-width: 900px) {
	.wp-site-blocks .cvd-diptyque { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
	.wp-site-blocks .cvd-diptyque__media { min-height: 0; height: 100%; }
}

/* =========================================================================
   25. FOND DE SECTION EN IMAGE
   Une figure posee en premier enfant de la section, en position absolue.
   Passer par une balise plutot que par background-image laisse WordPress
   gerer srcset et chargement differe.
   ========================================================================= */
.wp-site-blocks .cvd-sec__fond {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.wp-site-blocks .cvd-sec__fond img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Voile NOIR dense : le texte de la frise se pose directement dessus.
   0,84 garantit 4,97 de contraste meme sur une photo entierement blanche.
   La lueur laterale evite l aplat mort et laisse deviner l image. */
.wp-site-blocks .cvd-sec__fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 70% at 88% 18%, rgba(12, 103, 222, 0.20), transparent 62%),
		linear-gradient(180deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.84) 50%, rgba(0,0,0,0.88) 100%);
}
/* La section qui porte un fond image n a plus besoin de son halo generique. */
.wp-site-blocks .cvd-sec:has(> .cvd-sec__fond)::before { background: none; }

/* =========================================================================
   26. NEUTRALISATION DES MARGES - conteneurs ajoutes apres coup
   ⛔ PIEGE RECURRENT : tout conteneur de grille ou de flex ajoute au kit doit
   etre inscrit ici, sinon son 2e enfant prend les 1,2em du coeur et se
   retrouve RETRECI d autant. Constate trois fois sur cette page : d abord
   sur .cvd-balance et .cvd-cadre, puis a nouveau sur .cvd-diptyque, dont la
   colonne mesurait 700px contre 719 pour l image d a cote.
   ========================================================================= */
.wp-site-blocks .cvd-diptyque > *,
.wp-site-blocks .cvd-diptyque__col > *,
.wp-site-blocks .cvd-cphotos > *,
.wp-site-blocks .cvd-cphoto > *,
.wp-site-blocks .cvd-cphoto__corps > * { margin-block: 0; }

/* La tete garde sa marge basse quand elle n est pas seule dans sa colonne.
   Dans le diptyque, l ecart est porte par le gap de la colonne : on annule. */
.wp-site-blocks .cvd-diptyque__col > .cvd-tete { margin-block-end: 0; }

/* =========================================================================
   27. CHIFFRE CLE DU BUDGET
   La grille 2 500 / 5 000 / 20 000 / 50 000 euros est celle du FEU D
   ARTIFICE : elle n a rien a faire sur la page drone, ou la seule donnee
   valable est le seuil d entree. Une reglette a quatre crans laissait croire
   que le drone suivait la meme echelle. Un seul chiffre, tenu large.
   ========================================================================= */
.wp-site-blocks .cvd-cle {
	position: relative;
	padding: clamp(30px, 3.6vw, 46px);
	box-sizing: border-box;
	background: var(--cvd-verre-fond);
	border: 1px solid var(--cvd-verre-bord);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30);
}
.wp-site-blocks .cvd-cle::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cvd-verre-haut), transparent);
	pointer-events: none;
}
.wp-site-blocks .cvd-cle > * { margin-block: 0; }
.wp-site-blocks .cvd-cle__val {
	font-size: var(--cv2-t1);
	font-weight: 700;
	line-height: 1.06;
	color: #ffffff;
	margin: 0 0 14px;
}
.wp-site-blocks .cvd-cle__val mark {
	background: var(--cv2-degrade-titre);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wp-site-blocks .cvd-cle__lib {
	font-size: var(--cv2-t4);
	font-weight: 300;
	line-height: 1.6;
	color: var(--cvd-texte);
	max-width: 48ch;
	margin: 0;
}
/* La barre reprend le trace anime de l ancienne reglette. */
.wp-site-blocks .cvd-cle .cvd-regle__barre { margin: 0 0 clamp(22px, 2.4vw, 30px); }

/* =========================================================================
   28. SECTION BUDGET - panneau de reperes, sur le motif du barometre du site
   Le modele (page 128, kit .cvb-) fait porter aux jauges des MONTANTS par
   taille de collectivite. Impossible ici : le drone n a qu un seul montant,
   son seuil d entree. Les jauges portent donc le POIDS DE CHAQUE FACTEUR
   sur le devis, et le montant unique tient le pied du panneau.
   ========================================================================= */
.wp-site-blocks .cvd-budget {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(30px, 3.4vw, 52px);
	align-items: start;
}
.wp-site-blocks .cvd-budget > *,
.wp-site-blocks .cvd-budget__col > *,
.wp-site-blocks .cvd-panneau > *,
.wp-site-blocks .cvd-panneau__tete > *,
.wp-site-blocks .cvd-jauges > *,
.wp-site-blocks .cvd-jauge > *,
.wp-site-blocks .cvd-jauge__tete > *,
.wp-site-blocks .cvd-axe > *,
.wp-site-blocks .cvd-pied > *,
.wp-site-blocks .cvd-repere__bloc > * { margin-block: 0; }

.wp-site-blocks .cvd-budget__col { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }

/* Le badge du chapeau, repris du modele. */
.wp-site-blocks .cvd-badge {
	display: inline-block;
	align-self: flex-start;
	background: rgba(12, 103, 222, 0.30);
	border: 1px solid rgba(86, 181, 235, 0.34);
	padding: 8px 16px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}
/* Le filet court sous le titre, comme sur le modele. */
.wp-site-blocks .cvd-budget__col .cvd-titre { margin-block-end: 0; }
.wp-site-blocks .cvd-filet {
	width: 78px;
	height: 3px;
	background: var(--cv2-degrade);
	margin: 0;
}

/* Le repere chiffre du bas de colonne. */
.wp-site-blocks .cvd-repere__bloc {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(16px, 1.8vw, 24px);
	align-items: start;
	padding-block-start: clamp(20px, 2.2vw, 28px);
	border-top: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-repere__val {
	font-size: var(--cv2-t2);
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
}
.wp-site-blocks .cvd-repere__cle {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0 0 6px;
}
.wp-site-blocks .cvd-repere__lib {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.6;
	color: var(--cvd-texte);
	margin: 0;
}

/* ---- le panneau chiffre ---------------------------------------------- */
.wp-site-blocks .cvd-panneau {
	position: relative;
	padding: clamp(24px, 2.6vw, 34px);
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.42);
	border: 1px solid var(--cvd-verre-bord);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.2vw, 28px);
}
.wp-site-blocks .cvd-panneau::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cvd-verre-haut), transparent);
	pointer-events: none;
}
.wp-site-blocks .cvd-panneau__tete {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: baseline;
	padding-block-end: clamp(14px, 1.6vw, 18px);
	border-bottom: 1px solid var(--cvd-trait);
}
.wp-site-blocks .cvd-panneau__cle,
.wp-site-blocks .cvd-panneau__unite {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
}
.wp-site-blocks .cvd-panneau__cle { color: #ffffff; }
.wp-site-blocks .cvd-panneau__unite { color: var(--cv2-ciel); }

.wp-site-blocks .cvd-jauges { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
.wp-site-blocks .cvd-jauge__tete {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	align-items: baseline;
	margin-block-end: 10px;
}
.wp-site-blocks .cvd-jauge__lib {
	font-size: var(--cv2-t5);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}
.wp-site-blocks .cvd-jauge__poids {
	font-size: var(--cv2-t5);
	font-weight: 700;
	color: var(--cv2-ciel);
	margin: 0;
}
.wp-site-blocks .cvd-jauge__rail {
	position: relative;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
/* ⛔ LES BORNES VIVENT ICI, PAS DANS LE CONTENU.
   Changer un libelle sans toucher la largeur affiche une barre qui ne
   correspond plus, et rien ne le signale. Toute jauge ajoutee doit recevoir
   sa largeur ci-dessous. */
.wp-site-blocks .cvd-jauge__rail::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--cv2-degrade);
	width: var(--cvd-j, 50%);
	transform-origin: left center;
}
.wp-site-blocks .cvd-jauge--determinant .cvd-jauge__rail::before { --cvd-j: 92%; }
.wp-site-blocks .cvd-jauge--fort        .cvd-jauge__rail::before { --cvd-j: 68%; }
.wp-site-blocks .cvd-jauge--modere      .cvd-jauge__rail::before { --cvd-j: 46%; }
.wp-site-blocks .cvd-jauge--secondaire  .cvd-jauge__rail::before { --cvd-j: 24%; }

/* Le pied du panneau : le seul montant de la page. */
.wp-site-blocks .cvd-pied {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	padding: clamp(16px, 1.8vw, 22px);
	background: rgba(12, 103, 222, 0.16);
	border: 1px solid rgba(86, 181, 235, 0.30);
}
.wp-site-blocks .cvd-pied__lib {
	font-size: var(--cv2-t5);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}
.wp-site-blocks .cvd-pied__val {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.wp-site-blocks .cvd-budget { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); }
}

/* La jauge se remplit a l entree dans le champ. */
.wp-site-blocks .cvd-jauge.cvh-vu .cvd-jauge__rail::before {
	animation: cvdBarre 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .cvd-jauge.cvh-vu .cvd-jauge__rail::before { animation: none; }
}