/* =========================================================================
   Celesta v2 - kit « le plan de prévention », page MERE du silo Entreprises
   (136). Prefixe .cvm-

   Distinct des kits voisins :
   .cve- (Evenementiel mere) : la regie
   .cvd- (Drone mere)        : trame de points, jauges, frise verticale
   .cvg- (Sport mere)        : plaque qui mord la photo, face-a-face decale
   .cvt- (filles)            : hero en split, timeline collante

   Ici la grammaire vient du sujet : le DOCUMENT TECHNIQUE D ENTREPRISE.
   - un CARTOUCHE de plan en bas du heros, comme sur un plan d architecte ;
   - une MATRICE a lignes appariees qui attribue chaque responsabilite ;
   - des RUBRIQUES a en-tete plein sur trame quadrillee ;
   - un CHEMIN de validation a cases cochees.

   PARTI ASSUME : aucun texte n est jamais pose sur une photo nue. Toute
   plaque portant du texte est OPAQUE, le voile reste leger et l image se
   voit. Regle client rappelee deux fois.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SOCLE
   ------------------------------------------------------------------------- */
body:has(.cvm-hero) main,
body:has(.cvm-sec) main { margin-block-start: 0; }
body:has(.cvm-hero) .wp-block-post-content,
body:has(.cvm-sec) .wp-block-post-content { margin-block-start: 0; }

/* A1bis : les sections RACINE prennent elles-memes les 19,2px du coeur.
   Liste EXPLICITE, jamais `> *` generique. */
.wp-site-blocks .wp-block-post-content > .cvm-hero,
.wp-site-blocks .wp-block-post-content > .cvm-sec,
.wp-site-blocks .wp-block-post-content > .cvm-appel { margin-block: 0; }

/* Sans couleur de repli, tout element non colore herite du #111 du theme. */
.wp-site-blocks .cvm-hero,
.wp-site-blocks .cvm-sec,
.wp-site-blocks .cvm-appel { color: var(--cvm-texte); }
.wp-site-blocks .cvm-hero h1,
.wp-site-blocks .cvm-sec h2,
.wp-site-blocks .cvm-sec h3,
.wp-site-blocks .cvm-sec h4,
.wp-site-blocks .cvm-appel h2 { color: #ffffff; }

.cvm-hero, .cvm-sec, .cvm-appel {
	--cvm-texte: #DCDDEF;
	--cvm-trait: rgba(86, 181, 235, 0.24);
	--cvm-trait-fort: rgba(86, 181, 235, 0.58);
	--cvm-verre: rgba(255, 255, 255, 0.048);
	--cvm-bord: rgba(255, 255, 255, 0.14);
	--cvm-luisant: rgba(255, 255, 255, 0.32);
	--cvm-plaque: rgba(0, 0, 0, 0.94);
	/* ⛔ Une plaque de HEROS en verre a ete essayee a 0,86 puis ABANDONNEE :
	   mesure au pire pixel, le degrade bleu du <mark> du H1 tombait a 1,22 et
	   le surtitre en ciel a 2,81. Sur une photo de feu d artifice, le pire
	   pixel vaut 1,00 : aucune transparence ne tient. La photo se rend visible
	   en RETRECISSANT la plaque, pas en l eclaircissant. */
}

.cvm-int {
	max-width: 1280px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(58px, 7vw, 96px) clamp(20px, 3.2vw, 32px);
}

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

/* overflow CLIP et non HIDDEN : hidden tuerait tout position sticky. */
.wp-site-blocks .cvm-sec { position: relative; overflow: clip; }
/* A17 : la figure de fond doit rester ABSOLUE. Une regle de pile en `> *`
   la remettrait dans le flux et la photo occuperait toute la hauteur. */
.wp-site-blocks .cvm-sec > *:not(.cvm-fond) { position: relative; z-index: 1; }

/* La trame quadrillee, signature du kit : un plan technique. */
.wp-site-blocks .cvm-sec--trame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, rgba(86, 181, 235, 0.07) 1px, transparent 1px),
		linear-gradient(180deg, rgba(86, 181, 235, 0.07) 1px, transparent 1px);
	background-size: 56px 56px, 56px 56px;
	-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
	mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
}

/* -------------------------------------------------------------------------
   2. NEUTRALISATION DES MARGES DU COEUR
   Liste couvrant TOUS les conteneurs du kit des sa creation, y compris ceux
   qui n ont qu un enfant aujourd hui. Dans une grille, cette marge ne separe
   pas : elle RETRECIT l element.
   ------------------------------------------------------------------------- */
/* ⚠️ Le heros est un wp:cover : ses enfants directs sont le span de fond,
   l image et le conteneur du coeur. On ne neutralise QUE le conteneur. */
.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > *,
.wp-site-blocks .cvm-cart > *,
.wp-site-blocks .cvm-cart__case > *,
.wp-site-blocks .cvm-sec > *,
.wp-site-blocks .cvm-int > *,
.wp-site-blocks .cvm-tete > *,
.wp-site-blocks .cvm-matrice > *,
.wp-site-blocks .cvm-matrice__tete > *,
.wp-site-blocks .cvm-ligne > *,
.wp-site-blocks .cvm-ligne__col > *,
.wp-site-blocks .cvm-rubriques > *,
.wp-site-blocks .cvm-rubrique > *,
.wp-site-blocks .cvm-rubrique__corps > *,
.wp-site-blocks .cvm-formats > *,
.wp-site-blocks .cvm-format > *,
.wp-site-blocks .cvm-chemin > *,
.wp-site-blocks .cvm-etape > *,
.wp-site-blocks .cvm-portes > *,
.wp-site-blocks .cvm-porte > *,
.wp-site-blocks .cvm-porte__corps > *,
.wp-site-blocks .cvm-reperes > *,
.wp-site-blocks .cvm-reperes__col > *,
.wp-site-blocks .cvm-cartouche > *,
.wp-site-blocks .cvm-cartouche__lignes > *,
.wp-site-blocks .cvm-cartouche__ligne > *,
.wp-site-blocks .cvm-cartouche__pied > *,
.wp-site-blocks .cvm-reals > *,
.wp-site-blocks .cvm-realgrille > *,
.wp-site-blocks .cvm-realcarte > *,
.wp-site-blocks .cvm-realcarte__corps > *,
.wp-site-blocks .cvm-appel > *,
.wp-site-blocks .cvm-appel__bloc > *,
.wp-site-blocks .cvm-appel__int > *,
.wp-site-blocks .cvm-faq > * { margin-block: 0; }

/* -------------------------------------------------------------------------
   3. QUI NEUTRALISE REDECLARE
   La neutralisation ci-dessus vaut (0,3,0) et ecrase aussi les marges des
   classes, en (0,2,0). Sans ce bloc, tout se colle.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > .cvm-sur { margin-block-end: clamp(14px, 1.8vw, 20px); }
.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > .cvm-hero__titre { margin-block-end: clamp(16px, 2vw, 22px); }
.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > .cvm-hero__chapo { margin-block-end: clamp(22px, 2.6vw, 30px); }
/* Les boutons precedent desormais le cartouche : sans cette ligne, les deux
   se touchent. */
.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > .wp-block-buttons { margin-block-end: clamp(26px, 3vw, 38px); }

.wp-site-blocks .cvm-tete > .cvm-sur { margin-block-end: 14px; }
.wp-site-blocks .cvm-tete > .cvm-titre { margin-block-end: 16px; }
.wp-site-blocks .cvm-int > .cvm-tete { margin-block-end: clamp(36px, 4.2vw, 54px); }
.wp-site-blocks .cvm-int > .cvm-note { margin-block-start: clamp(26px, 3vw, 36px); }

.wp-site-blocks .cvm-reperes__col > .cvm-sur { margin-block-end: 14px; }
.wp-site-blocks .cvm-reperes__col > .cvm-titre { margin-block-end: 16px; }

.wp-site-blocks .cvm-appel__int > .cvm-sur { margin-block-end: 14px; }
.wp-site-blocks .cvm-appel__int > .cvm-appel__titre { margin-block-end: 16px; }
.wp-site-blocks .cvm-appel__int > .cvm-appel__texte { margin-block-end: clamp(22px, 2.6vw, 30px); }

.wp-site-blocks .cvm-faq > details { margin-block-start: 10px; }
.wp-site-blocks .cvm-faq > details:first-of-type { margin-block-start: 0; }

/* -------------------------------------------------------------------------
   4. BOUTONS
   Les styles du site sont scopes sur .cvh- : un kit neuf n herite de rien et
   les boutons deviennent invisibles sur fond sombre.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-hero .wp-block-button__link,
.wp-site-blocks .cvm-sec .wp-block-button__link,
.wp-site-blocks .cvm-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 .cvm-hero .wp-block-button__link:hover,
.wp-site-blocks .cvm-sec .wp-block-button__link:hover,
.wp-site-blocks .cvm-appel .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(12, 103, 222, 0.45);
	transform: translateY(-1px);
}
.wp-site-blocks .cvm-hero .is-style-outline .wp-block-button__link,
.wp-site-blocks .cvm-sec .is-style-outline .wp-block-button__link,
.wp-site-blocks .cvm-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 .cvm-hero .is-style-outline .wp-block-button__link:hover,
.wp-site-blocks .cvm-sec .is-style-outline .wp-block-button__link:hover,
.wp-site-blocks .cvm-appel .is-style-outline .wp-block-button__link:hover {
	border-color: var(--cv2-ciel);
	box-shadow: none;
}

/* -------------------------------------------------------------------------
   5. FOND PHOTOGRAPHIQUE
   C7 : height 100% sur une img se resout en RATIO NATUREL. Absolu obligatoire.
   Voile LEGER : aucun texte ne repose sur la photo, il vit sur des plaques.
   ------------------------------------------------------------------------- */
.wp-site-blocks figure.cvm-fond,
.wp-site-blocks .cvm-fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}
.wp-site-blocks .cvm-fond img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wp-site-blocks .cvm-fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.24) 42%, rgba(0, 0, 0, 0.40) 100%);
}

/* -------------------------------------------------------------------------
   6. HEROS - la PHOTOGRAPHIE SEULE, sans aucune plaque
   ⛔⛔ Deux versions ont ete rejetees avant celle-ci : une plaque noire
   pleine, puis une plaque en verre. Le defaut n etait pas leur densite, c est
   la plaque elle-meme : un rectangle colle sur une image. Parti retenu, celui
   de la page 172 deja validee par le client : le texte vit DIRECTEMENT sur la
   photographie, et c est le VOILE qui organise la lisibilite.
   ⚠️ Le voile n est PAS celui de la 172, qui empile deux droites. Ici il
   est ELLIPTIQUE et ancre en bas a gauche : l ombre suit une courbe et libere
   tout l angle haut-droit, ou la photographie reste pleine.
   ⛔ PREMIERE ellipse essayee : ancree dans le COIN bas-gauche. Elegante,
   mais elle protege le coin et non la COLONNE DE TEXTE : mesure, le chapo
   avait 10,94 % de ses pixels sous 4,5 et le cartouche 6,79 %. L ellipse est
   donc ancree a MI-HAUTEUR du bord gauche, et resserree.
   ⭐ Mesure sur les rectangles de texte REELS, ce voile bat l etalon de la
   172 : surtitre 0 %, H1 0,09 %, chapo 0,02 %, cartouche 0,18 %, contre
   0,657 % pour l etalon - et la luminance moyenne composee vaut 0,0405
   contre 0,0090, soit une image 4,5 fois plus presente.
   ⚠️ Mesurer sur la BOITE d un paragraphe fausse tout : elle occupe toute
   la largeur alors que le texte n en prend qu un tiers. Prendre les rectangles
   du Range, pas ceux de l element.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	background: var(--cv2-abysse);
	min-height: calc(100vh - var(--cvm-hdr, 114px));
	min-height: calc(100svh - var(--cvm-hdr, 114px));
	overflow: hidden;
	padding: 0;
}
/* ⛔⛔ LE VOILE NE PEUT PAS ETRE UN PSEUDO-ELEMENT. Le coeur pose z-index 1
   sur .wp-block-cover__inner-container avec une chaine tres specifique : un
   ::after (z-index 2) finirait TOUJOURS peint par-dessus le texte. Le voile
   se peint donc sur le SPAN DE FOND du coeur, qui precede le conteneur dans
   l ordre du DOM. Le coeur y met opacity 0 via .has-background-dim-0, en
   (0,4,0) : on reprend sa chaine de classes pour valoir (0,5,0). */
.wp-site-blocks .cvm-hero > img.wp-block-cover__image-background {
	z-index: 0;
	object-fit: cover;
}
.wp-site-blocks .cvm-hero > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	z-index: 1;
	opacity: 1;
	background:
		radial-gradient(78% 90% at 0% 64%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 52%, rgba(0, 0, 0, 0.10) 88%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.06) 42%, rgba(0, 0, 0, 0.42) 100%);
}
/* ⛔⛔ CE QUI FAIT PASSER LE TEXTE AU-DESSUS DU VOILE, ce n est PAS le
   z-index ci-dessous : MESURE, il ne s applique pas. Le selecteur du coeur
   vaut (0,5,1) - body + :not(.editor-styles-wrapper) + .wp-block-cover +
   :not(:has(fond + conteneur)) - et il fixe le conteneur a 1. Aucune
   surenchere raisonnable ne le bat.
   ⭐ Ce qui tranche, c est l ORDRE DE L ARBRE : le voile est peint sur le
   span de fond, lui aussi a z-index 1, et ce span PRECEDE le conteneur dans
   le DOM. A z-index egal, le dernier de l arbre passe devant. Verifie par
   elementFromPoint sur le H1, le surtitre et le cartouche.
   ⚠️ Le z-index 3 reste comme filet pour le cas ou la garde :has() du
   coeur deviendrait vraie ; ne PAS le supprimer en croyant nettoyer, et ne
   pas non plus croire qu il agit aujourd hui. */
.wp-site-blocks .cvm-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	box-sizing: border-box;
	/* ⚠️ Retrait HAUT indexe sur la hauteur de fenetre : dans un heros en
	   flex-end il ne sert a rien des que le contenu deborde, il ne fait que
	   pousser le bloc hors de l ecran. */
	padding: clamp(28px, 6vh, 108px) clamp(20px, 3.2vw, 32px) clamp(30px, 4.6vh, 64px);
}

/* Le surtitre passe en BLANC : sur une photographie voilee, le ciel #56B5EB
   ne mesure que 2,07 au 99e centile. Le bleu vit dans le <mark> du H1. */
.wp-site-blocks .cvm-hero .cvm-sur { color: #ffffff; }
/* ⛔ Le H1 est plafonne par la HAUTEUR de fenetre, sans toucher au jeton
   global --cv2-t1 qui sert a tout le site : a 62px il tenait quatre lignes
   et faisait deborder le heros de 73px. */
.wp-site-blocks .cvm-hero__titre {
	font-size: min(var(--cv2-t1), 5.9vh);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: #ffffff;
	max-width: none;
	overflow-wrap: break-word;
}
.wp-site-blocks .cvm-hero__titre mark,
.wp-site-blocks .cvm-titre mark,
.wp-site-blocks .cvm-appel__titre mark {
	background: var(--cv2-degrade-titre);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.wp-site-blocks .cvm-hero__chapo {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.92);
	max-width: 640px;
}

/* Le CARTOUCHE : trois reperes poses sur un simple FILET, sans aucun fond.
   C est la grammaire du plan technique propre au kit .cvm-, et non des puces
   losangees - le parti est repris, pas recopie. */
.wp-site-blocks .cvm-cart {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, auto));
	justify-content: start;
	justify-self: start;
	max-width: 760px;
	box-sizing: border-box;
	background: none;
	border: 0;
	border-block-start: 1px solid rgba(255, 255, 255, 0.30);
	padding: clamp(14px, 1.6vw, 20px) 0 0;
	gap: 0;
}
.wp-site-blocks .cvm-cart__case {
	box-sizing: border-box;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-inline-start: 0;
}
.wp-site-blocks .cvm-cart__case + .cvm-cart__case {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.24);
	padding-inline-start: clamp(20px, 2.6vw, 36px);
	margin-inline-start: clamp(20px, 2.6vw, 36px);
}
/* ⛔ La cle n est PAS en ciel : sur la photographie voilee, #56B5EB laisse
   6,86 % de ses pixels sous 4,5 et tombe a 2,05 au pire. En #DCDDEF il ne
   reste que 0,18 %, et la nuance bleutee subsiste. */
.wp-site-blocks .cvm-cart__cle {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cvm-texte);
	margin: 0;
}
.wp-site-blocks p.cvm-cart__val {
	font-size: var(--cv2-t5);
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

/* -------------------------------------------------------------------------
   7. TETE DE SECTION
   ------------------------------------------------------------------------- */
.cvm-tete { max-width: none; }
.wp-site-blocks .cvm-sur {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
}
.wp-site-blocks .cvm-titre {
	font-size: var(--cv2-t2);
	font-weight: 700;
	line-height: 1.14;
	color: #ffffff;
	overflow-wrap: break-word;
}
.wp-site-blocks .cvm-chapo {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.66;
	color: var(--cvm-texte);
}
.wp-site-blocks p.cvm-note {
	max-width: 900px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
	padding-inline-start: 18px;
	border-inline-start: 2px solid var(--cvm-trait-fort);
}

/* -------------------------------------------------------------------------
   8. LA MATRICE VOUS / CELESTA - la signature du kit
   Un TABLEAU a lignes appariees, pas deux panneaux : chaque ligne attribue
   une responsabilite, et les deux colonnes se repondent au meme niveau.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-matrice {
	border: 1px solid var(--cvm-bord);
	background: var(--cvm-verre);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
	overflow: clip;
}
.wp-site-blocks .cvm-matrice__tete {
	display: grid;
	grid-template-columns: 1fr;
	background: rgba(0, 0, 0, 0.42);
	border-block-end: 1px solid var(--cvm-trait-fort);
}
.wp-site-blocks .cvm-matrice__cle {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0;
	padding: clamp(14px, 1.6vw, 18px) clamp(18px, 2.2vw, 26px);
}
.wp-site-blocks .cvm-matrice__cle--nous { color: #ffffff; }
.wp-site-blocks .cvm-ligne {
	display: grid;
	grid-template-columns: 1fr;
	border-block-start: 1px solid var(--cvm-trait);
	transition: background-color 0.22s ease;
}
.wp-site-blocks .cvm-matrice > .cvm-ligne:first-of-type { border-block-start: 0; }
.wp-site-blocks .cvm-ligne:hover { background-color: rgba(12, 103, 222, 0.09); }
.wp-site-blocks .cvm-ligne__col {
	box-sizing: border-box;
	padding: clamp(16px, 1.9vw, 22px) clamp(18px, 2.2vw, 26px);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wp-site-blocks .cvm-ligne__lib {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0;
}
.wp-site-blocks p.cvm-ligne__txt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
	margin: 0;
}

/* -------------------------------------------------------------------------
   9. RUBRIQUES - six langages, six fiches
   ⛔ Version precedente REJETEE : chaque carte portait un bandeau plein en
   degrade bleu, juge trop appuye. La composition repose desormais sur trois
   choses seulement : un verre tres leger, un cheveu d un pixel, et de l air.
   Le numero devient un repere discret prolonge par un filet qui s eteint ;
   le lien est renvoye en pied de carte, derriere un filet de separation.
   ⚠️ La section porte un aplat plein (cvm-sec--nuit) : le contraste y est
   deterministe, il ne depend d aucune photo.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-rubriques {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 1.9vw, 22px);
	align-items: stretch;
	grid-auto-rows: 1fr;
}
.wp-site-blocks .cvm-rubrique {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 34px) clamp(24px, 2.8vw, 32px) clamp(22px, 2.6vw, 28px);
	background: var(--cvm-verre);
	border: 1px solid var(--cvm-bord);
	transition: background-color 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}
.wp-site-blocks .cvm-rubrique:hover {
	background-color: rgba(12, 103, 222, 0.11);
	border-color: rgba(12, 103, 222, 0.55);
	transform: translateY(-3px);
}
/* Le numero et son filet : le filet occupe la place restante et s eteint
   vers le bord. C est ce qui remplace le bandeau plein. */
.wp-site-blocks .cvm-rubrique__num {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0;
	padding: 0;
	background: none;
}
.wp-site-blocks .cvm-rubrique__num::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--cvm-trait-fort) 0%, rgba(86, 181, 235, 0) 100%);
}
.wp-site-blocks .cvm-rubrique:hover .cvm-rubrique__num::after {
	background: linear-gradient(90deg, rgba(12, 103, 222, 0.9) 0%, rgba(12, 103, 222, 0) 100%);
}
.wp-site-blocks .cvm-rubrique__corps {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 14px);
	box-sizing: border-box;
	padding: 0;
}
/* ⛔ QUI NEUTRALISE REDECLARE : `.cvm-rubrique > *` vaut (0,3,0) et a mis
   cette marge a zero. Le present selecteur vaut lui aussi (0,3,0) mais il est
   ecrit PLUS BAS : c est lui qui l emporte. */
.wp-site-blocks .cvm-rubrique > .cvm-rubrique__corps { margin-block-start: clamp(18px, 2.2vw, 24px); }
.wp-site-blocks .cvm-rubrique__titre {
	font-size: var(--cv2-t-vignette);
	font-weight: 700;
	line-height: 1.26;
	color: #ffffff;
	margin: 0;
	min-height: calc(2 * 1.26em);
	overflow-wrap: break-word;
}
.wp-site-blocks p.cvm-rubrique__txt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
	margin: 0;
}
/* Le lien est chasse en PIED de carte, derriere un filet. Meme piege que
   ci-dessus : `.cvm-rubrique__corps > *` avait annule la marge automatique.
   ⚠️ Selecteur volontairement borne aux rubriques : la meme classe sert aux
   portes de la section 11, qui ne doivent pas bouger. */
.wp-site-blocks .cvm-rubrique__corps > .cvm-porte__lien {
	margin-block-start: auto;
	padding-block-start: clamp(15px, 1.7vw, 19px);
	border-block-start: 1px solid var(--cvm-trait);
}

/* -------------------------------------------------------------------------
   9 bis. LES FORMATS D EVENEMENT - douze jetons compacts
   Vocabulaire d attribution : salon, congres, seminaire, assemblee generale.
   Ces mots n ont pas de volume propre exploitable, mais ils sont le lexique
   que cherchent les moteurs generatifs et la trainee longue.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-formats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--cvm-trait);
	border: 1px solid var(--cvm-trait);
	align-items: stretch;
	grid-auto-rows: 1fr;
}
.wp-site-blocks .cvm-format {
	height: 100%;
	box-sizing: border-box;
	padding: clamp(16px, 1.9vw, 22px) clamp(16px, 1.9vw, 20px);
	background: rgba(0, 0, 0, 0.62);
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background-color 0.22s ease;
}
.wp-site-blocks .cvm-format:hover { background-color: rgba(12, 103, 222, 0.16); }
.wp-site-blocks p.cvm-format__nom {
	font-size: var(--cv2-t5);
	font-weight: 700;
	line-height: 1.24;
	color: #ffffff;
	margin: 0;
	overflow-wrap: break-word;
}
.wp-site-blocks p.cvm-format__txt {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--cvm-texte);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   10. LE CHEMIN DE VALIDATION - etapes a cases cochees
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-chemin {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	align-items: stretch;
}
.wp-site-blocks .cvm-etape {
	position: relative;
	box-sizing: border-box;
	padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.2vw, 26px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-block-end: 1px solid var(--cvm-trait);
	background-color: rgba(0, 0, 0, 0.42);
}
/* La case cochee : un SEUL pseudo-element portant les deux traits du signe,
   car deux pseudo-elements ne se composent pas de facon fiable. */
.wp-site-blocks .cvm-etape__case {
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid var(--cv2-ciel);
	flex: 0 0 auto;
}
.wp-site-blocks .cvm-etape__case::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(90deg, var(--cv2-ciel), var(--cv2-ciel)) 0 100% / 12px 2px no-repeat,
		linear-gradient(90deg, var(--cv2-ciel), var(--cv2-ciel)) 0 0 / 2px 12px no-repeat;
	transform: rotate(-45deg) translate(1px, 2px);
}
.wp-site-blocks .cvm-etape__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 .cvm-etape__titre {
	font-size: var(--cv2-t-vignette);
	font-weight: 700;
	line-height: 1.26;
	color: #ffffff;
	margin: 0;
	min-height: calc(2 * 1.26em);
	overflow-wrap: break-word;
}
.wp-site-blocks p.cvm-etape__txt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
	margin: 0;
}

/* -------------------------------------------------------------------------
   11. LES PORTES - vers 138, 140, 142
   Image a ratio FIXE en haut, corps sur aplat PROPRE, lien pousse par
   margin-top auto : le contraste ne depend jamais de la photo.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-portes {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 2.4vw, 30px);
	align-items: stretch;
	grid-auto-rows: 1fr;
}
.wp-site-blocks .cvm-porte {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.42);
	border: 1px solid var(--cvm-bord);
	overflow: clip;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.wp-site-blocks .cvm-porte:hover {
	transform: translateY(-4px);
	border-color: rgba(12, 103, 222, 0.6);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}
.wp-site-blocks .cvm-porte__media {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	flex: 0 0 auto;
}
.wp-site-blocks .cvm-porte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.wp-site-blocks .cvm-porte:hover .cvm-porte__media img { transform: scale(1.04); }
.wp-site-blocks .cvm-porte__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.48) 100%);
	pointer-events: none;
}
.wp-site-blocks .cvm-porte__corps {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--cv2-abysse);
}
.wp-site-blocks .cvm-porte__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 .cvm-porte__titre {
	font-size: var(--cv2-t3);
	font-weight: 700;
	line-height: 1.22;
	color: #ffffff;
	margin: 0;
	overflow-wrap: break-word;
}
.wp-site-blocks p.cvm-porte__txt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
	margin: 0;
}
.wp-site-blocks .cvm-porte__lien {
	margin-block-start: auto;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--cvm-trait);
}
.wp-site-blocks .cvm-porte__lien a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	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 .cvm-porte__lien a::after {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--cv2-degrade);
	transition: width 0.22s ease;
}
.wp-site-blocks .cvm-porte:hover .cvm-porte__lien a::after { width: 34px; }

/* -------------------------------------------------------------------------
   12. LE CARTOUCHE DE REPERES - tableau a deux colonnes, filets francs
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-reperes {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(26px, 3.2vw, 44px);
	align-items: stretch;
}
.wp-site-blocks .cvm-reperes__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wp-site-blocks .cvm-filet {
	width: 88px;
	height: 3px;
	background: var(--cv2-degrade);
	border: 0;
	margin: 0;
	opacity: 1;
}
.wp-site-blocks .cvm-cartouche {
	position: relative;
	box-sizing: border-box;
	background: var(--cvm-verre);
	border: 1px solid var(--cvm-trait-fort);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
	overflow: clip;
}
.wp-site-blocks .cvm-cartouche__cle {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	margin: 0;
	padding: clamp(14px, 1.6vw, 18px) clamp(20px, 2.4vw, 28px);
	border-block-end: 1px solid var(--cvm-trait-fort);
	background: rgba(0, 0, 0, 0.42);
}
.wp-site-blocks .cvm-cartouche__lignes { display: grid; grid-template-columns: 1fr; }
.wp-site-blocks .cvm-cartouche__ligne {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 18px;
	align-items: baseline;
	padding: clamp(13px, 1.5vw, 16px) clamp(20px, 2.4vw, 28px);
	border-block-start: 1px solid var(--cvm-trait);
}
.wp-site-blocks .cvm-cartouche__lignes > .cvm-cartouche__ligne:first-child { border-block-start: 0; }
.wp-site-blocks p.cvm-cartouche__lib {
	font-size: var(--cv2-t5);
	font-weight: 300;
	line-height: 1.5;
	color: var(--cvm-texte);
	margin: 0;
}
.wp-site-blocks p.cvm-cartouche__val {
	font-size: var(--cv2-t5);
	font-weight: 700;
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	white-space: nowrap;
}
.wp-site-blocks .cvm-cartouche__pied {
	margin: clamp(18px, 2.2vw, 24px);
	padding: clamp(16px, 2vw, 22px);
	border: 1px solid rgba(12, 103, 222, 0.55);
	background: rgba(12, 103, 222, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
}
.wp-site-blocks .cvm-cartouche__pied p {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
}
.wp-site-blocks p.cvm-cartouche__montant {font-size: 15px; line-height: 1.7;}
.wp-site-blocks p.cvm-cartouche__montant strong {
	font-size: var(--cv2-t3);
	font-weight: 800;
	line-height: 1.1;
	color: #ffffff;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   13. REALISATIONS - section 3, alimentee AUTOMATIQUEMENT
   Un core/query sur le terme "Evenements d entreprise". Tant qu aucune fiche
   n y est classee, le filtre generique du mu-plugin masque la section entiere
   (il cherche une carte cv?-realcarte dans le RENDU). Elle reapparait seule
   des qu une realisation est rattachee depuis l administration.
   Le classement doit se faire PAR L INTERFACE : le champ ACF type_de_spectacle
   double la taxonomie avec save_terms, un rattachement en base serait defait.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-realgrille {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 2.4vw, 30px);
	align-items: stretch;
	grid-auto-rows: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-site-blocks .cvm-realgrille > li { margin: 0; }
.wp-site-blocks .cvm-realcarte {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--cv2-abysse);
	border: 1px solid var(--cvm-bord);
	overflow: clip;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.wp-site-blocks .cvm-realcarte:hover {
	transform: translateY(-4px);
	border-color: rgba(12, 103, 222, 0.6);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}
.wp-site-blocks .cvm-realcarte .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	flex: 0 0 auto;
}
.wp-site-blocks .cvm-realcarte .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.wp-site-blocks .cvm-realcarte:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.wp-site-blocks .cvm-realcarte__corps {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: clamp(20px, 2.4vw, 28px);
}
.wp-site-blocks .cvm-realcarte__corps > * { margin: 0; }
.wp-site-blocks .cvm-badge-real,
.wp-site-blocks .cvm-badge-real a {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	text-decoration: none;
}
.wp-site-blocks .cvm-realcarte h3 {
	font-size: var(--cv2-t-vignette);
	font-weight: 700;
	line-height: 1.26;
	color: #ffffff;
	overflow-wrap: break-word;
}
.wp-site-blocks .cvm-realcarte h3 a { color: #ffffff; text-decoration: none; }
.wp-site-blocks .cvm-realcarte h3 a:hover { color: var(--cv2-ciel); }
.wp-site-blocks .cvm-realcarte .wp-block-post-excerpt { margin: 0; }
.wp-site-blocks .cvm-realcarte .wp-block-post-excerpt__excerpt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
	margin: 0;
}
.wp-site-blocks .cvm-realcarte .wp-block-read-more {
	margin-block-start: auto;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--cvm-trait);
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	text-decoration: none;
	align-self: stretch;
	transition: color 0.18s ease;
}
.wp-site-blocks .cvm-realcarte .wp-block-read-more:hover { color: #ffffff; }

/* -------------------------------------------------------------------------
   14. BANDEAU D APPEL
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-appel { position: relative; background: #000000; overflow: clip; }
.wp-site-blocks .cvm-appel > *:not(.cvm-fond) { position: relative; z-index: 1; }
.wp-site-blocks .cvm-appel .cvm-fond::after {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.18) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.36) 100%);
}
.wp-site-blocks .cvm-appel__bloc {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(58px, 7vw, 92px) clamp(20px, 3.2vw, 32px);
}
/* Plaque : le contraste ne depend ni de l image ni du degrade. */
.wp-site-blocks .cvm-appel__int {
	max-width: 820px;
	box-sizing: border-box;
	background: var(--cvm-plaque);
	padding: clamp(26px, 3vw, 38px) clamp(24px, 2.8vw, 34px);
	border-inline-start: 4px solid var(--cv2-bleu);
}
.wp-site-blocks .cvm-appel__titre {
	font-size: var(--cv2-t2);
	font-weight: 700;
	line-height: 1.14;
	color: #ffffff;
	overflow-wrap: break-word;
}
.wp-site-blocks p.cvm-appel__texte {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cvm-texte);
}

/* -------------------------------------------------------------------------
   15. FAQ - AUCUN motif propre, VOLONTAIREMENT
   accueil.css porte deja le kit FAQ « bande pleine » valide par le client :
   fond alterne, chiffre fantome en counter(), chevron comme seule affordance.
   Redefinir le motif ici produirait une COLLISION sur huit selecteurs, deja
   payee sur le kit .cvg-. Ne restent que la colonne de lecture et les
   respirations, que la neutralisation du paragraphe 2 ecrase.
   ------------------------------------------------------------------------- */
.wp-site-blocks .cvm-faq { max-width: 940px; }

/* -------------------------------------------------------------------------
   16. ANIMATIONS
   accueil.js retire .cvh-anim au bout de 1,2 s : le seul crochet fiable est
   .cvh-vu SEUL. Et l etat de repos ne masque RIEN.
   ------------------------------------------------------------------------- */
@keyframes cvmMonte {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}
.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > *,
.wp-site-blocks .cvm-tete > *,
.wp-site-blocks .cvm-matrice > *,
.wp-site-blocks .cvm-rubriques > .cvm-rubrique,
.wp-site-blocks .cvm-formats > .cvm-format,
.wp-site-blocks .cvm-chemin > .cvm-etape,
.wp-site-blocks .cvm-portes > .cvm-porte,
.wp-site-blocks .cvm-reperes > *,
.wp-site-blocks .cvm-realgrille > .cvm-realcarte,
.wp-site-blocks .cvm-faq > details,
.wp-site-blocks .cvm-appel__int > * { opacity: 1; }

.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > .cvh-vu,
.wp-site-blocks .cvm-tete > .cvh-vu,
.wp-site-blocks .cvm-matrice > .cvh-vu,
.wp-site-blocks .cvm-rubriques > .cvh-vu,
.wp-site-blocks .cvm-formats > .cvh-vu,
.wp-site-blocks .cvm-chemin > .cvh-vu,
.wp-site-blocks .cvm-portes > .cvh-vu,
.wp-site-blocks .cvm-reperes > .cvh-vu,
.wp-site-blocks .cvm-realgrille > .cvh-vu,
.wp-site-blocks .cvm-faq > .cvh-vu,
.wp-site-blocks .cvm-appel__int > .cvh-vu {
	animation: cvmMonte 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .cvm-hero .wp-block-cover__inner-container > .cvh-vu,
	.wp-site-blocks .cvm-tete > .cvh-vu,
	.wp-site-blocks .cvm-matrice > .cvh-vu,
	.wp-site-blocks .cvm-rubriques > .cvh-vu,
	.wp-site-blocks .cvm-formats > .cvh-vu,
.wp-site-blocks .cvm-chemin > .cvh-vu,
	.wp-site-blocks .cvm-portes > .cvh-vu,
	.wp-site-blocks .cvm-reperes > .cvh-vu,
	.wp-site-blocks .cvm-realgrille > .cvh-vu,
	.wp-site-blocks .cvm-faq > .cvh-vu,
	.wp-site-blocks .cvm-appel__int > .cvh-vu { animation: none; }
	.wp-site-blocks .cvm-porte,
	.wp-site-blocks .cvm-rubrique,
	.wp-site-blocks .cvm-realcarte,
	.wp-site-blocks .cvm-ligne,
	.wp-site-blocks .cvm-porte__media img { transition: none; }
	.wp-site-blocks .cvm-porte:hover,
	.wp-site-blocks .cvm-rubrique:hover,
	.wp-site-blocks .cvm-realcarte:hover { transform: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.wp-site-blocks .cvm-matrice,
	.wp-site-blocks .cvm-cartouche { background: rgba(7, 12, 61, 0.88); }
}

/* =========================================================================
   17. PALIERS RESPONSIVES
   Ecrits EN FIN DE FICHIER : une redeclaration posee plus bas ecraserait une
   media query ecrite plus haut. Toute reecriture d un composant reprend ses
   paliers ICI, a la suite.
   ========================================================================= */

@media (min-width: 620px) {
	.wp-site-blocks .cvm-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 820px) {
	.wp-site-blocks .cvm-portes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-realgrille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-chemin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-etape { border-inline-start: 1px solid var(--cvm-trait); }
	.wp-site-blocks .cvm-etape:nth-child(odd) { border-inline-start: 0; }
}

/* --- 900px : la matrice devient un vrai tableau a deux colonnes ---------- */
@media (min-width: 900px) {
	.wp-site-blocks .cvm-matrice__tete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-matrice__cle--nous { border-inline-start: 1px solid var(--cvm-trait-fort); }
	.wp-site-blocks .cvm-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-ligne__col + .cvm-ligne__col { border-inline-start: 1px solid var(--cvm-trait); }
	.wp-site-blocks .cvm-rubriques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-chemin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wp-site-blocks .cvm-etape { border-block-end: 0; border-inline-start: 1px solid var(--cvm-trait); }
	.wp-site-blocks .cvm-etape:nth-child(odd) { border-inline-start: 1px solid var(--cvm-trait); }
	.wp-site-blocks .cvm-etape:first-child { border-inline-start: 0; }
	.wp-site-blocks .cvm-reperes { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
	.wp-site-blocks .cvm-reperes__col {
		position: sticky;
		top: calc(var(--cvm-hdr, 114px) + 28px);
		align-self: start;
	}
}

/* --- sous 900px : aucune regle du palier superieur ne survit ------------- */
@media (max-width: 899.98px) {
	.wp-site-blocks .cvm-ligne__col + .cvm-ligne__col { border-inline-start: 0; border-block-start: 1px solid var(--cvm-trait); }
	.wp-site-blocks .cvm-matrice__cle--nous { border-block-start: 1px solid var(--cvm-trait); }
}

@media (max-width: 819.98px) {
	.wp-site-blocks .cvm-etape { border-inline-start: 0; }
}

@media (max-width: 619.98px) {
	/* ⚠️ Budget de hauteur du heros sur telephone : 812 - 77 = 735px.
	   Le cartouche s empile en trois lignes cle/valeur en vis-a-vis : les
	   filets verticaux deviennent horizontaux. */
	/* ⚠️ stretch, sinon la grille se retracte a la largeur de son contenu
	   et les valeurs ne se calent plus sur le bord droit de la colonne. */
	.wp-site-blocks .cvm-cart {
		grid-template-columns: 1fr;
		max-width: 100%;
		justify-self: stretch;
		justify-content: stretch;
	}
	.wp-site-blocks .cvm-cart__case {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 6px 14px;
	}
	.wp-site-blocks .cvm-cart__case + .cvm-cart__case {
		border-inline-start: 0;
		padding-inline-start: 0;
		margin-inline-start: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.20);
		padding-block-start: 9px;
		margin-block-start: 9px;
	}
	.wp-site-blocks .cvm-hero .wp-block-cover__inner-container { padding-block: 20px 26px; }
	.wp-site-blocks .cvm-cartouche__pied { flex-direction: column; align-items: flex-start; }
	.wp-site-blocks .cvm-cartouche__ligne { grid-template-columns: 1fr; }
}