/* =====================================================================
   🎃 LE THÈME HALLOWEEN
   Ce fichier n'est chargé que quand l'admin active le thème (Admin → 🎃 Thème).
   Il passe par-dessus les couleurs normales du site.
   ===================================================================== */

:root {
  --violet: #9b4dff;
  --rose: #ff8a1c;            /* l'orange citrouille remplace le rose */
  --bleu: #7cf29a;            /* un vert « potion de sorcière » */
  --bord: rgba(255, 138, 28, 0.35);
  --carte: rgba(26, 14, 30, 0.82);
}

/* un fond plus sombre, orangé en bas, comme une nuit d'Halloween */
body {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 120, 20, 0.35), transparent 60%),
    linear-gradient(90deg, rgba(14, 6, 18, 0.95) 0%, rgba(14, 6, 18, 0.75) 55%, rgba(14, 6, 18, 0.55) 100%),
    url("../images/fond.webp") center / cover fixed,
    #0d0610;
}

/* les textes en dégradé : orange → violet */
.accueil .violet, .logo .violet, .page > h1 .violet {
  background: linear-gradient(90deg, #ff8a1c, #ffb020, #9b4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accueil h1 { filter: drop-shadow(0 0 8px rgba(255, 138, 28, 0.55)); }
.bouton { background: linear-gradient(90deg, #ff8a1c, #9b4dff); box-shadow: 0 4px 16px rgba(255, 138, 28, 0.35); }
.carte:hover { border-color: #ff8a1c; }
.titre-section { border-left-color: #ff8a1c; }

/* le bandeau d'Halloween sur l'accueil */
.bandeau-halloween {
  margin: 0 5% 10px;
  padding: 14px 20px;
  border-radius: 14px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(90deg, rgba(255, 138, 28, 0.25), rgba(155, 77, 255, 0.25));
  border: 1px solid rgba(255, 138, 28, 0.6);
}

/* 🦇 les chauves-souris qui traversent l'écran de temps en temps */
.chauve-souris {
  position: fixed;
  z-index: 40;
  font-size: 28px;
  pointer-events: none;           /* on peut cliquer à travers */
  animation: vol-chauve 14s linear infinite;
}
.chauve-souris:nth-of-type(2) { top: 18%; animation-delay: -5s; animation-duration: 18s; font-size: 22px; }
.chauve-souris:nth-of-type(3) { top: 42%; animation-delay: -11s; animation-duration: 16s; font-size: 18px; }
@keyframes vol-chauve {
  0%   { left: -60px; transform: translateY(0) scaleX(1); }
  25%  { transform: translateY(-30px); }
  50%  { transform: translateY(20px); }
  75%  { transform: translateY(-15px); }
  100% { left: calc(100vw + 60px); transform: translateY(0); }
}

/* 🕷️ l'araignée qui descend au bout de son fil, en haut à droite */
.araignee {
  position: fixed;
  top: 0;
  right: 40px;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: araignee 6s ease-in-out infinite;
}
.araignee::before { content: ""; width: 1px; height: 80px; background: rgba(255, 255, 255, 0.4); }
.araignee span { font-size: 24px; }
@keyframes araignee { 50% { transform: translateY(40px); } }

/* 🎃 la citrouille cachée (le secret d'Halloween) */
.citrouille-cachee { background: none; border: none; padding: 0; font-size: 12px; opacity: 0.35; cursor: pointer; transition: transform .3s, opacity .3s; }
.citrouille-cachee:hover { opacity: 1; transform: scale(2) rotate(15deg); }

/* pour ceux que les animations gênent : on les arrête */
@media (prefers-reduced-motion: reduce) {
  .chauve-souris, .araignee { display: none; }
}

/* ===== 🌫️ La brume qui flotte en bas de l'écran ===== */
.brume {
  position: fixed; left: -10%; right: -10%; bottom: -40px; height: 180px; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse at 30% 100%, rgba(200, 180, 255, 0.18), transparent 60%),
              radial-gradient(ellipse at 75% 100%, rgba(255, 170, 90, 0.14), transparent 55%);
  filter: blur(8px);
  animation: brume 12s ease-in-out infinite alternate;
}
@keyframes brume { to { transform: translateX(6%); } }

/* ===== 🍂 Les feuilles qui tombent doucement ===== */
.feuille { position: fixed; top: -40px; z-index: 35; pointer-events: none; font-size: 22px; animation: feuille 13s linear infinite; }
.feuille:nth-of-type(1) { left: 12%; }
.feuille:nth-of-type(2) { left: 38%; animation-delay: -4s; animation-duration: 16s; }
.feuille:nth-of-type(3) { left: 63%; animation-delay: -8s; animation-duration: 11s; }
.feuille:nth-of-type(4) { left: 86%; animation-delay: -2s; animation-duration: 15s; }
@keyframes feuille {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translate(40px, 55vh) rotate(180deg); }
  100% { transform: translate(-20px, 110vh) rotate(360deg); opacity: 0; }
}

/* ===== 🎃 La souris devient une petite citrouille ===== */
body.halloween { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><text y='22' font-size='22'>🎃</text></svg>") 4 4, auto; }

/* ===== Les titres qui tremblotent comme une bougie ===== */
.page > h1, .titre-section { animation: bougie 3s ease-in-out infinite; }
@keyframes bougie { 50% { text-shadow: 0 0 12px rgba(255, 138, 28, 0.6); } }

/* ===== 👻 Le fantôme farceur (le secret d'Halloween à 50 points) ===== */
.fantome-farceur {
  position: fixed; z-index: 65; font-size: 46px; background: none; border: none; padding: 0; cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
  animation: fantome-vol 7s linear forwards, fantome-ondule 1s ease-in-out infinite alternate;
}
@keyframes fantome-vol { from { left: -70px; } to { left: calc(100vw + 70px); } }
@keyframes fantome-ondule { to { margin-top: 30px; } }

/* ===== La page « Spécial Halloween » ===== */
.titre-halloween { font-size: clamp(40px, 8vw, 72px); margin: 10px 0; }
.compte-halloween { font-size: 26px; font-weight: bold; color: #ffb020; font-variant-numeric: tabular-nums; }
.carte-halloween { border: 2px solid #ff8a1c; }

@media (prefers-reduced-motion: reduce) {
  .brume, .feuille { display: none; }
  .page > h1, .titre-section { animation: none; }
}

/* 🤫 l'araignée peut être chatouillée (le secret à 30 points) */
.araignee span { pointer-events: auto; cursor: default; display: inline-block; }
.araignee span.chatouillee { animation: chatouille .3s; }
@keyframes chatouille { 25% { transform: rotate(-25deg) scale(1.2); } 75% { transform: rotate(25deg) scale(1.2); } }

/* 🏠 l'accueil garde son village des lamas, en version nuit d'Halloween */
html body.fond-accueil, html[data-theme] body.fond-accueil {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 120, 20, 0.35), transparent 60%),
    linear-gradient(90deg, rgba(14, 6, 18, 0.88) 0%, rgba(14, 6, 18, 0.4) 55%, rgba(14, 6, 18, 0.1) 100%),
    url("../images/fond-accueil.webp") center / cover fixed,
    #0d0610;
}