/* ============================================================
   LE THEME PARENT · commun aux trois marques de David
   drink.withdavid · Trail & Road · vousyetes

   Ce fichier ne contient AUCUNE couleur et AUCUNE police.
   Il ne fait que poser la structure, et il la lit dans les variables
   que l'enfant definit. C'est le modele parent / enfant :

     <link rel="stylesheet" href=".../tokens/core.css">   <- le parent, jamais modifie
     <link rel="stylesheet" href=".../tokens/dwd.css">    <- l'enfant, la marque
     <style> :root { --paper:#FFF } </style>              <- le sur-mesure, en dernier

   L'ordre compte : le dernier charge gagne.
   ============================================================ */

/* ── 1. les primitives, communes a tout ──────────────────── */
:root{
  /* espacement, echelle de 4 */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* corps de texte */
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:19px;
  --fs-xl:26px; --fs-2xl:34px; --fs-3xl:46px;

  /* ANGLES DROITS PARTOUT. Decide par David, les trois marques.
     Ce n'est pas un defaut : c'est la regle. Ne pas la surcharger sans raison. */
  --r-card:0; --r-pill:0;

  --lh-tight:1.12; --lh-normal:1.6;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.18s;
}

/* ── 2. le socle ─────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}

/* ── 3. la typographie ───────────────────────────────────── */
h1,h2,h3{
  font-family:var(--disp), var(--body), sans-serif;
  line-height:var(--lh-tight);
  letter-spacing:-.02em;
  margin:0 0 var(--sp-3);
  text-wrap:balance;
}
h1{ font-size:var(--fs-3xl) }
h2{ font-size:var(--fs-xl) }
h3{ font-size:var(--fs-lg) }
p{ margin:0 0 var(--sp-4); max-width:68ch }
small,.muted{ color:var(--muted); font-size:var(--fs-sm) }

/* le libelle en petites capitales mono : dates, references, en-tetes de section */
.label{
  font-family:var(--mono), ui-monospace, Menlo, monospace;
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* les chiffres : toujours alignes en colonne */
.num,td.num,.stat{
  font-family:var(--num, var(--mono)), ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
}

/* ── 4. les surfaces ─────────────────────────────────────── */
.surface{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--sp-5) }
.inset{ background:var(--inset); padding:var(--sp-3) var(--sp-4) }
.rule{ border:0; border-top:1px solid var(--line); margin:var(--sp-5) 0 }

/* ── 5. les commandes ────────────────────────────────────── */
.btn{
  font:inherit; font-weight:700; font-size:var(--fs-sm);
  padding:var(--sp-3) var(--sp-5);
  border:0; border-radius:var(--r-pill);
  background:var(--ink); color:var(--paper);
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.btn:hover{ opacity:.88 }
.btn--accent{ background:var(--accent, var(--amber, var(--orange))); color:var(--on-accent, var(--paper)) }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line) }

/* l'anneau de focus, non negociable : il doit se voir */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent, var(--amber, var(--orange)));
  outline-offset:3px;
}

/* ── 6. les tableaux ─────────────────────────────────────── */
table{ border-collapse:collapse; width:100% }
th,td{ text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); vertical-align:top }
th{
  font-family:var(--mono), monospace; font-size:var(--fs-xs);
  letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:var(--muted); background:var(--inset);
}
tbody tr:last-child td{ border-bottom:0 }
/* la zebrure se lit sans filet : c'est pour ca que --inset a un vrai ecart */
tbody tr:nth-child(even) td{ background:var(--inset) }

/* le tableau large ne fait jamais defiler la page */
.table-scroll{ overflow-x:auto; border:1px solid var(--line) }

/* ── 7. le confort ───────────────────────────────────────── */
img,svg,video{ max-width:100%; height:auto }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}