/* ==========================================================
   Hydro Bot — modes de saison (activés par assets/seasons.js)
   ========================================================== */
.ss-halloween{--ss-a:#ff8a1f;--ss-b:#8b4dff}
.ss-paques{--ss-a:#ffd34d;--ss-b:#7be0b0}
.ss-valentin{--ss-a:#ff3d7f;--ss-b:#ff9ec4}
.ss body{background-image:radial-gradient(1000px 500px at 78% -12%,color-mix(in srgb,var(--ss-a) 22%,transparent),transparent 62%),radial-gradient(800px 460px at -8% 24%,color-mix(in srgb,var(--ss-b) 16%,transparent),transparent 60%)}
.ss .grad{background:linear-gradient(100deg,#fff 0%,color-mix(in srgb,var(--ss-a) 55%,#fff) 30%,var(--ss-a) 62%,var(--ss-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ss ::selection{background:var(--ss-a)}
.ss .btn-primary{box-shadow:0 8px 26px color-mix(in srgb,var(--ss-a) 35%,transparent)}

/* Accessoire sur le logo (chapeau de sorcière, oreilles de lapin, cœur) */
.ss-wrap{position:relative;display:inline-block;line-height:0;flex:none}
.ss-hat{position:absolute;left:44%;top:-22%;width:46%;height:auto;transform:rotate(14deg);transform-origin:30% 90%;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.ss-hat.ss-ears{left:22%;top:-48%;width:56%;transform:none}
.ss-hat.ss-heart{left:58%;top:-14%;width:34%;transform:rotate(16deg);animation:ssBeat 1.4s ease-in-out infinite}
@keyframes ssBeat{0%,100%{scale:1}15%{scale:1.15}30%{scale:1}}
.ss-wrap.ss-hero{display:block;width:min(430px,80%);position:relative;z-index:2;animation:float 6s ease-in-out infinite}
.ss-wrap.ss-hero>.mascot{width:100%;animation:none}
.ss-wrap.ss-hero .ss-hat{left:34%;top:-12%;width:38%;z-index:4}
.ss-wrap.ss-hero .ss-hat.ss-ears{left:31%;top:-2%;width:36%}
.ss-wrap.ss-hero .ss-hat.ss-heart{left:20%;top:6%;width:24%;transform:rotate(-14deg)}
@media(max-width:600px){.ss-wrap.ss-hero{width:62%}}

/* Pluie d'emojis (derrière les clics) */
#ss-rain{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none}

/* Barre en bas à gauche : compte à rebours + bouton on/off */
.ss-bar{position:fixed;left:14px;bottom:14px;z-index:80;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;border-radius:30px;font:600 .8rem/1 var(--font);color:#fff;
  background:linear-gradient(135deg,rgba(14,26,56,.92),color-mix(in srgb,var(--ss-a,#ff8a1f) 30%,rgba(20,10,30,.9)));border:1px solid color-mix(in srgb,var(--ss-a,#ff8a1f) 45%,transparent);backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.ss-bar-halloween{--ss-a:#ff8a1f}.ss-bar-paques{--ss-a:#ffd34d}.ss-bar-valentin{--ss-a:#ff3d7f}
.ss-bar.off{background:rgba(10,20,44,.85);border-color:var(--line-strong);color:var(--muted)}
.ss-count{white-space:nowrap;padding-right:4px}
.ss-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:.2s}
.ss-btn svg{width:16px;height:16px}.ss-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.ss-btn.on{color:var(--ss-a,#ff8a1f)}.ss-bar.off .ss-btn{color:var(--muted)}
@media (max-width:520px){.ss-count{font-size:.72rem}.ss-bar{left:10px;bottom:10px}}
@media (prefers-reduced-motion:reduce){#ss-rain{display:none}.ss-hat.ss-heart{animation:none}}

/* ---- Mini-lecteur de musique de saison (season-music.js) ---- */
#hy-music{position:fixed;left:14px;bottom:62px;z-index:81;width:212px;padding:6px;border-radius:14px;background:rgba(12,16,28,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;font:600 .72rem/1.3 var(--font)}
#hy-music .hm-frame{border-radius:9px;overflow:hidden;background:#000;line-height:0}
#hy-music iframe{width:200px;height:113px;border:0;display:block}
#hy-music .hm-row{display:flex;align-items:center;gap:6px;padding:6px 2px 0}
#hy-music .hm-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
#hy-music .hm-next{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:.7rem}
#hy-music .hm-next:hover{background:rgba(255,255,255,.14)}
@media (max-width:520px){#hy-music{left:10px;bottom:56px}}

/* ---- Objets de saison (œufs, citrouilles, cœurs…) posés sur le site ---- */
.ss-obj{position:absolute;right:12px;bottom:10px;width:32px;height:32px;pointer-events:none;z-index:2;transform:rotate(var(--r,0deg));filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));animation:ssBob 4s ease-in-out infinite;animation-delay:var(--w,0s)}
.ss-obj svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes ssBob{0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}50%{transform:rotate(var(--r,0deg)) translateY(-3px)}}
.ss-halloween .ss-obj{filter:drop-shadow(0 0 8px rgba(255,138,31,.55))}
.ss-valentin .ss-obj{filter:drop-shadow(0 0 8px rgba(255,61,127,.45))}
.nav>.ss-garland{position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;background-repeat:repeat-x;background-size:64px 24px;opacity:.9}
.ss footer{position:relative}
.ss-scene{position:absolute;left:0;right:0;bottom:100%;height:92px;pointer-events:none;z-index:1}
.ss-scene>svg{display:block;width:100%;height:100%}
@media (max-width:600px){.ss-scene{height:62px}.ss-obj{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){.ss-obj{animation:none}}

/* Étiquette « Aperçu » (quand on regarde une saison en avance avec ?saison=…) */
.ss-preview{position:fixed;right:14px;bottom:14px;z-index:85;padding:9px 14px;border-radius:30px;font:600 .78rem/1 var(--font);color:#fff;text-decoration:none;
  background:rgba(12,16,28,.92);border:1px solid rgba(255,211,77,.45);box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.ss-preview:hover{border-color:#ffd34d}
@media (max-width:520px){.ss-preview{right:10px;bottom:62px;font-size:.72rem}}

/* ---- Printemps, été, automne ---- */
.ss-printemps{--ss-a:#ff8fb8;--ss-b:#7be0b0}.ss-ete{--ss-a:#ffb703;--ss-b:#2ec4ff}.ss-automne{--ss-a:#e8741c;--ss-b:#b5651d}
.ss-bar-printemps{--ss-a:#ff8fb8}.ss-bar-ete{--ss-a:#ffb703}.ss-bar-automne{--ss-a:#e8741c}
.ss-hat.ss-crown{left:6%;top:-30%;width:88%;transform:rotate(-6deg)}
.ss-hat.ss-sun{left:14%;top:-40%;width:72%;transform:rotate(-8deg)}
.ss-hat.ss-leaf{left:52%;top:-34%;width:42%;transform:rotate(22deg)}
.ss-wrap.ss-hero .ss-hat.ss-crown{left:27%;top:4%;width:46%;transform:rotate(-4deg)}
.ss-wrap.ss-hero .ss-hat.ss-sun{left:25%;top:-6%;width:50%;transform:rotate(-6deg)}
.ss-wrap.ss-hero .ss-hat.ss-leaf{left:53%;top:-1%;width:24%;transform:rotate(18deg)}
.ss-ete .ss-obj{filter:drop-shadow(0 0 8px rgba(255,183,3,.45))}
.ss-automne .ss-obj{filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(232,116,28,.35))}

/* ==========================================================
   Détails sur toutes les saisons (comme la glace et la galaxie à Noël)
   ========================================================== */
/* Bord décoré en haut des cartes */
.ss-edge{position:absolute;left:10px;right:10px;top:0;height:22px;pointer-events:none;z-index:2;background-repeat:repeat-x;background-size:60px 22px;opacity:.92;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* Bordures et lueurs aux couleurs de la saison */
.ss .card,.ss .plan,.ss .co-card,.ss .pm-why,.ss .fl-stat,.ss .tl-card{border-color:color-mix(in srgb,var(--ss-a) 30%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ss-a) 28%,transparent),inset 0 0 34px color-mix(in srgb,var(--ss-a) 7%,transparent)}
.ss h1,.ss h2{text-shadow:0 0 22px color-mix(in srgb,var(--ss-a) 24%,transparent)}
/* Fond d'ambiance : grosses lumières floues qui flottent + effet propre à chaque saison */
.ss-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ss-sky i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;filter:blur(6px);opacity:.22;
  background:radial-gradient(circle,color-mix(in srgb,var(--ss-a) 80%,#fff),transparent 70%);animation:ssFloat var(--d) ease-in-out infinite alternate;animation-delay:var(--w)}
.ss-sky i:nth-child(3n){background:radial-gradient(circle,color-mix(in srgb,var(--ss-b) 80%,#fff),transparent 70%)}
@keyframes ssFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-40px) scale(1.25)}}
.ss-sky::before,.ss-sky::after{content:"";position:absolute;pointer-events:none}
/* Halloween : brume qui glisse + lune */
.ss-sky-halloween::before{left:-20%;right:-20%;bottom:-5%;height:45%;background:radial-gradient(50% 60% at 30% 70%,rgba(180,160,220,.16),transparent 70%),radial-gradient(45% 55% at 75% 80%,rgba(160,140,200,.14),transparent 70%);filter:blur(20px);animation:ssFog 26s linear infinite alternate}
.ss-sky-halloween::after{right:8%;top:9%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6d6,#ffd98a 55%,rgba(255,180,80,0) 72%);box-shadow:0 0 80px 30px rgba(255,200,120,.12);opacity:.5}
@keyframes ssFog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
/* Été : rayons de soleil qui tournent doucement */
.ss-sky-ete::before{right:-260px;top:-260px;width:620px;height:620px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,210,90,.10) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);animation:ssSpin 60s linear infinite}
.ss-sky-ete::after{right:40px;top:40px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#fff3b0,#ffd34d 50%,rgba(255,183,3,0) 72%);opacity:.5}
@keyframes ssSpin{to{transform:rotate(360deg)}}
/* Printemps, Pâques, Saint-Valentin, automne : lueur douce en haut */
.ss-sky-printemps::before,.ss-sky-paques::before,.ss-sky-valentin::before,.ss-sky-automne::before{left:-10%;right:-10%;top:-20%;height:55%;filter:blur(30px);
  background:radial-gradient(40% 60% at 25% 40%,color-mix(in srgb,var(--ss-a) 22%,transparent),transparent 70%),radial-gradient(35% 55% at 75% 35%,color-mix(in srgb,var(--ss-b) 20%,transparent),transparent 70%);animation:ssFog 22s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.ss-sky i,.ss-sky::before{animation:none}}

/* ==========================================================
   Black Friday (assets/blackfriday.js) : bandeau noir et doré + prix réduits
   ========================================================== */
.bf-ribbon{position:fixed;top:0;left:0;right:0;z-index:75;height:36px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 14px;
  background:linear-gradient(90deg,#000,#16110a 30%,#1a1408 70%,#000);border-bottom:1px solid rgba(255,211,77,.55);color:#f5e6c4;font:600 .82rem/1 var(--font);white-space:nowrap;overflow:hidden}
.bf-ribbon b{color:#ffd34d;letter-spacing:.12em;font-weight:800}
.bf-ribbon .bf-pct{padding:4px 8px;border-radius:6px;background:#ffd34d;color:#000;font-weight:800}
.bf-ribbon .bf-left em{font-style:normal;color:#ffd34d;font-variant-numeric:tabular-nums}
.bf-ribbon a{color:#000;background:#ffd34d;padding:5px 10px;border-radius:20px;text-decoration:none;font-weight:700}
.bf-ribbon a:hover{background:#ffe17a}
.bf .nav,.bf .xm-lights{top:36px}
.bf .dtop{top:36px}
.bf-badge{position:absolute;top:14px;right:14px;z-index:3;padding:5px 10px;border-radius:20px;background:#000;color:#ffd34d;border:1px solid rgba(255,211,77,.6);font:800 .7rem/1 var(--font);letter-spacing:.06em}
.bf .plan{border-color:rgba(255,211,77,.45)}
@media (max-width:720px){.bf-ribbon{gap:8px;font-size:.72rem;justify-content:flex-start}.bf-ribbon .bf-txt{display:none}}
@media (max-width:420px){.bf-ribbon .bf-left{display:none}}

/* ---- Performances : les lumières de fond ne recalculent plus leur flou à chaque image ---- */
.ss-sky i{filter:none;opacity:.18;will-change:transform}
.ss-sky::before,.xm body::before{will-change:transform}
.xm-galaxy::before,.xm-galaxy::after{will-change:opacity}
@media (max-width:700px){.ss-sky i:nth-child(n+6){display:none}.xm-galaxy i:nth-child(n+3){display:none}}