/* hauteurs d'écran plafonnées (--vh/--svh) : le robot de Google rend la page dans une fenêtre
   étirée à plusieurs milliers de px ; sans plafond, le hero et les sections s'étirent d'autant
   et le texte se retrouve tout en bas d'un écran vide. Aucun effet sur un vrai écran. */
:root{--vh:min(1vh,22px);--svh:min(1svh,22px)}
@media (max-width:820px){:root{--vh:min(1vh,12px);--svh:min(1svh,12px)}}
/* TunnelVision — styles communs des pages intérieures.
   Mise en page : scène 3D fixe en fond, hero plein cadre, puis une « feuille » de lecture sombre et calme. */
:root{
  --ink:#0a0a0d; --sheet:rgba(11,11,15,.93); --sheet-2:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --fg:#ecebf1; --fg-2:#cfcdd9; --muted:#a9a7b6;
  --diamond:#5ee6d8; --amethyst:#b48cf2; --torch:#f6b25a; --emerald:#3fe07c;
  --ok:#8ee0ad; --warn:#f2d37e; --bad:#ffb3b5;
  --display:"Chakra Petch","IBM Plex Sans",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --accent:var(--diamond);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-padding-top:90px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;margin:0;overflow-x:clip}
#gl{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0}
.veil{position:fixed;inset:0;background:#07070a;opacity:0;pointer-events:none;z-index:1}
.nogl #gl{display:none}
.nogl body{background:var(--fallback,linear-gradient(180deg,#12121a,#0a0a0d)) fixed}
a{color:var(--accent)}a:hover{color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:3px;color:var(--fg)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--ink);padding:10px 14px;border-radius:4px;font-weight:600}
.skip:focus{top:12px}

/* ---------- en-tête ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:6;padding:calc(env(safe-area-inset-top,0px) + 14px) clamp(16px,4vw,40px) 14px;display:flex;align-items:center;gap:20px;background:linear-gradient(180deg,rgba(6,6,9,.82),rgba(6,6,9,.3) 75%,transparent)}
.top{border-bottom:1px solid transparent}
.top.scrolled{background:rgba(9,9,12,.94);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px;flex:none}
.brand-ico{width:32px;height:32px;border-radius:7px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.links{display:flex;gap:2px;flex:1;font-size:15px}
.links a{color:var(--muted);text-decoration:none;padding:10px 11px;border-radius:4px}
.links a:hover{color:var(--fg)}
.links a[aria-current="page"]{color:var(--fg);background:rgba(255,255,255,.07)}
.lang{display:flex;font-family:var(--mono);font-size:13px;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
.lang a{padding:7px 10px;text-decoration:none;color:var(--muted)}
.lang a[aria-current]{background:var(--fg);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:3px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--body);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 0 rgba(0,0,0,.3)}
.btn.pri{background:var(--accent);color:#08161a}
.btn.pri:hover{filter:brightness(1.12);color:#08161a}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.12);color:var(--fg)}
.btn.dc{background:#5865f2;color:#fff;min-height:42px;flex:none}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:4px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);cursor:pointer;padding:0}
.menu-btn .x{display:none}.top.open .menu-btn .x{display:block}.top.open .menu-btn .b{display:none}

/* ---------- hero 3D ---------- */
.hero3d{position:relative;z-index:2;min-height:calc(92 * var(--vh));min-height:calc(92 * var(--svh));display:flex;align-items:flex-end;padding:120px clamp(16px,6vw,96px) clamp(48px,calc(9 * var(--vh)),96px)}
/* le voile déborde de 70vh sous le hero et s'y dilue : pas de bord net quand la feuille remonte */
.hero3d::before{content:"";position:absolute;inset:0 0 -70vh;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,8,.62),rgba(5,5,8,.18) 55%,transparent 75%),linear-gradient(0deg,rgba(5,5,8,.7) calc(70 * var(--vh)),transparent 100%);-webkit-mask-image:linear-gradient(#000 calc(100% - calc(70 * var(--vh))),transparent);mask-image:linear-gradient(#000 calc(100% - calc(70 * var(--vh))),transparent)}
.hero-in{max-width:760px;display:flex;flex-direction:column;gap:18px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:10px;height:10px;background:currentColor;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);flex:none}
.hero3d h1{font-size:clamp(36px,5.6vw,72px);line-height:1.02;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero3d .lead{font-size:clamp(16px,1.6vw,19px);color:var(--fg-2);max-width:60ch;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.scrollcue{position:absolute;right:clamp(16px,6vw,96px);bottom:clamp(48px,calc(9 * var(--vh)),96px);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue i{width:2px;height:40px;background:linear-gradient(var(--accent),transparent)}
.chips{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:600}
.chips span{padding:5px 10px;border-radius:3px}
.c-ok{background:#1d3628;color:var(--ok)}.c-warn{background:#3b3017;color:var(--warn)}.c-bad{background:#4a1c1f;color:var(--bad)}
.c-info{background:rgba(94,230,216,.12);color:var(--diamond)}

/* ---------- feuille de lecture ---------- */
main.read{position:relative;z-index:2;padding:0 clamp(12px,4vw,40px) 64px}
.sheet{max-width:1180px;margin:0 auto;background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,4.5vw,64px);box-shadow:0 40px 120px rgba(0,0,0,.5)}
.sheet-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.side{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.side .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 12px}
.side a{color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:4px;border-left:2px solid transparent;line-height:1.35}
.side a:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.side a.on,.side a[aria-current="page"]{color:var(--fg);border-left-color:var(--accent);background:rgba(255,255,255,.05)}
.prose{display:flex;flex-direction:column;gap:18px;min-width:0}
.prose h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin-top:30px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;line-height:1.3;margin-top:10px}
.prose p{font-size:17px;line-height:1.72;color:var(--fg-2);max-width:68ch}
.prose ul{margin:0;padding-left:20px;color:var(--fg-2);font-size:17px;line-height:1.7;max-width:68ch}
.sec-num{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em}
.note{display:flex;gap:14px;align-items:flex-start;background:var(--sheet-2);border:1px solid var(--line);border-radius:10px;padding:16px 18px;color:var(--fg-2);font-size:15.5px;max-width:72ch}
.note b{color:var(--fg)}
.note .ico{flex:none;width:34px;height:34px;font-family:var(--display);font-weight:700}
/* emplacement de texte à reprendre depuis la page actuelle : volontairement visible */
.ph{border:1px dashed rgba(255,255,255,.2);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:9px;max-width:68ch}
.ph span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.ph i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.07)}
.ph i:nth-child(3){width:92%}.ph i:nth-child(4){width:78%}.ph i:nth-child(5){width:56%}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--sheet-2);color:var(--fg);text-decoration:none;min-width:0;transition:border-color .2s,background .2s,transform .2s}
.card:hover{border-color:var(--line-2);background:rgba(255,255,255,.06);color:var(--fg);transform:translateY(-2px)}
.card strong{font-family:var(--display);font-size:18px;line-height:1.25}
.card span{font-size:14.5px;color:var(--muted);line-height:1.5}
.card em{font-style:normal;color:var(--accent);font-weight:600;font-size:14px;margin-top:auto}
.ico{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--accent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--sheet-2);min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;font-size:26px;line-height:1;color:var(--accent)}
.steps strong{font-family:var(--display);font-size:16px}
.steps span{font-size:13px;color:var(--muted)}
.ind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ind div{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--sheet-2);display:flex;flex-direction:column;gap:6px;min-width:0}
.ind b{font-family:var(--display);font-size:16.5px}
.ind span{font-size:13px;color:var(--muted);font-family:var(--mono)}
.sub-h{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:34px}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cta{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,34px);border-radius:14px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(94,230,216,.08),rgba(180,140,242,.08))}
.progress{position:fixed;left:0;top:0;height:3px;background:var(--accent);width:0;z-index:7}

/* captures agrandies au survol (zoom.js) */
img.zoomable{cursor:zoom-in}
.zoom-view{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:4vmin;background:rgba(5,5,8,.72);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s}
.zoom-view.on{opacity:1;visibility:visible}
.zoom-view img{max-width:min(92vw,1600px);max-height:88vh;width:auto;height:auto;border-radius:8px;border:1px solid var(--line-2);box-shadow:0 30px 120px rgba(0,0,0,.6)}
@media (hover:none),(pointer:coarse){.zoom-view.on{pointer-events:auto;cursor:zoom-out}}
/* grands écrans : le contenu grossit avec la fenêtre (paliers ; la hauteur borne aussi, pour les cartes sticky) */
:root{--k:1}
@media (min-width:1800px) and (min-height:950px){:root{--k:1.15}}
@media (min-width:2200px) and (min-height:1150px){:root{--k:1.3}}
@media (min-width:2900px) and (min-height:1500px){:root{--k:1.55}}
main.read,.hero-in,.top,footer{zoom:var(--k)}

/* formulaire */
form.req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;max-width:760px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-weight:600;font-size:15px}
.f small{font-size:13.5px;color:var(--muted)}
/* champs bien détachés du fond de la feuille : fond plus clair, bordure franche, focus marqué */
.f input,.f select,.f textarea{font:inherit;font-size:16px;color:var(--fg);background:#1d1d25;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:12px 14px;min-height:48px;width:100%;box-shadow:inset 0 1px 2px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .15s}
.f input:hover,.f select:hover,.f textarea:hover{border-color:rgba(255,255,255,.45)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,230,216,.22);outline:none}
.f input::placeholder,.f textarea::placeholder{color:#8b8998}
.f textarea{min-height:110px;resize:vertical}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.f select option{background:#15151b;color:var(--fg)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:#ff8b8b}
.err{color:#ffb3b5;font-size:13.5px;min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{grid-column:1/-1;border:1px solid rgba(142,224,173,.4);background:rgba(142,224,173,.08);border-radius:10px;padding:14px 16px;color:var(--ok);font-size:15px}

footer{position:relative;z-index:2;padding:32px clamp(16px,6vw,96px) calc(env(safe-area-inset-bottom,0px) + 40px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:#d0cfd8}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .menu-btn{display:inline-flex}
  .lang{margin-left:auto}
  .links{display:none;position:absolute;top:100%;left:clamp(12px,4vw,40px);right:clamp(12px,4vw,40px);flex-direction:column;gap:0;padding:8px;background:rgba(12,12,16,.96);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:calc(100svh - 90px);overflow-y:auto}
  .top.open .links{display:flex}
  .links a{min-height:48px;display:flex;align-items:center;padding:0 14px;font-size:16px;color:var(--fg)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .sheet-grid{grid-template-columns:minmax(0,1fr)}
  .side{position:relative;top:0;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -4px;padding:2px 4px 8px;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .lab{display:none}
  .side a{white-space:nowrap;border:1px solid var(--line);border-left-width:1px;border-radius:999px;padding:8px 14px;min-height:40px;display:flex;align-items:center}
  .side a.on,.side a[aria-current="page"]{border-color:var(--accent)}
  .related{grid-template-columns:minmax(0,1fr)}
  .ind{grid-template-columns:minmax(0,1fr)}
  .scrollcue{display:none}
}
@media (max-width:640px){
  .top{gap:8px;padding-inline:12px}
  .top .btn.dc{padding:0 12px}
  .top .btn.dc .dc-txt{display:none}
  .brand{font-size:17px}
  .lang a{padding:7px 8px}
  .hero3d{min-height:calc(86 * var(--svh));padding-bottom:36px}
  .hero3d .row .btn{flex:1 1 auto}
  .sheet{border-radius:12px}
  .prose p,.prose ul{font-size:16.5px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  form.req{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){ .brand span{display:none} }
@media (max-height:520px){
  .top{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:8px}
  .hero3d{min-height:calc(100 * var(--vh));padding-top:72px;padding-bottom:24px}
  .hero3d h1{font-size:clamp(26px,5vw,42px)}
}

/* ---------- passe mobile ---------- */
.lang-m{display:none}
@media (max-width:640px){
  .top{padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;gap:8px}
  .top .lang{display:none}
  .menu-btn{width:42px;height:42px}
  .top .btn.dc{min-height:42px;width:42px;padding:0;margin-left:auto}
  .lang-m{display:flex;gap:8px;padding:10px 14px 6px;border-top:1px solid var(--line);margin-top:6px;font-family:var(--mono);font-size:14px}
  .lang-m a{min-height:40px!important;padding:0 14px!important;border:1px solid var(--line);border-radius:4px;color:var(--muted)!important}
  .lang-m a[aria-current]{background:var(--fg);color:var(--ink)!important}
  /* hero : la scène occupe le haut de l'écran, le texte se tasse en bas */
  .hero3d{min-height:calc(100 * var(--vh));min-height:calc(100 * var(--svh));padding:72px 16px calc(env(safe-area-inset-bottom,0px) + 20px)}
  .hero3d::before{background:linear-gradient(0deg,rgba(5,5,8,.92) 0%,rgba(5,5,8,.55) 42%,transparent 68%)}
  .hero-in{gap:12px}
  .eyebrow{font-size:11px}
  .hero3d h1{font-size:clamp(27px,8vw,36px);line-height:1.06}
  .hero3d .lead{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero3d .row{flex-wrap:nowrap}
  .hero3d .row .btn{flex:1 1 0;min-height:46px;padding:0 10px;font-size:14.5px;white-space:nowrap}
  .legend{display:none}
  .meta{font-size:12px}
  /* feuille de lecture bord à bord */
  main.read{padding:0}
  .sheet{border-radius:20px 20px 0 0;border-left:0;border-right:0;padding:26px 18px 36px;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
  .sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:-12px auto 18px}
  .prose{gap:14px}
  .prose h2{font-size:23px;margin-top:22px}
  .cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .card{padding:14px 16px;gap:4px;border-radius:10px}
  .card:has(.ico){display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start}
  .card:has(.ico) .ico{grid-row:span 3;width:36px;height:36px}
  .card strong{font-size:16px}
  .card span{font-size:13.5px}
  .card em{display:none}
  .note{padding:14px;gap:12px;font-size:14.5px}
  .cta{padding:20px 18px}
  .cta .row .btn{flex:1 1 auto}
  footer{flex-direction:column;gap:14px;padding:24px 18px calc(env(safe-area-inset-bottom,0px) + 28px);background:#09090c}
}
@media (max-height:520px){
  .top .lang{display:none}
  .top .btn.dc{margin-left:auto}
  .lang-m{display:flex;gap:8px;padding:10px 14px 6px;border-top:1px solid var(--line);margin-top:6px;font-family:var(--mono)}
  .hero-in{max-width:58%;gap:10px}
  .hero3d .lead,.legend,.meta{display:none}
  .hero3d .row .btn{min-height:42px}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}.card:hover{transform:none}}

/* =====================================================================
   Refonte complète : ajouts pour porter tout le contenu du site actuel
   ===================================================================== */
:root{
  /* alias des jetons de l'ancien thème, utilisés par les schémas SVG en ligne */
  --ink-2:var(--fg-2); --ink-3:var(--muted); --border:var(--line); --panel:#15151b; --raised:rgba(255,255,255,.04);
  --good:#3fd27a; --crit:#ff6b6b; --accent-ink:#08161a;
}
img{max-width:100%;height:auto}
.links a[aria-current="page"],.links a.on{color:var(--fg);background:rgba(255,255,255,.07)}
.btn.am{background:var(--amethyst);color:#1a0e2e}
.btn.am:hover{filter:brightness(1.1);color:#1a0e2e}

/* variantes de hero : compact (pages légales), message (merci, 404) */
.hero3d.compact{min-height:calc(64 * var(--vh));min-height:calc(64 * var(--svh))}
.hero3d.compact h1{font-size:clamp(32px,4.6vw,58px)}
.msg{position:relative;z-index:2;min-height:calc(100 * var(--vh));min-height:calc(100 * var(--svh));display:flex;align-items:center;justify-content:center;padding:110px 16px 60px}
.msg-card{width:min(640px,100%);background:rgba(10,10,14,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line-2);border-radius:16px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.msg-card h1{font-size:clamp(30px,4.4vw,48px);line-height:1.05}
.msg-card .lead{color:var(--fg-2);font-size:17px}
.msg-card .check{width:54px;height:54px;display:grid;place-items:center;border-radius:6px;background:var(--accent);color:#08161a;font-family:var(--display);font-size:28px;font-weight:700;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25)}
.msg-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.msg-links a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--sheet-2);text-decoration:none;color:var(--fg)}
.msg-links a span{font-size:13px;color:var(--muted)}
.msg-links a:hover{border-color:var(--accent)}
@media (max-width:640px){.msg{align-items:flex-end;padding:90px 12px calc(env(safe-area-inset-bottom,0px) + 16px)}.msg-links{grid-template-columns:minmax(0,1fr)}}

/* lecture : une seule colonne quand la page n'a pas de sommaire */
.sheet.narrow{max-width:860px}
.sheet-grid.solo{grid-template-columns:minmax(0,1fr)}
.side .lab + a{margin-top:0}
.side .lab.more{margin-top:18px}
.side .pages a{font-size:13.5px;padding:7px 12px}
@media (max-width:900px){.side .pages,.side .lab.more{display:none}}

/* ---------- contenu repris du site actuel, dans .prose ---------- */
.prose section,.prose .wrap{all:unset;display:flex;flex-direction:column;gap:18px}
.prose > section + section,.prose .wrap + section{margin-top:14px}
.prose h2{scroll-margin-top:96px}
.prose h3{scroll-margin-top:96px}
.prose strong{color:var(--fg)}
.prose em{color:var(--fg)}
.prose ol{margin:0;padding-left:22px;color:var(--fg-2);font-size:17px;line-height:1.7;max-width:68ch}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--accent)}
.prose .lead,.prose .chapo{font-size:clamp(18px,1.8vw,21px);line-height:1.6;color:var(--fg)}
.meta{font-family:var(--mono);font-size:13px;color:var(--fg-2);display:flex;gap:14px;flex-wrap:wrap}
.prose .meta{margin-top:-6px}
h2 .num{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;margin-right:12px;vertical-align:4px;font-family:var(--mono);font-size:14px;color:var(--accent);border:1px solid var(--line-2);border-radius:4px;text-decoration:none;background:rgba(255,255,255,.04)}
h2 .num:hover{border-color:var(--accent);color:var(--fg)}
.prose pre{margin:0;max-width:100%;overflow-x:auto;background:#07070a;border:1px solid var(--line);border-radius:10px;padding:16px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--fg)}
.prose pre code{background:none;padding:0;font-size:inherit;color:inherit}
pre.code .c{color:#7f7d8c}
pre.code .k{color:var(--diamond)}
pre.code .s{color:var(--torch)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;max-width:100%}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg-2)}
.prose th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.prose td strong{color:var(--fg)}
.prose tr:last-child td{border-bottom:0}
.prose table a{color:var(--fg)}
.prose table a:hover{color:var(--accent)}
.tbl-scroll{overflow-x:auto;max-width:100%}
.datatable .method{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent)}
.datatable .path{font-family:var(--mono);font-size:13px;color:var(--fg)}
.req{display:inline-block;font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:3px}
.req.yes{background:#1d3628;color:var(--ok)}
.req.no{background:rgba(255,255,255,.06);color:var(--muted)}
.summary,.callout{display:flex;flex-direction:column;gap:8px;background:var(--sheet-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:16px 18px;max-width:72ch}
.summary h2{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}
.summary p,.callout p{font-size:15.5px;line-height:1.65;color:var(--fg-2);margin:0;max-width:none}
.callout:has(> .dot){flex-direction:row;align-items:flex-start;gap:14px}
.callout .dot{flex:none;width:30px;height:30px;border-radius:4px;display:grid;place-items:center;font-family:var(--display);font-weight:700;background:rgba(94,230,216,.12);color:var(--accent)}
.callout .label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.callout.warn{border-left-color:var(--warn)}
.callout.warn .dot{background:rgba(242,211,126,.14);color:var(--warn)}
.callout.warn .label{color:var(--warn)}
.callout.good{border-left-color:var(--ok)}
.callout.good .label,.callout.good .dot{color:var(--ok)}
.note.plain{display:block}
.note.plain p{margin:0}
ol.checklist{list-style:none;padding:0;counter-reset:ck;display:flex;flex-direction:column;gap:10px}
ol.checklist li{counter-increment:ck;position:relative;padding-left:44px;min-height:30px;margin:0;font-size:16px;line-height:1.6}
ol.checklist li::before{content:counter(ck);position:absolute;left:0;top:-1px;width:30px;height:30px;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--accent);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:4px}
/* lien vers un autre article : carte */
a.related{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--sheet-2);text-decoration:none;color:var(--fg);max-width:72ch;transition:border-color .2s,transform .2s}
a.related:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--fg)}
a.related .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
a.related .t{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3}
.related-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.related-group a.related{max-width:none}
.cta-box{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,34px);border-radius:14px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(94,230,216,.08),rgba(180,140,242,.08));margin-top:22px}
.cta-box h2{margin:0!important}
.cta-box .cta-actions{display:flex;gap:10px;flex-wrap:wrap}
/* figures et captures */
.figure{margin:0;display:flex;flex-direction:column;gap:12px;background:#0b0b10;border:1px solid var(--line);border-radius:12px;padding:18px;--accent:var(--diamond)}
.figure svg{display:block;width:100%;height:auto}
.figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.figure figcaption{font-size:14.5px;line-height:1.55;color:var(--fg-2)}
.figure-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14.5px;color:var(--fg-2)}
.figure-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:12.5px;color:var(--fg-2)}
.figure-legend .sw{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.figure img.zoomable{cursor:zoom-in}
.zoom-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:3vmin;background:rgba(5,5,8,.85);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s}
.zoom-overlay.open{opacity:1;visibility:visible}
.zoom-overlay.pinned{pointer-events:auto;cursor:zoom-out}
.zoom-overlay img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;border:1px solid var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,.5)}
/* comparatif envoyé / jamais envoyé */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare .cmp{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--sheet-2)}
.compare .cmp h3{margin:0 0 8px}
.compare .cmp.yes{border-top:3px solid var(--ok)}
.compare .cmp.no{border-top:3px solid var(--bad)}
.compare .cmp.warn{border-top:3px solid var(--warn)}
.compare .cmp ul{font-size:15.5px;padding-left:18px}
/* infobulles de l'API */
code.hint{cursor:help;position:relative;border:1px solid transparent}
code.hint:hover,code.hint:focus-visible{border-color:var(--accent);outline:none}
.hint-pop{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:280px;background:#15151b;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font:13px/1.45 var(--body);color:var(--fg-2);text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:60}
.hint-pop strong{display:block;color:var(--fg);margin-bottom:6px}
.hint-pop .ex{display:block;margin-top:4px;background:#07070a;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:11.5px/1.4 var(--mono);color:var(--diamond);white-space:pre-wrap;word-break:break-word}
code.hint:hover .hint-pop,code.hint:focus-visible .hint-pop{opacity:1;visibility:visible}
.status-list{display:flex;flex-wrap:wrap;gap:8px}
.status-chip{font-family:var(--mono);font-size:12.5px;padding:5px 10px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--fg-2)}
.status-chip strong{color:var(--fg)}
/* hub documentation */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hub-card{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--sheet-2);color:var(--fg);text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.hub-card:hover{border-color:var(--accent);background:rgba(255,255,255,.06);color:var(--fg);transform:translateY(-2px)}
.hub-card .icon{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--accent);font-size:18px}
.hub-card .icon svg{width:22px;height:22px}
.hub-card h2,.hub-card h3{font-family:var(--display);font-size:18px!important;line-height:1.25;margin:0!important}
.hub-card p{font-size:14.5px!important;color:var(--muted)!important;line-height:1.5!important}
.hub-card .arrow{color:var(--accent);font-weight:600;font-size:14px;margin-top:auto}
.prose .section-title{margin-top:34px}
/* formulaire réel (demande d'accès) */
.req-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;max-width:760px}
.req-form .full{grid-column:1/-1}
.f .hint{font-size:13.5px;color:var(--muted);margin:0}
.form-error .error{border:1px solid rgba(255,139,139,.45);background:rgba(255,139,139,.08);border-radius:10px;padding:12px 14px;color:var(--bad);font-size:15px}
.form-error:empty{display:none}
@media (max-width:640px){.req-form{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.compare,.figure-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .prose table:not(.keep){display:block;overflow-x:auto}
  .hint-pop{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;transform:none}
}
/* aperçu du redesign (bandeau brouillon) : n'existe pas en production */
.draft-banner{position:fixed;left:0;right:0;bottom:0;z-index:99;background:#ffd400;color:#000;font:600 13px/1.3 system-ui,sans-serif;text-align:center;padding:6px 10px;pointer-events:none}
ul.lang,ul.lang-m{list-style:none;margin:0;padding:0}
.nav-lang{display:contents}
.lang a[aria-current="true"]{background:var(--fg);color:var(--ink)}
.lang-m a[aria-current="true"]{background:var(--fg);color:var(--ink)!important}
.prose :not(pre) > code{overflow-wrap:anywhere}
/* fenêtre étroite ET très haute : aucun téléphone ni tablette réel, c'est le rendu étiré du robot de
   Google. Le texte du hero passe en haut, pour qu'il apparaisse dans sa capture au lieu d'un écran vide. */
@media (max-width:820px) and (min-height:1300px){
  .hero3d,.hero3d.compact{min-height:0;align-items:flex-start;padding-top:96px}
}