*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      min-height: 100%; background: var(--bg); color: var(--text);
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 13px; display: flex; flex-direction: column;
    }

    /* ── Header ── */
    header {
      position: sticky; top: 0; z-index: 10;
      height: 46px; padding: 0 20px;
      display: flex; align-items: center; gap: 12px;
      background: var(--surf3); border-bottom: 1px solid var(--bdr);
    }
    .brand-logo { height: 28px; width: auto; }
    :root[data-theme="dark"]  .logo-light { display: none; }
    :root:not([data-theme="dark"]) .logo-dark  { display: none; }
    .beta-badge {
      font-size: 10px; font-weight: 700;
      background: var(--warm); color: #fff;
      padding: 2px 7px; border-radius: 4px;
      letter-spacing: 0.5px; text-transform: uppercase;
    }
    .header-title { flex: 1; font-size: 14px; font-weight: 700; }
    .header-title span { color: var(--blul); }
    .btn-back {
      display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
      background: transparent; border: 1px solid var(--bdr2); border-radius: 2px;
      color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none;
      transition: background .1s, color .1s;
    }
    .btn-back:hover { background: var(--surf2); color: var(--text); }

    /* ── Layout ── */
    main {
      flex: 1; max-width: 920px; width: 100%;
      margin: 0 auto; padding: 32px 20px 72px;
      display: flex; flex-direction: column; gap: 36px;
    }

    /* ── Intro ── */
    .intro-kicker {
      font-size: 10px; font-weight: 800; letter-spacing: .16em;
      text-transform: uppercase; color: var(--blul); margin-bottom: 10px;
    }
    .intro h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
    .intro p  { color: var(--muted); line-height: 1.7; max-width: 600px; }

    /* ── Table des matières ── */
    .toc {
      background: var(--surf); border: 1px solid var(--bdr2); border-radius: 4px;
      padding: 16px 20px;
    }
    .toc-title {
      font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 12px;
    }
    .toc-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 6px 16px;
    }
    .toc-link {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 600; color: var(--blul);
      text-decoration: none; padding: 4px 0;
      transition: color .1s;
    }
    .toc-link:hover { color: var(--text); }
    .toc-link svg { flex-shrink: 0; opacity: .6; }

    /* ── Section ── */
    .tuto-section { display: flex; flex-direction: column; gap: 12px; }
    .section-header {
      display: flex; align-items: center; gap: 10px;
      padding-bottom: 8px; border-bottom: 1px solid var(--bdr2);
    }
    .section-icon {
      width: 30px; height: 30px; border-radius: 6px;
      background: color-mix(in srgb, var(--accent2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 20%, transparent);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: var(--blul);
    }
    .section-title {
      font-size: 15px; font-weight: 700; color: var(--text);
    }
    .section-sub {
      font-size: 11px; color: var(--muted); margin-left: auto;
    }

    /* ── Grille de cards ── */
    .cards-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 8px;
    }
    .card {
      background: var(--surf); border: 1px solid var(--bdr2); border-radius: 4px;
      padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
    }
    .card-title {
      font-size: 12px; font-weight: 700; color: var(--text);
      display: flex; align-items: center; gap: 7px;
    }
    .card-body { font-size: 11px; color: var(--muted); line-height: 1.65; }
    .card-body code {
      background: var(--surf2); border: 1px solid var(--bdr2);
      border-radius: 3px; padding: 1px 5px; font-family: 'Consolas', monospace; font-size: 10px;
    }

    /* ── Étapes numérotées ── */
    .steps { display: flex; flex-direction: column; gap: 6px; }
    .step-item {
      display: flex; gap: 10px; align-items: flex-start;
    }
    .step-num {
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--blul); color: #fff;
      font-size: 10px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .step-text { font-size: 11px; color: var(--muted); line-height: 1.6; }
    .step-text strong { color: var(--text); }

    /* ── Raccourcis clavier ── */
    .kbd-list { display: flex; flex-direction: column; gap: 6px; }
    .kbd-row {
      display: flex; align-items: center; gap: 8px; font-size: 11px;
    }
    .kbd-keys { display: flex; gap: 3px; flex-shrink: 0; }
    kbd {
      background: var(--surf2); border: 1px solid var(--bdr);
      border-bottom: 2px solid var(--bdr);
      border-radius: 3px; padding: 2px 7px;
      font-family: 'Consolas', monospace; font-size: 10px;
      color: var(--text); white-space: nowrap;
    }
    .kbd-desc { color: var(--muted); }

    /* ── Note / Astuce ── */
    .note {
      background: color-mix(in srgb, var(--accent2) 6%, transparent); border-left: 3px solid var(--blul);
      border-radius: 0 4px 4px 0; padding: 10px 14px;
      font-size: 11px; color: var(--muted); line-height: 1.6;
    }
    .note strong { color: var(--blul); }
    .tip {
      background: rgba(78,201,176,.06); border-left: 3px solid var(--green);
      border-radius: 0 4px 4px 0; padding: 10px 14px;
      font-size: 11px; color: var(--muted); line-height: 1.6;
    }
    .tip strong { color: var(--green); }

    /* ── Badge ── */
    .badge {
      display: inline-flex; align-items: center;
      font-size: 9px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; border-radius: 2px; padding: 2px 6px;
    }
    .badge-blue   { background: color-mix(in srgb, var(--accent2) 12%, transparent); color: var(--blul);  border: 1px solid color-mix(in srgb, var(--accent2) 28%, transparent); }
    .badge-green  { background: rgba(78,201,176,.12); color: var(--green); border: 1px solid rgba(78,201,176,.28); }
    .badge-orange { background: rgba(255,153,51,.12); color: var(--orange);border: 1px solid rgba(255,153,51,.28); }

    /* ── Card large (full width) ── */
    .card-wide {
      background: var(--surf); border: 1px solid var(--bdr2); border-radius: 4px;
      padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
    }

    footer {
      text-align: center; padding: 14px 20px;
      font-size: 11px; color: var(--muted);
      border-top: 1px solid var(--bdr2);
    }

    @media (max-width: 600px) {
      .cards-grid { grid-template-columns: 1fr; }
      .toc-grid   { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 400px) {
      .toc-grid { grid-template-columns: 1fr; }
    }