/* THÈME DU SHELL (barre latérale + en-tête) — décision du 2026-09-02 : B (lavande) le jour, C (sombre unifié) la nuit.
   Chargé dans x-head.php AVANT tailwind.css, avec l attribut data-shell posé sur <html> avant le premier rendu : sans cela
   la page se peignait d abord en « Original » (barre sombre à image + flou) puis basculait — l ancien design visible à
   chaque rafraîchissement (fondateur, 2026-09-05). Les variantes a/d/e restent pour l outil de comparaison (préprod).
   Extrait tel quel de includes/shell-theme-picker.php (ex-<style id="shell-preview-css">). */

/* ── Jetons par variante. Seule la palette change ; les règles d'application sont communes. ── */
html[data-shell="a"]{
  --sh-sb-bg:#ffffff; --sh-sb-ink:#191933; --sh-sb-soft:#4b4f6b; --sh-sb-line:#e6e7f2;
  --sh-sb-hover:#f2f3fa; --sh-sb-tenant:#f6f7fb;
  --sh-sb-actif-bg:#eef0ff; --sh-sb-actif-ink:#4338ca; --sh-sb-actif-line:#c7cbff;
  --sh-top-bg:#ffffff; --sh-top-ink:#191933; --sh-top-soft:#4b4f6b; --sh-top-line:#e6e7f2;
  --sh-icones:saturate(1.45) brightness(.68);
  --sh-sb-faint:#8b8fa8; --sh-accent:#4f46e5;
}
html[data-shell="b"]{
  --sh-sb-bg:#f5f4ff; --sh-sb-ink:#191933; --sh-sb-soft:#4b4f6b; --sh-sb-line:#e2e0f7;
  --sh-sb-hover:#eceaff; --sh-sb-tenant:#ffffff;
  --sh-sb-actif-bg:#ddd9ff; --sh-sb-actif-ink:#3b32b8; --sh-sb-actif-line:#c7cbff;
  --sh-top-bg:#f5f4ff; --sh-top-ink:#191933; --sh-top-soft:#4b4f6b; --sh-top-line:#e2e0f7;
  --sh-icones:saturate(1.45) brightness(.68);
  --sh-sb-faint:#8b8fa8; --sh-accent:#4f46e5;
}
html[data-shell="c"]{
  --sh-sb-bg:#1c2033; --sh-sb-ink:#e8e9f5; --sh-sb-soft:rgba(232,233,245,.74); --sh-sb-line:#2b3049;
  --sh-sb-hover:rgba(255,255,255,.07); --sh-sb-tenant:rgba(255,255,255,.05);
  --sh-sb-actif-bg:rgba(108,99,255,.24); --sh-sb-actif-ink:#ffffff; --sh-sb-actif-line:rgba(108,99,255,.5);
  --sh-top-bg:#1c2033; --sh-top-ink:#e8e9f5; --sh-top-soft:rgba(232,233,245,.74); --sh-top-line:#2b3049;
  --sh-icones:none;
  --sh-sb-faint:rgba(232,233,245,.45); --sh-accent:#948dff;
}
html[data-shell="d"]{
  --sh-sb-bg:#ffffff; --sh-sb-ink:#191933; --sh-sb-soft:#33364f; --sh-sb-line:#191933;
  --sh-sb-hover:#f2f3fa; --sh-sb-tenant:#f6f7fb;
  --sh-sb-actif-bg:#4f46e5; --sh-sb-actif-ink:#ffffff; --sh-sb-actif-line:#191933;
  --sh-top-bg:#ffffff; --sh-top-ink:#191933; --sh-top-soft:#33364f; --sh-top-line:#191933;
  --sh-icones:saturate(1.6) brightness(.6);
  --sh-sb-faint:#6b6f88; --sh-accent:#4f46e5;
}
html[data-shell="e"]{
  --sh-sb-bg:#eef1f7; --sh-sb-ink:#191933; --sh-sb-soft:#4b4f6b; --sh-sb-line:#d9dfea;
  --sh-sb-hover:#e3e8f2; --sh-sb-tenant:#ffffff;
  --sh-sb-actif-bg:#ffffff; --sh-sb-actif-ink:#3b32b8; --sh-sb-actif-line:#c7cbff;
  --sh-top-bg:#eef1f7; --sh-top-ink:#191933; --sh-top-soft:#4b4f6b; --sh-top-line:#d9dfea;
  --sh-icones:saturate(1.45) brightness(.68);
  --sh-sb-faint:#8b8fa8; --sh-accent:#4f46e5;
}

/* ── Application. `!important` assumé : on surcharge des règles Tailwind compilées et des styles
      inline posés par x-sidebar.php, sur un outil d'essai qui doit gagner sans rebuild. ── */
html[data-shell] .layer-sidebar-bg,
html[data-shell] .layer-bg,
html[data-shell] .layer-sparkles,
html[data-shell] .layer-robot{ display:none !important; }
/* Le fond du document était peint par .layer-bg : sans lui, il faut une couleur, sinon le blanc
   du navigateur remplace le canvas. */
html[data-shell] body{ background:#f6f7fb !important; }

html[data-shell] .sidebar{
  background:var(--sh-sb-bg) !important;
  border-right:1px solid var(--sh-sb-line) !important;
  backdrop-filter:none !important;
}
html[data-shell="d"] .sidebar{ border-right-width:2px !important; }

html[data-shell] .sidebar-logo{ border-bottom:1px solid var(--sh-sb-line) !important; }
html[data-shell] .sidebar-link{ color:var(--sh-sb-soft) !important; }
html[data-shell] .sidebar-link:hover{ color:var(--sh-sb-ink) !important; background:var(--sh-sb-hover) !important; }
html[data-shell] .sidebar-link.is-active,
html[data-shell] .sidebar-link-active,
html[data-shell] .sidebar nav a.is-active{
  background:var(--sh-sb-actif-bg) !important;
  color:var(--sh-sb-actif-ink) !important;
  border:1px solid var(--sh-sb-actif-line) !important;
  box-shadow:none !important;
}
/* Le lien actif reçoit --mod-bg / --mod-border en inline depuis x-sidebar.php : on les neutralise. */
html[data-shell] .sidebar a{ --mod-bg:var(--sh-sb-actif-bg); --mod-border:var(--sh-sb-actif-line); }

html[data-shell] .sidebar-tenant{
  background:var(--sh-sb-tenant) !important;
  border-color:var(--sh-sb-line) !important;
}
/* Les libellés de la barre sont écrits en dur en text-white / text-white/75 dans x-sidebar.php. */
html[data-shell] .sidebar .text-white,
html[data-shell] .sidebar [class*="text-white"]{ color:var(--sh-sb-ink) !important; }
html[data-shell] .sidebar .text-white\/75,
html[data-shell] .sidebar .text-white\/60,
html[data-shell] .sidebar .text-white\/70{ color:var(--sh-sb-soft) !important; }
/* Icônes calibrées pour un fond sombre (emerald-400, violet-400, pink-400…) : assombries en bloc
   plutôt que réécrites une à une, ce qui conserve le codage couleur par module. */
html[data-shell] .sidebar nav svg{ filter:var(--sh-icones) !important; }
html[data-shell] .sidebar-collapse-btn{
  color:var(--sh-sb-soft) !important; background:var(--sh-sb-hover) !important;
  border-color:var(--sh-sb-line) !important;
}

/* ── L ENCADRE PROFIL. Il ne « flottait » pas par hasard : `.sidebar-tenant` porte une ombre
      portee sombre (0 10px 24px rgba(0,0,0,.20)) et un `backdrop-filter:blur(10px)`, deux effets
      faits pour DETACHER un bloc translucide d un fond sombre. Poses sur une barre claire, ils en
      font une carte posee PAR-DESSUS la navigation au lieu d un element DE la navigation.
      Trois autres reglages suivaient la meme logique : l anneau blanc de l avatar, le separateur
      `border-white/10`, et une hierarchie ecrite en text-white/35, /45 et /50 — que ma regle
      generique `[class*="text-white"]` ramenait TOUTE a la meme encre, effacant la hierarchie
      qu elle etait censee sauver. D ou le troisieme niveau, --sh-sb-faint. ── */
html[data-shell] .sidebar-tenant{
  box-shadow:none !important;
  backdrop-filter:none !important;
  border-radius:12px !important;
  border:1px solid var(--sh-sb-line) !important;
}
html[data-shell="d"] .sidebar-tenant{ border-radius:4px !important; border-width:1.6px !important; box-shadow:2.5px 2.5px 0 #191933 !important; }

/* Hierarchie rendue : trois niveaux au lieu d un seul. */
html[data-shell] .sidebar [class*="text-white/3"],
html[data-shell] .sidebar [class*="text-white/4"],
html[data-shell] .sidebar [class*="text-white/5"]{ color:var(--sh-sb-faint) !important; }
html[data-shell] .sidebar [class*="text-white/6"],
html[data-shell] .sidebar [class*="text-white/7"]{ color:var(--sh-sb-soft) !important; }
html[data-shell] .sidebar a[class*="text-white"]:hover{ color:var(--sh-sb-ink) !important; }

/* Le separateur interne du bloc et l anneau de l avatar. */
html[data-shell] .sidebar [class*="border-white"]{ border-color:var(--sh-sb-line) !important; }
html[data-shell] .profile-avatar-btn{
  box-shadow:0 0 0 2px var(--sh-sb-tenant), 0 0 0 3px var(--sh-sb-line) !important;
}
html[data-shell] .profile-avatar-btn:hover{
  box-shadow:0 0 0 2px var(--sh-sb-tenant), 0 0 0 3px var(--sh-accent) !important;
}

/* « Recharger » est une action, pas une mention : elle merite l accent, pas du gris. */
html[data-shell] .sidebar-tenant a[href*="credit"]{ color:var(--sh-accent) !important; font-weight:600; }

/* Le solde est colore par une classe de STATUT (emerald/amber/red 400), calibree pour du sombre. */
html[data-shell]:not([data-shell="c"]) .sidebar-tenant .text-emerald-400{ color:#047857 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar-tenant .text-amber-400{ color:#b45309 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar-tenant .text-red-400{ color:#dc2626 !important; }
html[data-shell]:not([data-shell="c"]) .sidebar-tenant .text-blue-400{ color:#1d4ed8 !important; }
/* ── L EN-TETE. Repeindre son fond ne suffit pas : tout ce qui vit dedans est calibre pour du
      sombre. `.topbar-btn:hover` pose `color:#fff` et `.topbar-icon-btn:hover` aussi
      (design-system.css:316) — sur une barre blanche, le libelle DISPARAIT au survol. Et les six
      boutons de modules portent des pastels de niveau 300 (#c4b5fd, #f9a8d4, #67e8f9, #fcd34d,
      #fdba74), illisibles sur blanc, dont les regles :hover remontent encore vers le blanc.
      Chaque module garde donc SA teinte, transposee au niveau 700 sur un fond pale : aplatir les
      six en une seule couleur aurait supprime le codage par module, qui est une information. ── */
html[data-shell] .topbar{
  background:var(--sh-top-bg) !important;
  border-bottom:1px solid var(--sh-top-line) !important;
}
html[data-shell="d"] .topbar{ border-bottom-width:2px !important; }

html[data-shell]:not([data-shell="c"]) .topbar-btn,
html[data-shell]:not([data-shell="c"]) .topbar-icon-btn{
  color:var(--sh-top-ink) !important;
  background:var(--sh-sb-hover) !important;
  border-color:var(--sh-top-line) !important;
  backdrop-filter:none !important;
}
html[data-shell]:not([data-shell="c"]) .topbar-btn:hover,
html[data-shell]:not([data-shell="c"]) .topbar-icon-btn:hover{
  color:#4338ca !important; background:#eef0ff !important; border-color:#c7cbff !important;
}
html[data-shell]:not([data-shell="c"]) .topbar-btn.text-red-400{ color:#dc2626 !important; }
html[data-shell]:not([data-shell="c"]) .topbar-btn.text-red-400:hover{ color:#b91c1c !important; background:#fef2f2 !important; border-color:#fecaca !important; }

html[data-shell]:not([data-shell="c"]) .topbar-module{ border-width:1px !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-amber { background:#fffbeb !important; border-color:#fcd34d !important; color:#b45309 !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-amber:hover { background:#fef3c7 !important; color:#92400e !important; box-shadow:none !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-violet{ background:#f5f3ff !important; border-color:#ddd6fe !important; color:#6d28d9 !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-violet:hover{ background:#ede9fe !important; color:#5b21b6 !important; box-shadow:none !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-pink  { background:#fdf2f8 !important; border-color:#fbcfe8 !important; color:#be185d !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-pink:hover  { background:#fce7f3 !important; color:#9d174d !important; box-shadow:none !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-cyan  { background:#ecfeff !important; border-color:#a5f3fc !important; color:#0e7490 !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-cyan:hover  { background:#cffafe !important; color:#155e75 !important; box-shadow:none !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-orange{ background:#fff7ed !important; border-color:#fed7aa !important; color:#c2410c !important; }
html[data-shell]:not([data-shell="c"]) .topbar-module-orange:hover{ background:#ffedd5 !important; color:#9a3412 !important; box-shadow:none !important; }
/* Les icones des modules sont en stroke="currentColor" : elles suivent la couleur ci-dessus.
   Leur appliquer le filtre de la barre laterale les assombrirait DEUX fois. */
html[data-shell="d"] .topbar-module{ border-color:#191933 !important; }

html[data-shell]:not([data-shell="c"]) .topbar-modules-nav::-webkit-scrollbar-thumb{ background:rgba(25,25,51,.18) !important; }
/* PAS de regle sur `.msup-ctx-label`. Elle y etait, et elle ne pouvait QUE nuire :
   support.js:598 DEPLACE le declencheur hors de l en-tete et le transforme en bouton vert
   `.msup-ctx-btn` (fond #16a34a, texte #fff). Non cantonne a `.topbar`, mon selecteur l y
   suivait et forçait l encre sombre : texte noir sur vert. Et dans l en-tete le libelle est
   `display:none` (support.css:391) — il n y est jamais visible. Une regle qui ne s applique
   qu la ou elle nuit. */
html[data-shell]:not([data-shell="c"]) .topbar .text-white,
html[data-shell]:not([data-shell="c"]) .topbar [class*="text-white"]{ color:var(--sh-top-ink) !important; }
html[data-shell]:not([data-shell="c"]) .topbar-search input{
  color:var(--sh-top-ink) !important; border-color:var(--sh-top-line) !important;
  background:var(--sh-sb-hover) !important;
}
html[data-shell]:not([data-shell="c"]) .topbar-search input::placeholder{ color:var(--sh-top-soft) !important; }

/* VARIANTE C — l en-tete prend la MEME teinte que la barre. Son contenu (boutons blancs a 8 %,
   modules en pastels 300) est deja fait pour du sombre : on n y touche pas, on retire seulement
   la texture et le flou. */
html[data-shell="c"] .topbar{ backdrop-filter:none !important; }