/* ---------- Tokens ---------- */
  :root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --bg: #eef2f4;
    --surface: #ffffff;
    --surface-2: #e4eaee;
    --ink: #15252d;
    --ink-soft: #566873;
    --line: #d3dce1;
    --accent: #0e7c7b;
    --accent-ink: #ffffff;
    --warn: #b4410f;
    --warn-bg: #fbe9df;
    --ok: #1f7a4a;
    --font-head: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0f1a20; --surface: #16262e; --surface-2: #1d313a; --ink: #e7eef1;
      --ink-soft: #92a6b0; --line: #29414c; --accent: #3fc1bd; --accent-ink: #062321;
      --warn: #ff9a63; --warn-bg: #3a2418; --ok: #5fd69a;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0f1a20; --surface: #16262e; --surface-2: #1d313a; --ink: #e7eef1;
    --ink-soft: #92a6b0; --line: #29414c; --accent: #3fc1bd; --accent-ink: #062321;
    --warn: #ff9a63; --warn-bg: #3a2418; --ok: #5fd69a;
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
  button, input, select { font: inherit; color: inherit; }

  /* ---------- Client-First : layout ---------- */
  .page-wrapper { min-height: 100vh; }
  .main-wrapper { padding-bottom: 5rem; }
  .padding-global { padding-left: 1rem; padding-right: 1rem; }
  .container-medium { max-width: 36rem; margin-left: auto; margin-right: auto; }
  .padding-section-small { padding-top: 1.25rem; padding-bottom: 0.25rem; }
  .stack { display: flex; flex-direction: column; gap: 1rem; }
  .stack.is-tight { gap: 0.5rem; }
  .row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
  .row.is-between { justify-content: space-between; }

  /* ---------- Typo ---------- */
  .heading-style-h1 { font-family: var(--font-head); font-weight: 700; font-size: 1.75rem; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
  .heading-style-h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin: 0; }
  .text-size-small { font-size: 0.875rem; }
  .text-color-soft { color: var(--ink-soft); }
  .text-color-warn { color: var(--warn); }
  .text-weight-medium { font-weight: 600; }
  .text-style-number { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1; }

  /* ---------- Header + onglets ---------- */
  .header_component { padding-top: 1.25rem; }
  .tabs_nav { display: flex; gap: 0.25rem; background: var(--surface-2); padding: 0.25rem; border-radius: 0.75rem; margin-top: 1rem; }
  .tabs_link { flex: 1; border: 0; background: transparent; padding: 0.55rem 0.5rem; border-radius: 0.55rem; cursor: pointer; font-weight: 500; color: var(--ink-soft); }
  .tabs_link.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

  /* ---------- Cartes ---------- */
  .card_component { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
  .card_component.is-warn { background: var(--warn-bg); border-color: var(--warn); }
  .card_component.is-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .card_component.is-accent .text-color-soft { color: inherit; opacity: .85; }
  .card_header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }

  /* ---------- Formulaires ---------- */
  .form_field { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 5rem; }
  .form_label { font-size: .8125rem; color: var(--ink-soft); }
  .form_input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); min-height: 2.75rem; }
  .form_input:focus-visible, .button:focus-visible, .tabs_link:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---------- Boutons ---------- */
  .button { border: 0; background: var(--accent); color: var(--accent-ink); padding: .65rem 1rem; border-radius: .65rem; font-weight: 600; cursor: pointer; min-height: 2.75rem; }
  .button.is-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .button.is-small { min-height: 2rem; padding: .25rem .6rem; font-size: .875rem; }
  .button.is-light { background: var(--accent-ink); color: var(--accent); }
  .chip { border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: .35rem .8rem; cursor: pointer; font-size: .875rem; }
  .chip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  /* ---------- Listes ---------- */
  .list_item { display: flex; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); align-items: center; }
  .list_item:first-child { border-top: 0; }
  .badge { display: inline-block; padding: .1rem .55rem; border-radius: 99px; background: var(--surface-2); font-size: .8125rem; }
  .chart_svg { width: 100%; height: auto; display: block; }
  .chart_svg text { fill: var(--ink-soft); font-size: 10px; font-family: var(--font-body); }
  .footer_note { text-align: center; padding: 1.5rem 0; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: no-preference) { .tabs_link { transition: background .15s; } }