/* ==========================================================================
   CELESTA v2 - kit .cva-* : le silo Savoir-faire (168, 170, 172, 174, 176, 178)
   Parti « l Atelier » : un panneau de verre MORD la photographie sur un tiers.
   La photo dit ce que le public voit, le panneau dit ce que Celesta fait.
   Chargee UNIQUEMENT sur les six pages du silo, par celesta-atelier.php.
   Variables de couleur : menu.css. Echelle de titres : accueil.css.
   Angles droits partout : aucun border-radius dans cette feuille.
   ========================================================================== */

/* ---------- 0. Socle de page : les gardes qu un kit parallele n herite pas -- */

/* accueil.css pose le fond du body pour body:has(.cvh-sec) seulement.
   Sans cette ligne le blanc du body se voit dans le moindre interstice. */
body:has(.cva-sec),
body:has(.cva-hero) { background: var(--cv2-abysse); }

/* ⛔ 11e recidive possible du blockGap : le coeur pose margin-block-start sur
   <main> LUI-MEME, second enfant de .wp-site-blocks. accueil.css ne l annule
   que pour .cvh- et filles.css que pour .cvp-. Sans cette ligne : 19,2px de
   fond de body entre le menu et le heros. */
body:has(.cva-sec) main,
body:has(.cva-hero) main { margin-block-start: 0; }
body:has(.cva-sec) .wp-block-post-content,
body:has(.cva-hero) .wp-block-post-content { margin-block-start: 0; }

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

/* ---------- 1. Rail de fonds : quatre tons reellement distincts ---------- */

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

.cva-int {
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(64px, 8vw, 104px) clamp(20px, 3.2vw, 32px);
}
.wp-site-blocks .cva-sec > .cva-int { max-width: 1420px; }
.wp-site-blocks .cva-int > * { max-width: none; }

/* ---------- 2. Boutons : le kit .cvh ne vise que .cvh-hero/.cvh-sec/.cvh-drones */

.cva-hero .wp-block-button__link,
.cva-sec .wp-block-button__link,
.cva-bandeau .wp-block-button__link {
	background: var(--cv2-degrade-bouton);
	color: var(--cv2-blanc);
	border-radius: 0;
	border: 0;
	box-sizing: border-box;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	padding: 16px 28px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cva-hero .wp-block-button__link:hover,
.cva-sec .wp-block-button__link:hover,
.cva-bandeau .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(12, 103, 222, 0.45);
	transform: translateY(-1px);
}
.cva-hero .is-style-outline .wp-block-button__link,
.cva-sec .is-style-outline .wp-block-button__link,
.cva-bandeau .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: var(--cv2-blanc);
}
.cva-hero .is-style-outline .wp-block-button__link:hover,
.cva-sec .is-style-outline .wp-block-button__link:hover,
.cva-bandeau .is-style-outline .wp-block-button__link:hover {
	border-color: var(--cv2-ciel);
	box-shadow: none;
}
.wp-site-blocks .cva-hero .wp-block-buttons,
.wp-site-blocks .cva-sec .wp-block-buttons,
.wp-site-blocks .cva-bandeau .wp-block-buttons { margin-block: 0; gap: 12px; }

:where(.cva-hero, .cva-sec, .cva-bandeau) :focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(86, 181, 235, 0.9), 0 0 0 7px rgba(86, 181, 235, 0.2);
}

/* ---------- 3. Titres, surtitres, textes courants ---------- */

/* Le surlignage se distingue par sa COULEUR SEULE : aucun trait, aucune plaque.
   Degrade de marque partout, et il court jusqu au dernier caractere du titre. */
.cva-hero mark, .cva-sec mark, .cva-bandeau mark {
	background: var(--cv2-degrade-titre);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding: 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

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

.cva-sec p.cva-sur, .cva-hero p.cva-sur, .cva-bandeau p.cva-sur {
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #DCDDEF;
	margin: 0;
}
.cva-sec p.cva-chapo {
	font-size: var(--cv2-t5);
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.78);
	max-width: 88ch;
	margin: 0;
}
.cva-sec p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }

.cva-tete { max-width: none; }
.wp-site-blocks .cva-tete > * { margin-block: 0; }
.wp-site-blocks .cva-tete > .cva-titre { margin-block: 22px 0; }
.wp-site-blocks .cva-tete > p.cva-chapo { margin-block: 18px 0; }

/* ---------- 4. Heros plein ecran ---------- */

.cva-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Le header est sticky : il OCCUPE le flux, donc 100vh deborde d autant.
	   accueil.js publie sa hauteur reelle dans --cvs-header (114px bureau,
	   77px mobile) : une valeur en dur serait fausse a un palier ou a l autre. */
	min-height: calc(100svh - var(--cvs-header, 0px));
	overflow: hidden;
}
/* ⛔⛔ LE VOILE NE PEUT PAS ETRE UN PSEUDO-ELEMENT.
   Le coeur pose z-index 1 sur .wp-block-cover__inner-container avec un
   selecteur a (0,6,1) : body + :not(.editor-styles-wrapper) + .wp-block-cover
   + :not(.wp-block-cover:has(.wp-block-cover__background + …)) + la classe.
   Aucune surenchere raisonnable ne le bat, donc un ::after (z-index 2) finit
   TOUJOURS peint par-dessus le texte : heros illisible, defaut vu par le client.
   ⭐ Parade : peindre le voile sur le SPAN DE FOND du coeur, qui est deja
   a z-index 1 et qui precede le conteneur dans l ordre du DOM. A z-index egal,
   l ordre de l arbre tranche : le voile passe dessous, le texte dessus. */
.wp-site-blocks .cva-hero > img.wp-block-cover__image-background { z-index: 0; object-fit: cover; }
/* Le coeur pose opacity 0 via .wp-block-cover__background.has-background-dim
   .has-background-dim-0 a (0,4,0). On reprend sa chaine de classes : (0,5,0). */
.wp-site-blocks .cva-hero > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	z-index: 1;
	opacity: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.92) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.40) 44%, rgba(0, 0, 0, 0) 76%);
}

/* Voile a DEUX couches : une verticale pour la lisibilite du bas et le raccord
   invisible avec la section suivante, une HORIZONTALE qui assombrit le seul
   cote ou vit le texte. Voile NOIR, jamais bleute. */
/* ⛔⛔ Le coeur pose .wp-block-cover .wp-block-cover__inner-container
   { z-index: 1 } a (0,2,0), et sa feuille EN LIGNE est ecrite APRES la notre.
   A egalite de specificite le dernier ecrit gagne : notre z-index 3 tombait,
   le conteneur restait a 1 et le voile ::after (z-index 2) etait peint
   PAR-DESSUS LE TEXTE - heros illisible. On repond en (0,3,0). */
.wp-site-blocks .cva-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	/* ⛔ Le retrait BAS etait indexe sur la LARGEUR : 118px a 1366px de large,
	   quelle que soit la hauteur d ecran. Mesure sur les six pages du silo,
	   CINQ debordaient sous la ligne de flottaison, jusqu a 104px.
	   Le min() garde le dessin intact sur un grand ecran et ne resserre que
	   la ou la hauteur manque. */
	padding: 0 clamp(20px, 3.2vw, 32px) min(clamp(84px, 9vw, 118px), 8.6vh);
}
.wp-site-blocks .cva-hero .wp-block-cover__inner-container > * { margin-block: 0; }
.wp-site-blocks .cva-hero .wp-block-cover__inner-container > .cva-hero__titre  { margin-block-start: 24px; }
.wp-site-blocks .cva-hero .wp-block-cover__inner-container > p.cva-hero__chapo { margin-block-start: 22px; }
.wp-site-blocks .cva-hero .wp-block-cover__inner-container > .wp-block-buttons { margin-block-start: 32px; }
.wp-site-blocks .cva-hero .wp-block-cover__inner-container > .cva-gages        { margin-block-start: 40px; }

/* ⛔ 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
   sur deux pages du silo, soit 268px a lui seul. */
.wp-site-blocks .cva-hero h1.cva-hero__titre {
	font-size: min(var(--cv2-t1), 6.2vh);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--cv2-blanc);
	max-width: none;
}
.cva-hero p.cva-hero__chapo {
	font-size: var(--cv2-t5);
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.88);
	max-width: 56ch;
	margin: 0;
}

.cva-gages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 30px; }
.wp-site-blocks .cva-gages > li { margin-block: 0; }
.cva-gages li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.5;
}
.cva-gages li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.34em;
	width: 11px;
	height: 11px;
	background: var(--cv2-degrade);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.6 6.5 17.5 11.4 24 12C17.5 12.6 12.6 17.5 12 24C11.4 17.5 6.5 12.6 0 12C6.5 11.4 11.4 6.5 12 0Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.6 6.5 17.5 11.4 24 12C17.5 12.6 12.6 17.5 12 24C11.4 17.5 6.5 12.6 0 12C6.5 11.4 11.4 6.5 12 0Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 5. LE GESTE SIGNATURE : le diptyque a morsure ---------- */

/* Motif anti-vide : deux colonnes en grille, align-items stretch, image en
   position absolue inset 0. La hauteur est dictee par la plus haute des deux,
   l ecart entre colonnes est NUL par construction. */
.cva-dip {
	--cva-morsure: clamp(48px, 7vw, 104px);
	--cva-retrait: clamp(26px, 3vw, 46px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	position: relative;
}
.wp-site-blocks .cva-dip > * { margin-block: 0; }
.wp-site-blocks .cva-int > .cva-dip { margin-block-start: clamp(38px, 4.4vw, 62px); }
.wp-site-blocks .cva-int > .cva-dip:first-child { margin-block-start: 0; }
.wp-site-blocks .cva-dip + .cva-dip { margin-block-start: clamp(34px, 4vw, 56px); }

.cva-dip__media {
	position: relative;
	min-height: clamp(330px, 31vw, 470px);
	overflow: hidden;
	margin: 0;
	background: #04061C;
	grid-column: 1;
	grid-row: 1;
}
/* ⛔ figure.wp-block-image du coeur vaut (0,1,1) et bat .cva-dip__media
   a (0,1,0) : sa marge basse de 1em passerait. On repond en (0,2,1). */
.wp-site-blocks figure.cva-dip__media { margin: 0; }
/* height:100% sur une figure se resout en RATIO NATUREL : c est inset 0 qui
   tient, jamais une hauteur en pourcentage.
   .wp-block-image img du coeur vaut (0,1,1) et pose height:auto : (0,2,1) ici. */
.wp-site-blocks .cva-dip__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cva-dip__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.28) 100%);
}

.cva-dip__col {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: stretch;
	position: relative;
	z-index: 3;
	box-sizing: border-box;
	/* Le retrait vertical est FIXE : il ne depend pas de la longueur du texte,
	   donc une reecriture ne peut pas creuser un vide (piege C8). */
	padding-block: var(--cva-retrait);
	margin-left: calc(-1 * var(--cva-morsure));
}

.cva-dip__pan {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: clamp(30px, 3.2vw, 48px);
	position: relative;
	/* Blanc sur ce fond compose sur du blanc pur = 13,8 : garanti par
	   construction, quelle que soit la photographie qui passe dessous. */
	background: rgba(7, 12, 61, 0.90);
	border: 1px solid rgba(86, 181, 235, 0.24);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 70px rgba(0, 2, 30, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
	.cva-dip__pan { background: rgba(7, 12, 61, 0.96); }
}
/* L arete haute eclairee : c est elle qui fait lire le chevauchement. */
.cva-dip__pan::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72) 34%, rgba(255, 255, 255, 0));
}
.wp-site-blocks .cva-dip__pan > * { margin-block: 0; }
.wp-site-blocks .cva-dip__pan > .cva-dip__titre  { margin-block-start: 14px; }
.wp-site-blocks .cva-dip__pan > p                { margin-block-start: 18px; }
.wp-site-blocks .cva-dip__pan > .cva-dip__points { margin-block-start: 26px; }
.wp-site-blocks .cva-dip__pan > .wp-block-buttons { margin-block-start: 30px; }

/* Le niveau suit la STRUCTURE : t2 quand le diptyque est seul dans sa section,
   t3 quand une tete de section porte deja le H2. Une seule taille par niveau. */
.wp-site-blocks .cva-dip__pan h2.cva-dip__titre { font-size: var(--cv2-t2); font-weight: 700; line-height: 1.14; color: var(--cv2-blanc); }
.wp-site-blocks .cva-dip__pan h3.cva-dip__titre { font-size: var(--cv2-t3); font-weight: 700; line-height: 1.25; color: var(--cv2-blanc); }
.cva-dip__pan p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); max-width: 46ch; }

.cva-dip__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Le coeur pose :root :where(.wp-block-list li) { margin-top: .5rem } :
   neutraliser le gap du ul ne suffit pas, il faut viser les li. */
.wp-site-blocks .cva-dip__points > li { margin-block: 0; }
.cva-dip__points li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}
/* ⭐ Puce en ETOILE a quatre branches, dans le degrade de marque.
   Le degrade est le FOND, la forme vient d un masque SVG : un picto, jamais
   un emoji. Repli sans masque : la barre d origine, via @supports. */
.cva-dip__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 13px;
	height: 13px;
	background: var(--cv2-degrade);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.6 6.5 17.5 11.4 24 12C17.5 12.6 12.6 17.5 12 24C11.4 17.5 6.5 12.6 0 12C6.5 11.4 11.4 6.5 12 0Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.6 6.5 17.5 11.4 24 12C17.5 12.6 12.6 17.5 12 24C11.4 17.5 6.5 12.6 0 12C6.5 11.4 11.4 6.5 12 0Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Variante inversee : la photo passe a droite. On agit par grid-column,
   jamais par direction: rtl, qui reordonnerait aussi le texte. */
.cva-dip--inv .cva-dip__media { grid-column: 2; }
.cva-dip--inv .cva-dip__col {
	grid-column: 1;
	margin-left: 0;
	margin-right: calc(-1 * var(--cva-morsure));
}
.cva-dip--inv .cva-dip__media::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.10) 100%);
}

/* ---------- 6. La bande de reperes chiffres ---------- */

.cva-reperes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(86, 181, 235, 0.2); }
.wp-site-blocks .cva-int > .cva-reperes { margin-block-start: clamp(40px, 4.6vw, 64px); }
.wp-site-blocks .cva-reperes > * { margin-block: 0; }
.cva-repere {
	background: var(--cv2-abysse);
	padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px) clamp(26px, 2.8vw, 36px);
	position: relative;
	transition: background 0.3s ease;
}
.cva-sec--encre .cva-repere { background: #000000; }
.cva-sec--noir  .cva-repere { background: var(--cv2-abysse); }
.cva-repere::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cv2-degrade); }
.cva-repere:hover { background: rgba(12, 103, 222, 0.14); }
.wp-site-blocks .cva-repere > * { margin-block: 0; }
.wp-site-blocks .cva-repere > p.cva-repere__lib { margin-block-start: 9px; }
/* Chiffres tabulaires, en blanc : un chiffre peint au degrade echapperait au
   controle de contraste (sa couleur calculee vaut transparent). */
.cva-repere p.cva-repere__val {
	font-size: clamp(24px, 2.4vw, 33px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--cv2-blanc);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.cva-repere p.cva-repere__lib {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.70);
	margin: 0;
}

/* ---------- 7. Les portes vers les autres disciplines ---------- */

/* Resorption anti-vide : la grille a 6 colonnes, une porte en vaut 2, donc
   3 par rangee. Si reste = n % 3 n est pas nul, les `reste` dernieres portes
   prennent span = 6 / reste - un entier dans tous les cas servis.
   ⛔ Chaque palier est borne des DEUX cotes : aucune regle d un palier ne peut
   survivre dans un autre, donc aucune bataille de specificite (piege C15ter). */
.cva-portes { display: grid; gap: 1px; background: rgba(86, 181, 235, 0.2); }
.wp-site-blocks .cva-int > .cva-portes { margin-block-start: clamp(36px, 4.2vw, 56px); }
.wp-site-blocks .cva-portes > * { margin-block: 0; }

.cva-porte {
	background: var(--cv2-nuit);
	padding: clamp(26px, 2.8vw, 36px);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: background 0.3s ease, transform 0.3s ease;
}
.cva-sec--nuit .cva-porte { background: var(--cv2-abysse); }
.cva-porte:hover { background: rgba(12, 103, 222, 0.16); transform: translateY(-3px); }
.wp-site-blocks .cva-porte > * { margin-block: 0; }
.wp-site-blocks .cva-porte > .cva-porte__titre { margin-block-start: 12px; }
.wp-site-blocks .cva-porte > p                 { margin-block-start: 12px; }
.wp-site-blocks .cva-porte > .cva-porte__lien  { margin-block-start: auto; padding-block-start: 20px; }
.wp-site-blocks .cva-porte h3.cva-porte__titre { font-size: var(--cv2-t-vignette); font-weight: 700; line-height: 1.3; color: var(--cv2-blanc); }
.cva-porte p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.cva-porte p.cva-porte__lien a {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cv2-ciel);
	text-decoration: none;
	border-bottom: 1px solid rgba(86, 181, 235, 0.45);
	padding-bottom: 3px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.cva-porte p.cva-porte__lien a:hover { color: var(--cv2-blanc); border-color: var(--cv2-blanc); }

/* ---------- 7bis. Fond photographique et SURFACE POLIE sur les portes ------
   Motif C12 : pas un reflet duplique, une surface polie. Arete haute eclairee
   au survol, bande speculaire visible au repos qui glisse en travers.
   ⛔ La bande passe DERRIERE le texte (z-index 1 contre 3) : le contraste
   du texte est intact par construction, quelle que soit la photo dessous. */
.cva-porte { overflow: hidden; }
.wp-site-blocks figure.cva-porte__fond { position: absolute; inset: 0; margin: 0; z-index: 0; overflow: hidden; }
.wp-site-blocks .cva-porte__fond img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cva-porte--photo:hover .cva-porte__fond img { transform: scale(1.06); }
/* Voile NOIR, epais : le texte de la carte reste lisible sur toute photo. */
.cva-porte__fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(158deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.79) 46%, rgba(0, 0, 0, 0.85) 100%);
	transition: background 0.45s ease;
}
.cva-porte--photo:hover .cva-porte__fond::after {
	background: linear-gradient(158deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.75) 46%, rgba(0, 0, 0, 0.82) 100%);
}
.cva-porte::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	z-index: 2;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34) 38%, rgba(255, 255, 255, 0));
	opacity: 0;
	transition: opacity 0.45s ease;
}
.cva-porte:hover::before { opacity: 1; }
.cva-porte::after {
	content: "";
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: -14%;
	width: 46%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(9deg);
	transition: left 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cva-porte:hover::after { left: 78%; }
.wp-site-blocks .cva-porte > *:not(.cva-porte__fond) { position: relative; z-index: 3; }

@media (min-width: 981px) {
	.cva-portes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cva-portes .cva-porte { grid-column: span 2; }
	.cva-portes .cva-porte:last-child:nth-child(3n + 1) { grid-column: span 6; }
	.cva-portes .cva-porte:nth-last-child(2):nth-child(3n + 1),
	.cva-portes .cva-porte:nth-last-child(2):nth-child(3n + 1) ~ .cva-porte { grid-column: span 3; }
}
@media (min-width: 783px) and (max-width: 980px) {
	.cva-portes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cva-portes .cva-porte { grid-column: span 2; }
	.cva-portes .cva-porte:last-child:nth-child(odd) { grid-column: span 4; }
}
@media (max-width: 782px) {
	.cva-portes { grid-template-columns: minmax(0, 1fr); }
	.cva-portes .cva-porte { grid-column: 1 / -1; }
}

/* ---------- 8. Bandeau de fin ---------- */

.cva-bandeau { position: relative; overflow: hidden; }
.wp-site-blocks .cva-bandeau > img.wp-block-cover__image-background { z-index: 0; object-fit: cover; }
.wp-site-blocks .cva-bandeau > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	z-index: 1;
	opacity: 1;
	/* Voile allege 2026-08-24 : couche verticale legere sur toute la largeur,
	   couche horizontale calee EN PIXELS sur la boite reelle du texte (max 830px).
	   Pire cas photo blanc pur : surtitre 5,71 - titre 7,50 - texte 6,59. */
	/* Repli sans max() : sur, moins genereux a droite. */
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.46)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0.52) 82%, rgba(0, 0, 0, 0) 100%);
	/* Geometrie fine : le plateau suit le panneau jusqu au-dela de 1420px. */
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.46)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0.52) max(830px, calc(50% + 105px)), rgba(0, 0, 0, 0) max(1090px, calc(50% + 365px)));
}
.wp-site-blocks .cva-bandeau > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(62px, 7vw, 92px) clamp(20px, 3.2vw, 32px);
}
.cva-bandeau__panneau { max-width: 780px; }
.wp-site-blocks .cva-bandeau__panneau > * { margin-block: 0; }
.wp-site-blocks .cva-bandeau__panneau > .cva-titre        { margin-block-start: 20px; }
.wp-site-blocks .cva-bandeau__panneau > p                 { margin-block-start: 18px; }
.wp-site-blocks .cva-bandeau__panneau > .wp-block-buttons { margin-block-start: 30px; }
.wp-site-blocks .cva-bandeau__panneau > .cva-gages        { margin-block-start: 32px; }
.cva-bandeau p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.88); }

/* ---------- 9. FAQ ---------- */

/* Le silo n a PLUS de kit FAQ propre : il se superposait au kit generique
   .wp-block-details (bande pleine, valide le 2026-08-21) et les deux peignaient
   les MEMES pseudo-elements : le chevron recevait un background ciel et devenait
   un losange plein, le chiffre fantome heritait une plaque de 14x2px, et l alternance
   de fonds passait de 1,8 % a du noir plein. Trois decors par bande au lieu d un.
   Seul l espacement reste ici ; tout le style vient desormais d accueil.css. */
.wp-site-blocks .cva-int > .cva-faq { margin-block-start: clamp(34px, 4vw, 52px); }
.wp-site-blocks .cva-faq > * { margin-block: 0; }

/* ---------- 10. Revelation au defilement ---------- */

/* ⛔ L etat de repos ne masque RIEN : si l animation ne joue pas, le contenu
   reste visible. Le masquage n existe que DANS l animation, jouee par .cvh-vu
   avec animation-fill-mode: backwards. */
@keyframes cvaMonte {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.cva-anim { opacity: 1; }
.cva-anim.cvh-vu { animation: cvaMonte 0.78s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* ---------- 11. Paliers ---------- */

@media (max-width: 1200px) {
	.cva-dip { --cva-morsure: clamp(40px, 5.4vw, 74px); }
	.cva-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.wp-site-blocks .cva-hero h1.cva-hero__titre { max-width: 20ch; }
	.cva-dip__pan p { max-width: none; }
}

@media (max-width: 782px) {
	/* La morsure devient VERTICALE : le panneau remonte sur la photo.
	   Le retrait lateral fait lire la plaque comme une plaque. */
	.cva-dip {
		--cva-morsure: 0px;
		grid-template-columns: minmax(0, 1fr);
	}
	.cva-dip__media,
	.cva-dip--inv .cva-dip__media { grid-column: 1; grid-row: 1; min-height: 250px; }
	/* ⛔ .wp-site-blocks .cva-dip > * vaut (0,2,0), pas (0,3,0) : le "> *"
	   n ajoute rien. Il battait cette redeclaration ecrite a (0,1,0). */
	.wp-site-blocks .cva-dip > .cva-dip__col,
	.wp-site-blocks .cva-dip--inv > .cva-dip__col {
		grid-column: 1;
		grid-row: 2;
		margin-left: 0;
		margin-right: 0;
		margin-top: -54px;
		padding-block: 0;
		padding-inline: 16px;
	}
	.cva-dip__pan { padding: 26px 22px 30px; }
	.wp-site-blocks .cva-hero > .wp-block-cover__inner-container { padding-bottom: clamp(52px, 11vw, 72px); }
	.wp-site-blocks .cva-hero .wp-block-cover__inner-container > .cva-gages { margin-block-start: 30px; }
	.cva-gages { gap: 10px 22px; }
}

@media (max-width: 520px) {
	.cva-reperes { grid-template-columns: minmax(0, 1fr); }
	.cva-dip__col { padding-inline: 12px; margin-top: -44px; }
	.cva-hero .wp-block-buttons { width: 100%; }
	.cva-hero .wp-block-button { width: 100%; }
	.cva-hero .wp-block-button__link { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cva-anim.cvh-vu { animation: none; }
	.cva-porte, .cva-repere, .cva-hero .wp-block-button__link,
	.cva-sec .wp-block-button__link, .cva-bandeau .wp-block-button__link {
		transition: none !important;
		transform: none !important;
	}
}

/* Repli si le masque n est pas compris : on revient a la barre. */
@supports not ((-webkit-mask: url("data:image/svg+xml,%3Csvg/%3E")) or (mask: url("data:image/svg+xml,%3Csvg/%3E"))) {
	.cva-dip__points li::before { top: 0.5em; width: 3px; height: 1.05em; }
	.cva-gages li::before { top: 0.62em; width: 11px; height: 2px; }
	.cva-dip__points li { padding-left: 18px; }
	.cva-gages li { padding-left: 21px; }
}