@layer base{
  /* Les champs n'héritent PAS de la typo par défaut : un <textarea> tombait
     sur la police et la taille du navigateur (mesuré à 14 px, hors échelle). */
  input,select,textarea,button{font-family:inherit}
  textarea{font-size:var(--fs-md);line-height:var(--lh-normal)}

  /* ── Resets (U1 - déplacés depuis 01-tokens.css) ── */
  *{box-sizing:border-box}
  /* `scrollbar-gutter` ne réserve la place que si `overflow` n'est pas
     `visible` — la valeur par défaut sur `html`. D'où le duo : `overflow-y:
     scroll` force la présence du rail en permanence (même vide, le pouce
     maison ne se voit pas hors survol), `scrollbar-gutter:stable` le rend
     stable. Sans ça, une vue qui ne déborde pas (ex. Paramètres) rend son
     viewport plus large qu'une vue qui déborde (ex. Accueil), et le header +
     `.wrap` — centrés sur `100%` — sautent de la largeur de la barre en
     changeant de vue. */
  html{scroll-behavior:smooth;overflow-y:scroll;scrollbar-gutter:stable}
  body{margin:0;font:15px/1.55 var(--font-sans);background:var(--bg);color:var(--txt)}
  html,body{overscroll-behavior-x:none}   /* coupe le geste « page précédente/suivante » du trackpad */

  /* ── Barre de défilement maison ──────────────────────────────────────────
     PIÈGE : `scrollbar-width` et `::-webkit-scrollbar` ne se complètent PAS,
     ils s'excluent. Dès que la propriété standard est posée, Chrome ignore
     les pseudo-éléments — une première version réservait 2 px au lieu de 10,
     et le pouce arrondi ne s'affichait jamais. On aiguille donc :
       · Firefox (pas de pseudo-éléments) → la propriété standard ;
       · WebKit/Blink → les pseudo-éléments, qui seuls donnent le rayon et
         le pouce rétréci par bordure transparente (`background-clip`), lequel
         garde une cible large tout en dessinant un trait fin.
     Le pouce est NEUTRE : une barre n'est pas un état, elle ne porte pas
     l'accent. Elle se révèle au survol.
     Les composants qui masquent leur barre gardent la main (sélecteur plus
     spécifique). */
  @supports not selector(::-webkit-scrollbar){
    *{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
  }
  ::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:var(--sb-thumb);border-radius:var(--radius-pill);
    border:var(--sb-pad) solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box}
  @media (prefers-reduced-motion:no-preference){
    ::-webkit-scrollbar-thumb{transition:background var(--dur-2)}
  }

  /* ── Accessibilité ── */
  :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
  .skip{position:absolute;left:12px;top:-48px;background:var(--accent);color:var(--on-solid);padding:var(--sp-10) var(--sp-14);border-radius:var(--radius);z-index:100}
  .skip:focus{top:12px}

  /* ── Spinner global - CDC_UPDATE.md lot U2 ── */
  @keyframes dh-spin{to{transform:rotate(360deg)}}
  .spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);
    border-radius:50%;animation:dh-spin .7s linear infinite;display:inline-block}


}