/* theme-moderne.css — thème « Moderne » de l'intranet (2026-09-16)
 *
 * Référence visuelle : docs/maquettes/maquette-intranet-artensia.html
 * (palette slate + indigo/violet/cyan, badges emerald/amber/rose, Inter,
 * barre latérale fixe avec profil en bas, barre du haut, cartes de
 * pilotage, Smart Inbox deux colonnes, mode clair/sombre, menu bas mobile).
 *
 * DEUX PRINCIPES, et ils expliquent tout ce fichier :
 *
 * 1. LA MAQUETTE EST EN TAILWIND, PAS NOUS. Le front de l'intranet est
 *    servi tel quel par Netlify — pas de bundler, pas de PostCSS — et la
 *    CSP interdit `cdn.tailwindcss.com` (`script-src 'self'` + trois
 *    paquets jsdelivr nommés). Les utilitaires de la maquette sont donc
 *    traduits ici en classes `.mod-*`, avec les mêmes valeurs exactes.
 *
 * 2. LES ÉCRANS EXISTANTS NE SONT PAS RÉÉCRITS. Tout le CSS de l'intranet
 *    est piloté par une poignée de variables (--bg, --bg2, --text…). En
 *    les redéfinissant sous `body[data-theme="moderne"]`, les 40 écrans
 *    legacy prennent la palette slate/indigo sans qu'on touche à leur
 *    balisage. La coquille (barre latérale, barre du haut, menu bas) est
 *    ajoutée autour ; les modules s'affichent dedans.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. Jetons — clair (défaut) puis sombre
   ═══════════════════════════════════════════════════════════════════ */

body[data-theme="moderne"] {
  /* Palette de la maquette (slate / indigo / accents) */
  --mod-50:#f8fafc; --mod-100:#f1f5f9; --mod-200:#e2e8f0; --mod-300:#cbd5e1;
  --mod-400:#94a3b8; --mod-500:#64748b; --mod-600:#475569; --mod-700:#334155;
  --mod-800:#1e293b; --mod-900:#0f172a;
  --mod-indigo:#4f46e5; --mod-indigo-500:#6366f1; --mod-indigo-300:#a5b4fc;
  --mod-violet:#8b5cf6; --mod-cyan:#06b6d4;
  --mod-emerald:#10b981; --mod-amber:#f59e0b; --mod-rose:#f43f5e;

  /* Surfaces de la coquille */
  --mod-page:var(--mod-50);
  --mod-surface:#ffffff;
  --mod-surface-2:var(--mod-50);
  --mod-line:rgba(226,232,240,.8);
  --mod-ink:var(--mod-900);
  --mod-ink-2:var(--mod-500);
  --mod-ink-3:var(--mod-400);
  --mod-hover:var(--mod-100);
  --mod-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --mod-shadow-lg:0 20px 50px rgba(15,23,42,.18);
  --mod-radius:12px;
  --mod-radius-sm:8px;

  /* ── Les variables historiques, remappées ──────────────────────────
     C'est ce bloc qui met les écrans existants à la palette sans les
     réécrire : ils lisent déjà ces noms-là. */
  --bg:var(--mod-page);
  --bg2:var(--mod-surface);
  --bg3:var(--mod-100);
  --bg4:var(--mod-200);
  --accent:var(--mod-indigo);
  --accent2:var(--mod-violet);
  --gold:var(--mod-indigo);
  --green:#059669; --orange:#d97706; --red:#e11d48;
  --text:var(--mod-900);
  --text2:var(--mod-500);
  --text3:var(--mod-400);
  --border:var(--mod-line);
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Inter',ui-sans-serif,system-ui,sans-serif;

  background:var(--mod-page);
  color:var(--mod-ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

body[data-theme="moderne"][data-mod-scheme="dark"] {
  --mod-page:var(--mod-900);
  --mod-surface:#111c33;                 /* slate-900 éclairci : cartes */
  --mod-surface-2:rgba(30,41,59,.6);     /* slate-800/60 de la maquette */
  --mod-line:rgba(30,41,59,1);
  --mod-ink:#f1f5f9;
  --mod-ink-2:var(--mod-400);
  --mod-ink-3:var(--mod-500);
  --mod-hover:rgba(30,41,59,.9);
  --mod-shadow:0 1px 2px rgba(0,0,0,.4);
  --mod-shadow-lg:0 20px 50px rgba(0,0,0,.55);

  --bg:var(--mod-900);
  --bg2:var(--mod-surface);
  --bg3:#1b2740;
  --bg4:#243352;
  --accent:var(--mod-indigo-500);
  --accent2:#a78bfa;
  --gold:var(--mod-indigo-300);
  --green:#34d399; --orange:#fbbf24; --red:#fb7185;
  --text:#f1f5f9;
  --text2:var(--mod-400);
  --text3:var(--mod-500);
  --border:rgba(148,163,184,.18);
}
/* ═══════════════════════════════════════════════════════════════════
   2. La coquille prend la place de l'habillage existant
   ═══════════════════════════════════════════════════════════════════ */

/* L'ancienne barre latérale, l'ancienne barre du haut et le burger ne
   sont pas supprimés du DOM : ils restent la SOURCE des entrées de
   navigation (libellés, droits, gestionnaires de clic). On les masque. */
body[data-theme="moderne"] .sidebar,
body[data-theme="moderne"] .topbar,
body[data-theme="moderne"] .sb-burger,
body[data-theme="moderne"] .sidebar-overlay { display:none !important; }

/* Pas de `display` ici (2026-09-18) : c'est enterApp() qui montre l'app. Depuis
   que le thème est posé AVANT le premier rendu, un `display:flex` dans cette
   règle montrait l'app dès l'injection de son squelette — avant les droits,
   avant la coquille. */
body[data-theme="moderne"] #app { height:100vh; flex-direction:row; }
body[data-theme="moderne"] .main { display:flex; flex-direction:column; min-width:0; flex:1; }
body[data-theme="moderne"] .content {
  flex:1; min-height:0; overflow-y:auto; padding:16px;
  background:var(--mod-page);
}
@media (min-width:768px) { body[data-theme="moderne"] .content { padding:24px; } }

/* ── Barre latérale ─────────────────────────────────────────────── */
.mod-side {
  width:256px; flex-shrink:0; display:none; flex-direction:column;
  background:var(--mod-surface); border-right:1px solid var(--mod-line);
}
@media (min-width:768px) { .mod-side { display:flex; } }

.mod-side-head {
  height:64px; display:flex; align-items:center; gap:12px; padding:0 20px;
  border-bottom:1px solid var(--mod-line);
}
.mod-logo {
  height:32px; width:32px; border-radius:var(--mod-radius-sm);
  background:var(--mod-indigo); display:grid; place-items:center; flex-shrink:0;
}
.mod-side-title { font-weight:600; line-height:1.15; color:var(--mod-ink); }
.mod-side-sub { font-size:12px; color:var(--mod-ink-2); }

.mod-nav { flex:1; overflow-y:auto; padding:16px 12px; font-size:14px; }
.mod-nav::-webkit-scrollbar { width:6px; }
.mod-nav::-webkit-scrollbar-thumb { background:rgba(100,116,139,.35); border-radius:9999px; }
.mod-nav-group + .mod-nav-group { margin-top:24px; }
.mod-nav-label {
  padding:0 8px 8px; font-size:12px; font-weight:500; color:var(--mod-ink-2);
}
.mod-nav-item {
  width:100%; display:flex; align-items:center; gap:12px;
  border:0; background:transparent; text-align:left; cursor:pointer;
  border-radius:var(--mod-radius-sm); padding:8px 12px;
  color:var(--mod-700); font-size:14px; font-family:inherit;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-nav-item { color:var(--mod-300); }
.mod-nav-item:hover { background:var(--mod-hover); }
.mod-nav-item[aria-current="page"] {
  background:rgba(99,102,241,.10); color:#4f46e5; font-weight:500;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-nav-item[aria-current="page"] {
  background:rgba(99,102,241,.16); color:var(--mod-indigo-300);
}
/* TAILLE PAR DÉFAUT DES ICÔNES — un <svg> sans width/height mesure
   300 × 150 px (taille par défaut d'un élément remplacé). Sans cette
   règle, les icônes de la barre du haut recouvraient la zone de travail
   et rendaient les onglets de la Smart Inbox inatteignables — défaut
   attrapé par la recette navigateur du 2026-09-16. */
.mod-ico { width:18px; height:18px; flex-shrink:0; display:block; }
.mod-nav-item .mod-ico { width:18px; height:18px; }
.mod-nav-item .mod-lab { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mod-pill {
  border-radius:9999px; background:var(--mod-indigo); color:#fff;
  font-size:11px; line-height:1; padding:3px 6px; flex-shrink:0;
}
.mod-pill-rose { background:var(--mod-rose); }

.mod-side-foot { border-top:1px solid var(--mod-line); padding:12px; }
.mod-profile {
  display:flex; align-items:center; gap:12px; padding:8px;
  border-radius:var(--mod-radius-sm); width:100%; border:0; background:transparent;
  cursor:pointer; text-align:left; font-family:inherit;
}
.mod-profile:hover { background:var(--mod-hover); }
.mod-avatar {
  position:relative; height:36px; width:36px; border-radius:9999px;
  background:var(--mod-violet); color:#fff; display:grid; place-items:center;
  font-size:14px; font-weight:600; flex-shrink:0;
}
.mod-avatar .mod-dot {
  position:absolute; bottom:-2px; right:-2px; height:12px; width:12px;
  border-radius:9999px; background:var(--mod-emerald);
  box-shadow:0 0 0 2px var(--mod-surface);
}
.mod-profile-name { display:block; font-size:14px; font-weight:500; color:var(--mod-ink); line-height:1.2; }
.mod-profile-role { display:block; font-size:12px; color:var(--mod-ink-2); }
/* Version servie et sa date, sous le profil (2026-09-18). */
.mod-version {
  padding:6px 8px 0; font-family:'DM Mono',ui-monospace,monospace;
  font-size:10.5px; color:var(--mod-ink-2); opacity:.8; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mod-version:empty { display:none; }

/* ── Barre du haut ──────────────────────────────────────────────── */
.mod-top {
  height:64px; position:sticky; top:0; z-index:20; display:flex;
  align-items:center; gap:12px; padding:0 16px;
  border-bottom:1px solid var(--mod-line);
  background:color-mix(in srgb, var(--mod-surface) 90%, transparent);
  backdrop-filter:blur(8px);
}
@media (min-width:768px) { .mod-top { padding:0 24px; } }

.mod-icon-btn {
  height:40px; width:40px; display:grid; place-items:center; flex-shrink:0;
  border-radius:var(--mod-radius); border:1px solid var(--mod-line);
  background:transparent; color:var(--mod-ink); cursor:pointer; position:relative;
}
.mod-icon-btn:hover { background:var(--mod-hover); }
.mod-burger { border:0; }
@media (min-width:768px) { .mod-burger { display:none; } }

.mod-search-btn {
  /* `min-width:0` n'est PAS décoratif : sans lui, un enfant flex ne peut
     pas rétrécir sous la largeur de son propre texte, et sur téléphone le
     champ sortait de la barre — tronqué net, sans bord droit. Même défaut
     que .mod-mail-from et .mod-result-main. */
  flex:1; min-width:0; max-width:576px; display:flex; align-items:center; gap:8px;
  height:40px; border-radius:var(--mod-radius);
  border:1px solid var(--mod-line); background:var(--mod-surface-2);
  padding:0 12px; font-size:14px; color:var(--mod-ink-2);
  cursor:pointer; font-family:inherit; text-align:left;
}
.mod-search-btn:hover { border-color:var(--mod-300); }
.mod-search-btn .mod-search-txt { flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mod-kbd {
  margin-left:auto; border-radius:6px; border:1px solid var(--mod-300);
  padding:1px 6px; font-size:11px; color:var(--mod-ink-2); flex-shrink:0;
}
@media (max-width:640px) { .mod-kbd { display:none; } }

.mod-clocks {
  margin-left:auto; display:none; align-items:center; gap:12px;
  border:1px solid var(--mod-line); border-radius:var(--mod-radius);
  padding:0 12px; height:40px;
}
@media (min-width:1024px) { .mod-clocks { display:flex; } }
.mod-clock-label { font-size:11px; color:var(--mod-ink-2); line-height:1.2; }
.mod-clock-val { font-weight:500; font-variant-numeric:tabular-nums; color:var(--mod-ink); }
.mod-clock-sep { height:24px; width:1px; background:var(--mod-200); }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-clock-sep { background:var(--mod-700); }

.mod-badge-count {
  position:absolute; top:-4px; right:-4px; height:16px; min-width:16px;
  padding:0 4px; border-radius:9999px; background:var(--mod-rose); color:#fff;
  font-size:10px; display:grid; place-items:center;
}
.mod-btn-primary {
  height:40px; border-radius:var(--mod-radius); background:var(--mod-indigo);
  color:#fff; font-size:14px; font-weight:500; padding:0 16px; border:0;
  cursor:pointer; box-shadow:var(--mod-shadow); font-family:inherit; flex-shrink:0;
}
.mod-btn-primary:hover { background:var(--mod-indigo-500); }
@media (max-width:1023px) { .mod-btn-primary.mod-hide-sm { display:none; } }

/* ── Menu bas (mobile) ──────────────────────────────────────────── */
.mod-bottom {
  position:sticky; bottom:0; z-index:20; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--mod-line); background:var(--mod-surface);
  font-size:11px; padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (min-width:768px) { .mod-bottom { display:none; } }
.mod-bottom button {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 2px; border:0; background:transparent; cursor:pointer;
  color:var(--mod-500); font-size:11px; font-family:inherit;
}
.mod-bottom button[aria-current="page"] { color:var(--mod-indigo); }
.mod-bottom .mod-ico { width:20px; height:20px; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-bottom button[aria-current="page"] { color:var(--mod-indigo-300); }

/* Tiroir latéral sur mobile */
.mod-side.mod-open {
  display:flex; position:fixed; top:0; bottom:0; left:0; z-index:60;
  box-shadow:var(--mod-shadow-lg);
}
.mod-scrim { position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.5); }

/* ═══════════════════════════════════════════════════════════════════
   3. Composants de contenu (cartes de pilotage, Smart Inbox, palette)
   ═══════════════════════════════════════════════════════════════════ */

.mod-card {
  border-radius:var(--mod-radius); border:1px solid var(--mod-line);
  background:var(--mod-surface); box-shadow:var(--mod-shadow);
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-card { background:var(--mod-surface-2); }
.mod-card-pad { padding:16px; }
.mod-card-alert { border-color:rgba(244,63,94,.3); }

.mod-kpis {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
@media (min-width:1280px) { .mod-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:480px) { .mod-kpis { grid-template-columns:minmax(0,1fr); } }
.mod-kpi-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mod-kpi-title { font-size:14px; color:var(--mod-ink-2); }
.mod-kpi-value {
  margin-top:4px; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--mod-ink); line-height:1.2;
}
.mod-kpi-value small { font-size:14px; font-weight:400; color:var(--mod-ink-2); }
.mod-kpi-note { margin-top:12px; font-size:12px; color:var(--mod-ink-2); }
.mod-kpi-spark { margin-top:12px; width:100%; height:48px; display:block; }
.mod-bar { margin-top:8px; height:6px; border-radius:9999px; background:var(--mod-100); }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-bar { background:var(--mod-700); }
.mod-bar > span { display:block; height:6px; border-radius:9999px; background:var(--mod-amber); }

.mod-tag {
  border-radius:9999px; font-size:11px; padding:2px 8px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.mod-tag-emerald { background:rgba(16,185,129,.1); color:#059669; }
.mod-tag-amber   { background:rgba(245,158,11,.1); color:#d97706; }
.mod-tag-rose    { background:rgba(244,63,94,.1);  color:#e11d48; }
.mod-tag-cyan    { background:rgba(6,182,212,.1);  color:#0891b2; }
.mod-tag-indigo  { background:rgba(99,102,241,.1); color:#4f46e5; }
.mod-tag-slate   { background:rgba(100,116,139,.1); color:#475569; }
.mod-tag-violet  { background:rgba(139,92,246,.1); color:#7c3aed; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-emerald { color:#34d399; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-amber   { color:#fbbf24; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-rose    { color:#fb7185; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-cyan    { color:#22d3ee; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-indigo  { color:var(--mod-indigo-300); }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-slate   { color:var(--mod-300); }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tag-violet  { color:#c4b5fd; }
.mod-tag-dot { height:6px; width:6px; border-radius:9999px; background:currentColor; }

.mod-section-head {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--mod-line);
}
.mod-section-title { font-weight:600; color:var(--mod-ink); }

.mod-tabs {
  display:flex; align-items:center; gap:4px; border-radius:var(--mod-radius-sm);
  background:var(--mod-100); padding:4px; font-size:14px;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tabs { background:var(--mod-900); }
.mod-tab {
  border-radius:6px; padding:6px 12px; border:0; background:transparent;
  color:var(--mod-600); cursor:pointer; font-family:inherit; font-size:14px;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tab { color:var(--mod-300); }
.mod-tab[aria-selected="true"] {
  background:var(--mod-surface); box-shadow:var(--mod-shadow); font-weight:500;
  color:var(--mod-ink);
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-tab[aria-selected="true"] { background:var(--mod-800); }

.mod-link-btn {
  margin-left:auto; border:0; background:transparent; cursor:pointer;
  font-size:14px; color:var(--mod-ink-2); display:flex; align-items:center;
  gap:4px; font-family:inherit;
}
.mod-link-btn:hover { color:var(--mod-ink); }

/* ── Smart Inbox ────────────────────────────────────────────────── */
.mod-inbox { display:grid; grid-template-columns:minmax(0,1fr); min-height:560px; }
@media (min-width:1024px) {
  .mod-inbox { grid-template-columns:200px minmax(0,1fr) minmax(0,1.3fr); }
}
.mod-folders {
  display:none; border-right:1px solid var(--mod-line); padding:8px; font-size:14px;
}
@media (min-width:1024px) { .mod-folders { display:block; } }
.mod-folders.mod-folders-off { display:none; }
.mod-folders-label { padding:6px 8px; font-size:12px; font-weight:500; color:var(--mod-ink-2); }
.mod-folder {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; border-radius:var(--mod-radius-sm); padding:6px 8px; border:0;
  background:transparent; cursor:pointer; font-family:inherit; font-size:14px;
  color:var(--mod-ink); text-align:left;
}
.mod-folder:hover { background:var(--mod-hover); }
.mod-folder[aria-pressed="true"] { background:rgba(79,70,229,.10); color:#4338ca; }
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-folder[aria-pressed="true"] { color:var(--mod-indigo-300); }

.mod-mail-list {
  border-right:1px solid var(--mod-line); overflow-y:auto; max-height:560px;
}
.mod-mail-list::-webkit-scrollbar { width:6px; }
.mod-mail-list::-webkit-scrollbar-thumb { background:rgba(100,116,139,.35); border-radius:9999px; }
.mod-mail {
  width:100%; text-align:left; padding:12px 16px; border:0; border-left:2px solid transparent;
  border-bottom:1px solid var(--mod-100); background:transparent; cursor:pointer;
  font-family:inherit; display:block;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-mail { border-bottom-color:rgba(30,41,59,.9); }
.mod-mail:hover { background:var(--mod-surface-2); }
.mod-mail[aria-selected="true"] {
  border-left-color:rgba(99,102,241,.6); background:rgba(99,102,241,.06);
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-mail[aria-selected="true"] { background:rgba(99,102,241,.12); }
.mod-mail-top { display:flex; align-items:center; gap:8px; min-width:0; }
.mod-unread { height:8px; width:8px; border-radius:9999px; background:var(--mod-indigo-500); flex-shrink:0; }
.mod-unread-off { height:8px; width:8px; flex-shrink:0; }
/* `display:block` / `min-width:0` NE SONT PAS DÉCORATIFS : l'ellipse CSS
   ne s'applique pas à un élément en ligne, et un enfant de flex refuse de
   rétrécir sous sa largeur de contenu sans `min-width:0`. Sans les deux, un
   objet d'e-mail long bave hors de sa carte sur téléphone. */
.mod-mail-from {
  display:block; flex:1; min-width:0; font-size:14px; color:var(--mod-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mod-mail-from.mod-is-unread { font-weight:600; }
.mod-mail-time { margin-left:auto; font-size:12px; color:var(--mod-ink-2); font-variant-numeric:tabular-nums; flex-shrink:0; }
.mod-mail-subject {
  display:block; margin-top:2px; padding-left:16px; font-size:14px;
  color:var(--mod-600); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-mail-subject { color:var(--mod-300); }
.mod-mail-tags { margin-top:6px; padding-left:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.mod-mail { min-width:0; }

.mod-reader { padding:20px; display:none; min-width:0; }
@media (min-width:1024px) { .mod-reader { display:block; } }
.mod-reader.mod-reader-open { display:block; }
.mod-reader-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mod-reader-title { font-weight:600; line-height:1.35; color:var(--mod-ink); margin:0; font-size:16px; }
.mod-reader-meta { margin-top:4px; font-size:14px; color:var(--mod-ink-2); }
.mod-reader-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mod-btn-sm {
  border-radius:var(--mod-radius-sm); border:1px solid var(--mod-line);
  background:transparent; color:var(--mod-ink); font-size:14px; padding:6px 12px;
  cursor:pointer; font-family:inherit;
}
.mod-btn-sm:hover { background:var(--mod-hover); }
.mod-btn-sm-primary { background:var(--mod-indigo); color:#fff; border-color:transparent; }
.mod-btn-sm-primary:hover { background:var(--mod-indigo-500); }
.mod-reader-body {
  margin-top:16px; border-radius:var(--mod-radius); border:1px solid var(--mod-line);
  background:var(--mod-surface-2); padding:16px; font-size:14px; line-height:1.6;
  white-space:pre-line; color:var(--mod-ink); overflow-wrap:anywhere;
}
body[data-theme="moderne"][data-mod-scheme="dark"] .mod-reader-body { background:rgba(15,23,42,.4); }
.mod-note {
  margin-top:16px; border-radius:var(--mod-radius); border:1px solid rgba(245,158,11,.3);
  background:rgba(245,158,11,.05); padding:12px; font-size:14px;
  display:flex; align-items:flex-start; gap:8px; color:var(--mod-ink);
}
.mod-empty { padding:24px; font-size:14px; color:var(--mod-ink-2); }

/* ── Palette de recherche (Ctrl/⌘ K) ────────────────────────────── */
.mod-modal { position:fixed; inset:0; z-index:10080; }
.mod-modal-scrim { position:absolute; inset:0; background:rgba(15,23,42,.5); }
.mod-modal-box {
  position:relative; margin:96px auto 0; width:92%; max-width:576px;
  border-radius:var(--mod-radius); border:1px solid var(--mod-line);
  background:var(--mod-surface); box-shadow:var(--mod-shadow-lg); overflow:hidden;
}
@media (max-width:640px) { .mod-modal-box { margin-top:48px; } }
.mod-modal-head {
  display:flex; align-items:center; gap:8px; padding:0 16px; height:48px;
  border-bottom:1px solid var(--mod-line);
}
.mod-modal-input {
  flex:1; background:transparent; border:0; outline:none; font-size:14px;
  color:var(--mod-ink); font-family:inherit; min-width:0;
}
.mod-modal-results { padding:8px; font-size:14px; max-height:60vh; overflow-y:auto; }
.mod-modal-label { padding:4px 8px; font-size:12px; color:var(--mod-ink-2); }
.mod-result {
  width:100%; text-align:left; display:flex; align-items:center; gap:12px;
  border-radius:var(--mod-radius-sm); padding:8px; border:0; background:transparent;
  cursor:pointer; font-family:inherit; font-size:14px; color:var(--mod-ink);
}
.mod-result:hover, .mod-result:focus-visible { background:var(--mod-hover); outline:none; }
.mod-result-main { display:block; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mod-result-sub { color:var(--mod-ink-2); }

/* ═══════════════════════════════════════════════════════════════════
   4. Les écrans existants, à l'intérieur de la coquille
   ═══════════════════════════════════════════════════════════════════ */

body[data-theme="moderne"] .card,
body[data-theme="moderne"] .stat-card {
  border-radius:var(--mod-radius); border:1px solid var(--mod-line);
  background:var(--mod-surface); box-shadow:var(--mod-shadow);
}
body[data-theme="moderne"][data-mod-scheme="dark"] .card,
body[data-theme="moderne"][data-mod-scheme="dark"] .stat-card { background:var(--mod-surface-2); }

body[data-theme="moderne"] .card-title {
  font-family:var(--font); font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--mod-ink);
}
body[data-theme="moderne"] button,
body[data-theme="moderne"] .btn { font-family:var(--font); }
body[data-theme="moderne"] input,
body[data-theme="moderne"] select,
body[data-theme="moderne"] textarea {
  font-family:var(--font); border-radius:var(--mod-radius-sm);
  border:1px solid var(--mod-line); background:var(--mod-surface);
  color:var(--mod-ink);
}
body[data-theme="moderne"] table { border-color:var(--mod-line); }
body[data-theme="moderne"] th {
  font-family:var(--font); text-transform:none; letter-spacing:0;
  color:var(--mod-ink-2); font-weight:500;
}

/* AUCUN TABLEAU QUI DÉBORDE — exigence du chantier. Sur téléphone, un
   tableau large défile dans son propre conteneur au lieu de pousser la
   page ; la page, elle, ne défile jamais latéralement. */
body[data-theme="moderne"] { overflow-x:hidden; }
body[data-theme="moderne"] .content table { max-width:100%; }
@media (max-width:767px) {
  body[data-theme="moderne"] .content table { display:block; overflow-x:auto; }
  body[data-theme="moderne"] .content { padding:12px; }
  body[data-theme="moderne"] .content > .page { min-width:0; }

  /* Les écrans hérités ont été dessinés pour un bureau. Mesuré par le
     parcours du 2026-09-16 : sur un écran de 390 px, une rangée de
     filtres sortait de 339 px sur Leads, un graphique de 87 px sur
     Reporting, une carte de statistique de 19 px sur Production.

     Trois règles, cantonnées au téléphone ET au thème Moderne :

     1. une rangée en `display:flex` posée en style inline se REPLIE au
        lieu de sortir. C'est large, et c'est voulu : sur un téléphone,
        se replier vaut toujours mieux que déborder ;
     2. un graphique, une image, un champ ne dépassent pas leur colonne ;
     3. une carte de statistique perd sa largeur minimale de bureau. */
  /* `:not(.fusion-tab-bar)` n'est pas une précaution de style : la barre
     d'onglets porte `display:flex` en style inline, donc cette règle
     l'attrapait — et, plus spécifique que la sienne, la faisait se
     replier. Sur « Réglages & système » (13 onglets), ça faisait sept
     rangées avant le premier contenu. Elle défile, elle ne se replie pas. */
  body[data-theme="moderne"] .content [style*="display:flex"]:not(.fusion-tab-bar),
  body[data-theme="moderne"] .content [style*="display: flex"]:not(.fusion-tab-bar) {
    flex-wrap:wrap !important;
  }
  /* Et les GRILLES, qui sont le vrai coupable : les rangées de filtres
     sont posées en `grid-template-columns:1fr 140px 140px 140px 120px 90px`.
     Six colonnes fixes dans 366 px, ça sort de 339. Une colonne. */
  body[data-theme="moderne"] .content [style*="grid-template-columns"] {
    grid-template-columns:1fr !important;
  }
  body[data-theme="moderne"] .content canvas,
  body[data-theme="moderne"] .content img {
    max-width:100% !important; height:auto !important;
  }
  body[data-theme="moderne"] .content input,
  body[data-theme="moderne"] .content select,
  body[data-theme="moderne"] .content textarea,
  body[data-theme="moderne"] .content button { max-width:100%; }
  body[data-theme="moderne"] .content .stat-card,
  body[data-theme="moderne"] .content .card { min-width:0 !important; }
  body[data-theme="moderne"] .content code,
  body[data-theme="moderne"] .content pre {
    max-width:100%; overflow-wrap:anywhere; white-space:pre-wrap;
  }
}

/* ── La barre d'onglets d'une catégorie, remontée dans le contenu ──
   2026-09-16 : la barre latérale ne déplie plus rien. Les onglets d'une
   catégorie s'affichent en haut de la zone de contenu, rendus par
   `showFusion` comme en Classique — on ne fait que les rhabiller.

   Sur téléphone, c'est le point qui casse : `cat-commercial` porte onze
   onglets, et un `flex-wrap` les empile sur quatre rangées qui mangent
   la moitié de l'écran avant le premier contenu. Ils défilent donc
   HORIZONTALEMENT, dans leur propre conteneur. */
body[data-theme="moderne"] .fusion-tab-bar {
  background:var(--mod-surface) !important;
  border-bottom:1px solid var(--mod-line) !important;
  padding:6px 6px 0; gap:4px !important;
}
/* Le rendu hérité étire les onglets (`flex:1 0 calc(20% - 8px)`) pour en
   faire cinq colonnes par ligne : sur une barre de quatre onglets, chacun
   occupe un quart de l'écran et le libellé flotte au milieu du vide. Sous
   Moderne ils reprennent leur largeur naturelle et se replient. */
body[data-theme="moderne"] .fusion-tab-bar > button {
  flex:0 0 auto !important; border-radius:var(--mod-radius-sm) var(--mod-radius-sm) 0 0;
  font-family:var(--font); font-size:13px !important;
  white-space:nowrap !important; padding:10px 14px !important;
}
body[data-theme="moderne"] .fusion-tab-bar > button:hover {
  background:var(--mod-hover) !important;
}
body[data-theme="moderne"] .fusion-tab-bar > button[data-disabled="1"] {
  cursor:not-allowed;
}
@media (max-width:767px) {
  /* `!important` obligatoire : le rendu hérité pose
     `.fusion-tab-bar { overflow: visible !important }`. Sans cette force,
     la barre ne défilait pas — elle DÉBORDAIT, de 339 px sur Vente
     (mesuré par le parcours du 2026-09-16). */
  body[data-theme="moderne"] .fusion-tab-bar {
    flex-wrap:nowrap !important; overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }
  body[data-theme="moderne"] .fusion-tab-bar > button { flex:0 0 auto !important; }
}

/* Le fond des pages internes suit la palette (certaines forcent du blanc). */
body[data-theme="moderne"] .page { background:transparent; color:var(--mod-ink); }

@media (prefers-reduced-motion: reduce) {
  body[data-theme="moderne"] * { transition:none !important; animation:none !important; }
}