/*
 * Codex — Design System partagé
 * Source de vérité pour tous les cours.
 *
 * Structure :
 *   1. Tokens couleur (:root)
 *   2. Reset & base
 *   3. Layout (sidebar, wikibar, main)
 *   4. Typographie
 *   5. Composants (card, def, note, pre, code, table, badge, button)
 *   6. Schémas (flowrow, fbox)
 *   7. Utilitaires (mem, divider, toast, pager)
 */

/* ================================================================
   1. TOKENS COULEUR
   ================================================================ */
:root{
  --bg:#0a0d16; --bg-grad:#0e1322; --panel:#131a29; --panel-2:#1a2335;
  --line:#283145; --text:#e9eef7; --muted:#8b96ad; --dim:#5a647a;
  --flow:#4fd1c5;   /* cyan  : donnée qui circule / élément actif */
  --busy:#f6ad55;   /* ambre : occupé / coût / charge             */
  --idle-c:#39435a; /* gris  : au repos                           */
  --err:#fc6d6d;    /* rouge : erreur                             */
  --ok:#68d391;     /* vert  : succès                             */
  --violet:#9f7aea; /* violet: concept alternatif / 2e acteur     */
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,209,197,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(159,122,234,.06), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-grad) 100%);
  background-attachment:fixed; color:var(--text);
  font-family:'Sora',sans-serif; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 100% 60% at 50% 0%,#000 40%,transparent 100%);
}
code,.mono{font-family:'JetBrains Mono',monospace}

/* ================================================================
   3. LAYOUT
   ================================================================ */
.sidebar{
  position:fixed;top:50px;left:0;width:266px;height:calc(100vh - 50px);overflow-y:auto;z-index:30;
  border-right:1px solid var(--line);padding:26px 16px 40px;
  background:rgba(10,13,22,.82);backdrop-filter:blur(10px);
}
.brand{padding:0 8px 22px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.brand .kick{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.28em;color:var(--flow);text-transform:uppercase}
.brand .t{font-family:'Fraunces',serif;font-weight:900;font-size:1.5rem;line-height:1;margin-top:8px}
.brand .t em{font-style:italic;font-weight:500;color:var(--flow)}
.nav-link{
  display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--muted);
  font-size:.86rem;padding:9px 10px;border-radius:8px;transition:.15s;margin-bottom:2px
}
.nav-link .n{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--dim);min-width:20px}
.nav-link:hover{background:var(--panel);color:var(--text)}
.nav-link.current{background:rgba(79,209,197,.1);color:var(--flow)}
.nav-link.current .n{color:var(--flow)}
.nav-link .sim{margin-left:auto;font-size:.55rem;font-family:'JetBrains Mono',monospace;color:var(--busy);border:1px solid rgba(246,173,85,.35);padding:1px 5px;border-radius:20px}

main{margin-left:266px;min-height:100vh}
.page{display:none;max-width:880px;margin:0 auto;padding:74px 30px 100px;animation:fade .35s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Barre wiki */
.wikibar{position:fixed;top:0;left:0;right:0;height:50px;z-index:50;display:flex;align-items:center;gap:11px;padding:0 18px;background:rgba(10,13,22,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:.78rem}
.wikibar a.back{color:var(--flow);text-decoration:none;font-weight:500;white-space:nowrap}
.wikibar a.back:hover{text-decoration:underline}
.wikibar .sep{color:var(--dim)}
.wikibar .course{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wikibar .wtag{margin-left:auto;font-size:.6rem;color:var(--busy);border:1px solid rgba(246,173,85,.35);padding:2px 9px;border-radius:20px;white-space:nowrap}

.hamburger{display:none;position:fixed;top:16px;left:16px;z-index:40;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;font-size:1.2rem}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
@media(max-width:920px){
  .sidebar{transform:translateX(-104%);transition:transform .28s ease}
  .sidebar.open{transform:none}
  main{margin-left:0}
  .hamburger{display:flex;top:6px;left:auto;right:12px;z-index:60;width:38px;height:38px;font-size:1.05rem}
  .scrim.show{display:block}
  .page{padding-top:84px}
  .wikibar .wtag{display:none}
}

/* ================================================================
   4. TYPOGRAPHIE
   ================================================================ */
.wikibar,.sidebar,.brand,.sec-num,.pager,.nav-link,.sim,.page{user-select:none}
.page pre,.page code,.page table{user-select:text}
.sec-num{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--flow);letter-spacing:.2em;margin-bottom:10px;display:block;opacity:.85}
h1.page-title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.1rem,5vw,3.2rem);line-height:1;letter-spacing:-.02em;margin-bottom:18px}
h1.page-title em{font-style:italic;font-weight:500;color:var(--flow)}
h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.5rem,3.2vw,2rem);letter-spacing:-.01em;margin:52px 0 16px}
h3{font-family:'Sora',sans-serif;font-weight:600;font-size:1.12rem;margin:24px 0 8px}
p{margin-bottom:18px;line-height:1.8;color:#cdd5e3}
p strong,li strong{color:var(--text);font-weight:600}
ul,ol{margin:0 0 14px;padding-left:22px;color:#cdd5e3}
li{margin-bottom:7px}
a{color:var(--flow)}
.lede{font-size:1.08rem;color:var(--muted);margin-bottom:8px}
.flow-word{color:var(--flow);font-weight:500}
.busy-word{color:var(--busy);font-weight:500}
.err-word{color:var(--err);font-weight:500}
.vio-word{color:var(--violet);font-weight:500}
.ok-word{color:var(--ok);font-weight:500}

/* ================================================================
   5. COMPOSANTS
   ================================================================ */
.card{background:linear-gradient(180deg,var(--panel) 0%,rgba(19,26,41,.55) 100%);border:1px solid var(--line);border-radius:16px;padding:24px;margin:22px 0;box-shadow:0 20px 50px -30px rgba(0,0,0,.8)}

.def{border-left:3px solid var(--flow);background:rgba(79,209,197,.06);padding:14px 18px;border-radius:0 10px 10px 0;margin:16px 0;color:#dbe2ee}
.def.violet{border-color:var(--violet);background:rgba(159,122,234,.07)}
.def.amber{border-color:var(--busy);background:rgba(246,173,85,.06)}
.def.ok{border-color:var(--ok);background:rgba(104,211,145,.06)}

.note{border-left:3px solid var(--flow);background:rgba(79,209,197,.06);padding:13px 17px;border-radius:0 10px 10px 0;margin:18px 0;font-size:.95rem;color:#cdd5e3}
.note.amber{border-color:var(--busy);background:rgba(246,173,85,.06)}
.note.err{border-color:var(--err);background:rgba(252,109,109,.06)}
.note .ic{font-style:normal;margin-right:6px}

/* Wrapper pour le bouton copier */
.code-wrap{position:relative}
.copy-btn{position:absolute;top:9px;right:9px;display:flex;align-items:center;gap:5px;
  padding:3px 9px;font-size:.6rem;letter-spacing:.04em;
  border:1px solid var(--line);background:rgba(10,14,24,.8);color:var(--dim);
  border-radius:6px;cursor:pointer;transition:.15s;opacity:0;transform:none}
.code-wrap:hover .copy-btn{opacity:1}
.copy-btn:hover{color:var(--flow);border-color:rgba(79,209,197,.4);transform:none}
.copy-btn.copied{color:var(--ok);border-color:rgba(104,211,145,.4);opacity:1}
.copy-btn svg{flex-shrink:0}

pre{background:#0a0e18;border:1px solid var(--line);border-radius:10px;padding:15px 17px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:#cdd5e3;margin:20px 0;line-height:1.7}
pre p{margin:0;line-height:inherit;color:inherit}
pre .k{color:var(--violet)}
pre .s{color:var(--ok)}
pre .c{color:var(--dim)}
pre .v{color:var(--busy)}
code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:#0a0e18;border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--flow)}
pre code{background:none;border:none;padding:0;border-radius:0;font-size:inherit;color:inherit}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:'JetBrains Mono',monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--flow)}
td code{color:var(--busy)}

.badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.64rem;padding:2px 8px;border-radius:20px;letter-spacing:.04em}
.b-ok{background:rgba(104,211,145,.14);color:var(--ok)}
.b-no{background:rgba(252,109,109,.14);color:var(--err)}
.b-mid{background:rgba(246,173,85,.14);color:var(--busy)}
.b-info{background:rgba(159,122,234,.14);color:var(--violet)}

button{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:500;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:10px 15px;border-radius:9px;transition:.16s;letter-spacing:.02em}
button:hover{border-color:var(--flow);color:var(--flow);transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.primary{background:var(--flow);color:#06231f;border-color:var(--flow);font-weight:700}
button.primary:hover{filter:brightness(1.1);color:#06231f}
button.on{background:var(--ok);color:#06250f;border-color:var(--ok);font-weight:700}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 16px}
.controls button{font-size:.72rem;padding:7px 12px}

/* Groupe de boutons-onglets */
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:none;border-radius:0;background:transparent;padding:9px 13px}
.seg button.active{background:var(--flow);color:#06231f;font-weight:700}

/* ================================================================
   6. SCHÉMAS & NAVIGATION
   ================================================================ */

/* Grille de 2 colonnes pour simulateurs côte à côte */
.lanes2{display:grid;gap:16px}
.lane{background:#0c111d;border:1px solid var(--line);border-radius:12px;padding:16px}
.lane h4{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.04em;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.lane .sub{font-size:.78rem;color:var(--muted);margin-bottom:12px}

/* Cartes de navigation (page intro d'un cours) */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:20px}
.ncard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px;transition:.18s}
.ncard:hover{border-color:var(--flow);transform:translateY(-2px)}
.ncard .nn{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--flow);letter-spacing:.16em}
.ncard .nt{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;color:var(--text);margin:8px 0 4px}
.ncard .nd{font-size:.84rem;color:var(--muted)}

/* Schémas en boîtes reliées */
.flowrow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;margin:12px 0}
.fbox{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:13px 15px;text-align:center;min-width:96px;transition:.2s}
.fbox .r{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fbox .nm{font-weight:600;font-size:.95rem;margin-top:3px}
.fbox.lit{border-color:var(--flow);background:rgba(79,209,197,.16);box-shadow:0 0 18px rgba(79,209,197,.3)}
.fbox.lit-v{border-color:var(--violet);background:rgba(159,122,234,.16);box-shadow:0 0 18px rgba(159,122,234,.3)}
.fbox.lit-b{border-color:var(--busy);background:rgba(246,173,85,.16);box-shadow:0 0 18px rgba(246,173,85,.3)}
.farrow{color:var(--dim);font-family:'JetBrains Mono',monospace;padding:0 10px;font-size:1rem}
.farrow .lbl{display:block;font-size:.54rem;text-align:center;color:var(--flow)}

/* ================================================================
   7. UTILITAIRES
   ================================================================ */

/* Barres mémoire (cours PHP) */
.mem{display:flex;gap:8px;align-items:flex-end;height:150px;padding:14px;background:#0a0e18;border:1px solid var(--line);border-radius:11px;margin:12px 0;overflow-x:auto}
.membar{min-width:46px;border-radius:6px 6px 0 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;position:relative}
.membar span{font-family:'JetBrains Mono',monospace;font-size:.54rem;color:#06231f;font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.mlabel{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted);margin-top:6px;text-align:center}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:34px 0}

/* Toast d'erreur */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--err);color:#2a0808;font-family:'JetBrains Mono',monospace;font-weight:700;padding:12px 20px;border-radius:10px;font-size:.82rem;z-index:60;transition:transform .3s ease;box-shadow:0 12px 40px -10px rgba(252,109,109,.6)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* Navigation précédent/suivant */
.pager{display:flex;justify-content:space-between;margin-top:48px;gap:12px}
.pager a{flex:1;text-decoration:none;border:1px solid var(--line);border-radius:11px;padding:14px 16px;color:var(--muted);transition:.16s}
.pager a:hover{border-color:var(--flow);color:var(--flow)}
.pager a.next{text-align:right}
.pager a .d{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pager a .l{font-family:'Fraunces',serif;font-size:1.05rem;display:block;margin-top:3px}