/* DA « Auguste Lumière » (version à plat, 26/10/2026) appliquée au Hub.
   Jetons repris d'auguste-front (app/styles/components/lumiere.css). Tout est
   scopé sous `.lum-hub` (classe du <body>) : une page qui ne la pose pas, comme
   le leadboard qui inclut pourtant la même topbar, ne change pas. */

.lum-hub {
    --lum-canvas: #f4f5fa;
    --lum-surface: #ffffff;
    --lum-surface-sunk: #eceef5;
    --lum-line: rgba(50, 50, 78, 0.1);
    --lum-line-strong: rgba(50, 50, 78, 0.28);
    --lum-ink: #32324e;
    --lum-ink-2: #55556f;
    --lum-ink-3: #6a6a84;
    --lum-ink-4: #9a9ab0;
    --lum-action: #32324e;
    --lum-action-hover: #45456a;
    --lum-signal: #1560d8;
    --lum-signal-soft: #e8f0fe;
    --lum-tally: #197a43;
    --lum-tally-soft: #e2f6ea;
    --lum-danger: #b83a35;
    --lum-danger-soft: #fdefee;
    --lum-warn-soft: #fdf1e6;
    --lum-warn-ink: #8a3a12;
    --lum-tile-sky: #e3eeff;
    --lum-tile-sky-ink: #1e5bc6;
    --lum-tile-rose: #fbe6ef;
    --lum-tile-rose-ink: #a4336a;
    --lum-tile-mint: #e2f6ea;
    --lum-tile-mint-ink: #1a6e3e;
    --lum-tile-peach: #fdebdd;
    --lum-tile-peach-ink: #9a4a17;
    /* Jetons pleins utilisés en repli des couleurs codées en dur des pages (codemod du 30/10) */
    --lum-ink-5: #b9bac9;
    --lum-line-solid: #e4e5ee;
    --lum-line-strong-solid: #c9cad8;
    --lum-signal-hover: #0f4fb8;
    --lum-tally-line: #b7e2c6;
    --lum-danger-line: #f3c9c6;
    --lum-warn: #c76a1c;
    --lum-warn-line: #f4d3b5;
    --lum-rose-ink: #a4336a;
    --lum-rose-line: #f1c7d9;
    --lum-sky-ink: #1e5bc6;
    --lum-sky-line: #bcd4fb;
    --lum-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --lum-font-text: 'Inter', system-ui, -apple-system, sans-serif;
    --lum-radius-xs: 6px;
    --lum-radius-lg: 12px;
    --lum-radius-xl: 14px;
    --lum-radius-control: 10px;
    --lum-radius-inset: calc(var(--lum-radius-control) - 4px);
    --lum-ring: inset 0 0 0 1px rgba(50, 50, 78, 0.1);
    --lum-ring-hover: inset 0 0 0 1px rgba(50, 50, 78, 0.18);
    --lum-shadow-pop: 0 0 0 1px rgba(50, 50, 78, 0.06), 0 2px 4px rgba(50, 50, 78, 0.04), 0 12px 32px -8px rgba(50, 50, 78, 0.12);
    --lum-shadow-float: 0 24px 60px -18px rgba(50, 50, 78, 0.35), 0 0 0 1px rgba(50, 50, 78, 0.06);
    background: var(--lum-canvas);
    color: var(--lum-ink);
    font-family: var(--lum-font-text);
    -webkit-font-smoothing: antialiased;
}

/* ── Topbar (page Lumière seulement) ── */
.lum-hub #unified-topbar, .lum-hub #unified-topbar *, .lum-hub #unified-submenu, .lum-hub #unified-submenu * { font-family: var(--lum-font-text); }
.lum-hub #unified-topbar { box-shadow: inset 0 -1px 0 var(--lum-line); background: var(--lum-surface); }
.lum-hub #main-nav .nav-link { height: 36px; padding: 0 12px; border-radius: var(--lum-radius-control); font-size: 14px; font-weight: 500; color: var(--lum-ink-3); }
.lum-hub #main-nav .nav-link:hover { color: var(--lum-ink); background: var(--lum-surface-sunk); }
.lum-hub .logo-todo { border-radius: var(--lum-radius-control); }
.lum-hub .logo-todo:hover, .lum-hub .logo-todo.active { background: var(--lum-surface-sunk); }
/* Pastille des todos : encre, jamais d'orange ni de bleu signal (règle des compteurs, 27/10) */
.lum-hub #todo-count-nav { background: var(--lum-action) !important; }

.lum-hub #nav-logo-link img { border-radius: 8px; }

/* ══ Couche générique : classes Tailwind / Bootstrap des pages → jetons Lumière ══
   Les couleurs codées en dur des gabarits passent déjà par var(--lum-…, #origine). */
.lum-hub { --lum-surface-hover: #f6f7fb; --lum-tally-hover: #146637; --lum-danger-hover: #9c2f2b; }

/* Titres : Inter Tight léger, pas de gras appuyé */
.lum-hub :is(h1, h1.font-bold, h1.font-semibold, h1.font-extrabold, h1.font-black) { font-family: var(--lum-font-display); font-weight: 400 !important; letter-spacing: -0.025em; color: var(--lum-ink); }
.lum-hub :is(h2, h2.font-bold, h2.font-semibold, h2.font-extrabold) { font-family: var(--lum-font-display); font-weight: 500; letter-spacing: -0.015em; }
.lum-hub :is(.font-bold, .font-extrabold, .font-black) { font-weight: 600; }
/* Sur-titres en petites capitales espacées : en phrase (retours de Flo, 26/10) */
.lum-hub .uppercase:is(.tracking-wide, .tracking-wider, .tracking-widest), .lum-hub th { text-transform: none; letter-spacing: 0; }
.lum-hub th { font-weight: 500; color: var(--lum-ink-3); }

/* Texte */
.lum-hub :is(.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800, .text-black, .hover\:text-gray-900:hover, .hover\:text-gray-800:hover) { color: var(--lum-ink); }
.lum-hub :is(.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600, .hover\:text-gray-700:hover, .hover\:text-gray-600:hover) { color: var(--lum-ink-2); }
.lum-hub :is(.text-gray-500, .text-slate-500, .hover\:text-gray-500:hover) { color: var(--lum-ink-3); }
.lum-hub :is(.text-gray-400, .text-slate-400) { color: var(--lum-ink-4); }
.lum-hub :is(.text-gray-300, .text-slate-300) { color: var(--lum-ink-5); }
.lum-hub :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-500, .text-indigo-600, .text-indigo-700, .hover\:text-blue-700:hover, .hover\:text-indigo-700:hover) { color: var(--lum-signal); }
.lum-hub :is(.text-green-600, .text-green-700, .text-green-800, .text-emerald-600, .text-emerald-700, .text-emerald-800) { color: var(--lum-tally); }
.lum-hub :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-rose-600) { color: var(--lum-danger); }
.lum-hub :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-orange-600, .text-orange-700, .text-yellow-700) { color: var(--lum-warn-ink); }
.lum-hub :is(.text-violet-600, .text-violet-700, .text-purple-600, .text-purple-700) { color: var(--lum-rose-ink); }
.lum-hub :is(.text-sky-600, .text-sky-700, .text-cyan-700) { color: var(--lum-sky-ink); }

/* Fonds */
.lum-hub :is(.bg-gray-50, .bg-slate-50) { background-color: var(--lum-canvas); }
.lum-hub :is(.bg-gray-100, .bg-slate-100) { background-color: var(--lum-surface-sunk); }
.lum-hub .bg-gray-200 { background-color: var(--lum-line-solid); }
.lum-hub .hover\:bg-gray-50:hover, .lum-hub .hover\:bg-slate-50:hover { background-color: var(--lum-surface-hover); }
.lum-hub .hover\:bg-gray-100:hover, .lum-hub .hover\:bg-gray-200:hover { background-color: var(--lum-surface-sunk); }
.lum-hub :is(.bg-blue-600, .bg-blue-500, .bg-indigo-600, .bg-indigo-500, .bg-gray-900, .bg-gray-800, .bg-slate-900, .bg-slate-800, .btn-primary, .btn-dark) { background-color: var(--lum-action); border-color: var(--lum-action); }
.lum-hub :is(.hover\:bg-blue-700, .hover\:bg-indigo-700, .hover\:bg-gray-800, .hover\:bg-gray-700, .hover\:bg-slate-800, .btn-primary, .btn-dark):hover { background-color: var(--lum-action-hover); border-color: var(--lum-action-hover); }
.lum-hub :is(.bg-blue-50, .bg-indigo-50, .bg-blue-100, .bg-indigo-100, .hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover, .hover\:bg-indigo-50:hover) { background-color: var(--lum-signal-soft); }
.lum-hub :is(.bg-green-600, .bg-green-500, .bg-emerald-600, .bg-emerald-500, .btn-success) { background-color: var(--lum-tally); border-color: var(--lum-tally); }
.lum-hub :is(.hover\:bg-green-700, .hover\:bg-emerald-700, .hover\:bg-emerald-600, .btn-success):hover { background-color: var(--lum-tally-hover); }
.lum-hub :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100) { background-color: var(--lum-tally-soft); }
.lum-hub :is(.bg-red-600, .bg-red-500, .btn-danger) { background-color: var(--lum-danger); border-color: var(--lum-danger); }
.lum-hub :is(.hover\:bg-red-700, .hover\:bg-red-600, .btn-danger):hover { background-color: var(--lum-danger-hover); }
.lum-hub :is(.bg-red-50, .bg-red-100, .hover\:bg-red-50:hover) { background-color: var(--lum-danger-soft); }
.lum-hub :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-orange-50) { background-color: var(--lum-warn-soft); }
.lum-hub :is(.bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100) { background-color: var(--lum-tile-rose); }
.lum-hub :is(.bg-sky-50, .bg-sky-100, .bg-cyan-50) { background-color: var(--lum-tile-sky); }

/* Filets */
.lum-hub :is(.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .divide-gray-100 > * + *, .divide-gray-200 > * + *) { border-color: var(--lum-line-solid); }
.lum-hub :is(.border-gray-300, .border-slate-300, .hover\:border-gray-300:hover) { border-color: var(--lum-line-strong-solid); }
.lum-hub :is(.border-blue-200, .border-indigo-200, .border-blue-300, .border-indigo-300, .hover\:border-indigo-200:hover, .hover\:border-blue-300:hover) { border-color: var(--lum-line-strong-solid); }
.lum-hub :is(.border-green-200, .border-emerald-200) { border-color: var(--lum-tally-line); }
.lum-hub :is(.border-red-200, .border-red-300) { border-color: var(--lum-danger-line); }
.lum-hub :is(.border-amber-200, .border-amber-300, .border-yellow-200) { border-color: var(--lum-warn-line); }
.lum-hub :is(.border-violet-200, .border-purple-200) { border-color: var(--lum-rose-line); }

/* Arrondis : échelle 6 / 8 / 10 / 12 / 14 (retour de Maxime du 24/10) */
.lum-hub .rounded-lg { border-radius: var(--lum-radius-control); }
.lum-hub :is(.rounded-2xl, .rounded-3xl) { border-radius: var(--lum-radius-xl); }
/* Pas de pilule sur ce qui se clique et porte du texte (règle du 25/10) */
.lum-hub :is(button, a, label).rounded-full[class*="px-"] { border-radius: var(--lum-radius-control); }

/* Ombres : à plat, un filet ; seuls les calques flottants gardent une ombre */
.lum-hub :is(.shadow, .shadow-sm, .shadow-md):not(.absolute):not(.fixed) { box-shadow: var(--lum-ring); }
.lum-hub :is(.shadow-lg, .shadow-xl, .shadow-2xl):is(.absolute, .fixed, [role="menu"], [role="dialog"]) { box-shadow: var(--lum-shadow-pop); }

/* Champs : rayon contrôle, focus encre */
.lum-hub :is(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], input[type="password"], select, textarea, .form-control, .form-select) { border-radius: var(--lum-radius-control); }
.lum-hub :is(input, select, textarea, .form-control, .form-select):focus-visible { outline: none; border-color: var(--lum-ink-3); box-shadow: 0 0 0 3px rgba(50, 50, 78, 0.1); }
.lum-hub :is(.btn, .btn-sm) { border-radius: var(--lum-radius-control); box-shadow: none; }
.lum-hub .form-check-input:checked, .lum-hub input[type="checkbox"]:not([class*="appearance"]) { accent-color: var(--lum-ink); }
.lum-hub ::selection { background: rgba(21, 96, 216, 0.16); }

/* ══ Variables propres à certaines pages, rebranchées sur les jetons ══ */
/* Inbox (_shell.html) : le vert d'accent devient l'encre d'action */
.lum-hub { --aug: var(--lum-action); --aug-soft: var(--lum-surface-sunk); --aug-text: var(--lum-ink); }
/* Support, Nouveautés (palette façon Apple) */
.lum-hub { --ink: var(--lum-ink); --ink2: var(--lum-ink-3); --ink3: var(--lum-ink-4); --line: var(--lum-line-solid); --fill: var(--lum-surface-sunk);
    --accent: var(--lum-action); --accent-ink: var(--lum-ink); --accent-soft: var(--lum-surface-sunk); --bad: var(--lum-danger); --warn: var(--lum-warn-ink); }
.lum-hub { --ok: var(--lum-tally); }
/* Live : mur sombre, passé au bleu nuit de Lumière (thème Studio) */
.lum-hub:has(.live-shell) { --bg: #181825; --panel: #22223a; --line: #303050; --text: #ececf4; --muted: #9a9ab0; background: var(--bg); color: var(--text); }
/* Fond sous des pages plus courtes que la fenêtre */
html:has(> body.lum-hub) { background: #f4f5fa; }
html:has(> body.lum-hub .live-shell) { background: #181825; }
.lum-hub:has(.live-shell) #unified-topbar { color: var(--lum-ink); }
/* Sur-titres : en phrase, sans espacement (les pages gardent leur valeur hors Lumière) */
.lum-hub { --lum-label-transform: none; --lum-label-tracking: 0; }
/* Boutons violets, roses ou en dégradé (Tailwind) : aplat d'encre */
.lum-hub :is(.bg-purple-500, .bg-purple-600, .bg-violet-500, .bg-violet-600, .bg-fuchsia-500, .bg-fuchsia-600, .bg-pink-500, .bg-pink-600, .bg-teal-500, .bg-teal-600, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-sky-600) { background-color: var(--lum-action); }
.lum-hub :is(.hover\:bg-purple-700, .hover\:bg-violet-700, .hover\:bg-fuchsia-700, .hover\:bg-pink-700, .hover\:bg-teal-700, .hover\:bg-cyan-700, .hover\:bg-sky-700):hover { background-color: var(--lum-action-hover); }
.lum-hub :is(button, a)[class*="bg-gradient-to-"] { background-image: none; background-color: var(--lum-action); }
.lum-hub :is(button, a)[class*="bg-gradient-to-"]:hover { background-color: var(--lum-action-hover); }
/* Boutons verts pleins à texte blanc (Tailwind) : aplat d'encre, comme toutes les actions */
.lum-hub :is(button, a, input[type="submit"]):is([class*="bg-green-"], [class*="bg-emerald-"]).text-white { background-color: var(--lum-action); border-color: var(--lum-action); }
.lum-hub :is(button, a, input[type="submit"]):is([class*="bg-green-"], [class*="bg-emerald-"]).text-white:hover { background-color: var(--lum-action-hover); }
.lum-hub .btn-success { background-color: var(--lum-action); border-color: var(--lum-action); }
.lum-hub .btn-success:hover { background-color: var(--lum-action-hover); border-color: var(--lum-action-hover); }