/* ═══════════════════════════════════════════════════════════
   Orbital Web — décor Halloween
   Tout ce qui est décoratif est ici : aria-hidden, sans clic (sauf les clins d'œil),
   et invisible hors thème « halloween ». Les animations sont coupées si l'utilisateur
   demande moins de mouvement (voir base.css).
   ═══════════════════════════════════════════════════════════ */

.only-hw{ display:none !important; }
html[data-theme="halloween"] .only-hw{ display:block !important; }
html[data-theme="halloween"] .only-hw.inline{ display:inline-flex !important; }
html[data-theme="halloween"] .only-day{ display:none !important; }

/* Champ d'étoiles fixe derrière toute la page */
.fx-stars{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease);
}
html[data-theme="halloween"] .fx-stars{ opacity:1; }
html[data-theme="halloween"] body{
  background:
    radial-gradient(70% 50% at 85% 0%, rgba(110,86,248,.22), transparent 70%),
    radial-gradient(60% 45% at 0% 35%, rgba(255,90,31,.10), transparent 70%),
    linear-gradient(180deg,#0A0F1E 0%,#0B1126 55%,#080C19 100%);
  background-attachment:fixed;
}

/* Lueur qui suit le curseur */
.fx-glow{
  position:fixed; left:0; top:0; width:560px; height:560px; margin:-280px 0 0 -280px;
  border-radius:50%; pointer-events:none; z-index:0; will-change:transform;
  background:radial-gradient(closest-side,rgba(255,112,48,.17),rgba(110,86,248,.08) 55%,transparent 74%);
  mix-blend-mode:screen; opacity:0; transition:opacity .8s var(--ease);
}
html[data-theme="halloween"] .fx-glow.on{ opacity:1; }
html[data-theme="day"] .fx-glow{ display:none; }

/* Citrouille : lueur de bougie */
.pumpkin{ display:block; overflow:visible; filter:drop-shadow(0 0 14px rgba(255,120,30,.65)); animation:candle 3.4s ease-in-out infinite; }
.pumpkin .face{ animation:faceGlow 2.6s ease-in-out infinite; }
@keyframes candle{
  0%,100%{ filter:drop-shadow(0 0 12px rgba(255,120,30,.55)); }
  22%{ filter:drop-shadow(0 0 20px rgba(255,150,40,.85)); }
  47%{ filter:drop-shadow(0 0 10px rgba(255,100,30,.5)); }
  71%{ filter:drop-shadow(0 0 18px rgba(255,140,40,.78)); }
}
@keyframes faceGlow{ 0%,100%{ opacity:.92; } 30%{ opacity:1; } 55%{ opacity:.78; } 80%{ opacity:1; } }

/* Araignée suspendue à la barre de navigation */
.fx-spider{
  position:absolute; left:var(--spider-x,47%); top:calc(100% - 2px); width:44px; margin-left:-22px; z-index:4;
  pointer-events:none; transform-origin:50% 0; animation:spiderSway 5.5s ease-in-out infinite;
}
.fx-spider__thread{
  display:block; width:1.5px; height:var(--len,56px); margin:0 auto;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.6) 40%,rgba(255,255,255,.7));
}
.fx-spider svg{ width:36px; height:36px; margin:-3px auto 0; pointer-events:auto; cursor:pointer; color:#D6D9EA; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.fx-spider.flee{ transition:transform .6s var(--ease-out); transform:translateY(-140px); }
@keyframes spiderSway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }

/* Chauves-souris */
.fx-bats{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.fx-bat{ position:absolute; left:0; top:0; width:var(--w,46px); color:#05070F; will-change:transform; opacity:0; }
.fx-bat svg{ width:100%; height:auto; transform-origin:50% 45%; animation:flap .3s ease-in-out infinite alternate; overflow:visible; }
html[data-theme="halloween"] .fx-bat{ opacity:.92; }
.fx-bat.b1{ --w:54px; animation:batA 19s linear infinite; }
.fx-bat.b2{ --w:34px; animation:batB 26s linear -9s infinite; }
.fx-bat.b3{ --w:42px; animation:batC 22s linear -4s infinite; }
@keyframes flap{ from{ transform:scale(1,1); } to{ transform:scale(1,.42); } }
@keyframes batA{
  0%{ transform:translate(-8vw,34vh) rotate(8deg); } 22%{ transform:translate(18vw,12vh) rotate(-8deg) scale(.9); }
  48%{ transform:translate(48vw,26vh) rotate(6deg); } 74%{ transform:translate(78vw,6vh) rotate(-10deg) scale(1.1); }
  100%{ transform:translate(112vw,22vh) rotate(8deg); }
}
@keyframes batB{
  0%{ transform:translate(112vw,60vh) rotate(-6deg) scale(.8); } 30%{ transform:translate(76vw,44vh) rotate(10deg); }
  58%{ transform:translate(40vw,64vh) rotate(-8deg) scale(.9); } 100%{ transform:translate(-10vw,38vh) rotate(8deg); }
}
@keyframes batC{
  0%{ transform:translate(-6vw,70vh) rotate(10deg); } 35%{ transform:translate(30vw,52vh) rotate(-6deg) scale(1.1); }
  66%{ transform:translate(66vw,72vh) rotate(8deg); } 100%{ transform:translate(110vw,48vh) rotate(-8deg); }
}
/* Chauve-souris isolée (JS) qui traverse l'écran */
.fx-flyer{ position:fixed; left:0; top:0; z-index:40; pointer-events:none; color:#02030A; will-change:transform; }
.fx-flyer svg{ width:100%; height:auto; animation:flap .26s ease-in-out infinite alternate; overflow:visible; filter:drop-shadow(0 0 6px rgba(110,86,248,.5)); }

/* Fantômes */
.fx-ghost{
  position:absolute; width:var(--w,72px); color:#E9ECFA; pointer-events:none;
  filter:drop-shadow(0 0 22px rgba(190,200,255,.4)); opacity:.88;
  animation:ghostFloat var(--t,7s) ease-in-out infinite;
}
.fx-ghost svg{ width:100%; height:auto; overflow:visible; }
.fx-ghost .pupil{ transition:transform .12s linear; }
.fx-ghost .lid{ transform-origin:50% 50%; animation:blink 5s infinite; }
@keyframes ghostFloat{ 0%,100%{ transform:translate(0,0) rotate(-4deg); } 50%{ transform:translate(14px,-24px) rotate(4deg); } }
@keyframes blink{ 0%,94%,100%{ transform:scaleY(0); } 96.5%{ transform:scaleY(1); } }

/* Toiles d'araignée dans les coins */
.fx-web{ position:absolute; width:min(300px,38vw); aspect-ratio:1; color:rgba(255,255,255,.26); pointer-events:none; }
.fx-web svg{ width:100%; height:100%; }
.fx-web--tl{ left:0; top:0; }
.fx-web--tr{ right:0; top:0; transform:scaleX(-1); }
.fx-web--br{ right:0; bottom:0; transform:scale(-1,-1); }

/* Brouillard */
.fx-fog{ position:absolute; left:-15%; right:-15%; height:280px; pointer-events:none; filter:blur(20px); opacity:.9; }
.fx-fog::before,.fx-fog::after{ content:""; position:absolute; inset:0; }
.fx-fog::before{
  background:radial-gradient(38% 55% at 25% 60%,rgba(176,168,255,.16),transparent 72%),radial-gradient(34% 50% at 72% 45%,rgba(255,150,110,.11),transparent 72%);
  animation:fogA 34s ease-in-out infinite alternate;
}
.fx-fog::after{
  background:radial-gradient(40% 50% at 55% 55%,rgba(200,205,255,.12),transparent 72%);
  animation:fogB 46s ease-in-out infinite alternate;
}
@keyframes fogA{ from{ transform:translateX(-7%); } to{ transform:translateX(9%); } }
@keyframes fogB{ from{ transform:translateX(8%) scaleY(1); } to{ transform:translateX(-10%) scaleY(1.2); } }

/* Cimetière en bas de page */
.fx-grave{ position:absolute; left:0; right:0; bottom:0; height:clamp(90px,12vw,170px); pointer-events:none; color:#05070F; }
.fx-grave svg{ width:100%; height:100%; }
.fx-grave .jack{ position:absolute; bottom:6%; width:clamp(34px,4.2vw,58px); }

/* Interrupteur de thème (citrouille / soleil) */
.theme-toggle{
  position:relative; width:42px; height:42px; border-radius:50%; flex:none; cursor:pointer;
  border:1px solid var(--line-2); background:color-mix(in srgb,var(--surface) 70%,transparent); color:var(--fg);
  display:grid; place-items:center; transition:transform .35s var(--spring), border-color .25s, background-color .25s;
}
.theme-toggle:hover{ transform:rotate(-12deg) scale(1.08); border-color:var(--ignition); }
.theme-toggle svg{ width:22px; height:22px; }
.theme-toggle .ic-sun{ display:none; }
html[data-theme="halloween"] .theme-toggle .ic-sun{ display:none; }
html[data-theme="day"] .theme-toggle .ic-sun{ display:block; }
html[data-theme="day"] .theme-toggle .ic-pumpkin{ display:none; }

/* Éclats de citrouilles au clic */
.fx-burst{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:300; }

@media (max-width:760px){
  .fx-web{ width:150px; }
  .fx-bat.b2,.fx-bat.b3{ display:none; }
}

/* ── Orbite : lune, planète, anneaux (page d'accueil et connexion de l'espace client) ── */
.orb{ position:relative; width:min(100%,620px); aspect-ratio:1; }
.orb > *{ position:absolute; }
.orb__glow{ inset:4%; border-radius:50%; background:radial-gradient(closest-side,rgba(255,170,90,.2),rgba(110,86,248,.14) 56%,transparent 74%); filter:blur(14px); }
:root[data-theme="day"] .orb__glow{ background:radial-gradient(closest-side,rgba(255,90,31,.16),rgba(110,86,248,.08) 56%,transparent 74%); }
.orb__rings{ inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.orb__rings--front{ z-index:4; }
.orb__rings ellipse,.orb__rings path{ fill:none; vector-effect:non-scaling-stroke; }
.ring-a{ stroke:var(--line-2); stroke-width:1; }
.ring-b{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 7; opacity:.9; }
.ring-c{ stroke:var(--line); stroke-width:1; }
.ring-front{ stroke:rgba(255,160,100,.55); stroke-width:1.4; }
:root[data-theme="day"] .ring-front{ stroke:rgba(255,90,31,.5); }

.moon{
  left:50%; top:50%; width:37%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; z-index:3;
  background:radial-gradient(circle at 34% 30%,#FFFBEB 0%,#F7EBCB 34%,#E6D6A8 70%,#C9B686 100%);
  box-shadow:0 0 70px 14px rgba(255,214,150,.26), 0 0 170px 46px rgba(255,160,90,.13), inset -22px -18px 44px rgba(120,95,50,.36);
  animation:moonBreath 8s ease-in-out infinite;
}
.moon::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 42%, rgba(120,98,58,.30) 0 9%, transparent 9.6%),
    radial-gradient(circle at 62% 28%, rgba(120,98,58,.22) 0 6.5%, transparent 7.1%),
    radial-gradient(circle at 68% 64%, rgba(120,98,58,.28) 0 11%, transparent 11.7%),
    radial-gradient(circle at 40% 76%, rgba(120,98,58,.20) 0 5.5%, transparent 6.1%),
    radial-gradient(circle at 20% 66%, rgba(120,98,58,.16) 0 3.5%, transparent 4%);
}
@keyframes moonBreath{ 0%,100%{ box-shadow:0 0 70px 14px rgba(255,214,150,.26), 0 0 170px 46px rgba(255,160,90,.13), inset -22px -18px 44px rgba(120,95,50,.36); } 50%{ box-shadow:0 0 90px 22px rgba(255,214,150,.34), 0 0 200px 60px rgba(255,160,90,.18), inset -22px -18px 44px rgba(120,95,50,.36); } }
.planet{
  left:50%; top:50%; width:35%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; z-index:3;
  background:radial-gradient(circle at 32% 28%,#FFB48A 0%,#FF7A3E 36%,#FF5A1F 62%,#C93A0B 100%);
  box-shadow:inset -28px -24px 54px rgba(110,28,0,.5), 0 36px 80px -24px rgba(255,90,31,.65);
}
.planet::after{ content:""; position:absolute; inset:0; border-radius:50%; background:repeating-linear-gradient(-14deg,transparent 0 16px,rgba(255,255,255,.05) 16px 18px); mix-blend-mode:overlay; }

.orb__mark{ left:0; top:0; width:7.4%; z-index:5; margin:-3.7% 0 0 -3.7%; will-change:transform; cursor:pointer; }
.orb__mark svg{ width:100%; height:auto; }
.orb__dot{ left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--ignition); box-shadow:0 0 0 6px rgba(255,90,31,.18), 0 0 24px 4px rgba(255,90,31,.55); z-index:5; will-change:transform; }