*, *::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 {
      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); }

    main {
      flex: 1; max-width: 880px; width: 100%;
      margin: 0 auto; padding: 32px 20px 64px;
      display: flex; flex-direction: column; gap: 28px;
    }

    /* ── 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; }

    /* ── Légende ── */
    .legend {
      display: flex; gap: 16px; flex-wrap: wrap;
    }
    .legend-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; color: var(--muted);
    }
    .legend-dot {
      width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
    }

    /* ── Catégorie ── */
    .category-title {
      font-size: 10px; font-weight: 800;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 10px; padding: 0 2px;
    }
    .category-grid {
      display: flex; flex-direction: column; gap: 6px;
    }

    /* ── Feature row ── */
    .feat-row {
      background: var(--surf);
      border: 1px solid var(--bdr2); border-radius: 2px;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      gap: 4px 12px;
    }
    .feat-name {
      font-size: 13px; font-weight: 600; color: var(--text);
      display: flex; align-items: center; gap: 8px;
    }
    .feat-desc {
      font-size: 11px; color: var(--muted); line-height: 1.5;
      grid-column: 1;
    }
    .feat-pct {
      font-size: 12px; font-weight: 700;
      grid-row: 1; grid-column: 2; align-self: center;
      text-align: right; white-space: nowrap; min-width: 36px;
    }
    .feat-bar-wrap {
      grid-column: 1 / -1;
      height: 3px; background: var(--bdr2); border-radius: 2px;
      overflow: hidden;
    }
    .feat-bar {
      height: 100%; border-radius: 2px;
      transition: width .4s ease;
    }

    /* Couleurs selon état */
    .pct-0  { color: var(--muted); }
    .pct-low   { color: var(--orange); }
    .pct-mid   { color: var(--blul); }
    .pct-high  { color: var(--green); }
    .pct-done  { color: var(--green); }

    .bar-0    { background: var(--bdr); }
    .bar-low  { background: var(--orange); }
    .bar-mid  { background: var(--blul); }
    .bar-high { background: var(--green); }
    .bar-done { background: var(--green); }

    /* Badge tag */
    .tag {
      font-size: 9px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; border-radius: 2px; padding: 2px 6px;
    }
    .tag-done   { background: rgba(78,201,176,.15); color: var(--green); border: 1px solid rgba(78,201,176,.3); }
    .tag-wip    { background: color-mix(in srgb, var(--accent2) 12%, transparent); color: var(--blul); border: 1px solid color-mix(in srgb, var(--accent2) 28%, transparent); }
    .tag-idea   { background: rgba(133,133,133,.1); color: var(--muted); border: 1px solid rgba(133,133,133,.2); }

    /* ── Totaux ── */
    .summary {
      background: var(--surf); border: 1px solid var(--bdr2); border-radius: 2px;
      padding: 16px 18px;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .summary-item { text-align: center; }
    .summary-val {
      font-size: 28px; font-weight: 700; line-height: 1;
      margin-bottom: 4px;
    }
    .summary-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

    /* ── Barre de progression globale ── */
    #global-progress {
      background: var(--surf);
      border-bottom: 1px solid var(--bdr);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    #global-bar-track {
      flex: 1;
      height: 7px;
      background: var(--bdr2);
      border-radius: 4px;
      overflow: hidden;
    }
    #global-bar-fill {
      height: 100%;
      width: 0%;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--orange) 0%, var(--blul) 50%, var(--green) 100%);
      background-size: 200% 100%;
      transition: width .8s cubic-bezier(.4,0,.2,1);
    }
    #global-bar-label {
      font-size: 11px; font-weight: 700;
      color: var(--muted); white-space: nowrap;
    }
    #global-bar-pct { color: var(--green); }

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

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