:root {
      --accent:     #5f5cf2;
      --text:       #f5f5f5;
      --muted:      #8899aa;
      --muted2:     #7a8b9c;
      --bg:         #06111c;
      --card-bg:    #060e1a;
      --border:     rgba(95,92,242,0.2);
      --border-sub: rgba(245,245,245,0.07);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', system-ui, sans-serif;
      font-weight: 300;
      min-height: 100vh;
      padding: 2rem 1rem 4rem;
    }
    header { text-align: center; margin-bottom: 2rem; }
    header h1.header-banner-wrap {
      margin: 0 auto 0.3rem;
      line-height: 0;
      max-width: 360px;
    }

    header h1.header-banner-wrap a {
      display: block;
      transition: opacity 0.2s;
    }

    header h1.header-banner-wrap a:hover {
      opacity: 0.85;
    }

    header h1.header-banner-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }
    header p.tagline { color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }
    .lang-switch { text-align: center; margin-bottom: 1.5rem; }
    .lang-switch button {
      background: none;
      border: 1px solid var(--border-sub);
      color: var(--muted);
      padding: 0.3rem 0.9rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.82rem;
      margin: 0 0.2rem;
      font-family: 'Space Mono', monospace;
      transition: border-color 0.2s, color 0.2s;
    }
    .lang-switch button.active { border-color: var(--accent); color: var(--text); }
    .lang-switch button:hover { border-color: var(--accent); color: var(--accent); }
    #last-update {
      color: var(--muted2);
      font-size: 0.75rem;
      text-align: center;
      margin-bottom: 2rem;
      font-family: 'Space Mono', monospace;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      max-width: 900px;
      margin: 0 auto 1rem;
    }
    @media (max-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.2rem 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
    }
    .card img { width: 100%; height: 80px; object-fit: contain; display: block; }
    .card-label {
      font-size: 0.70rem;
      color: var(--muted);
      margin-top: 0.5rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .card-sub {
      font-size: 0.65rem;
      color: var(--muted2);
      margin-top: 0.15rem;
    }
    .stat-value {
      font-family: 'Space Mono', monospace;
      font-size: 2.4rem;
      font-weight: 700;
      color: var(--accent);
      line-height: 1.1;
    }
    .stat-value-sm {
      font-family: 'Space Mono', monospace;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--accent);
      line-height: 1.3;
    }
    .stat-unit {
      font-family: 'Space Mono', monospace;
      font-size: 1rem;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0.05em;
      margin-top: 0.15rem;
      text-transform: uppercase;
    }
    footer {
      text-align: center;
      color: var(--muted2);
      font-size: 0.75rem;
      margin-top: 2.5rem;
      line-height: 1.8;
    }
    footer a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
    .t { display: none; }
    body.lang-en .t-en,
    body.lang-fr .t-fr,
    body.lang-es .t-es { display: inline; }
    .t-block { display: none; }
    body.lang-en .t-block-en,
    body.lang-fr .t-block-fr,
    body.lang-es .t-block-es { display: block; }

    /* ── CHART SECTION (30-day attestation history) ── */
    .chart-section {
      max-width: 900px;
      margin: 2rem auto 0;
      padding: 1.2rem 1rem;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    /* === Phase 5.4 — Heatmap attestation (remplace chart SVG) ============= */
    .chart-section-label {
      font-size: 0.68rem;
      font-family: 'Space Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .heatmap { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 6px; }
    .hm-cell { display: inline-block; width: 14px; height: 14px; border-radius: 2px; cursor: default; flex-shrink: 0; }
    .s-green  { background: #2dd4bf; }
    .s-yellow { background: #fbbf24; }
    .s-orange { background: #fb923c; }
    .s-red    { background: #f87171; }
    .hm-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
    .hm-legend span { display: flex; align-items: center; gap: 5px; }
    .perf-hm-stats { display: flex; gap: 10px; margin: 4px 0 12px; }
    .perf-hm-stat {
      flex: 1; text-align: center;
      background: rgba(95,92,242,0.04);
      border: 1px solid var(--border-sub);
      border-radius: 6px; padding: 8px 6px;
    }
    .perf-hm-stat-value { font-family: 'Space Mono', monospace; font-size: 1.5rem; font-weight: 700; color: var(--accent); } /* 1.5rem=24px = "large text" WCAG → seuil 3:1 → #5f5cf2 passe */
    .perf-hm-stat-label { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
    /* Table collapsible */
    .history-details { margin-top: 12px; border-top: 1px solid var(--border-sub); padding-top: 2px; }
    .history-toggle {
      cursor: pointer; list-style: none; padding: 8px 0;
      font-family: 'Space Mono', monospace; font-size: 0.68rem;
      color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase;
      user-select: none; transition: color 0.2s;
    }
    .history-toggle::-webkit-details-marker { display: none; }
    .history-toggle::marker { display: none; }
    .history-toggle::before { content: '▶  '; color: var(--accent); font-size: 0.6rem; }
    details[open] > .history-toggle::before { content: '▼  '; }
    .history-toggle:hover { color: var(--accent); }
    .status-history-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'Space Mono', monospace; margin-top: 6px; }
    .status-history-table thead th { text-align: left; padding: 5px 8px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border-sub); }
    .status-history-table tbody tr { border-bottom: 1px solid var(--border-sub); }
    .status-history-table tbody tr:last-child { border-bottom: none; }
    .status-history-table tbody tr:hover { background: rgba(95,92,242,0.04); }
    .status-history-table td { padding: 5px 8px; color: var(--muted2); }
    .status-history-table tr.sht-s-green  td:last-child { color: #2dd4bf; font-weight: 700; }
    .status-history-table tr.sht-s-yellow td:last-child { color: #fbbf24; font-weight: 700; }
    .status-history-table tr.sht-s-orange td:last-child { color: #fb923c; font-weight: 700; }
    .status-history-table tr.sht-s-red    td:last-child { color: #f87171; font-weight: 700; }
    @media (max-width: 480px) { .perf-hm-stats { gap: 6px; } .perf-hm-stat-value { font-size: 0.85rem; } }

    /* Visually hidden but exposed to assistive tech & SEO/IA crawlers */
    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ── BACK LINK + LOGO CLICKABLE ── */
    .back-link {
      display: inline-block;
      margin-bottom: 1.5rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem;
      color: var(--muted2);
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: color 0.2s;
    }

    .back-link:hover {
      color: var(--accent);
    }