:root {
    --bg:var(--wc-fond-nuit); --card-bg:rgba(15,25,50,0.55); --card-border:rgba(var(--wc-bleu-clair-rgb),0.13);
    --text:var(--wc-texte-bleute); --text-secondary:#94a8c8; --text-muted:var(--wc-gris-ardoise-2);
    --accent: var(--wc-accent); --accent-soft:rgba(var(--wc-accent-rgb),0.13);
    --separator:rgba(255,255,255,0.06);
    --green: var(--wc-green); --orange: var(--wc-orange); --red: var(--wc-red); --purple:#bf5af2;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:var(--wc-police); min-height:100vh; line-height:1.55; -webkit-font-smoothing:antialiased; }
  .bg-glow {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--wc-accent-rgb),0.10) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 85% 100%, rgba(175,82,222,0.06) 0%, transparent 55%);
  }

  header {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:14px 22px; border-bottom:1px solid var(--separator);
    position:sticky; top:0; background:rgba(3,6,14,0.82); backdrop-filter:saturate(180%) blur(20px); z-index:10;
  }
  header a { color:var(--text-secondary); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:6px; transition:color .15s; }
  header a:hover { color:var(--text); }
  .page-title { text-align:center; font-size:15px; font-weight:600; color:var(--text); }
  .page-title small { color:var(--text-muted); font-weight:400; }

  .layout { display:flex; max-width:1180px; margin:0 auto; padding:32px 18px; gap:48px; }

  /* ─── Sidebar nav ─── */
  .sidebar { width:240px; flex-shrink:0; position:sticky; top:80px; align-self:flex-start; max-height:calc(100vh - 100px); overflow-y:auto; padding-right:6px; }
  .sidebar::-webkit-scrollbar { width:4px; }
  .sidebar::-webkit-scrollbar-thumb { background:var(--separator); border-radius:2px; }
  .nav-group { margin-bottom:22px; }
  .nav-group-title { font-size: var(--wc-surtitre-taille); font-weight: var(--wc-surtitre-graisse); text-transform: var(--wc-surtitre-casse); letter-spacing: var(--wc-surtitre-espacement); color: var(--wc-surtitre-couleur); margin-bottom:8px; padding-left:8px; }
  .nav-link { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--wc-r-s); font-size:13px; color:var(--text-secondary); text-decoration:none; transition:all .15s; cursor:pointer; }
  .nav-link:hover { background:rgba(255,255,255,0.04); color:var(--text); }
  .nav-link.active { background:var(--accent-soft); color:var(--accent); }
  .nav-link .em { font-size:14px; }

  /* ─── Content ─── */
  .content { flex:1; min-width:0; }

  .hero {
    background:linear-gradient(135deg, rgba(var(--wc-accent-rgb),0.10), rgba(175,82,222,0.06));
    border:1px solid var(--card-border); border-radius:var(--wc-r-xl);
    padding:28px 32px; margin-bottom:36px;
  }
  .hero h1 { font-size:28px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
  .hero .lead { font-size:15px; color:var(--text-secondary); max-width:640px; }

  .section { margin-bottom:52px; scroll-margin-top:84px; }
  .section-head {
    display:flex; align-items:center; gap:12px;
    margin-bottom:14px;
  }
  .section-emoji {
    font-size:24px; width:46px; height:46px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); border:1px solid var(--card-border); border-radius:var(--wc-r-m);
    flex-shrink:0;
  }
  .section-title { font-size:22px; font-weight:700; letter-spacing:-0.01em; flex:1; }
  .section-url { font-size:12px; font-family:var(--wc-police-mono); color:var(--accent); padding:3px 9px; background:var(--accent-soft); border-radius:var(--wc-r-s); border:1px solid rgba(var(--wc-accent-rgb),0.2); text-decoration:none; }
  .section-url:hover { background:rgba(var(--wc-accent-rgb),0.25); }

  .section-tldr { font-size:14.5px; color:var(--text-secondary); margin-bottom:14px; line-height:1.6; }
  .section-tldr strong { color:var(--text); }

  .access-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
  .badge { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:var(--wc-r-pilule); border:1px solid; text-transform:uppercase; letter-spacing:.04em; }
  .badge-admin { background:rgba(255,69,58,0.10); color:var(--red); border-color:rgba(255,69,58,0.3); }
  .badge-guest { background:rgba(var(--wc-accent-rgb),0.10); color:var(--accent); border-color:rgba(var(--wc-accent-rgb),0.3); }
  .badge-public { background:rgba(48,209,88,0.10); color:var(--green); border-color:rgba(48,209,88,0.3); }
  .badge-obs { background:rgba(255,159,10,0.10); color:var(--orange); border-color:rgba(255,159,10,0.3); }

  /* ─── Card avec colonne mockup ─── */
  .feature {
    display:grid; grid-template-columns:1fr 320px; gap:24px;
    align-items:start; margin-top:14px;
  }
  @media(max-width:850px) { .feature { grid-template-columns:1fr; } }

  .feature-text h3 { font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; margin-top:14px; }
  .feature-text h3:first-child { margin-top:0; }
  .feature-text ul { list-style:none; }
  .feature-text ul li { font-size:13.5px; color:var(--text-secondary); padding:5px 0 5px 18px; position:relative; line-height:1.55; }
  .feature-text ul li::before { content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700; }
  .feature-text ul li strong { color:var(--text); font-weight:600; }
  .feature-text p { font-size:13.5px; color:var(--text-secondary); }

  .mockup {
    width:100%; aspect-ratio:16/10;
    background:#000;
    border:1px solid var(--card-border);
    border-radius:var(--wc-r-m);
    overflow:hidden;
    position:sticky; top:90px;
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
  }
  .mockup svg { display:block; width:100%; height:100%; }

  .tip {
    background:rgba(var(--wc-accent-rgb),0.06);
    border:1px solid rgba(var(--wc-accent-rgb),0.18);
    border-radius:var(--wc-r-m);
    padding:11px 15px;
    font-size:13px; color:var(--text-secondary);
    margin-top:14px;
    display:flex; align-items:flex-start; gap:8px;
  }
  .tip-icon { color:var(--accent); flex-shrink:0; font-size:14px; }
  .tip strong { color:var(--accent); font-weight:600; }

  .quick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin-top:8px; }
  .quick-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--wc-r-m); padding:12px 14px; }
  .quick-card .title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
  .quick-card .sub { font-size:11.5px; color:var(--text-muted); }
  .quick-card .em { font-size:18px; margin-bottom:6px; display:block; }

  hr { border:none; border-top:1px solid var(--separator); margin:44px 0; }

  /* Footer */
  .page-footer {
    padding:18px 24px;
    border-top:1px solid var(--separator);
    display:flex; justify-content:center; align-items:center;
    font-size:11.5px; color:rgba(255,255,255,0.3);
  }
  .page-footer a { color:rgba(255,255,255,0.3); text-decoration:none; }
  .page-footer a:hover { color:rgba(255,255,255,0.6); }

  @media(max-width:850px) {
    .layout { flex-direction:column; gap:24px; padding:20px 14px; }
    .sidebar { width:100%; position:static; max-height:none; }
    .mockup { position:static; }
    .hero { padding:20px; }
    .hero h1 { font-size:22px; }
  }

    /* Debordement mesure a 360 px (+13 px) : une URL monospace ne se coupait pas. */
    .section-head { flex-wrap: wrap; }
    .section-url { max-width: 100%; overflow-wrap: anywhere; }