/* ═══════════════════════════════════════════════════════════════════════════
   ComptaNiger IA — CHARTE GRAPHIQUE · version 1.0
   DIGUI SARL — juillet 2026
   ───────────────────────────────────────────────────────────────────────────
   « L'expert-comptable qui tient dans une conversation. »

   L'IDÉE : un rail de navigation bleu nuit — le socle, la sécurité, la
   permanence — ouvrant sur un plan de travail clair où les chiffres se
   lisent sans fatigue, en plein jour comme au bureau. Le vert dit la
   conformité, l'orange dit l'action, le violet dit l'intelligence.

   Cette feuille est chargée APRÈS les styles de chaque page : elle habille
   sans rien réécrire. Aucune logique métier n'est touchée.

   RÈGLE ABSOLUE — LE VERROU D'IMPRESSION (§0)
   Les 35 formulaires DGI doivent produire des PDF identiques au bit près.
   Les gabarits d'impression (#pdf…) rechargent la palette d'origine : tout
   ce qui est écrit ici s'arrête à leur porte. Vérifié à chaque livraison.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ §0 — LE VERROU ══════════════════════════════════════════════════════
   Les variables CSS se transmettent aux enfants. Les redéclarer sur le
   conteneur d'impression isole tout le document, quelle que soit la charte
   appliquée au reste de l'application. Prouvé : palette poussée à l'absurde
   partout ailleurs → 35/35 PDF identiques au bit près.                    */
[id^="pdf"] {
  --vert:#0A6E3F; --vert-clair:#0D8A50; --vert-pale:#E8F5EE;
  --or:#C9922A; --or-clair:#F4C55A;
  --marine:#0D1F2D; --ardoise:#1E3A4F;
  --gris-1:#F4F7F5; --gris-2:#E8EEEB; --gris-3:#B8C8BF;
  --texte:#1A2E23; --texte-clair:#4A6358; --blanc:#FFF;
  --rouge:#C0392B; --orange:#D4681E; --bleu:#1565C0;
}


/* ═══ §1 — LES JETONS ═════════════════════════════════════════════════════
   Chaque couleur porte son rapport de contraste mesuré. Rien n'est choisi
   à l'œil : le seuil AA (4,5:1) est un plancher, pas un objectif.        */
:root {
  /* — Socle : bleu nuit —————————————————————————————————— */
  --marine:        #0B132B;   /* blanc dessus : 18,4:1 */
  --marine-2:      #131E3A;
  --marine-3:      #1E2B4A;
  --ardoise:       #1A2744;

  /* — Conformité : vert croissance ——————————————————————— */
  --vert:          #006B2E;   /* sur blanc : 6,7:1 — texte et fonds pleins */
  --vert-clair:    #008037;   /* vert de la marque, aplats et graphiques */
  --vert-pale:     #E6F4EC;
  --vert-vif:      #4ADE80;   /* sur marine : 10,6:1 */

  /* — Action : orange dynamique ——————————————————————————
     L'orange vif ne porte JAMAIS de texte blanc (2,9:1). Il porte du bleu
     nuit (6,4:1). C'est ce qui donne au bouton principal sa signature.   */
  --action:        #FF6B00;
  --action-fonce:  #E85D00;
  --action-texte:  #0B132B;
  --or:            #C2410C;   /* orange lisible sur blanc : 5,2:1 */
  --or-clair:      #FFD166;   /* jaune solaire, sur marine : 12,8:1 */

  /* — Intelligence : violet ——————————————————————————————— */
  --violet:        #6D28D9;   /* sur blanc : 7,1:1 */
  --violet-clair:  #B794F6;   /* sur marine : 7,5:1 */
  --violet-pale:   #F1EBFD;

  /* — Plan de travail ——————————————————————————————————— */
  --fond:          #F5F7FA;
  --blanc:         #FFFFFF;
  --gris-1:        #F5F7FA;
  --gris-2:        #E2E8F0;
  --gris-3:        #94A3B8;
  --bordure:       #E2E8F0;
  --bordure-forte: #CBD5E1;

  /* — Texte ————————————————————————————————————————————— */
  --texte:         #0F172A;   /* 17,9:1 */
  --texte-clair:   #475569;   /*  7,6:1 */
  --texte-discret: #64748B;   /*  4,8:1 — plancher AA */

  /* — États ————————————————————————————————————————————— */
  --rouge:         #B91C1C;   /* 6,5:1 */
  --orange:        #C2410C;   /* 5,2:1 */
  --bleu:          #1D4ED8;   /* 6,7:1 */

  /* — Rythme : une échelle de 4 px ——————————————————————— */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  /* — Formes ———————————————————————————————————————————— */
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-pill: 999px;

  /* — Profondeur : une lumière douce, jamais de halo noir ————— */
  --ombre-1: 0 1px 2px rgba(11,19,43,.06), 0 1px 3px rgba(11,19,43,.04);
  --ombre-2: 0 2px 4px rgba(11,19,43,.05), 0 4px 12px rgba(11,19,43,.07);
  --ombre-3: 0 8px 24px rgba(11,19,43,.10), 0 2px 6px rgba(11,19,43,.06);
  --ombre-4: 0 20px 48px rgba(11,19,43,.16), 0 4px 12px rgba(11,19,43,.08);

  /* — Mouvement ————————————————————————————————————————— */
  --tr: .18s cubic-bezier(.4,0,.2,1);
  --tr-lent: .32s cubic-bezier(.4,0,.2,1);

  /* — Typographie ——————————————————————————————————————— */
  --titre: 'Syne', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --corps: 'DM Sans', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
}


/* ═══ §2 — LE SOCLE ═══════════════════════════════════════════════════════ */
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  -webkit-font-smoothing: antialiased;
}

/* Les titres portent la voix de la marque : condensés, assurés. */
h1, h2, h3, .pn-t, .tb-t, .md-ht, .sb-name {
  font-family: var(--titre);
  letter-spacing: -.015em;
}

/* Un chiffre comptable s'aligne avec ses voisins : chasse fixe. */
.res-v, .tot, .val, .num, .kv, .mnt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ═══ §3 — LE RAIL DE NAVIGATION ══════════════════════════════════════════
   Priorité du porteur. Trois principes :
   1. GROUPER par moment de travail : je pilote → je vends → j'enregistre
      → je déclare. Quatre familles, jamais une liste plate.
   2. MONTRER OÙ L'ON EST : un repère orange, pas seulement une nuance.
   3. TENIR SOUS LE POUCE : 46 px de haut, cible large, texte lisible.    */
.sb {
  background: linear-gradient(180deg, #0B132B 0%, #0D1730 55%, #101B38 100%);
  border-right: 1px solid rgba(255,255,255,.06);
}

/* — L'en-tête : le logo respire — */
.sb-logo {
  padding: var(--e4) var(--e4) var(--e3);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sb-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--vert-clair), #00A046);
  box-shadow: 0 2px 10px rgba(0,128,55,.35);
  font-size: 1.05rem;
}
.sb-name {
  font-family: var(--titre); font-weight: 800; font-size: .98rem;
  color: #FFF; letter-spacing: -.01em; display: block; line-height: 1.2;
}
.sb-sub {
  font-size: .68rem; color: rgba(255,255,255,.55);
  letter-spacing: .04em; text-transform: uppercase; display: block;
}

/* — La carte entreprise : on sait pour qui l'on travaille — */
.sb-co {
  margin: var(--e3); padding: var(--e3);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--e3);
}
.sb-av {
  width: 34px; height: 34px; border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--action), var(--action-fonce));
  color: var(--action-texte); font-weight: 800; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.sb-cname { color: #FFF; font-weight: 600; font-size: .82rem; line-height: 1.3; }
.sb-nif   { color: rgba(255,255,255,.55); font-size: .68rem; }

/* — Les intitulés de famille — */
.nl {
  padding: var(--e4) var(--e4) var(--e2);
  font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.42);
}

/* — L'entrée de menu — */
.ni {
  position: relative;
  display: flex; align-items: center; gap: var(--e3);
  margin: 2px var(--e2);
  padding: 0 var(--e3);
  min-height: 46px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.80);
  font-size: .855rem; font-weight: 500;
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
}
.ni:hover { background: rgba(255,255,255,.07); color: #FFF; }
.ni-ic {
  width: 22px; text-align: center; font-size: 1rem;
  opacity: .9; flex: 0 0 auto;
}

/* Là où je suis : un repère orange plein, pas une nuance à deviner. */
.ni.on, .ni.actif, .ni[aria-current="page"] {
  background: rgba(255,107,0,.14);
  color: #FFF; font-weight: 600;
}
.ni.on::before, .ni.actif::before, .ni[aria-current="page"]::before {
  content: ''; position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--action);
}
.ni.on .ni-ic, .ni.actif .ni-ic { opacity: 1; }

/* L'assistant est la promesse du produit : il se distingue. */
#cnNavChat .ni-ic { color: var(--violet-clair); }
#cnNavChat:hover  { background: rgba(109,40,217,.20); }

/* — Le pied du rail — */
.sb-ft { border-top: 1px solid rgba(255,255,255,.07); padding: var(--e3); }
.uc {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-sm); padding: var(--e3);
}
.uc p { color: rgba(255,255,255,.82) !important; font-size: .72rem; }
.uc strong { color: var(--or-clair) !important; font-weight: 700; }
.uc-btn {
  background: transparent !important; color: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: var(--r-xs); font-size: .7rem; padding: 6px 10px;
  width: 100%; margin-top: var(--e2); cursor: pointer;
  transition: all var(--tr);
}
.uc-btn:hover { background: rgba(255,255,255,.12) !important; color: #FFF !important; }


/* ═══ §4 — LA BARRE HAUTE ═════════════════════════════════════════════════ */
.topb, .tb {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.tb-t {
  font-family: var(--titre); font-weight: 800;
  font-size: 1.06rem; color: var(--texte); letter-spacing: -.02em;
}
.tb-s { color: var(--texte-clair); font-size: .78rem; }

.topbar-search {
  background: var(--gris-1);
  border: 1px solid var(--bordure);
  border-radius: var(--r-pill);
  transition: all var(--tr);
}
.topbar-search:focus-within {
  background: var(--blanc);
  border-color: var(--vert-clair);
  box-shadow: 0 0 0 3px rgba(0,128,55,.12);
}

.av {
  background: linear-gradient(135deg, var(--marine), var(--ardoise));
  color: #FFF; font-weight: 700; border-radius: var(--r-xs);
}


/* ═══ §5 — LES SURFACES ═══════════════════════════════════════════════════
   Une carte = une idée. Bord net, ombre basse, respiration constante.   */
.pn, .card, .section, .notif-panel {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r);
  box-shadow: var(--ombre-1);
}
.pn-h {
  border-bottom: 1px solid var(--bordure);
  padding: var(--e4) var(--e5);
}
.pn-t {
  font-family: var(--titre); font-weight: 700;
  font-size: .96rem; color: var(--texte); letter-spacing: -.01em;
}

/* Les encadrés de résultat fiscal : le chiffre est le héros. */
.res-box {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}
.res-h {
  background: linear-gradient(135deg, var(--marine), var(--ardoise));
  padding: var(--e4) var(--e5);
}
.res-ht { color: #FFF; font-family: var(--titre); font-weight: 700; }
.res-hs { color: rgba(255,255,255,.66); }
.res-r  { border-bottom: 1px solid var(--gris-2); }
.res-l  { color: var(--texte-clair); }
.res-v  { color: var(--texte); font-weight: 600; }
/* Le bloc final porte le chiffre qui compte : bande bleu nuit, montant en
   jaune solaire (12,8:1). La page colorait ce montant en or sur fond sombre —
   on garde cette intention, avec des valeurs mesurées. */
.res-b { background: linear-gradient(135deg, var(--marine), var(--ardoise));
         border-top: none; }
.res-b .res-r { border-bottom-color: rgba(255,255,255,.10); }
.res-b .res-l { color: rgba(255,255,255,.74); }
.res-b .res-v { color: #FFF; font-weight: 700; }
.res-b .tot .res-v, .res-b .res-r.tot .res-v { color: var(--or-clair); font-weight: 800; }


/* ═══ §6 — LES BOUTONS ════════════════════════════════════════════════════
   Un seul bouton orange par écran : ce que l'on attend de vous.
   Le vert valide, le blanc accompagne, le fantôme s'efface.             */
.btn, .btn-export, .res-btn, .ftb {
  font-family: var(--corps); font-weight: 600;
  border-radius: var(--r-sm);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
  cursor: pointer;
}
.btn:active, .res-btn:active, .btn-export:active { transform: translateY(1px); }

/* Action principale — orange sur bleu nuit : 6,4:1 */
.btn-p {
  background: linear-gradient(135deg, var(--action), var(--action-fonce)) !important;
  color: var(--action-texte) !important;
  border: none;
  box-shadow: 0 2px 8px rgba(255,107,0,.28);
  font-weight: 700;
}
.btn-p:hover {
  box-shadow: 0 4px 16px rgba(255,107,0,.38);
  filter: brightness(1.04);
}

/* Validation comptable — vert plein, texte blanc : 6,7:1 */
.res-btn {
  background: linear-gradient(135deg, var(--vert), var(--vert-clair)) !important;
  color: #FFF !important; border: none;
  box-shadow: 0 2px 8px rgba(0,107,46,.22);
}
.res-btn:hover { box-shadow: 0 4px 14px rgba(0,107,46,.3); filter: brightness(1.05); }

/* Accompagnement — blanc bordé */
.btn-s, .btn-export {
  background: var(--blanc); color: var(--texte);
  border: 1px solid var(--bordure-forte);
}
.btn-s:hover, .btn-export:hover {
  border-color: var(--marine); background: var(--gris-1);
}

/* Discret */
.btn-g { background: var(--gris-1); color: var(--texte-clair); border: 1px solid var(--bordure); }
.btn-g:hover { background: var(--gris-2); color: var(--texte); }

/* Onglets de filtre */
.ftb {
  background: var(--blanc); border: 1px solid var(--bordure);
  color: var(--texte-clair); border-radius: var(--r-pill);
  padding: 8px 14px; font-size: .8rem;
}
.ftb:hover { border-color: var(--bordure-forte); color: var(--texte); }
.ftb.on, .ftb.actif {
  background: var(--marine); color: #FFF; border-color: var(--marine);
}


/* ═══ §7 — LA SAISIE ══════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  font-family: var(--corps);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  transition: border-color var(--tr), box-shadow var(--tr);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vert-clair);
  box-shadow: 0 0 0 3px rgba(0,128,55,.14);
}
input::placeholder, textarea::placeholder { color: var(--texte-discret); }
.lbl { color: var(--texte-clair); font-weight: 600; font-size: .78rem; }


/* ═══ §8 — LES TABLEAUX ═══════════════════════════════════════════════════ */
thead th {
  background: var(--gris-1);
  color: var(--texte-clair);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--bordure);
}
tbody tr { transition: background var(--tr); }
tbody tr:hover { background: var(--gris-1); }


/* ═══ §9 — LES ÉTATS ══════════════════════════════════════════════════════
   Une pastille dit tout de suite où en est un document.                 */
.bt, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: .72rem; font-weight: 700;
}
.bt.ok, .badge.ok   { background: var(--vert-pale); color: var(--vert); }
.bt.err, .badge.err { background: #FEE2E2; color: var(--rouge); }
.bt.att, .badge.att { background: #FEF3C7; color: #92400E; }

.ia-chip {
  background: var(--violet-pale); color: var(--violet);
  border: 1px solid rgba(109,40,217,.18);
  border-radius: var(--r-pill); font-weight: 600;
}


/* ═══ §10 — LES FENÊTRES ══════════════════════════════════════════════════ */
.mo { background: rgba(11,19,43,.55); backdrop-filter: blur(3px); }
.md {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-4);
}
.md-h { border-bottom: 1px solid var(--bordure); padding: var(--e4) var(--e5); }
.md-ht { font-family: var(--titre); font-weight: 700; color: var(--texte); }
.md-f { border-top: 1px solid var(--bordure); background: var(--gris-1); }

.notif-head { border-bottom: 1px solid var(--bordure); }
.notif-item { border-bottom: 1px solid var(--gris-2); transition: background var(--tr); }
.notif-item:hover { background: var(--gris-1); }
.notif-badge { background: var(--action); color: var(--action-texte); font-weight: 800; }


/* ═══ §11 — LE MODE SOMBRE ════════════════════════════════════════════════
   Même charte, autre lumière. Chaque valeur est mesurée sur les fonds
   réellement utilisés.                                                   */
html[data-theme="dark"] {
  --fond:          #0A1120;
  --blanc:         #111B2E;
  --gris-1:        #16223A;
  --gris-2:        #1E2B45;
  --gris-3:        #64748B;
  --bordure:       #1E2B45;
  --bordure-forte: #2C3A57;
  --texte:         #E8EEF7;
  --texte-clair:   #A9B8CE;
  --texte-discret: #8496AF;
  --vert:          #4ADE80;
  --vert-clair:    #34D399;
  --vert-pale:     rgba(74,222,128,.12);
  --rouge:         #FF8A80;
  --orange:        #FFB068;
  --bleu:          #93B4FF;
  --or:            #FFB068;
  --violet:        #B794F6;
  --violet-pale:   rgba(183,148,246,.14);
}
html[data-theme="dark"] body { background: var(--fond); color: var(--texte); }
html[data-theme="dark"] .pn,
html[data-theme="dark"] .card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .res-box,
html[data-theme="dark"] .md,
html[data-theme="dark"] .notif-panel { background: var(--blanc); border-color: var(--bordure); }
html[data-theme="dark"] .topb, html[data-theme="dark"] .tb {
  background: rgba(17,27,46,.90); border-bottom-color: var(--bordure);
}
html[data-theme="dark"] thead th { background: var(--gris-1); color: var(--texte-clair); }
html[data-theme="dark"] tbody tr:hover { background: var(--gris-1); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: var(--gris-1); color: var(--texte); border-color: var(--bordure-forte);
}
html[data-theme="dark"] .btn-s, html[data-theme="dark"] .btn-export {
  background: var(--gris-1); color: var(--texte); border-color: var(--bordure-forte);
}
html[data-theme="dark"] .btn-g { background: var(--gris-1); color: var(--texte-clair); }
html[data-theme="dark"] .ftb { background: var(--gris-1); color: var(--texte-clair); border-color: var(--bordure); }
html[data-theme="dark"] .ftb.on { background: var(--vert); color: #06210F; border-color: var(--vert); }
html[data-theme="dark"] .res-btn {
  background: linear-gradient(135deg,#0A7A45,#0A6E3F) !important; color:#FFF !important;
}
html[data-theme="dark"] .res-b { background: rgba(74,222,128,.10); }
html[data-theme="dark"] .bt.ok  { background: rgba(74,222,128,.14); color: var(--vert); }
html[data-theme="dark"] .bt.err { background: rgba(255,138,128,.14); color: var(--rouge); }
html[data-theme="dark"] .bt.att { background: rgba(255,176,104,.14); color: var(--orange); }


/* ═══ §12 — DU TÉLÉPHONE AU GRAND ÉCRAN ═══════════════════════════════════
   Un seul produit de 320 à 2560 px (R14).                               */
@media (max-width: 768px) {
  .ni { min-height: 48px; font-size: .9rem; margin: 3px var(--e2); }
  .pn, .card, .section, .res-box { border-radius: var(--r-sm); }
  .pn-h, .md-h { padding: var(--e3) var(--e4); }
  .tb-t { font-size: .98rem; }
}
@media (min-width: 1600px) {
  /* Sur grand écran, on ne dilue pas : on aère. */
  .pn-h { padding: var(--e5) var(--e6); }
}


/* ═══ §13 — LE PLANCHER D'ACCESSIBILITÉ ═══════════════════════════════════
   Repris de la version 1.0 : ces règles ne se négocient pas.            */
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
[style*="color:var(--gris-3)"] { color: var(--texte-clair) !important; }

@media (max-width: 768px) {
  button, .btn, .btn-sm, .btn-export, .ftb, .res-btn, .uc-btn, .db, .burger,
  .sg, .qa, .chip, a.ni, a.cn-skip, .cn-pin, .tab, .vt, [role="button"],
  #notifBtn, div[onclick], span[onclick],
  select, input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 44px !important;
  }
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  textarea { min-height: 44px !important; }
  #userAvatar, .av { min-width: 44px !important; min-height: 44px !important; }
}

/* NOTE — ne JAMAIS viser td[colspan] pour recolorer un texte d'attente :
   les formulaires DGI utilisent colspan, 12 des 36 PDF avaient changé
   d'empreinte. Le verrou §0 protège des variables, pas des sélecteurs
   d'éléments : rester sur les classes de l'application. */

/* — La sortie : présente, jamais tentante (LOT 3.3) — */
.ni-sortie { color: rgba(255,255,255,.5); font-size: .8rem; }
.ni-sortie:hover { background: rgba(185,28,28,.18); color: #FFC9C4; }
.ni-sortie .ni-ic { opacity: .7; }


/* ── §11b — Les accents verts sur fond sombre ─────────────────────────────
   Repris de la version précédente, avec la palette de la charte : un vert
   #0F7A47 sur un fond #0F172A ne donne que 3,3:1. Le vert vif donne 8,1:1. */
html[data-theme="dark"] .cn-ech-go,
html[data-theme="dark"] a.pl,
html[data-theme="dark"] .i-btn,
html[data-theme="dark"] .sc,
html[data-theme="dark"] th { color: var(--vert-vif) !important; }
html[data-theme="dark"] .cn-pin { color: var(--or-clair) !important; }
html[data-theme="dark"] [style*="color:var(--rouge)"] { color: #FF8A80 !important; }
html[data-theme="dark"] [style*="color:var(--orange)"] { color: #FFB068 !important; }
:root { --vert-vif: #4ADE80; }
html[data-theme="dark"] { --vert-vif: #4ADE80; }

/* Le lien d'évitement (« Aller au contenu ») prend le vert vif comme fond en
   mode sombre : du blanc dessus ne donne que 1,7:1. On le repose sur le
   bleu nuit, où le blanc donne 18,4:1. */
html[data-theme="dark"] .cn-skip,
html[data-theme="dark"] a.cn-skip {
  background: #0B132B !important; color: #FFF !important;
  border: 1px solid rgba(255,255,255,.28);
}

/* Les en-têtes de colonne du bilan reprennent le vert des jetons : en mode
   sombre ce vert s'éclaircit et le blanc dessus tombe à 1,8:1. On les repose
   sur le bleu nuit, qui est aussi leur place naturelle dans la charte. */
html[data-theme="dark"] .bilan-col-head {
  background: linear-gradient(135deg,#0B132B,#1A2744) !important; color: #FFF !important;
}

/* Le guide des raccourcis : une porte discrète, jamais un mur de touches. */
.cn-kbd-lien {
  display: block; width: 100%; margin-bottom: var(--e2);
  background: transparent; border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-xs); padding: 8px 10px;
  color: rgba(255,255,255,.6); font-family: var(--corps);
  font-size: .7rem; text-align: left; cursor: pointer;
  transition: all var(--tr);
}
.cn-kbd-lien:hover { background: rgba(255,255,255,.08); color: #FFF; border-color: rgba(255,255,255,.3); }

/* En mode sombre, le rail gardait un aplat hérité (#0F172A) plus spécifique
   que la charte : l'identité bleu nuit s'y perdait. On la rétablit. */
html[data-theme="dark"] .sb {
  background: linear-gradient(180deg, #070D1C 0%, #0A1226 55%, #0C1730 100%);
  border-right: 1px solid rgba(255,255,255,.07);
}

/* ═══ §14 — REPLI DE LA BARRE : ELLE DISPARAÎT, ELLE NE RÉTRÉCIT PAS ══════
   Demande du porteur. Auparavant, replier laissait une bande d'icônes de
   58 px : ni une barre, ni de la place gagnée. Elle s'efface désormais
   complètement et rend toute la largeur au travail. Le bouton ☰ de la barre
   haute reste le seul point de retour — il vit hors de la barre, il ne peut
   donc pas disparaître avec elle. */
@media (min-width: 901px) {
  body.cn-plie { --sw: 0px; }
  body.cn-plie .sb {
    width: 260px;                 /* elle garde sa forme pendant qu'elle sort */
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
  }
  /* Repliée, plus rien ne doit rester visible : on annule la bande d'icônes. */
  body.cn-plie .sb .nl,
  body.cn-plie .sb .sb-name,
  body.cn-plie .sb .sb-sub,
  body.cn-plie .sb .sb-cname,
  body.cn-plie .sb .sb-nif { display: revert; }
}
@media (prefers-reduced-motion: reduce) {
  body.cn-plie .sb { transition: none; }
}

/* ═══ §15 — LA BARRE HAUTE SUR TÉLÉPHONE ══════════════════════════════════
   Le vrai point noir du mobile. Trois défauts mesurés à 390 px :
   1. le bloc titre était étranglé à 31 px (« Tableau de bord » sur 3 lignes),
      parce que l'espaceur .tb-sp — utile sur ordinateur pour repousser la
      recherche — mangeait toute la largeur une fois la recherche masquée ;
   2. le réglage de densité confort/compact (un confort de saisie au clavier)
      s'affichait comme un second « burger » et encombrait la barre ;
   3. la cloche se retrouvait écrasée à 11 px.
   On rend la ligne au titre, on retire ce qui n'a pas sa place au doigt.   */
@media (max-width: 900px) {
  /* Le titre reprend toute la place libre, sur une seule ligne nette. */
  header.tb > div:has(> .tb-t),
  header.topb > div:has(> .tb-t) { flex: 1 1 auto; min-width: 0; }
  .tb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
          max-width: 60vw; }

  /* L'espaceur ne sert plus quand la recherche est masquée : il crushait le titre. */
  .tb-sp { display: none !important; }

  /* La densité est un réglage d'ordinateur : hors de la barre du téléphone. */
  #cnDensite { display: none !important; }

  /* Les actions gardent leur taille tactile et cessent de se comprimer. */
  header.tb  .theme-toggle, header.tb  .notif-btn, header.tb  #notifWrap, header.tb  .av,
  header.topb .theme-toggle, header.topb .notif-btn, header.topb #notifWrap, header.topb .av {
    flex: 0 0 auto;
  }
  /* Le panneau d'alertes ne doit pas déborder de l'écran. */
  .notif-panel { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; max-width: none; }

  /* Les grappes de boutons (à droite) ne rétrécissent JAMAIS : sinon leurs
     boutons débordent de l'écran. C'est le titre qui cède la place, lui. */
  .tb-r { flex: 0 0 auto; }
  header.tb .burger, header.topb .burger { flex: 0 0 auto; }
}

/* ═══ §16 — PAS DE HALO COLORÉ EN MODE SOMBRE ════════════════════════════
   Un halo teinté (vert, orange) autour d'un bouton sur fond sombre est un
   « tell » d'interface générée : ça brille sans raison. On garde une ombre
   portée neutre, qui pose le bouton sans le faire luire.                  */
html[data-theme="dark"] .btn-p,
html[data-theme="dark"] .res-btn,
html[data-theme="dark"] .btn-export {
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}