/* ==========================================================================
   Bourse perso — style « atelier » repris du projet manche (6 thèmes de couleur)
   Base : Tabler 1.3.1 (/vendor/tabler/tabler.min.css) pour les composants, dont les
   variables (--tblr-*) sont surchargées ici par celles du thème choisi.
   Thème : attribut data-theme sur <html>, posé avant l'affichage par /theme-initial.js
   et changé par le menu utilisateur (commun.js, TB.changerTheme).
   ========================================================================== */

/* --- Polices auto-hébergées (SIL OFL 1.1, voir /polices/LISEZMOI.txt) ------
   Sous-ensembles latin et latin-ext ; aucune requête externe (CSP 'self'). */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('/polices/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('/polices/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/polices/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/polices/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/polices/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/polices/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Typographie --------------------------------------------------------- */
  --police: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --police-titre: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --duree-transition: .18s;
  --marge-page: clamp(1rem, 2.5vw, 2.5rem);

  /* --- Anciens noms (feuilles des pages, scripts) : alias des variables du thème --- */
  --bg-primary: var(--primaire-texte);   /* couleur de texte d'accent */
  --bg-secondary: var(--primaire);       /* filet, bordure d'accent */
  --texte-2: var(--texte-discret);       /* texte secondaire, >= 4,5:1 */
  --bord: var(--bordure);
  --hausse: var(--succes);
  --baisse: var(--erreur);
}

/* Variables communes, recalculées pour chaque élément qui porte data-theme :
   l'en-tête reprend par défaut les couleurs du thème ; les thèmes clairs à
   en-tête sombre (bleu, bois) les redéfinissent. */
:root,
[data-theme] {
  --entete-fond: color-mix(in srgb, var(--fond) 88%, transparent);
  --entete-panneau: var(--panneau);
  --entete-texte: var(--texte);
  --entete-texte-doux: var(--texte-doux);
  --entete-texte-discret: var(--texte-discret);
  --entete-surface: var(--surface);
  --entete-surface-2: var(--surface-2);
  --entete-survol: var(--survol);
  --entete-fond-accent: var(--fond-accent);
  --entete-bordure: var(--bordure);
  --entete-bordure-forte: var(--bordure-forte);
  --entete-bordure-champ: var(--bordure-champ);
  --entete-primaire: var(--primaire);
  --entete-primaire-survol: var(--primaire-survol);
  --entete-primaire-texte: var(--primaire-texte);
  --entete-sur-primaire: var(--sur-primaire);
  --entete-focus: var(--focus);
  --entete-ombre: 0 6px 20px rgb(0 0 0 / .35);
}

:root,
[data-theme='atelier'] {
  color-scheme: dark;
  --theme-couleur: #14100d;
  --fond: #14100d;
  --surface: #1c1611;
  --surface-2: #251d16;
  --panneau: #0c0a07;
  --survol: rgb(236 227 209 / 0.06);
  --fond-accent: #2a2114;
  --texte: #ece3d1;
  --texte-doux: #d6cbb5;
  --texte-discret: #9c8e79;
  --bordure: rgb(236 227 209 / 0.16);
  --bordure-forte: rgb(236 227 209 / 0.3);
  --bordure-champ: #77705f;
  --primaire: #c9a24b;
  --primaire-survol: #d9b568;
  --primaire-texte: #d9b568;
  --sur-primaire: #14100d;
  --focus: #e8c77e;
  --succes: #7fc98f;
  --erreur: #f19083;
  --info: #8dbbe6;
  --avertissement: #eba65e;
  --fond-succes: #15241a;
  --fond-erreur: #2c1714;
  --fond-info: #131d29;
  --fond-avertissement: #2b1f10;
  --ombre: 0 12px 32px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .35);
  --ombre-legere: 0 4px 14px rgb(0 0 0 / .35);
  --voile: rgb(0 0 0 / .72);
  --lien-souligne: rgb(217 181 104 / 0.45);
  --zebre: rgb(236 227 209 / 0.025);
  --rayon: 3px;
  --rayon-petit: 2px;
  --scrollbar: #9c8e79;
}

[data-theme='bleu'] {
  color-scheme: light;
  --theme-couleur: #0f172a;
  --fond: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --panneau: #e2e8f0;
  --survol: rgb(15 23 42 / 0.05);
  --fond-accent: #e3ebf6;
  --texte: #0f172a;
  --texte-doux: #334155;
  --texte-discret: #475569;
  --bordure: rgb(15 23 42 / 0.1);
  --bordure-forte: rgb(15 23 42 / 0.22);
  --bordure-champ: #64748b;
  --primaire: #324b6b;
  --primaire-survol: #263a54;
  --primaire-texte: #2c4a75;
  --sur-primaire: #ffffff;
  --focus: #2563eb;
  --succes: #166534;
  --erreur: #b91c1c;
  --info: #1e40af;
  --avertissement: #92400e;
  --fond-succes: #dcfce7;
  --fond-erreur: #fee2e2;
  --fond-info: #dbeafe;
  --fond-avertissement: #fef3c7;
  --ombre: 0 10px 30px rgb(15 23 42 / .10), 0 2px 6px rgb(15 23 42 / .06);
  --ombre-legere: 0 2px 10px rgb(15 23 42 / .08);
  --voile: rgb(15 23 42 / .45);
  --lien-souligne: rgb(44 74 117 / 0.45);
  --zebre: rgb(15 23 42 / 0.03);
  --rayon: 8px;
  --rayon-petit: 6px;
  --scrollbar: #475569;
  /* en-tête et barre latérale sombres sur un thème clair */
  --entete-fond: rgb(15 23 42 / .96);
  --entete-panneau: #0b1222;
  --entete-texte: #f1f5f9;
  --entete-texte-doux: #cbd5e1;
  --entete-texte-discret: #94a3b8;
  --entete-surface: #1e293b;
  --entete-surface-2: #1e293b;
  --entete-survol: rgb(241 245 249 / .08);
  --entete-fond-accent: #1e3a5f;
  --entete-bordure: rgb(241 245 249 / .14);
  --entete-bordure-forte: rgb(241 245 249 / .28);
  --entete-bordure-champ: #7b8aa1;
  --entete-primaire: #7aa2d6;
  --entete-primaire-survol: #9cc3f0;
  --entete-primaire-texte: #9cc3f0;
  --entete-sur-primaire: #0f172a;
  --entete-focus: #93c5fd;
  --entete-ombre: 0 6px 20px rgb(0 0 0 / .25);
}

[data-theme='clair'] {
  color-scheme: light;
  --theme-couleur: #fbfaf7;
  --fond: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f6f3ec;
  --panneau: #efebe2;
  --survol: rgb(31 29 26 / 0.05);
  --fond-accent: #faf0dc;
  --texte: #1f1d1a;
  --texte-doux: #3d3832;
  --texte-discret: #5c5449;
  --bordure: rgb(31 29 26 / 0.1);
  --bordure-forte: rgb(31 29 26 / 0.22);
  --bordure-champ: #7a7063;
  --primaire: #8a5a00;
  --primaire-survol: #6f4800;
  --primaire-texte: #7a4e00;
  --sur-primaire: #ffffff;
  --focus: #b45309;
  --succes: #166534;
  --erreur: #b91c1c;
  --info: #1e40af;
  --avertissement: #92400e;
  --fond-succes: #dcfce7;
  --fond-erreur: #fee2e2;
  --fond-info: #dbeafe;
  --fond-avertissement: #fef3c7;
  --ombre: 0 10px 30px rgb(15 23 42 / .10), 0 2px 6px rgb(15 23 42 / .06);
  --ombre-legere: 0 2px 10px rgb(15 23 42 / .08);
  --voile: rgb(15 23 42 / .45);
  --lien-souligne: rgb(122 78 0 / 0.45);
  --zebre: rgb(31 29 26 / 0.03);
  --rayon: 8px;
  --rayon-petit: 6px;
  --scrollbar: #5c5449;
}

[data-theme='nuit'] {
  color-scheme: dark;
  --theme-couleur: #0b1220;
  --fond: #0b1220;
  --surface: #111a2e;
  --surface-2: #17223a;
  --panneau: #070c16;
  --survol: rgb(230 237 247 / 0.06);
  --fond-accent: #0f2a35;
  --texte: #e6edf7;
  --texte-doux: #c3cfe0;
  --texte-discret: #8ea0b8;
  --bordure: rgb(230 237 247 / 0.16);
  --bordure-forte: rgb(230 237 247 / 0.3);
  --bordure-champ: #64758f;
  --primaire: #5ec8d8;
  --primaire-survol: #86d8e4;
  --primaire-texte: #7fd6e3;
  --sur-primaire: #06202a;
  --focus: #a5f3fc;
  --succes: #7fd79a;
  --erreur: #f7a0a0;
  --info: #93c5fd;
  --avertissement: #f6c177;
  --fond-succes: #0f2a1c;
  --fond-erreur: #2e1418;
  --fond-info: #10203a;
  --fond-avertissement: #2a2010;
  --ombre: 0 12px 32px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .35);
  --ombre-legere: 0 4px 14px rgb(0 0 0 / .35);
  --voile: rgb(0 0 0 / .72);
  --lien-souligne: rgb(127 214 227 / 0.45);
  --zebre: rgb(230 237 247 / 0.025);
  --rayon: 8px;
  --rayon-petit: 6px;
  --scrollbar: #8ea0b8;
}

[data-theme='bois'] {
  color-scheme: light;
  --theme-couleur: #3b2717;
  --fond: #f6efe3;
  --surface: #fffaf1;
  --surface-2: #f3e9d8;
  --panneau: #ead9bf;
  --survol: rgb(43 29 18 / 0.05);
  --fond-accent: #efe1c8;
  --texte: #2b1d12;
  --texte-doux: #4a3524;
  --texte-discret: #654a35;
  --bordure: rgb(43 29 18 / 0.1);
  --bordure-forte: rgb(43 29 18 / 0.22);
  --bordure-champ: #8a6a4f;
  --primaire: #7a4a24;
  --primaire-survol: #5f3a1c;
  --primaire-texte: #6b3e1c;
  --sur-primaire: #fff8ee;
  --focus: #3f6b4a;
  --succes: #2f6b3a;
  --erreur: #a3261b;
  --info: #2c5577;
  --avertissement: #8a4b08;
  --fond-succes: #e3efdc;
  --fond-erreur: #f6dcd6;
  --fond-info: #dde8f0;
  --fond-avertissement: #f6e6c9;
  --ombre: 0 10px 30px rgb(15 23 42 / .10), 0 2px 6px rgb(15 23 42 / .06);
  --ombre-legere: 0 2px 10px rgb(15 23 42 / .08);
  --voile: rgb(15 23 42 / .45);
  --lien-souligne: rgb(107 62 28 / 0.45);
  --zebre: rgb(43 29 18 / 0.03);
  --rayon: 10px;
  --rayon-petit: 6px;
  --scrollbar: #654a35;
  /* en-tête et barre latérale sombres sur un thème clair */
  --entete-fond: rgb(59 39 23 / .96);
  --entete-panneau: #2e1e11;
  --entete-texte: #f6efe3;
  --entete-texte-doux: #e3d3bb;
  --entete-texte-discret: #c2ad92;
  --entete-surface: #4a3220;
  --entete-surface-2: #4a3220;
  --entete-survol: rgb(246 239 227 / .08);
  --entete-fond-accent: #4f3a22;
  --entete-bordure: rgb(246 239 227 / .16);
  --entete-bordure-forte: rgb(246 239 227 / .30);
  --entete-bordure-champ: #a8907a;
  --entete-primaire: #a7c49a;
  --entete-primaire-survol: #c7d9b8;
  --entete-primaire-texte: #c7d9b8;
  --entete-sur-primaire: #23170d;
  --entete-focus: #c7d9b8;
  --entete-ombre: 0 6px 20px rgb(0 0 0 / .25);
}

[data-theme='contraste'] {
  color-scheme: dark;
  --theme-couleur: #000000;
  --fond: #000000;
  --surface: #000000;
  --surface-2: #111111;
  --panneau: #000000;
  --survol: rgb(255 255 255 / .12);
  --fond-accent: #1a1a00;
  --texte: #ffffff;
  --texte-doux: #ffffff;
  --texte-discret: #e6e6e6;
  --bordure: #ffffff;
  --bordure-forte: #ffffff;
  --bordure-champ: #ffffff;
  --primaire: #ffd400;
  --primaire-survol: #ffe766;
  --primaire-texte: #ffd400;
  --sur-primaire: #000000;
  --focus: #ffff00;
  --succes: #7cff7c;
  --erreur: #ff9a9a;
  --info: #9ad6ff;
  --avertissement: #ffd400;
  --fond-succes: #000000;
  --fond-erreur: #000000;
  --fond-info: #000000;
  --fond-avertissement: #000000;
  --ombre: 0 12px 32px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .35);
  --ombre-legere: 0 4px 14px rgb(0 0 0 / .35);
  --voile: rgb(0 0 0 / .72);
  --lien-souligne: rgb(255 212 0 / 0.45);
  --zebre: rgb(255 255 255 / 0.025);
  --rayon: 4px;
  --rayon-petit: 3px;
  --scrollbar: #e6e6e6;
}
/* --- Compléments par thème : séries des graphiques (contraste >= 3:1 sur --surface)
   et composantes RVB pour les variables --tblr-*-rgb de Tabler ------------------ */
:root, [data-theme='atelier'] {
  --serie-1: #c9a24b; --serie-2: #8dbbe6; --serie-3: #7fc98f; --serie-4: #f19083;
  --serie-5: #c4a7e7; --serie-6: #5ec8b8; --serie-7: #eba65e; --serie-8: #d6cbb5;
  --primaire-rgb: 201, 162, 75; --primaire-texte-rgb: 217, 181, 104; --fond-rgb: 20, 16, 13; --texte-rgb: 236, 227, 209;
  --texte-discret-rgb: 156, 142, 121; --succes-rgb: 127, 201, 143; --erreur-rgb: 241, 144, 131;
  --avertissement-rgb: 235, 166, 94; --info-rgb: 141, 187, 230;
}
[data-theme='bleu'] {
  --serie-1: #324b6b; --serie-2: #c2410c; --serie-3: #2563eb; --serie-4: #0f766e;
  --serie-5: #b91c1c; --serie-6: #7c3aed; --serie-7: #64748b; --serie-8: #0f172a;
  --primaire-rgb: 50, 75, 107; --primaire-texte-rgb: 44, 74, 117; --fond-rgb: 241, 245, 249; --texte-rgb: 15, 23, 42;
  --texte-discret-rgb: 71, 85, 105; --succes-rgb: 22, 101, 52; --erreur-rgb: 185, 28, 28;
  --avertissement-rgb: 146, 64, 14; --info-rgb: 30, 64, 175;
}
[data-theme='clair'] {
  --serie-1: #8a5a00; --serie-2: #1e40af; --serie-3: #0f766e; --serie-4: #b91c1c;
  --serie-5: #7c3aed; --serie-6: #c2410c; --serie-7: #475569; --serie-8: #1f1d1a;
  --primaire-rgb: 138, 90, 0; --primaire-texte-rgb: 122, 78, 0; --fond-rgb: 251, 250, 247; --texte-rgb: 31, 29, 26;
  --texte-discret-rgb: 92, 84, 73; --succes-rgb: 22, 101, 52; --erreur-rgb: 185, 28, 28;
  --avertissement-rgb: 146, 64, 14; --info-rgb: 30, 64, 175;
}
[data-theme='nuit'] {
  --serie-1: #5ec8d8; --serie-2: #f6c177; --serie-3: #7fd79a; --serie-4: #f7a0a0;
  --serie-5: #c4b5fd; --serie-6: #93c5fd; --serie-7: #f0abfc; --serie-8: #e6edf7;
  --primaire-rgb: 94, 200, 216; --primaire-texte-rgb: 127, 214, 227; --fond-rgb: 11, 18, 32; --texte-rgb: 230, 237, 247;
  --texte-discret-rgb: 142, 160, 184; --succes-rgb: 127, 215, 154; --erreur-rgb: 247, 160, 160;
  --avertissement-rgb: 246, 193, 119; --info-rgb: 147, 197, 253;
}
[data-theme='bois'] {
  --serie-1: #7a4a24; --serie-2: #2c5577; --serie-3: #2f6b3a; --serie-4: #a3261b;
  --serie-5: #6d4bc4; --serie-6: #8a4b08; --serie-7: #1f6a86; --serie-8: #2b1d12;
  --primaire-rgb: 122, 74, 36; --primaire-texte-rgb: 107, 62, 28; --fond-rgb: 246, 239, 227; --texte-rgb: 43, 29, 18;
  --texte-discret-rgb: 101, 74, 53; --succes-rgb: 47, 107, 58; --erreur-rgb: 163, 38, 27;
  --avertissement-rgb: 138, 75, 8; --info-rgb: 44, 85, 119;
}
[data-theme='contraste'] {
  --serie-1: #ffd400; --serie-2: #9ad6ff; --serie-3: #7cff7c; --serie-4: #ff9a9a;
  --serie-5: #e0b0ff; --serie-6: #ffffff; --serie-7: #ffa64d; --serie-8: #66ffff;
  --primaire-rgb: 255, 212, 0; --primaire-texte-rgb: 255, 212, 0; --fond-rgb: 0, 0, 0; --texte-rgb: 255, 255, 255;
  --texte-discret-rgb: 230, 230, 230; --succes-rgb: 124, 255, 124; --erreur-rgb: 255, 154, 154;
  --avertissement-rgb: 255, 212, 0; --info-rgb: 154, 214, 255;
}

/* --- Tabler : ses variables prennent les couleurs du thème ---------------------
   html[data-theme] (spécificité 0,1,1) l'emporte sur :root et [data-bs-theme] de Tabler. */
html[data-theme] {
  --tblr-primary: var(--primaire); --tblr-primary-rgb: var(--primaire-rgb);
  --tblr-primary-fg: var(--sur-primaire); --tblr-primary-darken: var(--primaire-survol);
  --tblr-primary-text-emphasis: var(--primaire-texte); --tblr-primary-bg-subtle: var(--fond-accent); --tblr-primary-border-subtle: var(--primaire);
  --tblr-body-bg: var(--fond); --tblr-body-bg-rgb: var(--fond-rgb);
  --tblr-body-color: var(--texte); --tblr-body-color-rgb: var(--texte-rgb);
  --tblr-emphasis-color: var(--texte); --tblr-emphasis-color-rgb: var(--texte-rgb);
  --tblr-heading-color: var(--texte);
  --tblr-secondary: var(--texte-discret); --tblr-secondary-rgb: var(--texte-discret-rgb);
  --tblr-muted: var(--texte-discret); --tblr-muted-rgb: var(--texte-discret-rgb);
  --tblr-secondary-color: var(--texte-discret); --tblr-tertiary-color: var(--texte-discret);
  --tblr-secondary-bg: var(--surface-2); --tblr-tertiary-bg: var(--surface-2);
  --tblr-bg-surface: var(--surface); --tblr-bg-surface-primary: var(--surface);
  --tblr-bg-surface-secondary: var(--surface-2); --tblr-bg-surface-tertiary: var(--surface-2);
  --tblr-bg-forms: var(--surface);
  --tblr-border-color: var(--bordure-forte); --tblr-border-color-translucent: var(--bordure);
  --tblr-border-active-color: var(--bordure-champ);
  --tblr-link-color: var(--primaire-texte); --tblr-link-color-rgb: var(--primaire-texte-rgb); --tblr-link-hover-color: var(--focus);
  --tblr-success: var(--succes); --tblr-success-rgb: var(--succes-rgb);
  --tblr-danger: var(--erreur); --tblr-danger-rgb: var(--erreur-rgb);
  --tblr-warning: var(--avertissement); --tblr-warning-rgb: var(--avertissement-rgb);
  --tblr-info: var(--info); --tblr-info-rgb: var(--info-rgb);
  --tblr-font-sans-serif: var(--police); --tblr-body-font-family: var(--police); --tblr-font-monospace: var(--police-mono);
  --tblr-border-radius: var(--rayon); --tblr-border-radius-sm: var(--rayon-petit); --tblr-border-radius-lg: var(--rayon);
  --tblr-active-bg: var(--fond-accent); --tblr-icon-color: var(--texte-discret);
  --tblr-code-bg: var(--surface-2); --tblr-code-color: var(--texte-doux);
  --tblr-highlight-bg: var(--fond-avertissement); --tblr-highlight-color: var(--texte);
  --tblr-disabled-bg: var(--surface-2);
  --tblr-form-valid-color: var(--succes); --tblr-form-valid-border-color: var(--succes);
  --tblr-form-invalid-color: var(--erreur); --tblr-form-invalid-border-color: var(--erreur);
}
.card { --tblr-card-bg: var(--surface); --tblr-card-border-color: var(--bordure); --tblr-card-cap-bg: var(--surface-2); --tblr-card-box-shadow: var(--ombre-legere); }
.table { --tblr-table-border-color: var(--bordure); --tblr-table-striped-bg: var(--zebre); --tblr-table-hover-bg: var(--survol); --tblr-table-active-bg: var(--fond-accent); color: var(--texte); }
.table thead th { color: var(--texte-doux); font-family: var(--police-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
/* champs : bordure à 3:1 au moins (WCAG 1.4.11) */
.form-control, .form-select, .form-check-input, textarea { border-color: var(--bordure-champ); background-color: var(--surface); color: var(--texte); }
.form-control::placeholder { color: var(--texte-discret); opacity: 1; }
.form-check-input:checked { background-color: var(--primaire); border-color: var(--primaire); }
.form-label, .form-check-label { color: var(--texte); }
.btn { --tblr-btn-color: var(--texte); --tblr-btn-bg: var(--surface); --tblr-btn-border-color: var(--bordure-champ); --tblr-btn-hover-bg: var(--surface-2); --tblr-btn-hover-color: var(--texte); --tblr-btn-hover-border-color: var(--primaire); min-height: 44px; font-weight: 500; }
.btn-sm { min-height: 36px; }
.btn-primary, .btn-primaire { --tblr-btn-color: var(--sur-primaire); --tblr-btn-bg: var(--primaire); --tblr-btn-border-color: var(--primaire);
  --tblr-btn-hover-color: var(--sur-primaire); --tblr-btn-hover-bg: var(--primaire-survol); --tblr-btn-hover-border-color: var(--primaire-survol);
  --tblr-btn-active-color: var(--sur-primaire); --tblr-btn-active-bg: var(--primaire-survol); --tblr-btn-active-border-color: var(--primaire-survol);
  --tblr-btn-disabled-color: var(--sur-primaire); --tblr-btn-disabled-bg: var(--primaire); --tblr-btn-disabled-border-color: var(--primaire); }
.btn-outline-secondary { --tblr-btn-color: var(--texte-doux); --tblr-btn-border-color: var(--bordure-champ); --tblr-btn-hover-color: var(--texte); --tblr-btn-hover-bg: var(--survol); --tblr-btn-hover-border-color: var(--primaire); }
.badge { --tblr-badge-color: var(--texte); }
.bg-secondary-lt, .bg-light { background-color: var(--surface-2) !important; color: var(--texte) !important; }
.text-muted, .text-secondary { color: var(--texte-discret) !important; }
.alert { color: var(--texte); }
code { color: var(--texte-doux); background: var(--surface-2); padding: .05rem .3rem; border-radius: var(--rayon-petit); }
hr { border-color: var(--bordure-forte); opacity: 1; }
a { color: var(--primaire-texte); text-decoration-color: var(--lien-souligne); text-underline-offset: 3px; }
a:hover { color: var(--focus); text-decoration-color: currentColor; }
::selection { background: var(--primaire); color: var(--sur-primaire); }

html { font-size: 18px; scrollbar-color: var(--scrollbar) var(--fond); scroll-padding-top: 5rem; scroll-padding-bottom: 3rem; }
/* Hauteur libre : Tabler fixe html/body à 100 %, ce qui empêchait de faire défiler
   jusqu'au dernier bloc (caché sous le pied de page fixe). La marge du bas est
   portée par <main>, dont la hauteur suit le contenu. */
html, body.main-content { height: auto; min-height: 100%; }
body.main-content { margin: 0; background-color: var(--fond); color: var(--texte); font-family: var(--police); -webkit-font-smoothing: antialiased;
  transition: background-color var(--duree-transition) ease, color var(--duree-transition) ease; }
/* Titres : Cormorant Garamond (petit œil : tailles compensées) */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--police-titre); font-weight: 600; letter-spacing: .005em; color: var(--texte); text-wrap: balance; }
h4, h5, h6 { color: var(--texte); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Focus visible : 3 px, couleur de focus du thème (celle de l'en-tête dans l'en-tête) */
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; box-shadow: none !important; }
[data-theme='contraste'] :focus-visible { outline-width: 4px !important; outline-offset: 3px; }
[data-theme='contraste'] .card, [data-theme='contraste'] .form-control, [data-theme='contraste'] .form-select, [data-theme='contraste'] .btn { border-width: 2px; }
[data-theme='contraste'] a { text-decoration: underline; text-decoration-thickness: 2px; }

/* Lien d'évitement */
.evitement { position: absolute; left: -999px; top: 0; background: var(--primaire); color: var(--sur-primaire); padding: .6rem 1rem; z-index: 2000; font-weight: 600; text-decoration: none; }
.evitement:focus { left: 1rem; top: .5rem; color: var(--sur-primaire); }

/* --- En-tête collant : semi-transparent, flou, filet bas ----------------------------- */
.entete {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap;
  padding: .45rem var(--marge-page); min-height: 62px;
  /* couleurs propres à l'en-tête (sombre sur les thèmes « bleu » et « bois ») */
  --texte: var(--entete-texte); --texte-doux: var(--entete-texte-doux); --texte-discret: var(--entete-texte-discret);
  --surface: var(--entete-surface); --surface-2: var(--entete-surface-2); --survol: var(--entete-survol);
  --fond-accent: var(--entete-fond-accent); --bordure: var(--entete-bordure); --bordure-forte: var(--entete-bordure-forte);
  --bordure-champ: var(--entete-bordure-champ); --primaire: var(--entete-primaire); --primaire-survol: var(--entete-primaire-survol);
  --primaire-texte: var(--entete-primaire-texte); --sur-primaire: var(--entete-sur-primaire); --focus: var(--entete-focus);
  --panneau: var(--entete-panneau);
  color: var(--texte); background: var(--entete-fond);
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--bordure); box-shadow: var(--entete-ombre);
}
.entete svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Marque : logo 40 px + nom (Cormorant Garamond) + sous-titre (Plex Mono, majuscules) */
.marque {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: center;
  color: var(--texte); text-decoration: none; margin-right: auto; min-height: 44px; order: 0;
}
a.marque:hover { color: var(--texte); }
.marque .logo { display: block; grid-row: 1 / span 2; width: 40px; height: 40px; }
.marque .nom { font-family: var(--police-titre); font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.marque .sous-titre { font-family: var(--police-mono); font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--primaire-texte); line-height: 1.3; }
/* Logo : couleurs du thème (classes, pas d'attribut style) */
.entete .logo { stroke: none; }
.logo-cadre { fill: var(--surface); stroke: var(--primaire); stroke-width: 1.5; }
.logo-grille { fill: none; stroke: var(--bordure-forte); stroke-width: 1; }
.logo-aire { fill: var(--primaire); fill-opacity: .22; stroke: none; }
.logo-courbe { fill: none; stroke: var(--primaire-texte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.logo-point { fill: var(--focus); stroke: none; }

/* Menu principal : capitales espacées en Plex Mono, page active soulignée */
.menu-principal { order: 1; }
.menu-principal > ul { list-style: none; display: flex; flex-wrap: wrap; gap: .15rem; margin: 0; padding: 0; }
.menu-principal a, .entete .sous-menu-bouton {
  display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem .7rem .45rem;
  color: var(--texte-doux); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: var(--police-mono); font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.menu-principal > ul > li > a > svg, .menu-principal > ul > li > .sous-menu-bouton > svg { display: none; } /* icônes : sous-menus et petit écran */
.menu-principal a:hover, .entete .sous-menu-bouton:hover, .entete .sous-menu-bouton[aria-expanded="true"] { color: var(--texte); border-bottom-color: var(--bordure-champ); background: var(--survol); }
/* page active : couleur ET soulignement (pas seulement la couleur) */
.menu-principal a[aria-current="page"], .entete .sous-menu-bouton[data-actif="oui"] { color: var(--primaire-texte); border-bottom-color: var(--primaire); }
.entete svg { width: 20px; height: 20px; }
.sous-menu-bouton .fleche { font-size: .7rem; letter-spacing: 0; }
/* Sous-menus de l'en-tête : « Configuration » et menu utilisateur — TB.brancherSousMenu */
.entete .sous-menu { position: relative; }
.entete .sous-menu > ul { list-style: none; position: absolute; left: 0; top: 100%; z-index: 1100; display: flex; flex-direction: column; gap: 2px; min-width: 230px;
  margin: .25rem 0 0; padding: .35rem; background: var(--panneau); border: 1px solid var(--bordure-forte); border-radius: var(--rayon); box-shadow: var(--ombre); }
.entete .sous-menu > ul[hidden] { display: none; }
.entete .sous-menu > ul a, .entete .sous-menu > ul button {
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px; padding: .5rem .75rem; white-space: nowrap; text-align: left;
  color: var(--texte); background: none; border: 0; border-left: 3px solid transparent; border-radius: var(--rayon-petit); cursor: pointer;
  font-family: var(--police); font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none;
}
.entete .sous-menu > ul a:hover, .entete .sous-menu > ul button:hover { background: var(--survol); color: var(--texte); border-bottom-color: transparent; }
.entete .sous-menu > ul a[aria-current="page"] { border-left-color: var(--primaire); background: var(--fond-accent); color: var(--primaire-texte); }
.entete .sous-menu > ul svg { display: block; }
.entete .separateur { height: 1px; margin: .25rem .3rem; background: var(--bordure-forte); }
.entete .titre-groupe { display: flex; align-items: center; gap: .55rem; padding: .35rem .75rem .15rem; color: var(--texte-discret);
  font-family: var(--police-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.entete .titre-groupe svg { width: 18px; height: 18px; }
/* Choix du thème : coche ✓ + état annoncé (aria-pressed), aperçu des couleurs */
.choix-theme .coche { width: 1rem; text-align: center; color: var(--primaire-texte); visibility: hidden; font-weight: 700; }
.choix-theme[aria-pressed="true"] .coche { visibility: visible; }
.choix-theme[aria-pressed="true"] { background: var(--fond-accent) !important; }
.choix-theme small { color: var(--texte-discret); font-size: .78rem; }
.apercu-theme { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%;
  background: var(--fond); border: 1px solid var(--bordure-champ); }
.apercu-theme > span { width: .7rem; height: .7rem; border-radius: 50%; background: var(--primaire); }

/* Menu utilisateur (en-tête) : bouton « icône + nom ▾ », liste alignée à droite */
.bloc-utilisateur { order: 2; }
.entete .bloc-utilisateur > .sous-menu-bouton { max-width: 240px; letter-spacing: .06em; text-transform: none; font-size: .8rem; }
.bloc-utilisateur > .sous-menu-bouton .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete .bloc-utilisateur > ul { left: auto; right: 0; }
.bloc-utilisateur > ul form { margin: 0; }

/* Bouton « Menu » (petit écran, ajouté par commun.js) */
.bouton-menu { display: none; order: 1; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; padding: .4rem .75rem;
  color: var(--texte); background: transparent; border: 1px solid var(--bordure-champ); border-radius: var(--rayon);
  font-family: var(--police-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.bouton-menu:hover { background: var(--survol); border-color: var(--primaire); }
.bouton-menu[aria-expanded="true"] { border-color: var(--primaire); background: var(--fond-accent); }

/* Sélecteur de langue (en-tête) : toujours à droite, même sans menu (page de connexion) */
.choix-langue { order: 3; position: relative; color: var(--texte); font-size: .8rem; }
.choix-langue summary { list-style: none; display: flex; align-items: center; gap: .3rem; min-height: 44px; min-width: 44px; padding: .35rem .5rem; cursor: pointer;
  border-radius: var(--rayon-petit); font-family: var(--police-mono); letter-spacing: .08em; }
.choix-langue summary::-webkit-details-marker { display: none; }
.choix-langue summary::after { content: "▾"; font-size: .7rem; }
.choix-langue summary:hover { background: var(--survol); }
.choix-langue ul { position: absolute; right: 0; top: 100%; margin: .25rem 0 0; padding: .3rem; list-style: none; background: var(--panneau); border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 140px; z-index: 1100; }
.choix-langue ul button { display: block; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: .45rem .7rem;
  border-radius: var(--rayon-petit); color: var(--texte); font: inherit; font-family: var(--police); font-size: .9rem; cursor: pointer; }
.choix-langue ul button:hover { background: var(--survol); }
.choix-langue ul button[aria-current="true"] { font-weight: 600; color: var(--primaire-texte); border-left-color: var(--primaire); }
.i18n-attente body { visibility: hidden; }

/* Petit écran : menu replié derrière « Menu », pleine largeur sous la marque */
@media (max-width: 1240px) {
  .entete.avec-bouton-menu .bouton-menu { display: inline-flex; }
  .entete.avec-bouton-menu .menu-principal { order: 10; flex-basis: 100%; display: none; padding: .25rem 0 .5rem; border-top: 1px solid var(--bordure); }
  .entete.avec-bouton-menu .menu-principal.ouvert { display: block; }
  .entete.avec-bouton-menu .menu-principal > ul { flex-direction: column; gap: 2px; }
  .entete.avec-bouton-menu .menu-principal a, .entete.avec-bouton-menu .menu-principal .sous-menu-bouton { width: 100%; border-bottom: 0; border-left: 3px solid transparent; }
  .entete.avec-bouton-menu .menu-principal a[aria-current="page"], .entete.avec-bouton-menu .menu-principal .sous-menu-bouton[data-actif="oui"] { border-left-color: var(--primaire); background: var(--fond-accent); }
  .entete.avec-bouton-menu .menu-principal > ul > li > a > svg, .entete.avec-bouton-menu .menu-principal > ul > li > .sous-menu-bouton > svg { display: block; }
  .entete.avec-bouton-menu .menu-principal .sous-menu > ul { position: static; box-shadow: none; margin: 0 0 0 1rem; }
}
@media (max-width: 600px) {
  .marque .sous-titre { display: none; }
  .marque .nom { font-size: 1.3rem; }
  .marque .logo { width: 34px; height: 34px; }
  /* nom de l'utilisateur : masqué à l'écran, conservé pour les lecteurs d'écran */
  .bloc-utilisateur > .sous-menu-bouton .nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bouton-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .entete { gap: .35rem; }
}

/* Fiche « Mon compte » */
.grille-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1rem; }
.table-profil th { width: 38%; font-weight: 600; color: var(--texte-2); white-space: nowrap; }
.table-profil td { word-break: break-word; }
.avatar-compte { width: 56px; height: 56px; border-radius: 50%; background: var(--primaire); color: var(--sur-primaire); display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; }
.entete-compte { display: flex; align-items: center; gap: 1rem; }

/* Page de connexion */
.bloc-connexion { max-width: 440px; margin: 3rem auto; }
.bloc-connexion h1 { font-size: 2rem; margin-bottom: .25rem; }
.w-100 { width: 100%; }

/* --- Pied de page fixe, sobre --------------------------------------------------- */
.pied {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1030; text-align: center;
  padding: .45rem; font-family: var(--police-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-discret); background: color-mix(in srgb, var(--fond) 92%, transparent); border-top: 1px solid var(--bordure);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* --- Mise en page ------------------------------------------------------------ */
main.page-body { padding: 1.25rem 2rem 5rem; max-width: 1680px; margin: 0 auto; } /* 5rem : place du pied de page fixe */
.titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.titre-page h1 { margin: 0 0 .25rem; font-size: 2.1rem; }
.titre-page p { margin: 0; color: var(--texte-2); }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1rem; }
.grille-cartes > * { min-width: 0; }
.card > h2, .card-body > h2 { font-size: 1.4rem; margin-bottom: .75rem; }

/* --- Boutons et champs (.btn-primaire : bouton d'action principal, voir plus haut) --- */
.btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.champ { display: flex; flex-direction: column; gap: .25rem; }
.champ .form-label, .etiquette { font-weight: 600; font-size: .85rem; margin: 0; }
.champ .aide { font-size: .75rem; color: var(--texte-2); font-weight: 400; }
.case { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .875rem; margin: 0; }
.case .form-check-input { margin: 0; flex-shrink: 0; }
.ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sans-cadre { border: 0; padding: 0; margin: 0; min-width: 0; }
.sans-cadre legend { padding: 0; margin-bottom: .3rem; float: none; width: auto; }
input[type="color"].form-control-color { width: 48px; }

/* Choix segmentés (boutons radio) */
.segments { display: flex; flex-wrap: wrap; gap: .3rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.segments label { position: relative; font-weight: 500; font-size: .8rem; margin: 0; }
.segments input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.segments span {
  display: flex; align-items: center; justify-content: center; min-height: 36px; padding: .3rem .6rem; min-width: 2.6rem; text-align: center;
  border: 1px solid var(--bordure-champ); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte);
}
.segments label:hover span { background: var(--surface-2); }
.segments input:checked + span { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }
.segments input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- Variations, badges ------------------------------------------------------- */
.hausse { color: var(--hausse) !important; }
.baisse { color: var(--baisse) !important; }
.neutre { color: var(--texte-2) !important; }
.badge.etat { background: var(--fond-accent); color: var(--bg-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.badge.etat.erreur { background: var(--fond-erreur); color: var(--baisse); }
.pastille { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--bordure-forte); }

/* Carte produit (accueil) */
.produit { display: flex; flex-direction: column; gap: .4rem; position: relative; }
.produit:hover { border-color: var(--bg-secondary); }
.produit .haut { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.produit h3 { font-family: var(--police); font-size: .95rem; font-weight: 600; margin: 0; }
.produit h3 a { color: var(--bg-primary); text-decoration: none; }
.produit .symbole { color: var(--texte-2); font-size: .75rem; }
.produit .cours { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte); }
.produit .variations { display: flex; gap: 1rem; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.produit .variations small { display: block; font-weight: 500; color: var(--texte-2); font-size: .7rem; }
.produit .spark { height: 70px; }
.produit .lien-global::after { content: ""; position: absolute; inset: 0; }
.produit .vide { color: var(--texte-2); font-size: .85rem; margin: 0; }

/* --- Studio graphique ----------------------------------------------------------- */
.studio { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.panneau { position: sticky; top: 76px; max-height: calc(100vh - 140px); overflow: auto; overscroll-behavior: contain; }
.panneau details { border-bottom: 1px solid var(--bord); }
.panneau details:last-of-type { border-bottom: 0; }
.panneau summary {
  cursor: pointer; padding: .8rem 1rem; font-weight: 600; list-style: none; display: flex;
  justify-content: space-between; align-items: center; color: var(--bg-primary);
}
.panneau summary::-webkit-details-marker { display: none; }
.panneau summary::after { content: "▸"; transition: transform .15s; color: var(--texte-2); }
.panneau details[open] summary::after { transform: rotate(90deg); }
.panneau .contenu { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.liste-produits { display: flex; flex-direction: column; gap: .35rem; max-height: 240px; overflow: auto; padding: .2rem; }
.liste-produits small { color: var(--texte-2); }

.zone-graphique { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.barre-outils { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.barre-outils h2 { margin: 0; font-size: 1.35rem; }
.conteneur-canvas { position: relative; width: 100%; height: 460px; }
.message-vide { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--texte-2); padding: 2rem; pointer-events: none; }
.avertissements { margin: 0 0 .5rem; }
.zone-zoom { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 .5rem; padding: .5rem .9rem; }
.zone-zoom[hidden] { display: none; }
.graphique-studio { width: 100%; height: 100%; }
.graphique-studio:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.avertissements:empty { display: none; }
.description { color: var(--texte-2); font-size: .85rem; margin: 0; }
.aide-clavier { font-size: .75rem; color: var(--texte-2); margin: .5rem 0 0; }
summary.titre-depliable { cursor: pointer; font-weight: 600; color: var(--bg-primary); }

/* Tableaux (classe Tabler .table) */
/* position: relative : bloc conteneur des textes .visuellement-cache (position absolue) des cellules,
   sinon ils échappent au défilement et élargissent la page sur mobile */
.tableau-defile { position: relative; overflow: auto; max-height: 480px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.tableau-defile .table { margin: 0; }
.table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Dialogues */
dialog {
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.5rem; background: var(--surface); color: var(--texte);
  box-shadow: var(--ombre); width: min(600px, 92vw);
}
dialog::backdrop { background: var(--voile); }
dialog form { display: flex; flex-direction: column; gap: .9rem; }
dialog h2 { font-size: 1.5rem; margin: 0; }
dialog .actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* Notifications (région live) */
#notifications { position: fixed; right: 1rem; bottom: 4rem; display: flex; flex-direction: column; gap: .5rem; z-index: 1100; max-width: min(440px, 92vw); }
.notification {
  background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--bg-secondary);
  border-radius: var(--rayon); padding: .7rem 1rem; box-shadow: var(--ombre-legere); font-size: .875rem; color: var(--texte);
}
.notification.erreur { border-left-color: var(--baisse); }
.notification.succes { border-left-color: var(--hausse); }

.resultats-recherche { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.resultats-recherche li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.journal { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.journal li { padding: .4rem 0; border-bottom: 1px solid var(--bord); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.journal li:last-child { border-bottom: 0; }
.journal time { color: var(--texte-2); font-variant-numeric: tabular-nums; }

/* --- Analyse (ECharts) -------------------------------------------------------- */
.barre-analyse { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1rem; }
.ligne-reglages { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.puces { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.graphique-echarts { width: 100%; height: 600px; }
.graphique-echarts:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.barre-outils .segments .btn.active { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }

/* --- Tendances --------------------------------------------------------------- */
.graphique-tendances { height: 680px; }
.info-tangente { margin: 0 0 .25rem; font-size: .85rem; color: var(--texte); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.info-tangente .pastille-tangente { display: inline-block; width: 18px; height: 3px; background: #d97706; vertical-align: middle; margin-right: .35rem; }
.verdict { font-size: .95rem; margin: 0; }
.verdict strong { color: var(--bg-primary); }

/* --- Panneau flottant des réglages des graphiques (panneau-flottant.js) ------------------
   Bureau : panneau non modal ou pilule, position fixe EN HAUT ET CENTRÉE sous l'en-tête
   (left / top / taille posés par le script) ; z-index 1040 : au-dessus du contenu, sous les
   sous-menus de l'en-tête et les notifications (1100). Écran étroit (.pf-mobile) : bloc
   repliable dans le flux, en haut du contenu. */
.pf { position: relative; }
/* place réservée en haut du contenu : la pilule (≈ 48 px, à 8 px sous l'en-tête) ne couvre pas
   le titre de la page (contenu à 22 px + 45 px sous l'en-tête) */
.pf:not(.pf-mobile) { height: 2.5rem; }
.pf-barre, .pf-panneau { position: fixed; z-index: 1040; }
.pf-barre[hidden], .pf-panneau[hidden] { display: none !important; }
.pf-barre {
  display: flex; align-items: stretch; max-width: min(40rem, calc(100vw - 1rem));
  border: 1px solid var(--bg-primary); border-radius: 999px; background: var(--surface); color: var(--texte);
  box-shadow: var(--ombre-legere);
}
.pf-poignee-barre {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 .35rem 0 .7rem; border: 0; border-right: 1px solid var(--bord);
  border-radius: 999px 0 0 999px; background: transparent; color: var(--texte-2); cursor: grab; touch-action: none; font-size: 1.05rem;
}
.pf-deplier {
  display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 44px; padding: .3rem 1rem .3rem .6rem;
  border: 0; border-radius: 0 999px 999px 0; background: transparent; color: var(--texte); cursor: pointer; font: inherit; font-size: .85rem;
}
.pf-poignee-barre:hover, .pf-deplier:hover { background: var(--surface-2); }
.pf-poignee-barre:active, .pf-poignee:active { cursor: grabbing; }
.pf-deplier svg { flex: none; color: var(--bg-primary); }
.pf-libelle { font-weight: 600; color: var(--bg-primary); white-space: nowrap; }
.pf-resume { color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pf-resume:not(:empty)::before { content: "· "; }
.pf-alerte { color: var(--erreur); font-weight: 600; white-space: nowrap; }
.pf-impression { display: none; }
.pf-panneau {
  display: flex; flex-direction: column; width: min(var(--pf-largeur, 46rem), calc(100vw - 2rem)); max-width: calc(100vw - 1rem);
  border: 1px solid var(--bordure-forte); border-top: 3px solid var(--primaire); border-radius: var(--rayon);
  background: var(--surface); color: var(--texte); box-shadow: var(--ombre);
}
.pf-panneau:focus { outline: none; }
.pf-tete { display: flex; align-items: stretch; gap: .4rem; padding: .3rem .4rem 0; }
.pf-poignee {
  flex: 1 1 auto; display: flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 0; padding: .2rem .6rem;
  border: 1px dashed transparent; border-radius: 4px; background: transparent; color: var(--texte);
  cursor: grab; touch-action: none; text-align: left; font: inherit;
}
.pf-poignee:hover { border-color: var(--bordure-forte); }
.pf-grip { color: var(--texte-2); font-size: 1.05rem; }
.pf-titre { font-size: 1rem; font-weight: 600; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-titre-mobile { display: none; margin: 0; flex: 1 1 auto; align-self: center; padding-left: .4rem; }
.pf-reduire { flex: none; min-height: 44px; align-self: center; }
.pf-resume-panneau { margin: .1rem 1rem .35rem; color: var(--texte-2); font-size: .8rem; }
.pf-contenu {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: .25rem 1rem 1.5rem; border-top: 1px solid var(--bord);
}
/* formulaires déplacés dans le panneau : sans leur cadre de carte */
.pf-contenu .card { border: 0; box-shadow: none; background: transparent; margin: 0; padding: 0; }
.pf-contenu .card-body { padding: 0; }
.pf-contenu .segments .btn.active { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }
.pf-contenu details.pf-groupe { border-bottom: 1px solid var(--bord); }
.pf-contenu details.pf-groupe:last-child { border-bottom: 0; }
.pf-contenu details.pf-groupe > summary {
  cursor: pointer; padding: .65rem 0; font-weight: 600; list-style: none; display: flex;
  justify-content: space-between; align-items: center; color: var(--bg-primary); min-height: 44px;
}
.pf-contenu details.pf-groupe > summary::-webkit-details-marker { display: none; }
.pf-contenu details.pf-groupe > summary::after { content: "▸"; color: var(--texte-2); }
.pf-contenu details.pf-groupe[open] > summary::after { transform: rotate(90deg); }
.pf-groupe-corps { padding: 0 0 .9rem; display: flex; flex-direction: column; gap: .8rem; }
.pf-groupes details.pf-groupe > .contenu { display: flex; flex-direction: column; gap: .8rem; padding: 0 0 .9rem; }
.pf-redim {
  position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 4px; border: 0; background: transparent; color: var(--texte-2); cursor: nwse-resize; touch-action: none;
}
.pf-redim:hover, .pf-redim:focus-visible { color: var(--bg-primary); }
.pf-redim:focus-visible { outline-offset: -3px; }
/* écran étroit : bloc dans le flux, pleine largeur, en haut du contenu */
.pf.pf-mobile { margin-bottom: 1rem; }
.pf-mobile .pf-barre, .pf-mobile .pf-panneau { position: static; left: auto; top: auto; width: auto; max-width: none; }
.pf-mobile .pf-barre { border-radius: var(--rayon); }
.pf-mobile .pf-deplier { flex: 1; border-radius: var(--rayon); }
.pf-mobile .pf-poignee-barre, .pf-mobile .pf-poignee, .pf-mobile .pf-redim { display: none; }
.pf-mobile .pf-titre-mobile { display: block; }
.pf-mobile .pf-panneau { box-shadow: none; }
.pf-mobile .pf-contenu { overflow: visible; padding-bottom: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .pf:not(.pf-mobile) .pf-panneau { transition: box-shadow .15s ease; }
  .pf-contenu details.pf-groupe > summary::after { transition: transform .15s; }
}
/* Studio graphique : réglages dans le panneau flottant, graphique sur toute la largeur */
.studio.studio-pf { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
  .studio { grid-template-columns: 1fr; }
  .panneau { position: static; max-height: none; }
  main.page-body { padding: 1rem 1rem 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .entete, .pied, .panneau, .pf-barre, .pf-panneau, .pf-annonce, .barre-outils .groupe-btn, #notifications { display: none !important; }
  .pf { height: auto !important; }
  .pf-impression { display: block !important; margin: 0 0 .5rem; color: #000; }
  .studio { grid-template-columns: 1fr; }
}

/* --- Jetons MCP (Mon compte, Administration) ------------------------------------ */
.grille-compte > .carte-pleine { grid-column: 1 / -1; }
.carte-jetons .description { color: var(--texte-2); margin-bottom: .5rem; }
.adresse-mcp code, .jeton-nouveau code { word-break: break-all; }
.ligne-jeton { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) auto; gap: .75rem 1rem; align-items: end; }
.ligne-jeton .champ-bouton-jeton { justify-content: flex-end; }
@media (max-width: 700px) { .ligne-jeton { grid-template-columns: 1fr; } }
.formulaire-jeton fieldset:disabled { opacity: .6; }
.erreur-jeton { color: var(--baisse); font-weight: 600; margin: .4rem 0 0; min-height: 1.2em; }
.erreur-jeton:empty { min-height: 0; }
.jeton-nouveau { border: 2px solid var(--avertissement); background: var(--fond-avertissement); border-radius: var(--rayon); padding: 1rem; margin: .75rem 0 1rem; }
.jeton-nouveau h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.jeton-nouveau .avertissement-jeton { color: var(--avertissement); margin-bottom: .6rem; }
.bloc-copiable { margin-bottom: .75rem; }
.bloc-copiable .entete-bloc { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.bloc-copiable pre { margin: 0; padding: .6rem .75rem; background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon); white-space: pre-wrap; word-break: break-all; font-size: .8rem; color: var(--texte); }
.bloc-copiable pre.jeton-valeur { font-size: .95rem; font-weight: 600; user-select: all; -webkit-user-select: all; }
.titre-tableau-jetons { font-size: .95rem; margin: .75rem 0 .25rem; }
.apercu-jeton { font-family: var(--tblr-font-monospace, monospace); letter-spacing: .05em; }
.badge-jeton { font-weight: 600; font-size: .8rem; border: 1px solid; white-space: nowrap; }
.badge-jeton.jeton-actif { background: var(--fond-succes); color: var(--succes); border-color: var(--succes); }
.badge-jeton.jeton-expire { background: var(--surface-2); color: var(--texte-discret); border-color: var(--bordure-forte); }
.badge-jeton.jeton-revoque { background: var(--fond-erreur); color: var(--erreur); border-color: var(--erreur); }
.badge-jeton.jeton-inutilisable { background: var(--fond-avertissement); color: var(--avertissement); border-color: var(--avertissement); }
.raison-jeton { display: inline-block; font-size: .8rem; color: var(--avertissement); margin-left: .25rem; }
.groupe-jetons .entete-groupe-jetons th, .groupe-jetons .entete-groupe-jetons td { background: var(--surface-2); border-top: 2px solid var(--bord); font-weight: 600; }
.groupe-jetons .entete-groupe-jetons small { font-weight: 400; margin-left: .5rem; }

/* Petit écran : tableaux larges des cartes défilant horizontalement (pas de débordement de page) */
@media (max-width: 700px) {
  .card-table { display: block; overflow-x: auto; }
}

/* --- Catalogue des actions (page Produits, recherche commune TB.catalogue) ------------------------ */
.filtres-catalogue { display: grid; grid-template-columns: minmax(min(260px, 100%), 2fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .75rem; align-items: end; }
.explorateur { min-width: 0; }
.filtres-catalogue > * { min-width: 0; }
.filtres-catalogue .form-control, .filtres-catalogue .form-select { max-width: 100%; }
/* mobile : une colonne (la grille auto-fit gardait 977 px de large à 390 px) */
@media (max-width: 700px) { .filtres-catalogue { grid-template-columns: 1fr; } }
.etat-explorateur { margin: .75rem 0 .5rem; font-weight: 500; }
.tableau-catalogue { max-height: 70vh; max-width: 100%; }
.tableau-catalogue .table td, .tableau-catalogue .table th { vertical-align: middle; }
.tableau-catalogue .nom-titre { font-weight: 500; min-width: 12rem; }
.tableau-catalogue td:first-child { width: 1%; }
.bouton-favori { min-width: 2.5rem; font-size: 1.1rem; line-height: 1; }
.bouton-favori[aria-pressed="true"] { color: var(--primaire-texte); border-color: var(--primaire); background: var(--fond-accent); }
.badge.etat.historique-charge { background: var(--fond-succes); color: var(--succes); }
.badge.etat.historique-mis_de_cote, .badge.etat.historique-radie { background: var(--surface-2); color: var(--texte-discret); }
.badge.etat.historique-demande { background: var(--fond-info); color: var(--info); }
.pagination-catalogue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
#zone-admin { margin-top: 2rem; }
.titre-admin h2 { font-size: 1.6rem; margin: 0 0 .25rem; }
.grille-admin { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); margin-bottom: 1.5rem; }
.grille-admin h3, #titre-liste { font-size: 1.2rem; margin-bottom: .75rem; }
.ligne-recherche { display: flex; gap: .5rem; flex-wrap: wrap; }
.ligne-recherche > input { flex: 1 1 12rem; min-width: 0; }
.recherche-catalogue { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.recherche-catalogue .resultats-catalogue { margin-top: .35rem; max-height: 320px; overflow: auto; }
.recherche-catalogue .resultats-catalogue:empty { display: none; }
.resultats-recherche li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.etat-recherche:empty { display: none; }
/* État du chargement d'un historique (texte explicite, couleur en complément) */
.etat-chargement { margin: .5rem 0; padding: .55rem .8rem; border: 1px solid var(--bordure-forte); border-left: 4px solid var(--info); border-radius: var(--rayon); background: var(--fond-info); color: var(--texte); }
.etat-chargement[data-type="succes"] { border-left-color: var(--succes); background: var(--fond-succes); }
.etat-chargement[data-type="erreur"] { border-left-color: var(--erreur); background: var(--fond-erreur); }
.etat-chargement[data-type="avertissement"] { border-left-color: var(--avertissement); background: var(--fond-avertissement); }
.etat-chargement:empty { display: none; }
/* Accueil : aucun favori */
.accueil-vide { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; grid-column: 1 / -1; }
.accueil-vide p { margin: 0; }

/* Petit écran (≈ 390 px) : rien ne dépasse la largeur de la page ; les tableaux défilent dans leur cadre */
@media (max-width: 700px) {
  main.page-body { padding: .9rem .75rem 5rem; }
  .ligne-champs { grid-template-columns: 1fr; }
  .card, .card-body, section, form, fieldset { min-width: 0; }
  .titre-page h1 { font-size: 1.7rem; }
  .tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tableau-defile .card-table { display: table; overflow: visible; }
  .resultats-recherche li { flex-wrap: wrap; }
  .pagination-catalogue #e-page { order: -1; flex-basis: 100%; }
}
/* Mon compte : changement du mot de passe */
.formulaire-mdp { display: flex; flex-direction: column; gap: .75rem; max-width: 32rem; }
.succes-mdp { color: var(--succes); font-weight: 600; margin: 0; }
.succes-mdp:empty { display: none; }