/* ============================================================
   Atelier Git — design system
   Palette : encre bleutée + orange Git, couleurs de diff natives.
   Typo : IBM Plex Sans / IBM Plex Mono.
   ============================================================ */

:root{
  /* thème clair (défini en premier, complet) */
  --ink:#F4F6F8;
  --panel:#FFFFFF;
  --panel-2:#EDF0F4;
  --panel-3:#E3E8EE;
  --line:#D8DEE6;
  --line-soft:#E7EBF0;
  --text:#131A22;
  --text-2:#3A4552;
  --muted:#5A6676;
  --accent:#CE4318;
  --accent-text:#FFFFFF;
  --accent-soft:rgba(206,67,24,.10);
  --accent-line:rgba(206,67,24,.32);
  --add:#1A7F37;
  --add-soft:rgba(26,127,55,.12);
  --del:#C4342B;
  --del-soft:rgba(196,52,43,.12);
  --warn:#9A6700;
  --warn-soft:rgba(154,103,0,.12);
  --branch:#8250DF;
  --branch-soft:rgba(130,80,223,.12);
  --remote:#0969DA;
  --remote-soft:rgba(9,105,218,.12);
  --shadow:0 1px 2px rgba(16,24,32,.06), 0 8px 24px rgba(16,24,32,.06);
  --shadow-lift:0 2px 4px rgba(16,24,32,.08), 0 16px 40px rgba(16,24,32,.10);

  /* le terminal reste un terminal dans les deux thèmes */
  --term-bg:#0B1017;
  --term-bg-2:#121A24;
  --term-line:#1E2936;
  --term-text:#CBD6E4;
  --term-muted:#7C8EA6;

  --r-sm:5px; --r-md:9px; --r-lg:14px;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sidebar-w:272px;
  --sidebar-rail:68px;
  --topbar-h:58px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#0D1117;
    --panel:#141B24;
    --panel-2:#1A222C;
    --panel-3:#222C38;
    --line:#28323F;
    --line-soft:#1E2733;
    --text:#DCE4EE;
    --text-2:#B4C0CE;
    --muted:#8394A8;
    --accent:#F2653C;
    --accent-text:#1A0B06;
    --accent-soft:rgba(242,101,60,.14);
    --accent-line:rgba(242,101,60,.38);
    --add:#3FB950; --add-soft:rgba(63,185,80,.14);
    --del:#F05D53; --del-soft:rgba(240,93,83,.14);
    --warn:#D9A441; --warn-soft:rgba(217,164,65,.14);
    --branch:#A371F7; --branch-soft:rgba(163,113,247,.15);
    --remote:#5AA0FF; --remote-soft:rgba(90,160,255,.15);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.34);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ink:#0D1117; --panel:#141B24; --panel-2:#1A222C; --panel-3:#222C38;
  --line:#28323F; --line-soft:#1E2733; --text:#DCE4EE; --text-2:#B4C0CE; --muted:#8394A8;
  --accent:#F2653C; --accent-text:#1A0B06; --accent-soft:rgba(242,101,60,.14); --accent-line:rgba(242,101,60,.38);
  --add:#3FB950; --add-soft:rgba(63,185,80,.14);
  --del:#F05D53; --del-soft:rgba(240,93,83,.14);
  --warn:#D9A441; --warn-soft:rgba(217,164,65,.14);
  --branch:#A371F7; --branch-soft:rgba(163,113,247,.15);
  --remote:#5AA0FF; --remote-soft:rgba(90,160,255,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.34);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.018em;line-height:1.22}
h1{font-size:31px}
h2{font-size:23px}
h3,.h3{font-size:18px}
h4,.h4{font-size:15px}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,.mono{font-family:var(--mono)}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
img{max-width:100%}
::selection{background:var(--accent-soft)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.skip-link{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;padding:8px 14px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-text);font-size:13.5px;font-weight:500;transition:top .15s}
.skip-link:focus{top:8px;text-decoration:none}

/* ---------- squelette ---------- */
/* Trois etats de menu, pilotes par l'utilisateur :
   deploye (defaut), rail d'icones (.app.rail), et tiroir superpose en mobile. */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;
  transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}
.app.rail{grid-template-columns:var(--sidebar-rail) minmax(0,1fr)}

.sidebar{border-right:1px solid var(--line);background:var(--panel);position:sticky;top:0;
  height:100vh;overflow:hidden;display:flex;flex-direction:column;z-index:40;min-width:0}

/* Sprite d'icones : present dans le document mais jamais rendu. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* -- en-tete de marque, sur fond illustre -- */
.brand{position:relative;display:flex;align-items:center;gap:10px;padding:16px 12px 15px 16px;
  border-bottom:1px solid var(--line-soft);min-height:var(--topbar-h);overflow:hidden;isolation:isolate}
.brand-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:var(--muted)}
.brand-mark{width:30px;height:30px;flex:0 0 30px;color:var(--text-2)}
.brand-text{flex:1;min-width:0;overflow:hidden}
.brand-name{font-weight:600;letter-spacing:-.02em;font-size:15.5px;white-space:nowrap}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.side-toggle{flex:0 0 26px;width:26px;height:26px;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;
  transition:background .14s,color .14s,border-color .14s}
.side-toggle:hover{background:var(--panel-2);border-color:var(--line);color:var(--text)}

/* -- bloc progression : jauge radiale -- */
.side-progress{padding:13px 16px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px;overflow:hidden}
.gauge{position:relative;flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center}
.gauge svg{width:44px;height:44px;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:4;stroke-linecap:round}
.gauge-track{stroke:var(--panel-3)}
.gauge-fill{stroke:var(--accent);transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.gauge-pct{position:absolute;font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.side-progress-text{display:flex;flex-direction:column;min-width:0;gap:2px}
.side-progress-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.side-progress-meta{font-size:12.5px;color:var(--text-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* -- navigation -- */
.side-scroll{flex:1;padding:12px 10px 28px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.nav-group{margin-bottom:14px}
.nav-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:6px 8px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-label::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:13.5px;cursor:pointer;border:none;background:none;width:100%;text-align:left;
  line-height:1.35;transition:background .12s,color .12s}
.nav-item:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.nav-item.active{background:var(--accent-soft);color:var(--text);font-weight:500}
.nav-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Icone des entrees outils */
.nav-ico{width:20px;height:20px;flex:0 0 20px;color:var(--muted);transition:color .12s}
.nav-item:hover .nav-ico{color:var(--text-2)}
.nav-item.active .nav-ico{color:var(--accent)}

/* Les modules se lisent comme un `git log --graph` : une branche verticale,
   un noeud par module, rempli lorsqu'il est termine. */
.nav-group.is-modules{position:relative}
.nav-group.is-modules::before{content:"";position:absolute;inset-inline-start:18.5px;top:30px;bottom:8px;width:2px;
  background:var(--line);border-radius:2px}
.nav-node{position:relative;z-index:1;flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--panel);border:2px solid var(--line);
  font-family:var(--mono);font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:background .16s,border-color .16s,color .16s}
.nav-item:hover .nav-node{border-color:var(--muted)}
.nav-item.is-started .nav-node{border-color:var(--warn);color:var(--warn)}
.nav-item.is-done .nav-node{background:var(--add);border-color:var(--add);color:#fff}
.nav-item.is-done .nav-node .node-n{display:none}
.nav-node .node-check{display:none;width:12px;height:12px;color:#fff}
.nav-item.is-done .nav-node .node-check{display:block}
.nav-item.active .nav-node{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.nav-item.active.is-done .nav-node{background:var(--add);border-color:var(--accent)}
/* la branche se colore jusqu'au dernier module termine */
.nav-group.is-modules::after{content:"";position:absolute;inset-inline-start:18.5px;top:30px;width:2px;
  height:var(--done-h,0);background:var(--add);border-radius:2px;
  transition:height .5s cubic-bezier(.4,0,.2,1)}
/* La pastille ne dit quelque chose que si le module est commence ou termine :
   31 anneaux vides n'apporteraient que du bruit. */
.nav-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:transparent;
  border:1px solid transparent}
.nav-dot.done{background:var(--add);border-color:var(--add)}
.nav-dot.started{background:transparent;border-color:var(--warn)}

/* -- pied : rang atteint -- */
.side-foot{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--line-soft);
  background:var(--panel);overflow:hidden;white-space:nowrap}
.side-medal{position:relative;flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center}
.side-medal svg{position:absolute;inset:0;width:34px;height:34px}
.medal-ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.45;
  stroke-dasharray:4 5;stroke-linecap:round}
.medal-disc{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1}
.side-rank-ico{position:relative;font-size:15px;line-height:1}
.side-rank-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.side-rank-text b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.side-rank-xp{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ---------- rail d'icones (menu reduit, >=901px) ---------- */
.app.rail .brand{padding:14px 0 13px;justify-content:center}
.app.rail .brand-text,
.app.rail .side-progress-head,
.app.rail .side-progress-meta,
.app.rail .nav-title,
.app.rail .side-rank-text{display:none}
.app.rail .side-toggle{position:absolute;top:calc(var(--topbar-h) + 12px);left:50%;
  transform:translateX(-50%) rotate(180deg)}
.app.rail .side-progress{padding:10px 14px 12px;align-items:center}
.app.rail .bar{width:100%}
.app.rail .side-scroll{padding:46px 8px 28px}
.app.rail .nav-label{padding:6px 6px;font-size:0;gap:0}
.app.rail .nav-item{justify-content:center;padding:7px 0;gap:0}
.app.rail .side-foot{justify-content:center;padding:11px 0}
.app.rail .brand-art{opacity:.75}
.app.rail .side-progress{padding:12px 0 13px;justify-content:center}
.app.rail .side-progress-text{display:none}
.app.rail .gauge{flex:0 0 38px;width:38px;height:38px}
.app.rail .gauge svg{width:38px;height:38px}
.app.rail .gauge-pct{font-size:9px}
/* la branche verticale reste alignee sur les noeuds, recentree dans le rail */
.app.rail .nav-group.is-modules::before,
.app.rail .nav-group.is-modules::after{inset-inline-start:calc(50% - 1px)}

/* Infobulle du rail : positionnee en JS, hors du flux pour echapper au defilement. */
.rail-tip{position:fixed;z-index:70;pointer-events:none;background:var(--panel-3);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lift);
  padding:5px 10px;font-size:12.5px;white-space:nowrap;opacity:0;transform:translateX(-4px);
  transition:opacity .12s ease,transform .12s ease}
.rail-tip.on{opacity:1;transform:translateX(0)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar-h);display:flex;align-items:center;gap:10px;
  padding:0 20px;background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hamburger{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  width:34px;height:34px;align-items:center;justify-content:center;flex:0 0 34px;color:var(--text-2);
  transition:background .14s,color .14s}
.hamburger:hover{background:var(--panel-2);color:var(--text)}
.search-wrap{position:relative;flex:1;max-width:440px}
.search-input{width:100%;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel);color:var(--text);padding:0 32px 0 32px;font-family:var(--sans);font-size:13.5px}
.search-input::placeholder{color:var(--muted)}
.search-ico{position:absolute;left:10px;top:9px;color:var(--muted);pointer-events:none}
.search-kbd{position:absolute;right:8px;top:8px;pointer-events:none}
.results{position:absolute;top:40px;left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lift);max-height:62vh;overflow:auto;z-index:60;padding:6px}
.result{display:block;width:100%;text-align:left;border:none;background:none;padding:7px 10px;
  border-radius:var(--r-sm);color:var(--text)}
.result:hover,.result.sel{background:var(--accent-soft)}
.result-t{font-size:13.5px;font-weight:500}
.result-s{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-kind{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.spacer{flex:1}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.icon-btn:hover{background:var(--panel-2);color:var(--text)}
.xp-chip{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:12px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.xp-chip b{color:var(--accent);font-weight:600}

.view{padding:30px 26px 90px;max-width:1180px;width:100%;margin:0 auto;flex:1}
.prose{max-width:70ch}

/* ---------- primitives ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dim{color:var(--muted)}
.small{font-size:13px}
.lede{font-size:17px;color:var(--text-2);line-height:1.6}
.stack{display:flex;flex-direction:column}
.stack-xs{gap:6px}.stack-sm{gap:10px}.stack-md{gap:16px}.stack-lg{gap:26px}.stack-xl{gap:40px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hr{height:1px;background:var(--line);border:0;margin:0}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.card-flat{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:13.5px;font-weight:500;
  transition:background .12s,border-color .12s}
.btn:hover{background:var(--panel-2);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn-primary:hover{filter:brightness(1.07);background:var(--accent)}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px}
.btn-wrong{background:var(--del-soft);border-color:var(--del);color:var(--del)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--panel-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;padding:2px 8px;border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.pill-beginner{color:var(--add);border-color:var(--add);background:var(--add-soft)}
.pill-inter{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.pill-adv{color:var(--del);border-color:var(--del);background:var(--del-soft)}
.pill-accent{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}

.kbd{font-family:var(--mono);font-size:10.5px;padding:1px 5px;border-radius:4px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);box-shadow:0 1px 0 var(--line)}

.bar{height:6px;border-radius:100px;background:var(--panel-3);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .5s ease}
.bar.green>i{background:var(--add)}
.bar.amber>i{background:var(--warn)}
.bar.red>i{background:var(--del)}

/* ---------- rail de commits (structure des modules) ---------- */
.rail{position:relative;padding-left:26px}
.rail::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.rail-item{position:relative;padding-bottom:30px}
.rail-item::before{content:"";position:absolute;left:-25px;top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:2px solid var(--line)}
.rail-item.on::before{border-color:var(--accent);background:var(--accent)}
.rail-item:last-child{padding-bottom:0}

/* ---------- code & terminal ---------- */
.code{background:var(--term-bg);border:1px solid var(--term-line);border-radius:var(--r-md);
  font-family:var(--mono);font-size:13px;line-height:1.62;color:var(--term-text);overflow-x:auto;
  padding:12px 14px;position:relative}
.code .c-cmd{color:#8BD5FF}
.code .c-flag{color:#D6B26B}
.code .c-str{color:#9BDC8B}
.code .c-com{color:var(--term-muted)}
.code .c-out{color:var(--term-muted)}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px 6px 14px;background:var(--term-bg-2);border:1px solid var(--term-line);border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;font-family:var(--mono);font-size:11px;color:var(--term-muted);
  letter-spacing:.06em;text-transform:uppercase}
.code-head + .code{border-radius:0 0 var(--r-md) var(--r-md)}
.copy-btn{border:1px solid var(--term-line);background:transparent;color:var(--term-muted);
  border-radius:4px;font-size:10.5px;padding:2px 7px;font-family:var(--mono);text-transform:none;letter-spacing:0}
.copy-btn:hover{color:var(--term-text);border-color:var(--term-muted)}
code.inline,.prose code,.acc-body code,.cmd-field code,.small code,.lede code,.feedback code,
.tip code,.note code,.danger code,td code,li code,p code,summary code,.term-explain code.inline{
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:4px;
  padding:1px 5px;font-size:.88em;color:var(--text);font-family:var(--mono)}
.term-explain code{background:rgba(255,255,255,.07);border:0;color:inherit}

.term{background:var(--term-bg);border:1px solid var(--term-line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column}
.term-bar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--term-bg-2);
  border-bottom:1px solid var(--term-line);font-family:var(--mono);font-size:11px;color:var(--term-muted)}
.term-dots{display:flex;gap:5px}
.term-dots i{width:9px;height:9px;border-radius:50%;background:#33404F;display:block}
.term-body{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--term-text);
  padding:12px 14px;overflow-y:auto;flex:1;min-height:180px;cursor:text}
.term:focus-within{border-color:var(--accent-line)}
.term-input-row{cursor:text}
.term-line{white-space:pre-wrap;word-break:break-word}
.term-line.prompt{color:#8BD5FF}
.term-line.err{color:#FF8B80}
.term-line.add{color:#7EE787}
.term-line.del{color:#FF9C93}
.term-line.warn{color:#E3B341}
.term-line.yellow{color:#E3B341}
.term-line.cyan{color:#79C0FF}
.term-line.dim{color:var(--term-muted)}
.term-line.bold{color:#FFF;font-weight:600}
.term-line.commitline{color:#E3B341}
.term-input-row{display:flex;align-items:center;gap:8px;border-top:1px solid var(--term-line);
  padding:8px 14px;background:var(--term-bg-2)}
.term-ps1{color:#7EE787;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.term-input{flex:1;background:transparent;border:none;outline:none;color:var(--term-text);
  font-family:var(--mono);font-size:12.5px;min-width:0}
.term-explain{border-top:1px solid var(--term-line);background:var(--term-bg-2);padding:10px 14px;
  font-family:var(--sans);font-size:12.8px;color:#AEBECF;line-height:1.55}
.term-explain b,.term-explain strong{color:#FFCDB8}
.term-explain code{background:rgba(255,255,255,.07);border-radius:3px;padding:1px 4px;font-size:.9em}

/* ---------- fiches de commande ---------- */
.cmd{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);overflow:hidden}
.cmd-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);
  background:var(--panel-2);flex-wrap:wrap}
.cmd-syntax{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--text)}
.cmd-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.cmd-field{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start}
.cmd-field>dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:3px}
.cmd-field>dd{margin:0;font-size:14px;color:var(--text-2)}
.danger{border-left:3px solid var(--del);background:var(--del-soft);padding:9px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px}
.tip{border-left:3px solid var(--remote);background:var(--remote-soft);padding:9px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px}
.note{border-left:3px solid var(--warn);background:var(--warn-soft);padding:9px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px}

/* ---------- zones Git ---------- */
.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;background:var(--panel)}
.zone{padding:14px 12px;border-right:1px solid var(--line-soft);cursor:pointer;background:none;border-top:0;
  border-bottom:0;border-left:0;text-align:left;transition:background .15s;position:relative;min-height:118px}
.zone:last-child{border-right:0}
.zone:hover{background:var(--panel-2)}
.zone.active{background:var(--accent-soft);box-shadow:inset 0 2px 0 var(--accent)}
.zone-name{font-size:13px;font-weight:600;margin-bottom:3px}
.zone-cmd{font-family:var(--mono);font-size:10.5px;color:var(--accent)}
.zone-files{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.zone-file{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zone-arrow{font-family:var(--mono);color:var(--muted);font-size:11px;text-align:center;padding:4px 0}

/* ---------- graphe ---------- */
.graph-wrap{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);overflow:auto}
.graph-svg{display:block;min-width:100%}
.g-edge{stroke:var(--line);stroke-width:2;fill:none}
.g-node{fill:var(--panel);stroke:var(--accent);stroke-width:2}
.g-node.merge{fill:var(--accent-soft)}
.g-node.head{fill:var(--accent)}
.g-sha{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.g-msg{font-family:var(--sans);font-size:12px;fill:var(--text-2)}
.g-ref{font-family:var(--mono);font-size:10px}

/* ---------- diff ---------- */
.diffbox{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-family:var(--mono);font-size:12.5px}
.diff-cols{display:grid;grid-template-columns:1fr 1fr}
.diff-col{border-right:1px solid var(--line)}
.diff-col:last-child{border-right:0}
.diff-title{padding:6px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.diff-line{padding:1px 12px;white-space:pre-wrap;word-break:break-word;min-height:22px}
.diff-line.add{background:var(--add-soft);color:var(--add)}
.diff-line.del{background:var(--del-soft);color:var(--del)}
.diff-line.ctx{color:var(--text-2)}
.diff-line.empty{background:var(--panel-2)}

/* ---------- quiz & exercices ---------- */
.quiz-q{font-size:15.5px;font-weight:500;margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);margin-bottom:8px;
  font-size:14px;transition:border-color .12s,background .12s}
.opt:hover:not(:disabled){border-color:var(--accent-line);background:var(--accent-soft)}
.opt .mark{font-family:var(--mono);font-size:11px;width:19px;height:19px;flex:0 0 19px;border-radius:4px;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);margin-top:2px}
.opt.good{border-color:var(--add);background:var(--add-soft)}
.opt.good .mark{border-color:var(--add);color:var(--add)}
.opt.bad{border-color:var(--del);background:var(--del-soft)}
.opt.bad .mark{border-color:var(--del);color:var(--del)}
.feedback{border-radius:var(--r-sm);padding:11px 13px;font-size:13.8px;line-height:1.55}
.feedback.good{background:var(--add-soft);border-left:3px solid var(--add)}
.feedback.bad{background:var(--del-soft);border-left:3px solid var(--del)}
.ex-input{width:100%;font-family:var(--mono);font-size:13px;background:var(--term-bg);color:var(--term-text);
  border:1px solid var(--term-line);border-radius:var(--r-sm);padding:9px 11px;resize:vertical}
.ex-input:focus{outline:none;border-color:var(--accent)}

/* ---------- tuiles / dashboard ---------- */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;
  display:flex;flex-direction:column;gap:3px}
.tile-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tile-v{font-size:27px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.tile-s{font-size:12.5px;color:var(--muted)}

.badge{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel-2);font-size:13px}
.badge.locked{opacity:.42}
.badge-ico{font-size:17px;line-height:1}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
table{border-collapse:collapse;width:100%;font-size:13.8px;min-width:460px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:400;padding:9px 13px;background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--text-2)}
tr:last-child td{border-bottom:0}
td code{font-family:var(--mono);font-size:12.5px;color:var(--text)}

/* ---------- accordéons / onglets ---------- */
details.acc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);overflow:hidden}
details.acc>summary{padding:11px 14px;cursor:pointer;font-weight:500;font-size:14px;list-style:none;
  display:flex;align-items:center;gap:9px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"▸";color:var(--accent);font-size:11px;transition:transform .15s}
details.acc[open]>summary::before{transform:rotate(90deg)}
details.acc>summary:hover{background:var(--panel-2)}
.acc-body{padding:0 14px 14px;font-size:14px;color:var(--text-2)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{border:none;background:none;padding:8px 13px;font-size:13.5px;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--accent);font-weight:500}

/* ---------- divers ---------- */
.glossary-term{border-bottom:1px dashed var(--accent-line);cursor:help}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);opacity:0;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lift);border-radius:var(--r-md);
  padding:10px 16px;font-size:13.5px;z-index:200;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.scrim{position:fixed;inset:0;background:rgba(4,7,11,.55);z-index:35;display:none}
.scrim.on{display:block}

.path-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);overflow:hidden}
.path-head{padding:14px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.path-body{padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px}
.path-step{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2)}

.hero{border:1px solid var(--line);border-radius:var(--r-lg);background:
  linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);padding:26px 26px 24px;position:relative;overflow:hidden}
.hero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none}


/* ============================================================
   Langue, pages légales, consentement, et écriture de droite à gauche
   ============================================================ */

/* ---------- sélecteur de langue ---------- */
.lang-switch{position:relative}
.lang-btn{width:auto;padding:0 9px;gap:6px}
.lang-code{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em}
.lang-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:168px;z-index:70;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);padding:5px;display:none}
.lang-switch.open .lang-list{display:block}
.lang-opt{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:13.5px}
.lang-opt:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.lang-opt.on{background:var(--accent-soft);color:var(--text);font-weight:500}
.lang-opt-code{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);
  min-width:20px}
.lang-opt.on .lang-opt-code{color:var(--accent)}

/* ---------- pied de page ---------- */
.site-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  padding:18px 26px 26px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--muted);max-width:1180px;width:100%;margin:0 auto}
.site-foot a,.link-btn{color:var(--muted);font-size:12.5px}
.site-foot a:hover,.link-btn:hover{color:var(--text)}
.link-btn{background:none;border:none;padding:0;text-decoration:underline;
  text-underline-offset:2px;font-family:inherit}

/* ---------- pages légales ---------- */
.legal-body{max-width:74ch;display:flex;flex-direction:column;gap:14px}
.legal-body h2{margin-top:12px}
.legal-body p{color:var(--text-2);font-size:14.5px}
.legal-dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 18px;margin:0;
  font-size:14px;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:14px 16px;
  background:var(--panel)}
.legal-dl dt{color:var(--muted);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;align-self:center}
.legal-dl dd{margin:0;color:var(--text)}

/* ---------- bandeau de consentement ---------- */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:150;padding:14px;display:flex;
  justify-content:center;opacity:0;transform:translateY(12px);
  transition:opacity .22s ease,transform .22s ease}
.consent.on{opacity:1;transform:translateY(0)}
.consent-box{max-width:620px;width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:18px 20px;
  display:flex;flex-direction:column;gap:10px}
.consent-box p{color:var(--text-2)}
.consent-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.consent-acts .btn{flex:1;min-width:130px;justify-content:center}

/* ---------- écriture de droite à gauche ----------
   La mise en page est déjà logique (inset-inline, flex) ; ne restent que les
   éléments dont l'orientation a un sens propre. Le code, lui, reste à gauche :
   une commande Git ne se lit pas de droite à gauche. */
[dir="rtl"] .side-toggle svg,
[dir="rtl"] .hamburger svg{transform:scaleX(-1)}
[dir="rtl"] .app.rail .side-toggle{transform:translateX(50%) rotate(180deg)}
[dir="rtl"] .nav-item.active::before{border-radius:2px 0 0 2px}
[dir="rtl"] .rail-tip{transform:translateX(4px)}
[dir="rtl"] .rail-tip.on{transform:translateX(0)}
[dir="rtl"] .term,[dir="rtl"] .code,[dir="rtl"] .term-body,
[dir="rtl"] .graph-wrap,[dir="rtl"] .diff-cols,
[dir="rtl"] code,[dir="rtl"] pre,[dir="rtl"] kbd,[dir="rtl"] .mono{direction:ltr;text-align:left}
[dir="rtl"] .legal-dl dt{text-align:start}
[dir="rtl"] .table-wrap table{text-align:start}
[dir="rtl"] .rail{padding-left:0;padding-right:26px}
[dir="rtl"] .rail::before{left:auto;right:9px}
[dir="rtl"] .rail-dot{left:auto;right:5px}
/* Les chiffres arabes occidentaux restent lisibles dans les deux sens. */
[dir="rtl"] .nav-node,[dir="rtl"] .gauge-pct,[dir="rtl"] .side-rank-xp{direction:ltr}
/* Les libelles melant chiffres et mots se laissent placer par l'algorithme bidi. */
[dir="rtl"] .side-progress-meta{unicode-bidi:plaintext}

@media (max-width: 900px){
  .site-foot{padding:16px 16px 28px}
  .lang-btn .lang-code{display:none}
  .lang-btn{width:34px;padding:0}
}

@media (max-width: 900px){
  /* Le tiroir prime sur le rail : sous 900px le menu se superpose au contenu. */
  .app,.app.rail{grid-template-columns:1fr}
  /* `visibility` n'est pas anime mais decale : visible des l'ouverture (sinon le menu
     resterait infocusable pendant toute l'animation), masque seulement une fois
     l'animation de fermeture terminee (sinon il quitterait le champ trop tot). */
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:288px;transform:translateX(-100%);
    visibility:hidden;box-shadow:var(--shadow-lift);
    transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s}
  .sidebar.open{transform:translateX(0);visibility:visible;
    transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
  /* En tiroir, le menu est toujours en pleine largeur : on annule le rail. */
  .app.rail .brand{padding:14px 12px 13px 16px;justify-content:flex-start}
  .app.rail .brand-text,
  .app.rail .side-progress-head,
  .app.rail .side-progress-meta,
  .app.rail .nav-title,
  .app.rail .side-rank-text{display:revert}
  .app.rail .side-rank-text{display:flex}
  .app.rail .side-toggle{position:static;transform:none}
  .app.rail .side-progress{padding:12px 16px;align-items:stretch}
  .app.rail .side-scroll{padding:12px 10px 28px}
  .app.rail .nav-label{padding:6px 8px;font-size:10px;gap:8px}
  .app.rail .nav-item{justify-content:flex-start;padding:6px 9px;gap:10px}
  .app.rail .side-foot{justify-content:flex-start;padding:11px 16px}
  .app.rail .side-progress{padding:13px 16px;justify-content:flex-start}
  .app.rail .side-progress-text{display:flex}
  .app.rail .gauge,.app.rail .gauge svg{width:44px;height:44px}
  .app.rail .gauge{flex:0 0 44px}
  .app.rail .gauge-pct{font-size:10.5px}
  .app.rail .nav-group.is-modules::before,
  .app.rail .nav-group.is-modules::after{left:18.5px}
  .side-toggle{display:none}
  .rail-tip{display:none}
  .view{padding:22px 16px 80px}
  .zones{grid-template-columns:1fr 1fr}
  .diff-cols{grid-template-columns:1fr}
  h1{font-size:26px}
  .xp-chip{display:none}
}
@media (max-width: 520px){
  .zones{grid-template-columns:1fr}
  .cmd-field{grid-template-columns:1fr;gap:3px}
  .view{padding:18px 16px 70px}
  .tile-v{font-size:23px}
}