/* ============================================================
   GABARIT V10 — la feuille commune des pages au style de la home V10
   ------------------------------------------------------------
   Extraite de public/preview/home-vision-3d-v10/ (06/10) : jetons, barre et méga-menu, menu
   mobile, pied de page et son aurore, prise de contact. Plus quelques blocs de page intérieure
   (en-tête court, sections, cartes, chiffres, texte long, FAQ, bande d'appel), puisque les pages
   déclinées sont moins « scrolly-telling » que la home : pas de scène three.js ici.

   Feuille AUTONOME : aucune classe Webflow, et elle ne se charge jamais à côté des trois
   feuilles Webflow (CLAUDE.md, piège 1). Une page est au gabarit V10 ou ne l'est pas.

   Le HTML de la barre et du pied de page n'est pas écrit à la main : scripts/v10-gabarit.mjs le
   pose entre les marqueurs galeon:v10:*, depuis src/lib/v10/menu.json. Le comportement
   (ouvrir, fermer, aurore) est dans js/v10.js ; la prise de contact dans js/v10-contact.js.
   Modèle de page : public/preview/v10-gabarit/.
   ============================================================ */

/* La police est servie d'ici, plus de Google Fonts : un appel à un tiers à chaque page vue n'a
   rien à faire sous l'exemption de mesure (CLAUDE.md, piège 10). Variable 300 → 700, latin et
   latin étendu (38 Ko). Source et licence OFL : ~/Galeon/ressources/polices/marque/, recopiée
   dans public/fonts/plus-jakarta-sans-OFL.txt. Le hash est dans le nom : /fonts est immutable. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans-var.15c6e84c.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --ink:#161d31; --ink-2:#1a2440; --ink-3:#1f2c4d; --ink-glow:#162f4e;
  /* le fond des parties sombres, celui que la home donne à voir : son hero (#0b1020) et le voile sous
     ses textes (12,16,32). Mesuré sur la home rendue le 08/10 : #090e21 à #0b1020 au centre, presque noir
     aux bords. --ink (#161d31) reste la teinte des éléments posés dessus : boutons, fenêtre de contact. */
  --fond:#0b1020; --fond-2:#101830;
  --paper:#eef4fc; --paper-2:#f7faff;
  --blue:#479af3; --blue-l:#8cc2ff; --blue-d:#2f7fdc; --cyan:#5ad1e6;
  --grad:linear-gradient(120deg,#2f7fdc 0%,#479af3 45%,#5ad1e6 100%);
  --line-d:rgba(255,255,255,.12); --line-l:rgba(10,12,24,.1);
  --tx:#f1f6ff; --tx-rgb:222,233,255;
  --dim:rgba(var(--tx-rgb),.7); --dim-2:rgba(var(--tx-rgb),.46);
  --ink-dim:rgba(10,12,24,.66);
  --todo:#c2692f;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --w:1280px; --nav-h:76px;
}

/* ─── BASE ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:rgba(140,194,255,.32) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,194,255,.3);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(140,194,255,.55);background-clip:padding-box}
.ov *{scrollbar-color:rgba(10,12,24,.25) transparent}
.menu__tabs{scrollbar-width:none}.menu__tabs::-webkit-scrollbar{display:none}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--fond);color:var(--tx);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--blue-l);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-l);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.light .eyebrow{color:var(--blue-d)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.04}
.lead{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--dim);max-width:56ch}
.light{background:var(--paper);color:#0a0c18}
.light .lead{color:var(--ink-dim)}

/* ─── BOUTONS ────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;transition:gap .2s,background .3s,color .3s,border-color .3s}
.btn:hover{gap:14px}
.btn--solid{background:#fff;color:#0a0c18}
.btn--blue,.btn--p{background:var(--blue);color:var(--tx)}
.btn--dark{background:var(--ink);color:var(--tx)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.5);color:var(--tx)}
.light .btn--ghost,.btn--outline-dark{border:1.5px solid rgba(10,12,24,.3);color:#0a0c18}
.btn--glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:var(--tx);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--glass:hover{background:#fff;color:#0a0c18;border-color:#fff}
.btn--block{width:100%;justify-content:center}
.arrow{width:18px;height:18px;flex:none}

/* ─── BARRE ──────────────────────────────────────── */
/* Au repos la barre est posée sur l'en-tête ; au défilement elle se rétracte en pilule de verre. */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);padding:0 16px;transition:padding .4s cubic-bezier(.4,0,.2,1)}
.nav__in{height:100%;display:flex;align-items:center;gap:44px;border:1px solid transparent;border-radius:999px;
  transition:max-width .45s cubic-bezier(.4,0,.2,1),height .35s ease,padding .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease,margin .35s ease}
.nav.is-solid{padding-top:12px}
.nav.is-solid .nav__in{max-width:1120px;height:56px;padding:0 8px 0 24px;gap:28px;
  background:rgba(14,17,34,.62);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 40px rgba(0,0,0,.34)}
.nav:not(.is-solid) .nav__in{max-width:100%;padding:0 clamp(8px,3.4vw,56px)}
.nav__logo{flex:none;color:var(--tx)}
.nav__logo svg{height:22px;width:auto}
.nav__links{display:flex;gap:6px;flex:1}
.nav__top{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:rgba(var(--tx-rgb),.82)}
.nav__top:hover,.nav__top[aria-expanded="true"]{color:var(--tx);background:rgba(255,255,255,.08)}
.nav__top svg{width:14px;height:14px;transition:transform .2s}
.nav__top[aria-expanded="true"] svg{transform:rotate(180deg)}
.cap{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
/* le bouton du haut ne crie pas : verre transparent, il ne devient blanc qu'au survol */
.nav__cta{height:44px;padding:0 20px;font-size:14px;white-space:nowrap;justify-content:center;
  background:rgba(255,255,255,.06);color:var(--tx);border:1px solid rgba(255,255,255,.28)}
.nav__cta:hover{background:#fff;color:#0a0c18;border-color:#fff}
/* la capsule : sur la home, le libellé du bouton suit le chapitre, et glisse d'un texte à l'autre */
.nav__cta{overflow:hidden;transition:background .25s,color .25s,border-color .25s,width .38s cubic-bezier(.4,0,.2,1)}
.cap__t{display:inline-block;transition:opacity .18s ease,transform .18s ease}
.cap__t.is-swap{opacity:0;transform:translateY(6px)}
.cap__s{display:none}
.nav.is-solid .nav__cta{height:42px}
.nav__burger{display:none;width:40px;height:40px;border-radius:999px;align-items:center;justify-content:center}
.nav__burger i{display:block;position:relative;width:16px;height:9px}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:width .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1)}
.nav__burger i::before{top:0;width:16px}.nav__burger i::after{bottom:0;width:10px}
.nav__burger[aria-expanded="true"] i::before{width:16px;transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i::after{width:16px;transform:translateY(-3.5px) rotate(-45deg)}
.nav.is-solid.is-open .nav__in{background:rgba(14,17,34,.5);border-color:rgba(255,255,255,.12);box-shadow:none}

/* ─── MÉGA-MENU ──────────────────────────────────── */
/* Plein écran, verre fumé. Il est HORS de la barre : le backdrop-filter de la barre ferait d'elle le
   cadre d'un élément fixed, et le panneau n'aurait que ses 76 px de haut. */
.mega{position:fixed;inset:0;z-index:49;display:none;overflow:auto;
  background:linear-gradient(180deg,rgba(10,14,30,.84),rgba(10,14,30,.7));backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  color:var(--tx);animation:megaIn .28s ease both}
@keyframes megaIn{from{opacity:0}to{opacity:1}}
.mega.is-open{display:block}
.mega__in{padding:calc(var(--nav-h) + clamp(40px,7vh,80px)) 32px 48px}
.mega__panel{display:flex;gap:64px;align-items:flex-start}
.mega__panel[hidden]{display:none}
.mega__cols{flex:1;display:grid;gap:40px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.mega__col h4{margin:0 0 14px;padding:0 14px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--tx-rgb),.42)}
.mi{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;transition:background .15s}
a.mi:hover,a.mi[aria-current="page"]{background:rgba(255,255,255,.07)}
.mi b{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--tx)}
.mi span{font-size:13.5px;color:rgba(var(--tx-rgb),.58);line-height:1.4}
/* les pages à créer : seulement dans /preview/ (le générateur ne les écrit pas ailleurs) */
.mi--todo{border:1.5px dashed rgba(255,255,255,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 8px,rgba(255,255,255,.055) 8px 16px);margin:4px 0}
.mi--todo b{color:rgba(var(--tx-rgb),.5);display:flex;align-items:center;gap:10px}
.mi--todo span{color:rgba(var(--tx-rgb),.38)}
.mi--apercu b{display:flex;align-items:center;gap:10px}
.mi--apercu b::after{content:attr(data-apercu);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-l);border:1px solid rgba(140,194,255,.5);border-radius:999px;padding:1px 7px;white-space:nowrap;flex:none}
.mi--todo b::after{content:attr(data-todo);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e79a62;border:1px dashed #e79a62;border-radius:999px;padding:1px 7px;white-space:nowrap;flex:none}
.mega__card{width:340px;flex:none;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.mega__card .viz{height:170px;border-radius:12px;background:var(--grad);opacity:.9;width:100%;object-fit:cover;object-position:left top}
.mega__card img.viz{opacity:1;background:#fff}
.mega__card b{font-size:18px;color:var(--tx)}
.mega__card p{margin:0;font-size:13.5px;line-height:1.45;color:rgba(var(--tx-rgb),.62)}
.mega__card a{font-size:14px;font-weight:600;color:var(--blue-l)}
/* le prochain rendez-vous : js/v10.js montre le premier à venir, et rien une fois le dernier passé */
.mega__next{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1)}
.mega__next[hidden]{display:none}
.mega__next small{font-size:12.5px;color:rgba(var(--tx-rgb),.55)}
.mega__next b{font-size:16px}

/* ─── MENU MOBILE ────────────────────────────────── */
/* Le menu de bureau en plein écran, ses rubriques en onglets : mêmes repères du bureau au
   téléphone. Son contenu est recopié des panneaux du méga-menu par js/v10.js. */
.menu{position:fixed;inset:0;z-index:49;display:none;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(10,14,30,.84),rgba(10,14,30,.7));backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  color:var(--tx);animation:megaIn .28s ease both}
.menu.is-open{display:block}
@media (min-width:961px){.menu{display:none !important}}
.menu__in{padding:calc(var(--nav-h) + 12px) 16px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:26px}
.menu__tabs{display:flex;gap:4px;margin:0 -6px;overflow-x:auto}
.menu__tabs .nav__top{flex:none;height:42px;font-size:15px}
.menu .mega__panel{flex-direction:column;gap:26px}
.menu .mega__cols{grid-template-columns:1fr;gap:26px}
.menu .mi{padding:10px 14px}
.menu .mega__card{width:auto}
.menu__cta .btn{width:100%;justify-content:center}
@media (max-width:960px){
  html.menu-open,html.menu-open body{overflow:hidden}
  .nav__links{display:none}
  .mega{display:none !important}
  /* sur mobile la barre est toujours une pilule (le logo, l'action), et le burger en sort : un rond de verre à côté */
  .nav,.nav.is-solid{display:flex;align-items:center;gap:8px;height:auto;padding:12px 12px 0}
  .nav .nav__in,.nav.is-solid .nav__in,.nav:not(.is-solid) .nav__in{flex:1;min-width:0;max-width:none;margin:0;height:52px;gap:12px;padding:0 6px 0 16px;
    background:rgba(14,17,34,.62);border-color:rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 40px rgba(0,0,0,.34)}
  .nav.is-open .nav__in{box-shadow:none}
  /* au défilement, le logo se replie sur l'Oméga : la boîte se rétrécit à sa largeur (118 des 690 unités
     du viewBox) et les lettres s'effacent. Le premier tracé du SVG est l'Oméga, les suivants les lettres. */
  .nav__logo{display:block;overflow:hidden;width:calc(19px * 690 / 103);transition:width .4s cubic-bezier(.4,0,.2,1)}
  .nav__logo svg{height:19px;max-width:none}
  .nav__logo path:nth-child(n+2){transition:opacity .25s ease}
  .nav.is-solid .nav__logo{width:calc(19px * 118 / 103)}
  .nav.is-solid .nav__logo path:nth-child(n+2){opacity:0}
  .nav__cta,.nav.is-solid .nav__cta{height:40px;padding:0 16px;font-size:13.5px;background:#fff;color:#0a0c18;border-color:#fff}
  .cap__l{display:none}.cap__s{display:inline}
  .nav__burger{display:flex;flex:none;width:52px;height:52px;border-radius:50%;color:var(--tx);
    background:rgba(14,17,34,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 40px rgba(0,0,0,.34)}
  .nav.is-open .nav__burger{box-shadow:none}
}

/* ─── PIED DE PAGE ───────────────────────────────── */
.foot{position:relative;z-index:1;padding:72px 0 110px;background:linear-gradient(180deg,var(--fond) 0,#0c1124 300px)}
/* le bas glisse vers le bleu de l'orbe, jamais jusqu'au blanc : beaucoup d'arrêts, et un grain par-dessus */
.foot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:320px;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,17,36,0) 0%,rgba(20,30,56,.3) 18%,rgba(25,40,74,.55) 36%,rgba(28,50,94,.74) 54%,rgba(31,60,114,.88) 72%,rgba(34,68,128,.96) 88%,#23468a 100%)}
.foot > .wrap{position:relative;z-index:1}
/* une page qui finit sur une section claire : le pied de page part du clair, en fondu court */
.light + .foot,main:has(> :last-child.light) + .foot{background:linear-gradient(180deg,var(--paper) 0,#0c1124 140px)}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.foot__grid{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:40px}
.foot__grid>*{min-width:0}
.foot__brand a{display:inline-block;color:var(--tx)}
.foot__brand svg{height:22px;width:auto}
.foot__brand p{margin:18px 0 0;font-size:13.5px;color:var(--dim);max-width:34ch}
.foot h5{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.foot ul{overflow-wrap:anywhere;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--dim)}
.foot ul a:hover,.foot__bottom a:hover{color:var(--tx)}
.foot li.todo{opacity:.45}
.foot__social{margin-top:22px;display:flex;gap:8px}
.foot__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-d);color:var(--dim);transition:background .2s,color .2s,border-color .2s}
.foot__social a:hover{background:#fff;color:#0a0c18;border-color:#fff}
.foot__social svg{width:16px;height:16px}
.foot__trust{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;font-size:12.5px;color:var(--dim-2)}
.foot__trust span{display:inline-flex;align-items:center;gap:8px}
.foot__trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
/* les deux dimensions sont posées ici comme en HTML (119 × 44) : cf. CLAUDE.md, piège 8 */
.foot__certs{height:44px;width:119px;opacity:.9;margin-right:10px}
.foot__bottom{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--dim-2)}
@media (max-width:960px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}

/* L'aurore : un bloc de hauteur nulle qui grandit quand on insiste en bas de page, et revient seul
   (js/v10.js). Dedans, une orbe bleue qui se lève, et le grand GALEON qu'un reflet traverse.
   Réglages retenus le 01/10 dans l'atelier de la V8 (pied.js, ?reglages) : lueur .95, taille ×1,8,
   hauteur 220, flou 66, #7eb8f6 sur #23468a, grain .09 — et le reflet « B ». */
.aurore{height:var(--d,0px);overflow:hidden;position:relative;z-index:1;background:#23468a}
.aurore__in{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 150px);mask-image:linear-gradient(180deg,transparent 0,#000 150px)}
#v10-aurore.grain::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 150px);mask-image:linear-gradient(180deg,transparent 0,#000 150px)}
.aurore__ciel{--orbe:min(2124px,173vw);position:absolute;left:50%;bottom:calc(var(--orbe) * -1 + 220px);width:var(--orbe);height:var(--orbe);border-radius:50%;
  transform:translateX(-50%) translateY(calc((1 - var(--p,0)) * 90px));filter:blur(66px);
  background:radial-gradient(circle at 50% 24%,rgba(126,184,246,.741) 0%,rgba(92,134,180,.589) 16%,rgba(66,96,128,.437) 32%,rgba(47,68,91,.285) 48%,rgba(38,55,74,.133) 64%,rgba(35,52,69,0) 80%)}
.aurore__wrap{position:absolute;left:0;right:0;bottom:56px;padding:0 32px;pointer-events:none;z-index:3}
@media (max-width:640px){.aurore__wrap{padding:0 16px}}
.foot__mark{position:relative;max-width:calc(var(--w) - 64px);margin:0 auto;line-height:0;opacity:var(--p,0);transform:translateY(calc((1 - var(--p,0)) * 36px))}
.foot__mark svg{width:100%;height:auto}
.foot__mark svg path{fill:url(#v10FootGrad)}
.foot__mark > svg{opacity:.5}
/* le reflet : deux couches (un halo doux, un cœur fin qui tire vers le cyan) posées par js/v10.js,
   et deux étincelles, sur l'épaule de l'Ω puis sur le N. Sans script, le lettrage reste à .5. */
.reflet-couche{position:absolute;inset:0;pointer-events:none}
.reflet-couche svg{width:100%;height:auto;display:block}
.reflet-couche--halo svg path{fill:#fff !important;fill-opacity:.55}
.reflet-couche--coeur svg path{fill:url(#v10RefletCoeur) !important}
.reflet-etincelle{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;pointer-events:none;transform:scale(.2) rotate(0deg)}
.reflet-etincelle--omega{left:13.8%;top:21%}.reflet-etincelle--n{left:97.5%;top:15.5%}
.reflet-etincelle.is-on{animation:refletEtinc .8s cubic-bezier(.2,.8,.2,1)}
@keyframes refletEtinc{0%{opacity:0;transform:scale(.2) rotate(0deg)}35%{opacity:1;transform:scale(1.1) rotate(35deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* ─── PAGES INTÉRIEURES ──────────────────────────── */
/* L'en-tête court : le ton de la home (fond encre, lueur bleue, grand titre serré) sans la scène.
   Le visuel de droite est une image : un rendu du générateur 3D (/preview/generateur-3d/), une
   capture produit ou une photo — jamais une scène WebGL. */
.v-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(56px,10vh,120px)) 0 clamp(64px,9vw,112px);
  background:radial-gradient(60% 70% at 78% 40%,rgba(71,154,243,.14),transparent 70%),radial-gradient(40% 50% at 10% 100%,rgba(90,209,230,.05),transparent 70%),var(--fond)}
.v-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.v-hero h1{font-size:clamp(40px,5.6vw,80px);letter-spacing:-.045em;line-height:.96;max-width:14ch}
.v-hero .lead{margin:24px 0 32px;font-size:clamp(15px,1.25vw,18px)}
.v-hero__row{display:flex;flex-wrap:wrap;gap:14px}
.v-hero__row .btn{height:48px;font-size:14.5px}
.v-hero__visuel{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
.v-hero__visuel img,.v-hero__visuel video{width:100%;height:100%;object-fit:cover}
.v-hero--seul .v-hero__grid{grid-template-columns:1fr}
.v-hero--seul h1{max-width:18ch}
@media (max-width:860px){.v-hero__grid{grid-template-columns:1fr}}
/* fil d'Ariane, au-dessus du titre */
.v-ariane{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none;font-size:12.5px;color:var(--dim-2)}
.v-ariane li+li::before{content:"/";margin-right:6px;opacity:.6}
.v-ariane a:hover{color:var(--tx)}

/* les sections : sombres par défaut, claires avec .light. On alterne, comme la home. */
.v-sec{position:relative;padding:clamp(72px,9vw,128px) 0}
.v-sec__tete{max-width:760px;margin:0 0 clamp(36px,5vw,64px)}
.v-sec__tete--centre{margin-left:auto;margin-right:auto;text-align:center}
.v-sec__tete--centre .eyebrow{justify-content:center}
.v-sec__tete--centre .lead{margin-left:auto;margin-right:auto}
.v-sec h2{font-size:clamp(30px,3.5vw,50px)}
.v-sec__tete .lead{margin:18px 0 0}
.v-sec h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.2}

/* cartes */
.v-grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.v-carte{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line-d);transition:border-color .2s,background .2s}
a.v-carte:hover{border-color:rgba(140,194,255,.4);background:rgba(255,255,255,.06)}
.v-carte p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim)}
.v-carte__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(71,154,243,.14);color:var(--blue-l)}
.v-carte__ic svg{width:22px;height:22px}
.v-carte__lien{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--blue-l)}
.light .v-carte{background:#fff;border-color:var(--line-l);box-shadow:0 1px 0 rgba(10,12,24,.02)}
.light a.v-carte:hover{border-color:rgba(47,127,220,.35);background:#fff}
.light .v-carte p{color:var(--ink-dim)}
.light .v-carte__ic{background:rgba(71,154,243,.12);color:var(--blue-d)}
.light .v-carte__lien{color:var(--blue-d)}

/* chiffres */
.v-chiffres{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.v-chiffre b{display:block;font-size:clamp(40px,4vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-chiffre span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--dim)}
.light .v-chiffre span{color:var(--ink-dim)}

/* texte et image côte à côte */
.v-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.v-duo--inverse > :first-child{order:2}
.v-duo figure{margin:0;border-radius:20px;overflow:hidden}
.v-duo figure img{width:100%;height:auto}
.v-duo .lead{margin:18px 0 0}
.v-liste{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--dim)}
.v-liste li{display:flex;gap:12px;align-items:flex-start}
.v-liste li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--blue)}
.light .v-liste{color:var(--ink-dim)}
@media (max-width:860px){.v-duo{grid-template-columns:1fr}.v-duo--inverse > :first-child{order:0}}

/* texte long : mentions légales, confidentialité, guides lus en ligne */
.v-prose{max-width:72ch;font-size:16px;line-height:1.7}
.v-prose h2{font-size:clamp(24px,2.4vw,32px);margin:2.2em 0 .6em}
.v-prose h3{font-size:clamp(18px,1.5vw,21px);margin:1.8em 0 .5em}
.v-prose h2:first-child,.v-prose h3:first-child{margin-top:0}
.v-prose p,.v-prose ul,.v-prose ol{margin:0 0 1.1em}
.v-prose ul,.v-prose ol{padding-left:1.3em}
.v-prose li{margin:.35em 0}
.v-prose a{color:var(--blue-l);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(140,194,255,.4)}
.light .v-prose a{color:var(--blue-d);text-decoration-color:rgba(47,127,220,.35)}
.v-prose strong{font-weight:700}

/* FAQ : <details> natif. Il s'ouvre sans script, à sa vraie hauteur (une réponse s'est déjà
   ouverte sur zéro pixel ailleurs sur le site : rien à calculer ici). */
.v-faq{max-width:860px;border-top:1px solid var(--line-d)}
.v-faq details{border-bottom:1px solid var(--line-d)}
.v-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(16px,1.3vw,18px);font-weight:600}
.v-faq summary::-webkit-details-marker{display:none}
.v-faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s;opacity:.6}
.v-faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.v-faq details > div{padding:0 0 22px;color:var(--dim);font-size:15px;line-height:1.65;max-width:68ch}
.v-faq details > div p{margin:0 0 .8em}
.light .v-faq,.light .v-faq details{border-color:var(--line-l)}
.light .v-faq details > div{color:var(--ink-dim)}

/* la bande d'appel, en bas de page : une carte encre sur fond clair, ou verre sur fond sombre */
.v-appel{position:relative;overflow:hidden;border-radius:28px;padding:clamp(36px,5vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
  background:radial-gradient(70% 120% at 100% 0%,rgba(71,154,243,.22),transparent 60%),var(--fond-2);color:var(--tx);border:1px solid var(--line-d)}
.v-appel h2{font-size:clamp(26px,3vw,40px);max-width:20ch}
.v-appel p{margin:12px 0 0;color:var(--dim);max-width:52ch}
.v-appel__row{display:flex;flex-wrap:wrap;gap:12px}

/* témoignages : des citations, et des vidéos qui s'ouvrent sur YouTube (rien ne part vers YouTube
   avant le clic : la vignette est une image d'ici) */
.v-citations{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.v-citation{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:26px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
.v-citation blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--tx)}
.v-citation figcaption{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;color:var(--dim)}
.v-citation figcaption img{height:28px;width:auto;max-width:110px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8}
.v-citation--une{grid-column:1/-1;padding:clamp(28px,4vw,48px)}
.v-citation--une blockquote{font-size:clamp(20px,2.2vw,28px);line-height:1.35;letter-spacing:-.01em}
.v-videos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));margin-top:16px}
.v-video{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:43/26;background:#0c142a}
.v-video img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.v-video:hover img{transform:scale(1.04)}
.v-video::after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23161d31'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.light .v-citation{background:#fff;border-color:var(--line-l)}
.light .v-citation blockquote{color:#0a0c18}
.light .v-citation figcaption{color:var(--ink-dim)}
.light .v-citation figcaption img{filter:none;opacity:1}

/* les établissements : une bande de logos, en couleur sur fond clair, en blanc sur fond sombre */
.v-logos{display:grid;gap:18px 28px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-items:center;margin:0;padding:0;list-style:none}
.v-logos li{display:flex;align-items:center;justify-content:center;height:56px}
.v-logos img{max-height:44px;max-width:130px;width:auto;height:auto;object-fit:contain}
.v-sec:not(.light) .v-logos img{filter:brightness(0) invert(1);opacity:.78}

/* ce que fait le DPI, en pastilles */
.v-pastilles{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.v-pastilles li{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid var(--line-d)}
.light .v-pastilles li{background:#fff;border-color:var(--line-l);color:#0a0c18}

/* un formulaire posé dans la page (contact, guide à télécharger) : une carte claire, quel que soit le fond.
   Il est envoyé par galeon-forms.js : .w-form, .w-form-done et .w-form-fail sont SES repères (les noms
   viennent de Webflow), pas des classes Webflow chargées ici. */
.v-form{background:var(--paper-2);color:var(--ink);border-radius:22px;padding:clamp(22px,3vw,34px);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.v-form h2,.v-form h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.2;margin:0 0 6px;color:var(--ink)}
.v-form .hint{font-size:13.5px;color:var(--ink-dim);margin:0 0 18px;line-height:1.5}
.v-form form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px}
.v-form .field--full,.v-form .btn,.v-form .accord,.v-form .note{grid-column:1/-1}
.v-form textarea{min-height:110px;padding:10px 11px;border:1px solid var(--line-l);border-radius:9px;font-size:14px;background:#fff;color:var(--ink);width:100%;resize:vertical}
.v-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(71,154,243,.14)}
.v-form .btn{height:48px;margin-top:6px;justify-content:center}
.v-form .note{font-size:12px;color:var(--ink-dim);margin:8px 0 0}
.v-form--seul form{grid-template-columns:1fr}
@media (max-width:560px){.v-form form{grid-template-columns:1fr}}
.w-form-done,.w-form-fail{display:none}
.w-form-done{padding:18px 20px;border-radius:14px;background:rgba(71,154,243,.1);border:1px solid rgba(71,154,243,.3);color:var(--ink);font-size:14.5px;line-height:1.5}
.w-form-done b{display:block;margin-bottom:4px}
.w-form-done a{color:var(--blue-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.w-form-fail{margin-top:10px;font-size:13px;color:#c0392b}

/* les coordonnées : courriel, réseau, adresse */
.v-coord{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.v-coord a{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--tx)}
.v-coord a:hover{color:var(--blue-l)}
.v-coord svg{flex:none;width:20px;height:20px;color:var(--blue-l)}

/* les signes d'un guide : une liste numérotée */
.v-signes{counter-reset:signe;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.v-signes li{counter-increment:signe;display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line-d);font-size:clamp(16px,1.3vw,18px);font-weight:600}
.v-signes li::before{content:counter(signe);flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:700}
.light .v-signes li{background:#fff;border-color:var(--line-l)}

/* ─── PRISE DE CONTACT (js/v10-contact.js) ───────── */
/* Un appel de qualification, jamais une démo d'emblée. Reprise de la V10, qui la tenait de /preview/home-a/. */
.ov{position:fixed;inset:0;z-index:200;background:rgba(4,6,12,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.ov.is-open{display:flex;animation:ovIn .3s ease both}
.ov__close{position:absolute;top:18px;right:20px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--tx);display:grid;place-items:center;z-index:2}
.book{width:min(1060px,100%);max-height:min(90vh,100%);overflow:auto;overflow-x:hidden;background:var(--paper-2);color:var(--ink);border-radius:22px;display:grid;grid-template-columns:.68fr 1.32fr}
.ov.is-open .book{animation:bookIn .5s cubic-bezier(.2,.8,.2,1) both}
.ov.is-open .book__side{animation:bookSide .6s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes bookIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bookSide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ov.is-open,.ov.is-open .book,.ov.is-open .book__side{animation:none}}
.book .btn{justify-content:center}
.book .h-sm{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.book .small{font-size:12.5px}
.book .eyebrow{color:var(--blue-l)}
.book__side{background:var(--ink);color:var(--tx);padding:30px;display:flex;flex-direction:column;gap:18px;border-radius:22px 0 0 22px}
.book__side ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:11px;font-size:13.5px;color:var(--dim)}
.book__side li{display:flex;gap:10px;align-items:flex-start}
.book__side .small{color:var(--dim-2);margin-top:auto}
.book__who{display:flex;align-items:center;gap:12px;margin-top:4px}
.book__who > span{display:flex}
.book__who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.book__who img+img{margin-left:-16px}
.book__who div b{display:block;font-size:14px;font-weight:700}
.book__who div span{font-size:12.5px;color:var(--dim-2)}
.book__main{display:flex;flex-direction:column;min-width:0}
.book__steps{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-l);padding:0 12px}
.book__step{padding:18px 16px 15px;font-size:13.5px;font-weight:700;color:rgba(10,12,24,.38);display:flex;align-items:center;gap:9px;border-bottom:2px solid transparent;margin-bottom:-1px}
.book__step i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:11px;font-weight:700;font-style:normal;background:rgba(10,12,24,.08);color:rgba(10,12,24,.45)}
.book__step.is-on{color:var(--ink);border-bottom-color:var(--ink)}
.book__step.is-on i{background:var(--ink);color:var(--tx)}
.book__step.is-done{color:var(--ink-dim);cursor:pointer}
.book__step.is-done i{background:var(--blue);color:#06101f}
.book__form{padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px;align-content:start}
.book__form .field--full,.book__form .err,.book__form .btn,.book__form .hint,.book__form .accord{grid-column:1/-1}
.book__form .hint{font-size:13px;color:var(--ink-dim);margin:0 0 10px;line-height:1.5}
.field{display:grid;gap:5px;margin-bottom:11px}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:rgba(10,12,24,.55)}
.field label i{color:#e0483c;font-style:normal}
.field input,.field select,.book__form textarea{border:1px solid var(--line-l);border-radius:9px;font-size:14px;background:#fff;color:var(--ink);width:100%;transition:border-color .15s}
.field input,.field select{height:42px;padding:0 11px}
.book__form textarea{min-height:84px;padding:10px 11px;resize:vertical}
.field input:focus,.field select:focus,.book__form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(71,154,243,.14)}
.field--tel{display:grid;grid-template-columns:96px 1fr;gap:7px}
.field.is-bad input,.accord.is-bad{border-color:#e0483c;background:#fff6f5}
.err{display:none;font-size:12px;color:#c0392b;margin:-6px 0 10px;line-height:1.35}
.err.is-on{display:block}
.topics{display:flex;flex-wrap:wrap;gap:6px}
/* le bouton radio est caché DANS son étiquette, ancré à elle : sans ça il héritait de .field input
   (width:100 %) et débordait de 1 000 px à droite de la fenêtre */
.topics label{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-l);background:#fff;font-size:13px;font-weight:600;color:var(--ink-dim);cursor:pointer;transition:.15s;letter-spacing:0}
.topics input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.topics label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--tx)}
.topics label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.accord{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;padding:10px 12px;border:1px solid transparent;border-radius:9px;font-size:12.5px;line-height:1.45;color:var(--ink-dim);cursor:pointer}
.accord input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--ink)}
.accord a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.book__slots{padding:24px 28px 26px}
.book__slots[hidden]{display:none}
.book__slots .hint{font-size:13px;color:var(--ink-dim);margin:0 0 14px;line-height:1.5}
.book__days{display:flex;gap:8px;overflow:auto;padding-bottom:6px;margin:0 0 18px;scrollbar-width:none}
.book__days::-webkit-scrollbar{display:none}
.day{flex:none;min-width:74px;border:1px solid var(--line-l);border-radius:11px;padding:10px 10px 9px;text-align:center;transition:.18s;background:#fff;cursor:pointer}
.day:hover{border-color:var(--ink)}
.day.is-on{background:var(--ink);color:var(--tx);border-color:var(--ink)}
.day b{display:block;font-size:16px;font-weight:700}
.day span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.day small{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--blue-d);margin-top:2px;height:12px}
.day.is-on small{color:var(--blue-l)}
.slots{display:grid;gap:14px}
.slots__g small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:rgba(10,12,24,.55);margin-bottom:7px}
.slots__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px}
.slot{border:1px solid var(--line-l);border-radius:9px;height:40px;font-size:13.5px;font-weight:500;background:#fff;transition:.18s;cursor:pointer}
.slot:hover{border-color:var(--ink)}
.slot.is-on{background:var(--blue);border-color:var(--blue);color:#06101f;font-weight:700}
.routed{display:flex;align-items:center;gap:11px;margin:16px 0 0;padding:11px 13px;border-radius:11px;background:rgba(71,154,243,.1);border:1px solid rgba(71,154,243,.28)}
.routed img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.routed b{display:block;font-size:13.5px;font-weight:700}
.routed span{font-size:12.5px;color:var(--ink-dim)}
[data-confirm]:disabled{opacity:.45;cursor:default}
.book__alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:14px}
.linkbtn{font-size:12.5px;font-weight:600;color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,12,24,.25)}
.linkbtn:hover{color:var(--ink)}
.ok{display:none;text-align:center;padding:40px 24px}
.ok.is-on{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:420px}
.ok__badge{width:54px;height:54px;border-radius:50%;background:rgba(71,154,243,.16);color:var(--blue-d);display:grid;place-items:center;margin:0 auto 14px;font-size:22px}
.ok p{color:var(--ink-dim);margin:10px auto 0;max-width:42ch}
.book__echec{display:none;margin:10px 0 0;font-size:12.5px;color:#c0392b;grid-column:1/-1}
.book__echec.is-on{display:block}
@media (max-width:860px){
  .book{grid-template-columns:1fr}
  .book__side{border-radius:22px 22px 0 0}
  .book__form{grid-template-columns:1fr;padding:20px}
  .book__slots{padding:20px}
  .book__step{padding:14px 10px 12px;font-size:12.5px}
}