/* ===========================================================================
   Grande Pharmacie du 102 — Thèmes
   Chaque thème surcharge les tokens définis dans app.css :root.
   Pilotés par html[data-theme="..."] (+ data-season pour le saisonnier).
   theme.js gère le sélecteur, la persistance et le décor saisonnier.
   =========================================================================== */

/* ── Pharma (apothicaire original, = :root) ── */
html[data-theme="pharma"]{ /* hérite de :root, rien à surcharger */ }

/* ── Clair ── */
html[data-theme="clair"]{
  --bg-0:#f5f2ea; --bg-1:#ece8dc; --bg-2:#e2ddcd;
  --emerald:#1c7a52; --emerald-d:#12553a; --emerald-glow:rgba(28,122,82,.16);
  --gold:#9c7522; --gold-d:#765619; --gold-soft:rgba(156,117,34,.13);
  --ink:#1d2b22; --ink-soft:#3f5147; --muted:#6c7d72;
  --line:rgba(28,122,82,.20);
  --glass:rgba(255,255,255,.78); --glass-2:rgba(255,255,255,.88);
  --danger:#c0392b; --danger-d:#922b21;
  --shadow:0 10px 34px rgba(80,90,70,.16), 0 2px 6px rgba(80,90,70,.10);
  --btn-ink:#fff; --th-bg:rgba(28,122,82,.10); --tr-hover:rgba(28,122,82,.06);
  --field-bg:rgba(255,255,255,.85);
  --body-grad:
    radial-gradient(1100px 700px at 80% -10%, rgba(28,122,82,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(156,117,34,.08), transparent 55%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
}

/* ── Foncé (anthracite neutre) ── */
html[data-theme="fonce"]{
  --bg-0:#0d0f12; --bg-1:#14171c; --bg-2:#1c2128;
  --emerald:#4fd1a0; --emerald-d:#2f9a72; --emerald-glow:rgba(79,209,160,.30);
  --gold:#cbb27a; --gold-d:#9d8654; --gold-soft:rgba(203,178,122,.14);
  --ink:#e8ebef; --ink-soft:#aeb6c0; --muted:#7c8590;
  --line:rgba(255,255,255,.11);
  --glass:rgba(30,34,42,.62); --glass-2:rgba(22,26,32,.78);
  --btn-ink:#0d0f12; --th-bg:rgba(255,255,255,.05); --tr-hover:rgba(79,209,160,.07);
  --body-grad:
    radial-gradient(1100px 700px at 78% -10%, rgba(79,209,160,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(203,178,122,.07), transparent 55%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
}

/* ── Luxe (noir & or, sérif) ── */
html[data-theme="luxe"]{
  --bg-0:#0a0807; --bg-1:#130d09; --bg-2:#1e140b;
  --emerald:#caa24f; --emerald-d:#9a7a36; --emerald-glow:rgba(231,198,107,.30);
  --gold:#e7c66b; --gold-d:#b8923a; --gold-soft:rgba(231,198,107,.15);
  --ink:#f5ecd8; --ink-soft:#cbb98f; --muted:#9c8a66;
  --line:rgba(231,198,107,.28);
  --glass:rgba(28,20,12,.62); --glass-2:rgba(20,14,9,.80);
  --danger:#d9755f; --danger-d:#b04a36;
  --shadow:0 12px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(231,198,107,.08);
  --btn-ink:#1a1207; --th-bg:rgba(0,0,0,.4); --tr-hover:rgba(231,198,107,.08);
  --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --body-grad:
    radial-gradient(1100px 700px at 78% -10%, rgba(231,198,107,.14), transparent 60%),
    radial-gradient(900px 600px at 12% 112%, rgba(184,146,58,.10), transparent 55%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
}
html[data-theme="luxe"] h1,html[data-theme="luxe"] h2,html[data-theme="luxe"] h3{letter-spacing:.5px}

/* ── Luxe clair (ivoire & or brossé, sérif) — pendant clair du Luxe ── */
html[data-theme="luxe_clair"]{
  --bg-0:#f8f3e8; --bg-1:#f0e7d4; --bg-2:#e7dac0;
  --emerald:#1f6b4c; --emerald-d:#154d37; --emerald-glow:rgba(184,146,58,.18);
  --gold:#a87f28; --gold-d:#7e5e1b; --gold-soft:rgba(168,127,40,.14);
  --ink:#2a211a; --ink-soft:#574a3c; --muted:#8a7c69;
  --line:rgba(168,127,40,.30);
  --glass:rgba(255,253,247,.82); --glass-2:rgba(255,253,247,.92);
  --danger:#b5402b; --danger-d:#8c2f1f;
  --shadow:0 12px 40px rgba(120,95,40,.18), 0 0 0 1px rgba(168,127,40,.10);
  --btn-ink:#fff; --th-bg:rgba(168,127,40,.12); --tr-hover:rgba(168,127,40,.07);
  --field-bg:rgba(255,253,247,.88);
  --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --body-grad:
    radial-gradient(1100px 700px at 78% -10%, rgba(168,127,40,.16), transparent 60%),
    radial-gradient(900px 600px at 12% 112%, rgba(31,107,76,.08), transparent 55%),
    linear-gradient(160deg,#fbf7ee,var(--bg-1) 55%,var(--bg-2));
}
html[data-theme="luxe_clair"] h1,html[data-theme="luxe_clair"] h2,html[data-theme="luxe_clair"] h3{letter-spacing:.5px}

/* ── Plage (turquoise & sable, clair) ── */
html[data-theme="plage"]{
  --bg-0:#eaf8f7; --bg-1:#daefee; --bg-2:#c9e7e3;
  --emerald:#0fb5ad; --emerald-d:#0a8a83; --emerald-glow:rgba(15,181,173,.22);
  --gold:#e8932d; --gold-d:#c2741c; --gold-soft:rgba(232,147,45,.14);
  --ink:#0d3b3a; --ink-soft:#2c5d5b; --muted:#5c807e;
  --line:rgba(15,181,173,.24);
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.84);
  --danger:#e0573e; --danger-d:#b53e29;
  --shadow:0 10px 34px rgba(15,120,116,.16), 0 2px 6px rgba(15,120,116,.10);
  --btn-ink:#fff; --th-bg:rgba(15,181,173,.12); --tr-hover:rgba(15,181,173,.07);
  --field-bg:rgba(255,255,255,.82);
  --body-grad:
    radial-gradient(1100px 700px at 80% -10%, rgba(15,181,173,.18), transparent 60%),
    radial-gradient(900px 600px at 6% 112%, rgba(232,147,45,.12), transparent 55%),
    linear-gradient(165deg,#eafbff,var(--bg-1) 50%,var(--bg-2));
}

/* ===========================================================================
   Saisonnier — la base est neutre, data-season affine la palette.
   theme.js calcule la saison automatiquement (ou la force).
   =========================================================================== */
html[data-theme="saison"]{
  --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.86);
  --btn-ink:#fff;
}

/* Hiver / Noël (déc.) : sapin, rouge, or, neige */
html[data-theme="saison"][data-season="noel"]{
  --bg-0:#0a1f17; --bg-1:#0e2a1d; --bg-2:#123524;
  --emerald:#2faa5e; --emerald-d:#1c7a42; --emerald-glow:rgba(47,170,94,.30);
  --gold:#e0b34a; --gold-d:#b88a30; --gold-soft:rgba(224,179,74,.15);
  --danger:#d94436; --danger-d:#b22f24;
  --ink:#f1f7f1; --ink-soft:#c8dcce; --muted:#90a896; --line:rgba(224,179,74,.22);
  --glass:rgba(14,40,28,.6); --glass-2:rgba(10,30,21,.8); --btn-ink:#0a1f17;
  --th-bg:rgba(0,0,0,.32); --tr-hover:rgba(217,68,54,.10);
  --body-grad:
    radial-gradient(1000px 640px at 80% -10%, rgba(217,68,54,.16), transparent 60%),
    radial-gradient(900px 600px at 10% 112%, rgba(224,179,74,.12), transparent 55%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
}

/* Printemps / Pâques (mars-avr.) : pastel, jaune, rose, vert tendre */
html[data-theme="saison"][data-season="paques"]{
  --bg-0:#fbf7ee; --bg-1:#f3f0e2; --bg-2:#e9ecd9;
  --emerald:#5aa84f; --emerald-d:#3f7e37; --emerald-glow:rgba(90,168,79,.18);
  --gold:#e0a23a; --gold-d:#b67e23; --gold-soft:rgba(224,162,58,.14);
  --danger:#d98aa0; --danger-d:#b85f78;
  --ink:#3a3326; --ink-soft:#5e5440; --muted:#897c63; --line:rgba(90,168,79,.22);
  --glass:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.9); --btn-ink:#fff;
  --th-bg:rgba(90,168,79,.10); --tr-hover:rgba(224,162,58,.08);
  --field-bg:rgba(255,255,255,.86);
  --shadow:0 10px 30px rgba(150,140,110,.16);
  --body-grad:
    radial-gradient(1000px 640px at 82% -10%, rgba(224,162,58,.14), transparent 60%),
    radial-gradient(900px 600px at 8% 112%, rgba(217,138,160,.12), transparent 55%),
    linear-gradient(160deg,#fdfbf4,var(--bg-1) 55%,var(--bg-2));
}

/* Été (juin-août) : soleil, turquoise, sable lumineux */
html[data-theme="saison"][data-season="ete"]{
  --bg-0:#eafaff; --bg-1:#dcf2f6; --bg-2:#cce9e6;
  --emerald:#13b6c4; --emerald-d:#0d8a95; --emerald-glow:rgba(19,182,196,.22);
  --gold:#f0a81f; --gold-d:#c98512; --gold-soft:rgba(240,168,31,.15);
  --danger:#f2693e; --danger-d:#c64a27;
  --ink:#0e3640; --ink-soft:#2d5b63; --muted:#5d8189; --line:rgba(19,182,196,.24);
  --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.86); --btn-ink:#fff;
  --th-bg:rgba(19,182,196,.12); --tr-hover:rgba(240,168,31,.09);
  --field-bg:rgba(255,255,255,.82);
  --shadow:0 10px 34px rgba(15,120,140,.16);
  --body-grad:
    radial-gradient(1000px 640px at 82% -12%, rgba(240,168,31,.20), transparent 58%),
    radial-gradient(900px 600px at 6% 112%, rgba(19,182,196,.16), transparent 55%),
    linear-gradient(165deg,#f0fdff,var(--bg-1) 50%,var(--bg-2));
}

/* Automne (sept.-nov.) : ambre, rouille, brun chaud */
html[data-theme="saison"][data-season="automne"]{
  --bg-0:#1c130b; --bg-1:#26190e; --bg-2:#311f10;
  --emerald:#c98a3a; --emerald-d:#9e6a28; --emerald-glow:rgba(201,138,58,.28);
  --gold:#e0a23a; --gold-d:#b87e23; --gold-soft:rgba(224,162,58,.15);
  --danger:#d65a32; --danger-d:#ad4322;
  --ink:#f6ecdd; --ink-soft:#d6c2a8; --muted:#a68f72; --line:rgba(224,162,58,.24);
  --glass:rgba(38,25,14,.62); --glass-2:rgba(28,19,11,.8); --btn-ink:#1c130b;
  --th-bg:rgba(0,0,0,.34); --tr-hover:rgba(224,162,58,.10);
  --body-grad:
    radial-gradient(1000px 640px at 80% -10%, rgba(214,90,50,.16), transparent 60%),
    radial-gradient(900px 600px at 10% 112%, rgba(224,162,58,.14), transparent 55%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
}

/* ===========================================================================
   Décor saisonnier — particules animées injectées par theme.js
   =========================================================================== */
#season-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* le décor reste derrière le contenu mais devant le fond/3D */
.wrap,.topbar,.card,#modalHost,#toastHost{position:relative;z-index:1}
.season-particle{
  position:absolute;top:-8vh;will-change:transform,opacity;
  animation:season-fall linear infinite;user-select:none;
}
@keyframes season-fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{transform:translateY(112vh) translateX(var(--drift,20px)) rotate(360deg);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  #season-decor{display:none}
  html,body,.card,.tile,.panel,table,.topbar{transition:none}
}

/* ===========================================================================
   Sélecteur de thème (widget flottant haut-droite)
   =========================================================================== */
.theme-switch{position:fixed;top:12px;right:14px;z-index:10000;font-family:var(--sans)}
/* variante intégrée dans une barre d'outils existante (pas de chevauchement) */
.theme-switch--inline{position:relative;top:auto;right:auto;z-index:20}
.theme-switch--inline .theme-switch__btn{box-shadow:none;padding:7px 13px}
.theme-switch__btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--glass-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);font-size:.8rem;font-weight:600;box-shadow:var(--shadow)}
.theme-switch__btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-switch__btn .dot{width:13px;height:13px;border-radius:50%;
  background:linear-gradient(135deg,var(--emerald),var(--gold));box-shadow:0 0 8px var(--emerald-glow)}
.theme-switch__menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:188px;padding:7px;
  border-radius:14px;border:1px solid var(--line);background:var(--glass-2);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);
  display:none;flex-direction:column;gap:2px}
.theme-switch.open .theme-switch__menu{display:flex}
.theme-switch__opt{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  cursor:pointer;color:var(--ink-soft);font-size:.85rem;border:0;background:transparent;
  text-align:left;width:100%;transition:.15s}
.theme-switch__opt:hover{background:var(--gold-soft);color:var(--ink)}
.theme-switch__opt[aria-current="true"]{color:var(--gold);font-weight:700}
.theme-switch__opt .sw{width:16px;height:16px;border-radius:5px;flex:none;border:1px solid rgba(255,255,255,.25)}
.theme-switch__sep{height:1px;background:var(--line);margin:5px 3px}
.theme-switch__hint{font-size:.68rem;color:var(--muted);padding:3px 11px 5px}
@media (max-width:600px){
  .theme-switch{top:auto;bottom:14px;right:12px}
  .theme-switch__menu{top:auto;bottom:calc(100% + 8px)}
}

/* ===========================================================================
   Menu mobile — replie les barres d'outils denses derrière un hamburger.
   Géré par nav.js (.topbar / .toolbar). Le sélecteur de thème reste visible.
   =========================================================================== */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:36px;
  border-radius:10px;border:1px solid var(--line);background:var(--glass-2);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-toggle:hover{border-color:var(--gold);color:var(--gold)}
.topbar-menu{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:760px){
  .nav-toggle{display:inline-flex}
  .topbar-menu{position:absolute;top:100%;left:8px;right:8px;margin-top:8px;z-index:10001;
    flex-direction:column;align-items:stretch;gap:8px;padding:12px;border-radius:14px;
    border:1px solid var(--line);background:var(--bg-1);box-shadow:var(--shadow);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:none}
  .menu-open > .topbar-menu{display:flex}
  /* la barre ouverte doit dominer le contenu (.wrap a z-index:1) */
  .topbar.menu-open,.toolbar.menu-open{z-index:10002}
  .topbar-menu .btn,.topbar-menu a,.topbar-menu button{width:100%;justify-content:flex-start}
}