/* ============================================================
   THÈMES DE SAISON — Halloween, Noël, Pâques, Saint-Valentin
   Classe sur <body> (vp-halloween / vp-noel / vp-paques / vp-valentin),
   choisie dans /admin. Chaque thème pose :
   - sa palette (--vp-green = accent principal, --vp-orange = accent clair)
     et les variables qui en dérivent (sinon elles restent vertes) ;
   - --t-top/--t-bot/--t-edge/--t-ink : boutons 3D et gros boutons ;
   - --vp-tint : filtre de couleur des fonds marins (forest.css) ;
   - son décor (.vp-deco, généré par sky() dans pages.js).
   ============================================================ */

/* ---------- Palettes ---------- */
body.vp-halloween {
  --vp-green: #ff8c2a;
  --vp-orange: #ffb45c;
  --vp-gold: #ffd08a;
  --vp-section: #0e0914;
  --vp-surface: #1a1222;
  --vp-surface-2: #22182d;
  --vp-surface-3: #2c1f3a;
  --vp-line: #3a2850;
  --vp-line-strong: #523a70;
  --vp-ink-soft: #d9cde6;
  --vp-ink-faint: #a08bb8;
  --vp-muted: #a493b8;
  --vp-glass: rgba(16, 10, 22, .74);
  --vp-background: url("/public/spawn2-dark.jpg?v=2");
  --t-top: #ffc27a;
  --t-bot: #ff8c2a;
  --t-edge: #a2470a;
  --t-ink: #2a1203;
  --vp-tint: hue-rotate(55deg) saturate(.7) brightness(.72);
}
body.vp-noel {
  --vp-green: #ef4f5c;
  --vp-orange: #ffd166;
  --vp-gold: #ffe29a;
  --vp-section: #08141d;
  --vp-surface: #10212c;
  --vp-surface-2: #152b38;
  --vp-surface-3: #1c3746;
  --vp-line: #24445a;
  --vp-line-strong: #33607c;
  --vp-ink-soft: #cfe0ea;
  --vp-ink-faint: #8fb0c4;
  --vp-muted: #93b1c2;
  --vp-glass: rgba(8, 20, 30, .74);
  --t-top: #ff9a9a;
  --t-bot: #e23b4a;
  --t-edge: #8e1424;
  --t-ink: #fff;
  --vp-tint: hue-rotate(-55deg) saturate(.5) brightness(.88);
}
body.vp-paques {
  --vp-green: #f78fc4;
  --vp-orange: #ffe27a;
  --vp-gold: #fff0a8;
  --vp-section: #10170f;
  --vp-surface: #1a2418;
  --vp-surface-2: #212e1f;
  --vp-surface-3: #2a3a27;
  --vp-line: #3a4a35;
  --vp-line-strong: #566a4e;
  --vp-ink-soft: #e2ead9;
  --vp-ink-faint: #b0bfa5;
  --vp-muted: #b2c0a8;
  --t-top: #fff6b8;
  --t-bot: #ffd84a;
  --t-edge: #b8890c;
  --t-ink: #3a2a00;
  --vp-tint: hue-rotate(-118deg) saturate(.85) brightness(1.08);
}
body.vp-valentin {
  --vp-green: #ff4f86;
  --vp-orange: #ffb3c9;
  --vp-gold: #ffd6e2;
  --vp-section: #16080f;
  --vp-surface: #241019;
  --vp-surface-2: #2e1520;
  --vp-surface-3: #3a1b29;
  --vp-line: #4e2236;
  --vp-line-strong: #6e304b;
  --vp-ink-soft: #f0d6df;
  --vp-ink-faint: #c497a8;
  --vp-muted: #c69cac;
  --vp-glass: rgba(26, 10, 18, .74);
  --t-top: #ffc6d6;
  --t-bot: #ff5c8a;
  --t-edge: #a81d4b;
  --t-ink: #3b0716;
  --vp-tint: hue-rotate(105deg) saturate(.75) brightness(.78);
}

/* Variables dérivées (calculées sur :root, donc à redéclarer ici) */
body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) {
  --vp-green-soft: color-mix(in srgb, var(--vp-green) 18%, transparent);
  --vp-green-dark: color-mix(in srgb, var(--vp-green) 75%, #000);
  --vp-green-2: color-mix(in srgb, var(--vp-green) 70%, #fff);
  --vp-orange-soft: color-mix(in srgb, var(--vp-orange) 16%, transparent);
  --vp-orange-2: color-mix(in srgb, var(--vp-orange) 80%, #fff);
  --vp-orange-dark: color-mix(in srgb, var(--vp-orange) 65%, #000);
}

/* Boutons 3D (buttons.css) et gros boutons de l'accueil */
body.vp-body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) :where(
  .btn-primary, .vp-btn, .vp-auth-submit, .vp-bazaar-cart, .vp-fortune-go
),
body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) #vote-card .vp-vote-go {
  --b3-top: var(--t-top);
  --b3-bot: var(--t-bot);
  --b3-edge: var(--t-edge);
  --b3-ink: var(--t-ink);
}
body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) .hp {
  --hp-lime-2: var(--t-bot);
  --hp-lime-deep: var(--t-edge);
  --hp-card: color-mix(in srgb, var(--vp-surface) 88%, transparent);
  --hp-card-line: color-mix(in srgb, var(--vp-green) 22%, transparent);
}
body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) .hp-ip {
  background: linear-gradient(180deg, var(--t-top) 0%, var(--t-bot) 100%);
  color: var(--t-ink);
}
body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) .hp-title {
  background-image: linear-gradient(180deg, #fff 30%, var(--vp-orange) 100%);
  filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--t-edge) 90%, #000)) drop-shadow(0 14px 28px rgba(0, 0, 0, .5));
}
body:is(.vp-halloween, .vp-noel, .vp-paques, .vp-valentin) .vp-mnav-tab.is-active > i { color: var(--t-ink); background: var(--t-bot); }

/* Bandeau « Aperçu du thème » (admins, cookie vp_apercu) */
.vp-preview-bar {
  position: fixed;
  z-index: 45;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--vp-orange) 45%, transparent);
  border-radius: 14px;
  background: rgba(8, 10, 12, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--vp-ink);
  font-size: .85rem;
  font-weight: 700;
  transform: translateX(-50%);
}
.vp-preview-bar > i { color: var(--vp-orange); }
.vp-preview-bar b { color: var(--vp-orange); }
.vp-preview-bar a {
  flex: none;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--vp-orange);
  color: #111;
  font-weight: 800;
  text-decoration: none;
}
@media (min-width: 992px) {
  .vp-preview-bar { left: calc(50% + var(--vp-rail-space) / 2); }
}
@media (max-width: 575.98px) {
  .vp-preview-more { display: none; }
}

/* ============================================================
   DÉCORS
   ============================================================ */
.vp-deco {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.vp-fall > span {
  position: absolute;
  top: -6vh;
  left: calc(var(--i) * 3.8% + 1.5%);
  animation: vp-deco-fall 14s linear infinite;
  animation-delay: calc(var(--i) * -1.37s);
}
.vp-fall > span:nth-child(3n) { animation-duration: 18s; }
.vp-fall > span:nth-child(3n + 1) { animation-duration: 11s; }
@keyframes vp-deco-fall {
  0% { transform: translate(0, 0); }
  50% { transform: translate(22px, 56vh); }
  100% { transform: translate(-6px, 112vh); }
}
@keyframes vp-deco-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(18px, -56vh); }
  100% { transform: translate(-10px, -118vh); opacity: 0; }
}

/* ---------- Noël : neige, guirlande, sapins ---------- */
.vp-deco-noel .vp-fall > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: .7;
  box-shadow: 0 0 6px rgba(255, 255, 255, .6);
}
.vp-deco-noel .vp-fall > span:nth-child(4n) { width: 4px; height: 4px; opacity: .5; }
.vp-deco-noel .vp-fall > span:nth-child(5n + 2) { width: 8px; height: 8px; opacity: .8; }

.vp-garland {
  position: absolute;
  top: 0;
  left: calc(var(--vp-rail-space) - 6px);
  right: 0;
  height: 34px;
}
.vp-garland svg { display: block; width: 100%; height: 30px; overflow: visible; }
.vp-garland path { fill: none; stroke: #23402c; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.vp-garland i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 13px;
  margin-left: -4.5px;
  border-radius: 50% 50% 45% 45%;
  background: var(--c, #ff5a5a);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c, #ff5a5a) 70%, transparent);
  animation: vp-bulb 2.4s ease-in-out infinite;
}
.vp-garland i::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 2px;
  width: 5px;
  height: 4px;
  border-radius: 1px;
  background: #2b3b30;
}
.vp-garland i:nth-child(4n + 2) { --c: #ffd166; animation-delay: -.6s; }
.vp-garland i:nth-child(4n + 3) { --c: #5ad17a; animation-delay: -1.2s; }
.vp-garland i:nth-child(4n + 4) { --c: #6cc4ff; animation-delay: -1.8s; }
.vp-garland i:nth-child(4n + 5) { --c: #ff5a5a; }
@keyframes vp-bulb { 50% { opacity: .45; box-shadow: none; } }

.vp-pine {
  position: absolute;
  bottom: -6px;
  width: 92px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4));
}
.vp-pine-l { left: calc(var(--vp-rail-space) - 4px); }
.vp-pine-r { right: 10px; width: 76px; }

/* ---------- Halloween : lune, chauves-souris, toiles, araignées, citrouilles ---------- */
.vp-moon {
  position: absolute;
  top: 34px;
  right: 7%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff6dc, #f3d98c 65%, #d6b65e);
  box-shadow: 0 0 40px 8px rgba(255, 220, 140, .35);
  opacity: .9;
}
.vp-bats > span {
  position: absolute;
  top: calc(8% + var(--i) * 9%);
  left: -80px;
  width: calc(46px - var(--i) * 5px);
  color: #1d1026;
  filter: drop-shadow(0 0 1px rgba(255, 180, 92, .7)) drop-shadow(0 0 8px rgba(160, 100, 255, .35));
  animation: vp-bat-fly 19s linear infinite;
  animation-delay: calc(var(--i) * -4.1s);
}
.vp-bats > span:nth-child(2n) { animation-duration: 24s; }
.vp-bats svg { display: block; width: 100%; animation: vp-bat-flap .32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes vp-bat-fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(28vw, -4vh); }
  50% { transform: translate(55vw, 3vh); }
  75% { transform: translate(82vw, -3vh); }
  100% { transform: translate(calc(100vw + 160px), 2vh); }
}
@keyframes vp-bat-flap { to { transform: scaleY(.45); } }

.vp-web {
  position: absolute;
  top: -12px;
  width: 170px;
  height: 170px;
  color: rgba(225, 205, 255, .22);
}
.vp-web path { stroke: currentColor; stroke-width: 1.6; }
.vp-web-l { left: calc(var(--vp-rail-space) - 14px); }
.vp-web-r { right: -12px; transform: scaleX(-1); }

.vp-hang { position: absolute; top: 0; }
.vp-hang-a { left: 30%; }
.vp-hang-b { left: 71%; }
.vp-hang .vp-silk {
  position: absolute;
  top: 0;
  left: 15px;
  width: 1px;
  height: 92px;
  background: rgba(225, 205, 255, .45);
  animation: vp-silk 5s ease-in-out infinite;
  transform-origin: top;
}
.vp-hang-b .vp-silk { height: 140px; animation-delay: -2.2s; }
.vp-spider {
  position: absolute;
  top: 88px;
  left: 0;
  width: 31px;
  color: #120a18;
  filter: drop-shadow(0 0 1px #c9a7ff) drop-shadow(0 0 6px rgba(160, 100, 255, .45));
  animation: vp-spider 5s ease-in-out infinite;
}
.vp-hang-b .vp-spider { top: 136px; animation-delay: -2.2s; }
@keyframes vp-silk { 50% { transform: scaleY(1.25); } }
@keyframes vp-spider { 50% { transform: translateY(23px); } }

.vp-pumpkin {
  position: absolute;
  bottom: 12px;
  width: 58px;
  height: 46px;
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(ellipse 22% 50% at 50% 50%, rgba(120, 50, 10, .45), transparent 70%),
    radial-gradient(ellipse 60% 55% at 30% 35%, #ffb35c, #e36c17 60%, #a8460b);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 140, 42, .3);
}
.vp-pumpkin::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 7px;
  height: 11px;
  margin-left: -3px;
  border-radius: 3px;
  background: #4c6b1f;
}
/* visage taillé, éclairé de l'intérieur */
.vp-pumpkin i {
  position: absolute;
  inset: 13px 11px 9px;
  background:
    linear-gradient(135deg, transparent 50%, #ffe08a 50%) 2px 0 / 11px 9px no-repeat,
    linear-gradient(225deg, transparent 50%, #ffe08a 50%) right 2px top 0 / 11px 9px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, #ffe08a 60%, transparent 62%) center bottom / 70% 9px no-repeat;
  filter: drop-shadow(0 0 4px #ffb13b);
  animation: vp-flicker 3s ease-in-out infinite;
}
@keyframes vp-flicker { 40% { opacity: .75; } 45% { opacity: 1; } 70% { opacity: .85; } }
.vp-pumpkin-l { left: calc(var(--vp-rail-space) + 6px); }
.vp-pumpkin-r { right: 18px; width: 46px; height: 38px; }
.vp-pumpkin-r i { inset: 11px 8px 7px; }

/* ---------- Pâques : œufs pastel qui tombent ---------- */
.vp-deco-paques .vp-fall > span {
  left: calc(var(--i) * 7% + 2%);
  width: 14px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 255, 255, .55) 5px 7px),
    var(--egg, #ffb3d6);
  opacity: .6;
  animation-name: vp-egg-fall;
}
.vp-deco-paques .vp-fall > span:nth-child(4n + 2) { --egg: #ffe57a; }
.vp-deco-paques .vp-fall > span:nth-child(4n + 3) { --egg: #a8e6ff; }
.vp-deco-paques .vp-fall > span:nth-child(4n + 4) { --egg: #c9b6ff; }
@keyframes vp-egg-fall {
  0% { transform: translateY(0) rotate(-18deg); }
  50% { transform: translateY(56vh) rotate(18deg); }
  100% { transform: translateY(112vh) rotate(-18deg); }
}

/* ---------- Saint-Valentin : cœurs qui montent ---------- */
.vp-deco-valentin .vp-fall > span {
  top: auto;
  bottom: -6vh;
  left: calc(var(--i) * 7% + 2%);
  font-size: 18px;
  line-height: 1;
  color: #ff5c8a;
  opacity: .55;
  animation-name: vp-deco-rise;
  animation-duration: 13s;
}
.vp-deco-valentin .vp-fall > span::before { content: "\2665"; }
.vp-deco-valentin .vp-fall > span:nth-child(3n + 2) { color: #ff8fb0; font-size: 13px; }
.vp-deco-valentin .vp-fall > span:nth-child(3n) { color: #e0245e; font-size: 24px; animation-duration: 17s; }

/* Pâques : fanions pastel */
.vp-bunting {
  position: absolute;
  top: 0;
  left: calc(var(--vp-rail-space) - 6px);
  right: 0;
  height: 40px;
}
.vp-bunting svg { display: block; width: 100%; height: 30px; overflow: visible; }
.vp-bunting path { fill: none; stroke: rgba(255, 240, 220, .55); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.vp-bunting i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 20px;
  height: 24px;
  margin-left: -10px;
  background: var(--c, #ff9ecf);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: vp-flag 3.2s ease-in-out infinite;
}
.vp-bunting i:nth-child(4n + 2) { --c: #ffe57a; animation-delay: -.8s; }
.vp-bunting i:nth-child(4n + 3) { --c: #a8e6ff; animation-delay: -1.6s; }
.vp-bunting i:nth-child(4n + 4) { --c: #c9b6ff; animation-delay: -2.4s; }
.vp-bunting i:nth-child(4n + 5) { --c: #b8f0a8; }
@keyframes vp-flag { 50% { transform: rotate(6deg); } }

/* Pâques : papillons */
.vp-flies > span {
  position: absolute;
  top: calc(22% + var(--i) * 22%);
  left: -40px;
  width: 26px;
  color: #ffb3d6;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
  animation: vp-fly 26s linear infinite;
  animation-delay: calc(var(--i) * -9s);
}
.vp-flies > span:nth-child(2) { color: #ffe57a; width: 22px; animation-duration: 31s; }
.vp-flies > span:nth-child(3) { color: #a8e6ff; animation-duration: 23s; }
.vp-flies svg { display: block; width: 100%; animation: vp-flap .22s ease-in-out infinite alternate; }
@keyframes vp-fly {
  0% { transform: translate(0, 0) rotate(8deg); }
  20% { transform: translate(22vw, -8vh) rotate(-6deg); }
  40% { transform: translate(44vw, 4vh) rotate(10deg); }
  60% { transform: translate(64vw, -10vh) rotate(-4deg); }
  80% { transform: translate(84vw, 2vh) rotate(8deg); }
  100% { transform: translate(calc(100vw + 80px), -6vh) rotate(0); }
}
@keyframes vp-flap { to { transform: scaleX(.35); } }

/* Pâques : massifs de fleurs et lapin qui dépasse */
.vp-flowers {
  position: absolute;
  bottom: -4px;
  width: 150px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}
.vp-flowers-l { left: calc(var(--vp-rail-space) - 6px); }
.vp-flowers-r { right: 4px; transform: scaleX(-1); }
.vp-bunny {
  position: absolute;
  bottom: -14px;
  left: calc(var(--vp-rail-space) + 128px);
  width: 66px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
  animation: vp-peek 9s ease-in-out infinite;
}
@keyframes vp-peek {
  0%, 12%, 100% { transform: translateY(62%); }
  22%, 60% { transform: translateY(0); }
  64% { transform: translateY(0) rotate(-5deg); }
  68% { transform: translateY(0) rotate(4deg); }
  72% { transform: translateY(0); }
}

/* Saint-Valentin : cœurs suspendus */
.vp-love {
  position: absolute;
  top: 0;
  left: var(--x);
  transform-origin: 50% 0;
  animation: vp-sway 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}
.vp-love i {
  display: block;
  width: 1px;
  height: var(--len);
  margin: 0 auto;
  background: rgba(255, 200, 220, .45);
}
.vp-love svg {
  display: block;
  width: 26px;
  margin: -2px 0 0 -12.5px;
  fill: #ff4f86;
  filter: drop-shadow(0 0 8px rgba(255, 79, 134, .55));
}
.vp-love:nth-of-type(2n) svg { width: 20px; margin-left: -9.5px; fill: #ff8fb0; }
.vp-love:nth-of-type(3n) svg { fill: #e0245e; }
@keyframes vp-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* Saint-Valentin : pétales de rose */
.vp-petals > span {
  position: absolute;
  top: -6vh;
  left: calc(var(--i) * 8% + 3%);
  width: 12px;
  height: 9px;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ff6f98, #c2185b);
  opacity: .7;
  animation: vp-petal 15s linear infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
.vp-petals > span:nth-child(2n) { width: 9px; height: 7px; animation-duration: 19s; }
.vp-petals > span:nth-child(3n) { background: linear-gradient(135deg, #ffb3c9, #ff5c8a); }
@keyframes vp-petal {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(26px, 28vh) rotate(120deg); }
  50% { transform: translate(-14px, 56vh) rotate(240deg); }
  75% { transform: translate(20px, 84vh) rotate(330deg); }
  100% { transform: translate(0, 112vh) rotate(450deg); }
}

/* Saint-Valentin : bouquets de ballons-cœurs */
.vp-balloons {
  position: absolute;
  bottom: -10px;
  width: 92px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
  transform-origin: 50% 100%;
  animation: vp-balloon-bob 6s ease-in-out infinite;
}
.vp-balloons-l { left: calc(var(--vp-rail-space) + 2px); }
.vp-balloons-r { right: 14px; width: 78px; animation-delay: -3s; }
@keyframes vp-balloon-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* ---------- Mobile : décor allégé ---------- */
@media (max-width: 991.98px) {
  .vp-pine,
  .vp-pumpkin,
  .vp-hang-b,
  .vp-bats > span:nth-child(n + 4),
  .vp-fall > span:nth-child(n + 15),
  .vp-flowers,
  .vp-bunny,
  .vp-balloons,
  .vp-love:nth-of-type(2n),
  .vp-bunting i:nth-of-type(2n),
  .vp-flies > span:nth-child(n + 3),
  .vp-petals > span:nth-child(n + 8) { display: none; }
  .vp-fall > span { left: calc(var(--i) * 7% + 2%); }
  .vp-garland,
  .vp-bunting { left: 0; }
  .vp-web { width: 110px; height: 110px; }
  .vp-web-l { left: -10px; }
  .vp-moon { top: 22px; width: 50px; height: 50px; }
  .vp-hang-a { left: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-fall,
  .vp-bats,
  .vp-flies,
  .vp-petals { display: none; }
  .vp-bunting i,
  .vp-bunny,
  .vp-love,
  .vp-balloons,
  .vp-garland i,
  .vp-hang .vp-silk,
  .vp-spider,
  .vp-pumpkin i { animation: none; }
}