/* =================================================================
   THÈMES DE L'INTERFACE
   Chaque utilisateur choisit son thème (bouton « Thème » en haut à
   droite). Le choix est mémorisé dans un cookie « sfe_theme » et posé
   côté PHP sur <html data-theme="…"> pour éviter tout clignotement.

   Le thème par défaut (« papier ») est défini dans style.css.
   Un thème ne change que l'interface : la facture imprimable reste
   toujours noir et blanc.
   ================================================================= */


/* -----------------------------------------------------------------
   1. BLEU DE PRUSSE — « Bureau »
   Sérieux et administratif : menu bleu marine, coins presque droits,
   boutons bleus, chiffres en Plex Mono.
   ----------------------------------------------------------------- */
:root[data-theme="prusse"] {
    --encre: #131A26;
    --encre-2: #2C3646;
    --papier: #F1F3F6;
    --papier-2: #E6EAF0;
    --trait: #DCE1E8;
    --trait-fort: #C5CDD8;
    --gris: #5F6B7C;
    --gris-clair: #94A0B0;

    --accent: #1E4E8C;
    --accent-fonce: #163C6D;
    --accent-pale: #E5EDF8;
    --accent-vif: #8DB4EA;

    --btn-fond: var(--accent);
    --btn-survol: var(--accent-fonce);
    --focus: var(--accent);
    --login-fond: #13233D;

    --rayon: 6px;
    --rayon-sm: 4px;

    --sb-fond: #13233D;
    --sb-bord: #13233D;
    --sb-texte: #B6C3D6;
    --sb-texte-fort: #FFFFFF;
    --sb-texte-doux: #7C8CA5;
    --sb-ico: #7F92AE;
    --sb-sep: #5D6F8B;
    --sb-survol: rgba(255,255,255,0.06);
    --sb-actif-fond: rgba(141,180,234,0.16);
    --sb-actif-texte: #FFFFFF;
    --sb-actif-ombre: none;
    --sb-user-fond: rgba(255,255,255,0.05);
    --sb-user-bord: rgba(255,255,255,0.08);
    --marque-fond: #FFFFFF;
    --marque-texte: #13233D;
}
[data-theme="prusse"] .sidebar-nav a.active .ico { color: #8DB4EA; }
[data-theme="prusse"] .nav-indicateur { background: #8DB4EA; }
[data-theme="prusse"] .avatar { background: #8DB4EA; color: #13233D; }
[data-theme="prusse"] .stat-box { border-top: 3px solid var(--accent); }
[data-theme="prusse"] .stat-box::before { display: none; }
[data-theme="prusse"] th { background: var(--papier); }
[data-theme="prusse"] .badge { border-radius: 3px; }


/* -----------------------------------------------------------------
   2. VERT SAPIN — « Doux »
   Aéré et arrondi : menu vert très clair, boutons en pilule, cartes
   très arrondies, police Inter, chiffres sans empattement.
   ----------------------------------------------------------------- */
:root[data-theme="sapin"] {
    --encre: #15201B;
    --encre-2: #33413A;
    --papier: #F3F5F1;
    --papier-2: #E6EDE7;
    --trait: #DFE5DD;
    --trait-fort: #C8D2C8;
    --gris: #627068;
    --gris-clair: #94A099;

    --accent: #1F6B4F;
    --accent-fonce: #17523D;
    --accent-pale: #E1F0E8;
    --accent-vif: #7DD3A8;

    --police-corps: "Inter", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
    --police-titres: var(--police-corps);
    --police-chiffres: var(--police-corps);

    --btn-fond: var(--accent);
    --btn-survol: var(--accent-fonce);
    --focus: var(--accent);
    --login-fond: #163D2F;

    --rayon: 18px;
    --rayon-sm: 12px;

    --sb-fond: #E6EDE7;
    --sb-bord: transparent;
    --sb-actif-fond: var(--accent);
    --sb-actif-texte: #FFFFFF;
    --sb-actif-ombre: 0 8px 18px -10px rgba(31,107,79,0.9);
    --sb-user-bord: transparent;
    --marque-fond: var(--accent);
}
[data-theme="sapin"] .btn { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
[data-theme="sapin"] .sidebar-nav a { border-radius: 999px; padding: 8px 14px; }
[data-theme="sapin"] .sidebar-nav a.active .ico { color: #fff; }
[data-theme="sapin"] .nav-indicateur { display: none; }
[data-theme="sapin"] .marque-monogramme { border-radius: 50%; }
[data-theme="sapin"] .marque-monogramme::after { display: none; }
[data-theme="sapin"] .card { box-shadow: 0 1px 2px rgba(21,32,27,0.04), 0 10px 30px -18px rgba(21,32,27,0.25); border-color: transparent; }
[data-theme="sapin"] .stat-box { background: var(--accent-pale); border-color: transparent; box-shadow: none; }
[data-theme="sapin"] .stat-box::before { display: none; }
[data-theme="sapin"] .stat-box .valeur { font-weight: 700; color: var(--accent-fonce); }
[data-theme="sapin"] input, [data-theme="sapin"] select, [data-theme="sapin"] textarea { background: var(--papier); border-color: transparent; }
[data-theme="sapin"] input:focus, [data-theme="sapin"] select:focus, [data-theme="sapin"] textarea:focus { background: var(--feuille); }
[data-theme="sapin"] th { text-transform: none; letter-spacing: 0; font-size: 0.78rem; }


/* -----------------------------------------------------------------
   3. REGISTRE BORDEAUX — « Classique »
   Esprit livre comptable : titres et montants en serif (Fraunces),
   fond crème, filets fins sans ombres, liens soulignés.
   ----------------------------------------------------------------- */
:root[data-theme="bordeaux"] {
    --encre: #1E1718;
    --encre-2: #3D3233;
    --papier: #F7F2EA;
    --papier-2: #EFE7DB;
    --feuille: #FFFDF9;
    --trait: #E5DACB;
    --trait-fort: #CFC0AC;
    --gris: #7A6A62;
    --gris-clair: #A89A90;

    --accent: #8E2C3E;
    --accent-fonce: #6E2030;
    --accent-pale: #F6E5E8;
    --accent-vif: #E9A1AE;

    --police-titres: "Fraunces", Georgia, "Times New Roman", serif;
    --police-chiffres: "Fraunces", Georgia, serif;

    --btn-fond: var(--accent);
    --btn-survol: var(--accent-fonce);
    --focus: var(--accent);
    --login-fond: #2A1A1D;

    --rayon: 3px;
    --rayon-sm: 3px;
    --ombre-1: none;
    --ombre-2: 0 0 0 1px var(--trait-fort);

    --sb-fond: var(--papier);
    --sb-actif-fond: transparent;
    --sb-actif-texte: var(--accent);
    --sb-actif-ombre: none;
    --marque-fond: var(--accent);
}
[data-theme="bordeaux"] h1 { font-weight: 600; font-size: 1.85rem; letter-spacing: -0.01em; }
[data-theme="bordeaux"] h2, [data-theme="bordeaux"] h3 { font-weight: 600; letter-spacing: 0; }
[data-theme="bordeaux"] .marque-monogramme { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; }
[data-theme="bordeaux"] .marque-monogramme::after { background: #E9A1AE; height: 2px; }
[data-theme="bordeaux"] .sidebar-nav a.active span { border-bottom: 1px solid var(--accent); }
[data-theme="bordeaux"] .nav-indicateur { width: 6px; height: 6px; top: 50%; bottom: auto; left: -2px; margin-top: -3px; border-radius: 50%; }
[data-theme="bordeaux"] .stat-box { text-align: center; border-bottom: 3px double var(--trait-fort); }
[data-theme="bordeaux"] .stat-box::before { left: 50%; margin-left: -14px; height: 2px; }
[data-theme="bordeaux"] .stat-box .valeur { font-size: 1.9rem; font-weight: 500; letter-spacing: 0; }
[data-theme="bordeaux"] td.text-right, [data-theme="bordeaux"] .montant { font-size: 0.95rem; }
[data-theme="bordeaux"] th { font-family: var(--police-titres); text-transform: none; letter-spacing: 0; font-size: 0.82rem; font-style: italic; font-weight: 500; }
[data-theme="bordeaux"] .container a:not(.btn):not(.article-card) { background-size: 100% 1px; }
[data-theme="bordeaux"] .badge { border-radius: 2px; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; }
[data-theme="bordeaux"] .raccourci-ico { border-radius: 50%; }


/* -----------------------------------------------------------------
   4. INDIGO MODERNE — « Tableau de bord »
   Menu bleu nuit, cartes d'indicateurs en dégradés colorés, police
   Inter, grands rayons et ombres douces.
   ----------------------------------------------------------------- */
:root[data-theme="moderne"] {
    --encre: #0F172A;
    --encre-2: #334155;
    --papier: #F3F5F9;
    --papier-2: #EDF0F6;
    --trait: #E6EAF1;
    --trait-fort: #D5DBE6;
    --gris: #64748B;
    --gris-clair: #94A3B8;

    --accent: #4F46E5;
    --accent-fonce: #4338CA;
    --accent-pale: #EEF0FF;
    --accent-vif: #A5B4FC;

    --police-corps: "Inter", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
    --police-titres: var(--police-corps);
    --police-chiffres: var(--police-corps);

    --btn-fond: var(--accent);
    --btn-survol: var(--accent-fonce);
    --focus: var(--accent);
    --login-fond: #111827;

    --rayon: 16px;
    --rayon-sm: 10px;
    --ombre-1: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px -2px rgba(15,23,42,0.05);
    --ombre-2: 0 2px 4px rgba(15,23,42,0.04), 0 12px 28px -10px rgba(15,23,42,0.18);

    --sb-fond: #111827;
    --sb-bord: #111827;
    --sb-texte: #A3ADC2;
    --sb-texte-fort: #FFFFFF;
    --sb-texte-doux: #6B7593;
    --sb-ico: #7C86A0;
    --sb-sep: #565F78;
    --sb-survol: rgba(255,255,255,0.05);
    --sb-actif-fond: linear-gradient(90deg, rgba(99,102,241,0.30), rgba(99,102,241,0.10));
    --sb-actif-texte: #FFFFFF;
    --sb-actif-ombre: inset 0 0 0 1px rgba(129,140,248,0.18);
    --sb-user-fond: rgba(255,255,255,0.04);
    --sb-user-bord: rgba(255,255,255,0.07);
    --marque-fond: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
}
[data-theme="moderne"] .marque-monogramme { border-radius: 12px; box-shadow: 0 8px 18px -6px rgba(99,102,241,0.7); font-family: var(--police-corps); font-weight: 800; }
[data-theme="moderne"] .marque-monogramme::after { display: none; }
[data-theme="moderne"] .sidebar-nav a { border-radius: 10px; padding: 9px 12px; }
[data-theme="moderne"] .sidebar-nav a.active .ico { color: #A5B4FC; }
[data-theme="moderne"] .nav-indicateur { left: -10px; background: #818CF8; box-shadow: 0 0 10px rgba(129,140,248,0.8); }
[data-theme="moderne"] .avatar { background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); color: #fff; }
[data-theme="moderne"] .btn { box-shadow: 0 1px 2px rgba(15,23,42,0.1), 0 6px 14px -8px rgba(79,70,229,0.8); }
[data-theme="moderne"] .card { padding: 22px 24px; }
[data-theme="moderne"] th { background: var(--papier); border-bottom-color: var(--trait); }
[data-theme="moderne"] td.text-right, [data-theme="moderne"] .montant { font-weight: 600; }
/* Cartes d'indicateurs en dégradés (la couleur suit la position) */
[data-theme="moderne"] .stat-box {
    --fond-stat: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    background: var(--fond-stat);
    border: none;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 14px 30px -18px rgba(15,23,42,0.6);
}
[data-theme="moderne"] :is(.grid-2, .grid-3, .grid-4) > .stat-box:nth-child(4n+2) { --fond-stat: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); }
[data-theme="moderne"] :is(.grid-2, .grid-3, .grid-4) > .stat-box:nth-child(4n+3) { --fond-stat: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%); }
[data-theme="moderne"] :is(.grid-2, .grid-3, .grid-4) > .stat-box:nth-child(4n+4) { --fond-stat: linear-gradient(135deg, #10B981 0%, #059669 100%); }
[data-theme="moderne"] .stat-box::before {
    left: auto; right: -40px; top: -60px;
    width: 150px; height: 150px; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    z-index: -1; animation: none;
}
[data-theme="moderne"] .stat-box .valeur { color: #fff !important; font-weight: 800; }
[data-theme="moderne"] .stat-box .label { color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; }


/* -----------------------------------------------------------------
   5. NUIT CANARD — « Sombre »
   Thème sombre pour le travail de soir : fonds anthracite, accent
   bleu canard lumineux. La facture imprimable reste blanche.
   ----------------------------------------------------------------- */
:root[data-theme="nuit"] {
    color-scheme: dark;
    --encre: #E4EBEC;
    --encre-2: #BAC6C8;
    --papier: #0E1416;
    --papier-2: #131B1E;
    --feuille: #172024;
    --trait: #243136;
    --trait-fort: #34444A;
    --gris: #8A9A9E;
    --gris-clair: #627176;

    --accent: #2BB3BF;
    --accent-fonce: #5CCCD5;
    --accent-pale: rgba(43,179,191,0.14);
    --accent-vif: #5CCCD5;

    --vert: #4ADE9B;   --vert-pale: rgba(74,222,155,0.12);
    --rouge: #F87171;  --rouge-pale: rgba(248,113,113,0.12);
    --ocre: #FBBF24;   --ocre-pale: rgba(251,191,36,0.12);

    --btn-fond: var(--accent);
    --btn-survol: #47C4CF;
    --btn-texte: #062226;
    --focus: var(--accent);
    --login-fond: #0A0F11;

    --ombre-1: 0 1px 0 rgba(0,0,0,0.3);
    --ombre-2: 0 10px 24px -10px rgba(0,0,0,0.7);
    --ombre-3: 0 24px 60px -18px rgba(0,0,0,0.8);

    --sb-fond: #0A0F11;
    --sb-bord: #1B2529;
    --sb-survol: rgba(255,255,255,0.04);
    --sb-actif-fond: var(--feuille);
    --sb-actif-texte: #FFFFFF;
    --sb-actif-ombre: inset 0 0 0 1px var(--trait);
    --sb-user-fond: var(--feuille);
    --sb-user-bord: var(--trait);
    --marque-fond: var(--accent);
    --marque-texte: #062226;
}
[data-theme="nuit"] .nav-indicateur { box-shadow: 0 0 12px rgba(43,179,191,0.8); }
[data-theme="nuit"] .stat-box .valeur { color: #fff; }
[data-theme="nuit"] tbody tr:hover { background: rgba(255,255,255,0.025); }
[data-theme="nuit"] .modal-overlay, [data-theme="nuit"] .popup-alerte-overlay { background: rgba(0,0,0,0.6); }
[data-theme="nuit"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9A9E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* styles en ligne des pages pensés pour fond clair */
[data-theme="nuit"] .container [style*="background:#fff"],
[data-theme="nuit"] .container [style*="background: #fff"] { background: var(--feuille) !important; }
[data-theme="nuit"] .container tr[style*="#fbe6e4"] { background: rgba(248,113,113,0.12) !important; }


/* =================================================================
   Sélecteur de thème (barre du haut)
   ================================================================= */
.theme-selecteur { position: relative; margin-left: auto; }
.theme-selecteur + .topbar-horloge { margin-left: 0; }
.theme-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--trait);
    background: var(--feuille);
    color: var(--encre-2);
    font: 500 0.8rem var(--police-corps);
    cursor: pointer;
    transition: border-color .15s, box-shadow .2s;
}
.theme-bouton:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); }
.theme-pastille {
    width: 18px; height: 18px; border-radius: 50%;
    background: conic-gradient(var(--accent) 0 50%, var(--sb-fond, var(--papier-2)) 0);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.theme-panneau {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 320px;
    padding: 8px;
    background: var(--feuille);
    border: 1px solid var(--trait);
    border-radius: 14px;
    box-shadow: var(--ombre-3);
    z-index: 60;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .18s, transform .22s var(--ease);
}
.theme-selecteur.ouvert .theme-panneau { opacity: 1; transform: none; pointer-events: auto; }
.theme-panneau-titre {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gris-clair); padding: 6px 10px 8px;
}
.theme-option {
    width: 100%;
    display: grid;
    grid-template-columns: 54px 1fr 18px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    color: var(--encre);
    font-family: var(--police-corps);
    transition: background-color .12s;
}
.theme-option:hover { background: var(--papier); }
.theme-option strong { display: block; font-size: 0.86rem; font-weight: 600; }
.theme-option small { display: block; font-size: 0.74rem; color: var(--gris); line-height: 1.35; }
.theme-option .coche { opacity: 0; color: var(--accent); font-weight: 700; transition: opacity .15s; }
.theme-option[aria-checked="true"] { background: var(--accent-pale); }
.theme-option[aria-checked="true"] .coche { opacity: 1; }
/* Mini-aperçu : menu | contenu avec accent */
.theme-apercu {
    width: 54px; height: 38px; border-radius: 7px; overflow: hidden;
    display: grid; grid-template-columns: 16px 1fr;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.theme-apercu i:first-child { background: var(--a-menu); }
.theme-apercu i:last-child {
    background:
        linear-gradient(var(--a-accent), var(--a-accent)) 6px 7px / 18px 4px no-repeat,
        linear-gradient(var(--a-carte), var(--a-carte)) 6px 16px / 26px 14px no-repeat,
        var(--a-fond);
}

/* Changement de thème animé : cercle qui s'ouvre depuis le bouton */
::view-transition-old(theme), ::view-transition-new(theme) { animation: none; mix-blend-mode: normal; }
html.theme-transition::view-transition-old(root) { animation: none; }
html.theme-transition::view-transition-new(root) {
    animation: theme-revele .55s var(--ease) both;
}
@keyframes theme-revele {
    from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0)); }
    to   { clip-path: circle(150vmax at var(--tx, 100%) var(--ty, 0)); }
}

@media (max-width: 560px) {
    .theme-bouton span.libelle { display: none; }
    .theme-panneau { width: min(320px, calc(100vw - 28px)); right: -60px; }
}
/* pendant le changement de thème, tout l'écran est révélé d'un seul bloc */
html.theme-transition .sidebar,
html.theme-transition .nav-indicateur { view-transition-name: none; }