/* =========================================================================
   ATLA CONSTRUCTION — THEME 3.0 « CYAN »
   =========================================================================
   Chargé APRÈS le <style> de chaque page : redéfinit les tokens existants
   sans jamais renommer une variable, une classe ou un ID utilisé par le JS.
   C'est ce qui permet de repeindre les 10 pages depuis ce seul fichier,
   sans toucher à index.html (15 000 lignes, disputé par plusieurs sessions).

   RÉFÉRENCE : le logiciel d'Expav (demande d'Ulrik, 2026-08-28). Ce qui est
   repris n'est PAS leur couleur — leur accent est le rouge de leur logo —
   mais la structure de leur système :
     1. Une douzaine de tokens, pas cinquante.
     2. Trois niveaux de fond (page → surface → élévation), une bordure.
     3. Trois niveaux de texte, en hiérarchie stricte.
     4. RETENUE CHROMATIQUE : l'accent n'apparaît que sur l'action primaire,
        l'élément actif et les alertes. Jamais en fond de surface, jamais en
        texte courant. Tout le reste est gris.
     5. Petites majuscules espacées pour étiquettes et en-têtes.
     6. Sobriété du mouvement : la qualité perçue vient de la densité et de
        la cohérence, pas de l'animation. Expav n'a aucune transition.

   Le point 4 est le plus important et le plus facile à perdre. Quand tout
   est accentué, plus rien ne l'est. Avant d'ajouter du cyan : est-ce une
   action primaire, un état actif, ou une alerte ? Sinon, c'est gris.

   ---------------------------------------------------------------------
   CONTRASTE — valeurs mesurées, pas choisies à l'œil
   ---------------------------------------------------------------------
   Calculs WCAG 2.x du Directeur Technique sur nos fonds réels. Deux
   résultats contre-intuitifs qui ont dicté la palette :

   a) Le piège n'est PAS le cyan clair sur fond noir — il est excellent
      (#22D3EE = 10,77 sur #0b0d10). Le piège est le cyan SOMBRE, celui
      vers lequel on dérive en cherchant à faire « chic » : #0891B2 tombe
      à 5,28 (grand texte seulement) et #0E7490 à 3,63 (échec).
      => Ne jamais descendre sous #06B6D4, et toujours valider contre le
         fond le PLUS CLAIR (--surface-2), pas contre le noir.

   b) Texte BLANC sur fond cyan = 1,8:1. Illisible. C'est pourtant le
      réflexe naturel (bouton cyan + libellé blanc).
      => Tout fond cyan porte du texte SOMBRE (--accent-ink, ~11:1).

   Seuils retenus : plancher dur AA 4,5:1 sur tout texte ; AAA 7:1 visé
   sur le texte courant (gratuit ici) ; 3:1 minimum sur bordures, icônes
   et indicateurs de focus (WCAG 1.4.11). Pas d'AAA partout : cela
   interdirait les gris moyens, donc toute hiérarchie visuelle — un
   produit qui a l'air cher a des niveaux, pas un aplat de contraste.

   Enfin : le cyan est une couleur d'ACCENT, pas de texte courant. Un
   paragraphe en cyan saturé fatigue l'œil même en passant AAA. Corps de
   texte = blanc cassé.
   ========================================================================= */


/* ---------- 1. PALETTE ----------------------------------------------------
   Les NOMS sont conservés (--gold, --wine, ...) pour ne rien casser dans
   les milliers de lignes qui les utilisent. Seules les VALEURS changent :
   « gold » signifie désormais « accent », plus « doré ».
   -------------------------------------------------------------------- */
:root{
  /* Fonds — trois niveaux, une bordure */
  --black:#0b0d10;          /* fond de page */
  --off-black:#12151a;      /* barres latérale et supérieure */
  --surface:#151920;        /* cartes, panneaux */
  --surface-2:#1b202a;      /* élévation, survol — fond le plus clair,
                               c'est LUI qui sert de test de contraste */
  --line:#2a323d;           /* bordure unique */

  /* Accent cyan — deux valeurs, deux usages qu'il ne faut pas confondre */
  --gold:#22d3ee;           /* REMPLISSAGE : boutons, bordure active, focus */
  --gold-light:#67e8f9;     /* TEXTE/ICÔNE sur fond sombre */
  --accent-dark:#0fb6d1;    /* survol du remplissage */
  --accent-ink:#04181d;     /* texte POSÉ SUR le cyan — jamais du blanc */

  /* Texte — hiérarchie à trois niveaux, plancher validé à 6,21:1 */
  --white:#ffffff;
  --parchment:#e8eaed;      /* texte principal — blanc cassé, pas blanc pur */
  --gray-300:#c3ccd6;
  --gray-500:#9aa3ad;       /* texte secondaire */
  --gray-700:#8a92a0;       /* texte tertiaire, étiquettes — PLANCHER.
                               #6b7280 (gris Tailwind par défaut) échoue à
                               4,02 : ne pas l'écrire par réflexe. */
  --gray-100:#e8eaf0;
  --gray-50:#f5f6fa;

  /* États — employés avec parcimonie.

     ⚠️⚠️ RÈGLE QUI COUVRE TOUS LES TOKENS DE BASE — LIRE AVANT D'EN UTILISER UN.

     Les tokens de base (--red, --violet, --info, et par extension --green,
     --amber) sont des TEINTES MOYENNES SATURÉES. Elles tombent dans la bande
     où le noir est trop clair et le blanc trop sombre :

       --red #e0304a   texte 3,65 ✗ · encre dessus 4,1 ✗ · blanc dessus 4,5 (pile)
       --violet #8b5cf6  texte 3,85 ✗ · encre 4,3 ✗ · blanc 4,2 ✗
       --info #3d87d9    texte 4,40 ✗ (échec de justesse)

     Donc, sans exception :
       • JAMAIS en couleur de texte.
       • JAMAIS en remplissage portant du texte.
       • Usages valides : bordure, fond translucide (~16 %), élément
         d'interface non textuel — ils passent le seuil 3:1 de WCAG 1.4.11.
       • POUR DU TEXTE, TOUJOURS LA VARIANTE -light. Les six variantes claires
         passent AA sur les quatre fonds.

     POURQUOI CETTE RÈGLE EXISTE — c'est la structure qui invite à l'erreur,
     pas l'inattention. Le bouton primaire de ce fichier est
     `background:var(--gold); color:var(--accent-ink)`. Qui voudra un bouton
     « Supprimer » écrira naturellement `background:var(--red);
     color:var(--accent-ink)` → 4,1, échec. Il aura suivi le motif du fichier.
     C'est exactement pour ça que `.btn-danger` (section 6) est en contour et
     non en remplissage : ce n'était pas un choix esthétique.

     Mesures du Directeur Technique sur les 22 tokens, 2026-08-28. */
  --green:#2ea36b;
  --green-light:#5ad39a;
  --red:#e0304a;
  --red-light:#ff7a70;
  --amber:#d99a2b;
  --amber-light:#e8b95c;
  --info:#3d87d9;
  --info-light:#78b0ea;
  --wine:#e0304a;           /* danger — nom conservé pour compatibilité */
  --wine-light:#ff7a70;

  /* Violet — couleur CATÉGORIELLE, pas un état. Ajouté le 2026-08-28 : quatre
     usages en dur (#9a7fd1, #a06fd9) plus un --cal-multi local côté calendrier
     n'avaient aucun équivalent global. Sert à distinguer des entités entre
     elles (personnes, catégories), pas à signaler une qualité. La retenue
     chromatique ne s'y applique donc pas comme à l'accent : distinguer N
     choses EST sa fonction. Ne pas l'employer pour un état — vert/ambre/rouge
     sont là pour ça.

     ⚠️ ATTENTION — LE COUPLE VIOLET NE S'UTILISE PAS COMME LE COUPLE CYAN.
     Le nommage parallèle (--gold / --gold-light) invite à faire un bouton
     violet avec du texte par-dessus, comme on le fait avec le cyan. Ça
     produit du texte illisible. Mesures du Directeur Technique :

       --violet en TEXTE      : 4,60 sur --black mais 3,85 sur --surface-2
                                → échoue dès qu'il est posé sur une carte,
                                  c'est-à-dire l'usage normal.
       texte SUR --violet     : blanc 4,23 ✗ · --accent-ink 4,30 ✗
                                → AUCUNE couleur de texte ne passe dessus.
                                  Le cyan avait une zone sûre, le violet a une
                                  zone morte : trop sombre pour du noir, trop
                                  clair pour du blanc.

     Donc : --violet UNIQUEMENT en teinte de fond translucide (~16 %), en
     bordure, ou en élément d'interface non textuel (il passe le 3:1 de
     WCAG 1.4.11 à 3,85). **Pour tout texte, utiliser --violet-light**
     (7,03 au pire cas, AAA sur les 4 fonds). */
  --violet:#8b5cf6;
  --violet-light:#b49cf8;

  /* Bordure des CHAMPS DE SAISIE — distincte de --line, et c'est délibéré.
     Mesure du Directeur Technique : le fond d'un champ (--black) et celui de
     la carte qui le contient (--surface) sont à 1,10:1 — indiscernables. La
     bordure est donc le SEUL élément qui délimite le champ, ce qui en fait un
     composant d'interface au sens de WCAG 1.4.11 (3:1 requis), pas une
     décoration. --line à 1,36:1 ne suffisait pas : au repos, on devinait où
     cliquer. #5a6b83 donne 3,05 sur --surface et 3,00 sur --surface-2.
     --line reste inchangé ailleurs : une bordure de carte, elle, est
     défendable comme décorative, et l'éclaircir alourdirait tous les
     tableaux. */
  --field-line:#5a6b83;

  --radius:10px;
  --radius-sm:8px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --glow:none;              /* neutralise l'ancienne lueur dorée */
}

/* ---------- 1b. ALIAS FRANÇAIS -------------------------------------------
   theme.css portait DEUX systèmes de nommage parallèles pour les mêmes
   couleurs, avec des valeurs dupliquées à la main : ~71 usages « français »
   éparpillés (--or, --fond, --panneau, --bordure, --texte, --texte-att...)
   contre ~800 usages anglais.

   Le piège, repéré par le Directeur Marketing/Client avant la refonte :
   changer --gold sans changer --or aurait fait virer 117 usages au cyan en
   laissant 14 usages en ambre. Le CRM serait sorti bicolore, et la cause
   aurait été introuvable.

   Ces alias POINTENT désormais vers les tokens anglais au lieu de répéter
   la valeur. Une refonte future traverse automatiquement les deux systèmes.
   Supprimer les alias exigerait de réécrire ~71 usages dans un fichier que
   plusieurs sessions se disputent : à faire à froid, pas ce soir.
   -------------------------------------------------------------------- */
:root{
  --or:var(--gold);
  --or-fonce:var(--accent-dark);
  --fond:var(--black);
  --panneau:var(--surface);
  --panneau2:var(--surface-2);
  --bordure:var(--line);
  --texte:var(--parchment);
  --texte-att:var(--gray-500);
  --vert:var(--green);
  --rouge:var(--red);
}


/* ---------- 2. FOND ET TYPOGRAPHIE ---------------------------------------
   Fond plat. La version précédente avait deux dégradés radiaux colorés :
   flatteur en capture d'écran, mais ça salit les surfaces posées dessus et
   ça trahit un logiciel qui cherche à impressionner. Un fond uniforme
   laisse les données être le sujet.

   Deux polices, deux rôles : Montserrat garde l'identité de marque sur les
   titres ; la pile système sert au corps et aux données, plus dense et plus
   nette à petite taille — c'est ce qui distingue un outil professionnel
   d'une page web.
   -------------------------------------------------------------------- */
body{
  background:var(--black) !important;
  background-attachment:initial !important;
  color:var(--parchment);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:14px;
  line-height:1.5;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,.sidebar-brand,.hero h1{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
}
h1{font-size:22px;font-weight:700;letter-spacing:-.3px;}
h2{font-size:16px;font-weight:700;letter-spacing:-.2px;}

/* Chiffres alignés en colonne. Indispensable dès qu'on empile des montants,
   et c'est un des signaux les plus fiables d'un logiciel financier sérieux. */
   Le funnel de vente (.fc-total, .fcard-montant, .fcard-relance) a été ajouté
   le 2026-08-28 : sept colonnes de totaux côte à côte, c'est le cas où un « 1 »
   plus étroit qu'un « 8 » se voit le plus, et c'est l'écran le plus regardé du
   CRM. Il passait à travers la règle initiale — le reste aurait été aligné et
   lui non, une incohérence plus visible que si rien n'avait été fait. */
.num,.mt-amount,.mt-pct,.kpi .val,.stat-card .num,td.num,
.montants-table td,input[type="number"],
.fc-total,.fcard-montant,.fcard-relance{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Alignement à droite des colonnes numériques — promu en règle de fondation
   le 2026-08-28. Deux sections l'avaient découvert indépendamment (catalogue
   Fournisseur, tableaux Comptabilité) : les chiffres tabulaires seuls ne
   suffisent PAS, parce que sans alignement à droite les unités ne s'empilent
   pas et l'effet est perdu. Les deux vont ensemble.

   ⚠️ CORRECTION 2026-08-28, quelques minutes après la première version :
   `.mt-pct` a été RETIRÉ de cette règle. Je l'avais inclus en supposant que
   le nom signifiait « pourcentage, donc nombre ». Sa définition réelle est
   `color:var(--gray-500);font-weight:700;font-variant-numeric:tabular-nums`
   — c'est-à-dire « texte secondaire grisé ». Rien dans le nom ni dans la
   définition ne dit « numérique », et il est employé sur 57 cellules dont
   des noms de personnes, des noms de chantiers et des phrases entières.
   Résultat : des noms propres alignés à droite, un défaut plus visible que
   celui que la règle corrigeait.

   La leçon : ne jamais déduire la sémantique d'une classe de son NOM.
   Vérifier ce qu'elle fait et où elle est employée. Signalé par Gestion du
   temps, qui a mesuré les 5 colonnes cassées au lieu de le supposer.

   Ne cibler que les classes dont le nom ET l'usage signifient « nombre ».
   Une colonne réellement numérique qui n'est pas alignée doit gagner
   `class="num"` explicitement — c'est plus de travail, et c'est la seule
   version où la classe dit ce qu'elle fait. */
td.num,td.mt-amount,
th.num,th.mt-amount{
  text-align:right !important;
}

/* Sous-texte des cartes KPI — troisième niveau de la hiérarchie. Sans lui,
   un sous-texte pèse autant que la valeur qu'il commente. */
.stat-card .sub,.kpi .sub{
  font-size:11.5px !important;
  color:var(--gray-700) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

html{scroll-behavior:smooth;}
::selection{background:rgba(34,211,238,.28);color:var(--white);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--gray-700);}

/* Focus visible et net — WCAG 1.4.11, et un des signaux les plus forts de
   « logiciel sérieux ». Le cyan passe largement le 3:1 requis. */
button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold) !important;
  outline-offset:2px !important;
}


/* ---------- 3. ÉTIQUETTES ET EN-TÊTES ------------------------------------
   Petites majuscules espacées. Contre-intuitif mais constant dans les
   logiciels chers : plus le texte est petit, plus il est espacé et gras.
   -------------------------------------------------------------------- */
.section-label,.field-lbl,.kpi .lbl,.stat-card .label,
.produit-label,.call-fiche .fl,.champ label,.sidebar-brand .tag,
.mini-lbl,.nav .grp{
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
  color:var(--gray-700) !important;
}

table th,.montants-table th{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.7px !important;
  text-transform:uppercase !important;
  color:var(--gray-700) !important;
  background:none !important;
  border-bottom:1px solid var(--line) !important;
  white-space:nowrap;
  padding:8px 10px !important;
}


/* ---------- 4. SURFACES ---------------------------------------------------
   Une seule recette de carte, partout. La cohérence de surface fait plus
   pour la qualité perçue que n'importe quel effet.
   -------------------------------------------------------------------- */
.panel,.carte,.client-card,.produit-card,.stat-card,.pipeline-block,
.rdv-card,.call-card,.emp-btn,.funnel-card,.contact-item,.note-item,
.stats-row-pretty .stat-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
}

.client-card:hover,.produit-card:hover,.carte:hover,
.funnel-card:hover,.stats-row-pretty .stat-card:hover{
  border-color:var(--gray-700) !important;
  transform:none !important;
  box-shadow:none !important;
}

tbody tr:hover{background:var(--surface-2) !important;}
td{border-bottom:1px solid rgba(42,50,61,.5) !important;}
tbody tr:last-child td{border-bottom:none !important;}
.montants-table,.depenses-editor{border-radius:var(--radius) !important;overflow:hidden;}
.pipeline-card{border-radius:0 !important;}


/* ---------- 5. NAVIGATION -------------------------------------------------
   L'accent marque où l'on se trouve. C'est un de ses trois seuls emplois.
   -------------------------------------------------------------------- */
.sidebar{background:var(--off-black) !important;border-right:1px solid var(--line) !important;}

.side-nav-btn{
  border-left:3px solid transparent !important;
  border-radius:0 !important;
  color:var(--gray-500) !important;
  font-weight:500 !important;
  background:none !important;
}
.side-nav-btn:hover{background:var(--surface-2) !important;color:var(--parchment) !important;}
.side-nav-btn.active{
  background:var(--surface-2) !important;
  color:var(--white) !important;
  border-left-color:var(--gold) !important;
}

.nav-tabs{border-radius:var(--radius-sm) !important;border-width:1px !important;}
.nav-tab{
  background:none !important;
  border:1px solid var(--line) !important;
  color:var(--gray-500) !important;
  border-radius:var(--radius-sm) !important;
  font-weight:600 !important;
  letter-spacing:.2px !important;
  box-shadow:none !important;
}
.nav-tab.active{
  background:var(--surface-2) !important;
  border-color:var(--gold) !important;
  color:var(--white) !important;
  box-shadow:none !important;
}
.tab.active,.tab-btn.active{box-shadow:0 2px 0 0 var(--gold) !important;}

.topbar{background:var(--off-black) !important;border-bottom:1px solid var(--line) !important;}
.bottom-tabbar{background:var(--off-black) !important;border-top:1px solid var(--line) !important;}
.bottom-tabbar button.active{color:var(--gold-light) !important;background:rgba(34,211,238,.10) !important;}


/* ---------- 6. BOUTONS ----------------------------------------------------
   Le cyan est clair : le texte posé dessus est SOMBRE, jamais blanc.
   Blanc sur #22d3ee = 1,81:1 (illisible). Sombre = ~11:1.
   -------------------------------------------------------------------- */
button{border-radius:var(--radius-sm) !important;}

.btn-primary,.btn-1,.punch-btn,.ajouter,.btn-google{
  background:var(--gold) !important;
  color:var(--accent-ink) !important;
  border:none !important;
  border-radius:var(--radius-sm) !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  box-shadow:none !important;
}
.btn-primary:hover,.btn-1:hover,.ajouter:hover,.btn-google:hover{
  background:var(--accent-dark) !important;
  transform:none !important;
  box-shadow:none !important;
}
.btn-primary:disabled,.btn-1:disabled{opacity:.5 !important;cursor:default;}

.btn-outline,.btn-2,.retour,.btn-ghost{
  background:none !important;
  border:1px solid var(--line) !important;
  color:var(--gray-500) !important;
  border-radius:var(--radius-sm) !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
.btn-outline:hover,.btn-2:hover,.retour:hover,.btn-ghost:hover{
  border-color:var(--gray-700) !important;
  color:var(--white) !important;
  background:none !important;
  box-shadow:none !important;
}

.btn-danger,.supprimer{
  background:none !important;
  border:1px solid rgba(224,48,74,.45) !important;
  color:var(--red-light) !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:none !important;
}
.btn-danger:hover,.supprimer:hover{background:rgba(224,48,74,.14) !important;}

button:active{transform:none !important;}


/* ---------- 7. CHAMPS -----------------------------------------------------
   Fond plus sombre que la carte + bordure --field-line. Le fond seul ne
   suffit PAS : mesuré à 1,10:1 contre la carte, donc invisible. C'est la
   bordure qui porte tout le travail de délimitation — d'où un token dédié à
   3:1 plutôt que le --line décoratif.
   -------------------------------------------------------------------- */
input[type="text"],input[type="tel"],input[type="email"],input[type="date"],
input[type="time"],input[type="number"],input[type="password"],input[type="search"],
select,textarea,.filter,.search-box input,.gate-input,
.field input,.field select,.field textarea,select.filter{
  background:var(--black) !important;
  border:1px solid var(--field-line) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--parchment) !important;
  font-family:inherit !important;
}
input:focus,select:focus,textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus,
.search-box input:focus,select.filter:focus,.gate-input:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder{color:var(--gray-700) !important;opacity:1 !important;}
input[type="checkbox"],input[type="radio"]{accent-color:var(--gold);}

/* Les icônes natives de date/heure de Chrome restent noires même si le
   champ est sombre. Les rendre blanches garde le calendrier visible dans
   les rendez-vous, les soumissions et les autres formulaires du CRM. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.95;
  cursor:pointer;
}


/* ---------- 8. PASTILLES D'ÉTAT ------------------------------------------ */
.badge,.p,.badge-retard,.pastille,.etape-tag,.relance-stamp{
  display:inline-block;
  padding:2px 9px !important;
  border-radius:20px !important;
  font-size:11px !important;
  font-weight:650 !important;
  white-space:nowrap;
  letter-spacing:.2px !important;
  border-width:1px !important;
  box-shadow:none !important;
}
/* Fond translucide dérivé du token, pas recopié en dur. Un `rgba()` figé
   redevient le problème qu'on corrige : si le token bouge, le fond ne suit
   pas et on obtient un texte -light sur un fond de l'ancienne teinte.
   Double déclaration volontaire : un navigateur sans `color-mix` ignore la
   seconde ligne et garde le repli. Ce n'est pas optionnel — `punch.html` et
   `app.html` tournent sur les téléphones des employés, dont on ne connaît ni
   l'âge ni la version, et un `color-mix` non supporté sans repli donnerait un
   fond transparent : du texte clair sur noir, sans pastille.
   Convention proposée par Marketing/Client pour le funnel, généralisée ici
   pour qu'il n'y ait qu'une seule façon de faire une pastille.

   ⚠️ DETTE ASSUMÉE — SI VOUS MODIFIEZ UN TOKEN, MODIFIEZ SON REPLI.
   Le repli `rgba` est lui-même une valeur figée : c'est précisément ce que
   `color-mix` devait éliminer, réintroduit par la solution. Le jour où
   quelqu'un ajuste `--green`, le `color-mix` suivra et le repli non — les
   téléphones récents verront la nouvelle teinte, les anciens l'ancienne, et
   personne ne le verra en revue parce que les deux lignes sont côte à côte
   et se ressemblent.

   Ce n'est pas une raison de retirer le repli : il est nécessaire (téléphones
   d'âge inconnu sur `punch.html`/`app.html`, et sans lui la pastille est
   transparente). La duplication est inhérente au motif.

   La réponse retenue n'est donc pas de l'éliminer mais de rendre sa
   divergence DÉTECTABLE : le contrôle 7 de `./verifier.sh` retrouve les replis
   lui-même dans tout `public/`, compare chacun à son token, et fait échouer le
   déploiement si l'un a divergé. Quand on ne peut pas supprimer une
   duplication, on la surveille — plutôt que de compter sur la mémoire de celui
   qui touchera le token.

   ⚠️ Le contrôle ne travaille PAS sur une liste fixe, et c'est délibéré. Une
   version antérieure de cette note disait « les 7 replis », surveillés à chaque
   audit. Le Directeur Opérations a signalé qu'en ajoutant un 8e repli hors de
   ce fichier, le sien serait le seul non surveillé — et que le nombre écrit ici
   deviendrait faux à son commit. Un filet qui protège une liste énumérée casse
   en silence dès qu'on ajoute un membre sans mettre l'énumération à jour. Donc
   aucun nombre n'est écrit nulle part : le contrôle les trouve.

   L'ORDRE DES DEUX LIGNES EST CRITIQUE : `rgba` d'abord, `color-mix` ensuite.
   Inversés, le repli gagnerait toujours et la dérivation serait du code mort. */
.p-vert,.badge-vert{
  background:rgba(46,163,107,.16) !important;
  background:color-mix(in srgb, var(--green) 16%, transparent) !important;
  color:var(--green-light) !important;border-color:transparent !important;}
.p-rouge,.badge-rouge,.badge-retard{
  background:rgba(224,48,74,.16) !important;
  background:color-mix(in srgb, var(--red) 16%, transparent) !important;
  color:var(--red-light) !important;border-color:transparent !important;}
.p-ambre,.badge-ambre{
  background:rgba(217,154,43,.16) !important;
  background:color-mix(in srgb, var(--amber) 16%, transparent) !important;
  color:var(--amber-light) !important;border-color:transparent !important;}
.p-bleu,.badge-bleu{
  background:rgba(61,135,217,.16) !important;
  background:color-mix(in srgb, var(--info) 16%, transparent) !important;
  color:var(--info-light) !important;border-color:transparent !important;}
.p-violet,.badge-violet{
  background:rgba(139,92,246,.16) !important;
  background:color-mix(in srgb, var(--violet) 16%, transparent) !important;
  color:var(--violet-light) !important;border-color:transparent !important;}
.p-gris,.badge-gris{
  background:rgba(154,163,173,.14) !important;
  background:color-mix(in srgb, var(--gray-500) 14%, transparent) !important;
  color:var(--gray-500) !important;border-color:transparent !important;}
.p-cyan,.badge-actif{
  background:rgba(34,211,238,.16) !important;
  background:color-mix(in srgb, var(--gold) 16%, transparent) !important;
  color:var(--gold-light) !important;border-color:transparent !important;}


/* ---------- 9. ALERTES ----------------------------------------------------
   Distinction délibérée reprise d'Expav : une NOTE informative est bleue et
   neutre ; une ALERTE est rouge. Si tout est en accent, plus rien n'alerte.
   -------------------------------------------------------------------- */
.bandeau,.alerte{
  background:linear-gradient(90deg,rgba(224,48,74,.13),transparent) !important;
  border:1px solid rgba(224,48,74,.32) !important;
  border-left:3px solid var(--red) !important;
  border-radius:var(--radius) !important;
  color:#f3d7da !important;
}
.note,.info-box{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-left:3px solid var(--info) !important;
  border-radius:var(--radius) !important;
  color:var(--gray-500) !important;
}


/* ---------- 10. ÉTAT VIDE ------------------------------------------------
   Un écran vide soigné est un des signaux les plus honnêtes de qualité — et
   c'est précisément le sujet des bugs trouvés le 2026-08-28 : « pas de
   donnée » doit se lire autrement que « valeur mesurée à zéro ».
   -------------------------------------------------------------------- */
   `.empty-state` est partagé par 8 écrans. Sa version d'origine criait :
   bordure CYAN POINTILLÉE de 1,5px, fond brunâtre, titre en majuscules
   cyan espacées à 2px. Beaucoup de bruit pour annoncer une absence — et
   surtout, une violation directe de la retenue chromatique : l'accent
   servait à signaler qu'il n'y a RIEN, alors qu'il doit signaler une action
   primaire, un état actif ou une alerte. Un vide encadré de pointillés
   colorés est un des signaux les plus reconnaissables du logiciel bon
   marché ; un vide sobre qui dit quoi faire est l'inverse.
   Repéré par Gestion du temps pendant la refonte du calendrier ; corrigé
   ici plutôt que localement, parce que le composant est partagé.
   -------------------------------------------------------------------- */
.empty-state,.vide,.rdv-empty,.calendrier-vide{
  color:var(--gray-700) !important;
  font-size:13px !important;
  text-align:center;
  padding:32px 20px !important;
  font-style:normal !important;
  border:none !important;
  background:none !important;
  border-radius:var(--radius) !important;
}
.empty-state .big{
  color:var(--gray-500) !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  margin-bottom:4px;
}


/* ---------- 11. MODALES ---------------------------------------------------
   Le seul endroit où une ombre est justifiée : elle sépare deux plans.
   -------------------------------------------------------------------- */
.overlay,.voile{
  background:rgba(6,9,13,.74) !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.modal,.fenetre,.panel{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.55) !important;
  animation:none !important;
}
.panel-header{border-radius:12px 12px 0 0 !important;}


/* ---------- 12. SOBRIÉTÉ DU MOUVEMENT ------------------------------------
   Expav n'a AUCUNE transition et paraît plus cher que nous. L'animation
   d'entrée et les cartes qui se soulèvent au survol font gadget sur un
   outil ouvert quarante fois par jour. On garde des transitions courtes sur
   les seuls changements d'état, rien de décoratif.
   -------------------------------------------------------------------- */
*,*::before,*::after{
  animation:none !important;
  transition-duration:.12s !important;
  transition-timing-function:var(--ease) !important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;scroll-behavior:auto !important;}
}


/* ---------- 13. DÉTAILS ---------------------------------------------------
   Le hero et la porte d'entrée perdent leurs dégradés colorés : même
   raisonnement qu'au point 2.
   -------------------------------------------------------------------- */
a{color:var(--gold-light);}
.hero{background:var(--off-black) !important;border-bottom:1px solid var(--gold) !important;}
.headline .accent{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:var(--gold-light) !important;
}
#authGate{background:var(--black) !important;}
.msg{border-radius:12px !important;box-shadow:none !important;}
.msg.user{background:var(--gold) !important;color:var(--accent-ink) !important;}


/* ---------- 14. MOBILE ----------------------------------------------------
   Conservé de la passe mobile précédente : les .montants-table du CRM
   partagent le même marquage, un seul correctif ici couvre les dizaines
   d'endroits où elles servent. La table devient son propre conteneur de
   défilement horizontal — le débordement va dans la table, jamais dans la
   page.
   -------------------------------------------------------------------- */
@media (max-width:900px){
  .montants-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  .montants-table thead,.montants-table tbody{display:table;width:100%;}
  .montants-table th,.montants-table td{white-space:nowrap;}
  .btn-small,.btn-outline,.btn-ghost{min-height:40px;}
}