*{box-sizing:border-box;margin:0;padding:0}
:root{
  --t:#0D9488;--tl:#E1F5EE;
  --bg:#F6F6F7;--bg-soft:#FBFBFB;
  --card:#fff;--card-2:#F8FAFC;
  --tx:#0F172A;--tx-soft:#475569;
  --mu:#6D7175;--mu2:#8C9196;
  --b:#E1E3E5;--b2:#EBEEF1;--b3:#F1F5F9;
  --red:#D72C0D;--am:#B98900;--gr:#0E8345;--bl:#2563EB;
  --red-bg:#FEF2F2;--red-tx:#7F1D1D;--red-bd:#FECACA;
  --am-bg:#FFFBEB;--am-tx:#92400E;--am-bd:#FDE68A;
  --gr-bg:#DCFCE7;--gr-tx:#166534;--gr-bd:#BBF7D0;
  --bl-bg:#EFF6FF;--bl-tx:#1E40AF;--bl-bd:#BFDBFE;
  --rDot:#E03E1A;--oDot:#F5A623;--gDot:#3CB371;
  --hover:#F2F4F5;--input-bg:#fff;
  --topbar-bg:#fff;--sidebar-bg:#FBFBFB;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 1px rgba(15,23,42,.03);
  --shadow-md:0 4px 12px rgba(15,23,42,.06);
  --shadow-lg:0 8px 24px rgba(15,23,42,.10);
  --modal-overlay:rgba(15,23,42,.4);
}
/* DARK MODE — Palette "Onyx Teal" (F297, 21 mai 2026)
 *
 * Inspirations : Linear (elevation subtile, bordures douces), Vercel Geist
 * (typographie sobre), Catppuccin Mocha (tons legerement teintes plutot que
 * gris pur). Adapte au brand teal Podialine.
 *
 * Principes design :
 *   1. Pas de noir pur (#0B0D11 avec nuance bleu-nuit pour coherence teal)
 *   2. Pas de blanc pur (#ECEDEE, evite eye strain)
 *   3. Surfaces par elevation progressive (+3-5% luminance par niveau)
 *   4. Bordures discretes (~9% luminance, juste visibles)
 *   5. Accent teal boost (#2DD4BF) plus vibrant qu en light pour pop sur dark
 *   6. Hierarchie texte sur 3 niveaux (tx > tx-soft > mu > mu2)
 */
[data-theme="dark"]{
  color-scheme:dark;
  --t:#2DD4BF;--tl:#0F2D2A;
  --bg:#0B0D11;--bg-soft:#13161B;
  --card:#181B21;--card-2:#1D2027;
  --tx:#ECEDEE;--tx-soft:#B1B3B8;
  --mu:#878A91;--mu2:#5E6168;
  --b:#2A2E37;--b2:#21242C;--b3:#1A1D24;
  --red:#F87171;--am:#FBBF24;--gr:#4ADE80;--bl:#7AA9FF;
  --red-bg:#2E1818;--red-tx:#FCA5A5;--red-bd:#7F2C2C;
  --am-bg:#2E2410;--am-tx:#FCD34D;--am-bd:#7A5A18;
  --gr-bg:#142A1A;--gr-tx:#86EFAC;--gr-bd:#1F5A33;
  --bl-bg:#172238;--bl-tx:#93C5FD;--bl-bd:#28427C;
  --rDot:#F87171;--oDot:#FBBF24;--gDot:#4ADE80;
  --hover:#222630;--input-bg:#13161B;
  --topbar-bg:#13161B;--sidebar-bg:#13161B;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 12px 36px rgba(0,0,0,.65);
  --modal-overlay:rgba(5,7,10,.75);
}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;background:var(--bg);color:var(--tx);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background-color .2s ease,color .2s ease}
/* TODO-CLEANUP: sélecteur multi-classes pour font-family — .av-n, .angle-n, .cal-month sont listées mais non définies dans le bloc 3/6. À vérifier dans les blocs 1-2 et 4-6, sinon classes mortes à retirer */
.brand,.ptitle,.ct,.sav-nm,.tpl-title,.fb-ct,.av-n,.angle-n,.okrt,.bx,.stab,.cal-month{font-family:'Inter',sans-serif;}
button{font-family:inherit}
input,textarea,select{font-family:inherit}

/* ===== THEME TOGGLE (F297, 21 mai 2026) ===== */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--b);background:var(--card);color:var(--tx);cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;font-family:inherit;height:34px;flex-shrink:0}
.theme-toggle:hover{border-color:var(--t);background:var(--hover)}
.theme-toggle i{font-size:16px;color:var(--t)}
.theme-toggle-lab{letter-spacing:.02em}
@media(max-width:1279px){.theme-toggle{padding:5px 10px;height:30px;font-size:11px}.theme-toggle i{font-size:14px}}

/* ===== DARK MODE — touches premium (scrollbars, selection, focus glow) ===== */
/* Scrollbar custom — Webkit (Chrome / Safari / Edge) en dark uniquement.
 * Subtle, ton sur ton, ne disturb pas la lecture. Largeur 10px (standard mac).
 */
[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A2E37;border-radius:8px;border:2px solid var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#383D47}
[data-theme="dark"] ::-webkit-scrollbar-corner{background:transparent}
/* Selection — pill teal subtle au lieu du bleu navigateur (qui jure sur dark) */
[data-theme="dark"] ::selection{background:rgba(45,212,191,.25);color:var(--tx)}
/* Focus glow teal sur inputs — remplace le ring bleu generique du browser */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus{outline:none;border-color:var(--t);box-shadow:0 0 0 3px rgba(45,212,191,.15)}
/* Sidebar : tres subtle gradient vertical pour ambient depth, masque l aspect "plate" */
[data-theme="dark"] .side{background:linear-gradient(180deg,#13161B 0%,#10131A 100%)}
/* Topbar : backdrop blur + opacity pour effet "glass" Linear-style.
 * Suppose que les elements sous la topbar peuvent scroll = effet de profondeur. */
[data-theme="dark"] .topbar{backdrop-filter:saturate(140%) blur(8px);background:rgba(19,22,27,.85)}
/* Cards : tres subtile inner border highlight (Linear-style) — donne du relief */
[data-theme="dark"] .card,
[data-theme="dark"] .met,
[data-theme="dark"] .csq{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),var(--shadow-sm)}
[data-theme="dark"] .met:hover,
[data-theme="dark"] .csq:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow-md)}

/* F297.7 (21 mai 2026) : en dark, neutraliser les border-left:Xpx solid #XXX
 * hardcoded (perf bars dashboard, alertes colorees, cards delivery settings).
 * Le user a demande "pas de code couleurs lies aux performance, vire le code
 * couleur". Le selecteur attribut cible les styles inline contenant un # dans
 * le border-left, donc seulement les hex hardcoded sont neutralises (les
 * border-left:var(--X) restent intacts). */
[data-theme="dark"] [style*="border-left:6px solid #"],
[data-theme="dark"] [style*="border-left:4px solid #"],
[data-theme="dark"] [style*="border-left:3px solid #"],
[data-theme="dark"] [style*="border-left:1.5px solid #"],
[data-theme="dark"] [style*="border-left: 6px solid #"],
[data-theme="dark"] [style*="border-left: 4px solid #"]{
  border-left-color:var(--b)!important;
  border-left-width:1px!important;
}

/* ===== DARK MODE — overrides cibles pour couleurs hardcoded residuelles ===== */
/* Ces overrides ciblent les patterns qui n ont pas pu etre refactorises en vars
   sans risque (palette V9.3 melangee, badges semantiques). Cleanup module-par-module
   prevu dans le commit suivant (F297.x). */
[data-theme="dark"] .tki-date{background:var(--card-2);color:var(--tx)}
[data-theme="dark"] .tki:hover{border-color:var(--mu2)}
[data-theme="dark"] .cal-nav button:hover{border-color:var(--mu2)}
[data-theme="dark"] .iconbtn.bd:hover{border-color:var(--mu2)}
[data-theme="dark"] .cal-day.muted{background:var(--bg-soft)}
[data-theme="dark"] .cal-day.muted .cal-dnum{color:var(--mu2)}
[data-theme="dark"] .av-status.offline{background:var(--mu2)}
[data-theme="dark"] .cal-evt.done{background:var(--mu2)}
/* Tints sur items avec dot couleur : assombrir pour rester lisibles en dark */
[data-theme="dark"] .tki.with-dot-r{background:rgba(248,113,113,.12)}
[data-theme="dark"] .tki.with-dot-o{background:rgba(251,191,36,.12)}
[data-theme="dark"] .tki.with-dot-g{background:rgba(74,222,128,.12)}
[data-theme="dark"] .bblock.with-dot-r{background:rgba(248,113,113,.12)}
[data-theme="dark"] .bblock.with-dot-o{background:rgba(251,191,36,.12)}
[data-theme="dark"] .bblock.with-dot-g{background:rgba(74,222,128,.12)}
[data-theme="dark"] .crea-row.tr-dot-r > td{background:rgba(248,113,113,.10)}
[data-theme="dark"] .crea-row.tr-dot-o > td{background:rgba(251,191,36,.10)}
[data-theme="dark"] .crea-row.tr-dot-g > td{background:rgba(74,222,128,.10)}
[data-theme="dark"] .dash-crea-row.tr-dot-r{background:rgba(248,113,113,.10)!important}
[data-theme="dark"] .dash-crea-row.tr-dot-o{background:rgba(251,191,36,.10)!important}
[data-theme="dark"] .dash-crea-row.tr-dot-g{background:rgba(74,222,128,.10)!important}
/* Login screen dark (F326, 27 mai 2026) : hierarchie 3 profondeurs claire
 * (wrap < lbox < inputs) + touche teal radial subtile en haut pour brand
 * depth, evite l effet "tout noir partout". Avant : wrap > lbox > inputs
 * (input plus sombre que la box = on voyait pas ou on tapait). */
[data-theme="dark"] .lwrap{
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(45,212,191,.10) 0%, transparent 70%),
    linear-gradient(180deg, #0D1016 0%, #060810 100%);
}
[data-theme="dark"] .lbox{
  background:#1A1E26;
  border:1px solid #2A2E37;
  box-shadow:0 24px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
}
/* IDs #le / #lp / #mfa-code / #mfa-recovery pour battre la specificite de la
 * regle globale "dark inputs" (qui a 5 :not + data-theme = 6 attrs, donc une
 * regle avec classes seule perd). */
[data-theme="dark"] #le,
[data-theme="dark"] #lp,
[data-theme="dark"] #mfa-code,
[data-theme="dark"] #mfa-recovery{
  background:#0E1116!important;
  border-color:#2A2E37!important;
}
/* Inputs / textareas / selects : forcer le fond dark sur TOUS les inputs en dark
 * mode (texte / email / search / number / etc.). !important necessaire car beaucoup
 * d inputs dans les modules JS ont des styles inline (style="...") qui battent les
 * regles CSS standard. Sans !important, on aurait des inputs blancs hardcoded. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select{background:var(--input-bg)!important;color:var(--tx)!important}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:var(--mu2)}
/* Borders : forcer var(--b) sauf si focus (gere par le glow teal plus haut) */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="range"]):not(:focus),
[data-theme="dark"] textarea:not(:focus),
[data-theme="dark"] select:not(:focus){border-color:var(--b)!important}