/* ============================================================
   halloween.css — thème « Halloween » premium (site + appli /app).
   Actif uniquement quand <html data-halloween="on"> (posé par halloween.js du 1er octobre au 2 novembre, pour tout le monde). Il se superpose au thème sombre : il redéfinit les mêmes variables de couleur
   (donc TOUTES les pages suivent) puis ajoute le décor et les animations.
   Chargé après style.css : à spécificité égale, ces règles l'emportent. Les animations respectent
   prefers-reduced-motion (voir la fin du fichier).
   ============================================================ */

/* ---------- 1. Palette : aubergine nuit, citrouille, vert spectral ---------- */
html:root[data-halloween="on"] {
  color-scheme: dark;
  --fond:           #0a0610;
  --surface:        #150c1e;
  --surface-claire: #211330;
  --bordure:        #3a2150;
  --texte:          #f6ecff;
  --texte-doux:     #b7a3cc;

  --violet:         #ff9a3c;   /* accent principal : orange citrouille (liens, boutons) */
  --violet-sombre:  #ff7a14;
  --violet-decor:   #c2410c;
  --rouge-decor:    #b91c1c;
  --alerte:         #ff8f8f;
  --bouton-texte:   #1a0a02;
  --violet-rgb:     255, 154, 60;
  --surface-rgb:    21, 12, 30;
  --fond-rgb:       10, 6, 16;

  --rang-or:        #ffd54f;
  --rang-argent:    #cfd8dc;
  --rang-bronze:    #e0a36b;

  /* Jetons propres au thème. */
  --hw-orange:   #ff9a3c;
  --hw-orange-2: #ff6a00;
  --hw-violet:   #9d4edd;
  --hw-vert:     #7CFC8A;
  --hw-brume:    rgba(157, 78, 221, .16);
  --hw-lueur:    0 0 18px rgba(255, 138, 40, .35), 0 0 42px rgba(255, 106, 0, .18);
}

/* ---------- 2. Décor de fond (fixe, derrière tout) ---------- */
html[data-halloween="on"] body {
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(255, 150, 50, .16), transparent 62%),
    radial-gradient(900px 700px at 8% 108%, rgba(157, 78, 221, .22), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(80, 20, 110, .12), transparent 70%),
    var(--fond);
  background-attachment: fixed;
}

/* Calques ajoutés par halloween.js */
.hw-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
html[data-halloween="on"] .hw-decor { display: block; }
#hw-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
html[data-halloween="on"] #hw-canvas { display: block; }

/* Les calques sont en z-index -1 : ils restent derrière tout le contenu sans toucher au positionnement des pages. */

/* Lune + halo */
.hw-lune {
  position: absolute; top: 5vh; right: 7vw; width: clamp(90px, 11vw, 170px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff6dc 0 18%, transparent 19%),
    radial-gradient(circle at 62% 58%, rgba(210, 170, 110, .55) 0 9%, transparent 10%),
    radial-gradient(circle at 44% 72%, rgba(210, 170, 110, .4) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 38%, #ffe9b8, #ffbf66 72%, #e8903a);
  box-shadow: 0 0 60px 14px rgba(255, 170, 70, .35), 0 0 160px 60px rgba(255, 120, 30, .16);
  opacity: .8; animation: hw-lune 9s ease-in-out infinite;
}
@keyframes hw-lune { 0%, 100% { transform: translateY(0); box-shadow: 0 0 60px 14px rgba(255,170,70,.35), 0 0 160px 60px rgba(255,120,30,.16); }
  50% { transform: translateY(-8px); box-shadow: 0 0 80px 20px rgba(255,170,70,.45), 0 0 190px 70px rgba(255,120,30,.22); } }

/* Brume qui dérive (deux nappes à vitesses différentes) */
.hw-brume { position: absolute; left: -30%; width: 160%; height: 42vh; bottom: -6vh; opacity: .9; filter: blur(36px);
  background:
    radial-gradient(40% 60% at 20% 60%, var(--hw-brume), transparent 70%),
    radial-gradient(35% 55% at 55% 50%, rgba(255, 140, 40, .09), transparent 70%),
    radial-gradient(40% 60% at 85% 60%, var(--hw-brume), transparent 70%);
  animation: hw-brume 38s linear infinite; }
.hw-brume.hw-brume-2 { bottom: auto; top: 30vh; height: 36vh; opacity: .55; animation-duration: 58s; animation-direction: reverse; }
@keyframes hw-brume { from { transform: translateX(-8%); } 50% { transform: translateX(8%); } to { transform: translateX(-8%); } }

/* Vignette + grain de pellicule */
.hw-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.hw-grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay; animation: hw-grain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes hw-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Toile d'araignée dans le coin haut-gauche */
.hw-toile { position: absolute; top: 0; left: 0; width: clamp(120px, 16vw, 230px); opacity: .22; color: #e9d5ff; }

/* ---------- 3. Bandeau (header) ---------- */
html[data-halloween="on"] .bandeau {
  /* Pas de backdrop-filter ici : il ferait du bandeau le repère des panneaux « fixed » qu'il contient (radio, notifications sur mobile). */
  background: linear-gradient(180deg, #170a22, #10061a);
  border-bottom: 1px solid transparent; position: relative; /* sans z-index : le bandeau ne doit PAS former de contexte d empilement (le tiroir mobile et les panneaux restent au-dessus, voir 08-recherche.css) */
}
html[data-halloween="on"] .bandeau::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hw-violet), var(--hw-orange), var(--hw-orange-2), var(--hw-violet), transparent);
  background-size: 200% 100%; animation: hw-filet 6s linear infinite; box-shadow: 0 0 14px rgba(255, 130, 30, .55);
}
@keyframes hw-filet { to { background-position: 200% 0; } }
html[data-halloween="on"] .marque { text-shadow: 0 0 18px rgba(255, 138, 40, .55); }
html[data-halloween="on"] .marque-icone { filter: hue-rotate(155deg) saturate(1.3) drop-shadow(0 0 8px rgba(255, 120, 20, .7)); animation: hw-vacille 5s infinite; }
html[data-halloween="on"] .bandeau-tab.actif { background: linear-gradient(135deg, #ff7a14, #c2410c); color: #1a0a02; box-shadow: 0 6px 20px rgba(255, 106, 0, .35); font-weight: 700; }
html[data-halloween="on"] .bandeau-tab:hover { background: rgba(255, 154, 60, .12); color: #ffd9b0; }


/* ---------- 3 bis. Bannière d'accueil : le duo bleu/rouge devient violet spectral / orange citrouille ---------- */
html[data-halloween="on"] .hero-accueil { --bleu: #9d4edd; --rouge: #ff7a14; }
html[data-halloween="on"] .hero-halo-bleu { background: radial-gradient(closest-side, rgba(157, 78, 221, .85), rgba(157, 78, 221, 0)); }
html[data-halloween="on"] .hero-halo-rouge { background: radial-gradient(closest-side, rgba(255, 122, 20, .8), rgba(255, 122, 20, 0)); }
html[data-halloween="on"] .hero-chevron::before { box-shadow: 0 0 14px 2px rgba(157, 78, 221, .7); }
html[data-halloween="on"] .hero-chevron::after { box-shadow: 0 0 14px 2px rgba(255, 122, 20, .7); }
html[data-halloween="on"] .hero-neon-bleu { box-shadow: 0 0 18px 4px rgba(157, 78, 221, .55), 0 0 60px 14px rgba(157, 78, 221, .22); }
html[data-halloween="on"] .hero-neon-rouge { box-shadow: 0 0 18px 4px rgba(255, 122, 20, .55), 0 0 60px 14px rgba(255, 122, 20, .22); }
html[data-halloween="on"] .hero-marque-logo { filter: hue-rotate(150deg) saturate(1.3) drop-shadow(0 0 22px rgba(255, 122, 20, .75)) drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }

html[data-halloween="on"] .hero-accueil-titre span { background:
    linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%) -150% 0 / 40% 100% no-repeat,
    linear-gradient(90deg, #c77dff, #fff1de 50%, #ff9a3c);
  -webkit-background-clip: text; background-clip: text; }

html[data-halloween="on"] .hero-bouton-principal { background: linear-gradient(135deg, #ffa94d, #ff6a00 55%, #9d4edd); color: #1a0a02; box-shadow: 0 8px 28px rgba(255, 106, 0, .4); }

/* Vacillement de flamme (logo, titres) */
@keyframes hw-vacille {
  0%, 100% { opacity: 1; } 8% { opacity: .82; } 10% { opacity: 1; } 42% { opacity: .9; } 44% { opacity: 1; } 71% { opacity: .78; } 73% { opacity: 1; }
}

/* ---------- 4. Titres, liens, sélection, barres ---------- */
html[data-halloween="on"] h1:not(.hero-accueil-titre) {
  background: linear-gradient(100deg, #fff1de 0%, #ffb15e 35%, #ff7a14 60%, #c77dff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: hw-titre 9s ease-in-out infinite; filter: drop-shadow(0 2px 18px rgba(255, 120, 20, .3));
}
@keyframes hw-titre { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
html[data-halloween="on"] ::selection { background: #ff7a14; color: #1a0a02; }
html[data-halloween="on"] a { transition: color .2s ease, text-shadow .2s ease; }
html[data-halloween="on"] a:hover { text-shadow: 0 0 14px rgba(255, 138, 40, .55); }
html[data-halloween="on"] :focus-visible:not(.auth-saisie *):not(.recherche-bandeau *) { outline: 2px solid var(--hw-orange); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 138, 40, .18); }
html[data-halloween="on"] { scrollbar-color: #5b2d82 #0a0610; }
html[data-halloween="on"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-halloween="on"] ::-webkit-scrollbar-track { background: #0a0610; }
html[data-halloween="on"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7b3fb0, #c2410c); border-radius: 8px; border: 2px solid #0a0610; }

/* ---------- 5. Boutons : orange braise, reflet qui balaie ---------- */
html[data-halloween="on"] .bouton,
html[data-halloween="on"] button.bouton,
html[data-halloween="on"] a.bouton,
html[data-halloween="on"] input[type="submit"] {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #ffa94d, #ff6a00 55%, #d9480f); color: #1a0a02; border: 0; font-weight: 700;
  box-shadow: 0 6px 22px rgba(255, 106, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .25s ease;
}
html[data-halloween="on"] .bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transition: transform .7s ease;
}
html[data-halloween="on"] .bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 106, 0, .5), 0 0 0 1px rgba(255, 200, 140, .4), inset 0 1px 0 rgba(255, 255, 255, .4); filter: saturate(1.1); text-decoration: none; }
html[data-halloween="on"] .bouton:hover::before { transform: translateX(120%) skewX(-18deg); }
html[data-halloween="on"] .bouton:active { transform: translateY(0) scale(.98); }
html[data-halloween="on"] .bouton-danger { background: linear-gradient(135deg, #dc2626, #7f1d1d); color: #fff; box-shadow: 0 6px 22px rgba(220, 38, 38, .3); }

/* ---------- 6. Cartes, blocs, champs : verre fumé + lueur au survol ---------- */
html[data-halloween="on"] :is(.carte, .carte-accroche, .bloc, .encart, .panneau, .sujet, .ligne-sujet, .categorie, .carte-jeu, .carte-live, .carte-membre,
  .ligne-conversation-app, .bloc-cle, .carte-serveur, .formulaire, .zone-formulaire, .boite) {
  background: linear-gradient(160deg, rgba(33, 19, 48, .82), rgba(18, 10, 28, .86));
  border: 1px solid rgba(157, 78, 221, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease;
}
html[data-halloween="on"] :is(.carte, .carte-accroche, .sujet, .ligne-sujet, .categorie, .carte-jeu, .carte-live, .carte-membre, .carte-serveur):hover {
  transform: translateY(-3px); border-color: rgba(255, 138, 40, .65);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 106, 0, .22), inset 0 1px 0 rgba(255, 200, 140, .12);
}
html[data-halloween="on"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.auth-saisie *):not(.recherche-bandeau *) {
  background: rgba(10, 5, 16, .72); border: 1px solid #3a2150; color: var(--texte); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
html[data-halloween="on"] :is(input, textarea, select):not(.auth-saisie *):not(.recherche-bandeau *):focus { border-color: var(--hw-orange); box-shadow: 0 0 0 3px rgba(255, 138, 40, .2), 0 0 22px rgba(255, 106, 0, .18); outline: none; }
html[data-halloween="on"] ::placeholder { color: #7c6a92; }
html[data-halloween="on"] hr { border-color: rgba(157, 78, 221, .3); }
html[data-halloween="on"] :is(.badge, .badge-non-lus, .bandeau-cloche-point) { box-shadow: 0 0 12px rgba(255, 106, 0, .55); }

/* Menus déroulants et panneaux du bandeau */
html[data-halloween="on"] :is(.bandeau-panneau, .nav-deroulant-panneau) {
  background: linear-gradient(165deg, rgba(30, 16, 44, .96), rgba(14, 7, 22, .97)); border: 1px solid rgba(255, 138, 40, .3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(157, 78, 221, .18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}

/* Entrée en scène des blocs de page */
html[data-halloween="on"] main > * { animation: hw-apparition .7s cubic-bezier(.2, .8, .2, 1) both; }
html[data-halloween="on"] main > *:nth-child(2) { animation-delay: .06s; } html[data-halloween="on"] main > *:nth-child(3) { animation-delay: .12s; }
html[data-halloween="on"] main > *:nth-child(4) { animation-delay: .18s; } html[data-halloween="on"] main > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes hw-apparition { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- 7. Araignée qui descend, traînée de braises du curseur ---------- */
.hw-araignee { position: fixed; top: 0; right: 15vw; z-index: 40; width: 44px; pointer-events: none; display: none; transform: translateY(-110%);
  transition: transform 2.6s cubic-bezier(.3, .1, .2, 1); }
html[data-halloween="on"] .hw-araignee { display: block; }
.hw-araignee.hw-descend { transform: translateY(var(--hw-chute, 110px)); }
.hw-araignee .hw-fil { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 100vh; background: linear-gradient(180deg, transparent, rgba(233, 213, 255, .55)); }
.hw-araignee svg { display: block; width: 100%; height: auto; animation: hw-balance 3.2s ease-in-out infinite; transform-origin: 50% -40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
@keyframes hw-balance { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.hw-curseur { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; z-index: 9999; display: none;
  background: radial-gradient(circle, #ffd9a0, #ff7a14 60%, transparent 72%); box-shadow: 0 0 14px 4px rgba(255, 120, 20, .6); will-change: transform; }
html[data-halloween="on"] .hw-curseur.hw-actif { display: block; }

/* Mobile : décor allégé pour préserver la fluidité et la batterie. */
@media (max-width: 700px) {
  .hw-lune { opacity: .55; } .hw-toile { opacity: .14; } .hw-grain { display: none; } .hw-araignee { display: none !important; }
}

/* ---------- 8. Accessibilité : moins d'animations si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
  .hw-lune, .hw-brume, .hw-grain, .hw-araignee svg,
  html[data-halloween="on"] .bandeau::after, html[data-halloween="on"] .marque-icone, html[data-halloween="on"] h1,
  html[data-halloween="on"] main > * { animation: none !important; }
  .hw-araignee, .hw-curseur { display: none !important; }
  html[data-halloween="on"] .bouton::before { display: none; }
}

/* ---------- 9. Pendant la saison, le thème est imposé : le bouton clair/sombre n'aurait aucun effet, il est masqué ---------- */
html[data-halloween="on"] .bouton-theme { display: none; }