/* ==========================================================================
   Chronos — thème « Chronomètre »
   Instrument de mesure du temps : rail encre, accent laiton (sable du sablier),
   fond papier, chiffres tabulaires pour les durées. Couche posée sur Bootstrap.
   ========================================================================== */

:root {
    --ink: #1b2436;
    --ink-2: #232f47;
    --brass: #d98a2b;
    --brass-strong: #b9721a;
    --paper: #f5f6f8;
    --surface: #ffffff;
    --line: #e7e9ee;
    --text: #1f2733;
    --text-muted: #6b7684;

    /* --- Echelle de neutres et de lavis (v2.167.0) -------------------------------------
       Chaque jeton porte EXACTEMENT la valeur qui etait ecrite en dur avant : le mode clair
       ne bouge donc pas d'un pixel, et seule la palette Nuit les redefinit. Les fusionner en
       quelques jetons « assez proches » avait modifie le mode clair jusqu'a 59/255 sur les
       encadres d'alerte -- mesure sur captures, puis repris. */
    --n-900: #1b2436;   /* texte appuye (distinct de --ink, qui est une SURFACE foncee) */
    /* Contre-jeton de l'accent : ce qui s'ecrit SUR lui. En clair l'accent est fonce, donc
       du blanc ; en sombre il est CLAIR, donc de l'encre. Poser un jeton de surface sans son
       pendant prepare un texte illisible (lecon v2.146.0). */
    --on-accent: #ffffff;
    --n-700: #334155;
    --n-650: #475569;
    --n-620: #45505f;
    --n-600: #55606e;
    --n-580: #4b5563;
    --n-550: #6b7280;
    --n-500: #8a94a3;
    --n-480: #94a3b8;
    --n-450: #97a1af;
    --n-200: #e5e7eb;   /* filets */
    --n-190: #e7e9ee;
    --n-150: #f0f1f4;
    --n-140: #eef1f5;
    --n-100: #f5f7f9;   /* surfaces creuses */
    --n-90: #f7f8fa;
    --n-80: #f8fafb;
    --n-70: #fafbfc;
    --n-60: #fbfbfc;
    --n-50: #fbfdfb;

    /* Lavis : la TEINTE porte le sens et ne change jamais ; seule la clarte suit le theme. */
    --w-danger-50: #fffafa;
    --w-danger-100: #fef2f2;
    --w-danger-150: #fdecea;
    --w-danger-200: #fee2e2;
    --w-danger-300: #fecaca;
    --w-danger-700: #b91c1c;
    --w-danger-900: #7f1d1d;
    --w-warn-50: #fffbeb;
    --w-warn-60: #fff7ed;
    --w-warn-70: #fef8e7;
    --w-warn-100: #fbf1e2;
    --w-warn-150: #fef3c7;
    --w-warn-160: #ffedd5;
    --w-warn-300: #fde68a;
    --w-warn-310: #fed7aa;
    --w-warn-700: #b45309;
    --w-warn-800: #9a3412;
    --w-warn-850: #92400e;
    --w-warn-900: #7c4a0f;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow: 0 6px 24px rgba(16, 24, 40, .08);
    /* Hauteur commune des barres du haut (barre principale ET bloc « CHRONOS » de la sidebar) :
       source de vérité unique pour garantir l'alignement de leurs lignes de séparation. */
    --topbar-height: 3.5rem;

    /* --- Rail de navigation (sidebar) --- */
    --rail-bg: #1b2436;
    --rail-bg-2: #141b29;
    --rail-text: #d7dee9;
    --rail-text-strong: #ffffff;
    --rail-active-bg: rgba(217, 138, 43, .24);
    --rail-hover-bg: rgba(255, 255, 255, .06);

    /* --- Barre du haut --- */
    --topbar-bg: rgba(255, 255, 255, .9);

    /* Marque du rail : distincte de --rail-text, elle doit rester lisible sur un rail
       CLAIR comme sur un rail sombre (defaut trouve en capture sur Prisme). */
    --brand-fg: #ffffff;
    --brand-sub: #9aa6bd;
    --brand-mark-from: #e0a54a;
    --brand-mark-to: #c2761c;
    --brand-mark-fg: #1b2436;

    /* Remplissage des jauges et barres de progression : c'est l'accent de la section
       qui doit les colorer, sinon une palette n'atteint jamais le coeur des ecrans. */
    --gauge-fill: #d98a2b;
    --gauge-fill-strong: #c2761c;

    /* --- Fond d'écran commun (base + deux halos + trame de points) --- */
    --page-bg: color-mix(in srgb, #1f6f7a 28%, #ffffff);
    --page-halo-1: color-mix(in srgb, #1f6f7a 42%, transparent);
    --page-halo-2: color-mix(in srgb, #d98a2b 26%, transparent);
    --page-dots: rgba(27, 36, 54, .05);

    /* --- Pastilles de statut : chaque état a son couple (texte, fond) --- */
    --st-draft-fg: #64748b;      --st-draft-bg: #eef1f5;
    --st-submitted-fg: #b45309;  --st-submitted-bg: #fef3c7;
    --st-approved-fg: #15803d;   --st-approved-bg: #dcfce7;
    --st-locked-fg: #4338ca;     --st-locked-bg: #e5e9ff;
    --st-rejected-fg: #b91c1c;   --st-rejected-bg: #fee2e2;
}

/* ===========================================================================
   APPARENCE — deux axes indépendants, posés sur <html> par js/appearance.js.
   « data-palette » ne touche qu'à la couleur, « data-density » qu'au rythme.
   Une palette est donc une simple redéfinition de jetons : aucun écran n'est
   réécrit, et les deux axes se combinent librement.
   =========================================================================== */

/* --- Palette : Contraste renforcé (texte atténué 7,56:1, accent 6,26:1) --- */
[data-palette="contraste"] {
    --brand-fg: #f8fafc;
    --brand-mark-from: #f0a53f;
    --brand-mark-to: #b9721a;
    --gauge-fill: #b9721a;
    --gauge-fill-strong: #8a5410;
    --brass: #8a5410;
    --brass-strong: #6f430c;
    --paper: #eef1f5;
    --line: #c3cad4;
    --text: #111827;
    --text-muted: #4b5563;
    --rail-bg: #111827;
    --rail-bg-2: #0b101c;
    --rail-text: #e5e7eb;
    --rail-active-bg: rgba(240, 165, 63, .28);
    --topbar-bg: #ffffff;
    /* Sobre par vocation, mais pas terne : un fond franchement bleute plutot qu'un gris. */
    --page-bg: #dfe6f0;
    --page-halo-1: rgba(17, 24, 39, .10);
    --page-halo-2: rgba(138, 84, 16, .10);
    --page-dots: rgba(17, 24, 39, .06);
    --shadow: 0 2px 10px rgba(16, 24, 40, .10);
    --st-draft-fg: #374151;      --st-draft-bg: #e5e7eb;
    --st-submitted-fg: #92400e;  --st-submitted-bg: #fef3c7;
    --st-approved-fg: #14532d;   --st-approved-bg: #dcfce7;
    --st-locked-fg: #3730a3;     --st-locked-bg: #e0e7ff;
    --st-rejected-fg: #991b1b;   --st-rejected-bg: #fee2e2;
}

/* --- Palette : Sobre (aucune couleur de section ; seuls les statuts restent colorés) --- */
[data-palette="sobre"] {
    --brand-mark-from: #6b7684;
    --brand-mark-to: #2b3340;
    --brand-mark-fg: #ffffff;
    --gauge-fill: #4a5566;
    --gauge-fill-strong: #2b3340;
    --brass: #2b3340;
    --brass-strong: #1f2733;
    --paper: #f1f2f4;
    --line: #dfe2e7;
    --text-muted: #5a6472;
    --rail-bg: #2b3340;
    --rail-bg-2: #232a35;
    --rail-active-bg: rgba(255, 255, 255, .16);
    --topbar-bg: #ffffff;
    /* Neutre assume : un gris-bleu tenu, avec juste assez de relief pour ne pas etre plat. */
    --page-bg: #e3e6eb;
    --page-halo-1: rgba(43, 51, 64, .10);
    --page-halo-2: rgba(43, 51, 64, .07);
    --page-dots: rgba(27, 36, 54, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

/* --- Palette : Daltonien (teintes discernables en deutéranopie : plus de rouge contre vert) --- */
[data-palette="daltonien"] {
    --brass: #1d4ed8;
    --brass-strong: #1e40af;
    --line: #d4dbe6;
    --text: #1b2432;
    --text-muted: #545f70;
    --rail-bg: #17202e;
    --rail-bg-2: #101825;
    --rail-active-bg: rgba(59, 130, 246, .30);
    --page-bg: #d7e2f5;
    --page-halo-1: rgba(29, 78, 216, .30);
    --page-halo-2: rgba(91, 33, 182, .26);
    --brand-mark-from: #60a5fa;
    --brand-mark-to: #1d4ed8;
    --brand-mark-fg: #0b1b3d;
    --gauge-fill: #1d4ed8;
    --gauge-fill-strong: #1e40af;
    --st-draft-fg: #475569;      --st-draft-bg: #e8edf3;
    --st-submitted-fg: #5b21b6;  --st-submitted-bg: #ede9fe;
    --st-approved-fg: #1d4ed8;   --st-approved-bg: #dbeafe;
    --st-locked-fg: #334155;     --st-locked-bg: #e2e8f0;
    --st-rejected-fg: #9a3412;   --st-rejected-bg: #ffedd5;
}

/* --- Palette : Prisme (couleurs claires, seul rail clair de la famille) ---
   Règle de cette palette : le VIF remplit, sa JUMELLE FONCÉE écrit. Une teinte
   claire ne passe pas la norme de contraste en texte (orange vif : 2,15:1). */
[data-palette="prisme"] {
    --brass: #1d4ed8;
    --brass-strong: #1e40af;
    --paper: #f2f7fb;
    --line: #e2e8f0;
    --text: #1e293b;
    --text-muted: #5a6472;
    --rail-bg: #ffffff;
    --rail-bg-2: #eef2ff;
    --rail-text: #334155;
    --rail-text-strong: #0f172a;
    --rail-active-bg: #dbeafe;
    --rail-hover-bg: rgba(30, 41, 59, .06);
    --topbar-bg: rgba(255, 255, 255, .86);
    /* Le fond EST la palette : trois halos francs sur une base bleu-lavande, pas un blanc
       cassé avec un soupçon de couleur. C'est ce qui manquait a la premiere livraison. */
    --page-bg: #e4e9ff;
    --page-halo-1: rgba(139, 92, 246, .42);
    --page-halo-2: rgba(34, 211, 238, .34);
    --page-dots: rgba(30, 41, 59, .05);
    --radius: 14px;
    --shadow: 0 10px 30px rgba(79, 70, 229, .16);
    --shadow-sm: 0 2px 6px rgba(79, 70, 229, .10);
    /* La marque doit rester lisible sur un rail clair : encre, pas blanc. */
    --brand-fg: #0f172a;
    --brand-sub: #64748b;
    --brand-mark-from: #8b5cf6;
    --brand-mark-to: #3b82f6;
    --brand-mark-fg: #ffffff;
    --gauge-fill: #3b82f6;
    --gauge-fill-strong: #1d4ed8;
    --st-submitted-fg: #9a3412;  --st-submitted-bg: #ffedd5;
}

/* --- Palette : Papier (ni halo ni ombre, filets francs : sobriété et impression) --- */
/* --- Nuit : le theme sombre ---------------------------------------------------------------
   Rendu possible par la mise en jetons des CSS scopes : tant que les ecrans ecrivaient leurs
   blancs et leurs gris en dur, aucune palette sombre ne pouvait les atteindre -- on obtenait
   des cartes blanches dans une application noire.

   Quatre regles ont guide les valeurs :
   1. Aucun noir pur : le fond est un bleu-gris tres sombre. Le noir absolu sur un ecran
      lumineux fatigue et fait baver le texte clair.
   2. Les surfaces s'ECLAIRCISSENT avec l'elevation (fond < carte < zone creuse), a l'inverse
      du mode clair. C'est ainsi qu'on lit la profondeur sans ombre -- une ombre portee ne se
      voit pas sur fond sombre.
   3. Le texte ne monte pas au blanc pur (#f2f5f9) : trop de contraste produit un halo
      desagreable a la lecture prolongee.
   4. Les teintes SEMANTIQUES gardent leur sens et changent seulement de clarte : un rouge
      reste rouge, sinon l'ambre d'alerte deviendrait decoratif.
   Verifie par balayage de contraste sur les onze ecrans (dark-contrast.spec.ts). */
[data-palette="nuit"] {
    --paper: #131720;
    --surface: #1b212d;
    --line: #333c4d;
    --text: #f2f5f9;
    --text-muted: #a8b3c4;

    /* --ink reste SOMBRE : c'est une surface (boutons pleins, vitrine de connexion), pas du
       texte. La flipper peindrait des boutons clairs a texte clair. */
    --ink: #0f131b;
    --ink-2: #0a0d14;

    /* L'echelle de neutres s'inverse : le 900 (texte le plus appuye) devient le plus clair. */
    --n-900: #ffffff;
    --n-700: #dbe3ee;
    --n-650: #ccd6e4;
    --n-620: #c3ccd9;
    --n-600: #b4bfce;
    --n-580: #aab5c5;
    --n-550: #9fabbb;
    --n-500: #8e99ab;
    --n-480: #8693a6;
    --n-450: #7e8b9e;
    --n-200: #333c4d;
    --n-190: #2f3848;
    --n-150: #2a3242;
    --n-140: #262e3c;
    --n-100: #222937;
    --n-90: #1f2634;
    --n-80: #1e2531;
    --n-70: #1c232f;
    --n-60: #1b212d;
    --n-50: #1a202b;

    /* Memes teintes, sourdes : un encadre d'alerte doit se voir sans eblouir. */
    --w-danger-50: #241a1c;
    --w-danger-100: #2a1a1c;
    --w-danger-150: #33201f;
    --w-danger-200: #3d2020;
    --w-danger-300: #4d2626;
    --w-danger-700: #f08a8a;
    --w-danger-900: #f3b4b4;
    --w-warn-50: #241f14;
    --w-warn-60: #262015;
    --w-warn-70: #2a2316;
    --w-warn-100: #2e2617;
    --w-warn-150: #3d3018;
    --w-warn-160: #40331a;
    --w-warn-300: #6b5320;
    --w-warn-310: #6f5622;
    --w-warn-700: #f0bd6b;
    --w-warn-800: #f0a94b;
    --w-warn-850: #f2c880;
    --w-warn-900: #f5d49b;

    /* L'accent doit rester lisible SUR le fond sombre : le laiton d'origine y tombe a 2,6:1. */
    --brass: #f0a94b;
    --brass-strong: #e89b34;
    --on-accent: #131720;

    --rail-bg: #0f131b;
    --rail-bg-2: #0a0d14;
    --rail-text: #c8d2e0;
    --rail-text-strong: #ffffff;
    --rail-active-bg: rgba(240, 169, 75, .22);
    --rail-hover-bg: rgba(255, 255, 255, .07);
    --topbar-bg: rgba(27, 33, 45, .92);

    --brand-fg: #ffffff;
    --brand-sub: #8e99ab;
    --brand-mark-from: #f0a94b;
    --brand-mark-to: #c2761c;
    --brand-mark-fg: #131720;

    --gauge-fill: #f0a94b;
    --gauge-fill-strong: #e89b34;

    /* Halos tres discrets : sur fond sombre, un halo marque se lit comme une salissure. */
    --page-bg: #131720;
    --page-halo-1: rgba(31, 111, 122, .20);
    --page-halo-2: rgba(240, 169, 75, .10);
    --page-dots: rgba(255, 255, 255, .03);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 8px 28px rgba(0, 0, 0, .45);

    --st-draft-fg: #c3ccd9;      --st-draft-bg: #2b3444;
    --st-submitted-fg: #f0bd6b;  --st-submitted-bg: #3d3018;
    --st-approved-fg: #86d29a;   --st-approved-bg: #1d3526;
    --st-locked-fg: #b0a8e0;     --st-locked-bg: #2a2740;
    --st-rejected-fg: #f0a0a0;   --st-rejected-bg: #3d2020;
}

/* Bootstrap porte ses PROPRES variables, sans rapport avec les jetons de Chronos : sans ce
   bloc, cartes, tableaux et champs restent blancs au milieu d'une application sombre. */
[data-palette="nuit"] {
    --bs-body-bg: #131720;
    --bs-body-color: #f2f5f9;
    --bs-body-color-rgb: 242, 245, 249;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(242, 245, 249, .70);
    --bs-secondary-bg: #222937;
    --bs-tertiary-color: rgba(242, 245, 249, .55);
    --bs-tertiary-bg: #1b212d;
    --bs-border-color: #333c4d;
    --bs-border-color-translucent: rgba(255, 255, 255, .13);
    --bs-heading-color: #f2f5f9;
    --bs-link-color: #f0a94b;
    --bs-link-hover-color: #f6c483;
}

[data-palette="nuit"] .card {
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--text);
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--n-100);
    --bs-card-cap-color: var(--text);
}

[data-palette="nuit"] .table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
}

[data-palette="nuit"] .form-control,
[data-palette="nuit"] .form-select {
    background-color: var(--n-100);
    border-color: var(--line);
    color: var(--text);
}

    [data-palette="nuit"] .form-control::placeholder { color: var(--n-450); }

    /* Le calendrier natif des champs de date est dessine en noir par le navigateur : sans
       cela, l'icone disparait sur fond sombre. */
    [data-palette="nuit"] .form-control[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(.7);
    }

[data-palette="nuit"] .alert-success { background: #1d3526; border-color: #2f5a3e; color: #a7e0b8; }
[data-palette="nuit"] .alert-danger  { background: #3d2020; border-color: #6b3030; color: #f3b4b4; }
[data-palette="nuit"] .alert-info    { background: #17323a; border-color: #2a5a68; color: #a9dbe8; }
[data-palette="nuit"] .alert-warning { background: #3d3018; border-color: #6b5320; color: #f2c880; }

[data-palette="nuit"] .text-muted { color: var(--text-muted) !important; }
[data-palette="nuit"] .badge.bg-secondary { background-color: var(--n-150) !important; color: var(--text); }
[data-palette="nuit"] .modal-content,
[data-palette="nuit"] .dropdown-menu { background: var(--surface); color: var(--text); border-color: var(--line); }
[data-palette="nuit"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--line); }
[data-palette="nuit"] .btn-outline-secondary:hover { background: var(--n-150); color: var(--text); }

/* Le rouge et le vert de Bootstrap sont calibres pour du texte sur fond CLAIR : sur fond sombre
   ils tombent sous le seuil. On remonte leur luminosite sans changer leur teinte, donc sans
   toucher a leur sens. */
[data-palette="nuit"] .btn-outline-danger {
    --bs-btn-color: #f08a8a; --bs-btn-border-color: #8a3a3a;
    --bs-btn-hover-bg: #5a2626; --bs-btn-hover-border-color: #a04a4a;
    --bs-btn-disabled-color: #9a6a6a; --bs-btn-disabled-border-color: #5a3a3a;
}

[data-palette="nuit"] .btn-outline-success {
    --bs-btn-color: #86d29a; --bs-btn-border-color: #3a6b48;
    --bs-btn-hover-bg: #23422f; --bs-btn-hover-border-color: #4a8a5e;
}

/* Bootstrap peint <code> en rose fixe (#d63384) : illisible sur un fond d'alerte sombre.
   Dans un encadre, le code doit suivre la couleur du texte qui l'entoure. */
[data-palette="nuit"] code { color: inherit; }

[data-palette="nuit"] .text-danger { color: #f08a8a !important; }
[data-palette="nuit"] .text-success { color: #86d29a !important; }

[data-palette="papier"] {
    --brand-mark-from: #4a525d;
    --brand-mark-to: #1a1d23;
    --brand-mark-fg: #ffffff;
    --gauge-fill: #4a525d;
    --gauge-fill-strong: #1a1d23;
    --brass: #6b4f2a;
    --brass-strong: #4a3519;
    --paper: #f3ece0;
    --surface: #fffdf8;
    --line: #d8cdb9;
    --text: #23201b;
    --text-muted: #6b6155;
    --rail-bg: #332f28;
    --rail-bg-2: #262319;
    --rail-text: #ded6c6;
    --rail-active-bg: rgba(214, 178, 106, .26);
    --rail-hover-bg: rgba(255, 255, 255, .07);
    --topbar-bg: #fffdf8;
    /* Ivoire, avec un lavis chaud a peine perceptible : de l'encre sur du papier, pas
       une page blanche d'imprimante. Toujours aucune ombre : elle reste imprimable. */
    --page-bg: #f3ece0;
    --page-halo-1: rgba(180, 150, 100, .22);
    --page-halo-2: rgba(120, 100, 70, .12);
    --page-dots: transparent;
    --radius: 3px;
    --shadow: none;
    --shadow-sm: none;
    --brand-mark-from: #c9a227;
    --brand-mark-to: #6b4f2a;
    --brand-mark-fg: #fffdf8;
    --brand-sub: #a89a85;
    --gauge-fill: #8a6d3b;
    --gauge-fill-strong: #4a3519;
    --st-draft-fg: #5c5448;      --st-draft-bg: #ece4d6;
    --st-submitted-fg: #8a5a12;  --st-submitted-bg: #f7e8cd;
    --st-approved-fg: #3f6b35;   --st-approved-bg: #e3edda;
    --st-locked-fg: #4a4467;     --st-locked-bg: #e6e3ef;
    --st-rejected-fg: #8f3232;   --st-rejected-bg: #f4dede;
}


/* --- Palette : Bleu foncé — une seule famille (#44546A), en aplats ---
   Aucun dégradé, aucun halo, aucune transparence : chaque surface est un aplat,
   chaque nuance est calculée depuis #44546A seul. */
[data-palette="bleu-fonce"] {
    --rail-bg: #1f2630;
    --rail-bg-2: #1f2630;
    --rail-text: #eceef0;
    --rail-text-strong: #ffffff;
    --rail-active-bg: #333f50;
    --rail-hover-bg: #293240;
    --brand-fg: #ffffff;
    --brand-sub: #eceef0;
    --brand-mark-from: #44546A;
    --brand-mark-to: #44546A;
    --brand-mark-fg: #ffffff;
    --topbar-bg: #ffffff;
    --paper: #c3c8cf;
    --surface: #ffffff;
    --line: #7c8797;
    --text: #181d25;
    --text-muted: #181d25;
    --brass: #181d25;
    --brass-strong: #222a35;
    --page-bg: #c3c8cf;
    --page-halo-1: transparent;
    --page-halo-2: transparent;
    --page-dots: transparent;
    --shadow: none;
    --shadow-sm: none;
    --gauge-fill: #44546A;
    --gauge-fill-strong: #333f50;
    --st-draft-fg: #181d25;     --st-draft-bg: #e5e7ea;
    --st-submitted-fg: #181d25;     --st-submitted-bg: #ced3d8;
    --st-approved-fg: #181d25;     --st-approved-bg: #b8bec6;
    --st-locked-fg: #181d25;     --st-locked-bg: #a2aab5;
    --st-rejected-fg: #181d25;     --st-rejected-bg: #8b95a3;
}
[data-palette="bleu-fonce"] .content.sec-home { --accent: #1b222a; --accent-soft: #dbdcdd; }
[data-palette="bleu-fonce"] .content.sec-timesheets { --accent: #222a35; --accent-soft: #dcdddf; }
[data-palette="bleu-fonce"] .content.sec-approvals { --accent: #27313d; --accent-soft: #dcdee0; }
[data-palette="bleu-fonce"] .content.sec-projects { --accent: #2d3746; --accent-soft: #dddfe1; }
[data-palette="bleu-fonce"] .content.sec-clients { --accent: #313c4c; --accent-soft: #dee0e2; }
[data-palette="bleu-fonce"] .content.sec-users { --accent: #354253; --accent-soft: #dfe1e3; }
[data-palette="bleu-fonce"] .content.sec-reports { --accent: #394759; --accent-soft: #dfe2e4; }
[data-palette="bleu-fonce"] .content.sec-tasks { --accent: #3d4c5f; --accent-soft: #e0e2e5; }
[data-palette="bleu-fonce"] .content.sec-groups { --accent: #415065; --accent-soft: #e1e3e6; }
[data-palette="bleu-fonce"] .content.sec-absences { --accent: #44546A; --accent-soft: #e1e4e7; }
[data-palette="bleu-fonce"] .content.sec-lock { --accent: #171d24; --accent-soft: #dadbdc; }

/* --- Palette : Prune — une seule famille (#8E4585), en aplats ---
   Aucun dégradé, aucun halo, aucune transparence : chaque surface est un aplat,
   chaque nuance est calculée depuis #8E4585 seul. */
[data-palette="prune"] {
    --rail-bg: #401f3c;
    --rail-bg-2: #401f3c;
    --rail-text: #f4ecf3;
    --rail-text-strong: #ffffff;
    --rail-active-bg: #6b3464;
    --rail-hover-bg: #552950;
    --brand-fg: #ffffff;
    --brand-sub: #f4ecf3;
    --brand-mark-from: #8E4585;
    --brand-mark-to: #8E4585;
    --brand-mark-fg: #ffffff;
    --topbar-bg: #ffffff;
    --paper: #dbc3d8;
    --surface: #ffffff;
    --line: #b07daa;
    --text: #32182f;
    --text-muted: #32182f;
    --brass: #32182f;
    --brass-strong: #472343;
    --page-bg: #dbc3d8;
    --page-halo-1: transparent;
    --page-halo-2: transparent;
    --page-dots: transparent;
    --shadow: none;
    --shadow-sm: none;
    --gauge-fill: #8E4585;
    --gauge-fill-strong: #6b3464;
    --st-draft-fg: #32182f;     --st-draft-bg: #efe5ee;
    --st-submitted-fg: #32182f;     --st-submitted-bg: #e2cfdf;
    --st-approved-fg: #32182f;     --st-approved-bg: #d4b8d1;
    --st-locked-fg: #32182f;     --st-locked-bg: #c7a2c2;
    --st-rejected-fg: #32182f;     --st-rejected-bg: #b98cb3;
}
[data-palette="prune"] .content.sec-home { --accent: #391c35; --accent-soft: #dfdbdf; }
[data-palette="prune"] .content.sec-timesheets { --accent: #472343; --accent-soft: #e2dce1; }
[data-palette="prune"] .content.sec-approvals { --accent: #52284d; --accent-soft: #e3dde3; }
[data-palette="prune"] .content.sec-projects { --accent: #5e2e58; --accent-soft: #e5dee4; }
[data-palette="prune"] .content.sec-clients { --accent: #663260; --accent-soft: #e7dee6; }
[data-palette="prune"] .content.sec-users { --accent: #6f3668; --accent-soft: #e8dfe7; }
[data-palette="prune"] .content.sec-reports { --accent: #773a70; --accent-soft: #e9dfe8; }
[data-palette="prune"] .content.sec-tasks { --accent: #803e78; --accent-soft: #ebe0e9; }
[data-palette="prune"] .content.sec-groups { --accent: #87427e; --accent-soft: #ece1ea; }
[data-palette="prune"] .content.sec-absences { --accent: #8E4585; --accent-soft: #ede1eb; }
[data-palette="prune"] .content.sec-lock { --accent: #30172d; --accent-soft: #dedadd; }

/* --- Palette : Vert — une seule famille (#70AD47), en aplats ---
   Aucun dégradé, aucun halo, aucune transparence : chaque surface est un aplat,
   chaque nuance est calculée depuis #70AD47 seul. */
[data-palette="vert"] {
    --rail-bg: #324e20;
    --rail-bg-2: #324e20;
    --rail-text: #f1f7ed;
    --rail-text-strong: #ffffff;
    --rail-active-bg: #548235;
    --rail-hover-bg: #43682b;
    --brand-fg: #ffffff;
    --brand-sub: #f1f7ed;
    --brand-mark-from: #70AD47;
    --brand-mark-to: #70AD47;
    --brand-mark-fg: #2d451c;
    --topbar-bg: #ffffff;
    --paper: #d1e5c4;
    --surface: #ffffff;
    --line: #9bc67e;
    --text: #273d19;
    --text-muted: #273d19;
    --brass: #273d19;
    --brass-strong: #385724;
    --page-bg: #d1e5c4;
    --page-halo-1: transparent;
    --page-halo-2: transparent;
    --page-dots: transparent;
    --shadow: none;
    --shadow-sm: none;
    --gauge-fill: #70AD47;
    --gauge-fill-strong: #548235;
    --st-draft-fg: #273d19;     --st-draft-bg: #ebf4e5;
    --st-submitted-fg: #273d19;     --st-submitted-bg: #daeacf;
    --st-approved-fg: #273d19;     --st-approved-bg: #c9e0b9;
    --st-locked-fg: #273d19;     --st-locked-bg: #b8d6a3;
    --st-rejected-fg: #273d19;     --st-rejected-bg: #a6cc8d;
}
[data-palette="vert"] .content.sec-home { --accent: #2d451c; --accent-soft: #dde1db; }
[data-palette="vert"] .content.sec-timesheets { --accent: #385724; --accent-soft: #dfe4dc; }
[data-palette="vert"] .content.sec-approvals { --accent: #416429; --accent-soft: #e1e6dd; }
[data-palette="vert"] .content.sec-projects { --accent: #4a722f; --accent-soft: #e2e8de; }
[data-palette="vert"] .content.sec-clients { --accent: #517d33; --accent-soft: #e3eade; }
[data-palette="vert"] .content.sec-users { --accent: #273d19; --accent-soft: #dce0da; }
[data-palette="vert"] .content.sec-reports { --accent: #273d19; --accent-soft: #dce0da; }
[data-palette="vert"] .content.sec-tasks { --accent: #273d19; --accent-soft: #dce0da; }
[data-palette="vert"] .content.sec-groups { --accent: #273d19; --accent-soft: #dce0da; }
[data-palette="vert"] .content.sec-absences { --accent: #273d19; --accent-soft: #dce0da; }
[data-palette="vert"] .content.sec-lock { --accent: #263b18; --accent-soft: #dce0da; }

/* --- Palette : Vert foncé — une seule famille (#2F6B35), en aplats ---
   Aucun dégradé, aucun halo, aucune transparence : chaque surface est un aplat,
   chaque nuance est calculée depuis #2F6B35 seul. */
[data-palette="vert-fonce"] {
    --rail-bg: #153018;
    --rail-bg-2: #153018;
    --rail-text: #eaf0eb;
    --rail-text-strong: #ffffff;
    --rail-active-bg: #235028;
    --rail-hover-bg: #1c4020;
    --brand-fg: #ffffff;
    --brand-sub: #eaf0eb;
    --brand-mark-from: #2F6B35;
    --brand-mark-to: #2F6B35;
    --brand-mark-fg: #ffffff;
    --topbar-bg: #ffffff;
    --paper: #bcd0be;
    --surface: #ffffff;
    --line: #6d9772;
    --text: #102513;
    --text-muted: #102513;
    --brass: #102513;
    --brass-strong: #18361b;
    --page-bg: #bcd0be;
    --page-halo-1: transparent;
    --page-halo-2: transparent;
    --page-dots: transparent;
    --shadow: none;
    --shadow-sm: none;
    --gauge-fill: #2F6B35;
    --gauge-fill-strong: #235028;
    --st-draft-fg: #102513;     --st-draft-bg: #e2eae3;
    --st-submitted-fg: #102513;     --st-submitted-bg: #c9d9ca;
    --st-approved-fg: #102513;     --st-approved-bg: #b0c7b2;
    --st-locked-fg: #102513;     --st-locked-bg: #97b59a;
    --st-rejected-fg: #102513;     --st-rejected-bg: #7ea382;
}
[data-palette="vert-fonce"] .content.sec-home { --accent: #132b15; --accent-soft: #d9ddda; }
[data-palette="vert-fonce"] .content.sec-timesheets { --accent: #18361b; --accent-soft: #dadfdb; }
[data-palette="vert-fonce"] .content.sec-approvals { --accent: #1b3e1f; --accent-soft: #dbe0db; }
[data-palette="vert-fonce"] .content.sec-projects { --accent: #1f4723; --accent-soft: #dbe2dc; }
[data-palette="vert-fonce"] .content.sec-clients { --accent: #224d26; --accent-soft: #dce3dc; }
[data-palette="vert-fonce"] .content.sec-users { --accent: #255329; --accent-soft: #dce3dd; }
[data-palette="vert-fonce"] .content.sec-reports { --accent: #275a2d; --accent-soft: #dce5dd; }
[data-palette="vert-fonce"] .content.sec-tasks { --accent: #2a6030; --accent-soft: #dde6de; }
[data-palette="vert-fonce"] .content.sec-groups { --accent: #2d6632; --accent-soft: #dde7de; }
[data-palette="vert-fonce"] .content.sec-absences { --accent: #2F6B35; --accent-soft: #dee7df; }
[data-palette="vert-fonce"] .content.sec-lock { --accent: #102412; --accent-soft: #d9dcd9; }

/* --- Palette : Turquoise — une seule famille (#4BACC6), en aplats ---
   Aucun dégradé, aucun halo, aucune transparence : chaque surface est un aplat,
   chaque nuance est calculée depuis #4BACC6 seul. */
[data-palette="turquoise"] {
    --rail-bg: #224d59;
    --rail-bg-2: #224d59;
    --rail-text: #edf7f9;
    --rail-text-strong: #ffffff;
    --rail-active-bg: #388195;
    --rail-hover-bg: #2d6777;
    --brand-fg: #ffffff;
    --brand-sub: #edf7f9;
    --brand-mark-from: #4BACC6;
    --brand-mark-to: #4BACC6;
    --brand-mark-fg: #1e454f;
    --topbar-bg: #ffffff;
    --paper: #c5e4ed;
    --surface: #ffffff;
    --line: #81c5d7;
    --text: #1a3c45;
    --text-muted: #1a3c45;
    --brass: #1a3c45;
    --brass-strong: #265663;
    --page-bg: #c5e4ed;
    --page-halo-1: transparent;
    --page-halo-2: transparent;
    --page-dots: transparent;
    --shadow: none;
    --shadow-sm: none;
    --gauge-fill: #4BACC6;
    --gauge-fill-strong: #388195;
    --st-draft-fg: #1a3c45;     --st-draft-bg: #e6f3f7;
    --st-submitted-fg: #1a3c45;     --st-submitted-bg: #d0e9f0;
    --st-approved-fg: #1a3c45;     --st-approved-bg: #bbdfe9;
    --st-locked-fg: #1a3c45;     --st-locked-bg: #a5d6e3;
    --st-rejected-fg: #1a3c45;     --st-rejected-bg: #8fccdc;
}
[data-palette="turquoise"] .content.sec-home { --accent: #1e454f; --accent-soft: #dbe1e3; }
[data-palette="turquoise"] .content.sec-timesheets { --accent: #265663; --accent-soft: #dce4e6; }
[data-palette="turquoise"] .content.sec-approvals { --accent: #2c6473; --accent-soft: #dde6e9; }
[data-palette="turquoise"] .content.sec-projects { --accent: #317283; --accent-soft: #dee8eb; }
[data-palette="turquoise"] .content.sec-clients { --accent: #367c8f; --accent-soft: #dfeaed; }
[data-palette="turquoise"] .content.sec-users { --accent: #1a3c45; --accent-soft: #dae0e1; }
[data-palette="turquoise"] .content.sec-reports { --accent: #1a3c45; --accent-soft: #dae0e1; }
[data-palette="turquoise"] .content.sec-tasks { --accent: #1a3c45; --accent-soft: #dae0e1; }
[data-palette="turquoise"] .content.sec-groups { --accent: #1a3c45; --accent-soft: #dae0e1; }
[data-palette="turquoise"] .content.sec-absences { --accent: #1a3c45; --accent-soft: #dae0e1; }
[data-palette="turquoise"] .content.sec-lock { --accent: #193a43; --accent-soft: #dadfe1; }

/* --- Palette : Orange — une seule famille (#F4B183), en aplats ---
   Aucun dégradé, aucun halo, aucune transparence : chaque surface est un aplat,
   chaque nuance est calculée depuis #F4B183 seul. */
[data-palette="orange"] {
    --rail-bg: #6e503b;
    --rail-bg-2: #6e503b;
    --rail-text: #fef7f3;
    --rail-text-strong: #ffffff;
    --rail-active-bg: #b78562;
    --rail-hover-bg: #926a4f;
    --brand-fg: #ffffff;
    --brand-sub: #fef7f3;
    --brand-mark-from: #F4B183;
    --brand-mark-to: #F4B183;
    --brand-mark-fg: #624734;
    --topbar-bg: #ffffff;
    --paper: #fbe6d7;
    --surface: #ffffff;
    --line: #f7c8a8;
    --text: #553e2e;
    --text-muted: #553e2e;
    --brass: #553e2e;
    --brass-strong: #7a5942;
    --page-bg: #fbe6d7;
    --page-halo-1: transparent;
    --page-halo-2: transparent;
    --page-dots: transparent;
    --shadow: none;
    --shadow-sm: none;
    --gauge-fill: #F4B183;
    --gauge-fill-strong: #b78562;
    --st-draft-fg: #553e2e;     --st-draft-bg: #fdf4ee;
    --st-submitted-fg: #553e2e;     --st-submitted-bg: #fcebdf;
    --st-approved-fg: #553e2e;     --st-approved-bg: #fbe1d0;
    --st-locked-fg: #553e2e;     --st-locked-bg: #fad8c1;
    --st-rejected-fg: #553e2e;     --st-rejected-bg: #f8cfb2;
}
[data-palette="orange"] .content.sec-home { --accent: #624734; --accent-soft: #e6e2df; }
[data-palette="orange"] .content.sec-timesheets { --accent: #7a5942; --accent-soft: #eae4e1; }
[data-palette="orange"] .content.sec-approvals { --accent: #8e674c; --accent-soft: #ede7e2; }
[data-palette="orange"] .content.sec-projects { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-clients { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-users { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-reports { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-tasks { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-groups { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-absences { --accent: #553e2e; --accent-soft: #e4e0de; }
[data-palette="orange"] .content.sec-lock { --accent: #533c2d; --accent-soft: #e3e0dd; }

/* --- Densité : le rythme de la page, sans toucher à une seule couleur ---
   Tout le thème est en `rem` : agir sur la taille de référence suffit à
   resserrer ou aérer l'ensemble, marges et hauteurs de ligne comprises. */
[data-density="compact"] { font-size: 14px; }
[data-density="confort"] { font-size: 17.5px; }

[data-density="compact"] .card-body,
[data-density="compact"] .table > :not(caption) > * > * { padding-top: .35rem; padding-bottom: .35rem; }
[data-density="confort"] .table > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; }

/* --- Typographie : le troisieme axe, independant de la couleur et du rythme ---
   Uniquement des polices DEJA PRESENTES sur le poste. Aucune police tierce n'est
   telechargee : la CSP n'autorise que `font-src 'self' data:` et le document est
   `crossOriginIsolated`. Une police distante exigerait d'ouvrir la CSP a un tiers
   pour un choix purement cosmetique -- et ferait clignoter le texte au chargement.
   Chaque pile finit par une famille generique : si rien n'est installe, le texte
   reste lisible. */
:root { --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }

[data-font="classique"] { --font-ui: Cambria, Georgia, "Times New Roman", Times, serif; }
[data-font="moderne"]   { --font-ui: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; }
[data-font="arrondie"]  { --font-ui: "Trebuchet MS", "Segoe UI", Verdana, "DejaVu Sans", sans-serif; }
[data-font="lisible"]   { --font-ui: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif; }
[data-font="technique"] { --font-ui: Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Courier New", monospace; }

html, body {
    font-family: var(--font-ui);
    background-color: var(--paper);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
    color: var(--text);
}

h1 {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--brass-strong);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--n-900);
        text-decoration: underline;
    }

/* Chiffres alignés (durées, totaux) — signature « instrument ». */
.table td.text-end,
.table th.text-end,
.num {
    /* `lining-nums` en plus de `tabular-nums` : plusieurs polices de systeme (Georgia,
       Corbel, Candara) dessinent par defaut des chiffres ELZEVIRIENS, de hauteurs
       inegales et descendant sous la ligne de base. Dans une colonne de durees, ils se
       lisent mal. On impose donc des chiffres de hauteur constante. */
    font-variant-numeric: lining-nums tabular-nums;
}

/* --- En-tête de page réutilisable --- */
/* --- Accent de couleur par section ---
   La classe est posée sur .content par MainLayout selon la route ; --accent cascade
   ensuite vers l'en-tête et les cartes (y compris le CSS scopé de chaque page). */
:root {
    --accent: var(--brass);
    --accent-soft: rgba(217, 138, 43, .12);
}

/* UNE SEULE couleur d'accent pour toute l'application (v2.155.0).
   Chaque section portait la sienne depuis la v1.63 : violet aux Rapports, indigo aux Tâches,
   turquoise aux Utilisateurs… Vu de l'usage, l'application changeait d'identité d'un écran à
   l'autre — « le menu et la barre du haut sont violets alors que la bannière est bleu marine et
   orange ». Le rail et la bannière n'avaient pourtant pas bougé : c'est l'accent de l'écran qui
   colorait titres, boutons et liserés. L'identité est désormais tenue : encre et laiton, partout.
   Les palettes qui redéfinissent ces règles (Daltonien, Prisme, les six monochromes) gardent leur
   propre logique — elles sont un choix explicite de l'utilisateur. */
.content[class*="sec-"] { --accent: var(--brass-strong); --accent-soft: rgba(185, 114, 26, .12); }

/* Sobre : une seule couleur pour toutes les sections (les statuts, eux, restent colorés). */
[data-palette="sobre"] .content[class*="sec-"] { --accent: #2b3340; --accent-soft: rgba(43, 51, 64, .10); }

/* Daltonien : bleu, orangé, violet et ardoise — jamais rouge contre vert. */
[data-palette="daltonien"] .content.sec-home {       --accent: #9a3412; --accent-soft: rgba(154, 52, 18, .12); }
[data-palette="daltonien"] .content.sec-timesheets { --accent: #b45309; --accent-soft: rgba(180, 83, 9, .12); }
[data-palette="daltonien"] .content.sec-approvals {  --accent: #1d4ed8; --accent-soft: rgba(29, 78, 216, .12); }
[data-palette="daltonien"] .content.sec-projects {   --accent: #1e40af; --accent-soft: rgba(30, 64, 175, .12); }
[data-palette="daltonien"] .content.sec-clients {    --accent: #0e7490; --accent-soft: rgba(14, 116, 144, .12); }
[data-palette="daltonien"] .content.sec-users {      --accent: #334155; --accent-soft: rgba(51, 65, 85, .12); }
[data-palette="daltonien"] .content.sec-reports {    --accent: #5b21b6; --accent-soft: rgba(91, 33, 182, .12); }
[data-palette="daltonien"] .content.sec-tasks {      --accent: #4338ca; --accent-soft: rgba(67, 56, 202, .12); }
[data-palette="daltonien"] .content.sec-groups {     --accent: #155e75; --accent-soft: rgba(21, 94, 117, .12); }
[data-palette="daltonien"] .content.sec-absences {   --accent: #854d0e; --accent-soft: rgba(133, 77, 14, .12); }
[data-palette="daltonien"] .content.sec-lock {       --accent: #7e22ce; --accent-soft: rgba(126, 34, 206, .12); }

/* Prisme : la teinte VIVE colore les surfaces (`--accent-soft`), la FONCÉE écrit (`--accent`). */
[data-palette="prisme"] .content.sec-home {       --accent: #b45309; --accent-soft: rgba(245, 158, 11, .20); }
[data-palette="prisme"] .content.sec-timesheets { --accent: #9a3412; --accent-soft: rgba(251, 146, 60, .20); }
[data-palette="prisme"] .content.sec-approvals {  --accent: #15803d; --accent-soft: rgba(34, 197, 94, .20); }
[data-palette="prisme"] .content.sec-projects {   --accent: #1d4ed8; --accent-soft: rgba(59, 130, 246, .20); }
[data-palette="prisme"] .content.sec-clients {    --accent: #0f766e; --accent-soft: rgba(45, 212, 191, .22); }
[data-palette="prisme"] .content.sec-users {      --accent: #0e7490; --accent-soft: rgba(34, 211, 238, .22); }
[data-palette="prisme"] .content.sec-reports {    --accent: #6d28d9; --accent-soft: rgba(139, 92, 246, .20); }
[data-palette="prisme"] .content.sec-tasks {      --accent: #4338ca; --accent-soft: rgba(99, 102, 241, .20); }
[data-palette="prisme"] .content.sec-groups {     --accent: #0e7490; --accent-soft: rgba(6, 182, 212, .20); }
[data-palette="prisme"] .content.sec-absences {   --accent: #a16207; --accent-soft: rgba(251, 191, 36, .22); }
[data-palette="prisme"] .content.sec-lock {       --accent: #be123c; --accent-soft: rgba(244, 63, 94, .20); }

/* Papier : l'accent devient l'encre. La couleur ne décore plus rien. */
[data-palette="papier"] .content[class*="sec-"] { --accent: #1a1d23; --accent-soft: rgba(26, 29, 35, .08); }

/* Fond d'écran commun à TOUTES les sessions : base bleu-vert clair (identique à la session
   Utilisateurs) + halos doux + trame de points. Fond clair → cartes blanches et texte foncé
   parfaitement lisibles partout. Chaque section reste distinguée par sa couleur d'accent
   (en-tête + liseré des cartes). Halos fixés au viewport (effet « papier peint »). */
.content {
    min-height: calc(100vh - var(--topbar-height));
    background-color: var(--page-bg);
    background-image:
        radial-gradient(72rem 34rem at 106% -6%, var(--page-halo-1), transparent 66%),
        radial-gradient(60rem 38rem at -12% 112%, var(--page-halo-2), transparent 64%),
        radial-gradient(circle at 1px 1px, var(--page-dots) 1px, transparent 0);
    background-size: auto, auto, 24px 24px;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-attachment: fixed, fixed, fixed;
}

.page-header {
    margin-bottom: 1.25rem;
}

    .page-header > h1 {
        margin-bottom: 0.15rem;
    }

    .page-header .subtitle {
        color: var(--text-muted);
        margin: 0;
    }

/* --- Boutons --- */
.btn {
    border-radius: 8px;
    font-weight: 500;
}

.btn-primary {
    color: #fff;
    background-color: var(--ink);
    border-color: var(--ink);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--ink-2) !important;
        border-color: var(--ink-2) !important;
        color: #fff;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(217, 138, 43, .35);
    border-color: var(--brass);
}

/* --- Cartes --- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--n-60);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

/* --- Tables --- */
.table {
    --bs-table-border-color: var(--line);
}

    .table > thead th {
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        font-weight: 600;
        border-bottom: 1px solid var(--line);
    }

.table-hover > tbody > tr:hover > * {
    background-color: #fbf7ef; /* survol teinté laiton très léger */
}

/* --- Champs --- */
.form-control, .form-select {
    border-color: var(--line);
    border-radius: 8px;
}

/* --- Barre de recherche --- */
.search-input {
    max-width: 340px;
    padding-left: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a94a3' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.3'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
    background-size: 15px 15px;
}

/* --- Pastilles de statut (dot + libellé) --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.2em 0.65em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

    .status-badge::before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background: currentColor;
    }

.status-draft { color: var(--st-draft-fg); background: var(--st-draft-bg); }
.status-submitted { color: var(--st-submitted-fg); background: var(--st-submitted-bg); }
.status-approved { color: var(--st-approved-fg); background: var(--st-approved-bg); }
.status-locked { color: var(--st-locked-fg); background: var(--st-locked-bg); }
.status-rejected { color: var(--st-rejected-fg); background: var(--st-rejected-bg); }

/* --- Divers template Blazor (conservés) --- */
.content {
    padding-top: 1.25rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

code {
    color: #c02d76;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur est survenue."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brass);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--n-900);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Chargement");
    }

/* ==========================================================================
   Accessibilité (WCAG)
   ========================================================================== */

/* Lien d'évitement « Aller au contenu » (2.4.1) : hors écran, visible au focus clavier. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 1000;
    padding: 0.5rem 0.9rem;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}

    .skip-link:focus {
        left: 0;
        color: #fff;
        outline: 3px solid var(--brass);
        outline-offset: 2px;
    }

/* Cible du lien d'évitement : pas de contour persistant au focus programmatique. */
#main-content:focus {
    outline: none;
}

/* Indicateur de focus clavier visible et homogène (2.4.7). */
:focus-visible {
    outline: 3px solid var(--brass);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Respecte la préférence « animations réduites » (2.3.3). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Option « par défaut » (valeur vide) des listes déroulantes : allure de placeholder
   (gris + italique), sans tirets encadrants. Le sélecteur :has grise aussi le contrôle
   fermé tant que l'option vide est sélectionnée ; un vrai choix revient en style normal. */
select option[value=""] {
    color: var(--text-muted);
    font-style: italic;
}

select:has(option[value=""]:checked) {
    color: var(--text-muted);
    font-style: italic;
}

/* Badge de code (identifiant projet/client) — style léger et cohérent, réutilisable sur tous les
   écrans (auparavant défini seulement en CSS scopé de quelques pages). Remplace les séparateurs
   « — » entre un code et un libellé. */
.code-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--n-140);
    border-radius: 6px;
    padding: 0.08em 0.5em;
    letter-spacing: 0.03em;
}

/* Indicateur global de valeur vide/manquante : tiret court discret en gris clair
   (remplace le tiret cadratin « — »). Utilisé via UiFormat.OrDash(...). */
.empty-value {
    color: #c0c7d0;
}

/* --- Écrans hors session (connexion, changement de mot de passe) ---
   Partagés par `Login` et `ChangePassword`, qui vivent tous deux dans `BareLayout` : mis en CSS
   scopé, il faudrait les écrire deux fois et ils divergeraient à la première retouche. */
.auth-head {
    margin-bottom: 1.6rem;
}

    .auth-head h1 {
        margin: 0 0 0.3rem;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--n-900);
    }

    .auth-head p {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-muted);
    }

/* Message d'état (session verrouillée, expirée, mot de passe provisoire, erreur de connexion).
   Traité comme un élément du thème plutôt qu'avec les `alert-*` de Bootstrap, dont les couleurs
   n'ont rien à voir avec le reste de l'application. */
.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
}

    .auth-notice svg {
        flex: 0 0 auto;
        width: 1.05rem;
        height: 1.05rem;
        margin-top: 0.08rem;
    }

.auth-notice-info {
    background: #fbf3e5;
    border-color: #ecd7ac;
    color: #7a5312;
}

.auth-notice-error {
    background: var(--w-danger-150);
    border-color: #f2c3c0;
    color: #8d2019;
}

.auth-field {
    margin-bottom: 1.1rem;
}

    .auth-field > label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--text);
    }

    .auth-field .form-control {
        padding: 0.62rem 0.8rem;
        font-size: 0.97rem;
        border-radius: 9px;
    }

.auth-hint {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Champ de mot de passe avec bascule « Afficher / Masquer » posée DANS le champ. Une saisie
   masquée qu'on ne peut pas relire est la première cause de tentative ratée ; à l'inverse, un
   secret affiché en permanence se lit par-dessus l'épaule. Le choix revient donc à la personne.
   Utilisé par l'écran de connexion ET par la réinitialisation de mot de passe (écran Utilisateurs) :
   une seule implémentation, pas deux qui divergent. */
.password-field {
    position: relative;
}

    .password-field .form-control {
        padding-right: 5rem;
    }

    /* Variante des champs `form-control-sm` (cartes, panneaux) : la bascule doit rester lisible
       sans déborder d’un champ plus court. */
    .password-field-sm .form-control {
        padding-right: 4.4rem;
    }

.password-reveal {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    padding: 0.3rem 0.5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

    .password-reveal:hover {
        color: var(--n-900);
        background: rgba(27, 36, 54, .06);
    }

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.66rem 1rem;
    border-radius: 9px;
    font-size: 0.97rem;
    font-weight: 600;
}

.auth-foot {
    margin: 1.4rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.auth-checking {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-spinner {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(27, 36, 54, .18);
    border-top-color: var(--brass);
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

.auth-submit .auth-spinner {
    border-color: rgba(255, 255, 255, .35);
    border-top-color: var(--surface);
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Le gabarit Blazor souligne en vert tout champ « modifié et valide ». Sur un formulaire de
   connexion cette approbation ne veut rien dire (le serveur seul juge), et elle contredit
   visuellement le message d'erreur affiché juste au-dessus. */
.auth-field .form-control.valid.modified {
    outline: none;
}

/* Bouton principal désactivé (envoi en cours, ou verrouillage après échecs répétés). Bootstrap
   repeint le fond en bleu via `--bs-btn-disabled-bg` dès que l'attribut `disabled` est posé, ce
   qui faisait surgir une couleur étrangère au thème au pire moment. On garde l'encre, atténuée. */
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff;
    opacity: 0.55;
}

/* Séparateur « ou » entre la connexion par mot de passe et la connexion Microsoft. */
.auth-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.2rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

    .auth-separator::before, .auth-separator::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: var(--line);
    }

/* Bouton « Se connecter avec Microsoft » : présentation sobre attendue pour ce parcours (fond
   blanc, logo à quatre carrés), volontairement distincte du bouton principal — ce n'est pas le
   même geste, et l'un ne doit pas se faire passer pour l'autre. */
.auth-microsoft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.62rem 1rem;
    border: 1px solid #8c8c8c;
    border-radius: 9px;
    background: var(--surface);
    color: #3b3b3b;
    font-size: 0.95rem;
    font-weight: 600;
}

    .auth-microsoft svg {
        width: 1.05rem;
        height: 1.05rem;
        flex: 0 0 auto;
    }

    .auth-microsoft:hover {
        background: #f3f4f6;
        border-color: #6b6b6b;
    }

/* ===========================================================================
   UNIFORMISATION DES BLEUS DE BOOTSTRAP (v2.155.0)
   Bootstrap peint en bleu #0d6efd tout ce que le thème n'a pas repris : liens,
   onglets, cases à cocher, boutons « outline ». L'application paraissait donc
   changer d'identité selon l'écran — bleu marine et laiton d'un côté, bleu
   Bootstrap et violet de l'autre. Tout est ramené sur l'accent, c'est-à-dire
   le laiton ; le reste du thème n'y touche pas.
   =========================================================================== */
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brass-strong);
    --bs-btn-active-border-color: var(--brass-strong);
    --bs-btn-disabled-color: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

/* Liens d'action et onglets : l'accent, jamais le bleu par défaut.
   La règle est bornée au CORPS de page (`.content`). Sans cette borne, elle avalait les entrées
   du menu latéral, qui passaient du bleu pâle au laiton : lisibles sur le papier (5,64:1), mais
   toutes de la couleur de l'accent, donc sans hiérarchie et ternes à l'usage (signalé en v2.155). */
.content a:not(.btn):not(.nav-card),
.content .btn-link,
.content .nav-tabs .nav-link,
.content .nav-pills .nav-link {
    color: var(--accent);
}

    .content a:not(.btn):not(.nav-card):hover,
    .content .btn-link:hover {
        color: var(--brass-strong);
    }

.content .nav-tabs .nav-link.active,
.content .nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--ink);
    border-color: var(--ink);
}

/* Cases à cocher, boutons radio et interrupteurs. */
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--brass);
}

/* Barres de progression et éléments « actifs » de listes. */
.progress-bar { background-color: var(--accent); }

.list-group-item.active {
    background-color: var(--ink);
    border-color: var(--ink);
}

/* Le curseur de saisie et la sélection reprennent aussi l'identité. */
.form-control, .form-select { accent-color: var(--accent); }