/* =========================================================
Grimoire — Thème Halloween (global override, non destructif)
Active le thème en ajoutant la classe .halloween sur
Exemple:
========================================================= */
/* ---------- Palette & bases ---------- */
:root {
/* valeurs par défaut (non modifiées ici) */
}
:root.halloween,
body.halloween {
--bg:#0b0b0f;
--panel:#151018;
--panel-2:#0f0a12;
--text:#f5f3e7;
--muted:#c7a98a;
/* Accent Halloween */
--accent:#ff7518; /* orange citrouille */
--accent-2:#b56dff; /* violet spectral */
--copper:#b34700; /* cuivre sombre */
/* états */
--success:#38d48b;
--warning:#f59e0b;
--danger:#ef4444;
--shadow:0 20px 60px rgba(0,0,0,.55);
--shadow-sm:0 8px 24px rgba(0,0,0,.35);
}
/* Fond global avec halos orange/violet */
body.halloween{
background:
radial-gradient(1200px 600px at 15% -10%, rgba(255,117,24,.16), transparent 60%),
radial-gradient(900px 600px at 110% 10%, rgba(181,109,255,.12), transparent 60%),
radial-gradient(1000px 800px at 50% 120%, rgba(179,71,0,.08), transparent 60%),
linear-gradient(180deg,#0b0b0f 0%,#0b0b0f 100%) !important;
color:var(--text);
}
/* Scrollbar teintée */
body.halloween *::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(255,117,24,.75), rgba(181,109,255,.6)) !important;
border:2px solid rgba(11,11,15,.6) !important;
}
body.halloween *{
scrollbar-color: rgba(255,117,24,.45) rgba(255,255,255,.04);
}
/* ---------- Header / brand ---------- */
body.halloween .site-header,
body.halloween header{
background:linear-gradient(180deg, rgba(11,11,15,.92), rgba(11,11,15,.68)) !important;
border-bottom:1px solid rgba(255,117,24,.22) !important;
}
/* Logo/brand halo citrouille */
body.halloween .brand-logo,
body.halloween .logo{
box-shadow: 0 0 18px rgba(255,117,24,.35), 0 0 0 1px rgba(255,255,255,.08) inset !important;
background: conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--copper),var(--accent)) !important;
}
/* ---------- Panneaux & cartes ---------- */
body.halloween .panel{
background:linear-gradient(180deg,var(--panel),var(--panel-2)) !important;
border:1px solid rgba(255,255,255,.08) !important;
}
body.halloween .panel::before{
background: linear-gradient(140deg, rgba(255,117,24,.35), rgba(181,109,255,.24), rgba(179,71,0,.30)) !important;
}
body.halloween .card,
body.halloween .mini-card,
body.halloween .viewer__panel,
body.halloween .set{
outline-color: rgba(255,255,255,.10) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
body.halloween .card:hover,
body.halloween .mini-card:hover,
body.halloween .set:hover{
box-shadow: 0 18px 60px rgba(255,117,24,.18), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
/* Lueur sur vignettes de cartes */
body.halloween .thumb,
body.halloween .card,
body.halloween .po-card{
border-color: rgba(255,255,255,.10) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 24px rgba(255,117,24,.10) !important;
}
/* ---------- Boutons ---------- */
body.halloween .btn{
background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent), #000 12%)) !important;
color:#0b0b0f !important;
border:1px solid rgba(255,117,24,.35) !important;
}
body.halloween .btn.ghost{
background: transparent !important;
color: var(--text) !important;
border:1px solid rgba(255,255,255,.20) !important;
}
body.halloween .btn:hover{
box-shadow: 0 12px 28px rgba(255,117,24,.28) !important;
}
/* Pills / tags */
body.halloween .pill,
body.halloween .tag{
background: rgba(255,255,255,.06) !important;
border:1px solid rgba(255,255,255,.16) !important;
}
/* Raretés (teintes légèrement modifiées pour Halloween) */
body.halloween .tag.rarity-legendary{ color:#b56dff !important; }
body.halloween .tag.rarity-exotic{ color:#ffb347 !important; }
body.halloween .tag.rarity-incandescent{ color:#ff7518 !important; }
/* ---------- Hero / Auras ---------- */
body.halloween .aura{
mix-blend:screen; opacity:.55;
}
body.halloween .hero-header{
background: linear-gradient(180deg, rgba(11,11,15,.95), rgba(11,11,15,.70)) !important;
border-bottom: 1px solid rgba(255,117,24,.18) !important;
}
/* Toile d’araignée en overlay (SVG inline) */
body.halloween .hero-bg::after{
content:"";
position:absolute; inset:0; pointer-events:none;
background:
url("data:image/svg+xml;utf8,\
") center/cover no-repeat;
mix-blend-mode: screen;
opacity:.35;
}
/* Chauves-souris flottantes (décor subtil) */
body.halloween::before,
body.halloween::after{
content:"";
position:fixed; inset:auto; top:8vh; left:6vw; width:120px; height:70px;
background:
url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
pointer-events:none; z-index:5; animation: bats 10s ease-in-out infinite;
}
body.halloween::after{
top:18vh; left:auto; right:8vw; transform: scale(.8) rotateY(180deg);
animation-delay: 3s;
}
@keyframes bats{
0%,100%{ transform: translateY(-6px) }
50%{ transform: translateY(6px) }
}
/* ---------- Pack opening (overlay) ---------- */
body.halloween #pack-overlay .po-backdrop{
background:
radial-gradient(1200px 600px at 10% -10%, rgba(255,117,24,.20), transparent 60%),
radial-gradient(900px 500px at 110% 10%, rgba(181,109,255,.18), transparent 60%),
rgba(6,8,12,.86) !important;
}
body.halloween .po-pack-body{
background:
radial-gradient(120px 60px at 20% 20%, rgba(255,117,24,.32), transparent 60%),
radial-gradient(100px 50px at 80% 25%, rgba(181,109,255,.28), transparent 60%),
linear-gradient(180deg,#151018,#0f0a12) !important;
border:1px solid rgba(255,255,255,.10) !important;
}
body.halloween .po-slit{
background: linear-gradient(180deg,#fff,rgba(255,255,255,.2));
box-shadow: 0 0 24px rgba(255,255,255,.7), 0 0 80px rgba(255,117,24,.45) !important;
}
/* Veil des cartes à révéler */
body.halloween .po-card .veil{
background:
radial-gradient(120px 80px at 30% 20%, rgba(255,117,24,.16), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78)) !important;
}
/* ---------- Toast & viewer ---------- */
body.halloween .toast{
background: rgba(14,10,18,.92) !important;
border-color: rgba(255,117,24,.22) !important;
}
/* ---------- Focus / accessibilité ---------- */
body.halloween :is(.btn, a, button, .po-card, .set):focus-visible{
outline: 2px solid var(--accent) !important;
outline-offset: 3px !important;
border-radius: 12px !important;
}
/* ---------- Petites finitions ---------- */
body.halloween .badge{
background: var(--accent) !important;
color:#0b0b0f !important;
box-shadow: 0 4px 16px rgba(255,117,24,.25) !important;
}
/* Meta titres (ex: .subtitle) */
body.halloween .subtitle{ color: color-mix(in oklab, var(--muted), #fff 10%) !important; }
/* Segmented active (collection) */
body.halloween .segbtn.active{
background: linear-gradient(180deg, rgba(255,117,24,.20), rgba(181,109,255,.16)) !important;
border-color: rgba(255,117,24,.55) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* Back to top bouton */
body.halloween .backtotop{
background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important;
border-color: rgba(255,255,255,.20) !important;
}
body.halloween .backtotop::after{
background: linear-gradient(140deg, rgba(255,117,24,.35), rgba(181,109,255,.24), rgba(179,71,0,.28)) !important;
}
/* Viewer zoom outline */
body.halloween .viewer__close{
border-color: rgba(255,255,255,.16) !important;
}
/* ===== Améliorations lisibilité bouton "Ouvrir" (index > sets) ===== */
/* 1) Renforce le fond de l'overlay pour mieux détacher le texte et le CTA */
body.halloween .set .overlay{
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.88)) !important;
backdrop-filter: blur(4px);
border-color: rgba(255,255,255,.18);
}
/* 2) Version haute-contraste du bouton dans l’overlay */
body.halloween .set .overlay .btn{
background: linear-gradient(180deg, #ff8a2a, #d85f00) !important; /* orange plus soutenu */
color: #ffffff !important; /* texte blanc */
border: 1px solid rgba(0,0,0,.35) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.45); /* lisibilité */
box-shadow: 0 6px 16px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.06) inset !important;
padding: 10px 14px;
font-weight: 900;
letter-spacing: .2px;
}
/* 3) État hover/focus visibles */
body.halloween .set .overlay .btn:hover{
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(255,117,24,.35), 0 0 0 2px rgba(255,255,255,.06) inset !important;
}
body.halloween .set .overlay .btn:focus-visible{
outline: 2px solid #ffffff !important;
outline-offset: 2px;
border-radius: 10px;
}
/* 4) Si ton bouton dans l’overlay est en .btn.ghost, force un fond sombre lisible */
body.halloween .set .overlay .btn.ghost{
background: rgba(0,0,0,.55) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.28) !important;
}
/* 5) Boutons de l’overlay d’ouverture de pack (en bas au centre) */
body.halloween .po-actions .btn{
background: linear-gradient(180deg, #ff8a2a, #d85f00) !important;
color: #fff !important;
border: 1px solid rgba(0,0,0,.35) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
/* ===== Amélioration lisibilité boutons Standard & Premium ===== */
/* Style commun */
body.halloween #panel-sets .btn{
background: linear-gradient(180deg, #ff8a2a, #d85f00) !important; /* orange profond */
color: #fff !important; /* texte blanc */
border: 1px solid rgba(0,0,0,.35) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.45);
font-weight: 900;
letter-spacing: .25px;
padding: 12px 18px;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.05) inset !important;
}
/* Hover / focus */
body.halloween #panel-sets .btn:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(255,117,24,.35),
0 0 0 2px rgba(255,255,255,.08) inset !important;
}
body.halloween #panel-sets .btn:focus-visible{
outline: 2px solid #fff !important;
outline-offset: 3px;
}
/* Variation Premium (accent violet spectral) */
body.halloween #panel-sets .btn.premium{
background: linear-gradient(180deg, #b56dff, #7a35cc) !important;
box-shadow: 0 6px 16px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.05) inset,
0 0 14px rgba(181,109,255,.35) !important;
}
body.halloween #panel-sets .btn.premium:hover{
box-shadow: 0 12px 28px rgba(181,109,255,.35),
0 0 0 2px rgba(255,255,255,.08) inset !important;
}
/* ===== Amélioration lisibilité boutons Standard & Premium ===== */
/* Style commun */
body.halloween #panel-sets .btn{
background: linear-gradient(180deg, #ff8a2a, #d85f00) !important; /* orange profond */
color: #fff !important; /* texte blanc */
border: 1px solid rgba(0,0,0,.35) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.45);
font-weight: 900;
letter-spacing: .25px;
padding: 12px 18px;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.05) inset !important;
}
/* Hover / focus */
body.halloween #panel-sets .btn:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(255,117,24,.35),
0 0 0 2px rgba(255,255,255,.08) inset !important;
}
body.halloween #panel-sets .btn:focus-visible{
outline: 2px solid #fff !important;
outline-offset: 3px;
}
/* Variation Premium (accent violet spectral) */
body.halloween #panel-sets .btn.premium{
background: linear-gradient(180deg, #b56dff, #7a35cc) !important;
box-shadow: 0 6px 16px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.05) inset,
0 0 14px rgba(181,109,255,.35) !important;
}
body.halloween #panel-sets .btn.premium:hover{
box-shadow: 0 12px 28px rgba(181,109,255,.35),
0 0 0 2px rgba(255,255,255,.08) inset !important;
}
/* ===== Boutons du modal Choisir le pack ===== */
body.halloween #pack-chooser .btn{
background: linear-gradient(180deg, #ff8a2a, #d85f00) !important;
color: #fff !important;
border: 1px solid rgba(0,0,0,.35) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.45);
font-weight: 900; letter-spacing: .25px;
padding: 12px 18px; border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.06) inset !important;
}
body.halloween #pack-chooser .btn:hover{
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(255,117,24,.35),
0 0 0 2px rgba(255,255,255,.06) inset !important;
}
body.halloween #pack-chooser .btn:focus-visible{
outline: 2px solid #fff !important;
outline-offset: 2px; border-radius: 10px;
}
/* Variante “ghost” (ex: Premium indisponible) */
body.halloween #pack-chooser .btn.ghost{
background: rgba(0,0,0,.55) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.28) !important;
}
/* État disabled très lisible */
body.halloween #pack-chooser .btn:disabled{
opacity: .55; filter: grayscale(.15);
cursor: not-allowed;
}
/* Brouillard doux qui se déplace */
body.halloween::selection{ background: rgba(255,117,24,.35); color:#0b0b0f }
body.halloween .hero-bg::before{
content:""; position:absolute; inset:-10%; pointer-events:none;
background:
radial-gradient(60% 40% at 10% 10%, rgba(255,117,24,.06), transparent 60%),
radial-gradient(70% 50% at 80% 20%, rgba(181,109,255,.06), transparent 60%),
radial-gradient(80% 60% at 50% 90%, rgba(0,0,0,.22), transparent 70%);
filter: blur(14px);
animation: fogMove 24s ease-in-out infinite alternate;
}
@keyframes fogMove{
0%{ transform: translate3d(-3%, -2%, 0) scale(1.02) }
100%{ transform: translate3d(3%, 2%, 0) scale(1.04) }
}
/* Toiles sur les cartes verrouillées (collection) */
body.halloween .thumb.is-locked::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
url("data:image/svg+xml;utf8,\
") center/cover no-repeat;
opacity:.65;
mix-blend-mode: screen;
}
/* Titres + badges un peu plus 'Halloween' */
@supports (font-variation-settings: normal){
body.halloween .hero-title,
body.halloween .set .name{ letter-spacing:.6px }
}
/* Particules confetti (emoji) */
body.halloween .confetti{
position: fixed; z-index: 1200; user-select: none; pointer-events: none;
font-size: clamp(16px, 2.8vmin, 28px);
will-change: transform, opacity;
animation: fall 900ms ease-out forwards, spin 1200ms ease-in-out;
}
@keyframes fall{
from{ transform: translate3d(var(--x,0), -10vh, 0) rotate(0deg); opacity:0 }
to { transform: translate3d(var(--x,0), 60vh, 0) rotate(12deg); opacity:1 }
}
@keyframes spin{
50%{ transform: translate3d(var(--x,0), 30vh, 0) rotate(180deg) }
100%{ transform: translate3d(var(--x,0), 60vh, 0) rotate(360deg) }
}
.banner.halloween{
margin:12px auto;
max-width:1200px;
padding:10px 12px;
border-radius:12px;
background: linear-gradient(90deg, rgba(255,117,24,.15), rgba(181,109,255,.15));
border: 1px solid rgba(255,255,255,.20);
display:flex; align-items:center; gap:10px;
}
/* Hero : emoji 🎃 qui tourne */
body.halloween .hero-logo{
background: none !important; /* on enlève le dégradé du carré */
display: grid; place-items: center;
animation: rotateGlow 6s linear infinite; /* garde ta rotation */
}
body.halloween .hero-logo::after{
content: "🎃";
font-size: 42px; line-height: 1;
text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
/* Variante : emoji FIXE + halo qui tourne (plus chic) */
body.halloween .hero-logo.halo{
position: relative; background: none !important; animation: none !important;
}
body.halloween .hero-logo.halo::before{
content:""; position:absolute; inset:-10px; border-radius: 26px;
background: conic-gradient(from 0deg, rgba(255,117,24,.55), rgba(181,109,255,.45), rgba(255,117,24,.55));
filter: blur(6px);
animation: rotateGlow 6s linear infinite;
}
body.halloween .hero-logo.halo::after{
content: "🎃"; position: relative; z-index: 1;
font-size: 42px; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
/* --- Compat ET --- */
:root.halloween body,
body.halloween {
/* Fond global Halloween (override fort) */
background:
radial-gradient(1200px 600px at 15% -10%, rgba(255,117,24,.16), transparent 60%),
radial-gradient(900px 600px at 110% 10%, rgba(181,109,255,.12), transparent 60%),
radial-gradient(1000px 800px at 50% 120%, rgba(179,71,0,.08), transparent 60%),
linear-gradient(180deg,#0b0b0f 0%,#0b0b0f 100%) !important;
}
/* Aura et header */
:root.halloween .aura,
body.halloween .aura { mix-blend-mode: screen; opacity:.6; }
:root.halloween .site-header,
body.halloween .site-header {
background:linear-gradient(180deg, rgba(11,11,15,.92), rgba(11,11,15,.68)) !important;
border-bottom:1px solid rgba(255,117,24,.22) !important;
}
/* Hero : titre + fond */
:root.halloween .hero-header,
body.halloween .hero-header {
background: linear-gradient(180deg, rgba(11,11,15,.92), rgba(11,11,15,.68)) !important;
border-bottom: 1px solid rgba(255,117,24,.22) !important;
}
:root.halloween .hero-bg::after,
body.halloween .hero-bg::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(900px 400px at 20% 15%, rgba(255,117,24,.10), transparent 50%),
radial-gradient(900px 400px at 80% 10%, rgba(181,109,255,.08), transparent 55%),
repeating-linear-gradient(45deg, rgba(255,117,24,.04) 0 2px, transparent 2px 8px);
}
/* Hero : remplace le carré tournant par une citrouille (emoji) */
:root.halloween .hero-logo,
body.halloween .hero-logo{
background: none !important;
box-shadow: none !important;
position: relative;
width: 78px; height: 78px; border-radius: 999px;
animation: pumpkinFloat 3.2s ease-in-out infinite;
}
:root.halloween .hero-logo::after,
body.halloween .hero-logo::after{
content: "🎃";
position: absolute; inset: 0;
display: grid; place-items: center;
font-size: 64px; line-height: 1;
filter: drop-shadow(0 8px 24px rgba(255,117,24,.35));
}
@keyframes pumpkinFloat {
0%,100%{ transform: translateY(0) }
50%{ transform: translateY(-6px) }
}
/* Bouton ON visuellement “actif” quand le thème est chargé via */
:root.halloween #toggle-halloween,
body.halloween #toggle-halloween{
background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent), black 12%)) !important;
color: #160c00 !important;
box-shadow: 0 0 0 1px rgba(255,117,24,.35) inset, var(--shadow-sm) !important;
}