/* ==============================================================
   📍  OU VA CE FICHIER
   --------------------------------------------------------------
   /www/app.adi73.fr/Public/css/tons.css

   📌  QUELLE VERSION
   --------------------------------------------------------------
   V1.5  -  260928  -  Franck GARDET

   ✏  CE QUI CHANGE
   --------------------------------------------------------------
   V1.5 — DEUX COULEURS FONCÉES D'UN CRAN (Franck, 28/09 : « ok »).
   Le blanc d'Enregistrer sur l'orange #d35400 faisait 4,2 : 1, le
   bleu d'Annuler #2980b9 4,3 : 1 — sous le 4,5 : 1 conseillé.
     · Enregistrer : #d35400 → #c24e00 (4,8 : 1). Survol inchangé.
     · Annuler     : #2980b9 → #2573a8 (5,1 : 1).
   Et le pied collé (§ 7.6) marche sur n'importe quel pied, plus
   seulement `.adi-pied` : le dossier d'étude garde ses pieds de
   module. Il s'arrête au-dessus d'une barre du bas collée elle
   aussi (`--adi-pied-bas`, posée par l'écran).

   V1.4 — 260928
   V1.4 — LES BOUTONS (chapitre 7, en bas). La forme de chaque
   bouton, UNE fois : Enregistrer, Valider, Annuler, Modifier,
   Ajouter, Archiver, Fermer, Retour, Voir, Propositions, ⋯ ; deux
   tailles, la forme compacte (le symbole seul), les badges, le
   pied de bloc et ses zones. Clair, sombre et `.dedark`.
   ⚠ AUCUN ECRAN NE S'EN SERT ENCORE : ce sont des classes
     NOUVELLES (`adi-bt…`, `adi-pied…`, `adi-z…`). Rien ne change
     a l'ecran tant qu'un ecran ne les pose pas. Les mots, les
     symboles et les places : `boutons.js`. La maquette validee le
     27/09 : `Claude\Maquettes\maquette_boutons.html`.

   V1.3 — 260927
   V1.3 — LA PALETTE DE 🔥 SELECTION PAC (chapitre 6) : les onze
   couleurs que `mod_pac.html` ecrivait en dur dans son JavaScript,
   memes valeurs — rien ne change a l'ecran. Et une correction de
   TEXTE au chapitre 5 :
   le chapitre 5 disait que la colonne Etat et la jauge restaient
   en tons de jour en mode sombre. Depuis ❄ Etude & selection V4.1
   (D4), elles passent aux variantes `-sombre` comme le reste.

   V1.2 — 260926
   V1.2 — LES COULEURS DU VERDICT ET DU MODE, ICI ET NULLE PART
   AILLEURS (chapitre 5, en bas).
   1. `--cv-ok` `--cv-wa` `--cv-ko` `--cv-dim` : couvert, juste /
      surdimensionne, insuffisant, inconnu. Et leurs variantes
      `-sombre` pour le dossier en `.dedark`.
   2. `--mode-froid` `--mode-chaud` : le bleu du froid, le rouge
      du chaud (« bleu froid, rouge chaud », Franck 21/09).
   3. ⚠ LES VALEURS SONT CELLES QUI ETAIENT ECRITES EN DUR dans
      ❄ Etude & selection V3.14 : rien ne change a l'ecran. Ce qui
      change, c'est qu'on les modifie ICI, une fois.
   4. Deux classes pretes pour les ecrans a venir : `.adi-cv` (un
      pourcentage de couverture) et `.adi-cv-pt` (sa pastille).

   V1.1 — 260925
   1. UNE QUATRIEME FORME : `.adi-chip`, le bouton d'etat. La
      meme pastille, mais CLIQUABLE - c'est ce que la Boite
      dessinait a la main, en style en ligne, dans deux ecrans.
   2. Le chemin en tete disait encore `adi73_tons.css`, l'ancien
      nom. Le fichier a ete renomme le 24/09, pas son en-tete.

   Le detail, les pourquoi et les seize tons : plus bas.
   ============================================================== */

/* =============================================================
   LES TONS D'ETAT - V1.5 - 260928 - Franck GARDET
   =============================================================

   ══════════════════════════════════════════════════════════════
   CE QUE C'EST
   ══════════════════════════════════════════════════════════════

     LE vocabulaire de couleurs de l'application. Seize tons, un
     seul endroit, clair et sombre.

     Franck, 22/09 : « on va pas tarder à utiliser tout cela et ça
     existe déjà dans dossier étude. Un bouton état = sa couleur
     propre. »

     ⚠ C'EST LE PREMIER FICHIER .css DU PROJET. Jusqu'ici tout le
       style était injecté par JavaScript (`shell.js _injectCSS`,
       et chaque écran pour son compte). Un `<link>` se charge
       AVANT le JS : les variables existent donc dès la première
       peinture, et un fragment chargé en XHR les trouve déjà
       posées. C'est ce qui permet à un écran HTML de s'en servir
       sans passer par une brique.

   ══════════════════════════════════════════════════════════════
   POURQUOI CE FICHIER EXISTE
   ══════════════════════════════════════════════════════════════

     Au 22/09, QUATRE familles de couleurs d'état cohabitaient,
     sans se connaître :

       · les 13 étapes du dossier — `etudes.workflow.etapes`,
         réglées en base… et SANS AUCUNE COULEUR ;
       · les 31 étapes à la réception — `demandes.etapes`, avec
         leur `ton`, posées le 22/09 ;
       · les 12 modules du dossier — `MODS[].mc`, en dur dans
         `dossier_etude.html` ;
       · les 7 pastilles de communication — en dur dans
         `shell.js`.

     Quatre palettes, quatre endroits, aucune parenté. Ce fichier
     donne le vocabulaire ; les réglages disent qui porte quoi.

   ══════════════════════════════════════════════════════════════
   ⚠ CE QUE CE FICHIER NE FAIT PAS
   ══════════════════════════════════════════════════════════════

     IL NE DÉCIDE PAS QUELLE ÉTAPE A QUELLE COULEUR. Ça, c'est le
     métier, et ça se règle en base :

       `etudes.workflow.etapes[].ton`  → étapes du dossier
       `demandes.etapes[].ton`         → étapes à la réception

     Ce fichier tient la PALETTE ; les réglages tiennent le SENS.
     Un #hexa rangé en base, c'est le jour où le mode sombre le
     rend illisible.

   ══════════════════════════════════════════════════════════════
   COMMENT ON S'EN SERT
   ══════════════════════════════════════════════════════════════

     En HTML, la pastille complète :
       <span class="adi-ton t-indigo">🧾 Devis</span>

     Le point seul, dans une liste :
       <span class="adi-pt t-indigo"></span>

     La grosse pastille, en tête d'écran :
       <span class="adi-ton adi-ton-gros t-indigo">…</span>

     En CSS, pour teinter n'importe quoi :
       border-left: 3px solid var(--ton-indigo);

     ⚠ TOUJOURS AVEC UN REPLI quand on écrit la variable à la
       main : `var(--ton-indigo, #4f46e5)`. Le jour où ce fichier
       n'est pas déposé, la couleur tombe sur son repli au lieu de
       disparaître. Une pastille sans couleur reste lisible ; une
       pastille transparente, non.

   ══════════════════════════════════════════════════════════════
   LES SEIZE TONS
   ══════════════════════════════════════════════════════════════

     Onze de service, validés le 22/09 sur maquette :
       indigo · violet · ardoise · vert · jaune · brun · orange ·
       rose · bleu · rouge · cyan

     Quatre de renfort, quand onze ne suffisent pas :
       marine · turquoise · olive · bordeaux

     Un de repli : gris — l'état qu'aucun réglage ne connaît.
     ⚠ AUCUN ÉTAT NE DOIT PORTER `gris` VOLONTAIREMENT. Il est
       réservé à l'inconnu : s'il sert aussi d'état normal, on ne
       distingue plus « pas encore rangé » de « rangé en gris ».

   ⚠ SEIZE COULEURS NE SE DISTINGUENT PAS À LA COULEUR SEULE.
     Vérifié au validateur, pas à l'œil. Toute pastille porte donc
     son MOT, et si possible son SIGNE. La couleur accélère la
     lecture ; elle ne la porte jamais.
   ============================================================= */

:root {
  /* ── Les onze de service ─────────────────────────────────── */
  --ton-indigo:         #4f46e5;  --ton-indigo-fond:    #eef2ff;
  --ton-violet:         #9333ea;  --ton-violet-fond:    #faf5ff;
  --ton-ardoise:        #64748b;  --ton-ardoise-fond:   #f8fafc;
  --ton-vert:           #059669;  --ton-vert-fond:      #f0fdf4;
  --ton-jaune:          #ca8a04;  --ton-jaune-fond:     #fefce8;
  --ton-brun:           #92400e;  --ton-brun-fond:      #fef6ee;
  --ton-orange:         #ea580c;  --ton-orange-fond:    #fff7ed;
  --ton-rose:           #db2777;  --ton-rose-fond:      #fdf2f8;
  --ton-bleu:           #2563eb;  --ton-bleu-fond:      #eff6ff;
  --ton-rouge:          #dc2626;  --ton-rouge-fond:     #fef2f2;
  --ton-cyan:           #0e7490;  --ton-cyan-fond:      #ecfeff;
  /* ── Les quatre de renfort ───────────────────────────────── */
  --ton-marine:         #1e3a8a;  --ton-marine-fond:    #eef2ff;
  --ton-turquoise:      #0d9488;  --ton-turquoise-fond: #f0fdfa;
  --ton-olive:          #65a30d;  --ton-olive-fond:     #f7fee7;
  --ton-bordeaux:       #991b1b;  --ton-bordeaux-fond:  #fef2f2;
  /* ── Le repli ────────────────────────────────────────────── */
  --ton-gris:           #94a3b8;  --ton-gris-fond:      #f8fafc;
}

/* ⚠ LE SOMBRE N'EST PAS UN ÉCLAIRCISSEMENT DU CLAIR. Chaque
   valeur est choisie contre le fond ardoise du thème sombre et
   vérifiée au contraste. Un sombre calculé depuis le clair donne
   des pastilles ternes — c'est visible tout de suite, et c'est
   irrattrapable sans les reprendre une à une. */
.dark {
  --ton-indigo:         #818cf8;  --ton-indigo-fond:    #1e1b4b;
  --ton-violet:         #c084fc;  --ton-violet-fond:    #2e1065;
  --ton-ardoise:        #94a3b8;  --ton-ardoise-fond:   #1e293b;
  --ton-vert:           #34d399;  --ton-vert-fond:      #064e3b;
  --ton-jaune:          #facc15;  --ton-jaune-fond:     #422006;
  --ton-brun:           #c98a5e;  --ton-brun-fond:      #2b1a0c;
  --ton-orange:         #fb923c;  --ton-orange-fond:    #431407;
  --ton-rose:           #f472b6;  --ton-rose-fond:      #500724;
  --ton-bleu:           #60a5fa;  --ton-bleu-fond:      #172554;
  --ton-rouge:          #f87171;  --ton-rouge-fond:     #450a0a;
  --ton-cyan:           #22d3ee;  --ton-cyan-fond:      #083344;
  --ton-marine:         #93c5fd;  --ton-marine-fond:    #111d45;
  --ton-turquoise:      #2dd4bf;  --ton-turquoise-fond: #042f2e;
  --ton-olive:          #a3e635;  --ton-olive-fond:     #1a2e05;
  --ton-bordeaux:       #fca5a5;  --ton-bordeaux-fond:  #3f0d0d;
  --ton-gris:           #64748b;  --ton-gris-fond:      #111827;
}

/* ⚠ Le dossier d'étude a SON PROPRE interrupteur sombre
   (`.dedark` sur `.de-root`, Section 15 § 6.3 bis) : shell sombre
   + dossier clair donnait des cartes noires dans un module blanc.
   Les tons suivent donc les DEUX patrons, sinon une pastille
   resterait claire au milieu d'un dossier passé au sombre. */
.dedark {
  --ton-indigo:         #818cf8;  --ton-indigo-fond:    #1e1b4b;
  --ton-violet:         #c084fc;  --ton-violet-fond:    #2e1065;
  --ton-ardoise:        #94a3b8;  --ton-ardoise-fond:   #1e293b;
  --ton-vert:           #34d399;  --ton-vert-fond:      #064e3b;
  --ton-jaune:          #facc15;  --ton-jaune-fond:     #422006;
  --ton-brun:           #c98a5e;  --ton-brun-fond:      #2b1a0c;
  --ton-orange:         #fb923c;  --ton-orange-fond:    #431407;
  --ton-rose:           #f472b6;  --ton-rose-fond:      #500724;
  --ton-bleu:           #60a5fa;  --ton-bleu-fond:      #172554;
  --ton-rouge:          #f87171;  --ton-rouge-fond:     #450a0a;
  --ton-cyan:           #22d3ee;  --ton-cyan-fond:      #083344;
  --ton-marine:         #93c5fd;  --ton-marine-fond:    #111d45;
  --ton-turquoise:      #2dd4bf;  --ton-turquoise-fond: #042f2e;
  --ton-olive:          #a3e635;  --ton-olive-fond:     #1a2e05;
  --ton-bordeaux:       #fca5a5;  --ton-bordeaux-fond:  #3f0d0d;
  --ton-gris:           #64748b;  --ton-gris-fond:      #111827;
}

/* ══════════════════════════════════════════════════════════════
   LES TROIS FORMES
   ══════════════════════════════════════════════════════════════ */

/* 1 · La pastille — un état dans une ligne, un pied de bloc. */
.adi-ton {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid; border-radius: 6px; padding: 2px 9px;
  font-size: .86em; font-weight: 600; line-height: 1.35;
  white-space: nowrap;
}

/* 2 · La grosse pastille — un état en tête d'écran. */
.adi-ton-gros {
  flex-direction: column; align-items: center; justify-content: center;
  border-width: 2px; border-radius: 12px; padding: 4px 18px;
  line-height: 1.15; text-align: center; white-space: normal;
}
.adi-ton-gros .adi-ton-t {
  font-size: .58em; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; opacity: .75;
}
.adi-ton-gros .adi-ton-v { font-size: 1.18em; font-weight: 800; }

/* 3 · Le point — une liste dense, où le mot suffit à côté. */
.adi-pt {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 99px; flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   L'ASSIGNATION — une classe par ton, deux formes servies
   ══════════════════════════════════════════════════════════════ */
.adi-ton.t-indigo    { color:var(--ton-indigo);    background:var(--ton-indigo-fond);    border-color:var(--ton-indigo); }
.adi-ton.t-violet    { color:var(--ton-violet);    background:var(--ton-violet-fond);    border-color:var(--ton-violet); }
.adi-ton.t-ardoise   { color:var(--ton-ardoise);   background:var(--ton-ardoise-fond);   border-color:var(--ton-ardoise); }
.adi-ton.t-vert      { color:var(--ton-vert);      background:var(--ton-vert-fond);      border-color:var(--ton-vert); }
.adi-ton.t-jaune     { color:var(--ton-jaune);     background:var(--ton-jaune-fond);     border-color:var(--ton-jaune); }
.adi-ton.t-brun      { color:var(--ton-brun);      background:var(--ton-brun-fond);      border-color:var(--ton-brun); }
.adi-ton.t-orange    { color:var(--ton-orange);    background:var(--ton-orange-fond);    border-color:var(--ton-orange); }
.adi-ton.t-rose      { color:var(--ton-rose);      background:var(--ton-rose-fond);      border-color:var(--ton-rose); }
.adi-ton.t-bleu      { color:var(--ton-bleu);      background:var(--ton-bleu-fond);      border-color:var(--ton-bleu); }
.adi-ton.t-rouge     { color:var(--ton-rouge);     background:var(--ton-rouge-fond);     border-color:var(--ton-rouge); }
.adi-ton.t-cyan      { color:var(--ton-cyan);      background:var(--ton-cyan-fond);      border-color:var(--ton-cyan); }
.adi-ton.t-marine    { color:var(--ton-marine);    background:var(--ton-marine-fond);    border-color:var(--ton-marine); }
.adi-ton.t-turquoise { color:var(--ton-turquoise); background:var(--ton-turquoise-fond); border-color:var(--ton-turquoise); }
.adi-ton.t-olive     { color:var(--ton-olive);     background:var(--ton-olive-fond);     border-color:var(--ton-olive); }
.adi-ton.t-bordeaux  { color:var(--ton-bordeaux);  background:var(--ton-bordeaux-fond);  border-color:var(--ton-bordeaux); }
.adi-ton.t-gris      { color:var(--ton-gris);      background:var(--ton-gris-fond);      border-color:var(--ton-gris); }

.adi-pt.t-indigo    { background:var(--ton-indigo); }
.adi-pt.t-violet    { background:var(--ton-violet); }
.adi-pt.t-ardoise   { background:var(--ton-ardoise); }
.adi-pt.t-vert      { background:var(--ton-vert); }
.adi-pt.t-jaune     { background:var(--ton-jaune); }
.adi-pt.t-brun      { background:var(--ton-brun); }
.adi-pt.t-orange    { background:var(--ton-orange); }
.adi-pt.t-rose      { background:var(--ton-rose); }
.adi-pt.t-bleu      { background:var(--ton-bleu); }
.adi-pt.t-rouge     { background:var(--ton-rouge); }
.adi-pt.t-cyan      { background:var(--ton-cyan); }
.adi-pt.t-marine    { background:var(--ton-marine); }
.adi-pt.t-turquoise { background:var(--ton-turquoise); }
.adi-pt.t-olive     { background:var(--ton-olive); }
.adi-pt.t-bordeaux  { background:var(--ton-bordeaux); }
.adi-pt.t-gris      { background:var(--ton-gris); }

/* ==============================================================
   4 · LE BOUTON D'ETAT - `.adi-chip`
   ==============================================================

     Franck, 24/09 : « un bouton qui change selon l'etat - a mon
     avis fais-le en CSS ou autre, pour le reutiliser et le
     normer ».

     Il avait raison, et le constat est simple a faire : la Boite
     dessinait ses quatre boutons d'etat en STYLE EN LIGNE, dans
     du JavaScript, a DEUX endroits (la ligne de liste et la
     fenetre de detail). Deux dessins pour la meme chose, c'est
     deux dessins qui divergent - c'est deja arrive le 13/09 avec
     les deux onglets.

     `.adi-chip` est la MEME pastille que `.adi-ton`, avec ce
     qu'un bouton exige en plus : un curseur, un survol, et une
     facon de dire « c'est celui-ci ».

   ---------------------------------------------------------------
   COMMENT ON S'EN SERT
   ---------------------------------------------------------------

     Un etat qu'on PEUT poser :
       <button class="adi-chip t-orange">📋 A traiter</button>

     L'etat DEJA pose - il s'encadre, il ne se clique plus :
       <button class="adi-chip t-vert on" disabled>✅ Traite</button>

     Une bascule a deux positions (lu / non lu) :
       <button class="adi-chip adi-chip-bascule t-vert">👁 Lu</button>

   ⚠ L'ETAT POSE S'ENCADRE, IL NE SE GRISE PAS.
     Franck, 13/09 : « le grise, c'est plus pour non actif ».
     Exact : griser dit « tu ne peux pas », pas « c'est
     celui-la ». `.on` epaissit la bordure et le trait, et vide
     le fond - on le repere d'un coup d'oeil sans le croire mort.

   ⚠ `.on` PORTE AUSSI `disabled` DANS LE HTML. La classe fait
     l'apparence, l'attribut fait le comportement. Se reposer sur
     la seule classe laisserait un bouton cliquable qui ne fait
     rien - et un bouton qui ne fait rien apprend a etre ignore.

   ⚠ LA COULEUR NE PORTE JAMAIS LE SENS SEULE. Chaque chip
     garde son MOT. C'est la regle des seize tons, et elle vaut
     d'autant plus ici qu'un bouton se lit vite.
   ============================================================== */

.adi-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: 8px;
  padding: 3px 10px;
  font-size: .82em; font-weight: 600; line-height: 1.35;
  white-space: nowrap; cursor: pointer;
  background: var(--chip-fond, rgba(255,255,255,.6));
  color: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.dark .adi-chip, .dedark .adi-chip { --chip-fond: rgba(255,255,255,.06); }

/* Au survol, le ton se montre : on voit ce qu'on va poser AVANT
   de cliquer. Un bouton d'etat qui ne se colore qu'apres coup
   oblige a essayer pour savoir. */
.adi-chip:hover  { background: var(--chip-fond-sv, rgba(255,255,255,.95)); }
.dark .adi-chip:hover, .dedark .adi-chip:hover { --chip-fond-sv: rgba(255,255,255,.14); }
.adi-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* L'etat POSE : encadre de sa couleur, fond vide, trait gras. */
.adi-chip.on {
  border-width: 2px; font-weight: 800;
  background: transparent; cursor: default;
}
.adi-chip.on:hover { background: transparent; }

/* Un chip qu'on ne peut pas poser - pas d'etat a soi sur cette
   ligne. Celui-la SE GRISE : ici « tu ne peux pas » est
   justement ce qu'il faut dire. */
.adi-chip[disabled]:not(.on) { opacity: .45; cursor: not-allowed; }

/* La bascule : deux positions, une seule visible a la fois.
   Elle porte son ton comme n'importe quel chip - c'est l'ecran
   qui change la classe de ton en meme temps que le mot. */
.adi-chip-bascule { min-width: 4.6em; justify-content: center; }

/* ---------------------------------------------------------------
   `t-libre` - LE TON VIENT DU REGLAGE, PAS D'ICI
   ---------------------------------------------------------------

     Les trois etats de la Boite portent leur couleur en base
     (`notifications.statuts[].couleur`), pas un nom de ton. On ne
     va pas les y remplacer : le reglage tient le SENS, ce fichier
     tient la FORME - c'est la doctrine ecrite plus haut.

     L'ecran pose donc la couleur en variable, et le composant
     s'en sert :

       <button class="adi-chip t-libre" style="--chip-c:#f59e0b">

   ⚠ TOUJOURS UN REPLI. `var(--chip-c, var(--ton-gris))` : une
     couleur absente du reglage rend un chip GRIS et lisible, pas
     un chip transparent. Meme regle que les seize tons.

   ⚠ CE N'EST PAS UNE PORTE OUVERTE AUX COULEURS EN DUR. Elle
     sert quand la couleur vient d'un REGLAGE. Ecrite dans du
     JavaScript, elle serait exactement ce que ce fichier existe
     pour empecher.
   --------------------------------------------------------------- */
.adi-chip.t-libre        { color: var(--chip-c, var(--ton-gris)); border-color: transparent; }
.adi-chip.t-libre.on     { border-color: var(--chip-c, var(--ton-gris)); }
.adi-chip.t-libre:hover  { background: color-mix(in srgb, var(--chip-c, var(--ton-gris)) 14%, transparent); }

/* Sans `color-mix`, le survol garde le fond neutre du chip : on
   perd la teinte, jamais la lisibilite. */
@supports not (background: color-mix(in srgb, red 5%, blue)) {
  .adi-chip.t-libre:hover { background: var(--chip-fond-sv, rgba(255,255,255,.95)); }
}
/* Le ton d'un chip - meme table que `.adi-ton`, forme cliquable. */
.adi-chip.t-indigo      { color:var(--ton-indigo); border-color:transparent; }
.adi-chip.t-indigo.on   { border-color:var(--ton-indigo); }
.adi-chip.t-indigo:hover{ background:var(--ton-indigo-fond); }
.adi-chip.t-violet      { color:var(--ton-violet); border-color:transparent; }
.adi-chip.t-violet.on   { border-color:var(--ton-violet); }
.adi-chip.t-violet:hover{ background:var(--ton-violet-fond); }
.adi-chip.t-ardoise     { color:var(--ton-ardoise); border-color:transparent; }
.adi-chip.t-ardoise.on  { border-color:var(--ton-ardoise); }
.adi-chip.t-ardoise:hover{ background:var(--ton-ardoise-fond); }
.adi-chip.t-vert        { color:var(--ton-vert); border-color:transparent; }
.adi-chip.t-vert.on     { border-color:var(--ton-vert); }
.adi-chip.t-vert:hover  { background:var(--ton-vert-fond); }
.adi-chip.t-jaune       { color:var(--ton-jaune); border-color:transparent; }
.adi-chip.t-jaune.on    { border-color:var(--ton-jaune); }
.adi-chip.t-jaune:hover { background:var(--ton-jaune-fond); }
.adi-chip.t-brun        { color:var(--ton-brun); border-color:transparent; }
.adi-chip.t-brun.on     { border-color:var(--ton-brun); }
.adi-chip.t-brun:hover  { background:var(--ton-brun-fond); }
.adi-chip.t-orange      { color:var(--ton-orange); border-color:transparent; }
.adi-chip.t-orange.on   { border-color:var(--ton-orange); }
.adi-chip.t-orange:hover{ background:var(--ton-orange-fond); }
.adi-chip.t-rose        { color:var(--ton-rose); border-color:transparent; }
.adi-chip.t-rose.on     { border-color:var(--ton-rose); }
.adi-chip.t-rose:hover  { background:var(--ton-rose-fond); }
.adi-chip.t-bleu        { color:var(--ton-bleu); border-color:transparent; }
.adi-chip.t-bleu.on     { border-color:var(--ton-bleu); }
.adi-chip.t-bleu:hover  { background:var(--ton-bleu-fond); }
.adi-chip.t-rouge       { color:var(--ton-rouge); border-color:transparent; }
.adi-chip.t-rouge.on    { border-color:var(--ton-rouge); }
.adi-chip.t-rouge:hover { background:var(--ton-rouge-fond); }
.adi-chip.t-cyan        { color:var(--ton-cyan); border-color:transparent; }
.adi-chip.t-cyan.on     { border-color:var(--ton-cyan); }
.adi-chip.t-cyan:hover  { background:var(--ton-cyan-fond); }
.adi-chip.t-marine      { color:var(--ton-marine); border-color:transparent; }
.adi-chip.t-marine.on   { border-color:var(--ton-marine); }
.adi-chip.t-marine:hover{ background:var(--ton-marine-fond); }
.adi-chip.t-turquoise   { color:var(--ton-turquoise); border-color:transparent; }
.adi-chip.t-turquoise.on{ border-color:var(--ton-turquoise); }
.adi-chip.t-turquoise:hover{ background:var(--ton-turquoise-fond); }
.adi-chip.t-olive       { color:var(--ton-olive); border-color:transparent; }
.adi-chip.t-olive.on    { border-color:var(--ton-olive); }
.adi-chip.t-olive:hover { background:var(--ton-olive-fond); }
.adi-chip.t-bordeaux    { color:var(--ton-bordeaux); border-color:transparent; }
.adi-chip.t-bordeaux.on { border-color:var(--ton-bordeaux); }
.adi-chip.t-bordeaux:hover{ background:var(--ton-bordeaux-fond); }
.adi-chip.t-gris        { color:var(--ton-gris); border-color:transparent; }
.adi-chip.t-gris.on     { border-color:var(--ton-gris); }
.adi-chip.t-gris:hover  { background:var(--ton-gris-fond); }

/* ⚠ À L'IMPRESSION, un fond clair ne sort pas. La pastille garde
   sa bordure et son texte : sur un devis imprimé en noir et
   blanc, c'est le MOT qui doit rester lisible — encore une fois,
   la couleur n'est que du renfort. */
@media print {
  .adi-ton { background: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   5 · LE VERDICT ET LE MODE — V1.2 (260926)
   ══════════════════════════════════════════════════════════════

     Franck, 26/09 : « pouvoir tout modifier en une fois et
     partout ». Le vert de « couvert », l'orange de « juste », le
     rouge d'« insuffisant », le bleu du froid et le rouge du chaud
     etaient ecrits EN DUR dans ❄ Etude & selection — vingt-six
     fois, et `#16a34a` une fois de plus dans son JavaScript, pour
     la jauge.

     ⚠ QUI DECIDE QUOI :
       · le MOTEUR (`selection_clim.js`) dit le TON : ok, wa, ko,
         dim — c'est un verdict, il a ses seuils au reglage ;
       · CE FICHIER dit la COULEUR de chaque ton ;
       · l'ECRAN pose la classe, rien d'autre.

     ⚠ LES VARIANTES `-sombre` SONT DES VARIABLES A PART, pas une
       surcharge de `--cv-ok` sous `.dedark` : c'est l'ECRAN qui dit
       quels elements passent au sombre. Depuis ❄ Etude & selection
       V4.1 : tous (bande, couvertures, colonne Etat, pastille,
       jauge). En V4.0, la colonne Etat et la jauge restaient en
       tons de jour — le defaut D4, corrige.

     ⚠ TOUJOURS AVEC UN REPLI dans l'ecran — `var(--cv-ok,
       #16a34a)` — et le repli est la MEME valeur : ce fichier
       absent ou en cache, l'ecran ne change pas d'une nuance.
   ══════════════════════════════════════════════════════════════ */
:root {
  --cv-ok:  #16a34a;   --cv-ok-sombre:  #4ade80;   /* couvert          */
  --cv-wa:  #f59e0b;   --cv-wa-sombre:  #fbbf24;   /* juste · surdim.  */
  --cv-ko:  #dc2626;   --cv-ko-sombre:  #f87171;   /* insuffisant      */
  --cv-dim: #8b969b;                               /* inconnu          */
  --cv-avert: #b45309;                             /* avertissement    */
  --cv-ok-fond:   rgba(22,163,74,.12);             /* fond « validé »  */
  --cv-info-fond: rgba(41,128,185,.08);            /* fond d'une info  */
  --mode-froid: #2980b9;  --mode-froid-sombre: #5dade2;
  --mode-chaud: #dc2626;  --mode-chaud-sombre: #f87171;
}
/* Pour les ecrans a venir : le pourcentage et sa pastille.
   <span class="adi-cv cv-ok">❄ 104 %</span>
   <span class="adi-cv-pt cv-ko"></span> insuffisant             */
.adi-cv                 { font-weight:700; font-variant-numeric:tabular-nums; }
.adi-cv.cv-ok           { color:var(--cv-ok); }
.adi-cv.cv-wa           { color:var(--cv-wa); }
.adi-cv.cv-ko           { color:var(--cv-ko); }
.adi-cv.cv-dim          { color:var(--cv-dim); }
.dedark .adi-cv.cv-ok   { color:var(--cv-ok-sombre); }
.dedark .adi-cv.cv-wa   { color:var(--cv-wa-sombre); }
.dedark .adi-cv.cv-ko   { color:var(--cv-ko-sombre); }
.adi-cv-pt              { display:inline-block; width:8px; height:8px; border-radius:99px;
                          margin-right:5px; background:var(--cv-dim); }
.adi-cv-pt.cv-ok        { background:var(--cv-ok); }
.adi-cv-pt.cv-wa        { background:var(--cv-wa); }
.adi-cv-pt.cv-ko        { background:var(--cv-ko); }

/* ══════════════════════════════════════════════════════════════
   6 · LA PALETTE DE 🔥 SÉLECTION PAC — V1.3 (260927)
   ══════════════════════════════════════════════════════════════

     `mod_pac.html` V2.9 écrivait ces couleurs en dur dans son
     JavaScript (26 fois). Elles vivent ici maintenant, MÊMES
     VALEURS. L'écran V3.0 les lit avec un repli identique.

     ⚠ CE NE SONT PAS LES VERTS / ORANGES / ROUGES DE LA CLIM
       (chapitre 5) : #1e7b34 contre #16a34a, #d35400 contre
       #f59e0b, #c0392b contre #dc2626. Deux palettes pour dire la
       même chose. Les réunir est une décision de Franck (défaut
       D-P3), pas un effet de bord : ici, on range, on ne change
       rien.
   ══════════════════════════════════════════════════════════════ */
:root {
  --pac-ok:     #1e7b34;   /* couvre (≥ 95 %)                     */
  --pac-avert:  #d35400;   /* avec appoint, à saisir, à vérifier  */
  --pac-ko:     #c0392b;   /* ne couvre pas, erreur               */
  --pac-vert:   #27ae60;   /* la puissance retenue, les titres    */
  --pac-libre:  #8e44ad;   /* saisie libre                        */
  --pac-action: #2563eb;   /* ✎ Modifier                          */
  --pac-bord-action:   #a8c7e0;
  --pac-bord-prop-btn: #a7d7b8;
  --pac-bord-prop:     #cfe3f3;
  --pac-fond-prop:     #fff;
  --pac-fond-favori:   #f0faf4;
}

/* ══════════════════════════════════════════════════════════════
   7 · LES BOUTONS — V1.4 (260928)
   ══════════════════════════════════════════════════════════════

     Franck, 27/09 : « définir un emplacement par défaut, qu'on
     peut modifier si besoin. Le but est de ne pas chercher un
     bouton. » Maquette validée le 27/09 (Q1 à Q9).

     941 boutons, 183 façons d'écrire leur classe (AUDIT_BOUTONS).
     Ici : UNE forme par rôle. Changer l'orange d'Enregistrer, c'est
     une ligne, pour toute l'application.

     ⚠ QUI DÉCIDE QUOI :
       · CE FICHIER dit la FORME et la COULEUR de chaque rôle ;
       · `boutons.js` dit le MOT, le SYMBOLE, la BULLE et la ZONE
         (réglage `ui.boutons.defaut`) ;
       · l'ÉCRAN demande « le bouton Enregistrer » et le pose dans
         sa zone. Il n'écrit plus ni couleur ni classe à la main.

     ⚠ LES VALEURS : la norme du 31/07 (« Bouton parfait ») pour
       Enregistrer, Modifier, Annuler ; la maquette du 27/09 pour
       le reste. Archiver est un TEXTE rouge, pas un bouton plein
       (Q2) : il est isolé à gauche, loin du principal.

     ⚠ SHELL SOMBRE + DOSSIER CLAIR : le dossier d'étude a son
       propre interrupteur (`.dedark`). Dans un dossier resté clair
       sous un shell sombre, les boutons restent clairs — sinon on
       aurait des boutons de nuit dans un module de jour (le défaut
       que le chapitre 1 décrit pour les tons).

     USAGE (par `boutons.js`, pas à la main) :
       <button class="adi-bt adi-bt-principal">…</button>
       <button class="adi-bt adi-bt-sm adi-bt-modifier">…</button>
       <button class="adi-bt adi-bt-c …">  la forme compacte
       <span class="adi-bt-bdg adi-bt-bdg-n">3</span>  un badge
   ══════════════════════════════════════════════════════════════ */
:root {
  --bt-principal:     #c24e00;  --bt-principal-sv: #a84300;
  --bt-principal-txt: #ffffff;
  --bt-eteint:        #c9ccce;  --bt-eteint-txt:   #f4f5f5;
  --bt-modif:         #2563eb;  --bt-modif-bord:   #a8c7e0;
  --bt-annul:         #2573a8;  --bt-annul-bord:   #cfe3f3;
  --bt-ajout:         #1e7b34;  --bt-ajout-bord:   #a7d7b8;
  --bt-neutre:        #475569;  --bt-neutre-bord:  #cbd5e1;
  --bt-danger:        #c0392b;
  --bt-doux:          #64748b;  --bt-encre:        #1e293b;
  --bt-sv-fond:       #eaf4fb;
  --bt-off:           #a9b2b8;  --bt-off-bord:     #e2e6e9;  --bt-off-fond: #fafbfc;
  --bt-focus:         #2563eb;
  --bdg-n:            #2563eb;  --bdg-a:           #dc2626;  --bdg-m: #f59e0b;
  --bdg-lisere:       #ffffff;
  --bt-pied-fond:     #ffffff;  --bt-pied-bord:    #e2e8f0;
}
.dark, .dedark {
  --bt-modif:         #60a5fa;  --bt-modif-bord:   #1e3a8a;
  --bt-annul:         #7dd3fc;  --bt-annul-bord:   #334155;
  --bt-ajout:         #34d399;  --bt-ajout-bord:   #065f46;
  --bt-neutre:        #cbd5e1;  --bt-neutre-bord:  #475569;
  --bt-danger:        #f87171;
  --bt-doux:          #94a3b8;  --bt-encre:        #e2e8f0;
  --bt-sv-fond:       rgba(255,255,255,.08);
  --bt-eteint:        #475569;  --bt-eteint-txt:   #94a3b8;
  --bt-off:           #64748b;  --bt-off-bord:     #334155;  --bt-off-fond: transparent;
  --bt-focus:         #60a5fa;
  --bdg-lisere:       #1e293b;
  --bt-pied-fond:     #1e293b;  --bt-pied-bord:    #334155;
}
/* Shell sombre, dossier resté clair : on remet le jour. */
.dark .de-root:not(.dedark) {
  --bt-modif:         #2563eb;  --bt-modif-bord:   #a8c7e0;
  --bt-annul:         #2573a8;  --bt-annul-bord:   #cfe3f3;
  --bt-ajout:         #1e7b34;  --bt-ajout-bord:   #a7d7b8;
  --bt-neutre:        #475569;  --bt-neutre-bord:  #cbd5e1;
  --bt-danger:        #c0392b;
  --bt-doux:          #64748b;  --bt-encre:        #1e293b;
  --bt-sv-fond:       #eaf4fb;
  --bt-eteint:        #c9ccce;  --bt-eteint-txt:   #f4f5f5;
  --bt-off:           #a9b2b8;  --bt-off-bord:     #e2e6e9;  --bt-off-fond: #fafbfc;
  --bt-focus:         #2563eb;
  --bdg-lisere:       #ffffff;
  --bt-pied-fond:     #ffffff;  --bt-pied-bord:    #e2e8f0;
}

/* ── 7.1 · La base : taille normale = le pied (Z4, Z5) ─────── */
.adi-bt {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  position:relative; vertical-align:middle; box-sizing:border-box;
  font-family:inherit; font-size:.9em; font-weight:500; line-height:1.2;
  padding:8px 16px; border:1px solid transparent; border-radius:5px;
  background:transparent; color:var(--bt-encre);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  -webkit-user-select:none; user-select:none;
}
.adi-bt .adi-bt-i { width:1.05em; height:1.05em; flex:none; display:block; }
.adi-bt:focus-visible { outline:2px solid var(--bt-focus); outline-offset:2px; }
.adi-bt[aria-busy="true"] { cursor:wait; opacity:.8; }

/* La petite taille : titre de bloc (Z3), bout de ligne (Z6),
   aides (Z8), haut de page (Z1, Z2). = `.dbx` du 31/07. */
.adi-bt.adi-bt-sm { font-size:.78em; padding:2px 7px; border-radius:4px; gap:4px; }

/* ── 7.2 · Les rôles ───────────────────────────────────────── */
/* Le principal — Enregistrer, Valider, Continuer. Un seul par pied. */
.adi-bt-principal { background:var(--bt-principal); border-color:var(--bt-principal);
                    color:var(--bt-principal-txt); font-weight:600; }
.adi-bt-principal:hover { background:var(--bt-principal-sv); border-color:var(--bt-principal-sv); }
.adi-bt-modifier  { color:var(--bt-modif);  border-color:var(--bt-modif-bord); }
.adi-bt-annuler   { color:var(--bt-annul);  border-color:var(--bt-annul-bord); }
.adi-bt-ajouter,
.adi-bt-proposer  { color:var(--bt-ajout);  border-color:var(--bt-ajout-bord); }
.adi-bt-neutre    { color:var(--bt-neutre); border-color:var(--bt-neutre-bord); }
.adi-bt-modifier:hover, .adi-bt-annuler:hover, .adi-bt-ajouter:hover,
.adi-bt-proposer:hover, .adi-bt-neutre:hover { background:var(--bt-sv-fond); }
/* Archiver : un texte rouge, souligné en pointillé. Jamais plein. */
.adi-bt-archiver  { color:var(--bt-danger); border-color:transparent;
                    text-decoration:underline dotted; text-underline-offset:3px; }
.adi-bt-archiver:hover { text-decoration-style:solid; }
/* Fermer : la croix seule, en haut à droite (Z7). */
.adi-bt-fermer    { color:var(--bt-doux); border-color:transparent;
                    font-size:1.2em; padding:2px 4px; line-height:1; }
.adi-bt-fermer:hover { color:var(--bt-encre); }
.adi-bt-fermer .adi-bt-i { width:1em; height:1em; }

/* ── 7.3 · Éteint : un bouton éteint DOIT avoir l'air éteint
       (dossier V4.04, 19/09 : « j'enregistre et rien ne se passe »).*/
.adi-bt:disabled, .adi-bt[disabled] {
  color:var(--bt-off); border-color:var(--bt-off-bord); background:var(--bt-off-fond);
  cursor:not-allowed; box-shadow:none;
}
.adi-bt-archiver:disabled, .adi-bt-fermer:disabled { border-color:transparent; background:transparent; }
.adi-bt-principal:disabled, .adi-bt-principal[disabled],
.adi-bt-principal:disabled:hover, .adi-bt-principal[disabled]:hover {
  background:var(--bt-eteint); border-color:var(--bt-eteint); color:var(--bt-eteint-txt);
}

/* ── 7.4 · La forme compacte : le symbole seul (maquette § 2 bis).
       Le mot reste dans la bulle (`title`) et pour la lecture
       d'écran (`aria-label`). ─────────────────────────────── */
.adi-bt-c .adi-bt-l { display:none; }
.adi-bt.adi-bt-c { padding-left:10px; padding-right:10px; }
.adi-bt.adi-bt-sm.adi-bt-c { padding-left:5px; padding-right:5px; }
.adi-bt.adi-bt-fermer.adi-bt-c { padding:2px 4px; }
/* Réglage `compact: "mobile"` : complet sur ordinateur, compact
   sur un petit écran. */
@media (max-width:640px) {
  .adi-bt-cm .adi-bt-l { display:none; }
  .adi-bt.adi-bt-cm { padding-left:10px; padding-right:10px; }
  .adi-bt.adi-bt-sm.adi-bt-cm { padding-left:5px; padding-right:5px; }
}

/* ── 7.5 · Les badges : toujours en haut à droite du bouton.
       n = compteur (bleu) · a = alerte (rouge) · m = non
       enregistré (point orange). Ils informent, ne bloquent rien. */
.adi-bt-bdg {
  position:absolute; top:-7px; right:-7px; z-index:1;
  min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
  border-radius:99px; border:2px solid var(--bdg-lisere);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.adi-bt-bdg-n { background:var(--bdg-n); }
.adi-bt-bdg-a { background:var(--bdg-a); }
.adi-bt-bdg-m { background:var(--bdg-m); min-width:11px; width:11px; height:11px;
                padding:0; top:-4px; right:-4px; }

/* ── 7.6 · Les zones. Un bouton a SA zone, la même partout.
       Z1 haut gauche ← · Z2 haut droite (page) · Z3 titre de bloc,
       à droite · Z4 pied, à droite (principal en dernier) · Z5
       pied, à gauche, isolé (Archiver) · Z6 bout de ligne · Z7
       coin de fenêtre ✕ · Z8 sous le titre, à gauche (aides). */
.adi-z  { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.adi-z2, .adi-z3, .adi-z6, .adi-z7 { margin-left:auto; }
.adi-z6 { gap:4px; flex-wrap:nowrap; }
.adi-z8 { display:flex; }
/* Le pied d'un bloc ou d'une fenêtre : Z5 à gauche, Z4 à droite. */
.adi-pied {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border-top:1px solid var(--bt-pied-bord);
}
.adi-pied > .adi-z4 { margin-left:auto; gap:8px; }
.adi-pied > .adi-z5 { margin-right:auto; }
/* L'état de la saisie, dans le pied : « ✔ brouillon gardé à 14:32 ». */
.adi-pied-etat { font-size:.8em; color:var(--bt-doux); }
/* Le pied collé en bas pendant une modification (Q5). Le réglage
   `pied_colle` choisit : tablette (écran tactile) · toujours · jamais. */
/* V1.5 — sur tout pied (le dossier garde ses `.im-foot`), et au-dessus
   d'une barre du bas collée elle aussi : l'écran pose sa hauteur dans
   `--adi-pied-bas` (0 sinon). */
.adi-pied-colle-toujours {
  position:sticky; bottom:var(--adi-pied-bas, 0px); z-index:5; background:var(--bt-pied-fond);
  box-shadow:0 -2px 8px rgba(0,0,0,.06);
}
@media (pointer:coarse) {
  .adi-pied-colle-tablette {
    position:sticky; bottom:var(--adi-pied-bas, 0px); z-index:5; background:var(--bt-pied-fond);
    box-shadow:0 -2px 8px rgba(0,0,0,.06);
  }
}

/* Les tons d'etat - V1.5 - Franck GARDET */