*,*::before,*::after { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--tx-2);
  font-family: var(--f-body);
  font-size: var(--fs-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; color: var(--tx-1); font-family: var(--f-display); letter-spacing: -.015em; }
h1 { font-size: var(--fs-28); font-weight: 700; }
h2 { font-size: var(--fs-22); font-weight: 700; }
h3 { font-size: var(--fs-16); font-weight: 600; }
h4 { font-size: var(--fs-14); font-weight: 600; }
body { font-weight: 500; }
p { margin: 0 0 var(--s-3); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Timecode / identifiants / chiffres : toujours en mono */
.mono, .id, .tc, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Étiquette de section (eyebrow) */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-11);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-3);
}

.muted  { color: var(--tx-3); }
.strong { color: var(--tx-1); }
.center { text-align: center; }
.right  { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-4 { gap: var(--s-4); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }

/* Scrollbars discrètes */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--tx-3); background-clip: content-box; }

/* Transitions de thème */
body, .panel, .card, .sidebar, .header { transition: background-color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Classes utilitaires ----
   Le nouveau frontend n'écrit aucun style en dur dans le JS.
   Seule exception assumée : les largeurs calculées (barres
   d'avancement, squelettes), qui dépendent d'une valeur. */
.fs-11 { font-size: var(--fs-11); }
.fs-12 { font-size: var(--fs-12); }
.fs-13 { font-size: var(--fs-13); }
.w-280 { max-width: 280px; }
.w-320 { max-width: 320px; }
.w-420 { max-width: 420px; }
.measure { max-width: 64ch; }
.min-52 { min-width: 52px; }
.min-96 { min-width: 96px; }
.rot-90  { transform: rotate(90deg); }
.rot-270 { transform: rotate(-90deg); }
.pad-3 { padding: var(--s-3); }
.surface-2 { background: var(--bg-2); }
.btn-row { width: 100%; text-align: left; }
.code-inline {
  display: inline-block; background: var(--bg-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
}
.skel-title { width: 180px; height: 20px; }
.progress-col { min-width: 90px; }

/* ---- Largeurs bornées : le JS pose une classe, jamais un style ----
   21 paliers de 5 %. La règle d'apparence reste ici. */
.p-0 { width: 0%; }
.p-5 { width: 5%; }
.p-10 { width: 10%; }
.p-15 { width: 15%; }
.p-20 { width: 20%; }
.p-25 { width: 25%; }
.p-30 { width: 30%; }
.p-35 { width: 35%; }
.p-40 { width: 40%; }
.p-45 { width: 45%; }
.p-50 { width: 50%; }
.p-55 { width: 55%; }
.p-60 { width: 60%; }
.p-65 { width: 65%; }
.p-70 { width: 70%; }
.p-75 { width: 75%; }
.p-80 { width: 80%; }
.p-85 { width: 85%; }
.p-90 { width: 90%; }
.p-95 { width: 95%; }
.p-100 { width: 100%; }
.skel-w1 { width: 60%; } .skel-w2 { width: 74%; } .skel-w3 { width: 88%; }