/* ============================================================
   LA PEAU DE BASE — ce qu'un navigateur applique avant nous
   base.css · séparé de tokens.css le 28/09/2026
   ============================================================
   ⚠️ POURQUOI CE FICHIER EXISTE. `tokens.css` mêlait **106 déclarations de
   jeton** et **35 déclarations de style** — le corps, les boutons, la peau des
   champs, les barres de défilement. Or la feuille de route du Socle promet que
   *« couleurs, typographie, espacements et animations passent dans React tels
   quels »* : c'est vrai d'un fichier de JETONS, ça ne l'est pas d'un fichier
   mixte. **Une promesse de portabilité qu'on ne peut pas éprouver n'en est pas
   une.**

   ⚠️ RIEN N'A CHANGÉ D'UN CARACTÈRE : les mêmes déclarations, dans le même
   ordre, chargées juste après `tokens.css`. La cascade est identique — *une
   séparation qui change le rendu n'est pas une séparation, c'est une refonte
   déguisée.*

   ⚠️ CE QUI VIT ICI : ce qu'un navigateur applique avant qu'on ait écrit une
   ligne. Ce qui vit dans `tokens.css` : rien que des `--jeton: valeur`, et un
   contrôle le tient.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:13px;line-height:1.45;font-weight:400;-webkit-font-smoothing:antialiased;touch-action:manipulation}
a{color:inherit}
/* ⚠️ LA BASE D'UN CONTRÔLE, C'EST LE CORPS. Elle valait 14 px — une taille qui
   n'est dans aucune échelle, et que `peau.css` réécrit de toute façon à 13
   partout. *Une valeur de repli qui diffère de la valeur réelle fait douter
   des deux.* */
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:var(--t-corps)}
input,select,textarea{font-family:inherit;font-size:var(--t-corps);color:var(--ink)}
/* ⚠️ UN CHAMP N'EST JAMAIS NU — sinon le navigateur l'habille lui-même, EN BLANC.
   L'application dressait ses champs conteneur par conteneur : `.toolbar`,
   `.field`, `.tache-form`, `.linecard`, `.viewas`… Chaque nouveau formulaire
   était une occasion d'en oublier un, et un champ oublié gardait le rendu
   natif : fond blanc. Tant que le thème était clair, personne ne le voyait.
   En sombre, la règle ci-dessus écrit de l'encre claire par-dessus ce fond
   blanc : LE CHAMP DEVIENT ILLISIBLE. Signalé le 20/09/2026 sur le choix du
   canal, dans le journal des échanges d'un prospect — un champ blanc, vide
   en apparence, alors qu'il portait bien une valeur.

   ⚠️ `:where()` NE PÈSE RIEN. La règle doit céder à toutes les autres :
   `.toolbar select` et `.field input` continuent de décider de leur taille et
   de leurs coins. Sans `:where()`, les cinq `:not()` feraient de ce sélecteur
   le plus fort de la feuille et écraseraient tout le reste.

   Cases à cocher, boutons radio, curseurs, sélecteurs de couleur et champs de
   fichier gardent leur rendu natif : un cadre et du remplissage les
   déformeraient. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
       select, textarea){
  /* ⚠️ LA GÉOMÉTRIE DE LA MAISON, PAS UN NOMBRE : un champ doit s'arrondir
     comme le reste de sa charte. C'était le dernier rayon du projet écrit
     en dur hors de l'échelle. */
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); padding:6px 8px;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
       select, textarea):focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-wash);
}
/* Les chiffres s'alignent PARTOUT, pas seulement sur les totaux : dans une
   liste de montants, des chiffres de largeurs différentes empêchent de
   comparer deux lignes d'un coup d'œil. */
td,th,.kpi .val,.tag,.mc-rows,.sumrow,.ti-tag,.ai-tag{font-variant-numeric:tabular-nums}
/* Barre de défilement discrète — la précédente faisait 10px et se voyait
   plus que le contenu qu'elle accompagnait. */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-faint) 32%,transparent);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-faint) 52%,transparent)}
::-webkit-scrollbar-track{background:transparent}