/*
Theme Name:   Vectra Child
Theme URI:    https://vectra-site.setechnology.tn
Description:  Thème enfant de Hello Elementor pour la refonte Vectra DMS (B2M).
              Le système de design vit dans les Variables et Classes Elementor v4 ;
              ce fichier porte ce qu'Elementor ne sait pas exprimer : police locale,
              dégradés, contextes clair / sombre, pseudo-éléments, focus et mouvement.
Author:       SE Technology
Template:     hello-elementor
Version:      1.2.0
Text Domain:  vectra-child
*/

/* Charte graphique Vectra DMS v2.0 (Bold Brands, octobre 2026) — seule source des couleurs,
   de la police et des dégradés. Elementor rend une Classe globale sous son libellé (.vx-h2).
   Clair par défaut (blanc 60 %) ; Nuit lumineuse et Horizon en ponctuation. */

/* ── 1. Manrope auto-hébergée, variable 200 → 800 (sous-ensemble latin). Licence : assets/fonts/OFL.txt ── */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
		url("assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. Jetons ────────────────────────────────────────────────────────────────
   Couleurs et police : copies de secours des Variables v4 (mêmes noms, mêmes valeurs).
   Tailles : Elementor gratuit ne rend pas les variables de taille ; elles vivent ici et sont
   recopiées en valeur dans les Classes par build-kit.php (source unique : tokens.json). */
:root {
	--vx-nuit: #0E113B;
	--vx-indigo: #292E77;
	--vx-bleu: #3E5AA8;
	--vx-acier: #4786C6;
	--vx-cyan: #3AC0F0;
	--vx-glacier: #67CBE3;
	--vx-ardoise: #5D6680;
	--vx-gris-titre: #8C93A8;
	--vx-brume: #EEF2F8;
	--vx-blanc: #FFFFFF;
	--vx-nuit-profonde: #0B0E2E;
	--vx-font: Manrope, Arial, sans-serif;

	--vx-type-display: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem);
	--vx-type-h1: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem);
	--vx-type-h2: clamp(2rem, 1.7214rem + 1.1429vw, 2.75rem);
	--vx-type-h3: clamp(1.5rem, 1.3607rem + 0.5714vw, 1.875rem);
	--vx-type-texte: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
	--vx-type-interface: 1rem;
	--vx-type-petit: 0.875rem;
	--vx-type-surtitre: 0.8125rem;

	--vx-space-1: 0.25rem;
	--vx-space-2: 0.5rem;
	--vx-space-3: 0.75rem;
	--vx-space-4: 1rem;
	--vx-space-5: 1.5rem;
	--vx-space-6: 2rem;
	--vx-space-7: 3rem;
	--vx-space-8: clamp(3rem, 2.6286rem + 1.5238vw, 4rem);
	--vx-space-9: clamp(4rem, 3.2571rem + 3.0476vw, 6rem);
	--vx-space-10: clamp(5rem, 3.8857rem + 4.5714vw, 8rem);

	--vx-container: 76rem;
	--vx-gutter: clamp(1.25rem, 0.6rem + 2.6667vw, 3rem);
	--vx-measure: 66ch;

	--vx-radius-s: 0.5rem;
	--vx-radius-m: 1rem;
	--vx-radius-l: 1.5rem;
	--vx-radius-xl: 2rem;
	--vx-radius-pill: 999px;

	--vx-ombre-1: 0 1px 2px rgb(14 17 59 / 0.06), 0 8px 24px -8px rgb(14 17 59 / 0.10);
	--vx-ombre-2: 0 24px 64px -24px rgb(14 17 59 / 0.28);

	--vx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--vx-dur-1: 150ms;
	--vx-dur-2: 250ms;
	--vx-dur-3: 400ms;

	/* Dégradés de la charte, page 09 — réservés au web, jamais sous du texte long. */
	--vx-degrade-signature: linear-gradient(135deg, #67CBE3 0%, #3AC0F0 33%, #4786C6 66%, #3E5AA8 100%);
	--vx-degrade-horizon: linear-gradient(120deg, #292E77 0%, #3E5AA8 50%, #4786C6 100%);
	--vx-degrade-nuit: radial-gradient(ellipse 55% 70% at 70% 30%, rgb(58 192 240 / 0.45) 0%, rgb(58 192 240 / 0) 100%), #0B0E2E;
	--vx-degrade-brume: linear-gradient(180deg, #FFFFFF 0%, #EEF2F8 100%);

	/* Filets : Brume sur clair ; transparences de Blanc sur sombre (aucune couleur ajoutée). */
	--vx-filet-sombre: rgb(255 255 255 / 0.12);
	--vx-filet-sombre-fort: rgb(255 255 255 / 0.4);

	--vx-fleche-nuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E113B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
	--vx-chevron-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
	--vx-fleche-blanc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

/* ── 3. Socle ─────────────────────────────────────────────────────────────── */
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}
body {
	background: var(--vx-blanc);
	color: var(--vx-ardoise);
	font-family: var(--vx-font);
	font-size: var(--vx-type-texte);
	line-height: 1.5556;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: var(--vx-bleu); }
a:hover { color: var(--vx-nuit); }
::selection { background: var(--vx-cyan); color: var(--vx-nuit); }

:focus-visible {
	outline: 2px solid var(--vx-bleu);
	outline-offset: 3px;
}
.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--vx-nuit);
	color: var(--vx-blanc);
	font-weight: 700;
	border-radius: var(--vx-radius-s);
}

/* ── 4. Typographie : ce que les Classes v4 n'exposent pas ────────────────── */
:is(.vx-display, .vx-h1, .vx-h2, .vx-h3) { text-wrap: balance; }
:is(.vx-texte, .vx-petit) { text-wrap: pretty; }
:is(.vx-display, .vx-chiffre, .vx-token) { font-variant-numeric: tabular-nums; }

/* Titre en deux tons (charte : « Géométrie du symbole ») — la fin du titre est en <em>. */
:is(.vx-display, .vx-h1, .vx-h2, .vx-h3) em {
	font-style: normal;
	color: var(--vx-gris-titre);
}

/* Lien texte : flèche qui glisse au survol. */
.elementor .vx-lien::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.375em;
	vertical-align: -0.125em;
	background: currentColor;
	-webkit-mask: var(--vx-fleche-nuit) center / contain no-repeat;
	mask: var(--vx-fleche-nuit) center / contain no-repeat;
	transition: transform var(--vx-dur-2) var(--vx-ease);
}
.elementor :is(.vx-lien:hover, .vx-carte-lien:hover .vx-lien)::after { transform: translateX(3px); }

/* Liste de fonctionnalités : le double chevron du symbole remplace la coche (dégradé Signature). */
.elementor .vx-puce { position: relative; }
.elementor .vx-puce::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.125rem;
	height: 1.125rem;
	background: url("assets/logo/vx-chevron.svg") center / contain no-repeat;
}

/* Une rangée garde la largeur propre de ses enfants (Elementor impose width: 100 % aux conteneurs). */
.vx-row > .e-con { width: auto; }

/* ── 5. Boutons ───────────────────────────────────────────────────────────── */
/* Bouton principal : flèche dans un rond (charte, pages 15 et 16). */
.elementor .vx-btn-principal::after {
	content: "";
	flex: none;
	width: 2rem;
	height: 2rem;
	margin-right: -0.625rem;
	border-radius: 50%;
	background: var(--vx-blanc) var(--vx-fleche-nuit) center / 1rem no-repeat;
	transition: transform var(--vx-dur-2) var(--vx-ease);
}
.elementor .vx-btn-principal:hover::after { transform: translateX(3px); }
.elementor .vx-btn { transition: background-color var(--vx-dur-2) var(--vx-ease), border-color var(--vx-dur-2) var(--vx-ease), color var(--vx-dur-2) var(--vx-ease); }

/* ── 6. Surfaces : dégradés de la charte ─────────────────────────────────── */
.elementor .e-con.vx-section-brume { background: var(--vx-degrade-brume); }
.elementor .e-con.vx-section-horizon { background: var(--vx-degrade-horizon); }
.elementor .e-con.vx-section-nuit { background: var(--vx-degrade-nuit); }
.elementor .e-con.vx-icone { background: var(--vx-degrade-signature); }
/* Pictogramme : le double chevron du symbole, en blanc, sur la tuile Signature.
   Elementor réserve ::before des conteneurs à sa superposition de fond : on en reprend toutes les propriétés. */
.elementor .e-con.vx-icone { position: relative; }
.elementor .e-con.vx-icone::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 0;
	transition: none;
	background: var(--vx-blanc);
	-webkit-mask: url("assets/logo/vx-chevron.svg") center / contain no-repeat;
	mask: url("assets/logo/vx-chevron.svg") center / contain no-repeat;
}
.elementor .e-con.vx-carte { background: var(--vx-degrade-brume); }
.elementor .e-con.vx-carte-photo { box-shadow: var(--vx-ombre-2); }
.elementor .e-con.vx-degrade-signature { background: var(--vx-degrade-signature); }
.elementor .e-con.vx-degrade-horizon { background: var(--vx-degrade-horizon); }
.elementor .e-con.vx-degrade-nuit { background: var(--vx-degrade-nuit); }
.elementor .e-con.vx-degrade-brume { background: var(--vx-degrade-brume); }
.elementor .e-con.vx-ombre-1 { box-shadow: var(--vx-ombre-1); }
.elementor .e-con.vx-ombre-2 { box-shadow: var(--vx-ombre-2); }
.elementor :is(.vx-carte, .vx-carte-brume, .vx-carte-photo, .vx-carte-nuit) {
	transition: transform var(--vx-dur-2) var(--vx-ease), box-shadow var(--vx-dur-2) var(--vx-ease), border-color var(--vx-dur-2) var(--vx-ease);
}
.elementor a.vx-carte-lien:hover { transform: translateY(-3px); box-shadow: var(--vx-ombre-2); }
/* Dans une grille, le lien « En savoir plus » se cale en bas de la carte, quel que soit le titre. */
.elementor .vx-carte-lien > .vx-lien { margin-top: auto; }

/* Photo dans une carte : rayon cohérent, jamais déformée. */
.elementor .vx-media img { display: block; width: 100%; height: auto; border-radius: var(--vx-radius-m); }

/* ── 7. Contextes ─────────────────────────────────────────────────────────────
   Clair par défaut. Brume : le Gris titre (2,7:1 sur Brume) cède la place à l'Ardoise.
   Sombre (Nuit lumineuse, Horizon, carte Nuit) : titres blancs, mot en avant en Glacier,
   sur-titres en Cyan (Nuit) ou blancs (Horizon), texte en Brume ou Gris titre. */
.elementor :is(.vx-section-brume, .vx-carte-brume) :is(.vx-display, .vx-h1, .vx-h2, .vx-h3) em { color: var(--vx-ardoise); }
.elementor :is(.vx-section-brume, .vx-carte-brume) .vx-btn-secondaire { border-color: var(--vx-ardoise); }
.elementor :is(.vx-section-brume, .vx-carte-brume, .vx-badge-chiffre) .vx-badge { background-color: var(--vx-blanc); }

.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) :is(.vx-display, .vx-h1, .vx-h2, .vx-h3, .vx-chiffre, .vx-interface, .vx-token) { color: var(--vx-blanc); }
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) :is(.vx-display, .vx-h1, .vx-h2, .vx-h3) em { color: var(--vx-glacier); }
.elementor :is(.vx-section-nuit, .vx-carte-nuit) :is(.vx-texte, .vx-petit) { color: var(--vx-gris-titre); }
.elementor .vx-section-horizon :is(.vx-texte, .vx-petit) { color: var(--vx-brume); }
.elementor :is(.vx-section-nuit, .vx-carte-nuit) :is(.vx-surtitre, .vx-lien) { color: var(--vx-cyan); }
.elementor .vx-section-horizon :is(.vx-surtitre, .vx-lien) { color: var(--vx-blanc); }
.elementor :is(.vx-section-nuit, .vx-section-horizon) .vx-badge { background-color: var(--vx-filet-sombre); color: var(--vx-blanc); }
.elementor :is(.vx-section-nuit, .vx-section-horizon) :focus-visible { outline-color: var(--vx-cyan); }

/* Boutons sur sombre : principal Cyan, texte Nuit (charte, page 16) ; secondaire filet clair. */
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) .vx-btn-principal { background-color: var(--vx-cyan); border-color: var(--vx-cyan); color: var(--vx-nuit); }
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) .vx-btn-principal:hover { background-color: var(--vx-glacier); border-color: var(--vx-glacier); }
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) .vx-btn-principal::after { background-color: var(--vx-nuit); background-image: var(--vx-fleche-blanc); }
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) .vx-btn-secondaire { color: var(--vx-blanc); border-color: var(--vx-filet-sombre-fort); }
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) .vx-btn-secondaire:hover { background-color: var(--vx-blanc); border-color: var(--vx-blanc); color: var(--vx-nuit); }

/* Les notes et emplacements d'image gardent le contexte clair, quel que soit le fond. */
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) :is(.vx-note, .vx-emplacement) :is(.vx-texte, .vx-petit) { color: var(--vx-ardoise); }
.elementor :is(.vx-section-nuit, .vx-section-horizon, .vx-carte-nuit) :is(.vx-note, .vx-emplacement) .vx-surtitre { color: var(--vx-bleu); }

/* Les cartes blanches posées sur Horizon (charte, page 16) rétablissent le contexte clair. */
.elementor .vx-section-horizon :is(.vx-carte, .vx-carte-photo, .vx-carte-brume) :is(.vx-h3, .vx-interface) { color: var(--vx-nuit); }
.elementor .vx-section-horizon :is(.vx-carte, .vx-carte-photo, .vx-carte-brume) :is(.vx-texte, .vx-petit) { color: var(--vx-ardoise); }
.elementor .vx-section-horizon :is(.vx-carte, .vx-carte-photo, .vx-carte-brume) :is(.vx-surtitre, .vx-lien) { color: var(--vx-bleu); }

/* ── 8. Mouvement : apparition discrète au défilement, jamais imposée ─────── */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.elementor .vx-apparition {
			animation: vx-apparition linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}
@keyframes vx-apparition {
	from { opacity: 0; transform: translateY(1rem); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── 9. Boutons des gabarits du thème (en-tête, pied) ─────────────────────────
   Mêmes valeurs que les Classes vx-btn / vx-btn-principal : les styles des Classes v4 ne sont émis
   que pour les documents Elementor, pas pour les gabarits PHP. */
.vx-site-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vx-space-3);
	min-height: 3rem;
	padding: var(--vx-space-3) var(--vx-space-5);
	border: 1px solid transparent;
	border-radius: var(--vx-radius-pill);
	font-family: var(--vx-font);
	font-size: var(--vx-type-interface);
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--vx-dur-2) var(--vx-ease), border-color var(--vx-dur-2) var(--vx-ease), color var(--vx-dur-2) var(--vx-ease);
}
.vx-site-btn--principal { background-color: var(--vx-nuit); border-color: var(--vx-nuit); color: var(--vx-blanc); }
.vx-site-btn--principal:hover,
.vx-site-btn--principal:focus-visible { background-color: var(--vx-indigo); border-color: var(--vx-indigo); color: var(--vx-blanc); }
.vx-site-btn--principal::after {
	content: "";
	flex: none;
	width: 2rem;
	height: 2rem;
	margin-right: -0.625rem;
	border-radius: 50%;
	background: var(--vx-blanc) var(--vx-fleche-nuit) center / 1rem no-repeat;
	transition: transform var(--vx-dur-2) var(--vx-ease);
}
.vx-site-btn--principal:hover::after { transform: translateX(3px); }
.vx-site-btn--sombre { background-color: var(--vx-cyan); border-color: var(--vx-cyan); color: var(--vx-nuit); }
.vx-site-btn--sombre:hover,
.vx-site-btn--sombre:focus-visible { background-color: var(--vx-glacier); border-color: var(--vx-glacier); color: var(--vx-nuit); }
.vx-site-btn--sombre::after { background-color: var(--vx-nuit); background-image: var(--vx-fleche-blanc); }

/* ── 10. En-tête ──────────────────────────────────────────────────────────── */
.vx-evitement {
	position: absolute;
	top: -100%;
	left: var(--vx-space-4);
	z-index: 1000;
	padding: var(--vx-space-3) var(--vx-space-5);
	border-radius: var(--vx-radius-s);
	background: var(--vx-nuit);
	color: var(--vx-blanc);
	font-weight: 700;
	text-decoration: none;
}
.vx-evitement:focus { top: var(--vx-space-4); color: var(--vx-blanc); }
.vx-ancre-contenu { display: block; height: 0; outline: none; }

.vx-entete-site {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--vx-blanc);
	border-bottom: 1px solid transparent;
	font-family: var(--vx-font);
	transition: border-color var(--vx-dur-2) var(--vx-ease), box-shadow var(--vx-dur-2) var(--vx-ease);
}
.admin-bar .vx-entete-site { top: 32px; }
@media (max-width: 782px) { .admin-bar .vx-entete-site { top: 46px; } }
.vx-entete-site.is-defile { border-bottom-color: var(--vx-brume); box-shadow: var(--vx-ombre-1); }

.vx-entete-site__barre {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vx-space-6);
	max-width: calc(var(--vx-container) + 2 * var(--vx-gutter));
	min-height: 5rem;
	margin: 0 auto;
	padding: 0 var(--vx-gutter);
}
.vx-entete-site__logo { display: block; flex: none; }
.vx-entete-site__logo img { display: block; width: 172px; height: auto; }

.vx-nav__liste,
.vx-nav__liste .sub-menu { margin: 0; padding: 0; list-style: none; }
.vx-nav__liste a {
	display: block;
	color: var(--vx-nuit);
	font-size: var(--vx-type-interface);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color var(--vx-dur-1) var(--vx-ease), color var(--vx-dur-1) var(--vx-ease);
}
.vx-nav__liste a:hover { color: var(--vx-bleu); }
.vx-nav__liste :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > a { color: var(--vx-bleu); }

/* Bouton de sous-menu (ajouté par vectra-nav.js) et bouton Menu : neutralise le style de bouton de Hello. */
.vx-nav__deplier,
.vx-entete-site__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--vx-radius-pill);
	background: transparent;
	color: var(--vx-nuit);
	font: inherit;
	cursor: pointer;
}
.vx-nav__deplier:hover,
.vx-nav__deplier:focus,
.vx-entete-site__burger:hover,
.vx-entete-site__burger:focus { background: var(--vx-brume); color: var(--vx-nuit); }
.vx-nav__deplier {
	flex: none;
	width: 2rem;
	height: 2rem;
	padding: 0;
}
.vx-nav__deplier::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: var(--vx-chevron-bas) center / contain no-repeat;
	mask: var(--vx-chevron-bas) center / contain no-repeat;
	transition: transform var(--vx-dur-2) var(--vx-ease);
}
.vx-nav__deplier[aria-expanded="true"]::before { transform: rotate(180deg); }

/* Bureau */
@media (min-width: 1025px) {
	.vx-entete-site__burger { display: none; }
	.vx-entete-site__panneau { display: flex; align-items: center; gap: var(--vx-space-6); }
	.vx-nav__liste { display: flex; align-items: center; gap: var(--vx-space-1); }
	.vx-nav__liste > li { position: relative; display: flex; align-items: center; }
	.vx-nav__liste > li > a { padding: var(--vx-space-2) var(--vx-space-3); border-radius: var(--vx-radius-pill); }
	.vx-nav__liste > li > a:hover { background-color: var(--vx-brume); color: var(--vx-nuit); }
	.vx-nav__liste > .menu-item-has-children > a { padding-right: var(--vx-space-1); }

	.vx-nav__liste .sub-menu {
		position: absolute;
		top: calc(100% + var(--vx-space-3));
		left: calc(-1 * var(--vx-space-3));
		min-width: 24rem;
		padding: var(--vx-space-3);
		border: 1px solid var(--vx-brume);
		border-radius: var(--vx-radius-l);
		background: var(--vx-blanc);
		box-shadow: var(--vx-ombre-2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.25rem);
		transition: opacity var(--vx-dur-2) var(--vx-ease), transform var(--vx-dur-2) var(--vx-ease), visibility 0s linear var(--vx-dur-2);
	}
	/* Pont invisible entre le lien et le panneau : le survol ne se perd pas dans l'interstice. */
	.vx-nav__liste .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--vx-space-3); }
	.vx-nav__liste > li:is(:hover, :focus-within, .is-ouvert) > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	/* Avec le script, le clavier ouvre le panneau par le bouton (le survol reste actif). */
	.vx-js .vx-nav__liste > li:focus-within:not(.is-ouvert):not(:hover) > .sub-menu { opacity: 0; visibility: hidden; }
	.vx-nav__liste .sub-menu a { padding: var(--vx-space-3) var(--vx-space-4); border-radius: var(--vx-radius-m); }
	.vx-nav__liste .sub-menu a:hover { background-color: var(--vx-brume); color: var(--vx-nuit); }
}

/* Mobile et tablette */
@media (max-width: 1024px) {
	.vx-entete-site__burger {
		gap: var(--vx-space-2);
		min-height: 2.75rem;
		padding: 0 var(--vx-space-4);
		font-weight: 500;
	}
	.vx-entete-site__burger-icone,
	.vx-entete-site__burger-icone::before,
	.vx-entete-site__burger-icone::after {
		display: block;
		width: 1.125rem;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform var(--vx-dur-2) var(--vx-ease), opacity var(--vx-dur-1) var(--vx-ease);
	}
	.vx-entete-site__burger-icone { position: relative; }
	.vx-entete-site__burger-icone::before,
	.vx-entete-site__burger-icone::after { content: ""; position: absolute; left: 0; }
	.vx-entete-site__burger-icone::before { top: -6px; }
	.vx-entete-site__burger-icone::after { top: 6px; }
	.is-ouvert .vx-entete-site__burger-icone { background: transparent; }
	.is-ouvert .vx-entete-site__burger-icone::before { transform: translateY(6px) rotate(45deg); }
	.is-ouvert .vx-entete-site__burger-icone::after { transform: translateY(-6px) rotate(-45deg); }

	/* Sans script : le menu reste affiché sous la barre. */
	.vx-entete-site__barre { flex-wrap: wrap; }
	.vx-entete-site__burger { display: none; }
	.vx-entete-site__panneau { flex-basis: 100%; padding-bottom: var(--vx-space-5); }
	.vx-js .vx-entete-site__burger { display: inline-flex; }
	.vx-js .vx-entete-site__panneau {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100dvh - 5rem);
		overflow-y: auto;
		padding: var(--vx-space-3) var(--vx-gutter) var(--vx-space-6);
		border-top: 1px solid var(--vx-brume);
		background: var(--vx-blanc);
		box-shadow: var(--vx-ombre-2);
	}
	.vx-js .is-ouvert .vx-entete-site__panneau { display: block; }

	.vx-nav__liste > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--vx-brume); }
	.vx-nav__liste > li > a { flex: 1; padding: var(--vx-space-4) 0; }
	.vx-nav__deplier { width: 2.75rem; height: 2.75rem; }
	.vx-nav__liste .sub-menu { flex-basis: 100%; padding: 0 0 var(--vx-space-3) var(--vx-space-4); }
	.vx-js .vx-nav__liste .sub-menu { display: none; }
	.vx-js .vx-nav__liste .is-ouvert > .sub-menu { display: block; }
	.vx-nav__liste .sub-menu a { padding: var(--vx-space-3) 0; color: var(--vx-ardoise); }
	.vx-entete-site__panneau .vx-site-btn { width: 100%; margin-top: var(--vx-space-5); }
}

/* ── 11. Pied de page (fond Nuit) ─────────────────────────────────────────── */
.vx-pied-site {
	padding: var(--vx-space-9) var(--vx-gutter) var(--vx-space-6);
	background: var(--vx-nuit);
	color: var(--vx-gris-titre);
	font-family: var(--vx-font);
	font-size: var(--vx-type-petit);
	line-height: 1.6;
}
.vx-pied-site :focus-visible { outline-color: var(--vx-cyan); }
.vx-pied-site__conteneur { max-width: var(--vx-container); margin: 0 auto; }
.vx-pied-site__haut {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--vx-space-8);
}
@media (max-width: 1024px) { .vx-pied-site__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vx-pied-site__haut { grid-template-columns: minmax(0, 1fr); } }

.vx-pied-site__marque { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vx-space-5); }
.vx-pied-site__logo img { display: block; width: 172px; height: auto; }
.vx-pied-site p { margin: 0; }
.vx-pied-site__texte { color: var(--vx-gris-titre); }
.vx-pied-site__coordonnees { display: flex; flex-direction: column; gap: var(--vx-space-1); }
.vx-pied-site__telephone { color: var(--vx-blanc); font-size: var(--vx-type-interface); font-weight: 600; }
.vx-pied-site__titre {
	color: var(--vx-cyan);
	font-size: var(--vx-type-surtitre);
	font-weight: 700;
	line-height: 1.2308;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.vx-pied-site .vx-pied-site__titre { margin-bottom: var(--vx-space-5); }
.vx-pied-site__liens { display: flex; flex-direction: column; gap: var(--vx-space-3); margin: 0; padding: 0; list-style: none; }
.vx-pied-site__liens a,
.vx-pied-site__haut-de-page { color: var(--vx-brume); text-decoration: none; }
.vx-pied-site__liens a:hover,
.vx-pied-site__haut-de-page:hover { color: var(--vx-blanc); text-decoration: underline; text-underline-offset: 0.2em; }

.vx-pied-site__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--vx-space-4);
	margin-top: var(--vx-space-9);
	padding-top: var(--vx-space-5);
	border-top: 1px solid var(--vx-filet-sombre);
}

/* ── 12. Formulaire de demande (page Contact) ─────────────────────────────── */
.vx-formulaire { display: flex; flex-direction: column; gap: var(--vx-space-5); font-family: var(--vx-font); }
.vx-formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vx-space-4) var(--vx-space-5); }
.vx-formulaire__champ { display: flex; flex-direction: column; gap: var(--vx-space-2); margin: 0; }
.vx-formulaire__champ--message { grid-column: 1 / -1; }
@media (max-width: 640px) { .vx-formulaire__grille { grid-template-columns: minmax(0, 1fr); } }
.vx-formulaire label { color: var(--vx-nuit); font-size: var(--vx-type-petit); font-weight: 600; }
.vx-formulaire :is(input, textarea) {
	width: 100%;
	min-height: 3rem;
	padding: var(--vx-space-3) var(--vx-space-4);
	border: 1px solid var(--vx-gris-titre);
	border-radius: var(--vx-radius-m);
	background: var(--vx-blanc);
	color: var(--vx-nuit);
	font: 400 var(--vx-type-interface) / 1.5 var(--vx-font);
	transition: border-color var(--vx-dur-1) var(--vx-ease), box-shadow var(--vx-dur-1) var(--vx-ease);
}
.vx-formulaire textarea { resize: vertical; }
.vx-formulaire ::placeholder { color: var(--vx-ardoise); opacity: 1; }
.vx-formulaire :is(input, textarea):focus { border-color: var(--vx-bleu); outline: none; box-shadow: 0 0 0 3px rgb(62 90 168 / 0.25); }
.vx-formulaire button.vx-site-btn { align-self: flex-start; cursor: pointer; }
.vx-formulaire button.vx-site-btn:focus-visible { outline: 2px solid var(--vx-bleu); outline-offset: 3px; }
.vx-formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vx-formulaire__message { margin: 0; padding: var(--vx-space-4) var(--vx-space-5); border-left: 4px solid var(--vx-bleu); border-radius: var(--vx-radius-s); background: var(--vx-brume); color: var(--vx-nuit); font-weight: 500; }
.vx-formulaire__message--erreur { border-left-color: var(--vx-nuit); }

/* ── 13. Ressources : filtres et cartes d'articles ────────────────────────── */
.vx-filtres { display: flex; flex-wrap: wrap; gap: var(--vx-space-2); margin-bottom: var(--vx-space-7); font-family: var(--vx-font); }
.vx-filtre {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: var(--vx-space-2) var(--vx-space-4);
	border: 1px solid var(--vx-gris-titre);
	border-radius: var(--vx-radius-pill);
	color: var(--vx-nuit);
	font-size: var(--vx-type-petit);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--vx-dur-1) var(--vx-ease), color var(--vx-dur-1) var(--vx-ease), border-color var(--vx-dur-1) var(--vx-ease);
}
.vx-filtre:hover { background: var(--vx-brume); color: var(--vx-nuit); }
.vx-filtre[aria-current="page"] { background: var(--vx-nuit); border-color: var(--vx-nuit); color: var(--vx-blanc); }
.vx-ressources { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--vx-space-7) var(--vx-space-5); }
.vx-ressource__lien { display: flex; flex-direction: column; gap: var(--vx-space-3); color: inherit; text-decoration: none; }
.vx-ressource__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--vx-radius-l); background: var(--vx-brume); }
.vx-ressource__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--vx-dur-3) var(--vx-ease); }
.vx-ressource__lien:hover .vx-ressource__media img { transform: scale(1.03); }
.vx-ressource__meta { display: flex; flex-wrap: wrap; gap: var(--vx-space-3); color: var(--vx-ardoise); font-size: var(--vx-type-petit); }
.vx-ressource__categorie { color: var(--vx-bleu); font-size: var(--vx-type-surtitre); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; }
.vx-ressource__titre { margin: 0; color: var(--vx-nuit); font: 600 clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem) / 1.3 var(--vx-font); letter-spacing: -0.01em; text-wrap: balance; }
.vx-ressource__lien:hover .vx-ressource__titre { color: var(--vx-bleu); }

/* ── 14. Article et page simple (Ressources, pages légales) ──────────────── */
.vx-article-page { font-family: var(--vx-font); }
.vx-article-page__conteneur { max-width: calc(48rem + 2 * var(--vx-gutter)); margin: 0 auto; padding: 0 var(--vx-gutter); }
.vx-article-page__bandeau { padding: var(--vx-space-9) 0 var(--vx-space-8); background: var(--vx-degrade-brume); }
.vx-article-page__surtitre { margin: 0 0 var(--vx-space-4); color: var(--vx-bleu); font-size: var(--vx-type-surtitre); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.vx-article-page__surtitre a { color: inherit; text-decoration: none; }
.vx-article-page__titre { margin: 0; color: var(--vx-nuit); font: 700 var(--vx-type-h2) / 1.1818 var(--vx-font); letter-spacing: -0.02em; text-wrap: balance; }
.vx-article-page__date { margin: var(--vx-space-4) 0 0; color: var(--vx-ardoise); font-size: var(--vx-type-petit); }
.vx-article-page__corps { padding-top: var(--vx-space-8); padding-bottom: var(--vx-space-10); }
.vx-article-page__image { margin: 0 0 var(--vx-space-8); }
.vx-article-page__image img { display: block; width: 100%; height: auto; border-radius: var(--vx-radius-xl); }
.vx-article { color: var(--vx-ardoise); font-size: var(--vx-type-texte); line-height: 1.7; }
.vx-article > * + * { margin-top: var(--vx-space-5); }
.vx-article :is(h2, h3) { margin-top: var(--vx-space-7); color: var(--vx-nuit); font-family: var(--vx-font); letter-spacing: -0.01em; }
.vx-article h2 { font: 700 var(--vx-type-h3) / 1.2667 var(--vx-font); }
.vx-article h3 { font: 600 1.25rem / 1.4 var(--vx-font); }
.vx-article :is(ul, ol) { padding-left: var(--vx-space-6); }
.vx-article li + li { margin-top: var(--vx-space-2); }
.vx-article blockquote { margin-left: 0; padding: var(--vx-space-5) var(--vx-space-6); border-left: 4px solid var(--vx-bleu); border-radius: var(--vx-radius-s); background: var(--vx-brume); color: var(--vx-nuit); font-style: normal; }
.vx-article blockquote p { margin: 0; }
.vx-article a { color: var(--vx-bleu); text-underline-offset: 0.2em; }