/* =========================================================================
   Celesta v2 - kit .cvl- : pages legales et plan du site (190, 192, 2940)
   Parti "le document" : ouverture courte, corps a deux colonnes avec
   sommaire collant, pied de rubrique. Rail des fonds : nuit / abysse / noir.
   Depend de accueil.css (jetons de charte, text-wrap: balance).
   ========================================================================= */

/* ---------------------------------------------------------- garde-fous
   Un kit parallele n herite d AUCUN garde-fou du kit .cvh- : le fond du
   body, la marge que le coeur pose sur <main> et le blockGap doivent etre
   redeclares ici, faute de quoi une bande de fond de body apparait. */

body.cvl-page {
	background: var(--cv2-nuit);
}

body.cvl-page main {
	margin-block-start: 0;
}

.wp-site-blocks .cvl-hero,
.wp-site-blocks .cvl-corps,
.wp-site-blocks .cvl-portes {
	margin-block: 0;
}

/* Neutralisation du blockGap sur chaque conteneur a plusieurs enfants,
   grilles comprises. Les respirations voulues sont REDECLAREES plus bas,
   a une specificite au moins egale. */
.wp-site-blocks .cvl-hero__int > *,
.wp-site-blocks .cvl-corps__int > *,
.wp-site-blocks .cvl-portes__int > *,
.wp-site-blocks .cvl-texte > * {
	margin-block: 0;
}

/* ------------------------------------------------------------- ouverture */

.cvl-hero {
	position: relative;
	overflow: hidden;
	background: var(--cv2-nuit);
	isolation: isolate;
}

/* Trame de points : donne de la matiere sans photo, ce qui serait deplace
   sur une page legale. */
.cvl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(86, 181, 235, 0.16) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
}

/* Halo indigo, en haut a gauche : la signature des ouvertures du site. */
.cvl-hero::after {
	content: "";
	position: absolute;
	inset: -20% -10% auto -20%;
	height: 150%;
	background: radial-gradient(58% 62% at 22% 18%, rgba(12, 103, 222, 0.42), rgba(7, 12, 61, 0) 68%);
	z-index: 0;
	pointer-events: none;
}

.wp-site-blocks .cvl-hero__int {
	position: relative;
	z-index: 1;
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(72px, 8.4vw, 132px) clamp(20px, 3.2vw, 32px) clamp(56px, 6.4vw, 92px);
}

.wp-site-blocks p.cvl-hero__sur {
	margin: 0 0 clamp(18px, 1.8vw, 26px);
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cv2-accent);
}

.wp-site-blocks p.cvl-hero__sur::before {
	content: "";
	display: inline-block;
	width: clamp(28px, 3vw, 44px);
	height: 1px;
	margin-right: 14px;
	vertical-align: middle;
	background: var(--cv2-degrade);
}

/* Un titre ne se borne JAMAIS en caracteres : la largeur vient de la
   colonne, la coupure de text-wrap: balance (accueil.css). */
.wp-site-blocks h1.cvl-hero__titre {
	margin: 0;
	font-size: var(--cv2-t1);
	line-height: 1.06;
	font-weight: 800;
	color: var(--cv2-blanc);
}

.wp-site-blocks p.cvl-hero__chapo {
	margin: clamp(20px, 2.2vw, 30px) 0 0;
	max-width: 62ch;
	font-size: var(--cv2-t5);
	line-height: 1.66;
	color: var(--cv2-ciel);
}

.wp-site-blocks p.cvl-hero__maj {
	margin: clamp(24px, 2.6vw, 36px) 0 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid var(--cv2-trait);
	background: rgba(0, 0, 0, 0.32);
	font-size: var(--cv2-t6);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cv2-accent);
}

.wp-site-blocks p.cvl-hero__maj::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--cv2-bleu);
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ corps */

.cvl-corps {
	background: var(--cv2-abysse);
}

.wp-site-blocks .cvl-corps__int {
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(56px, 6.4vw, 96px) clamp(20px, 3.2vw, 32px) clamp(64px, 7.2vw, 104px);
}

/* Le DEFAUT est une seule colonne : sans JavaScript et sans :has(), le
   texte reste lisible pleine largeur. Le sommaire AJOUTE la seconde
   colonne, il ne la conditionne pas. */
@supports selector(:has(*)) {
	@media (min-width: 981px) {
		.wp-site-blocks .cvl-corps__int:has(.cvl-somm) {
			display: grid;
			grid-template-columns: 268px minmax(0, 1fr);
			gap: clamp(32px, 4vw, 72px);
			align-items: start;
		}
	}
}

/* --------------------------------------------------------------- sommaire */

.cvl-somm {
	position: sticky;
	top: calc(var(--cvl-header, 114px) + 26px);
	border-left: 2px solid var(--cv2-trait);
	padding-left: 20px;
}

.wp-site-blocks p.cvl-somm__titre {
	margin: 0 0 16px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv2-accent);
}

.wp-site-blocks ul.cvl-somm__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-site-blocks ul.cvl-somm__liste li {
	margin: 0;
	padding: 0;
}

.wp-site-blocks ul.cvl-somm__liste li + li {
	margin-top: 10px;
}

.cvl-somm__lien {
	display: block;
	font-size: var(--cv2-t6);
	line-height: 1.5;
	color: var(--cv2-ciel);
	text-decoration: none;
	transition: color 0.24s ease, transform 0.24s ease;
}

.cvl-somm__lien:hover,
.cvl-somm__lien:focus-visible {
	color: var(--cv2-blanc);
	transform: translateX(3px);
}

.cvl-somm__lien.est-vu {
	color: var(--cv2-blanc);
	font-weight: 700;
}

/* ----------------------------------------------------------------- texte */

.wp-site-blocks .cvl-texte h2 {
	margin: clamp(40px, 4.4vw, 64px) 0 clamp(16px, 1.6vw, 22px);
	font-size: var(--cv2-t3);
	line-height: 1.2;
	font-weight: 700;
	color: var(--cv2-blanc);
	scroll-margin-top: calc(var(--cvl-header, 114px) + 24px);
}

.wp-site-blocks .cvl-texte > h2:first-child {
	margin-top: 0;
}

.wp-site-blocks .cvl-texte h3 {
	margin: clamp(28px, 3vw, 40px) 0 clamp(12px, 1.2vw, 16px);
	font-size: var(--cv2-t4);
	line-height: 1.3;
	font-weight: 700;
	color: var(--cv2-accent);
	scroll-margin-top: calc(var(--cvl-header, 114px) + 24px);
}

/* La colonne de lecture se pose sur le PARAGRAPHE, jamais sur le
   conteneur : un conteneur borne en ch couperait aussi les titres. */
.wp-site-blocks .cvl-texte p {
	margin: 0 0 clamp(14px, 1.4vw, 20px);
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--cv2-ciel);
}

.wp-site-blocks .cvl-texte ul,
.wp-site-blocks .cvl-texte ol {
	margin: 0 0 clamp(16px, 1.6vw, 22px);
	padding-left: 22px;
	max-width: 68ch;
	font-size: var(--cv2-t5);
	line-height: 1.75;
	color: var(--cv2-ciel);
}

/* Le coeur pose :root :where(.wp-block-list li){margin-top:.5rem} */
.wp-site-blocks .cvl-texte li {
	margin-block: 0;
	padding-left: 4px;
}

.wp-site-blocks .cvl-texte li + li {
	margin-top: 8px;
}

.wp-site-blocks .cvl-texte li::marker {
	color: var(--cv2-bleu);
}

.wp-site-blocks .cvl-texte a {
	color: var(--cv2-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.24s ease;
}

.wp-site-blocks .cvl-texte a:hover,
.wp-site-blocks .cvl-texte a:focus-visible {
	color: var(--cv2-blanc);
}

.wp-site-blocks .cvl-texte strong {
	color: var(--cv2-blanc);
	font-weight: 700;
}

.wp-site-blocks .cvl-texte table {
	width: 100%;
	margin: 0 0 clamp(18px, 1.8vw, 26px);
	border-collapse: collapse;
	font-size: var(--cv2-t6);
	color: var(--cv2-ciel);
}

.wp-site-blocks .cvl-texte th,
.wp-site-blocks .cvl-texte td {
	padding: 12px 14px;
	border: 1px solid var(--cv2-trait);
	text-align: left;
	vertical-align: top;
}

.wp-site-blocks .cvl-texte th {
	background: rgba(0, 0, 0, 0.34);
	color: var(--cv2-blanc);
	font-weight: 700;
}

/* Le document Complianz sort dans un conteneur qui lui est propre. */
.cvl-texte .cmplz-document,
.cvl-texte .cmplz-document * {
	max-width: 100%;
}

.cvl-texte .cmplz-document > *:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------- plan du site */

.wp-site-blocks .cvl-plan__groupe + .cvl-plan__groupe {
	margin-top: clamp(48px, 5.4vw, 78px);
}

.wp-site-blocks h2.cvl-plan__groupe-titre {
	margin: 0 0 clamp(22px, 2.4vw, 34px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cv2-trait);
	font-size: var(--cv2-t3);
	line-height: 1.2;
	font-weight: 700;
	color: var(--cv2-blanc);
}

/* Nombre de colonnes FIXE par palier : six univers se repartissent sans
   reste en 3 et en 2, donc aucune rangee ne peut rester incomplete. */
.cvl-plan__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 2.8vw, 40px);
}

.cvl-plan__grille--deux {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cvl-plan__col {
	border-top: 2px solid var(--cv2-bleu);
	padding-top: 18px;
}

.wp-site-blocks h3.cvl-plan__titre {
	margin: 0 0 14px;
	font-size: var(--cv2-t5);
	line-height: 1.3;
	font-weight: 700;
	color: var(--cv2-blanc);
}

.cvl-plan__titre a {
	color: inherit;
	text-decoration: none;
	transition: color 0.24s ease;
}

.cvl-plan__titre a:hover,
.cvl-plan__titre a:focus-visible {
	color: var(--cv2-accent);
}

.wp-site-blocks ul.cvl-plan__liste,
.wp-site-blocks ul.cvl-plan__sous {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.wp-site-blocks li.cvl-plan__item {
	margin: 0;
	padding: 0;
}

.wp-site-blocks li.cvl-plan__item + li.cvl-plan__item {
	margin-top: 9px;
}

.cvl-plan__lien {
	display: inline-block;
	font-size: var(--cv2-t6);
	line-height: 1.55;
	color: var(--cv2-ciel);
	text-decoration: none;
	transition: color 0.24s ease, transform 0.24s ease;
}

.cvl-plan__lien:hover,
.cvl-plan__lien:focus-visible {
	color: var(--cv2-blanc);
	transform: translateX(3px);
}

.wp-site-blocks ul.cvl-plan__sous {
	margin-top: 9px;
	padding-left: 16px;
	border-left: 1px solid var(--cv2-trait);
}

/* Une liste longue en colonnes CSS : le flux ne peut pas produire de
   rangee incomplete, quel que soit le nombre d entrees. */
.wp-site-blocks ul.cvl-plan__liste--large {
	columns: 3;
	column-gap: clamp(24px, 2.8vw, 40px);
}

.wp-site-blocks ul.cvl-plan__liste--large li.cvl-plan__item {
	break-inside: avoid;
	margin-top: 0;
	margin-bottom: 9px;
}

/* -------------------------------------------------------- pied de rubrique */

.cvl-portes {
	background: #000000;
	border-top: 1px solid var(--cv2-trait);
}

.wp-site-blocks .cvl-portes__int {
	max-width: 1420px;
	margin-inline: auto;
	box-sizing: border-box;
	padding: clamp(52px, 5.8vw, 84px) clamp(20px, 3.2vw, 32px);
}

.wp-site-blocks p.cvl-portes__sur {
	margin: 0 0 clamp(20px, 2.2vw, 30px);
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cv2-accent);
}

.cvl-portes__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 24px);
}

.cvl-porte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--cv2-trait);
	background: linear-gradient(150deg, rgba(12, 103, 222, 0.14), rgba(0, 0, 0, 0.44));
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.28s ease, transform 0.28s ease;
}

/* Arete haute eclairee : la matiere "verre" du site, sans reflet duplique. */
.cvl-porte::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
	z-index: 1;
}

.cvl-porte:hover,
.cvl-porte:focus-visible {
	border-color: rgba(86, 181, 235, 0.5);
	transform: translateY(-3px);
}

.wp-site-blocks .cvl-porte__titre {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: var(--cv2-t5);
	line-height: 1.3;
	font-weight: 700;
	color: var(--cv2-blanc);
}

.wp-site-blocks .cvl-porte__txt {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: none;
	font-size: 15px;
	line-height: 1.7;
	color: var(--cv2-ciel);
}

.cvl-porte__fleche {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: 12px;
	font-size: var(--cv2-t6);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cv2-accent);
}

.cvl-porte__fleche::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	margin-left: 10px;
	vertical-align: middle;
	background: var(--cv2-degrade);
	transition: width 0.28s ease;
}

.cvl-porte:hover .cvl-porte__fleche::after {
	width: 34px;
}

/* ------------------------------------------------------------- paliers */

@media (max-width: 1100px) {
	.cvl-plan__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-site-blocks ul.cvl-plan__liste--large {
		columns: 2;
	}
}

@media (max-width: 980px) {
	/* Sur un ecran etroit, un bloc fige mange la hauteur utile. */
	.cvl-somm {
		position: static;
		margin-bottom: clamp(28px, 3.2vw, 40px);
	}

	.cvl-portes__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.cvl-portes__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.cvl-plan__grille,
	.cvl-plan__grille--deux {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-site-blocks ul.cvl-plan__liste--large {
		columns: 1;
	}

	.wp-site-blocks p.cvl-hero__maj {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cvl-somm__lien,
	.cvl-plan__lien,
	.cvl-porte,
	.cvl-porte__fleche::after {
		transition: none;
	}

	.cvl-somm__lien:hover,
	.cvl-plan__lien:hover,
	.cvl-porte:hover {
		transform: none;
	}
}