/* ============================================================
   Hdplio - site de présentation
   DA alignée sur la console : sobriété chromatique (la couleur
   porte un état, elle ne décore pas), rayons courts, en-tête plat,
   densité resserrée. Thème clair uniquement. Zéro requête tierce.
   ============================================================ */

:root{
  color-scheme:light;
  /*, Surfaces, */
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --card:#ffffff;
  --card-2:#fbfbfc;
  --ink-block:#0d1117;
  --line:#e4e7ec;
  --line-2:#eef0f3;

  /*, Encre, */
  --ink:#0d1117;
  --ink-2:#4b5462;
  --ink-3:#79828f;
  --ink-faint:#c0c6cf;

  /*, Accent : signature et état, jamais décor, */
  --accent:#ff4000;
  /* Le ton profond du MÊME rouge-orangé. Il existe parce que #ff4000 sur blanc
     donne 3,5:1 : assez pour un grand titre, pas pour du texte courant ni pour
     du blanc posé dessus (survol du bouton principal). Celui-ci tient 4,8:1. */
  --accent-ink:#d63500;
  --accent-soft:#ffece5;
  --ok:#1a8a3a;
  --ok-soft:#e8f7ed;

  /*, Géométrie (rayons courts, cf. console), */
  --radius:10px;
  --radius-sm:7px;
  --radius-lg:14px;
  --radius-pill:100px;

  --shadow-s:0 1px 2px rgba(13,17,23,.05);
  --shadow-m:0 1px 2px rgba(13,17,23,.05), 0 14px 34px -24px rgba(13,17,23,.30);

  --maxw:1120px;
  --gut:clamp(18px,4.6vw,36px);
  --sec:clamp(72px,9.5vw,124px);

  /* 2026-10-09 (lot A) : derrière le pont du moteur fontes (fontes/fontes.css, copie engendrée par tools/gen-icons.php) : Inter servie par la vitrine ; sans la feuille, l'appareil. */
  --ff:var(--fontes-sans, -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif);
  --ff-mono:var(--fontes-mono, ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace);
  --ease:cubic-bezier(.22,.61,.36,1);
}


*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:16.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--radius-sm)}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ============================================================
   Typo
   ============================================================ */
h1,h2,h3,h4{font-weight:640;line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--ink-3)}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.lead{color:var(--ink-2);font-size:clamp(16.5px,1.55vw,19px);line-height:1.6}
.lead-tight{margin-top:14px}
/* `.tint` ne sert qu'à deux endroits, tous deux en très gros (le titre du héros
   et « un copilote qui AGIT ») : le seuil de 3:1 des grands textes s'y applique,
   donc ils prennent la couleur pleine. Tout le petit texte garde --accent-ink. */
.tint{color:var(--accent)}
.mono{font-family:var(--ff-mono)}

/* ============================================================
   Boutons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-weight:520;font-size:14.5px;padding:9px 17px;border-radius:var(--radius-sm);
  transition:background .18s, border-color .18s, color .18s, transform .18s var(--ease);
  white-space:nowrap;border:.5px solid transparent;
}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--accent-ink);color:#fff}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-faint);background:var(--bg-soft)}
.btn-on-dark{background:#fff;color:#0d1117}
.btn-on-dark:hover{background:#e9eaee}
.btn-ghost-dark{background:transparent;border-color:rgba(255,255,255,.22);color:#fff}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.btn-lg{padding:12px 22px;font-size:15.5px}

.icon-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--ink-2);border:.5px solid transparent;transition:.18s}
.icon-btn:hover{background:var(--bg-soft);border-color:var(--line);color:var(--ink)}
.icon-btn svg{width:17px;height:17px}
#themeBtn .i-moon{display:none}


/* ============================================================
   Nav, en-tête PLAT (pas de relief, pas de dégradé)
   ============================================================ */
/* Barre translucide EN PERMANENCE, pas seulement au défilement : c'est ce qui
   fait la barre Apple. Elle se lit par-dessus ce qui passe dessous au lieu de
   se montrer puis de disparaître. `saturate(180%)` avant le flou ravive les
   couleurs que le flou éteint. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid color-mix(in srgb, var(--ink) 8%, transparent);
  transition:background .25s, border-color .25s;
}
/* Au défilement, la barre s'opacifie d'un cran : le contenu qui glisse dessous
   ne doit jamais rendre un lien illisible. */
.nav.scrolled{background:color-mix(in srgb, var(--bg) 86%, transparent)}
.nav-in{display:flex;align-items:center;gap:18px;height:48px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:8px;font-weight:640;font-size:15px;letter-spacing:-.02em;flex:none}
.brand .mark{width:25px;height:25px;flex:none;color:var(--ink)}
.brand b span{color:var(--accent-ink)}
/* Nav CENTRÉE : la marque à gauche, la porte à droite, les rubriques au milieu.
   `margin:0 auto` sur le seul élément souple suffit, sans grille à trois zones. */
.nav-links{display:flex;align-items:center;gap:26px;margin:0 auto}
/* Les rubriques sont du texte NOIR, pas une couleur de marque : l'accent est
   réservé à ce qu'on veut faire remarquer, et une barre de navigation ne se
   fait pas remarquer. 88 % d'encre au repos, l'encre pleine au survol. */
.nav-links a{color:color-mix(in srgb, var(--ink) 88%, transparent);font-size:12.5px;font-weight:450;letter-spacing:.01em;transition:color .18s;position:relative;padding:3px 0}
.nav-links a:hover{color:var(--ink)}
/* La rubrique courante se dit par le poids et l'encre pleine. Le soulignement
   de couleur qui vivait ici est retiré : c'était le seul accent de la barre. */
.nav-links a.active{color:var(--ink);font-weight:560}
.nav-cta{display:flex;align-items:center;gap:8px;flex:none}
.nav-cta .btn{font-size:12.5px;font-weight:500;padding:5px 13px;border-radius:var(--radius-pill)}
.nav-burger{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:126px 0 var(--sec);text-align:center;overflow:hidden}
.hero-aura{position:absolute;top:-300px;left:50%;transform:translateX(-50%);width:900px;height:700px;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.30}
.hero-aura::before,.hero-aura::after{content:"";position:absolute;inset:0;border-radius:50%}
.hero-aura::before{background:conic-gradient(from 0deg,#ffcebc,#ffe4d8,#ffeadb,#fff3ec,#ffcebc);animation:spin1 30s linear infinite}
.hero-aura::after{background:radial-gradient(40% 40% at 60% 35%, rgba(255,64,0,.26), transparent 70%);animation:spin2 38s linear infinite}

@keyframes spin1{to{transform:rotate(360deg)}}
@keyframes spin2{to{transform:rotate(-360deg)}}

.hero h1{font-size:clamp(37px,5.8vw,70px);font-weight:660;letter-spacing:-.035em;line-height:1.04;max-width:21ch;margin:20px auto 0}
.hero .lead{margin:20px auto 0;max-width:56ch}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* Les deux boutons du héros, réunis dans une pilule à filet fin (7 octobre 2026). */
.hero .hero-cta{width:max-content;max-width:100%;margin:28px auto 0;padding:0;gap:6px;border:.5px solid var(--line);border-radius:var(--radius-pill);background:var(--card)}
.hero .hero-cta .btn{border-radius:var(--radius-pill)}
.hero .hero-cta .btn-ghost{border-color:transparent;background:transparent}
.hero .hero-cta .btn-ghost:hover{background:var(--bg-soft)}
.hero-note{margin-top:16px;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-3)}

/* Fenêtre app */
.hero-stage{margin-top:56px}
.app-window{
  max-width:960px;margin:0 auto;border-radius:var(--radius-lg);
  background:var(--card);border:.5px solid var(--line);box-shadow:var(--shadow-m);
  overflow:hidden;transform-origin:center top;will-change:transform;
}
.aw-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:.5px solid var(--line-2);background:var(--card-2)}
.aw-bar .dots{display:flex;gap:6px;flex:none}
.aw-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.aw-bar .url{margin-left:6px;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-bar .url b{color:var(--accent-ink);font-weight:500}
.aw-bar .live{margin-left:auto;font-family:var(--ff-mono);font-size:10.5px;color:var(--ok);display:flex;align-items:center;gap:6px;flex:none}
.aw-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.aw-body{display:grid;grid-template-columns:186px 1fr;min-height:300px;text-align:left}
.aw-side{border-right:.5px solid var(--line-2);padding:12px 9px;background:var(--card-2)}
.aw-side .si{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2)}
.aw-side .si.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:520}
.aw-side .si .d{width:14px;height:14px;border-radius:4px;background:var(--line);flex:none}
.aw-side .si.on .d{background:var(--accent)}
.aw-side .si .v{margin-left:auto;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);font-weight:400}
.aw-side .si.on .v{color:var(--accent-ink)}
.aw-side .si.pose .d{background:var(--accent);opacity:.55}
.aw-main{padding:20px 22px;display:flex;flex-direction:column}
.aw-steps h4{font-family:var(--ff-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin-bottom:10px;font-weight:500}
.aw-step{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px;color:var(--ink-3);border-bottom:.5px solid var(--line-2);transition:color .3s}
.aw-step:last-child{border-bottom:none}
.aw-step .ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;margin-left:auto;display:grid;place-items:center;transition:.25s}
.aw-step.done{color:var(--ink)}
.aw-step.done .ring{border-color:var(--ok);background:var(--ok-soft)}
.aw-step.done .ring::after{content:"";width:5px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.aw-step.active{color:var(--ink)}
.aw-step.active .ring{border-color:var(--accent);border-right-color:transparent;animation:spin .8s linear infinite}
.aw-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aw-foot .mono{font-size:11px;color:var(--ink-3)}
.tag-ok{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ok);background:var(--ok-soft);border-radius:var(--radius-pill);padding:3px 9px;display:inline-flex;align-items:center;gap:5px}
.tag-ok::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   Sections
   ============================================================ */
/* Le rythme de la page : chaque section a le même souffle, et les fonds alternent
   STRICTEMENT blanc / gris (héros blanc, puis gris, blanc, gris…), un filet à chaque
   changement. Deux sections de même fond ne se suivent jamais : c'est ce qui délimite. */
section{position:relative;padding:var(--sec) 0}
.soft{background:var(--bg-soft);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)}
.sec-head{max-width:660px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,4.2vw,48px);font-weight:660;letter-spacing:-.032em;margin-top:14px}
.sec-head .lead{margin-top:16px;max-width:62ch}
.sec-head.center .lead{margin-inline:auto}
.h-md{font-size:clamp(27px,3.7vw,44px);font-weight:660;letter-spacing:-.032em;margin-top:14px}

/*, Manifeste, */
.manifesto{text-align:center}
.manifesto-words{font-size:clamp(26px,4.6vw,54px);font-weight:640;letter-spacing:-.032em;line-height:1.15;max-width:19ch;margin:0 auto}
.manifesto-words .w{color:var(--ink-faint);transition:color .18s linear;display:inline-block}
.manifesto-words .w.lit{color:var(--ink)}
.manifesto-words .w.acc.lit{color:var(--accent-ink)}

/* ============================================================
   Parcours, 3 temps
   ============================================================ */
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;counter-reset:s}
/* « Trois temps » : ni bordure ni effet au survol (le proprio, 2026-10-09) : ce sont des encarts à lire, pas à cliquer. */
.s3{background:var(--card);border:0;border-radius:var(--radius);padding:24px 22px 22px;display:flex;flex-direction:column}
.s3 h3{font-size:19px;margin:10px 0 8px}
.s3 p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.s3 p em{font-style:normal;font-family:var(--ff-mono);font-size:12px;border:.5px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-2)}
.s3-vis{margin-top:20px;padding-top:18px;border-top:.5px solid var(--line-2);display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:56px}
.chip-cmd{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);background:var(--bg-soft);border:.5px solid var(--line-2);border-radius:var(--radius-sm);padding:8px 11px;line-height:1.3}
.chip-cmd svg{width:14px;height:14px;flex:none;color:var(--accent-ink)}
.chip-file{font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);background:var(--bg-soft);border:.5px solid var(--line-2);border-radius:var(--radius-sm);padding:6px 10px}
.chip-file.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.lib-rayon{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.lib-rayon .chip-file{font-family:inherit;font-size:13px}
.s3-pipe{gap:0}
.s3-pipe .pn,.b-pipe .pn{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);background:var(--card);flex:none}
.s3-pipe .pn.done,.b-pipe .pn.done{border-color:var(--ok);background:var(--ok)}
.s3-pipe .pn.run,.b-pipe .pn.run{border-color:var(--accent);border-right-color:transparent;animation:spin .9s linear infinite}
.s3-pipe .pl,.b-pipe .pl{height:2px;flex:1;background:var(--ok);min-width:14px}
.s3-pipe .pl.off,.b-pipe .pl.off{background:var(--line)}

/* ============================================================
   Feature : média collant + étapes
   ============================================================ */
.feature{position:relative;margin-top:clamp(48px,7vw,88px)}
.feature-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,5vw,72px);align-items:start}
.feature.rev .feature-media{order:2}
.feature-media{position:sticky;top:92px}
.media-card{border-radius:var(--radius-lg);border:.5px solid var(--line);background:var(--bg-soft);overflow:hidden;aspect-ratio:4/3;position:relative}
.media-card .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px;opacity:.55;-webkit-mask:radial-gradient(75% 75% at 50% 45%,#000,transparent);mask:radial-gradient(75% 75% at 50% 45%,#000,transparent)}
.mc-svg{position:absolute;inset:0;width:100%;height:100%}
.feature-steps{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.fstep{padding:22px;border-radius:var(--radius);border:.5px solid transparent;background:var(--bg-soft);transition:background .3s, border-color .3s}
.soft .fstep{background:var(--card-2)}
.fstep.on{background:var(--card);border-color:var(--line)}
.fstep h3{font-size:19px;margin:9px 0 7px}
.fstep p{color:var(--ink-2);font-size:14.5px;line-height:1.6}

/*, Illustrations SVG thémées, */
.f-card{fill:var(--card)}
.f-soft{fill:var(--accent-soft)}
.f-line{fill:var(--line)}
.f-acc{fill:var(--accent)}
.f-ok{fill:var(--ok)}
.s-line{stroke:var(--line);stroke-width:1.5}
.s-acc{stroke:var(--accent)}
.s-ok{stroke:var(--ok)}

/* ============================================================
   Galerie ateliers (épinglée, défilement horizontal)
   ============================================================ */
.gallery{padding:0;overflow:clip}
.gallery-pin{position:relative}
.gallery-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.gallery-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
.gallery-view{margin-top:34px;overflow:hidden}
.gallery-track{display:flex;gap:16px;padding:4px var(--gut) 8px;width:max-content;will-change:transform}
.gcard{
  flex:0 0 306px;border-radius:var(--radius);background:var(--card);
  border:.5px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s, transform .3s var(--ease);
}
.gcard:hover{transform:translateY(-3px);border-color:var(--ink-faint)}
.gmedia{height:172px;position:relative;overflow:hidden;border-bottom:.5px solid var(--line-2);background:var(--bg-soft)}
.gmedia .mesh{position:absolute;inset:0;background:radial-gradient(60% 80% at 22% 12%, var(--accent-soft), transparent 62%),radial-gradient(50% 70% at 88% 88%, var(--accent-soft), transparent 62%)}
/* Les ateliers se montrent : une scène miniature de chaque outil, dessinée en SVG,
   peinte par les jetons du thème. */
.gvis{position:absolute;inset:0;width:100%;height:100%;display:block}
.gvis .v-card{fill:var(--card)}
.gvis .v-paper{fill:var(--bg)}
.gvis .v-soft-bg{fill:var(--bg-soft)}
.gvis .v-line{stroke:var(--line);stroke-width:1}
.gvis path.v-line{fill:none}
.gvis .v-faint{fill:var(--line)}
.gvis .v-ink{fill:var(--ink-3)}
.gvis .v-acc{fill:var(--accent)}
.gvis .v-acc-s{stroke:var(--accent);fill:none;stroke-width:1.3}
.gvis .v-paper.v-acc-s{fill:var(--bg)}
.gvis .v-sel{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
.gvis .v-ok{fill:var(--ok)}
.gvis .v-ok-soft{fill:var(--ok-soft)}
.gvis .v-ok-bar{fill:var(--ok);opacity:.45}
.gvis .v-check{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.gvis .v-on-acc{fill:#fff}
.gvis .v-stop-a{stop-color:var(--accent)}
.gvis .v-stop-b{stop-color:var(--accent-soft)}
.gvis .v-stop-c{stop-color:var(--accent-ink)}
.gvis .v-tt{font:500 8.5px var(--ff-mono);fill:var(--ink-3)}
.gvis .v-mono{font:8px var(--ff-mono)}
.gvis .v-ink-t{fill:var(--ink-2)}
.gvis .v-ink3-t{fill:var(--ink-3)}
.gvis .v-acc-t{fill:var(--accent-ink)}
.gvis .v-ok-t{fill:var(--ok);font-size:7.5px}
.gvis .pen{stroke:var(--accent)}
.gvis .v-handle{stroke:var(--accent);stroke-width:1;opacity:.55}
.gvis .v-grid{stroke:var(--line);stroke-width:1;fill:none}
.gvis .v-edge{stroke:var(--ink-3);stroke-width:1.2;stroke-linejoin:round}
.gvis .v-face-l{fill:var(--bg-soft)}
.gvis .v-face-r{fill:var(--accent-soft)}
.gvis .v-hole{fill:var(--bg-soft);stroke:var(--accent);stroke-width:1.4}
.gvis .v-axes{stroke:var(--ink-3)}
.gvis .v-sel-cell{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6}
.gvis .v-bar{fill:var(--accent);opacity:.32}
.gvis .v-screen{fill:var(--ink-block)}
.gvis .v-sun{fill:var(--accent-soft)}
.gvis .v-play{fill:#fff;opacity:.9}
.gvis .v-clip{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
.gvis .v-clip-2{fill:var(--bg-soft);stroke:var(--ink-faint);stroke-width:1}
.gvis .v-fade{fill:var(--accent);opacity:.25}
.gvis .v-wave rect{fill:var(--ink-faint)}
.gvis .v-dev{fill:var(--card);stroke:var(--ink-faint);stroke-width:1.2}
.gvis .v-stamp{fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.4;stroke-dasharray:3 2}
.gvis .v-code-a{fill:var(--accent)}
.gvis .v-code-b{fill:#8fb4ff}
.gvis .v-code-c{fill:#7c8796}
/* Deux gestes vivants, pas plus : la plume qui trace, la tête de lecture qui avance. */
.gvis .pen{stroke-dasharray:260;stroke-dashoffset:260;animation:v-trace 3.2s var(--ease) .4s infinite alternate}
.gvis .playhead{animation:v-lecture 7s linear infinite}
@keyframes v-trace{to{stroke-dashoffset:0}}
@keyframes v-lecture{from{transform:translateX(-62px)}to{transform:translateX(170px)}}
@media (prefers-reduced-motion:reduce){.gvis .pen{animation:none;stroke-dashoffset:0}.gvis .playhead{animation:none}}
.gbody{padding:20px;display:flex;flex-direction:column;flex:1}
.gbody h3{font-size:18px;margin-bottom:7px}
/* Le logo de l'app devant son nom (CDC_VITRINE_V2 V5) : le même que dans l'app, copié par tools/vitrine.php. */
.gapp{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.gapp img{width:32px;height:32px;flex:none}
.gapp h3{margin:0}
.gbody p{color:var(--ink-2);font-size:14px;line-height:1.55}
.gbody .tag{margin-top:auto;padding-top:16px;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.03em}

/* Repli : bande à défilement natif */
.no-js .gallery,.gallery.plain{padding:var(--sec) 0}
.no-js .gallery-sticky,.gallery.plain .gallery-sticky{position:static;height:auto;display:block;overflow:visible}
.no-js .gallery-pin,.gallery.plain .gallery-pin{height:auto!important}
.no-js .gallery-view,.gallery.plain .gallery-view{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.no-js .gallery-track,.gallery.plain .gallery-track{transform:none!important}
.no-js .gcard,.gallery.plain .gcard{scroll-snap-align:start}

/* ============================================================
   Pilote
   ============================================================ */
.pilot-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,5vw,68px);align-items:start}
.pilot-feats{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.pfeat{display:flex;gap:14px;padding:15px 14px;border-radius:var(--radius);transition:background .2s}
.pfeat:hover{background:var(--card)}
.pfeat .pi{width:34px;height:34px;border-radius:var(--radius-sm);flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.pfeat .pi svg{width:18px;height:18px}
.pfeat h4{font-size:15.5px;margin-bottom:4px}
.pfeat p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.pfeat p b{color:var(--ink);font-weight:600}
.cmdk{background:var(--card);border:.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-m);overflow:hidden;position:sticky;top:96px}
.cmdk-top{display:flex;align-items:center;gap:10px;padding:14px 15px;border-bottom:.5px solid var(--line-2)}
.cmdk-ic{width:17px;height:17px;flex:none;color:var(--accent-ink)}
.cmdk-top input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-size:15px;font-family:inherit}
.cmdk-top .kbd{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);border:.5px solid var(--line);padding:3px 7px;border-radius:5px;flex:none}
.cmdk-list{padding:6px}
.cmdk-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);font-size:14px;color:var(--ink-2)}
.cmdk-row .ri{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:var(--bg-soft);color:var(--ink-3);flex:none}
.cmdk-row .ri svg{width:15px;height:15px}
.cmdk-row.on{background:var(--accent-soft);color:var(--accent-ink)}
.cmdk-row.on .ri{background:transparent;color:var(--accent-ink)}
.cmdk-row .meta{margin-left:auto;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);flex:none}
.cmdk-foot{padding:10px 14px;border-top:.5px solid var(--line-2);font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap}
.cmdk-note{margin-top:14px;font-size:13px;color:var(--ink-3);text-align:center}

/* ============================================================
   Showcase à onglets
   ============================================================ */
.sc{margin-top:40px}
/* Les quatre onglets du showcase forment UNE commande (le proprio, 2026-10-09 : « unifie-les, une bordure qui
   englobe tout », comme la bascule Accueil / Paramètres de l'app) : un seul cadre, des onglets sans bordure, et un
   projecteur (.sc-ind, posé par app.js) qui glisse sous l'onglet actif au lieu d'un fond qui saute. */
.sc-tabs{position:relative;display:flex;gap:0;width:fit-content;max-width:100%;margin:0 auto 20px;padding:0;
  border:.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);overflow-x:auto;scrollbar-width:none}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-ind{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:var(--radius-sm);background:var(--ink);
  transform:translateX(0);transition:transform .22s cubic-bezier(.2,.8,.2,1),width .22s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:0}
.sc-ind.sans-glisse{transition:none}
.sc-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--ink-2);font-weight:500;font-size:13.5px;white-space:nowrap;transition:color .18s}
.sc-tab svg{width:15px;height:15px;flex:none}
.sc-tab:hover{color:var(--ink)}
.sc-tab.on{color:var(--bg)}
.sc-tabs:not(.pret) .sc-tab.on{background:var(--ink)}   /* sans script : l'onglet actif reste lisible */
@media (prefers-reduced-motion:reduce){.sc-ind{transition:none}}
/* Sous 400 px, les quatre libellés seuls : avec leurs icônes ils dépassaient le cadre de 34 px à 375 px (mesuré le 09-10). */
@media (max-width:400px){.sc-tab svg{display:none}.sc-tab{gap:0}}
/* ============================================================
   Showcase : les quatre écrans de l'APP, en miniature
   ------------------------------------------------------------
   Demande du proprio (2026-10-09, sur capture de la vitrine) : « le
   rendu visuel du contenu de la fonction doit être fidèle au design de
   notre app ». Les maquettes génériques (fenêtre à trois points,
   pipeline, console) cèdent la place aux écrans réels, relevés au banc
   Chrome sur une base jetable : Environnements d'une création, Toile,
   Tableur, Pilote. Mesures relevées (styles calculés), pas devinées.

   Chaque écran est dessiné à la taille de l'app (1120 x 640) puis réduit
   d'un seul transform (--k, posé par app.js) : texte et filets restent
   nets à toute taille, sans image. 1120 et non 940 : sous 1100 px l'app
   replie « Discuter avec le pilote ⌘K » en icône, et c'est la barre
   entière qu'on veut montrer. Sous 640 px de vitrine, l'écran passe à
   560 de large et prend la disposition étroite de l'app (libellés de la
   barre repliés, panneaux latéraux masqués), sinon tout tomberait à 3 px.

   Les couleurs sont les jetons CLAIRS de assets/css/01-tokens.css,
   recopiés et non importés (N11 : aucune feuille de l'app sur la
   vitrine). Ils vivent sous --a-* pour ne jamais se mêler aux jetons de
   la vitrine : la vitrine est orange, l'app est violette par défaut
   (Paramètres › Couleur d'accentuation vide). Changer --a-accent suffit
   à montrer un autre accent, tout le reste en dérive comme dans l'app.
   La vitrine n'a qu'un thème (clair) ; l'app montrée l'est donc aussi.
   ============================================================ */
.sc-stage{--k:.84;--sca-w:1120;--sca-h:640;max-width:940px;margin:0 auto;border-radius:var(--radius-lg);background:var(--card);border:.5px solid var(--line);box-shadow:var(--shadow-m);overflow:hidden}
.sc-screens{position:relative;height:calc(var(--sca-h) * var(--k) * 1px);overflow:hidden}
.sca{
  --a-bg:#f7f6fa;--a-card:#ffffff;--a-card2:#f7f6fa;--a-line:#e4e1ec;--a-line2:#f0eef5;
  --a-txt:#1b1825;--a-mut:#5b5568;--a-mut2:#6a6478;
  --a-ok:#1a7f37;--a-warn:#9a6700;--a-err:#cf222e;--a-info:#0969da;
  --a-accent:#6e40c9;--a-accent-h:#5a32a8;--a-duo:0;
  --a-r:10px;--a-r-sm:7px;--a-r-xs:4px;--a-r-modal:14px;
  --a-shadow-sm:0 2px 8px rgba(31,35,40,.09);--a-shadow:0 8px 24px rgba(31,35,40,.12);
  --a-chrome-ink:color-mix(in srgb,var(--a-accent) 45%,var(--a-txt));
  --a-chrome-bg:color-mix(in srgb,var(--a-accent) 12%,var(--a-card));
  --a-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --a-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:absolute;top:0;left:0;width:calc(var(--sca-w) * 1px);height:calc(var(--sca-h) * 1px);
  transform:scale(var(--k));transform-origin:0 0;overflow:hidden;
  font-family:var(--a-font);font-size:15px;line-height:1.55;letter-spacing:0;color:var(--a-txt);background:var(--a-bg);
  user-select:none;-webkit-user-select:none;pointer-events:none}
.sca *{box-sizing:border-box}
.sca b,.sca strong{font-weight:inherit}
.sca code,.sca kbd{font-family:var(--a-mono)}
.sca svg{display:inline-block;max-width:none}
.sca svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sca svg.ic .du{fill:currentColor;fill-opacity:var(--a-duo);stroke:none}
/* 2026-10-09 : les icônes viennent du sprite i4c (assets/i4c.svg) ; un <use> externe n'hérite pas du CSS, mais une propriété
   personnalisée oui. 2026-11-04 (ICONES L1) : la copie des jetons du modèle « Point d'accent » de 01-tokens (la vitrine est
   déployée seule, elle ne lit pas l'atelier) : surface à 0, détail à l'accent de l'écran mis en scène. */
.sca{--ico-fond:var(--a-duo);--ico-trait:1.5;--ico-accent:var(--a-accent)}
.sca-defs{position:absolute;width:0;height:0;overflow:hidden}

/* La marque « Pilote », figée (l'app la fait tourner ; ici une seule pose suffit, et rien ne bouge en boucle). */
.sca-g0{stop-color:color-mix(in srgb,var(--a-accent) 72%,var(--a-txt))}
.sca-g1{stop-color:var(--a-accent)}
.sca-g2{stop-color:color-mix(in srgb,var(--a-accent) 45%,var(--a-bg))}
.sca-o0{stop-color:color-mix(in srgb,var(--a-bg) 78%,var(--a-accent))}
.sca-o2{stop-color:color-mix(in srgb,var(--a-accent) 55%,#000)}
#sca-pilote .po{fill:none;stroke:url(#sca-grad);stroke-width:.6;vector-effect:non-scaling-stroke;opacity:var(--po,.13)}
#sca-pilote .sun{fill:url(#sca-orb)}
#sca-pilote .pl{fill:color-mix(in srgb,var(--a-accent) 82%,var(--a-bg))}
#sca-pilote .pl56{fill:color-mix(in srgb,var(--a-accent) 68%,var(--a-bg))}

/* Boutons de l'app (03-layout.css : button, .mini, .primary, .danger) */
.sca-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;line-height:1.55;color:var(--a-txt);background:var(--a-card);
  border:1px solid var(--a-line);border-radius:var(--a-r-sm);padding:6px 12px;white-space:nowrap}
.sca-btn.mini{padding:4px 8px;font-size:12px}
.sca-btn.mini svg.ic{width:14px;height:14px}
.sca-btn.r10{border-radius:var(--a-r);padding:6px 12px}
.sca-btn.primary{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
.sca-btn.danger{color:#dc2626;border-color:#fca5a5;background:transparent}

/* ── La barre de l'app (03-layout.css, 09-ai.css) ── */
.sca-bar{position:relative;z-index:3;height:53px;display:flex;align-items:center;gap:14px;padding:8px 48px;
  background:color-mix(in srgb,#fff 86%,var(--a-bg));border-bottom:1px solid var(--a-line)}
.sca-brand{flex:1 1 0;display:flex;align-items:center;gap:6px;min-width:0}
.sca-mark{--po:.34;width:36px;height:36px;padding:2px;flex:none;border-radius:var(--a-r);
  border:.5px solid color-mix(in srgb,color-mix(in srgb,var(--a-accent) 14%,var(--a-line)) 45%,transparent);
  background:color-mix(in srgb,var(--a-accent) 5%,var(--a-card))}
.sca-nom{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.55}
.sca-nom span{color:var(--a-accent)}
.sca-hc{display:flex;align-items:center}
.sca-pil{display:inline-flex;align-items:center;gap:10px;height:34px;padding:2px 8px 2px 14px;border-radius:var(--a-r-modal);background:var(--a-chrome-bg)}
.sca-msg{width:18px!important;height:18px!important;color:var(--a-accent)}
.sca-msg .sca-msg-pt{fill:var(--a-chrome-bg)}
.sca-pil-l{font-size:12px;font-weight:450;letter-spacing:-.01em;color:var(--a-chrome-ink);white-space:nowrap}
.sca-kbd{font-family:var(--a-mono);font-size:10px;line-height:1;letter-spacing:.02em;color:var(--a-chrome-ink);opacity:.7;padding:4px 6px;
  border-radius:var(--a-r-xs);background:color-mix(in srgb,var(--a-txt) 7%,transparent)}
.sc-stage[data-ecran="pilot"] .sca-pil{background:color-mix(in srgb,var(--a-accent) 24%,var(--a-card))}
.sca-ha{flex:1 1 0;display:flex;justify-content:flex-end}
.sca-vt{display:inline-flex;align-items:center;gap:4px;height:34px;padding:4px;border-radius:9px;background:var(--a-chrome-bg)}
.sca-vt svg.ic{width:15px;height:15px}
.sca-vt-cta,.sca-vt-seg{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:5px;font-size:12px;font-weight:450;white-space:nowrap}
.sca-vt-cta{background:var(--a-accent);color:#fff}
.sca-vt-cta svg.ic{opacity:.8}
.sca-vt-sep{width:1px;height:16px;margin:0 5px;background:color-mix(in srgb,var(--a-txt) 14%,transparent)}
.sca-vt-seg{color:var(--a-chrome-ink)}
.sca-vt-seg svg.ic{opacity:.8}
.sca-vt-seg.on{color:color-mix(in srgb,var(--a-accent) 72%,#000);background:var(--a-card);box-shadow:var(--a-shadow-sm)}
.sca-vt-seg.on svg.ic{opacity:1}

/* ── Les écrans : même fondu que les anciennes maquettes, sous la barre commune ── */
.sca-corps{position:absolute;top:53px;left:0;right:0;bottom:0}
.sc-screen{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.sc-screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
@media (prefers-reduced-motion:reduce){.sc-screen,.sc-screen.on{transition:none;transform:none}}
.sca-v{position:absolute;inset:0}

/* ── Vue d'une création : en-tête, colonne de sections (12-studio.js, 03-layout.css) ── */
.sca-page{position:absolute;inset:0;padding:18px 48px 0;overflow:hidden}
.sca-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--a-mut);background:var(--a-card);
  border:1px solid var(--a-line);border-radius:var(--a-r-sm);padding:6px 12px;margin-bottom:16px}
.sca-sh{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--a-line)}
.sca-picon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--a-r);border:1px solid var(--a-line);background:var(--a-bg)}
.sca-picon span{width:44px;height:44px;display:grid;place-items:center;border-radius:9px;background:#e8590c;color:#fff;font-size:15px;font-weight:700}
.sca-sh-t{flex:1;min-width:0}
.sca-sh-n{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.sca-ver{font-size:12px;font-weight:700;color:var(--a-mut);background:var(--a-card);border:1px solid var(--a-line);border-radius:999px;padding:1px 7px;line-height:1.4}
.sca-pt{display:flex;gap:6px 14px;margin-top:6px}
.sca-pt span{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--a-mut)}
.sca-pt svg.ic{width:12px;height:12px}
.sca-sb{display:grid;grid-template-columns:200px 1fr;gap:22px}
.sca-snav{align-self:start;margin-top:14px;padding:10px;background:var(--a-card);border-radius:var(--a-r);box-shadow:var(--a-shadow-sm);display:flex;flex-direction:column;gap:1px}
.sca-sni{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--a-r);font-size:12px;line-height:1.55}
.sca-sni svg.ic{width:14px;height:14px;opacity:.8}
.sca-sni.on{background:var(--a-accent);color:#fff}
.sca-sni.on svg.ic{opacity:1}
.sca-grp{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:6px 8px 4px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--a-mut2)}
.sca-grp svg.ic{width:11px;height:11px}
/* Le groupe Studio du panneau d'un dossier : les logos des dix apps en tuiles, comme dans l'app depuis le 02-11 (CDC_VITRINE_V2 V6). */
.sca-tuiles{display:grid;grid-template-columns:repeat(5,22px);gap:6px;padding:4px 8px 6px}
.sca-tuiles img{width:22px;height:22px;display:block}
.sca-app-logo{width:22px;height:22px;flex:none}

/* ── Détail d'un environnement (03-layout.css : .ed-*, .etag, .hist-*) ── */
.sca-ed{padding:0 0 0 0}
.sca-ednav{display:flex;align-items:center;gap:8px;padding:12px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--a-line)}
.sca-edback{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--a-mut);padding:4px 8px}
.sca-edsep{font-size:18px;color:var(--a-line2)}
.sca-etag{--k:var(--a-mut);display:inline-flex;align-items:center;gap:4px;flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--a-r-sm);line-height:1.5;
  color:color-mix(in srgb,var(--k) 72%,#000);background:color-mix(in srgb,var(--k) 12%,#fff);border:1px solid color-mix(in srgb,var(--k) 30%,#fff)}
.sca-etag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--k);flex:none}
.sca-edname{font-size:15px;font-weight:600}
.sca-edef{font-size:10px;font-weight:600;color:var(--a-ok);border:1px solid var(--a-ok);border-radius:var(--a-r-sm);padding:1px 6px;line-height:1.5}
.sca-pacts{margin-left:auto;display:flex;gap:6px}
.sca-hero{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 20px;margin-bottom:16px;background:var(--a-card);
  border:1px solid var(--a-line);border-left:3px solid var(--ec);border-radius:var(--a-r)}
.sca-hero-g{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sca-led{width:9px;height:9px;border-radius:50%;flex:none;background:var(--a-ok)}
@media (prefers-reduced-motion:no-preference){.sca-led{animation:scaLed 2.4s ease-in-out infinite}}
@keyframes scaLed{0%,100%{opacity:1}50%{opacity:.45}}
.sca-hero-u{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sca-hero-u code{font-size:12px;color:var(--a-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sca-st-ok{font-size:12px;color:var(--a-ok)}
.sca-hero-b{display:flex;gap:6px;flex:none}
.sca-cta{padding:8px 22px;font-size:15px;font-weight:600;gap:8px}
.sca-cta svg.ic{width:16px;height:16px}
.sca-cta span{font-size:13px;font-weight:500;opacity:.8}
.sca-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-bottom:20px;background:var(--a-line);border:1px solid var(--a-line);border-radius:var(--a-r);overflow:hidden}
.sca-kpi{background:var(--a-card);padding:14px 12px;text-align:center}
.sca-kpi-i{line-height:1;margin-bottom:6px;opacity:.45}
.sca-kv{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.55}
.sca-kl{font-size:11px;color:var(--a-mut);margin-top:2px;line-height:1.3}
.sca-kpi.ok{background:color-mix(in srgb,var(--a-ok) 6%,var(--a-card))}
.sca-kpi.ok .sca-kpi-i{opacity:1;color:var(--a-ok)}
.sca-kpi.ok .sca-kv{color:var(--a-ok)}
.sca-mon{border:1px solid var(--a-line);border-radius:var(--a-r);overflow:hidden;background:var(--a-card)}
.sca-mon-t{display:flex;background:var(--a-card2);border-bottom:1px solid var(--a-line)}
.sca-mon-t span{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:500;color:var(--a-mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.sca-mon-t span.on{color:var(--a-accent);border-bottom-color:var(--a-accent)}
.sca-mon-p{padding:18px 20px}
.sca-he{display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px solid var(--a-line2)}
.sca-he-d{width:10px;height:10px;border-radius:50%;flex:none;margin-top:4px;background:var(--a-ok);border:2px solid var(--a-ok)}
.sca-he-h{display:flex;align-items:center;gap:6px;line-height:1.4;font-size:11px;color:var(--a-mut)}
.sca-he-h b{font-size:13px;font-weight:600;color:var(--a-txt)}
.sca-he-h code{background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r-xs);padding:1px 4px}
.sca-he-dt{font-size:11px;color:var(--a-mut);margin-top:2px}

/* ── Fenêtre d'application plein écran (78-appwin.js, 46-appwin.css) ── */
.sca-app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--a-bg)}
.sca-appbar{display:flex;align-items:center;gap:10px;height:49px;flex:none;padding:10px 14px;background:var(--a-card);border-bottom:1px solid var(--a-line)}
.sca-app-i{color:var(--a-accent);display:inline-flex}
.sca-app-i svg.ic{width:18px;height:18px}
.sca-appbar b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.sca-app-s{flex:1;font-size:12px;color:var(--a-mut)}
.sca-app-s::before{content:"·";margin-right:8px}
.sca-app-x{width:28px;height:28px;display:grid;place-items:center;color:var(--a-mut);background:var(--a-card2);border:1px solid var(--a-line);border-radius:var(--a-r-sm)}
.sca-app-x svg.ic{width:14px;height:14px}

/* ── Toile (assets/css/35-graph.css, mesures du banc) ── */
.sca-gtop{display:flex;align-items:center;gap:10px;height:55px;flex:none;padding:8px 12px;background:var(--a-card);border-bottom:1px solid var(--a-line)}
.sca-ib{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--a-txt);background:var(--a-card);border:1px solid var(--a-line);border-radius:9px}
.sca-ib.acc{color:var(--a-accent)}
.sca-mcaret{position:absolute;right:3px;bottom:3px;border:3px solid transparent;border-top-color:var(--a-txt);transform:rotate(-45deg)}
.sca-docname{flex:1;font-size:15px;font-weight:600;padding:4px 8px}
.sca-gtr{display:flex;align-items:center;gap:1px;padding:2px;border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--a-card)}
.sca-gsep{width:1px;height:18px;margin:0 2px;background:var(--a-line)}
.sca-gbody{flex:1;display:flex;min-height:0;background:var(--a-card)}
.sca-gleft{width:220px;flex:none;border-right:1px solid var(--a-line);background:var(--a-card)}
.sca-gph{display:flex;gap:6px;padding:8px;background:var(--a-card2);border-bottom:1px solid var(--a-line)}
.sca-sel{display:inline-flex;align-items:center;justify-content:space-between;gap:7px;flex:1;height:33px;padding:7px 10px;font-size:13.5px;line-height:1.25;
  background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r-sm);white-space:nowrap}
.sca-caret{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.sca-gmini{width:30px;display:grid;place-items:center;font-size:15px;font-weight:500;background:var(--a-card2);border:1px solid var(--a-line);border-radius:var(--a-r)}
.sca-seg{display:flex;gap:2px;padding:2px;margin:6px 10px 2px;background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r)}
.sca-seg span{flex:1;text-align:center;padding:4px 10px;font-size:12px;border-radius:var(--a-r-sm)}
.sca-seg span.on{background:var(--a-accent);color:#fff}
.sca-gsearch{padding:8px;border-bottom:1px solid var(--a-line2)}
.sca-gsearch span{display:block;padding:6px 8px;font-size:15px;color:var(--a-mut);background:var(--a-card2);border:1px solid var(--a-line);border-radius:var(--a-r)}
.sca-layers{padding:4px}
.sca-ly{display:flex;align-items:center;gap:7px;height:28px;padding:0 6px;font-size:13px;border-radius:var(--a-r-sm)}
.sca-ly svg.ic{width:12px;height:12px;color:var(--a-mut)}
.sca-ly-i{display:inline-flex;color:var(--a-mut)}
.sca-ly.sub{padding-left:36px}
.sca-sw{width:14px;height:14px;flex:none;border-radius:3px;border:1px solid var(--a-line);display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--a-mut);background:var(--a-card2)}
.sca-sw.c{border-radius:50%;background:#21d4ed;border-color:transparent}
.sca-sw.r{background:#7c6ff0;border-color:transparent}
.sca-gcanvas{position:relative;flex:1;min-width:0;overflow:hidden;background-color:#eef0f4;
  background-image:linear-gradient(rgba(27,24,37,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,24,37,.06) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px}
.sca-artboard{position:absolute;left:78px;top:46px;width:470px;height:300px;background:#fff;overflow:hidden}
.sca-shape-r{position:absolute;left:36px;top:36px;width:190px;height:120px;border-radius:16px;background:#7c6ff0}
.sca-shape-c{position:absolute;right:42px;top:96px;width:160px;height:160px;border-radius:50%;background:#21d4ed}
.sca-art-t{position:absolute;left:36px;top:178px;font-size:52px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#121729}
.sca-art-s{position:absolute;left:38px;top:240px;font-size:15px;font-weight:500;color:#5b5568}
.sca-dock{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px;
  background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r);box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.sca-tool{position:relative;width:32px;height:28px;display:grid;place-items:center;color:var(--a-mut);border-radius:9px}
.sca-tool svg.ic{width:17px;height:17px}
.sca-tool.caret::after{content:"";position:absolute;right:4px;bottom:4px;border:2.5px solid transparent;border-right-color:var(--a-mut);border-bottom-color:var(--a-mut)}
.sca-tsep{width:22px;height:1px;margin:2px 0;background:var(--a-line)}
.sca-minimap{position:absolute;right:16px;bottom:14px;width:200px;height:120px;background:color-mix(in srgb,#fff 86%,transparent);border:1px solid var(--a-line);border-radius:var(--a-r);
  box-shadow:0 12px 36px rgba(31,35,40,.16);overflow:hidden}
.sca-mm-b{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 4px 12px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--a-mut);border-bottom:1px solid var(--a-line2)}
.sca-mm-b span{font-size:13px;font-weight:400;letter-spacing:0}
.sca-mm-m{position:relative;height:93px}
.sca-mm-m i{position:absolute;left:12px;right:12px;top:0;bottom:0;background:color-mix(in srgb,var(--a-accent) 12%,#fff);border-left:2px solid var(--a-accent);border-right:2px solid var(--a-accent)}
.sca-gright{width:248px;flex:none;border-left:1px solid var(--a-line);background:var(--a-card)}
.sca-gright .sca-seg{margin:8px 10px 4px}
.sca-insp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--a-line2)}
.sca-insp-h b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sca-insp-h span{font-size:11px;color:var(--a-mut);text-transform:capitalize;white-space:nowrap}
.sca-insp-s{padding:10px 12px;border-bottom:1px solid var(--a-line2)}
.sca-insp-sub{display:flex;align-items:center;gap:1px;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--a-mut2);justify-content:space-between}
.sca-insp-sub svg.ic{width:13px;height:13px}
.sca-paint{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 0}
.sca-swatch{width:26px;height:26px;border-radius:var(--a-r-sm);background:#eef0f4;border:1px solid var(--a-line)}
.sca-chk{display:flex;align-items:center;gap:6px;margin:6px 0 4px;font-size:12px;font-weight:500}
.sca-chk i{width:13px;height:13px;border:1px solid #767676;border-radius:3px;background:#fff}
.sca-chk i{position:relative;flex:none}
.sca-chk.on i{background:var(--a-accent);border-color:var(--a-accent)}
.sca-chk.on i::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.sca-keys{display:flex;flex-direction:column;gap:4px}
.sca-keys div{display:flex;align-items:center;gap:8px;font-size:12px}
.sca-keys kbd{min-width:20px;text-align:center;font-size:10px;color:var(--a-mut);background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r-sm);padding:1px 4px;line-height:1.5}
.sca-gstat{display:flex;align-items:center;gap:14px;height:34px;flex:none;padding:4px 12px;font-size:12px;color:var(--a-mut);background:var(--a-card2);border-top:1px solid var(--a-line)}
.sca-stb{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-weight:500;border:1px solid transparent;border-radius:var(--a-r-sm)}
.sca-stb svg.ic{width:14px;height:14px}
.sca-stb.on{color:var(--a-accent);border-color:color-mix(in srgb,var(--a-accent) 40%,transparent)}
.sca-sp{flex:1}

/* ── Tableur (assets/css/21-edition.css, 53b-sheet-grid.js : la grille de l'app est un canvas, ses couleurs relevées au pixel) ── */
.sca-edtb{display:flex;align-items:center;gap:12px;height:45px;flex:none;padding:0 0 0 8px;border-bottom:1px solid var(--a-line)}
.sca-crumb{flex:1;display:flex;align-items:center;gap:2px;font-size:12px;color:var(--a-mut)}
.sca-crumb>span{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--a-r-sm)}
.sca-crumb svg.ic{width:13px;height:13px}
.sca-crumb .sca-crs{padding:0}
.sca-crumb .sca-crs svg.ic{width:12px;height:12px}
.sca-crumb .cur{font-weight:600;color:var(--a-txt)}
.sca-edseg{display:flex;height:32px;background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r)}
.sca-edseg span{width:34px;height:30px;display:grid;place-items:center;border-radius:var(--a-r-sm);color:var(--a-txt)}
.sca-edseg span.on{background:var(--a-accent);color:#fff}
.sca-edbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:6px 12px;font-size:13px;background:var(--a-card);border:1px solid var(--a-line);border-radius:9px}
.sca-edbtn.primary{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
.sca-esh{flex:1;display:flex;flex-direction:column;min-height:0;margin-top:12px;background:var(--a-bg);font-size:13px}
.sca-etc{flex:none;border-bottom:2px solid var(--a-line)}
.sca-etr{display:flex;align-items:center;gap:1px;padding:4px 10px;border-bottom:1px solid var(--a-line2);white-space:nowrap}
.sca-etr.f{gap:4px;height:34px;padding:2px 10px}
.sca-etr.a{gap:2px;padding:3px 10px;border-bottom:0}
.sca-nb{width:80px;height:28px;display:grid;place-items:center;font-size:12px;background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r-sm)}
.sca-tsp{width:1px;height:20px;margin:0 4px;background:var(--a-line);flex:none}
.sca-tsp.s{height:16px}
.sca-fx{padding:0 6px;font-size:15px;font-weight:700;letter-spacing:-.5px;color:var(--a-accent);font-style:italic}
.sca-fb{flex:1;height:28px;display:flex;align-items:center;padding:2px 10px;font-family:var(--a-mono);font-size:13px;background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--a-r-sm)}
.sca-etr .sca-sel{flex:none;margin-right:1px}
.sca-sel.w90{width:90px}.sca-sel.w48{width:48px;padding:7px 6px 7px 10px}.sca-sel.w88{width:88px}
.sca-tb{width:28px;height:28px;flex:none;display:grid;place-items:center;font-size:13px;color:var(--a-txt);border-radius:var(--a-r-sm)}
.sca-tb.gb{font-weight:700;font-size:15px;letter-spacing:-.5px}
.sca-tb.gi{font-style:italic;font-size:15px}
.sca-tb.gu{text-decoration:underline;text-underline-offset:2px}
.sca-tb.gs{text-decoration:line-through}
.sca-tb.gz{font-size:15px}
.sca-ci{display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:700;line-height:1.1}
.sca-ci.p{font-size:11px}
.sca-ci i{width:14px;height:3px;border-radius:var(--a-r-xs)}
.sca-zl{min-width:38px;text-align:center;font-size:12px;color:var(--a-mut)}
.sca-ab{display:inline-flex;align-items:center;gap:4px;height:24px;padding:1px 8px;font-size:11px;color:var(--a-mut);border-radius:var(--a-r-sm)}
.sca-ab svg.ic{width:13px;height:13px}
.sca-grid{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:38px repeat(14,80px);grid-auto-rows:22px;grid-template-rows:19px;align-content:start;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;background:#fff}
.sca-grid span{display:flex;align-items:center;padding:0 5px;border-right:1px solid var(--a-line2);border-bottom:1px solid var(--a-line2);white-space:nowrap;overflow:hidden;line-height:1}
.sca-grid .sca-gc0,.sca-grid .sca-gch{background:var(--a-card2);border-right-color:var(--a-line);border-bottom:2px solid var(--a-line)}
.sca-grid .sca-gch,.sca-grid .sca-grh{justify-content:center;font-family:var(--a-font);font-size:11px;font-weight:600;color:var(--a-mut)}
.sca-grid .sca-grh{background:var(--a-card2);border-right-color:var(--a-line)}
.sca-grid .sca-gch.on,.sca-grid .sca-grh.on{background:#c3d7f3;color:var(--a-txt);font-weight:700}
.sca-grid .n{justify-content:flex-end}
.sca-grid .b{font-weight:700}
.sca-grid .sel{position:relative;outline:2px solid #1a73e8;outline-offset:-2px}
.sca-grid .sel::after{content:"";position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:#1a73e8;border:1px solid #fff;z-index:1}
.sca-etabs{display:flex;align-items:stretch;height:32px;flex:none;padding-left:4px;background:var(--a-card2);border-top:1px solid var(--a-line)}
.sca-etabs span.on{display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:500;border-top:3px solid var(--a-accent);border-right:1px solid var(--a-line)}
.sca-eadd{display:grid;place-items:center;padding:0 10px;font-size:18px;font-weight:500;color:var(--a-mut)}
.sca-estat{display:flex;align-items:center;height:24px;flex:none;padding:0 10px;font-size:11px;color:var(--a-mut);background:var(--a-card2);border-top:1px solid var(--a-line)}
.sca-estat i{width:1px;height:12px;margin:0 8px;background:var(--a-line)}
.sca-estat span:last-child{color:var(--a-mut2)}

/* ── Pilote : la vue d'ensemble de la création derrière, le panneau du Pilote devant (09-ai.css) ── */
.sca-ov{padding-top:14px}
.sca-ovs{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sca-ovs>span:first-child{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--a-mut)}
.sca-ovtag,.sca-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;letter-spacing:.01em;color:var(--a-ok);
  background:color-mix(in srgb,var(--a-ok) 12%,transparent);border-radius:999px;padding:2px 8px;line-height:1.5;white-space:nowrap}
.sca-ovtag i,.sca-pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.sca-pill{font-size:11px;padding:2px 10px;gap:6px;background:color-mix(in srgb,var(--a-ok) 13%,transparent)}
.sca-ovrows{background:var(--a-card2);border:1px solid var(--a-line);border-radius:var(--a-r);overflow:hidden;width:640px}
.sca-ovr{display:flex;align-items:center;gap:8px;height:44px;padding:8px 12px 8px 14px;border-left:3px solid var(--a-ok);border-bottom:1px solid var(--a-line)}
.sca-ovr:last-child{border-bottom:0}
.sca-ovr b{font-size:13px;font-weight:600;white-space:nowrap}
.sca-ovr .u{flex:1;min-width:0;font-size:11px;font-family:var(--a-mono);color:var(--a-mut2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sca-ova{display:flex;gap:4px;flex:none}
.sca-btn.io{width:28px;height:28px;padding:4px;justify-content:center}
.sca-btn.dep{color:var(--a-accent);background:color-mix(in srgb,var(--a-accent) 13%,transparent);border-color:color-mix(in srgb,var(--a-accent) 30%,transparent)}
.sca-brain{position:absolute;top:-53px;right:0;bottom:0;width:440px;z-index:4;display:flex;flex-direction:column;background:var(--a-bg);border-left:1px solid var(--a-line);box-shadow:var(--a-shadow-sm)}
.sca-bh{display:flex;align-items:center;gap:10px;height:53px;flex:none;padding:0 16px;background:var(--a-card);border-bottom:1px solid var(--a-line)}
.sca-bav{--po:.13;width:24px;height:24px;margin:0 4px}
.sca-bh b{flex:1;font-size:15px;font-weight:700;letter-spacing:-.01em}
.sca-bb{width:32px;height:32px;display:grid;place-items:center;color:var(--a-mut);border-radius:var(--a-r-sm)}
.sca-blog{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:18px 16px 12px;overflow:hidden}
.sca-cw{display:flex;flex-direction:column;max-width:86%}
.sca-cw.me{align-self:flex-end;align-items:flex-end}
.sca-cw.ai{align-self:flex-start}
.sca-cb{font-size:13px;line-height:1.6;border-radius:var(--a-r-modal)}
.sca-cw.me .sca-cb{padding:12px 16px;color:var(--a-bg);background:color-mix(in srgb,var(--a-txt) 92%,#fff)}
.sca-cw.ai .sca-cb{padding:14px 16px;background:#ecebef}
.sca-cb p{margin:0 0 8px}
.sca-cb strong{font-weight:700;color:var(--a-accent)}
.sca-cb strong.n{color:inherit}
.sca-cb ul{margin:8px 0 0 20px;padding:0}
.sca-cb li{margin:4px 0}
.sca-cm{display:flex;align-items:center;gap:2px;height:22px;padding-right:2px;margin-top:2px;color:var(--a-mut2)}
.sca-cm span{width:22px;height:22px;display:grid;place-items:center}
.sca-cm svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.sca-cm time{margin-left:6px;font-size:10px}
.sca-bf{flex:none;padding:12px 14px 11px;background:var(--a-card);border-top:1px solid var(--a-line)}
.sca-bi{border:1px solid var(--a-line);border-radius:var(--a-r-modal);background:var(--a-card)}
.sca-bph{display:block;height:56px;padding:11px 13px 2px;font-size:14px;color:var(--a-mut)}
.sca-bc{display:flex;align-items:center;gap:4px;padding:0 7px 7px}
.sca-bc>span{width:30px;height:30px;display:grid;place-items:center;color:var(--a-mut);border-radius:8px}
.sca-bc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.sca-bc .sca-send{margin-left:auto;border-radius:50%;background:var(--a-accent);color:#fff;opacity:.35}
.sca-bc .sca-send svg{width:15px;height:15px}

/* ── Vitrine étroite : l'écran prend la disposition étroite de l'app (03-layout.css, 09-ai.css, 21-edition.css).
   Sous 1100 px l'app replie le Pilote en icône, sous 900 px les vues de la bascule perdent leur libellé ;
   la Toile et la vue d'une création n'ont pas de colonnes latérales sur un téléphone. ── */
@media (max-width:640px){
  .sc-stage{--k:.6;--sca-w:560;--sca-h:700}
  .sca-bar{padding:8px 16px;gap:10px}
  .sca-pil{width:34px;padding:2px;justify-content:center}
  .sca-pil-l,.sca-kbd{display:none}
  .sca-vt-seg{padding:4px 8px}
  .sca-vt-seg span{display:none}
  .sca-page{padding:14px 16px 0}
  .sca-sb{grid-template-columns:1fr}
  .sca-snav{display:none}
  .sca-sh{align-items:flex-start}
  .sca-sh .sca-btn{display:none}
  .sca-pt{flex-direction:column;gap:2px}
  .sca-ednav{flex-wrap:wrap}
  .sca-hero{flex-wrap:wrap}
  .sca-hero-g{flex-wrap:wrap;flex-basis:100%}
  .sca-cta{width:100%;justify-content:center}
  .sca-kpis{grid-template-columns:repeat(3,1fr)}
  .sca-kpi:nth-child(n+4){display:none}
  .sca-mon-t span:nth-child(n+4){display:none}
  .sca-gleft,.sca-gright,.sca-minimap{display:none}
  .sca-gtop .sca-gtr .sca-ib:nth-child(-n+1),.sca-gtop .sca-gsep:first-of-type{display:none}
  .sca-artboard{left:66px;top:40px;width:420px;height:270px;transform:scale(.9);transform-origin:0 0}
  .sca-shape-c{width:120px;height:120px;right:34px;top:120px}
  .sca-gstat .sca-stb:nth-child(n+4){display:none}
  .sca-edseg{display:none}
  .sca-etr:not(.f){overflow:hidden}
  .sca-ovrows{width:auto}
  .sca-brain{width:100%;border-left:0}
}

/* ============================================================
   Bento
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px;grid-auto-rows:184px}
.bcell{border-radius:var(--radius);border:.5px solid var(--line);background:var(--card);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:border-color .3s, transform .3s var(--ease)}
.bcell:hover{transform:translateY(-3px);border-color:var(--ink-faint)}
.bcell .b-vis{flex:1;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--bg-soft);border-bottom:.5px solid var(--line-2)}
.bcell .b-txt{padding:17px 19px}
.bcell .b-txt h3{font-size:16px;margin-bottom:4px}
.bcell .b-txt p{font-size:13px;color:var(--ink-2);line-height:1.5}
.b-local{grid-column:span 3;grid-row:span 2;flex-direction:row;align-items:stretch}
.b-local .b-vis{flex:0 0 44%;border-bottom:none;border-right:.5px solid var(--line-2)}
.b-local .b-txt{align-self:center;padding:24px}
.b-local .b-txt h3{font-size:21px;margin-bottom:8px}
.b-local .b-txt p{font-size:14.5px;line-height:1.6}
.b-local .b-shield{width:74px;height:74px;border-radius:var(--radius-lg);background:var(--card);display:grid;place-items:center;color:var(--accent-ink);border:.5px solid var(--line)}
.b-local .b-shield svg{width:38px;height:38px}
.b-deploy{grid-column:span 3}
.b-vis.b-pipe{display:flex;align-items:center;gap:0;padding:0 24px}
.b-back{grid-column:span 2}
.b-back-v svg{width:36px;height:36px;color:var(--ink-3)}
.b-lang{grid-column:span 2}
.b-vis.b-chips{display:flex;gap:7px;flex-wrap:wrap;padding:16px;place-items:center}
.b-chips span{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink);background:var(--card);border:.5px solid var(--line);border-radius:6px;padding:6px 10px}
.b-chips .rtl{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.b-infra{grid-column:span 2}
.b-nodes{padding:14px}
.b-plat{grid-column:span 2}
.b-vis.b-devices{display:flex;gap:20px;color:var(--ink-3)}
.b-devices svg{width:29px;height:29px}

/*, Chiffres, */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;margin-top:clamp(46px,6vw,74px);padding-top:clamp(38px,5vw,58px);border-top:.5px solid var(--line)}
.stat .n{font-weight:660;font-size:clamp(34px,5vw,54px);letter-spacing:-.04em;color:var(--ink);line-height:1}
.stat .l{color:var(--ink-2);font-size:13.5px;margin-top:8px;max-width:22ch;margin-inline:auto}

/* ============================================================
   Tarifs
   ============================================================ */
/* Cinq paliers. Dans le gabarit de 1 120 px, cinq colonnes tomberaient à
   200 px et « infrastructure » déborderait de sa puce. La grille tarifaire
   sort donc du gabarit et va chercher 1 320 px - c'est la seule section de la
   page qui le fait, et c'est la seule qui en a besoin. */
/* Toutes les bordures de la vitrine sont à 0,5 px (décision du 7 octobre 2026) :
   un trait plus doux ; sur un écran Retina il tombe sur un pixel physique. */
/* ============================================================
   TARIFS (grille du 24/10/2026) : une offre, des dossiers et du
   stockage en plus. À gauche les deux questions (combien de
   dossiers ? combien de place ?) et la composition qui en sort ;
   à droite le total en grand. Sous le tout, la grille en clair :
   on ne cache pas un prix derrière un curseur.
   ============================================================ */
.tarif{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);margin-top:44px;border:.5px solid var(--line);border-radius:22px;background:var(--card);overflow:hidden}
.t-choix{padding:34px 34px 30px;display:flex;flex-direction:column;border-right:.5px solid var(--line-2);background:
  radial-gradient(80% 60% at 0% 0%, var(--accent-soft), transparent 70%), var(--bg-soft)}
.t-q{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-q label{font-size:15px;font-weight:600;color:var(--ink)}
.t-q output{font-family:var(--ff-mono);font-size:13px;color:var(--accent-ink);background:var(--card);border:.5px solid var(--line);padding:3px 10px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
/* Le curseur : piste fine, remplissage à la couleur de la marque jusqu'au pouce. */
#t-curseur{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:18px 0 0;background:transparent;cursor:pointer;--f:16%}
/* Le fond de la piste est blanc ; en sombre, un blanc pur éblouirait sur le panneau : la ligne du thème. */
#t-curseur{--piste:#fff}

#t-curseur::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--f),var(--piste) var(--f))}
#t-curseur::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--f),var(--piste) var(--f))}
#t-curseur::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--card);border:2px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .15s}
#t-curseur::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--card);border:2px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18)}
#t-curseur:active::-webkit-slider-thumb{transform:scale(1.15)}
#t-curseur:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
/* Les repères sont posés à LEUR position sur la piste (le pouce fait 22 px : la piste utile commence et finit à 11 px du bord). */
.t-reperes{position:relative;height:16px;margin:2px 11px 0;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3)}
.t-reperes span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);white-space:nowrap}
.t-reperes span:last-child{transform:translateX(-30%)}
.t-aide{font-size:12.5px;color:var(--ink-3);margin-top:16px}
.t-q-sto{margin-top:26px}
.t-q-sto span{font-size:15px;font-weight:600;color:var(--ink)}
.t-sto{margin-top:12px;flex-wrap:wrap}
.t-compo{list-style:none;margin:24px 0 0;padding:14px 16px;border:.5px solid var(--line);border-radius:14px;background:var(--card);display:grid;gap:8px}
.t-compo li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-2)}
.t-compo b{font-family:var(--ff-mono);font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.t-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.t-col{border:.5px solid var(--line);border-radius:16px;background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.t-col h4{font-size:14px;color:var(--ink)}
.t-col p{font-size:13px;color:var(--ink-2);line-height:1.5}
.t-col p b{color:var(--ink);font-weight:600}
.t-col span{font-size:12px;color:var(--ink-3);margin-top:auto}
.t-detail{padding:30px 34px 34px;position:relative;min-height:560px}
/* La bascule de période passe AU-DESSUS du titre : à droite, elle mangeait « Votre abonnement » sous 1 000 px (banc du 24/10). */
.t-detail .bill{margin:0 0 18px}
.bill{display:flex;width:max-content;padding:4px;gap:4px;border-radius:var(--radius-pill);background:var(--bg-soft)}
.bill button{font:inherit;font-size:12.5px;font-weight:550;color:var(--ink-2);background:none;border:0;border-radius:var(--radius-pill);padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .2s,color .2s}
.bill button:hover{color:var(--ink)}
.bill button.on{background:var(--ink);color:var(--bg)}
.bill button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bill-off{font-size:10.5px;font-weight:650;color:var(--accent-ink);background:var(--accent-soft);padding:2px 7px;border-radius:var(--radius-pill)}
.bill button.on .bill-off{background:var(--accent);color:#fff}
.t-panneau{animation:t-entre .45s var(--ease)}
@keyframes t-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.t-haut{display:flex;align-items:center;gap:10px;min-height:32px}
.t-haut h3{font-size:24px;letter-spacing:-.02em}
.t-tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 9px;border-radius:var(--radius-pill)}
.t-desc{color:var(--ink-2);font-size:14px;margin-top:4px}
.t-prix{display:flex;align-items:flex-start;gap:4px;margin-top:22px;flex-wrap:wrap}
.t-amt{font-size:84px;font-weight:700;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--ink) 55%,var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.t-cur{font-size:28px;font-weight:600;color:var(--ink-2);margin-top:6px}
.t-per{align-self:flex-end;margin:0 0 10px 6px;font-size:13px;color:var(--ink-3)}
.t-chiffres{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border:.5px solid var(--line);border-radius:14px;overflow:hidden}
.t-chiffres div{padding:13px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.t-chiffres div+div{border-left:.5px solid var(--line)}
.t-chiffres b{font-size:22px;font-weight:680;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.t-chiffres span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.t-cta{width:100%;margin-top:20px;justify-content:center}
.t-herite{margin-top:24px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.t-liste{list-style:none;margin-top:10px;display:grid;gap:9px}
.t-liste li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.t-liste li b{color:var(--ink);font-weight:600}
.t-liste li::before{content:"+";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;font:700 12px/1 var(--ff-mono);color:var(--accent-ink);background:var(--accent-soft)}
@media (prefers-reduced-motion:reduce){.t-panneau{animation:none}}
@media (max-width:900px){
  .tarif{grid-template-columns:1fr}
  .t-choix{border-right:0;border-bottom:.5px solid var(--line-2);padding:26px 22px 24px}
  .t-grille{grid-template-columns:1fr}
  .t-detail{padding:24px 22px 26px;min-height:0}
  .t-amt{font-size:64px}
}
@media (max-width:420px){
  .t-chiffres b{font-size:18px}
}
.price-note{text-align:center;margin-top:26px;color:var(--ink-3);font-size:13px;line-height:1.7}


/* ============================================================
   FAQ
   ============================================================ */
/* La FAQ a sa propre page : elle démarre sous l'en-tête fixe. */
.faq-page{padding:calc(var(--sec) + 40px) 0 var(--sec);background:var(--bg-soft);min-height:70vh}
.faq{max-width:780px;margin:40px auto 0;border-top:.5px solid var(--line)}
.qa{border-bottom:.5px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 2px;font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-ink)}
.qa .ang{width:24px;height:24px;flex:none;border-radius:6px;border:.5px solid var(--line);display:grid;place-items:center;color:var(--ink-3);transition:.2s}
.qa .ang svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.qa[open] .ang{color:var(--ink);border-color:var(--ink-faint)}
.qa[open] .ang svg{transform:rotate(45deg)}
.qa .a{padding:0 2px 22px;color:var(--ink-2);font-size:15px;line-height:1.7;max-width:68ch}

/* ============================================================
   CTA + Footer
   ============================================================ */

.footer{border-top:.5px solid var(--line);padding:58px 0 36px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-bot{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:22px;border-top:.5px solid var(--line-2);color:var(--ink-3);font-size:12.5px;flex-wrap:wrap;gap:10px}
.foot-bot .made{font-family:var(--ff-mono);font-size:11.5px}
.foot-bot .made b{color:var(--accent-ink);font-weight:500}

/* ============================================================
   Citation
   ============================================================ */

/* ============================================================
   Apparitions
   ============================================================ */


.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .feature-grid,.pilot-grid{grid-template-columns:1fr;gap:26px}
  .feature.rev .feature-media{order:0}
  .feature-media{position:relative;top:0;max-width:520px}
  .cmdk{position:relative;top:0}
  .steps3{grid-template-columns:1fr;gap:12px}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px}
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan.pop{order:-1}
  .aw-body{grid-template-columns:1fr}
  .aw-side{display:none}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .b-local,.b-deploy,.b-back,.b-lang,.b-infra,.b-plat{grid-column:span 1;grid-row:auto}
  .b-local{flex-direction:column}
  .b-local .b-vis{flex:none;min-height:130px;border-right:none;border-bottom:.5px solid var(--line-2)}
  .bcell .b-vis{min-height:112px}
}
@media (max-width:760px){
  .price-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .nav-links{
    position:absolute;top:48px;left:var(--gut);right:var(--gut);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--card);border:.5px solid var(--line);border-radius:var(--radius);
    padding:6px;box-shadow:var(--shadow-m);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 12px;font-size:15px;border-radius:var(--radius-sm)}
  .nav-links a:hover{background:var(--bg-soft)}
  .nav-cta{margin-left:auto}
  .nav-burger{display:grid}
  .hero{padding-top:104px}
  .sc-tab{font-size:12.5px;padding:7px 11px}
  .gcard{flex-basis:262px}
  .bento{grid-template-columns:1fr}
  }
@media (max-width:520px){
  .stats{grid-template-columns:1fr;gap:26px}
  .hero-cta .btn{width:100%}
  /* Sur téléphone, les deux boutons s'empilent : la pilule devient une carte arrondie. */
  .hero .hero-cta{width:100%;border-radius:28px}
  /* L'en-tête tient de nouveau à 375 px depuis que le bouton de démonstration
     en est sorti : il faisait 276 px et poussait le burger HORS DE L'ÉCRAN,
     sans rien qui le signale (la page ne débordait pas, l'en-tête écrête).
     « Se connecter » en fait cent et reste visible partout : rien à masquer. */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-aura{display:none}
  .js .reveal{opacity:1;transform:none}
}

/* Ancres : compenser l'en-tête fixe */
section[id],[id]{scroll-margin-top:72px}

/* ============================================================
   Pages légales, une colonne mesurée, rien d'autre. Un texte
   qui engage se lit ; il n'a pas besoin d'être mis en scène.
   ============================================================ */
.legal{padding:108px 0 var(--sec)}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(30px,4.4vw,46px);font-weight:660;letter-spacing:-.032em;margin-top:14px}
.legal .lead{margin-top:16px;max-width:60ch}
.legal h2{font-size:19px;font-weight:640;letter-spacing:-.02em;margin:38px 0 10px;padding-top:22px;border-top:.5px solid var(--line-2)}
.legal p{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin-bottom:12px;max-width:68ch}
.legal p b{color:var(--ink);font-weight:600}
.legal ul{margin:0 0 12px 0;padding-left:20px;max-width:68ch}
.legal li{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin-bottom:8px}
.legal a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{text-decoration-thickness:2px}
.legal .legal-maj{margin-top:34px;padding-top:20px;border-top:.5px solid var(--line-2);
  font-family:var(--ff-mono);font-size:12px;color:var(--ink-3)}
.footer .foot-bot a{color:var(--ink-2)}
.footer .foot-bot a:hover{color:var(--ink)}

/* ============================================================
   DA alignée sur l'app : la marque, les tokens de chrome
   ------------------------------------------------------------
   Le site portait un signe statique à trois anneaux pendant que
   l'application affichait la galaxie animée : deux signes pour
   un seul produit. C'est la même icône qui vit ici désormais,
   avec les mêmes tokens de chrome (`--chrome-bg`, `--chrome-ink`)
   pour que les deux surfaces se répondent.
   ============================================================ */
:root{
  --chrome-bg:color-mix(in srgb,var(--accent) 12%,var(--card));
  --chrome-ink:color-mix(in srgb,var(--accent) 45%,var(--ink));
  --fw-label:450;
}

/* La marque devient une TUILE, comme dans l'app : fond quasi blanc teinté
   d'accent, filet d'un demi-pixel, aucune ombre. */
.brand .mark{
  /* La tuile a maigri avec la barre : 34 px dans 48 px de haut ne laissaient
     que sept pixels de part et d'autre, et la marque écrasait des rubriques
     de 12,5 px. */
  width:28px;height:28px;flex:none;box-sizing:border-box;padding:2px;
  border-radius:8px;
  border:.5px solid color-mix(in srgb,color-mix(in srgb,var(--accent) 14%,var(--line)) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--card));
  color:var(--ink);
}
/* Les orbites vivent à 13 % d'opacité, calibrées pour un glyphe posé sur un
   fond teinté : dans une tuile claire elles disparaissent. */
.brand .mark.bic .po{opacity:.34}
.brand .mark.bic .cmtH{opacity:.55}
.brand .mark.bic .cmtT{opacity:.24}

/* ⚠ CE BLOC ÉCRASAIT LA BARRE. Il vivait 500 lignes après la définition des
   liens et gagnait donc à égalité de spécificité : les rubriques prenaient
   `--chrome-ink` (45 % d'accent) et la rubrique courante `--accent-ink`.
   C'est ce qui rendait « Comment ça marche » orange malgré des liens déclarés
   noirs plus haut. La barre est désormais tenue en UN SEUL endroit ; ne pas
   redéclarer `.nav-links a` ici. */
.btn-primary{font-weight:var(--fw-label)}

/* La bascule de thème a quitté l'en-tête pour le pied. */
.foot-end{display:inline-flex;align-items:center;gap:12px}
.foot-end .icon-btn{width:30px;height:30px;border-radius:7px;
  background:var(--chrome-bg);border:0;color:var(--chrome-ink)}
.foot-end .icon-btn:hover{background:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--accent-ink)}

  .bic{width:24px;height:24px;display:block}
  .bic .psys{transform:rotate(-24deg);transform-origin:12px 12px;transition:transform .7s cubic-bezier(.3,1.2,.35,1)}
  .bic .po{fill:none;stroke:url(#dh-pilot-grad);vector-effect:non-scaling-stroke;stroke-width:.6;opacity:.13;transition:opacity .3s}
  .bic .sun{fill:url(#dh-pilot-orb);stroke:none}
  .bic .pl{fill:color-mix(in srgb,var(--accent) 82%,var(--bg));stroke:none}
  .bic .pl5,.bic .pl6{fill:color-mix(in srgb,var(--accent) 68%,var(--bg))} /* géantes gazeuses un peu plus claires */
  /* Traînée « comète » : arc en dégradé accentué qui suit chaque planète (2 couches → fondu),
     piloté par stroke-dashoffset, synchronisé au mouvement de la planète. Opacité soft. */
  .bic .cmt{fill:none;stroke:url(#dh-pilot-grad);vector-effect:non-scaling-stroke;stroke-linecap:round}
  .bic .cmtH{stroke-width:1.1;opacity:.4;stroke-dasharray:10 90}
  .bic .cmtT{stroke-width:.9;opacity:.15;stroke-dasharray:26 74}
  .brand:hover .bic .po{opacity:.22}
  .brand:hover .bic .psys{transform:rotate(-24deg) scaleY(1.22)}
  .brand:active .bic .psys{transform:rotate(-24deg) scaleY(1.4);transition-duration:.35s}
  @supports (offset-path:path('M0 0H1')){
    .bic .pl{cx:0;cy:0;offset-distance:0%}
    .bic .pl1{offset-path:path('M15.1 12 A3.1 1.24 0 1 1 8.9 12 A3.1 1.24 0 1 1 15.1 12')}
    .bic .pl2{offset-path:path('M16.35 12 A4.35 1.74 0 1 1 7.65 12 A4.35 1.74 0 1 1 16.35 12')}
    .bic .pl3{offset-path:path('M17.6 12 A5.6 2.24 0 1 1 6.4 12 A5.6 2.24 0 1 1 17.6 12')}
    .bic .pl4{offset-path:path('M18.85 12 A6.85 2.74 0 1 1 5.15 12 A6.85 2.74 0 1 1 18.85 12')}
    .bic .pl5{offset-path:path('M20.1 12 A8.1 3.24 0 1 1 3.9 12 A8.1 3.24 0 1 1 20.1 12')}
    .bic .pl6{offset-path:path('M21.35 12 A9.35 3.74 0 1 1 2.65 12 A9.35 3.74 0 1 1 21.35 12')}
    .bic .pl7{offset-path:path('M22.5 12 A10.5 4.2 0 1 1 1.5 12 A10.5 4.2 0 1 1 22.5 12')}
    @media (prefers-reduced-motion:no-preference){
      /* Timing partagé planète + traînée, par orbite (délais négatifs = départs répartis ≈ i/7 de tour). */
      .bic .pl,.bic .cmt{animation-timing-function:linear;animation-iteration-count:infinite}
      .bic .pl{animation-name:dh-pilot-orbit}
      .bic .cmtH{animation-name:dh-comet-h} .bic .cmtT{animation-name:dh-comet-t}
      .bic .c1{animation-duration:2.4s;animation-delay:0s}      /* Mercure 0,24 an */
      .bic .c2{animation-duration:6.2s;animation-delay:-.9s}    /* Vénus 0,62 an */
      .bic .c3{animation-duration:10s;animation-delay:-2.9s}    /* Terre 1 an */
      .bic .c4{animation-duration:18.8s;animation-delay:-8.1s}  /* Mars 1,88 an */
      .bic .c5{animation-duration:118s;animation-delay:-67s}    /* Jupiter 11,9 an */
      .bic .c6{animation-duration:295s;animation-delay:-211s}   /* Saturne 29,5 an */
      .bic .c7{animation-duration:840s;animation-delay:-720s}   /* Uranus 84 an */
    }
  }
  @media (prefers-reduced-motion:no-preference){
    .bic{animation:dh-pilot-float 4.5s ease-in-out infinite}
  }
  @media (prefers-reduced-motion:reduce){
    .bic .psys{transition:none}
  }
  
@keyframes dh-pilot-orbit{to{offset-distance:100%}}
  @keyframes dh-comet-h{from{stroke-dashoffset:10}to{stroke-dashoffset:-90}}
  @keyframes dh-comet-t{from{stroke-dashoffset:26}to{stroke-dashoffset:-74}}
  @keyframes dh-pilot-float{0%,100%{transform:translateY(.55px)}50%{transform:translateY(-.55px)}}
  /* Hauteur calée par POSITION (top:0 + bottom:0), pas par unité de viewport : égale au viewport
     par construction, insensible aux scrollbars / barres d'outils mobiles / quirks dvh. */
  .brain{position:fixed;top:0;bottom:0;right:0;width:440px;max-width:94vw;z-index:1300;display:flex;flex-direction:column;
    background:var(--bg);border-left:.5px solid var(--line);box-shadow:var(--elev-1);
    transform:translateX(101%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
  .brain.on{transform:translateX(0)}
  .brain[hidden]{display:flex} /* on pilote via .on, pas hidden */
  /* - En-tête - */
  .brain-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-16) var(--sp-16);border-bottom:.5px solid var(--line);
    background:var(--card);backdrop-filter:saturate(1.4)}
  .brain-av{flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 11%,var(--card));border:.5px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
  .brain-av .bic{width:27px;height:27px}
  /* - Identité du Pilote : l'anneau dégradé animé est la SIGNATURE → réservé à l'avatar et au
     bouton Envoyer (l'acte de parler au Pilote). Les boutons utilitaires (en-tête + outils du
     composer) restent des icônes « ghost » discrètes → composer calme et minimaliste. - */
  .brain-av{border-radius:50%;border-color:transparent;position:relative;isolation:isolate}
  .brain-foot .bc-send #brain-send{border-radius:50%!important;position:relative;isolation:isolate}
  .brain-av::before,.brain-foot .bc-send #brain-send::before{
    content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
    background:conic-gradient(from var(--dh-bga),
      color-mix(in srgb,var(--accent) 30%,var(--bg)),
      color-mix(in srgb,var(--accent) 72%,var(--bg)) 30%,
      color-mix(in srgb,var(--accent) 22%,var(--bg)) 60%,
      color-mix(in srgb,var(--accent) 30%,var(--bg)) 100%);
    padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  @media (prefers-reduced-motion:no-preference){
    .brain-av::before,.brain-foot .bc-send #brain-send::before{animation:dh-pilot-ring 12s linear infinite}
  }
@keyframes dh-comet-h{from{stroke-dashoffset:10}to{stroke-dashoffset:-90}}
  @keyframes dh-comet-t{from{stroke-dashoffset:26}to{stroke-dashoffset:-74}}
  @keyframes dh-pilot-float{0%,100%{transform:translateY(.55px)}50%{transform:translateY(-.55px)}}
  /* Hauteur calée par POSITION (top:0 + bottom:0), pas par unité de viewport : égale au viewport
     par construction, insensible aux scrollbars / barres d'outils mobiles / quirks dvh. */
  .brain{position:fixed;top:0;bottom:0;right:0;width:440px;max-width:94vw;z-index:1300;display:flex;flex-direction:column;
    background:var(--bg);border-left:.5px solid var(--line);box-shadow:var(--elev-1);
    transform:translateX(101%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
  .brain.on{transform:translateX(0)}
  .brain[hidden]{display:flex} /* on pilote via .on, pas hidden */
  /* - En-tête - */
  .brain-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-16) var(--sp-16);border-bottom:.5px solid var(--line);
    background:var(--card);backdrop-filter:saturate(1.4)}
  .brain-av{flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 11%,var(--card));border:.5px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
  .brain-av .bic{width:27px;height:27px}
  /* - Identité du Pilote : l'anneau dégradé animé est la SIGNATURE → réservé à l'avatar et au
     bouton Envoyer (l'acte de parler au Pilote). Les boutons utilitaires (en-tête + outils du
     composer) restent des icônes « ghost » discrètes → composer calme et minimaliste. - */
  .brain-av{border-radius:50%;border-color:transparent;position:relative;isolation:isolate}
  .brain-foot .bc-send #brain-send{border-radius:50%!important;position:relative;isolation:isolate}
  .brain-av::before,.brain-foot .bc-send #brain-send::before{
    content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
    background:conic-gradient(from var(--dh-bga),
      color-mix(in srgb,var(--accent) 30%,var(--bg)),
      color-mix(in srgb,var(--accent) 72%,var(--bg)) 30%,
      color-mix(in srgb,var(--accent) 22%,var(--bg)) 60%,
      color-mix(in srgb,var(--accent) 30%,var(--bg)) 100%);
    padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  @media (prefers-reduced-motion:no-preference){
    .brain-av::before,.brain-foot .bc-send #brain-send::before{animation:dh-pilot-ring 12s linear infinite}
  }
@keyframes dh-comet-t{from{stroke-dashoffset:26}to{stroke-dashoffset:-74}}
  @keyframes dh-pilot-float{0%,100%{transform:translateY(.55px)}50%{transform:translateY(-.55px)}}
  /* Hauteur calée par POSITION (top:0 + bottom:0), pas par unité de viewport : égale au viewport
     par construction, insensible aux scrollbars / barres d'outils mobiles / quirks dvh. */
  .brain{position:fixed;top:0;bottom:0;right:0;width:440px;max-width:94vw;z-index:1300;display:flex;flex-direction:column;
    background:var(--bg);border-left:.5px solid var(--line);box-shadow:var(--elev-1);
    transform:translateX(101%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
  .brain.on{transform:translateX(0)}
  .brain[hidden]{display:flex} /* on pilote via .on, pas hidden */
  /* - En-tête - */
  .brain-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-16) var(--sp-16);border-bottom:.5px solid var(--line);
    background:var(--card);backdrop-filter:saturate(1.4)}
  .brain-av{flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 11%,var(--card));border:.5px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
  .brain-av .bic{width:27px;height:27px}
  /* - Identité du Pilote : l'anneau dégradé animé est la SIGNATURE → réservé à l'avatar et au
     bouton Envoyer (l'acte de parler au Pilote). Les boutons utilitaires (en-tête + outils du
     composer) restent des icônes « ghost » discrètes → composer calme et minimaliste. - */
  .brain-av{border-radius:50%;border-color:transparent;position:relative;isolation:isolate}
  .brain-foot .bc-send #brain-send{border-radius:50%!important;position:relative;isolation:isolate}
  .brain-av::before,.brain-foot .bc-send #brain-send::before{
    content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
    background:conic-gradient(from var(--dh-bga),
      color-mix(in srgb,var(--accent) 30%,var(--bg)),
      color-mix(in srgb,var(--accent) 72%,var(--bg)) 30%,
      color-mix(in srgb,var(--accent) 22%,var(--bg)) 60%,
      color-mix(in srgb,var(--accent) 30%,var(--bg)) 100%);
    padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  @media (prefers-reduced-motion:no-preference){
    .brain-av::before,.brain-foot .bc-send #brain-send::before{animation:dh-pilot-ring 12s linear infinite}
  }
@keyframes dh-pilot-float{0%,100%{transform:translateY(.55px)}50%{transform:translateY(-.55px)}}
  /* Hauteur calée par POSITION (top:0 + bottom:0), pas par unité de viewport : égale au viewport
     par construction, insensible aux scrollbars / barres d'outils mobiles / quirks dvh. */
  .brain{position:fixed;top:0;bottom:0;right:0;width:440px;max-width:94vw;z-index:1300;display:flex;flex-direction:column;
    background:var(--bg);border-left:.5px solid var(--line);box-shadow:var(--elev-1);
    transform:translateX(101%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
  .brain.on{transform:translateX(0)}
  .brain[hidden]{display:flex} /* on pilote via .on, pas hidden */
  /* - En-tête - */
  .brain-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-16) var(--sp-16);border-bottom:.5px solid var(--line);
    background:var(--card);backdrop-filter:saturate(1.4)}
  .brain-av{flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 11%,var(--card));border:.5px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
  .brain-av .bic{width:27px;height:27px}
  /* - Identité du Pilote : l'anneau dégradé animé est la SIGNATURE → réservé à l'avatar et au
     bouton Envoyer (l'acte de parler au Pilote). Les boutons utilitaires (en-tête + outils du
     composer) restent des icônes « ghost » discrètes → composer calme et minimaliste. - */
  .brain-av{border-radius:50%;border-color:transparent;position:relative;isolation:isolate}
  .brain-foot .bc-send #brain-send{border-radius:50%!important;position:relative;isolation:isolate}
  .brain-av::before,.brain-foot .bc-send #brain-send::before{
    content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
    background:conic-gradient(from var(--dh-bga),
      color-mix(in srgb,var(--accent) 30%,var(--bg)),
      color-mix(in srgb,var(--accent) 72%,var(--bg)) 30%,
      color-mix(in srgb,var(--accent) 22%,var(--bg)) 60%,
      color-mix(in srgb,var(--accent) 30%,var(--bg)) 100%);
    padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  @media (prefers-reduced-motion:no-preference){
    .brain-av::before,.brain-foot .bc-send #brain-send::before{animation:dh-pilot-ring 12s linear infinite}
  }

/* ============================================================
   Barre de défilement, la MÊME que l'application
   ------------------------------------------------------------
   Le site prenait celle du système, l'app en avait dix-sept
   variantes. Une seule recette pour les deux surfaces.
   Le pouce est peint dans la zone de saisie puis RÉTRÉCI par une
   bordure transparente (`background-clip:padding-box`) : la cible
   du curseur reste large, le trait reste fin. C'est ce qui
   distingue une barre moderne d'une barre simplement amincie.
   Le pouce est NEUTRE, une barre n'est pas un état, elle n'a
   donc pas à porter l'accent, et se révèle au survol.
   ============================================================ */
:root{
  --sb-size:10px;                                          /* zone de saisie  */
  --sb-pad:3px;                                            /* → pouce de 4 px */
  --sb-thumb:color-mix(in srgb,var(--ink) 16%,transparent);
  --sb-thumb-hover:color-mix(in srgb,var(--ink) 34%,transparent);
}
/* PIÈGE : `scrollbar-width` et `::-webkit-scrollbar` s'EXCLUENT, dès que la
   propriété standard est posée, Chrome ignore les pseudo-éléments. Une première
   version réservait 2 px au lieu de 10 et n'affichait jamais le pouce arrondi.
   On aiguille : Firefox prend le standard, WebKit prend les pseudo-éléments. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
}
::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);border-radius:var(--radius-pill);
  border:var(--sb-pad) solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box}
@media (prefers-reduced-motion:no-preference){
  ::-webkit-scrollbar-thumb{transition:background .2s}
}

/* ============================================================
   Menus déroulants de l'en-tête (Produit · Ateliers)
   ------------------------------------------------------------
   Chaque entrée porte un titre ET une phrase : c'est ce qui
   distingue un menu utile d'une liste de mots. Les libellés
   seuls obligeraient à cliquer pour savoir ce qu'on va lire.
   Surface DÉTACHÉE : filet ET ombre. Sur fond sombre l'ombre
   seule ne détache rien, c'est le filet qui dessine le bord.
   ============================================================ */
.nav-item{position:relative;display:flex;align-items:center}
/* Même encre, même taille et même poids que les liens voisins : une tête de
   menu ne doit pas se distinguer d'un lien, sinon la rangée n'est plus une
   rangée. (Elle tirait son encre de `--chrome-ink`, teintée d'accent.) */
.nav-top{
  display:inline-flex;align-items:center;gap:4px;
  font:inherit;font-size:12.5px;font-weight:450;letter-spacing:.01em;
  color:color-mix(in srgb, var(--ink) 88%, transparent);cursor:pointer;padding:3px 0;
  border:0;background:none;
}
.nav-top:hover,.nav-item.open .nav-top{color:var(--ink)}
.nav-chev{width:11px;height:11px;flex:none;opacity:.55;transition:transform .18s var(--ease)}
.nav-item.open .nav-chev{transform:rotate(180deg)}

.nav-sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:320px;padding:6px;z-index:120;
  background:var(--card);border:.5px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-m);
  display:grid;gap:2px;
}
/* Le pont : comble les 10 px entre le bouton et le panneau. Il fait partie du
   panneau, donc de `.nav-item` : la souris qui descend ne quitte jamais l'îlot. */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-sub-large{min-width:560px;grid-template-columns:1fr 1fr}
.nav-sub[hidden]{display:none}
.nav-sub a{
  display:block;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--ink-2);font-size:13.5px;line-height:1.45;
}
.nav-sub a b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px}
.nav-sub a span{display:block;color:var(--ink-3);font-size:12.5px;line-height:1.45}
/* Survol NEUTRE, comme le reste de la barre : `--chrome-bg` est teinté
   d'accent, et un panneau qui s'allume en orange contredit des liens noirs. */
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--bg-soft)}
/* Les dix apps du Studio portent leur logo (CDC_VITRINE_V2 V2, 2026-11-05), copié de l'app par tools/vitrine.php. */
.nav-sub a.nav-app{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:start}
.nav-sub a.nav-app img{grid-row:span 2;width:28px;height:28px;margin-top:1px}
.nav-sub a.nav-app b,.nav-sub a.nav-app span{grid-column:2}

/* Sous 760 px la nav devient un panneau : les sous-menus s'y déplient en
   place plutôt que de flotter, un menu flottant dans un panneau déjà
   flottant n'a nulle part où aller. */
@media (max-width:760px){
  .nav-item{display:block}
  .nav-top{width:100%;justify-content:space-between;padding:11px 12px;font-size:15px;border-radius:var(--radius-sm)}
  .nav-top:hover{background:var(--bg-soft)}
  .nav-sub,.nav-sub-large{
    position:static;transform:none;min-width:0;grid-template-columns:1fr;
    border:0;box-shadow:none;background:transparent;padding:0 0 6px 12px;
  }
  .nav-sub a{padding:8px 12px}
  .nav-sub a span{display:none}   /* dans un panneau étroit, le titre suffit */
  .nav-sub a.nav-app{align-items:center}
  .nav-sub a.nav-app img{grid-row:auto;width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){.stock-bar i{transition:none}}

/* Aucun survol n'est animé (7 octobre 2026) : tout élément qui réagit au survol
   change d'état instantanément. Liste tirée des règles :hover de cette feuille ;
   un nouveau :hover doit y ajouter son élément. */
.btn-primary,
.btn-ghost,
.btn-on-dark,
.btn-ghost-dark,
.icon-btn,
.nav-links a,
.hero .hero-cta .btn-ghost,
.s3,
.gcard,
.pfeat,
.sc-tab,
.bcell,
.bill button,
.qa summary,
.legal a,
.footer .foot-bot a,
.pied-groupe a,
.fq-chip,
.pied-groupe a::after,
.brand .bic .po,
.brand .bic .psys,
.nav-top,
.nav-sub a{transition-duration:0s!important}

/* ============================================================
   PIED : une palette, une ligne d'état vivante, une marque géante.
   La palette filtre le plan du site pendant qu'on tape (comme le
   ⌘K du produit) ; la ligne d'état dit l'heure à Punaauia ; le nom
   géant n'est qu'un contour qu'une lumière remplit sous la souris.
   ============================================================ */
.pied{padding:72px 0 0;overflow:hidden;background:var(--bg)}
.pied-haut{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pied-intro p{margin-top:12px;color:var(--ink-2);font-size:15px}
.pied-palette{position:relative;flex:0 1 420px;display:flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 16px;border:.5px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-soft)}
.pied-palette:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px var(--accent-soft)}
.pied-palette svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.pied-palette input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);outline:none}
.pied-palette input::placeholder{color:var(--ink-3)}
.pied-palette input::-webkit-search-cancel-button{display:none}
.pied-palette kbd{font:500 11px var(--ff-mono);color:var(--ink-3);border:.5px solid var(--line);border-radius:6px;padding:3px 7px;background:var(--card)}
.pied-liens{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;padding-top:30px;border-top:.5px solid var(--line)}
.pied-groupe h5{font:500 11px var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.pied-groupe ul{list-style:none;display:grid;gap:2px}
.pied-groupe a{display:inline-flex;align-items:center;gap:6px;padding:5px 0;color:var(--ink-2);font-size:14px}
.pied-groupe a:hover{color:var(--ink)}
.pied-groupe a::after{content:"→";opacity:0;transform:translateX(-4px);color:var(--accent-ink);font-size:12px}
.pied-groupe a:hover::after,.pied-groupe a.premier::after{opacity:1;transform:none}
/* En filtrant, ce qui ne correspond pas s'efface ; le premier résultat porte la flèche (Entrée l'ouvre). */
.pied-liens.filtre .pied-groupe li:not(.vu){display:none}
.pied-liens.filtre .pied-groupe:not(.vu){display:none}
.pied-liens.filtre a.premier{color:var(--accent-ink);font-weight:550}
.pied-vide{margin-top:22px;color:var(--ink-2);font-size:14px}
.pied-vide a{color:var(--accent-ink)}
/* La ligne d'état : une barre d'état d'application, pas une ligne de copyright. */
.pied-statut{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:44px;padding:14px 0;border-top:.5px solid var(--line);font:12px var(--ff-mono);color:var(--ink-3)}
.pied-lieu{display:inline-flex;align-items:center;gap:8px}
.pied-lieu i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.pied-lieu time{color:var(--ink);font-variant-numeric:tabular-nums}
.pied-fait b{color:var(--accent-ink);font-weight:500}
/* La marque géante : un contour sur toute la largeur, coupé par le bas de la page.
   --mx / --my suivent la souris (app.js) ; sans souris, la lumière reste au centre. */
.pied-marque{--mx:50%;--my:60%;position:relative;margin-top:8px;height:clamp(90px,19vw,300px);overflow:hidden;user-select:none}
.pied-marque span{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:clamp(120px,27vw,430px);font-weight:800;letter-spacing:-.065em;line-height:.82;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px var(--line);
  background:radial-gradient(circle clamp(120px,18vw,280px) at var(--mx) var(--my),var(--accent),var(--accent-soft) 55%,transparent 72%);
  -webkit-background-clip:text;background-clip:text}
@media (max-width:860px){
  .pied-liens{grid-template-columns:repeat(2,1fr)}
  .pied-palette{flex-basis:100%}
}
@media (max-width:520px){
  .pied-statut{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ============================================================
   PAGES INTÉRIEURES : FAQ et Téléchargements. Même en-tête, même
   pied que l'accueil ; un en-tête de page sobre, puis le contenu.
   ============================================================ */
.page-tete{padding:calc(var(--sec) + 30px) 0 36px;text-align:center}
.page-tete h1{font-size:clamp(36px,6vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1}
.page-tete .lead{max-width:56ch;margin:18px auto 0}
/* FAQ : une recherche, des thèmes, des groupes. */
.fq-cherche{margin:30px auto 0;max-width:520px}
.fq-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.fq-chip{font-size:13px;color:var(--ink-2);padding:7px 14px;border-radius:var(--radius-pill);background:var(--bg-soft);border:.5px solid var(--line)}
.fq-chip:hover{color:var(--ink);background:var(--card)}
.fq-corps{padding:20px 0 var(--sec);background:var(--bg)}
.fq-wrap{max-width:820px}
.fq-groupe{padding:0;margin-top:44px;scroll-margin-top:90px}
.fq-groupe h2{font-size:13px;font-family:var(--ff-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fq-groupe .faq{margin-top:14px}
.fq-groupe .qa[hidden],.fq-groupe[hidden]{display:none}
.fq-groupe mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px}
.fq-vide{margin-top:44px;text-align:center;color:var(--ink-2)}
.fq-vide a,.fq-encore a{color:var(--accent-ink)}
.fq-encore{margin-top:56px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--bg-soft);border:.5px solid var(--line);font-size:15px;color:var(--ink-2);text-align:center}
.fq-encore b{color:var(--ink)}
/* Téléchargements : une carte par plateforme, illustrée ; la disponible d'abord. */
.dl-corps{padding:10px 0 var(--sec)}
.dl-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dl-carte{display:flex;flex-direction:column;border:.5px solid var(--line);border-radius:var(--radius-lg);background:var(--card);overflow:hidden;scroll-margin-top:90px}
.dl-carte.dl-dispo{grid-column:1/-1;flex-direction:row}
/* Une carte seule sur la dernière ligne prend toute la largeur. */
.dl-carte:last-child:nth-child(even){grid-column:1/-1}
.dl-vis{position:relative;height:210px;background:var(--bg-soft);border-bottom:.5px solid var(--line)}
.dl-dispo .dl-vis{flex:1.1;height:auto;min-height:280px;border-bottom:0;border-right:.5px solid var(--line);background:radial-gradient(70% 60% at 30% 20%,var(--accent-soft),transparent 70%),var(--bg-soft)}
.dl-txt{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
.dl-haut{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dl-haut h2{font-size:24px;letter-spacing:-.02em}
.dl-statut{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-pill)}
.dl-dispo .dl-statut{background:var(--ok-soft);color:var(--ok)}
.dl-bientot .dl-statut{background:var(--accent-soft);color:var(--accent-ink)}
.dl-plus-tard .dl-statut{background:var(--bg-soft);color:var(--ink-3);border:.5px solid var(--line)}
.dl-txt p{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.6}
.dl-actions{margin-top:20px}
.dl-actions .btn{border-radius:var(--radius-pill)}
.dl-specs{list-style:none;margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px}
.dl-specs li{font:11.5px var(--ff-mono);color:var(--ink-3);padding:4px 9px;border-radius:6px;background:var(--bg-soft)}
.dl-carte.vous{border-color:var(--accent)}
.dl-detecte{margin-top:14px;font-size:14px;color:var(--ink-3)}
.dl-detecte b{color:var(--ink)}
.gvis .v-term{font:11px var(--ff-mono);fill:#d7dce3}
.gvis .v-term-acc{fill:var(--accent)}
.gvis .v-term-dim{fill:#7c8796}
.gvis .v-term-ok{fill:#3fb950}
.gvis .v-curseur{animation:v-clignote 1.1s steps(1) infinite}
@keyframes v-clignote{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gvis .v-curseur{animation:none}}
@media (max-width:820px){
  .dl-grille{grid-template-columns:1fr}
  .dl-carte.dl-dispo{flex-direction:column}
  .dl-dispo .dl-vis{min-height:210px;border-right:0;border-bottom:.5px solid var(--line)}
}

/* Les barres de défilement du navigateur, masquées partout (le proprio, 2026-10-25 : « elles prennent de la largeur ») : le fil
   flottant de defilement.js (la copie de assets/js/00b-defilement.js de l'atelier) les remplace, par-dessus le contenu. */
*{scrollbar-width:none}
::-webkit-scrollbar{display:none;width:0;height:0}