/* ═══════════════════════════════════════════════════════════════
   Moirans Pratique — Thèmes des fêtes et saisons (31/10/2026)
   ───────────────────────────────────────────────────────────────
   html[data-theme="…"] est posé par le <head> (thème mémorisé) puis par
   js/themes.js (thème demandé au serveur : /api/theme-actif). Un thème :
     • remplace les couleurs de l'ambiance (mêmes variables que les fonds
       de css/ui-v2.css : --v2-base, --v2-b1…b4, --v2-accent…) ;
     • ajoute une petite décoration animée (#theme-deco, derrière le
       contenu ; #theme-guirlande, fine frise sous la barre du haut).
   Comme l'interface « liquid glass », les thèmes ne concernent que le
   téléphone (< 900 px). L'attribut est doublé ([data-theme][data-theme=…])
   pour passer devant le fond choisi (html[data-fond=…]).
   Coupés par l'utilisateur : Perso › Apparence (le <head> ne pose rien).
   ═══════════════════════════════════════════════════════════════ */

/* ── Palettes ─────────────────────────────────────────────────── */
html[data-theme][data-theme="halloween"]    { --v2-base:#120a1c; --v2-b1:#ff7a1a; --v2-b2:#7b2ff7; --v2-b3:#ff4d00; --v2-b4:#3ddc84; --v2-accent:#ff7a1a; --v2-accent-glow:rgba(255,122,26,.55); --v2-intensite:.62; --v2-plan-teinte:300deg; }
html[data-theme][data-theme="dia-muertos"]  { --v2-base:#1a0820; --v2-b1:#ff4fa3; --v2-b2:#ffb000; --v2-b3:#8a2be2; --v2-b4:#00c2a8; --v2-accent:#ff4fa3; --v2-accent-glow:rgba(255,79,163,.55); --v2-intensite:.66; --v2-plan-teinte:310deg; }
html[data-theme][data-theme="noel"]         { --v2-base:#07160f; --v2-b1:#c8102e; --v2-b2:#0f7a3a; --v2-b3:#f2c14e; --v2-b4:#b71c1c; --v2-accent:#d4202f; --v2-accent-glow:rgba(212,32,47,.55); --v2-intensite:.62; --v2-plan-teinte:100deg; }
html[data-theme][data-theme="nouvel-an"]    { --v2-base:#070b1f; --v2-b1:#f5c542; --v2-b2:#3b5bdb; --v2-b3:#c084fc; --v2-b4:#e8e8ff; --v2-accent:#e0ac1c; --v2-accent-glow:rgba(245,197,66,.55); --v2-intensite:.6; --v2-plan-teinte:220deg; }
html[data-theme][data-theme="hiver"]        { --v2-base:#0a1626; --v2-b1:#8fd3ff; --v2-b2:#c9e7ff; --v2-b3:#6a8dff; --v2-b4:#e6f4ff; --v2-accent:#3f9be0; --v2-accent-glow:rgba(95,180,255,.5); --v2-intensite:.55; --v2-plan-teinte:190deg; }
html[data-theme][data-theme="printemps"]    { --v2-base:#0f1d16; --v2-b1:#7fdc8a; --v2-b2:#ffb3d1; --v2-b3:#fff07a; --v2-b4:#9ad0ff; --v2-accent:#2fa85c; --v2-accent-glow:rgba(60,191,107,.5); --v2-intensite:.62; --v2-plan-teinte:110deg; }
html[data-theme][data-theme="ete"]          { --v2-base:#1d1208; --v2-b1:#ffb703; --v2-b2:#fb8500; --v2-b3:#26c6da; --v2-b4:#ffe08a; --v2-accent:#f07a00; --v2-accent-glow:rgba(251,133,0,.55); --v2-intensite:.7; --v2-plan-teinte:20deg; }
html[data-theme][data-theme="automne"]      { --v2-base:#1a0f08; --v2-b1:#d9541e; --v2-b2:#f2a541; --v2-b3:#8c3b1f; --v2-b4:#b5651d; --v2-accent:#d9541e; --v2-accent-glow:rgba(217,84,30,.55); --v2-intensite:.62; --v2-plan-teinte:15deg; }
html[data-theme][data-theme="paques"]       { --v2-base:#1b1426; --v2-b1:#ffb3d6; --v2-b2:#b8f2b4; --v2-b3:#ffe39a; --v2-b4:#b9c8ff; --v2-accent:#f06aa8; --v2-accent-glow:rgba(255,143,194,.5); --v2-intensite:.6; --v2-plan-teinte:320deg; }
html[data-theme][data-theme="fete-travail"] { --v2-base:#0b1a10; --v2-b1:#5ccf7a; --v2-b2:#eef7ee; --v2-b3:#2f9e55; --v2-b4:#c8ecc8; --v2-accent:#2f9e55; --v2-accent-glow:rgba(52,178,106,.5); --v2-intensite:.55; --v2-plan-teinte:110deg; }
html[data-theme][data-theme="fete-cerise"]  { --v2-base:#1a070b; --v2-b1:#e0153a; --v2-b2:#ff6b8b; --v2-b3:#7a0f1f; --v2-b4:#5fbf4b; --v2-accent:#d8143a; --v2-accent-glow:rgba(224,21,58,.55); --v2-intensite:.62; --v2-plan-teinte:345deg; }
html[data-theme][data-theme="fete-musique"] { --v2-base:#120a24; --v2-b1:#8b5cf6; --v2-b2:#facc15; --v2-b3:#ec4899; --v2-b4:#22d3ee; --v2-accent:#9b4df0; --v2-accent-glow:rgba(168,85,247,.55); --v2-intensite:.66; --v2-plan-teinte:270deg; }
html[data-theme][data-theme="14-juillet"]   { --v2-base:#08122b; --v2-b1:#1f4fd8; --v2-b2:#f2f4f8; --v2-b3:#e11d2e; --v2-b4:#1f4fd8; --v2-accent:#2563eb; --v2-accent-glow:rgba(37,99,235,.55); --v2-intensite:.55; --v2-plan-teinte:220deg; }
html[data-theme][data-theme="election"]     { --v2-base:#0c1222; --v2-b1:#2b59c3; --v2-b2:#e5e7eb; --v2-b3:#d6293e; --v2-b4:#64748b; --v2-accent:#2b59c3; --v2-accent-glow:rgba(43,89,195,.5); --v2-intensite:.42; --v2-plan-teinte:220deg; }

/* ── Décoration : hors téléphone, pendant une aventure, ou thème coupé ─ */
#theme-deco, #theme-guirlande { display: none; }

@media (max-width: 899px) {
  html.ui-v2[data-theme] #theme-deco {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;            /* derrière le contenu, devant les taches du fond */
    overflow: hidden;
    pointer-events: none;
  }
  html.ui-v2[data-theme] #theme-guirlande {
    display: block;
    position: fixed;
    left: 0; right: 0;
    top: var(--entete-h, calc(64px + env(safe-area-inset-top, 0px)));
    height: 16px;
    opacity: .8;
    z-index: 1050;          /* sous la barre du haut (1100), sur le contenu */
    pointer-events: none;
    overflow: hidden;
    transition: transform .25s ease;
  }
  html.ui-v2:not(.ui-v2-exp) .top-bar--hidden ~ #theme-guirlande { transform: translateY(calc(-1 * var(--entete-h, 70px) - 30px)); }
  html.ui-v2.ui-v2-exp #theme-guirlande { display: none; }   /* Exploreur : décor seul */
  body.xj-actif #theme-deco,
  body.xj-actif #theme-guirlande,
  body.menu-open #theme-guirlande { display: none !important; }
}

/* Particules */
.td { position: absolute; top: 0; left: var(--x, 50%); width: var(--t, 22px); height: var(--t, 22px);
      color: var(--c, #fff); opacity: var(--o, .6); will-change: transform; }
.td svg { width: 100%; height: 100%; display: block; overflow: visible; }
.td-ico { fill: currentColor; }

.td--chute  { animation: td-chute var(--d, 18s) linear var(--r, 0s) infinite; }
.td--montee { animation: td-montee var(--d, 20s) linear var(--r, 0s) infinite; }
.td--vol    { top: var(--y, 20%); left: 0; animation: td-vol var(--d, 26s) linear var(--r, 0s) infinite; }
.td--vol svg { animation: td-battement .45s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.td--scint  { top: var(--y, 30%); animation: td-scint var(--d, 4s) ease-in-out var(--r, 0s) infinite; }
.td--feu    { top: var(--y, 25%); width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; opacity: 0;
              animation: td-feu var(--d, 7s) ease-out var(--r, 0s) infinite; }
.td--feu i  { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
              background: var(--c); box-shadow: 0 0 6px var(--c); transform: rotate(var(--a)) translateX(var(--l, 54px)); }
.td--soleil { top: -150px; right: -150px; left: auto; width: 360px; height: 360px; opacity: .5;
              background: repeating-conic-gradient(rgba(255,214,102,.22) 0 7deg, transparent 7deg 20deg);
              -webkit-mask: radial-gradient(circle, transparent 18%, #000 20%, transparent 70%);
                      mask: radial-gradient(circle, transparent 18%, #000 20%, transparent 70%);
              animation: td-tourne 90s linear infinite; }
.td--lune   { top: calc(var(--entete-h, 70px) + 26px); left: auto; right: 22px; width: 54px; height: 54px; border-radius: 50%;
              background: radial-gradient(circle at 38% 38%, #ffe7b0, #f2a33a 70%); opacity: .55;
              box-shadow: 0 0 40px 10px rgba(255,140,40,.35); }

@keyframes td-chute {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  25%  { transform: translate3d(var(--s, 20px), 22vh, 0) rotate(90deg); }
  50%  { transform: translate3d(0, 50vh, 0) rotate(180deg); }
  75%  { transform: translate3d(calc(var(--s, 20px) * -1), 80vh, 0) rotate(270deg); }
  100% { transform: translate3d(0, 112vh, 0) rotate(360deg); }
}
@keyframes td-montee {
  0%   { transform: translate3d(0, 108vh, 0) rotate(-8deg); opacity: 0; }
  10%  { opacity: var(--o, .6); }
  50%  { transform: translate3d(var(--s, 18px), 50vh, 0) rotate(8deg); }
  90%  { opacity: var(--o, .6); }
  100% { transform: translate3d(0, -12vh, 0) rotate(-8deg); opacity: 0; }
}
@keyframes td-vol {
  0%   { transform: translate3d(-15vw, 0, 0); }
  25%  { transform: translate3d(25vw, -30px, 0); }
  50%  { transform: translate3d(55vw, 20px, 0); }
  75%  { transform: translate3d(85vw, -25px, 0); }
  100% { transform: translate3d(118vw, 0, 0); }
}
@keyframes td-battement { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes td-scint { 0%, 100% { opacity: .1; transform: scale(.7); } 50% { opacity: var(--o, .8); transform: scale(1.1); } }
@keyframes td-feu {
  0%, 62% { opacity: 0; transform: scale(.2); }
  66%     { opacity: 1; transform: scale(.6); }
  92%     { opacity: .5; transform: scale(1.15); }
  100%    { opacity: 0; transform: scale(1.25) translateY(14px); }
}
@keyframes td-tourne { to { transform: rotate(360deg); } }

/* ── Guirlandes (frises fines sous la barre du haut) ───────────── */
.tg-ampoules { position: absolute; inset: 0; }
.tg-ampoules::before {          /* le fil */
  content: ''; position: absolute; left: -10px; right: -10px; top: -14px; height: 22px;
  border-bottom: 1.5px solid rgba(255,255,255,.25); border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.tg-ampoules i { position: absolute; top: 4px; width: 7px; height: 10px; border-radius: 50% 50% 45% 45%;
                 background: var(--c); box-shadow: 0 0 8px var(--c); animation: tg-brille 2.4s ease-in-out var(--r) infinite; }
@keyframes tg-brille { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.tg-fanions { position: absolute; inset: 0; display: flex; }
.tg-fanions i { flex: 1; height: 12px; background: var(--c); opacity: .75;
                clip-path: polygon(0 0, 100% 0, 92% 100%, 50% 72%, 8% 100%);
                transform-origin: 50% 0; animation: tg-vent 3.2s ease-in-out var(--r) infinite alternate; }
@keyframes tg-vent { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

.tg-ruban { position: absolute; left: 0; right: 0; top: 0; height: 4px;
            background: linear-gradient(90deg, #2b59c3 0 33.3%, #f2f4f8 33.3% 66.6%, #d6293e 66.6%); opacity: .85; }

html.theme-pause .td, html.theme-pause .td svg, html.theme-pause .tg-ampoules i, html.theme-pause .tg-fanions i { animation-play-state: paused; }

/* ── Sobriété ─────────────────────────────────────────────────── */
html.v2-eco .td:nth-child(2n) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .td { display: none; }
  .tg-ampoules i, .tg-fanions i { animation: none; opacity: .8; }
}