/* ══ LA VITRINE (14/09/2026) ═══════════════════════════════════════════
   La feuille du site public, reconstruite d'après la maquette du 14/09.
   Elle ne part QUE sur les pages en mode « site » (ls_head), après
   app.css : l'application — tableau de bord, studio, CRM — ne la voit
   jamais. C'est le seul moyen de refaire le site sans risquer un pixel
   de l'outil que les clients ont sous la main.

   ── LE NOUVEL ANGLE ────────────────────────────────────────────────────
   La vitrine parlait prix du lead ; elle parle désormais parcours :
   créer en quinze minutes, modifier en quelques clics, choisir comment
   lancer, recevoir les prospects dans son CRM. Le simulateur de prix a
   quitté la page d'accueil (il vit sur cout-prospect.php).

   ── LA DIRECTION GRAPHIQUE ─────────────────────────────────────────────
   Clair d'abord — la maquette est blanche et bleu pâle. Le sombre reste
   disponible par la bascule, avec ses propres jetons plus bas. Deux
   couleurs seulement portent le sens : le BLEU (marque, liens, boutons
   principaux) et l'ORANGE (une seule fois par écran, sur le choix
   recommandé). Le reste est du gris bleuté.

   ⚠ TOUS LES JETONS SONT PRÉFIXÉS `--v-` : app.css définit --brand,
   --ink, --muted… pour l'application, et la vitrine partage le <body>
   avec l'en-tête commun. Réutiliser les mêmes noms aurait repeint la
   barre de l'application dès qu'un client passe de la vitrine au tableau
   de bord. */

body.mode-site{
  --v-blue:#1d5cff;        /* la marque : boutons, liens, accents */
  --v-blue-2:#1548d1;      /* le même, appuyé : survol, titres colorés */
  --v-blue-soft:#e8efff;   /* fond des pastilles, des icônes */
  --v-blue-mist:#f3f7ff;   /* les bandes de section */
  --v-orange:#f26a1b;      /* UNE fois par écran : le choix recommandé */
  --v-orange-soft:#fff1e8;
  /* ⚠ LES FONDS DE BOUTON ONT LEUR PROPRE JETON. Blanc sur l'orange vif de
     la maquette : 3,06:1, sous le seuil — la maquette a ce défaut. Blanc
     sur --v-btn-orange : 4,70. L'orange vif reste pour le décor (trait,
     bordure, icône). Même logique pour le bleu : en sombre, --v-blue
     s'éclaircit pour ÉCRIRE, mais un bouton blanc sur bleu clair tombe à
     3,16 ; le bouton garde donc le bleu profond dans les deux thèmes. */
  --v-btn-bleu:#1d5cff;
  --v-btn-orange:#c94a03;
  --v-ink:#0b1633;
  --v-ink-2:#2a3552;
  --v-muted:#5b6785;
  --v-line:#dde5f3;
  --v-line-2:#eaeff8;
  --v-bg:#ffffff;
  --v-card:#ffffff;
  --v-shadow:0 10px 30px rgba(20,40,90,.08);
  --v-shadow-2:0 24px 60px rgba(20,40,90,.14);
  --v-radius:18px;
  --v-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--v-font);
  color:var(--v-ink);
  background:var(--v-bg);
}
/* ⚠ Le sombre reprend les FONDS de sombre.css (--bg, --bg-2, --surface)
   pour que la barre commune et la vitrine restent du même noir : deux
   noirs voisins se lisent comme un défaut. Les bleus restent les mêmes ;
   seuls les textes s'éclaircissent. */
body.mode-site.theme-sombre{
  --v-blue:#5b8cff;
  --v-blue-2:#8fb0ff;
  --v-blue-soft:#182552;
  --v-blue-mist:#0f1330;
  --v-orange:#ff8a4a;
  --v-orange-soft:#33200f;
  --v-btn-bleu:#1d5cff;
  --v-btn-orange:#c94a03;
  --v-ink:#f2f3ff;
  --v-ink-2:#c3c7e6;
  --v-muted:#8a90bd;
  --v-line:#282d52;
  --v-line-2:#1e2240;
  --v-bg:#0a0b16;
  --v-card:#12142a;
  --v-shadow:0 10px 30px rgba(0,0,0,.35);
  --v-shadow-2:0 24px 60px rgba(0,0,0,.5);
}

/* ── Le socle ─────────────────────────────────────────────────────────── */
body.mode-site .wrap{max-width:1180px}
body.mode-site h1,body.mode-site h2,body.mode-site h3,body.mode-site h4{
  letter-spacing:-.02em;color:var(--v-ink)}
body.mode-site a{color:var(--v-blue)}
body.mode-site .v-accent{color:var(--v-blue)}
/* Le soulignement orange de la maquette : un trait dessiné, pas une
   bordure, pour qu'il déborde légèrement du mot comme un coup de feutre. */
body.mode-site .v-trait{position:relative;display:inline-block}
body.mode-site .v-trait::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;
  height:.16em;border-radius:1em;background:var(--v-orange);opacity:.9;z-index:-1}

/* Les boutons de la vitrine : plus ronds que ceux de l'application. */
body.mode-site .btn{border-radius:999px;font-weight:700;padding:.72rem 1.25rem;
  font-size:.95rem;border-color:var(--v-line);color:var(--v-ink);background:var(--v-card)}
body.mode-site .btn:hover{background:var(--v-blue-mist);border-color:var(--v-line)}
body.mode-site .btn-primary{background:var(--v-btn-bleu);border-color:var(--v-btn-bleu);color:#fff;
  box-shadow:0 8px 20px rgba(29,92,255,.28)}
body.mode-site .btn-primary:hover{background:var(--v-blue-2);border-color:var(--v-blue-2);color:#fff}
body.mode-site .btn-orange{background:var(--v-btn-orange);border-color:var(--v-btn-orange);color:#fff;
  box-shadow:0 8px 20px rgba(242,106,27,.28)}
body.mode-site .btn-orange:hover{filter:brightness(.94);color:#fff}
body.mode-site .btn-ghost{background:transparent;border-color:transparent;color:var(--v-ink-2)}
body.mode-site .btn-ghost:hover{background:var(--v-blue-mist);color:var(--v-ink)}
body.mode-site .btn svg{width:18px;height:18px;flex:none}

/* ── La barre de navigation ───────────────────────────────────────────── */
body.mode-site .site-nav{background:rgba(255,255,255,.86);border-bottom:1px solid var(--v-line-2)}
body.mode-site.theme-sombre .site-nav{background:rgba(10,11,22,.86)}
body.mode-site .nav-inner{min-height:72px}
body.mode-site .brand{font-size:1.32rem;font-weight:800;color:var(--v-ink)}
body.mode-site .brand .brand-name span{color:var(--v-blue)}
body.mode-site .nav-links{gap:.2rem;align-items:center}
body.mode-site .nav-links>a,body.mode-site .v-menu>button{
  display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .8rem;border-radius:10px;
  font-weight:600;font-size:.94rem;color:var(--v-ink-2);text-decoration:none;
  background:transparent;border:0;font-family:inherit;cursor:pointer}
body.mode-site .nav-links>a:hover,body.mode-site .v-menu>button:hover,
body.mode-site .v-menu.ouvert>button{background:var(--v-blue-mist);color:var(--v-ink)}
/* ⚠ Ma règle `.nav-links>a` (spécificité 0,2,1) l'emportait sur
   `.nav-auth-mob{display:none}` et `.bascule-texte{display:none}` d'app.css
   (0,1,0) : « Se connecter » et « Passer en thème sombre » — réservés au
   menu replié — s'affichaient en double dans la barre. Mesuré, pas deviné. */
body.mode-site .nav-links>a.nav-auth-mob,body.mode-site .nav-links>a.bascule-texte{display:none}
body.mode-site .v-menu{position:relative}
body.mode-site .v-menu>button svg{width:14px;height:14px;transition:transform .15s}
body.mode-site .v-menu.ouvert>button svg{transform:rotate(180deg)}
/* ⚠ Le menu s'ouvre au survol ET au clic (classe .ouvert posée par le
   script) : le survol seul n'existe pas au doigt, et le clic seul
   fait attendre la souris. Le pont ::before comble les 8 px entre le
   bouton et le panneau — la même bande morte qui rendait le lien de la
   bulle « i » inatteignable sur l'écran 7. */
body.mode-site .v-menu-panneau{position:absolute;left:0;top:calc(100% + 8px);min-width:260px;
  padding:.5rem;border-radius:14px;background:var(--v-card);border:1px solid var(--v-line);
  box-shadow:var(--v-shadow-2);display:none;z-index:40}
body.mode-site .v-menu-panneau::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
body.mode-site .v-menu:hover .v-menu-panneau,body.mode-site .v-menu.ouvert .v-menu-panneau,
body.mode-site .v-menu:focus-within .v-menu-panneau{display:block}
body.mode-site .v-menu-panneau a{display:grid;gap:.1rem;padding:.6rem .7rem;border-radius:10px;
  color:var(--v-ink);text-decoration:none;font-weight:600;font-size:.92rem}
body.mode-site .v-menu-panneau a small{font-weight:400;color:var(--v-muted);font-size:.8rem}
body.mode-site .v-menu-panneau a:hover{background:var(--v-blue-mist)}
body.mode-site .nav-cta{gap:.5rem}
body.mode-site .nav-cta .btn-ghost{color:var(--v-ink-2)}

/* ── L'en-tête : deux colonnes, la promesse et le parcours ────────────── */
body.mode-site .v-hero{padding:3.2rem 0 3.4rem;
  background:
    radial-gradient(60% 70% at 18% 20%, #e8f0ff 0%, rgba(232,240,255,0) 60%),
    radial-gradient(45% 60% at 92% 30%, #eaf1ff 0%, rgba(234,241,255,0) 60%),
    linear-gradient(180deg,#f7faff 0%,var(--v-bg) 100%)}
body.mode-site.theme-sombre .v-hero{background:
    radial-gradient(60% 70% at 18% 20%, #141b45 0%, rgba(20,27,69,0) 60%),
    linear-gradient(180deg,#0d1024 0%,var(--v-bg) 100%)}
body.mode-site .v-hero-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.62fr);
  gap:2rem;align-items:center}
body.mode-site .v-sur{display:inline-block;padding:.3rem .7rem;border-radius:999px;
  background:var(--v-blue-soft);color:var(--v-blue-2);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem}
body.mode-site .v-hero h1{margin:0 0 1rem;font-size:2.55rem;line-height:1.12;font-weight:800}
body.mode-site .v-hero p.v-lead{margin:0 0 1.5rem;font-size:1.08rem;line-height:1.6;color:var(--v-ink-2);max-width:34rem}
body.mode-site .v-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:0 0 1.3rem}
/* « Voir la vidéo » : un bouton à deux lignes, la durée en dessous.
   ⚠ Il n'y a PAS de vidéo aujourd'hui : le bouton mène à l'exemple
   chiffré plus bas. Le libellé le dit (« Voir un exemple »). Le jour où
   une vidéo existe, on change la cible, pas la maquette. */
body.mode-site .v-btn-video{display:inline-flex;align-items:center;gap:.7rem;padding:.5rem 1.1rem .5rem .55rem;
  border:1.5px solid var(--v-orange);border-radius:999px;color:var(--v-ink);text-decoration:none;background:var(--v-card)}
body.mode-site .v-btn-video:hover{background:var(--v-orange-soft)}
body.mode-site .v-btn-video i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--v-orange);color:#fff;flex:none}
body.mode-site .v-btn-video i svg{width:14px;height:14px;margin-left:2px}
body.mode-site .v-btn-video b{display:block;font-size:.92rem;font-weight:700;line-height:1.15}
body.mode-site .v-btn-video small{display:block;font-size:.74rem;color:var(--v-muted)}
body.mode-site .v-coches{display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:0;list-style:none;
  font-size:.86rem;color:var(--v-ink-2)}
body.mode-site .v-coches li{display:inline-flex;align-items:center;gap:.4rem}
body.mode-site .v-coche{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--v-btn-bleu);color:#fff;flex:none}
body.mode-site .v-coche svg{width:10px;height:10px}

/* Les appareils : un portable et un téléphone dessinés en CSS, avec
   dedans une VRAIE miniature de l'application — pas une capture qu'il
   faudrait refaire à chaque écran modifié. L'annotation manuscrite
   au-dessus est celle de la maquette. */
body.mode-site .v-appareils{position:relative;padding:2.4rem .5rem .5rem}
body.mode-site .v-note{position:absolute;top:0;left:14%;font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:.98rem;line-height:1.2;color:var(--v-ink);transform:rotate(-4deg);white-space:nowrap}
body.mode-site .v-note svg{position:absolute;right:-34px;top:16px;width:34px;height:36px;color:var(--v-ink)}
body.mode-site .v-portable{position:relative;margin:0 auto;max-width:560px}
body.mode-site .v-ecran{border-radius:14px 14px 4px 4px;border:6px solid #1d2233;border-bottom-width:12px;
  background:#1d2233;box-shadow:var(--v-shadow-2);overflow:hidden}
body.mode-site .v-socle{height:12px;margin:0 -4%;border-radius:0 0 14px 14px;
  background:linear-gradient(#cfd6e4,#aeb8cc)}
body.mode-site .v-socle::after{content:"";display:block;width:16%;height:4px;margin:0 auto;
  border-radius:0 0 6px 6px;background:#8e99b1}
body.mode-site .v-app{display:grid;grid-template-columns:118px 1fr;background:#f5f8ff;color:#0b1633;
  font-size:.62rem;min-height:250px}
body.mode-site .v-app-nav{background:#fff;border-right:1px solid #e4eaf5;padding:.55rem .5rem}
body.mode-site .v-app-nav b{display:block;font-size:.72rem;margin:0 0 .5rem;padding-left:.3rem}
body.mode-site .v-app-nav b span{color:#1d5cff}
body.mode-site .v-app-nav a{display:flex;align-items:center;gap:.35rem;padding:.3rem .35rem;border-radius:6px;
  color:#2a3552;text-decoration:none}
body.mode-site .v-app-nav a.on{background:#e8efff;color:#1548d1;font-weight:700}
body.mode-site .v-app-nav a i{width:8px;height:8px;border-radius:2px;border:1.4px solid currentColor;flex:none}
body.mode-site .v-app-corps{padding:.6rem .7rem}
body.mode-site .v-app-tete{display:flex;align-items:center;justify-content:space-between;margin:0 0 .5rem}
body.mode-site .v-app-tete b{font-size:.74rem}
body.mode-site .v-app-tete span{padding:.2rem .5rem;border-radius:999px;border:1px solid #dde5f3;background:#fff;font-size:.58rem}
body.mode-site .v-app-regies{display:flex;gap:.3rem;margin:0 0 .5rem}
body.mode-site .v-app-regies i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#fff;border:1px solid #e4eaf5}
body.mode-site .v-app-regies i svg{width:15px;height:15px}
body.mode-site .v-app-pubs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
body.mode-site .v-pub{border-radius:8px;overflow:hidden;background:#fff;border:1px solid #e4eaf5}
body.mode-site .v-pub img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
body.mode-site .v-pub div{padding:.35rem .4rem .4rem}
body.mode-site .v-pub b{display:block;font-size:.58rem;line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
body.mode-site .v-pub span{display:inline-block;margin-top:.3rem;padding:.15rem .4rem;border-radius:999px;
  background:#1d5cff;color:#fff;font-size:.5rem;font-weight:700}
body.mode-site .v-tel{position:absolute;right:-6%;bottom:-6px;width:31%;max-width:150px;
  border-radius:22px;border:5px solid #1d2233;background:#fff;box-shadow:var(--v-shadow-2);overflow:hidden}
body.mode-site .v-tel::before{content:"";display:block;width:36%;height:8px;margin:4px auto 0;border-radius:999px;background:#1d2233}
body.mode-site .v-tel-corps{padding:.4rem .45rem .5rem;font-size:.5rem;color:#0b1633}
body.mode-site .v-tel-corps small{display:block;font-size:.46rem;color:#5b6785;margin:0 0 .25rem}
body.mode-site .v-tel-corps img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
body.mode-site .v-tel-corps b{display:block;margin:.3rem 0 .15rem;font-size:.56rem;line-height:1.2}
body.mode-site .v-tel-corps span{display:block;padding:.28rem 0;margin-top:.35rem;border-radius:999px;text-align:center;
  background:#1d5cff;color:#fff;font-weight:700;font-size:.5rem}

/* La colonne du parcours : quatre étapes reliées par des flèches, de la
   diffusion jusqu'au CRM. C'est la thèse du site en une colonne. */
body.mode-site .v-flux{display:grid;gap:.35rem;justify-items:center}
body.mode-site .v-flux-etape{width:100%;padding:.85rem .7rem;border-radius:16px;background:var(--v-card);
  border:1px solid var(--v-line-2);box-shadow:var(--v-shadow);text-align:center}
body.mode-site .v-flux-etape b{display:block;font-size:.84rem;line-height:1.3;margin:.5rem 0 .15rem}
body.mode-site .v-flux-etape small{display:block;font-size:.74rem;line-height:1.35;color:var(--v-muted)}
body.mode-site .v-flux-ico{display:flex;justify-content:center;gap:.3rem}
body.mode-site .v-flux-ico svg{width:24px;height:24px}
body.mode-site .v-flux-ico.v-rond{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--v-blue-soft);color:var(--v-blue)}
body.mode-site .v-flux-fleche{color:var(--v-blue);line-height:0}
body.mode-site .v-flux-fleche svg{width:18px;height:18px}
body.mode-site .v-flux-crm{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem}
body.mode-site .v-flux-crm span{padding:.15rem .45rem;border-radius:7px;border:1px solid var(--v-line);
  font-size:.66rem;font-weight:800;letter-spacing:-.01em}

/* ── Les quatre étapes ────────────────────────────────────────────────── */
body.mode-site .v-etapes{padding:2.8rem 0 1rem}
body.mode-site .v-etapes ol{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin:0;padding:0;list-style:none;
  counter-reset:etape}
body.mode-site .v-etapes li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.6rem .8rem;align-items:start}
body.mode-site .v-etapes li::before{counter-increment:etape;content:counter(etape);display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;background:var(--v-btn-bleu);color:#fff;font-weight:800;font-size:.95rem}
body.mode-site .v-etapes li:not(:last-child)::after{content:"";position:absolute;right:-1rem;top:14px;width:12px;height:12px;
  border-top:2px solid var(--v-muted);border-right:2px solid var(--v-muted);transform:rotate(45deg);opacity:.55}
body.mode-site .v-etapes svg{width:30px;height:30px;color:var(--v-blue);grid-column:2}
body.mode-site .v-etapes b{display:block;font-size:1rem;margin:.35rem 0 .2rem;grid-column:2}
body.mode-site .v-etapes p{margin:0;font-size:.88rem;line-height:1.5;color:var(--v-muted);grid-column:2}

/* ── Deux façons de lancer + les compatibilités ───────────────────────── */
body.mode-site .v-duo{padding:2.2rem 0 1.4rem}
body.mode-site .v-duo-grille{display:grid;grid-template-columns:1.32fr 1fr;gap:1.4rem;align-items:stretch}
body.mode-site .v-carte{padding:1.4rem 1.5rem;border-radius:var(--v-radius);background:var(--v-blue-mist);
  border:1px solid var(--v-line-2)}
body.mode-site .v-carte h2{margin:0 0 1.1rem;font-size:1.36rem}
body.mode-site .v-choix{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:.9rem;align-items:stretch}
body.mode-site .v-option{padding:1.1rem 1.1rem 1.2rem;border-radius:16px;background:var(--v-card);border:1px solid var(--v-line);
  display:grid;grid-template-rows:auto 1fr auto;gap:.5rem}
body.mode-site .v-option.v-reco{border-color:#ffd2b8;background:var(--v-orange-soft)}
body.mode-site .v-option header{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1rem}
body.mode-site .v-option header svg{width:26px;height:26px;color:var(--v-blue);flex:none}
body.mode-site .v-option.v-reco header svg{color:var(--v-orange)}
body.mode-site .v-option p{margin:0;font-size:.86rem;line-height:1.5;color:var(--v-muted)}
body.mode-site .v-option .btn{justify-self:start;padding:.55rem 1.1rem;font-size:.86rem}
body.mode-site .v-ou{align-self:center;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--v-btn-bleu);color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 6px 16px rgba(29,92,255,.3)}
body.mode-site .v-compat{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
body.mode-site .v-marque{display:grid;place-items:center;min-height:58px;padding:.5rem;border-radius:12px;
  background:var(--v-card);border:1px solid var(--v-line);color:var(--v-ink)}
body.mode-site .v-marque svg{max-width:100%;height:24px}
body.mode-site .v-marque.v-plus{font-size:.8rem;color:var(--v-muted);font-weight:600}
/* ⚠ Les marques tierces sont des mots-marques dessinés, jamais des logos
   inventés — même règle que les régies (voir assets/img/supports/LISEZ-MOI).
   Le fichier officiel, déposé dans assets/img/crm/, prend le dessus. */
body.mode-site .v-marque img{max-height:26px;width:auto}
body.mode-site .v-mot-marque{display:inline-flex;align-items:center;gap:.45rem;font-size:1.02rem;
  font-weight:800;letter-spacing:-.02em;color:var(--v-ink)}
body.mode-site .v-mot-marque svg,body.mode-site .v-mot-marque img{width:22px;height:22px}
body.mode-site .v-flux-crm .v-mot-marque{font-size:.72rem;gap:.25rem}
body.mode-site .v-flux-crm .v-mot-marque svg{display:none}

/* ── Les quatre bénéfices ─────────────────────────────────────────────── */
body.mode-site .v-benef{padding:1.6rem 0 2.6rem}
body.mode-site .v-benef ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin:0;padding:0;list-style:none}
body.mode-site .v-benef li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
body.mode-site .v-benef-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--v-blue-soft);color:var(--v-blue)}
body.mode-site .v-benef-ico svg{width:24px;height:24px}
body.mode-site .v-benef b{display:block;font-size:.98rem;margin:.15rem 0 .2rem}
body.mode-site .v-benef p{margin:0;font-size:.86rem;line-height:1.5;color:var(--v-muted)}

/* ── Les exemples (à la place des témoignages de la maquette) ─────────── */
/* ⚠ La maquette montre trois « Exemple de témoignage » et le dit en
   toutes lettres : « à remplacer par vos avis vérifiés ». On ne publie
   pas d'avis inventés. La bande garde son titre et sa place ; elle porte
   les campagnes d'exemple, chiffrées par le vrai moteur — un contenu
   qui existe et qui est vrai, en attendant des avis qui le soient. */
body.mode-site .v-exemples{padding:3rem 0;background:var(--v-blue-mist);border-top:1px solid var(--v-line-2);
  border-bottom:1px solid var(--v-line-2)}
body.mode-site .v-titre{text-align:center;margin:0 auto 1.8rem;max-width:44rem}
body.mode-site .v-titre h2{margin:0 0 .5rem;font-size:1.9rem}
body.mode-site .v-titre p{margin:0;color:var(--v-muted);font-size:1.02rem}
body.mode-site .v-exemples .demo{margin:0 auto}
body.mode-site .v-lien-centre{text-align:center;margin:1.4rem 0 0}
body.mode-site .v-lien-centre a{font-weight:700;text-decoration:underline;text-underline-offset:.2em}

/* ── L'appel final ────────────────────────────────────────────────────── */
body.mode-site .v-fin{padding:2.6rem 0 3rem}
body.mode-site .v-fin-carte{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  padding:2rem 2.2rem;border-radius:22px;background:var(--v-blue-mist);border:1px solid var(--v-line-2)}
body.mode-site .v-fin-ico{display:grid;place-items:center;width:96px;height:96px;border-radius:20px;background:var(--v-card);
  border:1px solid var(--v-line);color:var(--v-blue)}
body.mode-site .v-fin-ico svg{width:52px;height:52px}
body.mode-site .v-fin h2{margin:0 0 .4rem;font-size:1.6rem}
body.mode-site .v-fin p{margin:0;color:var(--v-ink-2);font-size:1rem;max-width:30rem}
body.mode-site .v-fin-droite{display:grid;gap:.9rem;justify-items:start}
body.mode-site .v-fin-droite .v-coches{gap:.5rem 1.2rem;max-width:22rem}
body.mode-site .v-fin .v-note{position:absolute;right:2rem;top:1.1rem;left:auto;transform:rotate(-6deg);font-size:.95rem}
body.mode-site .v-fin .v-note svg{right:auto;left:-38px;top:20px;transform:scaleX(-1)}

/* ── Le pied de page ──────────────────────────────────────────────────── */
body.mode-site .site-foot{background:#0b1633;color:#c9d2ea;border-top:0;padding:3.2rem 0 1.4rem}
body.mode-site .site-foot .brand,body.mode-site .site-foot h4{color:#fff}
body.mode-site .site-foot .brand .brand-name span{color:#7ea2ff}
body.mode-site .site-foot h4{margin:.3rem 0 .9rem;font-size:.98rem}
body.mode-site .site-foot a{color:#c9d2ea;text-decoration:none;display:block;padding:.22rem 0;font-size:.92rem}
body.mode-site .site-foot a:hover{color:#fff;text-decoration:underline}
body.mode-site .site-foot .brand{margin-bottom:.6rem}
body.mode-site .site-foot p.v-foot-txt{margin:.5rem 0 0;font-size:.9rem;line-height:1.55;color:#aab6d6;max-width:24rem}
body.mode-site .site-foot p.v-foot-txt b{color:#fff;display:block;font-size:1rem;margin:0 0 .3rem}
body.mode-site .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:2rem}
body.mode-site .v-foot-boite{padding:1.2rem 1.25rem;border-radius:16px;background:#141f43;border:1px solid #23305e}
body.mode-site .v-foot-boite h4{margin:0 0 .35rem}
body.mode-site .v-foot-boite p{margin:0 0 .9rem;font-size:.86rem;color:#aab6d6;line-height:1.5}
body.mode-site .v-foot-boite .btn{width:100%;justify-content:center;margin:0 0 .5rem}
body.mode-site .v-foot-boite .btn-ghost{color:#fff;border-color:#2c3b6b}
body.mode-site .v-foot-boite .btn-ghost:hover{background:#1c2a55;color:#fff}
body.mode-site .v-foot-boite .v-coches{margin-top:.7rem;flex-direction:column;gap:.35rem;font-size:.8rem;color:#c9d2ea}
body.mode-site .foot-bottom{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid #23305e;color:#aab6d6;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;font-size:.84rem}
body.mode-site .foot-bottom a{display:inline;padding:0;font-size:.84rem}
body.mode-site .foot-bottom .v-copie{margin-left:auto}
body.mode-site .site-foot .muted{color:#aab6d6}

/* ── Les écrans étroits ───────────────────────────────────────────────── */
@media (max-width:1080px){
  body.mode-site .v-hero-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.mode-site .v-flux{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);gap:.6rem;align-items:start}
  body.mode-site .v-flux-fleche{display:none}
  body.mode-site .foot-grid{grid-template-columns:1fr 1fr 1fr}
  body.mode-site .v-foot-boite{grid-column:1 / -1}
}
@media (max-width:900px){
  body.mode-site .v-hero h1{font-size:2.1rem}
  body.mode-site .v-etapes ol{grid-template-columns:1fr 1fr;gap:1.6rem 2.2rem}
  body.mode-site .v-etapes li:not(:last-child)::after{display:none}
  body.mode-site .v-duo-grille{grid-template-columns:1fr}
  body.mode-site .v-benef ul{grid-template-columns:1fr 1fr}
  body.mode-site .v-fin-carte{grid-template-columns:1fr;text-align:left}
  body.mode-site .v-fin .v-note{display:none}
}
@media (max-width:820px){
  /* ⚠ LA BARRE DÉBORDAIT DE 27 PX À 375 PX : deux boutons pleine taille plus
     le burger ne tiennent pas. « Se connecter » rejoint le menu replié
     (c'est le rôle de .nav-auth-mob) ; le bouton principal se resserre. */
  body.mode-site .nav-cta .btn-ghost{display:none}
  body.mode-site .nav-cta .btn-primary{padding:.55rem .85rem;font-size:.86rem;box-shadow:none}
  body.mode-site .nav-inner{min-height:64px}
  body.mode-site.menu-open .nav-links>a.nav-auth-mob{display:block}
  body.mode-site .nav-links>a.bascule-texte{display:flex}
  /* Dans le menu replié, les déroulants deviennent des listes ouvertes :
     un menu dans un menu, au doigt, c'est deux gestes pour un lien. */
  body.mode-site .v-menu>button{width:100%;justify-content:space-between;padding:.6em 0;border-radius:0;
    border-bottom:1px solid var(--v-line-2);color:var(--v-ink);font-weight:700}
  body.mode-site .v-menu>button svg{display:none}
  body.mode-site .v-menu-panneau{display:block;position:static;min-width:0;padding:.2rem 0 .4rem .8rem;
    border:0;box-shadow:none;background:transparent}
  body.mode-site .v-menu-panneau::before{display:none}
  body.mode-site .v-menu-panneau a{padding:.45rem .4rem}
  body.mode-site .v-menu-panneau a small{display:none}
}
@media (max-width:640px){
  body.mode-site .v-hero{padding:2.2rem 0 2.4rem}
  body.mode-site .v-hero-grille{grid-template-columns:1fr}
  body.mode-site .v-hero h1{font-size:1.85rem}
  body.mode-site .v-note{font-size:.84rem;left:4%}
  body.mode-site .v-tel{right:0;width:34%}
  body.mode-site .v-flux{grid-template-columns:1fr 1fr}
  body.mode-site .v-etapes ol{grid-template-columns:1fr}
  body.mode-site .v-choix{grid-template-columns:1fr}
  body.mode-site .v-ou{justify-self:center}
  body.mode-site .v-compat{grid-template-columns:repeat(2,1fr)}
  body.mode-site .v-benef ul{grid-template-columns:1fr}
  body.mode-site .v-titre h2{font-size:1.5rem}
  body.mode-site .v-fin-carte{padding:1.4rem 1.2rem}
  body.mode-site .v-fin-ico{width:64px;height:64px;border-radius:14px}
  body.mode-site .v-fin-ico svg{width:34px;height:34px}
  body.mode-site .foot-grid{grid-template-columns:1fr 1fr}
  body.mode-site .foot-bottom .v-copie{margin-left:0;width:100%}
}

/* == LE MENU QUI SUIT LES BLOCS (17/09) =====================================
   L'entrée du bloc visible s'allume (classe posée par le script
   de la barre), comme un sommaire. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* (Le décalage sous la barre existe déjà : html{scroll-padding-top:76px}.
   Y ajouter une marge le doublait — mesuré : blocs à 160 px du haut.) */
body.mode-site .nav-links>a.on,body.mode-site .v-menu>button.on{color:var(--v-blue);background:var(--v-blue-mist)}