/* ─────────────────────────────────────────────────────────────────
 *  seasonal-themes.css — Palettes des thèmes saisonniers
 *
 *  Chargé APRÈS le <style> inline de chaque page pour que la cascade
 *  (même spécificité, source order) fasse gagner les palettes ci-dessous
 *  sur les palettes utilisateur (theme-rose/blue/gold/emerald/violet).
 *
 *  Activé automatiquement par seasonal-theme.js qui pose les classes
 *  body.theme-seasonal et body.theme-X (X = valentine | anniversary).
 * ───────────────────────────────────────────────────────────────── */

/* ── Saint-Valentin (10-15 février) ──────────────────────────────
   Rouge cœur dramatique + bordures plus chaudes. Toutes les variables
   de palette sont redéfinies pour qu'aucune trace de l'ambiance utilisateur
   sous-jacente ne perce (cf. CTA "C'est parti" qui utilise --pink). */
body.theme-valentine {
  --pink:      #e8334f;        /* utilisé par #setupNextBtn et autres CTA */
  --pink-soft: #ff7e88;
  --pink-hot:  #d4172d;
  --pink-deep: #8a0e1c;
  --glow:      rgba(212, 23, 45, 0.72);
  --glow-soft: rgba(255, 100, 110, 0.32);
  --halo-soft:   rgba(212, 50, 75, 0.7);
  --halo-soft-2: rgba(160, 30, 50, 0.4);
  --halo-hot:    rgba(255, 60, 80, 0.85);
  --halo-hot-2:  rgba(255, 120, 80, 0.45);
  --text-light:  #ffd8dc;
  --input-border: rgba(212, 23, 45, 0.25);
  --particle-hue-min: 350;
  --particle-hue-range: 15;
  --bg:               #0e0004;      /* fond utilisé par certains layouts */
  --bg-gradient-end:  #1a0008;
  --body-before-color: rgba(212, 30, 60, 0.13);
}
/* Motes dorées → motes rouge cardinal en Saint-Valentin */
body.theme-valentine #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 200, 200, 0.95) 0%,
    rgba(255, 110, 120, 0.45) 45%,
    rgba(255, 110, 120, 0) 70%);
}
/* Ancien ornement fixe ❤️ retiré pour éviter le chevauchement avec
   les boutons gear/info en haut à droite. Les décorations restent
   visibles via les guirlandes + le dot saisonnier dans Réglages. */
@keyframes dsSeasonalHeartBeat {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  30%      { transform: scale(1.18); opacity: 0.85; }
  60%      { transform: scale(1.05); opacity: 0.65; }
}

/* ── Anniversaire de couple (±2 jours autour de la date stockée) ─
   Or chaud + miel. Toutes les variables redéfinies, comme valentine. */
body.theme-anniversary {
  --pink:      #f5b54a;        /* utilisé par #setupNextBtn et autres CTA */
  --pink-soft: #ffce85;
  --pink-hot:  #f4a020;
  --pink-deep: #b06b00;
  --glow:      rgba(244, 160, 32, 0.72);
  --glow-soft: rgba(255, 206, 133, 0.32);
  --halo-soft:   rgba(200, 130, 0, 0.7);
  --halo-soft-2: rgba(160, 90, 0, 0.4);
  --halo-hot:    rgba(255, 180, 50, 0.85);
  --halo-hot-2:  rgba(255, 140, 0, 0.45);
  --text-light:  #ffeed4;
  --input-border: rgba(244, 160, 32, 0.25);
  --particle-hue-min: 40;
  --particle-hue-range: 20;
  --bg:               #100a00;
  --bg-gradient-end:  #1a1000;
  --body-before-color: rgba(220, 160, 0, 0.13);
}
body.theme-anniversary #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 240, 180, 0.95) 0%,
    rgba(255, 200, 100, 0.45) 45%,
    rgba(255, 200, 100, 0) 70%);
}
/* Ancien ornement fixe ✨ retiré (cf. valentine ci-dessus). */
@keyframes dsSeasonalStarTwinkle {
  0%, 100% { transform: scale(1)    rotate(0deg);   opacity: 0.55; }
  50%      { transform: scale(1.15) rotate(180deg); opacity: 0.95; }
}

/* ── Halloween (24-31 octobre) ───────────────────────────────────
   Orange citrouille + violet sorcier sur noir profond. */
body.theme-halloween {
  --pink:      #ff7a18;
  --pink-soft: #ffb15e;
  --pink-hot:  #e85d04;
  --pink-deep: #7a2d00;
  --glow:      rgba(255, 122, 24, 0.70);
  --glow-soft: rgba(180, 80, 220, 0.30);
  --halo-soft:   rgba(180, 70, 0, 0.70);
  --halo-soft-2: rgba(120, 40, 130, 0.40);
  --halo-hot:    rgba(255, 140, 40, 0.85);
  --halo-hot-2:  rgba(170, 60, 200, 0.45);
  --text-light:  #ffe0c0;
  --input-border: rgba(255, 122, 24, 0.25);
  --particle-hue-min: 24;
  --particle-hue-range: 16;
  --bg:               #0a0410;
  --bg-gradient-end:  #160826;
  --body-before-color: rgba(140, 60, 200, 0.13);
}
body.theme-halloween #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 200, 140, 0.95) 0%,
    rgba(255, 130, 40, 0.45) 45%,
    rgba(255, 130, 40, 0) 70%);
}

/* ── Noël (18-26 décembre) ───────────────────────────────────────
   Rouge cardinal + pin + or sur vert nuit. */
body.theme-noel {
  --pink:      #d92b3a;
  --pink-soft: #ff8a8a;
  --pink-hot:  #b01024;
  --pink-deep: #6e0a14;
  --glow:      rgba(217, 43, 58, 0.65);
  --glow-soft: rgba(46, 139, 87, 0.32);
  --halo-soft:   rgba(46, 139, 87, 0.60);
  --halo-soft-2: rgba(180, 30, 40, 0.40);
  --halo-hot:    rgba(244, 196, 48, 0.80);
  --halo-hot-2:  rgba(46, 139, 87, 0.45);
  --text-light:  #ffe6d8;
  --input-border: rgba(217, 43, 58, 0.25);
  --particle-hue-min: 45;
  --particle-hue-range: 10;
  --bg:               #0a0c08;
  --bg-gradient-end:  #100a06;
  --body-before-color: rgba(46, 139, 87, 0.12);
}
body.theme-noel #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 245, 200, 0.95) 0%,
    rgba(244, 196, 48, 0.45) 45%,
    rgba(244, 196, 48, 0) 70%);
}

/* ── Saint-Sylvestre / Nouvel An (27 déc - 2 jan) ────────────────
   Or champagne + scintillements sur bleu minuit. */
body.theme-saint_sylvestre {
  --pink:      #ffd24a;
  --pink-soft: #fff3a3;
  --pink-hot:  #f4c430;
  --pink-deep: #9a6500;
  --glow:      rgba(255, 210, 74, 0.70);
  --glow-soft: rgba(255, 240, 160, 0.30);
  --halo-soft:   rgba(200, 160, 40, 0.60);
  --halo-soft-2: rgba(60, 70, 130, 0.40);
  --halo-hot:    rgba(255, 230, 120, 0.85);
  --halo-hot-2:  rgba(120, 140, 255, 0.45);
  --text-light:  #fff3d0;
  --input-border: rgba(255, 210, 74, 0.25);
  --particle-hue-min: 45;
  --particle-hue-range: 15;
  --bg:               #050818;
  --bg-gradient-end:  #0c1030;
  --body-before-color: rgba(120, 140, 255, 0.12);
}
body.theme-saint_sylvestre #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 250, 210, 0.95) 0%,
    rgba(255, 210, 74, 0.45) 45%,
    rgba(255, 210, 74, 0) 70%);
}

/* ── Été (15 juin - 15 sept) ─────────────────────────────────────
   Corail + soleil doré + turquoise sur teal profond. */
body.theme-ete {
  --pink:      #ff7e6b;
  --pink-soft: #ffb0a0;
  --pink-hot:  #ff5a3c;
  --pink-deep: #b03000;
  --glow:      rgba(255, 126, 107, 0.65);
  --glow-soft: rgba(31, 209, 196, 0.30);
  --halo-soft:   rgba(31, 209, 196, 0.60);
  --halo-soft-2: rgba(255, 150, 100, 0.40);
  --halo-hot:    rgba(255, 200, 80, 0.85);
  --halo-hot-2:  rgba(31, 209, 196, 0.45);
  --text-light:  #fff0e0;
  --input-border: rgba(255, 126, 107, 0.25);
  --particle-hue-min: 10;
  --particle-hue-range: 30;
  --bg:               #04100f;
  --bg-gradient-end:  #0a1a18;
  --body-before-color: rgba(31, 209, 196, 0.12);
}
body.theme-ete #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(180, 255, 245, 0.95) 0%,
    rgba(31, 209, 196, 0.45) 45%,
    rgba(31, 209, 196, 0) 70%);
}

/* ── Printemps (mars-mai) — vert tendre + fleur de cerisier ──────── */
body.theme-printemps {
  --pink:      #ff8fb8;
  --pink-soft: #ffc2d8;
  --pink-hot:  #ff5e93;
  --pink-deep: #a83a66;
  --glow:      rgba(255, 143, 184, 0.62);
  --glow-soft: rgba(123, 216, 106, 0.32);
  --halo-soft:   rgba(90, 180, 90, 0.55);
  --halo-soft-2: rgba(255, 150, 190, 0.40);
  --halo-hot:    rgba(255, 130, 180, 0.80);
  --halo-hot-2:  rgba(123, 216, 106, 0.45);
  --text-light:  #ffe4ef;
  --input-border: rgba(255, 143, 184, 0.25);
  --particle-hue-min: 320;
  --particle-hue-range: 30;
  --bg:               #0a0f08;
  --bg-gradient-end:  #12100a;
  --body-before-color: rgba(123, 216, 106, 0.12);
}
body.theme-printemps #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 220, 235, 0.95) 0%, rgba(255, 143, 184, 0.45) 45%, rgba(255, 143, 184, 0) 70%);
}

/* ── Automne (sept-nov) — ambre, rouille, feuilles ──────────────── */
body.theme-automne {
  --pink:      #e8853a;
  --pink-soft: #ffb877;
  --pink-hot:  #d2541a;
  --pink-deep: #8a3410;
  --glow:      rgba(232, 133, 58, 0.62);
  --glow-soft: rgba(194, 82, 26, 0.32);
  --halo-soft:   rgba(170, 80, 20, 0.60);
  --halo-soft-2: rgba(120, 50, 10, 0.40);
  --halo-hot:    rgba(255, 150, 50, 0.82);
  --halo-hot-2:  rgba(200, 90, 30, 0.45);
  --text-light:  #ffe7cf;
  --input-border: rgba(232, 133, 58, 0.25);
  --particle-hue-min: 20;
  --particle-hue-range: 25;
  --bg:               #0e0805;
  --bg-gradient-end:  #160c06;
  --body-before-color: rgba(200, 100, 30, 0.12);
}
body.theme-automne #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(255, 220, 170, 0.95) 0%, rgba(232, 133, 58, 0.45) 45%, rgba(232, 133, 58, 0) 70%);
}

/* ── Hiver (déc-fév, hors fêtes) — bleu glacé, givre ────────────── */
body.theme-hiver {
  --pink:      #6db8e8;
  --pink-soft: #b8e0f7;
  --pink-hot:  #3a8fcc;
  --pink-deep: #1f5a86;
  --glow:      rgba(109, 184, 232, 0.60);
  --glow-soft: rgba(180, 220, 245, 0.32);
  --halo-soft:   rgba(80, 140, 190, 0.55);
  --halo-soft-2: rgba(120, 160, 210, 0.38);
  --halo-hot:    rgba(150, 210, 255, 0.80);
  --halo-hot-2:  rgba(100, 150, 220, 0.42);
  --text-light:  #e6f3ff;
  --input-border: rgba(109, 184, 232, 0.25);
  --particle-hue-min: 195;
  --particle-hue-range: 25;
  --bg:               #060a12;
  --bg-gradient-end:  #0a1018;
  --body-before-color: rgba(120, 170, 230, 0.12);
}
body.theme-hiver #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(220, 240, 255, 0.95) 0%, rgba(109, 184, 232, 0.45) 45%, rgba(109, 184, 232, 0) 70%);
}

/* ── Pleine lune (nuits de pleine lune) — argent + bleu nuit profond ── */
body.theme-pleine_lune {
  --pink:      #9fb8e0;
  --pink-soft: #d8e6f7;
  --pink-hot:  #6f90c8;
  --pink-deep: #3a4f7a;
  --glow:      rgba(159, 184, 224, 0.60);
  --glow-soft: rgba(216, 230, 247, 0.32);
  --halo-soft:   rgba(110, 140, 200, 0.55);
  --halo-soft-2: rgba(80, 100, 160, 0.40);
  --halo-hot:    rgba(180, 205, 245, 0.80);
  --halo-hot-2:  rgba(120, 150, 220, 0.42);
  --text-light:  #e8eeff;
  --input-border: rgba(159, 184, 224, 0.25);
  --particle-hue-min: 210;
  --particle-hue-range: 30;
  --bg:               #05060f;
  --bg-gradient-end:  #0a0c18;
  --body-before-color: rgba(140, 160, 220, 0.12);
}
body.theme-pleine_lune #bg-motes .mote {
  background: radial-gradient(circle at center,
    rgba(235, 242, 255, 0.95) 0%, rgba(159, 184, 224, 0.45) 45%, rgba(159, 184, 224, 0) 70%);
}

/* ═══════════════════════════════════════════════════════════════════
   AMBIANCE ANIMÉE — particules thématiques en fond (neige, chauves-souris,
   étincelles…). Couche fixe, non interactive, sous les modales mais
   au-dessus du fond. Injectée par seasonal-theme.js (_spawnAmbient).
   ═══════════════════════════════════════════════════════════════════ */
#ds-seasonal-ambient {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 40;            /* < modales (99990+), > contenu courant */
}

/* ── Vignette / halo coloré enveloppant (bord d'écran) ───────────────
   Centre transparent, teinte douce uniquement aux bords. Couleur via
   --season-vignette (défini par chaque body.theme-X ci-dessous). */
#ds-seasonal-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 38;            /* sous les particules, au-dessus du fond */
  background: radial-gradient(ellipse 118% 88% at 50% 48%,
              transparent 52%, var(--season-vignette, transparent) 124%);
  opacity: 0;
  transition: opacity 0.9s ease;
}
#ds-seasonal-vignette.is-on { opacity: 1; }
body.theme-valentine       { --season-vignette: rgba(212, 23, 45, 0.16); }
body.theme-anniversary     { --season-vignette: rgba(244, 160, 32, 0.15); }
body.theme-halloween       { --season-vignette: rgba(140, 60, 200, 0.18); }
body.theme-noel            { --season-vignette: rgba(36, 110, 70, 0.18); }
body.theme-saint_sylvestre { --season-vignette: rgba(255, 210, 74, 0.15); }
body.theme-ete             { --season-vignette: rgba(31, 209, 196, 0.15); }
body.theme-printemps       { --season-vignette: rgba(255, 143, 184, 0.15); }
body.theme-automne         { --season-vignette: rgba(200, 90, 25, 0.17); }
body.theme-hiver           { --season-vignette: rgba(120, 175, 230, 0.16); }
body.theme-pleine_lune     { --season-vignette: rgba(150, 170, 220, 0.17); }
@media (prefers-reduced-motion: reduce) {
  #ds-seasonal-vignette { transition: none; }
}
#ds-seasonal-ambient .dsa {
  position: absolute;
  line-height: 1;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  user-select: none;
}
/* Chute (neige) : descend en se balançant + rotation lente */
@keyframes dsaFall {
  0%   { transform: translateY(-12vh) translateX(0)          rotate(0deg); }
  100% { transform: translateY(116vh) translateX(var(--sway)) rotate(140deg); }
}
.dsa-fall { animation: dsaFall linear infinite; }
/* Montée (étincelles, bulles, cœurs) : remonte en fondu */
@keyframes dsaRise {
  0%   { transform: translateY(0)      translateX(0)          rotate(0deg);  opacity: var(--op, 0.6); }
  85%  { opacity: var(--op, 0.6); }
  100% { transform: translateY(-122vh) translateX(var(--sway)) rotate(45deg); opacity: 0; }
}
.dsa-rise { animation: dsaRise ease-in infinite; }
/* Dérive horizontale (chauves-souris, feuilles) : traverse en ondulant */
@keyframes dsaDrift {
  0%   { transform: translateX(-12vw) translateY(0)            rotate(0deg); }
  50%  { transform: translateX(54vw)  translateY(var(--sway))  rotate(8deg); }
  100% { transform: translateX(122vw) translateY(0)            rotate(-6deg); }
}
.dsa-drift { animation: dsaDrift linear infinite; }

@media (prefers-reduced-motion: reduce) {
  body.theme-valentine::after,
  body.theme-anniversary::after { animation: none; }
  #ds-seasonal-ambient { display: none; }   /* pas de particules animées */
}

/* ═════════════════════════════════════════════════════════════════
   DÉCORATIONS DE CONTENU
   Insérées par seasonal-theme.js (decorate*) sur logos, carrés de
   menu et carte de résultat. Couleurs prises sur la palette active.
   ═════════════════════════════════════════════════════════════════ */

/* ── Logo : couronne SVG arquée au-dessus (rose garland / star burst) ─ */
.seasonal-logo-deco {
  position: absolute;          /* left/top/width/height calculés en JS */
  pointer-events: none;
  z-index: 5;
  animation: dsWreathFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 12px var(--glow));
}
.seasonal-logo-deco svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@keyframes dsWreathFloat {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%      { transform: translateY(-3px) scale(1.02); }
}

/* Garantir un contexte d'ancrage pour les décorations en absolute. */
body.theme-seasonal .game-type-btn,
body.theme-seasonal .cc-heat-btn,
body.theme-seasonal .intensity-group,
body.theme-seasonal .prog-level-group,
body.theme-seasonal .lm-intensity-group,
body.theme-seasonal #result { position: relative; }

/* ── Guirlande SVG accrochée aux COINS de la catégorie ────────
   La guirlande s'étend sur 92 % de la largeur du parent (et atteint 100 %
   sur game-type-btn). Ses nœuds atterrissent ainsi aux COINS supérieurs,
   pas au milieu — c'est cohérent avec l'image mentale d'une vraie guirlande
   tendue d'un coin à l'autre.

   Astuce CSS : on combine `aspect-ratio` (calcule height = width × 60/160)
   avec un `margin-top` négatif en pourcentage. Le % du margin se base sur
   la LARGEUR du parent (CSS spec), donc :
     wreath_height = 0.92 × parent_width × 60/160 = 0.345 × parent_width
     offset_voulu  = -0.80 × wreath_height = -0.276 × parent_width = -27.6 %
*/
.seasonal-group-wreath {
  position: absolute;
  /* Largeur adaptative : 35 % du parent, plancher 220 px, plafond 500 px.
     Centrée via inset-inline:0 + margin auto (libère le transform pour l'animation). */
  inset-inline: 0;
  margin-left: auto;
  margin-right: auto;
  width: clamp(220px, 35%, 500px);
  aspect-ratio: 480 / 60;
  /* margin-top = -85 % de la hauteur de la guirlande. La hauteur dépend de la
     largeur (via aspect-ratio), elle-même clampée → on clamp aussi le margin-top. */
  margin-top: clamp(-55px, -3.7%, -22px);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 2px 10px var(--glow));
  animation: dsWreathFloat 4.5s ease-in-out infinite;
}
.seasonal-group-wreath svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Game-type-btn : boutons plus étroits → pleine largeur (left/right 0)
   pour que les nœuds tombent pile aux coins. */
body.theme-seasonal .game-type-btn > .seasonal-group-wreath {
  /* Pour les boutons étroits, on revient à pleine largeur du bouton
     (override la valeur fixe ci-dessus). */
  left: 0;
  right: 0;
  margin-left: 0;
  width: auto;
  height: auto;
  aspect-ratio: 480 / 60;
  margin-top: -10.6%;
}

/* Réservation d'espace au-dessus du parent pour la portion visible
   de la guirlande (≈ 80 % de sa hauteur, soit ~28 % de la largeur du parent).
   On utilise clamp() pour que ça scale raisonnablement avec le viewport. */
body.theme-seasonal .intensity-group,
body.theme-seasonal .prog-level-group,
body.theme-seasonal .lm-intensity-group { margin-top: 50px !important; }
body.theme-seasonal .game-type-btn { margin-top: clamp(25px, 5vw, 50px); }

/* ── Frise SVG en haut des carrés de menu ──────────────────────
   Petit cœur / étoile en motif répété sur le bord supérieur,
   relié par une fine ligne. Le SVG est en background-image (utf8) sur
   .seasonal-frieze qui s'étale en absolute sur toute la largeur du bouton. */
.seasonal-frieze {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 28px 14px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.85;
  filter: drop-shadow(0 1px 3px var(--glow));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  animation: dsFriezeShimmer 4s ease-in-out infinite;
}
@keyframes dsFriezeShimmer {
  0%, 100% { opacity: 0.70; }
  50%      { opacity: 1.00; }
}

/* ── « Congère » thématique sur le bord supérieur des cartes de menu ──
   Bande SVG répétée (neige, coulures, guirlande…) accrochée au haut de la
   carte, clippée à ses coins arrondis. Insérée par decorateCaps(). */
body.theme-seasonal .lvslider-display,
body.theme-seasonal .game-type-btn { position: relative; }
.seasonal-cap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 15px;
  pointer-events: none;
  z-index: 5;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 100%;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  animation: dsCapSettle 0.5s ease-out both;
}
@keyframes dsCapSettle {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* ── 2 filigranes SVG dans les coins de la carte de résultat ───── */
.seasonal-result-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Cachés tant que la carte ne contient pas d'action active — évite que les
   étoiles apparaissent à vide pendant que les dés roulent. */
#result:not(.active-action) > .seasonal-result-deco { display: none; }
.seasonal-result-deco .srd {
  position: absolute;
  width: 32px;
  height: 32px;
  opacity: 0.65;
  filter: drop-shadow(0 0 6px var(--glow));
  animation: dsFiligreePulse 5s ease-in-out infinite;
}
.seasonal-result-deco .srd svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.seasonal-result-deco .srd-1 { top: 8px;    left: 10px;  animation-delay: 0s;   }
.seasonal-result-deco .srd-2 { bottom: 8px; right: 10px; animation-delay: 1.7s;
                                transform: scale(-1, -1);  /* mirroir pour symétrie */
                                opacity: 0.55; }
@keyframes dsFiligreePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* Reduced-motion : décorations visibles mais statiques */
@media (prefers-reduced-motion: reduce) {
  .seasonal-logo-deco .sld,
  .seasonal-corner,
  .seasonal-result-deco .srd { animation: none; }
}

/* ── Landscape : éléments parents rétrécis → décorations adaptées.
   La couronne logo est déjà calculée en JS (×1.4 du logo) donc auto-scale.
   On ajuste juste les filigranes et la frise. */
@media (orientation: landscape) and (min-height: 600px) {
  .seasonal-frieze { height: 11px; background-size: 22px 11px; }
  .seasonal-result-deco .srd { width: 26px; height: 26px; }
  body.theme-valentine::after,
  body.theme-anniversary::after { font-size: 15px; right: 12px; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .seasonal-frieze { height: 9px; background-size: 18px 9px; }
  .seasonal-result-deco .srd { width: 22px; height: 22px; }
  body.theme-valentine::after,
  body.theme-anniversary::after { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   GÂTEAU D'ANNIVERSAIRE — bougie à flamme animée, en bas à droite,
   DEVANT la mascotte flottante. Injecté par _spawnAnniversaryCake().
   ═══════════════════════════════════════════════════════════════════ */
#ds-anniv-cake {
  position: fixed;
  right: max(env(safe-area-inset-right, 0px) + 6px, 10px);
  bottom: max(env(safe-area-inset-bottom, 0px) + 4px, 8px);
  width: 84px; height: 92px;
  z-index: 9501;            /* > mascotte (#dsMascot z-index 9500) → devant */
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.34, 1.55, .5, 1);
}
#ds-anniv-cake.is-on { opacity: 1; transform: translateY(0) scale(1); }
/* Flamme : vacillement (échelle + légère translation + lueur). */
.ds-cake-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dsCakeFlicker 1.7s ease-in-out infinite;
}
@keyframes dsCakeFlicker {
  0%, 100% { transform: scale(1, 1)        translateX(0); }
  25%      { transform: scale(0.92, 1.08)  translateX(-0.4px); }
  50%      { transform: scale(1.05, 0.95)  translateX(0.5px); }
  75%      { transform: scale(0.96, 1.04)  translateX(-0.3px); }
}
.ds-cake-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: dsCakeGlow 1.7s ease-in-out infinite;
}
@keyframes dsCakeGlow {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%      { opacity: 0.34; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-cake-flame, .ds-cake-glow { animation: none; }
  #ds-anniv-cake { transition: none; }
}
/* Paysage très bas : gâteau plus petit pour ne pas gêner. */
@media (orientation: landscape) and (max-height: 460px) {
  #ds-anniv-cake { width: 60px; height: 66px; }
}