/* =========================================================================
   VocalLead — feuille de style partagée
   Design system : Genesis (palette, rayons, espacements, ombres)
   Mobile d'abord. Aucune dépendance externe. Polices hébergées dans /fonts.
   Sommaire :
     1. Polices
     2. Variables (couleurs, polices, tailles, espacements, rayons, ombres)
     3. Base
     4. Éléments communs (conteneur, titres, boutons, cartes, icônes)
     5. En-tête et menu
     6. Sections des pages
     7. FAQ (accordéon <details>)
     8. Formulaires
     9. MAQUETTES (téléphone, article, navigateur, posts) — bloc à coller tel quel
        dans un widget HTML d'Elementor
    10. Pages légales
    11. Pied de page
    12. Points de rupture (tablette, ordinateur)
   ========================================================================= */

/* 1. Polices ------------------------------------------------------------- */
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* 2. Variables ----------------------------------------------------------- */
:root {
  /* Palette globale (6 couleurs → couleurs globales Elementor), reprise du logo */
  --vl-nuit: #0B1A3A;          /* bleu nuit : titres, texte, sections sombres, pied de page */
  --vl-bleu: #2550E8;          /* bleu du logo : boutons, liens, slogan (6,2:1 avec le blanc) */
  --vl-cyan: #1FB6F0;          /* cyan : décors, ondes, accents sur fond sombre (jamais en texte sur fond clair) */
  --vl-gris: #5B6478;          /* texte secondaire (5,6:1 sur le fond) */
  --vl-fond: #F6F8FC;          /* fond de page, légèrement bleuté */
  --vl-fond-alt: #EAF1FE;      /* fond clair alterné : une section sur deux, voiles d'icônes */
  --vl-blanc: #FFFFFF;         /* cartes et panneaux */

  /* Neutres et voiles dérivés */
  --vl-bordure: #E3E8F2;
  --vl-neutre: #9AA3B5;        /* décor uniquement, jamais pour du texte */
  --vl-bleu-voile: rgba(37, 80, 232, 0.09);
  --vl-bleu-voile-fort: rgba(37, 80, 232, 0.16);
  --vl-cyan-voile: rgba(31, 182, 240, 0.16);
  --vl-nuit-voile: rgba(11, 26, 58, 0.05);
  --vl-gris-sombre: #B8C0D4;   /* texte secondaire sur fond nuit */
  --vl-degrade: linear-gradient(90deg, #1FB6F0, #2550E8);  /* dégradé du « Lead » du logo, avec parcimonie */

  /* Polices */
  --vl-police-titre: "Montserrat", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vl-police-texte: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vl-police-accent: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* 4 styles de texte (→ typographies globales Elementor) */
  --vl-taille-titre: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);      /* h1 : 40 → 72px */
  --vl-taille-sous-titre: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);  /* h2 : 28 → 44px */
  --vl-taille-texte: 1rem;                                        /* 16px */
  --vl-taille-accent: 0.75rem;                                    /* 12px, majuscules */
  /* Tailles complémentaires */
  --vl-taille-h3: 1.25rem;
  --vl-taille-chapo: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --vl-taille-petit: 0.875rem;
  --vl-taille-legende: 0.8125rem;
  --vl-interligne: 1.6;
  --vl-approche-titre: -0.02em;

  /* Espacements (grille de 4px) */
  --vl-esp-1: 4px;  --vl-esp-2: 8px;  --vl-esp-3: 12px; --vl-esp-4: 16px;
  --vl-esp-5: 20px; --vl-esp-6: 24px; --vl-esp-8: 32px; --vl-esp-10: 40px;
  --vl-esp-12: 48px; --vl-esp-16: 64px; --vl-esp-20: 80px; --vl-esp-24: 96px;
  --vl-section: var(--vl-esp-16);            /* espace vertical d'une section */
  --vl-gouttiere: clamp(16px, 4vw, 24px);
  --vl-largeur: 1280px;

  /* Rayons */
  --vl-rayon-xs: 4px;    /* puces, badges, code */
  --vl-rayon-sm: 6px;    /* boutons, champs */
  --vl-rayon-md: 8px;    /* panneaux, menus */
  --vl-rayon-lg: 12px;   /* cartes */
  --vl-rayon-xl: 28px;   /* téléphone */
  --vl-rayon-rond: 9999px;

  /* Ombres (survol et focus uniquement) */
  --vl-ombre-survol: 0 8px 30px rgba(0, 0, 0, 0.08);
  --vl-ombre-bouton: 0 4px 12px rgba(37, 80, 232, 0.35);
  --vl-ombre-maquette: 0 24px 60px rgba(11, 26, 58, 0.14);
  --vl-focus: 3px solid var(--vl-bleu);

  --vl-transition: 200ms ease;
}

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
body {
  margin: 0;
  background: var(--vl-fond);
  color: var(--vl-nuit);
  font-family: var(--vl-police-texte);
  font-size: var(--vl-taille-texte);
  line-height: var(--vl-interligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--vl-bleu-voile); }
h1, h2, h3, h4 { font-family: var(--vl-police-titre); font-weight: 700; letter-spacing: var(--vl-approche-titre); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: var(--vl-taille-titre); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--vl-taille-sous-titre); }
h3 { font-size: var(--vl-taille-h3); letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0; }
p + p { margin-top: var(--vl-esp-3); }
a { color: var(--vl-bleu-texte); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--vl-nuit); }
strong { font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: var(--vl-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--vl-bleu-voile-fort); }

.vl-visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vl-lien-evitement {
  position: absolute; left: var(--vl-esp-4); top: -100px; z-index: 100;
  background: var(--vl-encre); color: var(--vl-blanc); padding: var(--vl-esp-3) var(--vl-esp-4);
  border-radius: var(--vl-rayon-sm); font-weight: 500; text-decoration: none;
}
.vl-lien-evitement:focus { top: var(--vl-esp-3); color: var(--vl-blanc); }

/* 4. Éléments communs ---------------------------------------------------- */
.vl-conteneur { width: 100%; max-width: var(--vl-largeur); margin-inline: auto; padding-inline: var(--vl-gouttiere); }
.vl-conteneur--etroit { max-width: 880px; }
.vl-section { padding-block: var(--vl-section); }
.vl-section--blanche { background: var(--vl-fond-alt); border-block: 1px solid var(--vl-bordure); }
.vl-section--encre { background: var(--vl-encre); color: var(--vl-blanc); }

.vl-surtitre {
  display: inline-flex; align-items: center; gap: var(--vl-esp-2);
  font-family: var(--vl-police-accent); font-size: var(--vl-taille-accent); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vl-bleu-texte);
  margin-bottom: var(--vl-esp-4);
}
.vl-surtitre::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.vl-section--encre .vl-surtitre { color: var(--vl-cyan); }

.vl-entete-section { max-width: 760px; margin-bottom: var(--vl-esp-10); }
.vl-entete-section--centre { margin-inline: auto; text-align: center; }
.vl-entete-section--centre .vl-surtitre { justify-content: center; }
.vl-chapo { font-size: var(--vl-taille-chapo); color: var(--vl-gris); margin-top: var(--vl-esp-4); line-height: 1.55; }
.vl-section--encre .vl-chapo { color: var(--vl-gris-sombre); }
.vl-accent { color: var(--vl-bleu-texte); }
.vl-texte-gris { color: var(--vl-gris); }

/* Boutons */
.vl-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vl-esp-2);
  min-height: 48px; padding: var(--vl-esp-3) var(--vl-esp-6);
  font-family: var(--vl-police-texte); font-size: 1rem; font-weight: 500; line-height: 1.2;
  border-radius: var(--vl-rayon-sm); border: 1px solid transparent; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform var(--vl-transition), background-color var(--vl-transition), box-shadow var(--vl-transition), color var(--vl-transition), border-color var(--vl-transition);
}
.vl-bouton:hover { transform: translateY(-1px); }
.vl-bouton .vl-icone { width: 18px; height: 18px; }
.vl-bouton--principal { background: var(--vl-bleu); color: var(--vl-blanc); }
.vl-bouton--principal:hover { background: var(--vl-encre); color: var(--vl-blanc); box-shadow: var(--vl-ombre-bouton); }
.vl-bouton--secondaire { background: transparent; color: var(--vl-nuit); border-color: var(--vl-nuit); }
.vl-bouton--secondaire:hover { background: var(--vl-encre); color: var(--vl-blanc); }
.vl-bouton--blanc { background: var(--vl-surface); color: var(--vl-nuit); }
.vl-bouton--blanc:hover { background: var(--vl-encre); color: var(--vl-blanc); }
.vl-bouton--contour-blanc { color: var(--vl-blanc); border-color: rgba(255, 255, 255, 0.7); }
.vl-bouton--contour-blanc:hover { background: var(--vl-surface); color: var(--vl-nuit); }
.vl-bouton--petit { min-height: 40px; padding: var(--vl-esp-2) var(--vl-esp-4); font-size: var(--vl-taille-petit); }
.vl-bouton--large { width: 100%; }

.vl-appel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vl-esp-3); }
.vl-appel__boutons { display: flex; flex-wrap: wrap; gap: var(--vl-esp-3); }
.vl-appel__mention { font-size: var(--vl-taille-legende); color: var(--vl-gris); }
.vl-section--encre .vl-appel__mention, .vl-bandeau .vl-appel__mention { color: rgba(255, 255, 255, 0.85); }

/* Cartes */
.vl-carte {
  background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg);
  padding: var(--vl-esp-6); transition: transform var(--vl-transition), box-shadow var(--vl-transition);
}
.vl-carte--survol:hover { transform: translateY(-2px); box-shadow: var(--vl-ombre-survol); }

/* Icônes */
.vl-icone { width: 24px; height: 24px; flex: none; }
.vl-pastille-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--vl-rayon-md); background: var(--vl-bleu-voile); color: var(--vl-bleu-texte);
}
.vl-liste-coches { list-style: none; display: grid; gap: var(--vl-esp-3); }
.vl-liste-coches li { display: grid; grid-template-columns: 22px 1fr; gap: var(--vl-esp-3); align-items: start; }
.vl-liste-coches .vl-icone { width: 22px; height: 22px; color: var(--vl-bleu-texte); margin-top: 1px; }

.vl-badge {
  display: inline-block; font-family: var(--vl-police-accent); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--vl-rayon-xs);
  background: var(--vl-bleu-voile); color: var(--vl-bleu-texte);
}
.vl-badge--vert { background: var(--vl-cyan-voile); color: var(--vl-nuit); }
.vl-badge--encre { background: var(--vl-encre); color: var(--vl-blanc); }

/* Grille de points (seul décor du design system) */
.vl-points {
  background-image: radial-gradient(rgba(37, 80, 232, 0.22) 1.2px, transparent 1.6px);
  background-size: 16px 16px;
}

/* 5. En-tête et menu ----------------------------------------------------- */
.vl-entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 249, 252, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--vl-bordure);
}
.vl-entete__interieur { display: flex; align-items: center; justify-content: space-between; gap: var(--vl-esp-4); min-height: 64px; }
.vl-logo { display: inline-flex; align-items: center; flex: none; }
.vl-logo img { width: 180px; height: auto; background: none; }
.vl-nav { display: none; }
.vl-nav__liste { list-style: none; display: flex; gap: var(--vl-esp-1); }
.vl-nav__lien {
  display: block; padding: var(--vl-esp-2) var(--vl-esp-3); border-radius: var(--vl-rayon-sm);
  color: var(--vl-nuit); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
}
.vl-nav__lien:hover { background: var(--vl-nuit-voile); color: var(--vl-nuit); }
.vl-nav__lien[aria-current="page"] { color: var(--vl-bleu-texte); background: var(--vl-bleu-voile); }
.vl-entete__action { display: none; }

.vl-menu-mobile { position: relative; }
.vl-menu-mobile > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--vl-esp-2);
  min-height: 44px; padding: var(--vl-esp-2) var(--vl-esp-3); border: 1px solid var(--vl-nuit);
  border-radius: var(--vl-rayon-sm); cursor: pointer; font-weight: 500; font-size: var(--vl-taille-petit);
}
.vl-menu-mobile > summary::-webkit-details-marker { display: none; }
.vl-menu-mobile .vl-icone--fermer { display: none; }
.vl-menu-mobile[open] .vl-icone--fermer { display: block; }
.vl-menu-mobile[open] .vl-icone--menu { display: none; }
.vl-menu-mobile__panneau {
  position: absolute; right: 0; top: calc(100% + var(--vl-esp-3)); width: min(86vw, 340px);
  background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg);
  box-shadow: var(--vl-ombre-survol); padding: var(--vl-esp-3);
}
.vl-menu-mobile__panneau ul { list-style: none; display: grid; gap: 2px; margin-bottom: var(--vl-esp-3); }
.vl-menu-mobile__panneau .vl-nav__lien { padding: var(--vl-esp-3); font-size: 1rem; }

/* 6. Sections des pages -------------------------------------------------- */

/* --- Accueil : héros --- */
.vl-hero { position: relative; overflow: hidden; padding-block: var(--vl-esp-12) var(--vl-esp-16); }
.vl-hero::before {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 70%; height: 100%;
  background-image: radial-gradient(rgba(37, 80, 232, 0.22) 1.2px, transparent 1.6px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent); mask-image: linear-gradient(to left, #000 20%, transparent);
  pointer-events: none;
}
.vl-hero__grille { position: relative; display: grid; gap: var(--vl-esp-12); align-items: center; }
.vl-hero h1 { margin-bottom: var(--vl-esp-6); }
.vl-hero h1 span { display: block; }
.vl-hero__promesse { font-size: var(--vl-taille-chapo); color: var(--vl-gris); max-width: 34em; margin-bottom: var(--vl-esp-8); }
.vl-hero__promesse strong { color: var(--vl-nuit); font-weight: 500; }
.vl-hero__visuel { position: relative; display: flex; justify-content: center; }
.vl-hero__etiquette {
  position: absolute; display: flex; align-items: center; gap: var(--vl-esp-3);
  background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg);
  padding: var(--vl-esp-3) var(--vl-esp-4); box-shadow: var(--vl-ombre-survol); font-size: var(--vl-taille-petit); line-height: 1.35;
}
.vl-hero__etiquette strong { display: block; font-weight: 700; }
.vl-hero__etiquette span { color: var(--vl-gris); font-size: var(--vl-taille-legende); }
.vl-hero__etiquette { display: none; }
.vl-hero__etiquette--article { left: 0; top: 20%; }
.vl-hero__etiquette--posts { left: 4%; bottom: 9%; }
.vl-hero__etiquette .vl-pastille-icone { width: 36px; height: 36px; }
.vl-hero__etiquette .vl-pastille-icone--vert { background: var(--vl-cyan-voile); color: var(--vl-nuit); }

/* --- Accueil : 3 étapes --- */
.vl-etapes__grille { list-style: none; display: grid; gap: var(--vl-esp-4); counter-reset: etape; }
.vl-etape { position: relative; padding: var(--vl-esp-8) var(--vl-esp-6) var(--vl-esp-6); }
.vl-etape__numero {
  font-family: var(--vl-police-titre); font-weight: 700; font-size: 4rem; line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--vl-bleu); margin-bottom: var(--vl-esp-6); display: block;
}
.vl-etape h3 { display: flex; align-items: center; gap: var(--vl-esp-3); margin-bottom: var(--vl-esp-3); font-size: 1.5rem; }
.vl-etape p { color: var(--vl-gris); }
.vl-etape p strong { color: var(--vl-nuit); font-weight: 700; }
.vl-etapes__note { margin-top: var(--vl-esp-6); color: var(--vl-gris); font-size: var(--vl-taille-petit); display: flex; gap: var(--vl-esp-2); align-items: flex-start; }
.vl-etapes__note .vl-icone { width: 20px; height: 20px; color: var(--vl-bleu-texte); margin-top: 2px; }

/* --- Accueil : ambiances de l'appli --- */
/* Mobile : défilement horizontal avec aimantation ; tablette et ordinateur : grille 4 colonnes */
.vl-ambiances__grille {
  list-style: none; display: flex; gap: var(--vl-esp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--vl-gouttiere)); padding: var(--vl-esp-2) var(--vl-gouttiere) var(--vl-esp-4);
  scroll-padding-inline: var(--vl-gouttiere); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.vl-ambiances__grille > li { flex: 0 0 62%; max-width: 220px; scroll-snap-align: start; }
.vl-ambiances__grille:focus-visible { outline-offset: -3px; }
.vl-ambiances__glisser { margin-top: var(--vl-esp-2); font-size: var(--vl-taille-legende); color: var(--vl-gris-sombre); }
.vl-ambiances__note { margin-top: var(--vl-esp-8); max-width: 46em; font-size: var(--vl-taille-petit); color: var(--vl-gris-sombre); line-height: 1.6; }
.vl-ambiance { margin: 0; display: grid; gap: var(--vl-esp-4); transition: transform var(--vl-transition); }
.vl-ambiance:hover { transform: translateY(-4px); }
.vl-ambiance figcaption { text-align: center; line-height: 1.35; }
.vl-ambiance figcaption strong { display: block; color: var(--vl-blanc); font-family: var(--vl-police-titre); letter-spacing: -0.02em; }
.vl-ambiance figcaption span { font-size: var(--vl-taille-petit); color: var(--vl-gris-sombre); }

/* --- Accueil : avant / après --- */
.vl-avant-apres__grille { display: grid; gap: var(--vl-esp-6); align-items: start; }
.vl-avant-apres__colonne > .vl-surtitre { margin-bottom: var(--vl-esp-3); }
.vl-avant-apres__fleche {
  display: grid; place-items: center; width: 52px; height: 52px; margin-inline: auto;
  border-radius: var(--vl-rayon-rond); background: var(--vl-bleu); color: var(--vl-blanc); transform: rotate(90deg);
}
.vl-avant-apres__resultats { display: grid; gap: var(--vl-esp-4); }

/* --- Accueil : réseaux --- */
.vl-reseaux__liste { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vl-esp-3); }
.vl-reseau {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--vl-esp-4); height: 100%;
  padding: var(--vl-esp-5); background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg);
}
.vl-reseau .vl-icone { width: 28px; height: 28px; color: var(--vl-nuit); }
.vl-reseau strong { font-family: var(--vl-police-titre); letter-spacing: -0.02em; font-size: 1.0625rem; line-height: 1.25; }
.vl-reseau span { display: block; color: var(--vl-gris); font-size: var(--vl-taille-legende); margin-top: 2px; }
.vl-reseaux__note { margin-top: var(--vl-esp-6); font-size: var(--vl-taille-petit); color: var(--vl-gris); }

/* --- Accueil : comparatif des coûts --- */
.vl-cout { display: grid; gap: var(--vl-esp-8); align-items: center; }
.vl-cout__barres { display: grid; gap: var(--vl-esp-6); }
.vl-cout__ligne { display: grid; gap: var(--vl-esp-2); }
.vl-cout__libelle { display: flex; justify-content: space-between; gap: var(--vl-esp-4); font-size: var(--vl-taille-petit); flex-wrap: wrap; }
.vl-cout__libelle strong { font-family: var(--vl-police-titre); font-size: 1.0625rem; letter-spacing: -0.02em; }
.vl-cout__piste { height: 14px; border-radius: var(--vl-rayon-rond); background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.vl-cout__barre { display: block; height: 100%; border-radius: var(--vl-rayon-rond); background: var(--vl-gris-sombre); }
.vl-cout__barre--plage { background: repeating-linear-gradient(90deg, var(--vl-gris-sombre) 0 6px, transparent 6px 9px); }
.vl-cout__barre--vocallead { background: var(--vl-degrade); }
.vl-cout__total { font-family: var(--vl-police-titre); font-weight: 700; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.02em; }
.vl-cout__total small { font-size: 0.32em; letter-spacing: -0.01em; font-weight: 600; color: var(--vl-gris-sombre); }
.vl-cout__limites { margin-top: var(--vl-esp-6); padding-top: var(--vl-esp-6); border-top: 1px solid rgba(255, 255, 255, 0.16); color: var(--vl-gris-sombre); font-size: var(--vl-taille-petit); }

/* --- Accueil : aperçu des tarifs --- */
.vl-apercu-tarifs { display: grid; gap: var(--vl-esp-4); }
.vl-apercu-tarifs__offre { display: flex; flex-direction: column; gap: var(--vl-esp-2); }
.vl-apercu-tarifs__offre--phare { border: 2px solid var(--vl-bleu); }
.vl-apercu-tarifs__offre .vl-apercu-tarifs__prix { color: var(--vl-nuit); font-family: var(--vl-police-titre); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.vl-apercu-tarifs__prix small { font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--vl-gris); }
.vl-apercu-tarifs__offre p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }
.vl-apercu-tarifs__offre .vl-badge { align-self: flex-start; }
.vl-apercu-tarifs__pied { margin-top: var(--vl-esp-6); display: flex; flex-wrap: wrap; gap: var(--vl-esp-4); align-items: center; justify-content: space-between; }

/* --- Bandeau d'appel à l'action --- */
.vl-bandeau { padding-block: var(--vl-section); }
.vl-bandeau__boite {
  position: relative; overflow: hidden; border-radius: var(--vl-rayon-lg);
  background-color: var(--vl-bleu); color: var(--vl-blanc);
  padding: var(--vl-esp-12) var(--vl-esp-6);
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.6px); background-size: 16px 16px;
}
.vl-bandeau h2 { max-width: 16ch; margin-bottom: var(--vl-esp-4); }
.vl-bandeau__boite > p { max-width: 40em; color: rgba(255, 255, 255, 0.9); margin-bottom: var(--vl-esp-8); font-size: var(--vl-taille-chapo); }

/* --- En-tête des pages intérieures --- */
.vl-page-entete { padding-block: var(--vl-esp-12) var(--vl-esp-10); border-bottom: 1px solid var(--vl-bordure); position: relative; overflow: hidden; }
.vl-page-entete__grille { display: grid; gap: var(--vl-esp-8); align-items: end; }
.vl-page-entete h1 { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); }
.vl-page-entete .vl-chapo { max-width: 36em; }
.vl-page-entete--points::after {
  content: ""; position: absolute; right: 0; top: 0; width: 40%; height: 100%;
  background-image: radial-gradient(rgba(37, 80, 232, 0.22) 1.2px, transparent 1.6px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
.vl-fil-ariane { font-size: var(--vl-taille-legende); color: var(--vl-gris); margin-bottom: var(--vl-esp-6); }
.vl-fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--vl-esp-2); }
.vl-fil-ariane li + li::before { content: "/"; margin-right: var(--vl-esp-2); color: var(--vl-neutre); }
.vl-fil-ariane a { color: var(--vl-gris); }
.vl-fil-ariane a:hover { color: var(--vl-nuit); }

/* --- Bloc de fin de page (appel à l'action sobre, pages intérieures) --- */
.vl-suite__boite {
  display: grid; gap: var(--vl-esp-8); align-items: center; padding: var(--vl-esp-10) var(--vl-esp-6);
  background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg);
}
.vl-suite h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
.vl-section--blanche + .vl-suite .vl-suite__boite { background: var(--vl-surface); }

.vl-h3 { font-size: var(--vl-taille-h3); letter-spacing: -0.02em; line-height: 1.25; }
.vl-icone--mini { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 2px; }
.vl-mq-lien { color: var(--vl-bleu-texte); text-decoration: underline; text-underline-offset: 2px; }

/* --- Comment ça marche : chronologie --- */
.vl-chronologie__liste { list-style: none; position: relative; display: grid; gap: var(--vl-esp-6); }
.vl-chronologie__liste::before { content: ""; position: absolute; left: 23px; top: 8px; bottom: 8px; width: 2px; background: var(--vl-bordure); }
.vl-jalon { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--vl-esp-4); }
.vl-jalon__point {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--vl-rayon-rond); background: var(--vl-surface); border: 2px solid var(--vl-bleu); color: var(--vl-bleu-texte);
}
.vl-jalon__point .vl-icone { width: 22px; height: 22px; }
.vl-jalon--fin .vl-jalon__point { background: var(--vl-cyan); border-color: var(--vl-cyan); color: var(--vl-nuit); }
.vl-jalon__quand { font-family: var(--vl-police-accent); font-size: var(--vl-taille-accent); text-transform: uppercase; letter-spacing: 0.08em; color: var(--vl-bleu-texte); font-weight: 500; }
.vl-jalon__contenu { padding: var(--vl-esp-5) var(--vl-esp-6); }
.vl-jalon__contenu h3 { margin: var(--vl-esp-1) 0 var(--vl-esp-2); }
.vl-jalon__contenu p { color: var(--vl-gris); }
.vl-jalon__detail { margin-top: var(--vl-esp-3); font-size: var(--vl-taille-petit); color: var(--vl-nuit); }

/* --- Comment ça marche : article annoté --- */
.vl-anatomie { display: grid; gap: var(--vl-esp-8); align-items: start; }
.vl-anatomie__notes { list-style: none; display: grid; gap: var(--vl-esp-3); counter-reset: note; }
.vl-anatomie__notes li { display: grid; grid-template-columns: 32px 1fr; gap: var(--vl-esp-3); align-items: start; }
.vl-anatomie__notes strong { display: block; }
.vl-anatomie__notes span:not(.vl-repere) { color: var(--vl-gris); font-size: var(--vl-taille-petit); }
.vl-repere {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--vl-rayon-rond);
  background: var(--vl-bleu); color: var(--vl-blanc); font-family: var(--vl-police-accent); font-size: 0.75rem; font-weight: 500; flex: none;
}
.vl-anatomie__compat { margin-top: var(--vl-esp-6); font-size: var(--vl-taille-petit); color: var(--vl-gris); }

/* --- Comment ça marche : angles des posts --- */
.vl-angles__grille { list-style: none; display: grid; gap: var(--vl-esp-6); }
.vl-angle { display: grid; gap: var(--vl-esp-4); }
.vl-angle__texte .vl-jalon__quand { display: block; margin-bottom: var(--vl-esp-1); }
.vl-angle__texte h3 { margin-bottom: var(--vl-esp-2); }
.vl-angle__texte p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }

/* --- Comment ça marche : atouts --- */
.vl-atouts { list-style: none; display: grid; gap: var(--vl-esp-4); }
.vl-atout { display: flex; gap: var(--vl-esp-4); align-items: flex-start; }
.vl-atout h3 { font-size: 1.0625rem; margin-bottom: var(--vl-esp-1); }
.vl-atout p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }

/* --- Métiers --- */
.vl-metiers__grille { list-style: none; display: grid; gap: var(--vl-esp-4); }
.vl-metier { display: flex; flex-direction: column; gap: var(--vl-esp-4); height: 100%; }
.vl-metier__tete { display: flex; align-items: center; gap: var(--vl-esp-3); }
.vl-metier__liste { color: var(--vl-gris); font-size: var(--vl-taille-petit); }
.vl-metier__exemple { margin-top: auto; padding: var(--vl-esp-4); border-radius: var(--vl-rayon-md); background: var(--vl-fond); border: 1px dashed var(--vl-bordure); }
.vl-metier__exemple .vl-jalon__quand { display: block; margin-bottom: var(--vl-esp-2); }
.vl-metier__projet { font-size: var(--vl-taille-petit); color: var(--vl-gris); margin-bottom: var(--vl-esp-2); }
.vl-metier__titre { font-family: var(--vl-police-titre); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.vl-metier--large { background: var(--vl-encre); color: var(--vl-blanc); border-color: var(--vl-encre); }
.vl-metier--large .vl-metier__liste { color: var(--vl-gris-sombre); }
.vl-metier--large .vl-metier__exemple { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); }
.vl-metier--large .vl-metier__projet { color: var(--vl-gris-sombre); }
.vl-metier--large .vl-jalon__quand { color: var(--vl-cyan); }
.vl-metier--large .vl-pastille-icone { background: rgba(255, 255, 255, 0.1); color: var(--vl-blanc); }

.vl-encart {
  display: grid; gap: var(--vl-esp-6); padding: var(--vl-esp-8) var(--vl-esp-6);
  border-radius: var(--vl-rayon-lg); background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-top: 4px solid var(--vl-bleu);
}
.vl-encart h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: var(--vl-esp-3); }

/* --- Exemples --- */
.vl-exemples-nav { list-style: none; display: flex; flex-wrap: wrap; gap: var(--vl-esp-2); }
.vl-exemples-nav a {
  display: inline-flex; align-items: center; gap: var(--vl-esp-2); min-height: 44px; padding: var(--vl-esp-2) var(--vl-esp-4);
  border: 1px solid var(--vl-bordure); background: var(--vl-surface); border-radius: var(--vl-rayon-rond);
  text-decoration: none; color: var(--vl-nuit); font-weight: 500; font-size: var(--vl-taille-petit);
}
.vl-exemples-nav a:hover { border-color: var(--vl-nuit); }
.vl-avertissement {
  display: flex; gap: var(--vl-esp-3); align-items: flex-start; padding: var(--vl-esp-4); margin-top: var(--vl-esp-8);
  border-radius: var(--vl-rayon-md); background: var(--vl-bleu-voile); font-size: var(--vl-taille-petit);
}
.vl-avertissement .vl-icone { color: var(--vl-bleu-texte); width: 20px; height: 20px; margin-top: 2px; }
.vl-exemple { scroll-margin-top: 88px; }
.vl-exemple + .vl-exemple { border-top: 1px solid var(--vl-bordure); }
.vl-exemple__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vl-esp-3); margin-bottom: var(--vl-esp-8); }
.vl-exemple__tete h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); width: 100%; }
.vl-exemple__grille { display: grid; gap: var(--vl-esp-6); align-items: start; }
.vl-exemple__grille > *, .vl-avant-apres__grille > *, .vl-avant-apres__resultats > *, .vl-anatomie > *, .vl-hero__grille > * { min-width: 0; }
.vl-exemple__etape > .vl-jalon__quand { display: block; margin-bottom: var(--vl-esp-3); }
.vl-exemple__posts { margin-top: var(--vl-esp-8); }
.vl-exemple__posts > .vl-jalon__quand { display: block; margin-bottom: var(--vl-esp-4); }
.vl-posts-rangee { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vl-esp-3); }
.vl-posts-rangee figcaption { font-size: var(--vl-taille-legende); color: var(--vl-gris); margin-top: var(--vl-esp-2); line-height: 1.4; }
.vl-posts-rangee figcaption strong { color: var(--vl-nuit); font-weight: 500; display: block; }
.vl-posts-rangee figure { margin: 0; }

/* --- Tarifs --- */
.vl-offres { display: grid; gap: var(--vl-esp-4); align-items: stretch; }
.vl-offre { display: flex; flex-direction: column; gap: var(--vl-esp-4); padding: var(--vl-esp-8) var(--vl-esp-6); position: relative; }
.vl-offre__nom { font-family: var(--vl-police-accent); font-size: var(--vl-taille-accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--vl-gris); }
.vl-offre__prix { font-family: var(--vl-police-titre); font-weight: 700; font-size: 2.5rem; letter-spacing: -0.02em; line-height: 1; }
.vl-offre__prix small { font-size: 0.34em; letter-spacing: 0; font-weight: 600; color: var(--vl-gris); margin-left: var(--vl-esp-1); }
.vl-offre__equivalent { font-size: var(--vl-taille-petit); color: var(--vl-gris); }
.vl-offre__volume { font-size: 1rem; line-height: 1.3; padding: var(--vl-esp-2) var(--vl-esp-3); border-radius: var(--vl-rayon-sm); background: var(--vl-bleu-voile); color: var(--vl-nuit); align-self: flex-start; }
.vl-offre__volume strong { font-family: var(--vl-police-titre); font-size: 1.375rem; letter-spacing: -0.02em; color: var(--vl-bleu-texte); margin-right: 2px; }
.vl-offre--phare .vl-offre__volume { background: rgba(255, 255, 255, 0.1); color: var(--vl-blanc); }
.vl-offre--phare .vl-offre__volume strong { color: var(--vl-cyan); }
.vl-offre__cible { font-size: var(--vl-taille-petit); color: var(--vl-gris); line-height: 1.4; }
.vl-offre--phare .vl-offre__cible { color: var(--vl-gris-sombre); }
.vl-offre__ttc { font-size: var(--vl-taille-legende); color: var(--vl-gris); }
.vl-offre__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--vl-esp-2); flex-wrap: wrap; }
.vl-offre__tarif { display: grid; gap: var(--vl-esp-2); align-content: start; }
.vl-offre--phare .vl-offre__ttc { color: var(--vl-gris-sombre); }
.vl-offres__pied { margin-top: var(--vl-esp-10); display: grid; gap: var(--vl-esp-3); font-size: var(--vl-taille-petit); }
.vl-offres__projet { display: flex; gap: var(--vl-esp-3); align-items: flex-start; font-size: 1rem; line-height: 1.55; padding: var(--vl-esp-5); border-radius: var(--vl-rayon-md); background: var(--vl-bleu-voile); color: var(--vl-nuit); }
.vl-offres__projet .vl-icone { color: var(--vl-bleu-texte); margin-top: 2px; }
.vl-offres__equipe { font-size: 1rem; padding: var(--vl-esp-4) var(--vl-esp-5); border: 1px dashed var(--vl-bleu); border-radius: var(--vl-rayon-md); background: var(--vl-surface); }
.vl-offre .vl-liste-coches { font-size: var(--vl-taille-petit); }
.vl-offre .vl-bouton { margin-top: auto; }
.vl-offre--phare { background: var(--vl-encre); color: var(--vl-blanc); border-color: var(--vl-encre); }
.vl-offre--phare .vl-offre__nom { color: var(--vl-cyan); }
.vl-offre--phare .vl-offre__prix small, .vl-offre--phare .vl-offre__equivalent { color: var(--vl-gris-sombre); }
.vl-offre--phare .vl-liste-coches .vl-icone { color: var(--vl-cyan); }
.vl-offre__ruban {
  align-self: flex-start; font-family: var(--vl-police-accent); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: var(--vl-rayon-xs); background: var(--vl-cyan); color: var(--vl-nuit);
}
.vl-offre--phare .vl-offre__ruban { background: var(--vl-cyan); color: var(--vl-nuit); }
.vl-offre__mention { font-size: var(--vl-taille-legende); color: var(--vl-gris); text-align: center; }
.vl-offre--phare .vl-offre__mention { color: var(--vl-gris-sombre); }

.vl-inclus { display: grid; gap: var(--vl-esp-8); align-items: start; }
.vl-inclus__liste { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--vl-esp-3); }
.vl-inclus__liste li { display: flex; gap: var(--vl-esp-3); align-items: center; padding: var(--vl-esp-4); background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-md); font-weight: 500; }
.vl-inclus__liste .vl-icone { color: var(--vl-bleu-texte); }

.vl-mise-en-route { display: grid; gap: var(--vl-esp-8); }
.vl-mise-en-route__liste { list-style: none; display: grid; gap: var(--vl-esp-3); }
.vl-mise-en-route__liste li { display: grid; grid-template-columns: 28px 1fr; gap: var(--vl-esp-3); align-items: start; padding-bottom: var(--vl-esp-4); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.vl-mise-en-route__liste .vl-icone { width: 24px; height: 24px; color: var(--vl-cyan); stroke-width: 2.4; margin-top: 1px; }

/* Tableau comparatif */
.vl-comparatif__defilement { overflow-x: auto; border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg); background: var(--vl-surface); }
.vl-comparatif__defilement:focus-visible { outline-offset: 2px; }
.vl-tableau { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--vl-taille-petit); }
.vl-tableau caption { text-align: left; padding: var(--vl-esp-4) var(--vl-esp-5); color: var(--vl-gris); font-size: var(--vl-taille-legende); caption-side: bottom; border-top: 1px solid var(--vl-bordure); }
.vl-tableau th, .vl-tableau td { padding: var(--vl-esp-4) var(--vl-esp-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--vl-bordure); }
.vl-tableau thead th { font-family: var(--vl-police-titre); font-size: 1rem; letter-spacing: -0.02em; background: var(--vl-fond); }
.vl-tableau tbody th { font-weight: 500; width: 24%; }
.vl-tableau tbody tr:last-child th, .vl-tableau tbody tr:last-child td { border-bottom: 0; }
.vl-tableau .vl-colonne-vl { background: var(--vl-bleu-voile); }
.vl-tableau thead .vl-colonne-vl { background: var(--vl-bleu); color: var(--vl-blanc); }
.vl-oui, .vl-non, .vl-moyen { display: inline-flex; gap: var(--vl-esp-2); align-items: flex-start; }
.vl-oui .vl-icone, .vl-non .vl-icone, .vl-moyen .vl-icone { width: 18px; height: 18px; margin-top: 2px; }
.vl-oui .vl-icone { color: var(--vl-bleu-texte); }
.vl-non .vl-icone { color: #B91C1C; }
.vl-moyen .vl-icone { color: var(--vl-gris); }

/* --- Tarifs : comparatif visuel (3 colonnes, VocalLead mis en avant) --- */
.vl-vs { display: grid; column-gap: var(--vl-esp-4); row-gap: 0; align-items: start; }
.vl-vs__col + .vl-vs__col { margin-top: var(--vl-esp-6); }
.vl-vs__col { position: relative; display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--vl-esp-3); padding: var(--vl-esp-8) var(--vl-esp-6); border-radius: var(--vl-rayon-lg); background: var(--vl-surface); border: 1px solid var(--vl-bordure); }
.vl-vs__col h3 { font-size: 1.25rem; }
.vl-vs__sous { color: var(--vl-gris); font-size: var(--vl-taille-petit); }
.vl-vs__prix { font-family: var(--vl-police-titre); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.vl-vs__prix small { display: block; font-size: 0.55em; font-weight: 600; color: var(--vl-gris); letter-spacing: 0; margin-top: 2px; }
.vl-vs__criteres { list-style: none; display: contents; }
.vl-vs__critere:first-child { padding-top: var(--vl-esp-4); border-top: 1px solid var(--vl-bordure); }
.vl-vs__critere ul { list-style: none; }
.vl-vs__col h3, .vl-vs__sous, .vl-vs__prix { margin: 0; }
.vl-vs__label { display: block; font-family: var(--vl-police-accent); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vl-gris); margin-bottom: var(--vl-esp-1); }
.vl-vs__ligne { display: grid; grid-template-columns: 22px 1fr; gap: var(--vl-esp-2); align-items: start; font-size: var(--vl-taille-petit); line-height: 1.45; }
.vl-vs__ligne .vl-icone { width: 20px; height: 20px; stroke-width: 2.4; margin-top: 1px; }
.vl-vs__ligne--ok .vl-icone { color: var(--vl-bleu-texte); }
.vl-vs__ligne--moyen .vl-icone { color: var(--vl-neutre); }
.vl-vs__ligne--ko .vl-icone { color: #B91C1C; }
.vl-vs__col--vl { background: var(--vl-encre); color: var(--vl-blanc); border: 2px solid var(--vl-bleu); box-shadow: 0 24px 60px rgba(37, 80, 232, 0.25); }
.vl-vs__col--vl h3 { font-size: 1.75rem; }
.vl-vs__col--vl .vl-vs__sous, .vl-vs__col--vl .vl-vs__label, .vl-vs__col--vl .vl-vs__prix small { color: var(--vl-gris-sombre); }
.vl-vs__col--vl .vl-vs__prix { font-size: clamp(1.5rem, 1rem + 2vw, 2rem); color: var(--vl-cyan); }
.vl-vs__col--vl .vl-vs__critere:first-child { border-top-color: rgba(255, 255, 255, 0.16); }
.vl-vs__col--vl .vl-vs__ligne { font-size: 1rem; }
.vl-vs__col--vl .vl-vs__ligne--ok .vl-icone { color: var(--vl-cyan); }
.vl-vs__badge { position: absolute; top: -14px; left: var(--vl-esp-6); font-family: var(--vl-police-accent); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; padding: 6px 10px; border-radius: var(--vl-rayon-xs); background: var(--vl-cyan); color: var(--vl-nuit); margin-bottom: var(--vl-esp-2); }
.vl-vs__verdict { margin-top: var(--vl-esp-8); display: grid; gap: var(--vl-esp-6); align-items: center; padding: var(--vl-esp-8) var(--vl-esp-6); border-radius: var(--vl-rayon-lg); background: var(--vl-bleu); color: var(--vl-blanc); }
.vl-vs__accroche { display: block; font-family: var(--vl-police-titre); font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: var(--vl-esp-3); }
.vl-vs__verdict > p { font-size: var(--vl-taille-chapo); line-height: 1.55; max-width: 42em; }
.vl-vs__verdict .vl-appel__mention { color: rgba(255, 255, 255, 0.9); }
.vl-vs__note { margin-top: var(--vl-esp-4); font-size: var(--vl-taille-legende); color: var(--vl-gris); }

/* --- Agences --- */
.vl-agences__duo { display: grid; gap: var(--vl-esp-6); }
.vl-agences__bloc { padding: var(--vl-esp-8) var(--vl-esp-6); display: flex; flex-direction: column; gap: var(--vl-esp-5); }
.vl-agences__bloc h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.vl-agences__bloc--encre { background: var(--vl-encre); color: var(--vl-blanc); border-color: var(--vl-encre); }
.vl-agences__bloc--encre .vl-chapo { color: var(--vl-gris-sombre); }
.vl-agences__bloc--encre .vl-liste-coches .vl-icone { color: var(--vl-cyan); }
.vl-agences__bloc--encre .vl-surtitre { color: var(--vl-cyan); }
.vl-agences__bloc--encre .vl-appel__mention { color: var(--vl-gris-sombre); }
.vl-agences__bloc .vl-appel { margin-top: auto; }
.vl-agences__options { list-style: none; display: grid; gap: var(--vl-esp-3); }
.vl-agences__options li { display: flex; gap: var(--vl-esp-4); padding: var(--vl-esp-4); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-md); background: var(--vl-fond); }
.vl-agences__options h3 { font-size: 1.0625rem; margin-bottom: var(--vl-esp-1); }
.vl-agences__options p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }
.vl-etapes-agence { list-style: none; display: grid; gap: var(--vl-esp-4); counter-reset: ag; }
.vl-etapes-agence li { counter-increment: ag; padding: var(--vl-esp-6); }
.vl-etapes-agence li::before { content: counter(ag, decimal-leading-zero); display: block; font-family: var(--vl-police-accent); color: var(--vl-bleu-texte); font-size: var(--vl-taille-petit); margin-bottom: var(--vl-esp-3); }
.vl-etapes-agence h3 { margin-bottom: var(--vl-esp-2); }
.vl-etapes-agence p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }

/* --- Blog --- */
.vl-blog__grille { list-style: none; display: grid; gap: var(--vl-esp-6); }
.vl-billet { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.vl-billet__image { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-bottom: 1px solid var(--vl-bordure); }
.vl-billet__corps { display: flex; flex-direction: column; gap: var(--vl-esp-3); padding: var(--vl-esp-5) var(--vl-esp-6) var(--vl-esp-6); flex: 1; }
.vl-billet__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vl-esp-3); font-size: var(--vl-taille-legende); color: var(--vl-gris); }
.vl-billet h2 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.3; }
.vl-billet h2 a { color: var(--vl-nuit); text-decoration: none; }
.vl-billet h2 a::after { content: ""; position: absolute; inset: 0; }
.vl-billet { position: relative; }
.vl-billet h2 a:focus-visible { outline: none; }
.vl-billet:focus-within { outline: var(--vl-focus); outline-offset: 3px; }
.vl-billet p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }
.vl-billet__lire { margin-top: auto; display: inline-flex; align-items: center; gap: var(--vl-esp-2); color: var(--vl-bleu-texte); font-weight: 500; font-size: var(--vl-taille-petit); }
.vl-billet__lire .vl-icone { width: 16px; height: 16px; transition: transform var(--vl-transition); }
.vl-billet:hover .vl-billet__lire .vl-icone { transform: translateX(3px); }
.vl-billet--une { background: var(--vl-surface); }
.vl-blog__inscription { display: grid; gap: var(--vl-esp-6); align-items: center; }

/* --- Contact --- */
.vl-choix { display: grid; gap: var(--vl-esp-4); }
.vl-choix__bouton {
  display: flex; align-items: center; gap: var(--vl-esp-4); padding: var(--vl-esp-6);
  border-radius: var(--vl-rayon-lg); border: 2px solid var(--vl-nuit); text-decoration: none; color: var(--vl-nuit); background: var(--vl-surface);
  transition: transform var(--vl-transition), box-shadow var(--vl-transition), background-color var(--vl-transition), color var(--vl-transition);
}
.vl-choix__bouton:hover { transform: translateY(-2px); box-shadow: var(--vl-ombre-survol); color: var(--vl-nuit); }
.vl-choix__bouton--oui { background: var(--vl-bleu); border-color: var(--vl-bleu); color: var(--vl-blanc); }
.vl-choix__bouton--oui:hover { background: var(--vl-encre); border-color: var(--vl-encre); color: var(--vl-blanc); }
.vl-choix__reponse { font-family: var(--vl-police-titre); font-weight: 700; font-size: 2rem; letter-spacing: -0.025em; line-height: 1; min-width: 2.2em; }
.vl-choix__texte strong { display: block; font-size: 1.125rem; line-height: 1.3; }
.vl-choix__texte span { font-size: var(--vl-taille-petit); opacity: 0.85; }
.vl-choix__bouton .vl-icone { margin-left: auto; }
.vl-contact__grille { display: grid; gap: var(--vl-esp-8); align-items: start; }
.vl-contact__infos { display: grid; gap: var(--vl-esp-4); }
.vl-contact__info { display: flex; gap: var(--vl-esp-4); align-items: flex-start; }
.vl-contact__info h3 { font-size: 1rem; margin-bottom: 2px; }
.vl-contact__info p { color: var(--vl-gris); font-size: var(--vl-taille-petit); }

/* 7. FAQ ---------------------------------------------------------------- */
.vl-faq__liste { display: grid; gap: var(--vl-esp-3); }
.vl-faq__item { background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg); transition: border-color var(--vl-transition); }
.vl-faq__item[open] { border-color: var(--vl-nuit); }
.vl-faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--vl-esp-4);
  padding: var(--vl-esp-5) var(--vl-esp-6); font-family: var(--vl-police-titre); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1.35;
  border-radius: var(--vl-rayon-lg);
}
.vl-faq__item summary::-webkit-details-marker { display: none; }
.vl-faq__item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--vl-rayon-rond);
  background: var(--vl-bleu-voile); color: var(--vl-bleu-texte); font-family: var(--vl-police-texte); font-size: 1.25rem; font-weight: 500; line-height: 1;
  transition: transform var(--vl-transition);
}
.vl-faq__item[open] summary::after { content: "–"; background: var(--vl-encre); color: var(--vl-blanc); }
.vl-faq__item summary:hover { background: var(--vl-nuit-voile); }
.vl-faq__reponse { padding: 0 var(--vl-esp-6) var(--vl-esp-6); color: var(--vl-gris); max-width: 62em; }
.vl-faq__groupe + .vl-faq__groupe { margin-top: var(--vl-esp-10); }
.vl-faq__groupe > h3 { margin-bottom: var(--vl-esp-4); font-size: 1.125rem; }

/* 8. Formulaires --------------------------------------------------------- */
.vl-formulaire { display: grid; gap: var(--vl-esp-5); padding: var(--vl-esp-8) var(--vl-esp-6); }
.vl-champ { display: grid; gap: var(--vl-esp-2); }
.vl-champ label, .vl-champ legend { font-weight: 500; font-size: var(--vl-taille-petit); }
.vl-champ .vl-obligatoire { color: #B91C1C; }
.vl-champ input, .vl-champ select, .vl-champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--vl-nuit); background: var(--vl-surface);
  padding: 11px 14px; min-height: 48px; border: 1px solid #8A8A93; border-radius: var(--vl-rayon-sm);
  transition: border-color var(--vl-transition), box-shadow var(--vl-transition);
}
.vl-champ textarea { min-height: 140px; resize: vertical; }
.vl-champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1A3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.vl-champ input::placeholder, .vl-champ textarea::placeholder { color: #767676; }
.vl-champ input:focus, .vl-champ select:focus, .vl-champ textarea:focus { outline: none; border-color: var(--vl-bleu); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35); }
.vl-champ input:user-invalid, .vl-champ select:user-invalid, .vl-champ textarea:user-invalid { border-color: #B91C1C; }
.vl-champ__aide { font-size: var(--vl-taille-legende); color: var(--vl-gris); }
.vl-champs-duo { display: grid; gap: var(--vl-esp-5); }
.vl-case { display: grid; grid-template-columns: 24px 1fr; gap: var(--vl-esp-3); align-items: start; font-size: var(--vl-taille-petit); color: var(--vl-gris); }
.vl-case input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--vl-bleu); }
.vl-formulaire__note { font-size: var(--vl-taille-legende); color: var(--vl-gris); }

/* =========================================================================
   9. MAQUETTES — téléphone, navigateur/article, dictée, posts
   Bloc autonome : à coller dans un widget HTML d'Elementor avec le balisage
   correspondant (classes .vl-mq-…). Utilise les variables de la section 2.
   ========================================================================= */

/* 9.1 Téléphone */
.vl-mq-telephone {
  width: 300px; max-width: 100%; aspect-ratio: 300 / 610; flex: none;
  background: var(--vl-encre); border-radius: 44px; padding: 10px;
  box-shadow: var(--vl-ombre-maquette);
}
.vl-mq-telephone__ecran {
  position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: var(--vl-fond);
  display: flex; flex-direction: column; font-size: 12px; line-height: 1.4;
}
.vl-mq-telephone__barre { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 6px; font-weight: 700; font-size: 11px; }
.vl-mq-telephone__encoche { position: absolute; top: 9px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: var(--vl-rayon-rond); background: var(--vl-encre); }
.vl-mq-telephone__barre-icones { display: flex; gap: 4px; align-items: center; }
.vl-mq-telephone__barre-icones i { display: block; width: 14px; height: 8px; border-radius: 2px; background: var(--vl-encre); }
.vl-mq-telephone__barre-icones i:first-child { width: 10px; opacity: 0.5; }
.vl-mq-app__entete { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px; }
.vl-mq-app__projet { display: block; font-family: var(--vl-police-titre); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
.vl-mq-app__sous { color: var(--vl-gris); font-size: 10.5px; }
.vl-mq-app__avatar { width: 30px; height: 30px; border-radius: var(--vl-rayon-rond); background: var(--vl-bleu); display: grid; place-items: center; }
.vl-mq-app__avatar svg { width: 16px; height: 16px; color: var(--vl-blanc); }
.vl-mq-app__notes { display: grid; gap: 8px; padding: 0 12px; }
.vl-mq-note { background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: 12px; padding: 9px 11px; }
.vl-mq-note__date { display: flex; align-items: center; gap: 6px; font-family: var(--vl-police-accent); font-size: 9.5px; color: var(--vl-bleu-texte); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.vl-mq-note__date::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vl-cyan); }
.vl-mq-note p { color: var(--vl-nuit); font-size: 11.5px; }
.vl-mq-app__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px 0; }
.vl-mq-photo {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: var(--vl-bleu-voile-fort); color: var(--vl-bleu-texte);
}
.vl-mq-photo svg { width: 22px; height: 22px; }
.vl-mq-photo span { position: absolute; left: 5px; bottom: 5px; font-size: 8.5px; font-weight: 700; background: var(--vl-surface); color: var(--vl-nuit); padding: 1px 5px; border-radius: 4px; }
.vl-mq-photo--2 { background: rgba(11, 26, 58, 0.08); color: var(--vl-nuit); }
.vl-mq-photo--3 { background: var(--vl-cyan-voile); color: var(--vl-nuit); }
.vl-mq-app__dictee { margin: auto 12px 12px; background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: 18px; padding: 12px; display: grid; gap: 10px; }
.vl-mq-app__dictee-ligne { display: flex; align-items: center; gap: 10px; }
.vl-mq-micro {
  width: 52px; height: 52px; flex: none; border-radius: var(--vl-rayon-rond); background: var(--vl-bleu); color: var(--vl-blanc);
  display: grid; place-items: center; box-shadow: 0 0 0 6px var(--vl-bleu-voile);
}
.vl-mq-micro svg { width: 24px; height: 24px; }
.vl-mq-onde { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; }
.vl-mq-onde i { display: block; flex: 1; border-radius: 2px; background: var(--vl-cyan); }
.vl-mq-onde i:nth-child(odd) { opacity: 0.55; }
.vl-mq-app__chrono { font-family: var(--vl-police-accent); font-size: 11px; color: var(--vl-gris); }
.vl-mq-app__generer { display: block; text-align: center; background: var(--vl-encre); color: var(--vl-blanc); border-radius: 10px; padding: 9px; font-weight: 700; font-size: 12px; }

/* 9.1 bis Téléphone avec une vraie capture d'écran de l'appli */
.vl-mq-telephone--capture .vl-mq-telephone__ecran { background: #1F2229; }
.vl-mq-telephone--capture .vl-mq-telephone__barre { color: var(--vl-blanc); flex: none; }
.vl-mq-telephone--capture .vl-mq-telephone__barre-icones i { background: var(--vl-surface); }
.vl-mq-telephone__capture { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top center; background: #1F2229; }

/* 9.1 ter Petits téléphones de la galerie des ambiances */
.vl-mq-telephone--mini {
  width: 100%; max-width: 210px; aspect-ratio: auto; margin-inline: auto; padding: 6px;
  border-radius: 30px; background: #03060D; border: 1px solid rgba(255, 255, 255, 0.16);
}
.vl-mq-telephone--mini img { display: block; width: 100%; height: auto; border-radius: 24px; background: #1F2229; }

/* 9.2 Dictée brute (transcription) */
.vl-mq-dictee { background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg); padding: var(--vl-esp-6); position: relative; }
.vl-mq-dictee__tete { display: flex; align-items: center; gap: var(--vl-esp-3); margin-bottom: var(--vl-esp-4); padding-bottom: var(--vl-esp-4); border-bottom: 1px dashed var(--vl-bordure); }
.vl-mq-dictee__tete .vl-mq-micro { width: 40px; height: 40px; box-shadow: none; }
.vl-mq-dictee__tete .vl-mq-micro svg { width: 18px; height: 18px; }
.vl-mq-dictee__tete strong { display: block; font-size: var(--vl-taille-petit); }
.vl-mq-dictee__tete div span { font-family: var(--vl-police-accent); font-size: 11px; color: var(--vl-gris); }
.vl-mq-dictee__texte { font-family: var(--vl-police-accent); font-size: 0.875rem; line-height: 1.75; color: var(--vl-nuit); font-weight: 500; }
.vl-mq-dictee__texte p + p { margin-top: var(--vl-esp-3); }
.vl-mq-dictee__photos { display: flex; gap: var(--vl-esp-2); margin-top: var(--vl-esp-4); }
.vl-mq-dictee__photos .vl-mq-photo { width: 64px; }

/* 9.3 Navigateur + article */
.vl-mq-navigateur { background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg); overflow: hidden; }
.vl-mq-navigateur__barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--vl-fond); border-bottom: 1px solid var(--vl-bordure); }
.vl-mq-navigateur__barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--vl-bordure); }
.vl-mq-navigateur__adresse { margin-left: 8px; flex: 1; min-width: 0; font-family: var(--vl-police-accent); font-size: 11px; color: var(--vl-gris); background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-rond); padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-mq-article { padding: var(--vl-esp-6); font-size: 0.9375rem; }
.vl-mq-article__fil { font-size: 11px; color: var(--vl-gris); margin-bottom: var(--vl-esp-2); }
.vl-mq-article__titre { font-family: var(--vl-police-titre); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: var(--vl-esp-3); }
.vl-mq-article__meta { font-size: 11.5px; color: var(--vl-gris); margin-bottom: var(--vl-esp-4); }
.vl-mq-article__visuel { aspect-ratio: 16 / 7; border-radius: var(--vl-rayon-md); background: var(--vl-bleu-voile-fort); display: grid; place-items: center; color: var(--vl-bleu-texte); margin-bottom: var(--vl-esp-2); }
.vl-mq-article__legende { font-size: 11px; color: var(--vl-gris); font-style: italic; margin-bottom: var(--vl-esp-4); }
.vl-mq-article__intertitre { font-family: var(--vl-police-titre); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; margin: var(--vl-esp-4) 0 var(--vl-esp-2); }
.vl-mq-article p { color: #333333; line-height: 1.65; }
.vl-mq-article p strong { color: var(--vl-nuit); }
.vl-mq-article__faq { margin-top: var(--vl-esp-4); border-top: 1px solid var(--vl-bordure); padding-top: var(--vl-esp-3); }
.vl-mq-article__faq dt { font-weight: 700; font-size: 0.875rem; margin-top: var(--vl-esp-3); }
.vl-mq-article__faq dd { margin: 2px 0 0; color: var(--vl-gris); font-size: 0.875rem; }
.vl-mq-article__cta { margin-top: var(--vl-esp-4); display: flex; gap: var(--vl-esp-2); flex-wrap: wrap; }
.vl-mq-article__cta span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--vl-rayon-sm); background: var(--vl-encre); color: var(--vl-blanc); font-size: 12px; font-weight: 700; }
.vl-mq-article__cta span + span { background: transparent; color: var(--vl-nuit); border: 1px solid var(--vl-nuit); }
.vl-mq-article__cta svg { width: 14px; height: 14px; }
.vl-mq-article__google { margin-top: var(--vl-esp-4); padding: var(--vl-esp-3) var(--vl-esp-4); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-md); background: var(--vl-fond); font-size: 12px; }
.vl-mq-article__google b { display: block; color: #1A0DAB; font-weight: 500; font-size: 14px; }
.vl-mq-article__google i { display: block; font-style: normal; color: var(--vl-nuit); font-size: 11.5px; }
.vl-mq-article__google span { color: #4D5156; }

/* Annotations (repères numérotés posés sur l'article) */
.vl-mq-annote { position: relative; }
.vl-mq-annote > .vl-repere { position: absolute; left: -38px; top: 0; }
.vl-mq-article--annote { padding-left: 52px; }

/* 9.4 Visuels de posts (carrés aux couleurs de l'entreprise) */
.vl-mq-post {
  --vl-post-couleur: var(--vl-bleu);
  position: relative; aspect-ratio: 1; border-radius: var(--vl-rayon-lg); overflow: hidden; color: var(--vl-blanc);
  background: var(--vl-post-couleur); display: flex; flex-direction: column; padding: 8%; font-size: clamp(10px, 2.6cqi, 15px);
  container-type: inline-size; isolation: isolate;
}
.vl-mq-post__marque { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 6cqi; font-weight: 700; letter-spacing: 0.02em; }
.vl-mq-post__marque i { width: 7cqi; height: 7cqi; border-radius: 50%; background: currentColor; opacity: 0.9; flex: none; }
.vl-mq-post__etiquette { align-self: flex-start; font-family: var(--vl-police-accent); font-size: 5.2cqi; text-transform: uppercase; letter-spacing: 0.06em; padding: 1.5cqi 3cqi; border-radius: 1.5cqi; background: rgba(0, 0, 0, 0.28); }
.vl-mq-post__titre { font-family: var(--vl-police-titre); font-weight: 700; font-size: 10.5cqi; line-height: 1.05; letter-spacing: -0.02em; margin-top: 5cqi; }
.vl-mq-post__texte { font-size: 6cqi; line-height: 1.35; margin-top: 3cqi; opacity: 0.92; }

/* Angle 1 : avant / après */
.vl-mq-post--avant-apres { padding: 0; }
.vl-mq-post--avant-apres .vl-mq-post__moities { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.vl-mq-post--avant-apres .vl-mq-post__moitie { position: relative; display: grid; place-items: center; }
.vl-mq-post--avant-apres .vl-mq-post__moitie:first-child { background: rgba(10, 10, 10, 0.35); }
.vl-mq-post--avant-apres .vl-mq-post__moitie svg { width: 22cqi; height: 22cqi; opacity: 0.9; }
.vl-mq-post--avant-apres .vl-mq-post__moitie span { position: absolute; top: 6cqi; left: 6cqi; font-family: var(--vl-police-accent); font-size: 5.5cqi; font-weight: 500; letter-spacing: 0.08em; background: var(--vl-surface); color: var(--vl-nuit); padding: 1cqi 2.5cqi; border-radius: 1.5cqi; }
.vl-mq-post--avant-apres .vl-mq-post__bas { padding: 5cqi 7cqi; background: var(--vl-encre); }
.vl-mq-post--avant-apres .vl-mq-post__titre { margin: 0; font-size: 8cqi; }
.vl-mq-post--avant-apres .vl-mq-post__marque { margin-top: 2cqi; color: var(--vl-gris-sombre); }

/* Angle 2 : conseil d'expert */
.vl-mq-post--conseil { background: var(--vl-surface); color: var(--vl-nuit); border: 1px solid var(--vl-bordure); }
.vl-mq-post--conseil::before { content: "“"; position: absolute; right: 4cqi; top: -8cqi; font-family: var(--vl-police-titre); font-size: 60cqi; font-weight: 700; line-height: 1; color: var(--vl-post-couleur); opacity: 0.14; z-index: -1; }
.vl-mq-post--conseil .vl-mq-post__etiquette { background: var(--vl-post-couleur); color: var(--vl-blanc); }
.vl-mq-post--conseil .vl-mq-post__marque { color: var(--vl-post-couleur); }

/* Angle 3 : coulisses et savoir-faire */
.vl-mq-post--coulisses { background-color: var(--vl-encre); background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px); background-size: 6cqi 6cqi; }
.vl-mq-post--coulisses .vl-mq-post__outil { width: 26cqi; height: 26cqi; border-radius: 50%; background: var(--vl-post-couleur); display: grid; place-items: center; margin-top: 6cqi; }
.vl-mq-post--coulisses .vl-mq-post__outil svg { width: 13cqi; height: 13cqi; }

/* Angle 4 : la question du client */
.vl-mq-post--question .vl-mq-post__bulle { margin-top: 5cqi; background: var(--vl-surface); color: var(--vl-nuit); border-radius: 5cqi 5cqi 5cqi 1cqi; padding: 4cqi 5cqi; font-family: var(--vl-police-titre); font-weight: 700; font-size: 7.5cqi; line-height: 1.15; letter-spacing: -0.02em; }
.vl-mq-post--question .vl-mq-post__reponse { margin-top: 3cqi; align-self: flex-end; max-width: 85%; background: rgba(255, 255, 255, 0.16); border-radius: 5cqi 5cqi 1cqi 5cqi; padding: 3cqi 4cqi; font-size: 5.8cqi; line-height: 1.3; }

/* Variantes de couleur d'entreprise (l'appli reprend les couleurs du client) */
.vl-mq-post--couleur-1 { --vl-post-couleur: var(--vl-bleu); }
.vl-mq-post--couleur-2 { --vl-post-couleur: #9A3412; } /* brique : restaurant (7,3:1 avec le blanc) */
.vl-mq-post--couleur-3 { --vl-post-couleur: #155E4B; } /* vert sapin : immobilier (7,6:1 avec le blanc) */

/* 9.5 Post Instagram (cadre d'appli) */
.vl-mq-insta { background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-lg); overflow: hidden; max-width: 380px; }
.vl-mq-insta__tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; }
.vl-mq-insta__tete i { width: 30px; height: 30px; border-radius: 50%; background: var(--vl-bleu); flex: none; }
.vl-mq-insta__tete strong { display: block; font-size: 13px; line-height: 1.2; }
.vl-mq-insta__tete span { font-size: 11px; color: var(--vl-gris); }
.vl-mq-insta .vl-mq-post { border-radius: 0; }
.vl-mq-insta__actions { display: flex; gap: 12px; padding: 10px 12px 4px; color: var(--vl-nuit); }
.vl-mq-insta__actions svg { width: 22px; height: 22px; }
.vl-mq-insta__legende { padding: 4px 12px 14px; font-size: 13px; line-height: 1.5; }
.vl-mq-insta__legende span { color: var(--vl-bleu-texte); }
.vl-mq-insta__programme { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--vl-bordure); background: var(--vl-fond); font-family: var(--vl-police-accent); font-size: 11px; color: var(--vl-gris); }
.vl-mq-insta__programme svg { width: 14px; height: 14px; color: var(--vl-bleu-texte); }

/* 9.6 Calendrier de programmation (30 jours) */
.vl-mq-calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vl-mq-calendrier span { aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; font-family: var(--vl-police-accent); font-size: 10px; color: #8C96AD; }
.vl-mq-calendrier .vl-mq-calendrier__post { background: var(--vl-cyan); color: var(--vl-blanc); font-weight: 500; }
.vl-mq-calendrier .vl-mq-calendrier__article { background: var(--vl-cyan); color: var(--vl-nuit); font-weight: 500; }
/* ===================== fin du bloc MAQUETTES ============================ */

/* 10. Pages légales ------------------------------------------------------ */
.vl-legal { padding-block: var(--vl-esp-12) var(--vl-section); }
.vl-legal__grille { display: grid; gap: var(--vl-esp-8); align-items: start; }
.vl-legal__sommaire { padding: var(--vl-esp-5); font-size: var(--vl-taille-petit); }
.vl-legal__sommaire h2 { font-size: 1rem; margin-bottom: var(--vl-esp-3); }
.vl-legal__sommaire ol { padding-left: var(--vl-esp-5); display: grid; gap: var(--vl-esp-2); }
.vl-legal__contenu { display: grid; gap: var(--vl-esp-8); max-width: 760px; }
.vl-legal__contenu section { scroll-margin-top: 88px; }
.vl-legal__contenu h2 { font-size: 1.5rem; margin-bottom: var(--vl-esp-4); }
.vl-legal__champs { display: grid; gap: var(--vl-esp-2); margin: 0; }
.vl-legal__champs div { display: grid; gap: 2px; padding: var(--vl-esp-3) 0; border-bottom: 1px solid var(--vl-bordure); }
.vl-legal__champs dt { font-weight: 500; font-size: var(--vl-taille-petit); }
.vl-legal__champs dd { margin: 0; }
.vl-a-completer {
  display: inline-block; font-family: var(--vl-police-accent); font-size: 0.8125rem; font-weight: 500;
  color: #8A4B00; background: #FFF4E0; border: 1px dashed #D08A2E; border-radius: var(--vl-rayon-xs); padding: 1px 8px;
}
.vl-legal__avis { padding: var(--vl-esp-4); border-radius: var(--vl-rayon-md); background: #FFF4E0; border: 1px solid #F1C98A; font-size: var(--vl-taille-petit); color: #5C3400; }

/* 11. Pied de page ------------------------------------------------------- */
.vl-pied { background: var(--vl-encre); color: #D3D9E6; padding-block: var(--vl-esp-16) var(--vl-esp-8); font-size: var(--vl-taille-petit); }
.vl-pied a { color: #E8E8EC; text-decoration: none; }
.vl-pied a:hover { color: var(--vl-blanc); text-decoration: underline; }
.vl-pied__grille { display: grid; gap: var(--vl-esp-10); }
.vl-pied__marque img { width: 170px; background: none; margin-bottom: var(--vl-esp-4); }
.vl-pied__slogan { font-family: var(--vl-police-titre); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--vl-blanc); line-height: 1.15; margin-bottom: var(--vl-esp-3); }
.vl-pied__titre { font-family: var(--vl-police-accent); font-size: var(--vl-taille-accent); text-transform: uppercase; letter-spacing: 0.08em; color: #9AA4BB; font-weight: 500; margin-bottom: var(--vl-esp-4); }
.vl-pied__liens { list-style: none; display: grid; gap: var(--vl-esp-3); }
.vl-pied__reseaux { list-style: none; display: flex; gap: var(--vl-esp-2); margin-top: var(--vl-esp-5); }
.vl-pied__reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--vl-rayon-sm); border: 1px solid rgba(255, 255, 255, 0.24); }
.vl-pied__reseaux a:hover { background: var(--vl-surface); color: var(--vl-nuit); }
.vl-pied__reseaux .vl-icone { width: 20px; height: 20px; }
.vl-pied__bas { margin-top: var(--vl-esp-12); padding-top: var(--vl-esp-6); border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; gap: var(--vl-esp-4); justify-content: space-between; color: #9AA4BB; }
.vl-pied__bas ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--vl-esp-5); }
.vl-pied :focus-visible { outline-color: var(--vl-cyan); }
.vl-pied a.vl-bouton--blanc { color: var(--vl-nuit); }
.vl-pied a.vl-bouton--blanc:hover { color: var(--vl-nuit); background: var(--vl-cyan); text-decoration: none; }

/* 12. Points de rupture -------------------------------------------------- */
@media (min-width: 40rem) { /* 640px */
  .vl-reseaux__liste { grid-template-columns: repeat(3, 1fr); }
  .vl-champs-duo { grid-template-columns: 1fr 1fr; }
  .vl-posts-rangee { grid-template-columns: repeat(4, 1fr); }
  .vl-inclus__liste { grid-template-columns: 1fr 1fr; }
  .vl-metiers__grille { grid-template-columns: 1fr 1fr; }
  .vl-metier { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .vl-metier .vl-metier__exemple { margin-top: 0; align-content: start; }
  .vl-blog__grille { grid-template-columns: 1fr 1fr; }
  .vl-angles__grille { grid-template-columns: 1fr 1fr; }
  .vl-atouts { grid-template-columns: 1fr 1fr; }
  .vl-choix { grid-template-columns: 1fr 1fr; }
  .vl-pied__grille { grid-template-columns: 1fr 1fr; }
  .vl-bandeau__boite { padding: var(--vl-esp-16) var(--vl-esp-12); }
}

@media (min-width: 48rem) { /* 768px */
  :root { --vl-section: var(--vl-esp-20); }
  .vl-etapes__grille { grid-template-columns: repeat(3, 1fr); }
  .vl-apercu-tarifs { grid-template-columns: repeat(2, 1fr); }
  .vl-offres { grid-template-columns: repeat(2, 1fr); }
  .vl-offre { display: grid; grid-row: span 7; grid-template-rows: subgrid; gap: var(--vl-esp-4); }
  .vl-offre .vl-bouton { align-self: end; }
  .vl-etapes-agence { grid-template-columns: repeat(3, 1fr); }
  .vl-chronologie__liste::before { left: 50%; margin-left: -1px; }
  .vl-jalon { grid-template-columns: 1fr 48px 1fr; gap: var(--vl-esp-6); }
  .vl-jalon__point { grid-column: 2; grid-row: 1; }
  .vl-jalon__contenu { grid-column: 3; grid-row: 1; }
  .vl-jalon--gauche .vl-jalon__contenu { grid-column: 1; text-align: right; }
}

@media (min-width: 64rem) { /* 1024px */
  :root { --vl-section: var(--vl-esp-24); }
  .vl-nav { display: block; }
  .vl-entete__action { display: inline-flex; }
  .vl-menu-mobile { display: none; }
  .vl-hero { padding-block: var(--vl-esp-16) var(--vl-esp-20); }
  .vl-hero__grille { grid-template-columns: 1.15fr 1fr; gap: var(--vl-esp-16); }
  .vl-hero__visuel { justify-content: flex-end; padding-right: var(--vl-esp-10); }
  .vl-hero__etiquette { display: flex; }
  .vl-page-entete { padding-block: var(--vl-esp-20) var(--vl-esp-16); }
  .vl-page-entete__grille { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .vl-avant-apres__grille { grid-template-columns: 1fr 64px 1.2fr; }
  .vl-avant-apres__fleche { transform: none; margin-top: 140px; }
  .vl-avant-apres__resultats { grid-template-columns: 1fr 1fr; align-items: start; }
  .vl-reseaux__liste { grid-template-columns: repeat(5, 1fr); }
  .vl-ambiances__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vl-esp-12) var(--vl-esp-8); overflow: visible; margin-inline: 0; padding: 0; }
  .vl-ambiances__grille > li { max-width: none; }
  .vl-ambiances__glisser { display: none; }
  .vl-ambiances__note { text-align: center; margin-inline: auto; margin-top: var(--vl-esp-12); }
  .vl-cout { grid-template-columns: 1fr 1.2fr; gap: var(--vl-esp-16); }
  .vl-anatomie { grid-template-columns: 1.3fr 1fr; gap: var(--vl-esp-16); }
  .vl-anatomie__aside { position: sticky; top: 96px; }
  .vl-angles__grille { grid-template-columns: repeat(4, 1fr); }
  .vl-atouts { grid-template-columns: repeat(3, 1fr); }
  .vl-metiers__grille { grid-template-columns: repeat(3, 1fr); }
  .vl-encart { grid-template-columns: 1fr 1.2fr; padding: var(--vl-esp-12); gap: var(--vl-esp-12); }
  .vl-exemple__grille { grid-template-columns: 1fr 1.25fr; gap: var(--vl-esp-10); }
  .vl-offres { grid-template-columns: repeat(4, 1fr); gap: var(--vl-esp-4); }
  .vl-apercu-tarifs { grid-template-columns: repeat(4, 1fr); }
  .vl-offre { padding: var(--vl-esp-8) var(--vl-esp-5); }
  .vl-offre--phare { box-shadow: 0 18px 40px -18px rgba(11, 26, 58, 0.45); }
  .vl-inclus { grid-template-columns: 1fr 1.4fr; gap: var(--vl-esp-16); }
  .vl-mise-en-route { grid-template-columns: 1fr 1.3fr; gap: var(--vl-esp-16); }
  .vl-agences__duo { grid-template-columns: 1.1fr 1fr; }
  .vl-vs { grid-template-columns: 1.35fr 1fr 1fr; }
  .vl-vs__col + .vl-vs__col { margin-top: 0; }
  .vl-vs__verdict { grid-template-columns: 1.5fr 1fr; padding: var(--vl-esp-10) var(--vl-esp-12); }
  .vl-blog__grille { grid-template-columns: repeat(3, 1fr); }
  .vl-billet--une { grid-column: span 2; flex-direction: row; }
  .vl-billet--une .vl-billet__image { width: 55%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--vl-bordure); }
  .vl-billet--une h2 { font-size: 1.75rem; }
  .vl-blog__inscription { grid-template-columns: 1.2fr 1fr; }
  .vl-contact__grille { grid-template-columns: 1fr 1.6fr; gap: var(--vl-esp-12); }
  .vl-suite__boite { grid-template-columns: 1.3fr 1fr; padding: var(--vl-esp-12); gap: var(--vl-esp-12); }
  .vl-legal__grille { grid-template-columns: 260px 1fr; gap: var(--vl-esp-16); }
  .vl-legal__sommaire { position: sticky; top: 96px; }
  .vl-pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}
.vl-page-entete__texte { display: grid; gap: var(--vl-esp-5); max-width: 36em; }
.vl-page-entete__points { font-size: 1rem; line-height: 1.55; color: var(--vl-gris); }
.vl-page-entete__points strong { color: var(--vl-nuit); }

/* Hero : les ambiances de l'appli défilent toutes les 5 secondes (CSS seul) */
.vl-defile { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--vl-esp-3); }
.vl-defile__images { position: relative; flex: 1; min-height: 0; }
.vl-defile__images img { position: absolute; inset: 0; width: 100%; height: 100%; animation: vl-defile 40s linear infinite; animation-delay: calc(var(--i) * 5s - 40s); }
@keyframes vl-defile { 0%, 12.5% { opacity: 1; } 15%, 97.5% { opacity: 0; } 100% { opacity: 1; } }
.vl-defile__pause { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vl-defile__bouton { cursor: pointer; font-size: var(--vl-taille-legende); color: var(--vl-gris); padding: 4px 12px; border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-rond); background: var(--vl-surface); }
.vl-defile__bouton:hover { color: var(--vl-nuit); border-color: var(--vl-gris-sombre); }
.vl-defile__pause:focus-visible ~ .vl-defile__bouton { outline: 3px solid var(--vl-bleu); outline-offset: 2px; }
.vl-defile__txt-lecture, .vl-defile__pause:checked ~ .vl-defile__bouton .vl-defile__txt-pause { display: none; }
.vl-defile__pause:checked ~ .vl-defile__bouton .vl-defile__txt-lecture { display: inline; }
.vl-defile__pause:checked ~ .vl-mq-telephone img, .vl-defile .vl-mq-telephone:hover img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .vl-defile__images img { animation: none; opacity: 0; }
  .vl-defile__images img:first-child { opacity: 1; }
  .vl-defile__bouton { display: none; }
}

/* Avant / après : vraie dictée, article généré et page en ligne, à faire défiler */
.vl-mq-telephone--reel { margin-inline: auto; }
.vl-apercu-defilant { margin: 0; display: grid; gap: var(--vl-esp-3); align-content: start; }
.vl-apercu-defilant figcaption strong { display: block; font-size: 1rem; color: var(--vl-nuit); }
.vl-apercu-defilant figcaption span { font-size: var(--vl-taille-petit); color: var(--vl-gris); }
.vl-apercu-defilant__cadre { display: block; width: 100%; height: min(600px, 75vh); overflow-y: auto; overscroll-behavior: contain; border: 0; background: var(--vl-surface); }
.vl-apercu-defilant__cadre--sombre { background: #101115; border-radius: var(--vl-rayon-lg); box-shadow: var(--vl-ombre-maquette); scrollbar-color: #4A5060 #101115; }
.vl-apercu-defilant__cadre--sombre:focus-visible { outline: 3px solid var(--vl-bleu); outline-offset: 3px; }
.vl-apercu-defilant__cadre img { display: block; width: 100%; height: auto; }
.vl-apercu-defilant__navigateur { box-shadow: var(--vl-ombre-maquette); }
.vl-apercu-defilant__navigateur .vl-apercu-defilant__cadre { height: calc(min(600px, 75vh) - 44px); }
.vl-apercu-defilant__lien { display: inline-flex; align-items: center; gap: 6px; font-size: var(--vl-taille-petit); font-weight: 600; }
.vl-apercu-defilant__lien .vl-icone { width: 16px; height: 16px; }
.vl-apercu-defilant__capture { display: block; width: 100%; height: auto; }
.vl-etape h3 { flex-wrap: wrap; row-gap: var(--vl-esp-1); }
.vl-etape__sous { flex-basis: 100%; font-family: var(--vl-police-texte, inherit); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--vl-bleu-texte); }
.vl-reseaux__note { display: grid; gap: var(--vl-esp-2); }
.vl-reseaux__note p:first-child { font-size: 1rem; color: var(--vl-nuit); }
.vl-reseaux__technique { padding-left: var(--vl-esp-3); border-left: 2px solid var(--vl-bordure); }
.vl-avant-apres__colonne > .vl-apercu-defilant figcaption { margin-bottom: var(--vl-esp-1); }

/* Page métiers : mise en situation, du vocal à l'article */
.vl-metier__exemple { display: grid; gap: var(--vl-esp-3); }
.vl-metier__etape { display: flex; align-items: center; gap: var(--vl-esp-2); font-family: var(--vl-police-accent); font-size: var(--vl-taille-legende); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vl-bleu-texte); }
.vl-metier__etape .vl-icone { width: 16px; height: 16px; flex: none; }
.vl-metier__vocal { margin: 0; padding: var(--vl-esp-3) var(--vl-esp-4); border-radius: 14px 14px 14px 4px; background: var(--vl-bleu-voile); color: var(--vl-nuit); font-size: var(--vl-taille-petit); font-style: italic; line-height: 1.5; }
.vl-metier__article { padding: var(--vl-esp-3) var(--vl-esp-4); border-radius: var(--vl-rayon-sm); background: var(--vl-surface); border: 1px solid var(--vl-bordure); border-left: 3px solid var(--vl-bleu); display: grid; gap: var(--vl-esp-2); }
.vl-metier__article .vl-metier__titre { font-size: 1rem; color: var(--vl-nuit); }
.vl-metier__intro { font-size: var(--vl-taille-petit); color: var(--vl-gris); line-height: 1.5; }
.vl-metier--large .vl-metier__etape { color: var(--vl-cyan); }
.vl-metier--large .vl-metier__vocal { background: rgba(255, 255, 255, 0.1); color: var(--vl-blanc); }
.vl-metier__intro strong { color: var(--vl-nuit); }
.vl-appel-bloc { margin-top: var(--vl-esp-8); }
.vl-appel-bloc--centre { margin-top: var(--vl-esp-12); display: flex; justify-content: center; }
.vl-appel-bloc--centre .vl-appel { align-items: center; text-align: center; }

/* Avant / après : les 3 étapes, du vocal à la page en ligne */
.vl-flux { --vl-flux-h: 520px; display: grid; gap: var(--vl-esp-6); margin-top: var(--vl-esp-12); }
.vl-flux__etape { margin: 0; display: grid; gap: var(--vl-esp-4); align-content: start; min-width: 0; }
.vl-flux__tete { display: flex; gap: var(--vl-esp-3); align-items: flex-start; }
.vl-flux__num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--vl-bleu); color: var(--vl-blanc); font-family: var(--vl-police-titre); font-weight: 700; font-size: 0.9375rem; }
.vl-flux__quand { font-family: var(--vl-police-accent); font-size: var(--vl-taille-legende); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vl-bleu-texte); margin-bottom: 2px; }
.vl-flux__tete h3 { font-size: 1.125rem; line-height: 1.3; }
.vl-flux__sous { font-size: var(--vl-taille-petit); color: var(--vl-gris); margin-top: 2px; }
.vl-flux__visuel { height: var(--vl-flux-h); border-radius: var(--vl-rayon-lg); box-shadow: var(--vl-ombre-maquette); }
.vl-flux__visuel--tel { box-shadow: none; display: flex; justify-content: center; }
.vl-flux__visuel--tel .vl-mq-telephone { height: 100%; width: auto; max-width: none; margin: 0; }
.vl-flux__cadre { overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #4A5060 #101115; }
.vl-flux__cadre--sombre { background: #101115; }
.vl-flux__cadre img { display: block; width: 100%; height: auto; }
.vl-flux__cadre:focus-visible { outline: 3px solid var(--vl-bleu); outline-offset: 3px; }
.vl-flux__navigateur { display: flex; flex-direction: column; overflow: hidden; }
.vl-flux__navigateur img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top center; }
.vl-flux__pied { min-height: 1.5em; font-size: var(--vl-taille-petit); color: var(--vl-gris); display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.vl-flux__pied a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vl-flux__pied .vl-icone { width: 16px; height: 16px; }
.vl-flux__glisser { transform: rotate(90deg); }
.vl-flux__fleche { display: grid; place-items: center; }
.vl-flux__fleche .vl-icone { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--vl-bleu); color: var(--vl-blanc); transform: rotate(90deg); }
@media (min-width: 64rem) {
  .vl-flux { --vl-flux-h: 560px; grid-template-columns: 1fr 44px 1fr 44px 1fr; grid-template-rows: auto auto auto; column-gap: var(--vl-esp-5); row-gap: var(--vl-esp-4); }
  .vl-flux__etape { grid-row: 1 / span 3; grid-template-rows: subgrid; gap: var(--vl-esp-4); }
  .vl-flux > :nth-child(1) { grid-column: 1; }
  .vl-flux > :nth-child(2) { grid-column: 2; }
  .vl-flux > :nth-child(3) { grid-column: 3; }
  .vl-flux > :nth-child(4) { grid-column: 4; }
  .vl-flux > :nth-child(5) { grid-column: 5; }
  .vl-flux__fleche { grid-row: 2; }
  .vl-flux__fleche .vl-icone { transform: none; }
}
.vl-flux__defile { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: #101115; scrollbar-width: thin; scrollbar-color: #4A5060 #101115; }
.vl-flux__defile img { display: block; width: 100%; height: auto; }
.vl-flux__defile:focus-visible { outline: 3px solid var(--vl-cyan); outline-offset: -3px; }
@media (max-width: 63.99rem) {
  .vl-flux { display: flex; gap: var(--vl-esp-5); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--vl-gouttiere, 16px)); padding: 4px var(--vl-gouttiere, 16px) var(--vl-esp-4); scroll-padding-inline: var(--vl-gouttiere, 16px); }
  .vl-flux__etape { flex: 0 0 min(300px, 82%); scroll-snap-align: start; grid-template-rows: auto 1fr auto; }
  .vl-flux__fleche { display: none; }
  .vl-flux:focus-visible { outline-offset: -3px; }
  .vl-flux__tete { min-height: 7.5em; }
}
.vl-flux__glisser-info { margin-top: var(--vl-esp-2); font-size: var(--vl-taille-legende); color: var(--vl-gris); display: flex; align-items: center; gap: 6px; }
@media (min-width: 64rem) { .vl-flux__glisser-info { display: none; } }

/* Motif de marque : l'onde sonore du logo, en filigrane cyan --------------- */
:root { --vl-onde: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2248%22 viewBox=%220 0 96 48%22%3E%3Cg stroke=%22%231FB6F0%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22%3E%3Cpath d=%22M4 20 V28%22/%3E%3Cpath d=%22M12 15 V33%22/%3E%3Cpath d=%22M20 9 V39%22/%3E%3Cpath d=%22M28 17 V31%22/%3E%3Cpath d=%22M36 12 V36%22/%3E%3Cpath d=%22M44 6 V42%22/%3E%3Cpath d=%22M52 14 V34%22/%3E%3Cpath d=%22M60 19 V29%22/%3E%3Cpath d=%22M68 11 V37%22/%3E%3Cpath d=%22M76 16 V32%22/%3E%3Cpath d=%22M84 8 V40%22/%3E%3Cpath d=%22M92 18 V30%22/%3E%3C/g%3E%3C/svg%3E"); }
.vl-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background: var(--vl-onde) repeat-x center / 96px 48px; opacity: 0.22;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
}
.vl-onde-separateur { height: 48px; background: var(--vl-onde) repeat-x center / 96px 48px; opacity: 0.35;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent); }
.vl-bandeau__boite { background-color: var(--vl-encre); background-image: none; isolation: isolate; }
.vl-bandeau__boite::before { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; z-index: -1; background: var(--vl-onde) repeat-x center / 96px 48px; opacity: 0.35;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%); }
.vl-bandeau .vl-bouton--blanc:hover { background: var(--vl-cyan); color: var(--vl-nuit); }
.vl-bandeau .vl-appel__mention { color: var(--vl-gris-sombre); }
.vl-mq-micro { box-shadow: 0 0 0 6px var(--vl-cyan-voile), 0 0 0 13px rgba(31, 182, 240, 0.08); }
/* Repère du logo en petite puce, devant une ville */
.vl-ville { display: inline-flex; align-items: center; gap: 4px; font-family: var(--vl-police-accent); font-size: var(--vl-taille-legende); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vl-bleu-texte); }
.vl-ville svg { width: 12px; height: 14px; flex: none; }