/* Apparences de l'application : moderne (défaut), classique, sombre, clair, ramsay.
   Le thème actif est posé sur <html data-theme="…">. */

:root {
  --chrome-bg: var(--rs-navy);
  --chrome-side-bg: var(--rs-navy-2);
  --chrome-fg: #fff;
  --chrome-fg-2: rgba(255,255,255,.72);
  --chrome-fg-3: rgba(255,255,255,.5);
  --chrome-soft: rgba(255,255,255,.08);
  --chrome-active: rgba(255,255,255,.12);
  --chrome-line: rgba(255,255,255,.1);
  --chrome-bar: var(--tm-yellow);
  --r-card: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --heading-font: inherit;
}
html { transition: background-color .25s; }
body { background: var(--tm-neutral-25); }

/* ---------- CLASSIQUE ---------- */
:root[data-theme="classique"] {
  --font-sans: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --heading-font: 'Merriweather', Georgia, serif;
  --tm-neutral-25: #f3f2ee;
  --tm-neutral-50: #ebe9e3;
  --tm-yellow: #c9a227;
  --r-card: 4px; --r-md: 3px; --r-sm: 3px;
  --shadow-sm: none; --shadow-xs: none; --shadow-md: 0 1px 2px rgba(0,0,0,.08);
  --border-default: #d6d3cb; --border-subtle: #e4e1da;
}
:root[data-theme="classique"] h1, :root[data-theme="classique"] h2 { font-family: var(--heading-font); font-weight: 700; letter-spacing: 0; }

/* ---------- CLAIR ---------- */
:root[data-theme="clair"] {
  --chrome-bg: #ffffff;
  --chrome-side-bg: #ffffff;
  --chrome-fg: var(--fg-1);
  --chrome-fg-2: var(--fg-2);
  --chrome-fg-3: var(--fg-3);
  --chrome-soft: var(--tm-neutral-50);
  --chrome-active: var(--tm-blue-50);
  --chrome-line: var(--border-default);
  --chrome-bar: var(--rs-navy);
  --tm-neutral-25: #f7f9fc;
}
:root[data-theme="clair"] .app-header { border-bottom: 1px solid var(--border-default); }
:root[data-theme="clair"] .app-side { border-right: 1px solid var(--border-default); }
:root[data-theme="clair"] .hd-brand img { filter: brightness(0) saturate(100%) invert(14%) sepia(30%) saturate(1500%) hue-rotate(190deg); }

/* ---------- RAMSAY SANTÉ (charte ramsaysante.fr) ---------- */
:root[data-theme="ramsay"] {
  --font-sans: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --chrome-bg: #ffffff;
  --chrome-side-bg: #1d304d;
  --chrome-fg: #1d304d;
  --chrome-fg-2: #3c4a63;
  --chrome-fg-3: #6b7890;
  --chrome-soft: #f1f4f9;
  --chrome-bar: #f0c5da;
  --tm-neutral-25: #f6f7fa;
  --tm-pale-blue: #fbe7f0;
  --tm-blue-50: #e8f0f8;
  --tm-yellow-100: #f8f0cf;
  --rs-ramsay-blue: #477cae;
}
:root[data-theme="ramsay"] .app-header { border-bottom: 1px solid #e3e7ee; }
:root[data-theme="ramsay"] .hd-brand img { filter: brightness(0) saturate(100%) invert(15%) sepia(28%) saturate(1400%) hue-rotate(185deg); }
/* la barre latérale reste bleu marine : textes clairs */
:root[data-theme="ramsay"] .app-side { --chrome-fg: #fff; --chrome-fg-2: rgba(255,255,255,.75); --chrome-fg-3: rgba(255,255,255,.55); --chrome-soft: rgba(255,255,255,.08); --chrome-line: rgba(255,255,255,.12); }
:root[data-theme="ramsay"] h1 { letter-spacing: -0.01em; }

/* ---------- SOMBRE ---------- */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --chrome-bg: #0e1522;
  --chrome-side-bg: #0b111c;
  --chrome-line: rgba(255,255,255,.08);
  --chrome-bar: #6f9be0;
  --bg-surface: #161f2d;
  --bg-raised: #1b2535;
  --bg-sunken: #121a26;
  --tm-neutral-0: #161f2d;
  --tm-neutral-25: #0f1622;
  --tm-neutral-50: #1c2636;
  --tm-neutral-100: #253144;
  --tm-neutral-200: #2f3c51;
  --tm-neutral-300: #3d4b62;
  --tm-neutral-400: #5d6b82;
  --fg-1: #e9eef6;
  --fg-2: #c4cddb;
  --fg-3: #93a0b5;
  --fg-4: #6c7a90;
  --border-subtle: #222d3e;
  --border-default: #2c384b;
  --border-strong: #3b495f;
  --tm-blue-50: #19294a;
  --tm-pale-blue: #22284a;
  --tm-green-50: #142c1f;
  --tm-orange-50: #382217;
  --tm-yellow-50: #2f2a12;
  --tm-yellow-100: #3a3313;
  --tm-green-500: #84c983;
  --tm-orange-500: #f3a173;
  --tm-yellow-500: #e8c75a;
  --tm-blue-800: #a9c2ee;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-xs: 0 1px 1px rgba(0,0,0,.35);
}
:root[data-theme="sombre"] input, :root[data-theme="sombre"] select, :root[data-theme="sombre"] textarea { color: var(--fg-1); }
:root[data-theme="sombre"] img[src*="logo-ramsay.png"] { filter: brightness(0) invert(1); }

/* Barre de démo compacte sur mobile */
@media (max-width:760px){
  .demo-roles{flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .demo-roles::-webkit-scrollbar{display:none}
  .demo-roles button{flex:none}
}