/* ---------------------------------------------------------------------------
   Pont entre le kit de composants et les jetons de la DÉMO.
   23.09.2026 — technicien Adjoint.

   ⚠️ Pourquoi ce fichier plutôt que le `pont-variables.css` livré avec le kit :
   ce dernier fait pointer les variables du kit vers le thème `--adj-*`
   (adjoint-themes.css). Or la démonstration ne charge PAS ce thème : elle a son
   propre jeu de jetons (--bg, --surface, --line, --muted, --bad, --ombre…),
   redéfini par `themes.css` à chaque changement de style. Brancher le kit sur
   `--adj-*` l'aurait laissé sans couleurs ici.

   ⚠️ Et le piège qui s'y cachait : `--adj-border` n'est pas une couleur, c'est
   une ÉPAISSEUR (0px, 1px, 3px selon le style) ; la couleur, c'est `--adj-line`.
   Le pont d'origine écrivait `--border: var(--adj-border, …)` : les cartes se
   retrouvaient avec `border: 1px solid 1px`, déclaration invalide — plus aucun
   cadre, dans les dix styles. Mesuré au rendu le 23.09 avant correction.

   RÈGLE DE CE FICHIER : on n'AJOUTE que ce qui manque. On ne redéfinit jamais
   --bg, --surface, --surface2, --accent ni --text : la démo les possède déjà et
   c'est `themes.css` qui les pilote. Les figer ici gèlerait le choix de style.

   ⚠️ ET ON DÉCLARE SUR `body`, PAS SUR `:root`. Le style de la démo est posé sur
   le BODY (`body[data-style="carnet"]{--line:…}`). Une variable écrite sur
   `:root` résout ses `var()` au niveau de <html>, où --line vaut toujours la
   valeur par défaut d'app.css : le kit serait resté habillé en « Nordique »
   quel que soit le style choisi. Vérifié au rendu sur les dix styles.

   À charger APRÈS themes.css/mises.css et AVANT kit-composants.css.
   --------------------------------------------------------------------------- */
body{
  /* --- contours : --line est la COULEUR, --bordure l'épaisseur --- */
  --border:        var(--line);
  --border-strong: color-mix(in srgb, var(--line) 60%, var(--text));

  /* --- texte secondaire et tertiaire --- */
  --text2:         var(--muted);
  --text3:         color-mix(in srgb, var(--muted) 75%, transparent);

  /* --- accent --- */
  --on-accent:     var(--accent-text);
  --accent-soft:   color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-hover:  color-mix(in srgb, var(--accent) 85%, #000);
  --accent-ink:    var(--accent);

  /* --- états --- */
  --red:           var(--bad);
  --green:         var(--ok);

  /* --- ombre : suit le style choisi ; « none » est une valeur valide --- */
  --shadow-sm:     var(--ombre, 0 1px 3px rgba(0,0,0,.08));

  /* --- le kit lit aussi six noms --adj-* en direct --- */
  --adj-accent:    var(--accent);
  --adj-on-accent: var(--accent-text);
  --adj-ink:       var(--text);
  --adj-ok:        var(--ok);
  --adj-warn:      var(--warn);
  --adj-danger:    var(--bad);
}

/* ---------------------------------------------------------------------------
   Adaptations de la démonstration (pas des corrections du kit)
   --------------------------------------------------------------------------- */

/* Le kit MASQUE le filtre A-Z sous 600 px (`.kit-cli__abc{display:none}`) :
   vingt-six boutons sur une ligne ne tiennent pas sur un téléphone. Mais Daniel
   regarde la démonstration sur son téléphone — masqué là, le filtre n'existe
   pour ainsi dire pas. La démo, elle, fait passer ses filtres à la ligne
   (`.chips{flex-wrap:wrap}`) : on applique le même usage plutôt que de cacher.
   Constaté au rendu : sans ça, la barre était introuvable en 430 px.
   ⚠️ Ce fichier est chargé AVANT le kit (il doit fournir les variables d'abord).
   À spécificité égale, c'est donc le kit qui gagnerait : on écrit `.kit-cli
   .kit-cli__abc` (deux classes) pour passer devant `.kit-cli__abc`. Première
   tentative sans ça : la règle était bien déployée et sans effet. */
@media (max-width: 600px) {
  .kit-cli .kit-cli__abc {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .kit-cli .kit-cli__abc button { min-width: 30px; }
}