@charset "utf-8";
/* ============================================================
   PROJECT — Styles saisonniers (Halloween, Noël, Nouvel An, Pâques…)
   ============================================================
   Ce fichier s'active automatiquement selon la date du jour.
   Il est chargé sur les pages qui affichent une animation.
   ============================================================ */

/* ============================================================
   CONTENEUR GÉNÉRIQUE DE L'ANIMATION
   ============================================================ */

.seasonal-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 1rem 0 2rem;
  padding: 1.5rem 1.2rem;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font);
  color: #fff;
  isolation: isolate;
}

.seasonal-banner__content {
  position: relative;
  z-index: 2;
}

.seasonal-banner__title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.seasonal-banner__subtitle {
  font-size: 0.95rem;
  font-style: italic;
  margin: 0;
  opacity: 0.9;
}

/* Particules génériques (utilisées par plusieurs saisons) */
.seasonal-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.seasonal-particles span {
  position: absolute;
  top: -10%;
  display: block;
  line-height: 1;
  animation-name: season-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes season-fall {
  0%   { transform: translateY(-20vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* ============================================================
   🎃 HALLOWEEN (1er au 31 octobre)
   ============================================================ */

.seasonal-banner--halloween {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.35), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(230, 57, 70, 0.35), transparent 50%),
    linear-gradient(135deg, #1a0a00 0%, #2a1005 50%, #1a0a00 100%);
  border: 1px solid rgba(255, 140, 0, 0.4);
  box-shadow: 0 0 32px rgba(255, 140, 0, 0.25);
}

.seasonal-banner--halloween .seasonal-banner__title {
  color: #ff8c00;
  text-shadow:
    0 0 12px rgba(255, 140, 0, 0.9),
    0 0 24px rgba(230, 57, 70, 0.6);
  animation: halloween-flicker 3s ease-in-out infinite;
}

@keyframes halloween-flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.7; }
  50%      { opacity: 1; }
  55%      { opacity: 0.6; }
  60%      { opacity: 1; }
}

.seasonal-banner--halloween .seasonal-particles span {
  font-size: 1.6rem;
  animation-duration: 8s;
}

/* ============================================================
   🎄 NOËL (1er au 25 décembre)
   ============================================================ */

.seasonal-banner--noel {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
    linear-gradient(180deg, #0a1a12 0%, #0d2818 50%, #0a1a12 100%);
  border: 1px solid rgba(230, 57, 70, 0.4);
  box-shadow: 0 0 32px rgba(230, 57, 70, 0.2);
}

.seasonal-banner--noel .seasonal-banner__title {
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.7),
    0 0 24px rgba(230, 57, 70, 0.8);
  animation: noel-glow 2.5s ease-in-out infinite;
}

@keyframes noel-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 24px rgba(230,57,70,0.8); }
  50%      { text-shadow: 0 0 18px rgba(255,255,255,1),   0 0 40px rgba(230,57,70,1); }
}

.seasonal-banner--noel .seasonal-particles span {
  font-size: 1.4rem;
  color: #fff;
  animation-duration: 10s;
  opacity: 0.85;
}

/* ============================================================
   🎉 NOUVEL AN (26 décembre au 15 janvier)
   ============================================================ */

.seasonal-banner--newyear {
  background:
    radial-gradient(circle at 30% 40%, rgba(230, 57, 70, 0.35), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 200, 0, 0.35), transparent 50%),
    linear-gradient(135deg, #1a0a1a 0%, #2a102a 50%, #1a0a1a 100%);
  border: 1px solid rgba(255, 200, 0, 0.4);
  box-shadow: 0 0 32px rgba(255, 200, 0, 0.3);
}

.seasonal-banner--newyear .seasonal-banner__title {
  background: linear-gradient(90deg, #ffd700, #e63946, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.8rem;
  animation: newyear-shine 3s linear infinite;
  background-size: 200% 100%;
}

@keyframes newyear-shine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.seasonal-banner--newyear .seasonal-particles span {
  font-size: 1.2rem;
  animation-duration: 6s;
}

/* ============================================================
   🐰 PÂQUES (mobiles — calculé par JS, typiquement fin mars / avril)
   ============================================================ */

.seasonal-banner--paques {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(135deg, #0d2818 0%, #1a3a28 50%, #0d2818 100%);
  border: 1px solid rgba(180, 220, 180, 0.4);
  box-shadow: 0 0 32px rgba(180, 220, 180, 0.25);
}

.seasonal-banner--paques .seasonal-banner__title {
  color: #a8e6a8;
  text-shadow:
    0 0 10px rgba(168, 230, 168, 0.7),
    0 0 24px rgba(255, 220, 100, 0.5);
}

.seasonal-banner--paques .seasonal-particles span {
  font-size: 1.5rem;
  animation-duration: 9s;
}

/* ============================================================
   💘 SAINT-VALENTIN (1er au 14 février)
   ============================================================ */

.seasonal-banner--valentin {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 100, 150, 0.25), transparent 60%),
    linear-gradient(135deg, #2a0a1a 0%, #3a0a1a 50%, #2a0a1a 100%);
  border: 1px solid rgba(255, 100, 150, 0.4);
  box-shadow: 0 0 32px rgba(255, 100, 150, 0.3);
}

.seasonal-banner--valentin .seasonal-banner__title {
  color: #ff6b9d;
  text-shadow:
    0 0 12px rgba(255, 107, 157, 0.8),
    0 0 24px rgba(255, 107, 157, 0.5);
  animation: valentin-beat 1.2s ease-in-out infinite;
}

@keyframes valentin-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.seasonal-banner--valentin .seasonal-particles span {
  font-size: 1.3rem;
  animation-duration: 7s;
}

/* ============================================================
   🎆 FEU D'ARTIFICE (14 juillet — Bastille Day)
   ============================================================ */

.seasonal-banner--bastille {
  background:
    radial-gradient(circle at 50% 50%, rgba(47, 123, 255, 0.25), transparent 60%),
    linear-gradient(135deg, #0a0f1a 0%, #101828 50%, #0a0f1a 100%);
  border: 1px solid rgba(47, 123, 255, 0.4);
  box-shadow: 0 0 32px rgba(47, 123, 255, 0.3);
}

.seasonal-banner--bastille .seasonal-banner__title {
  color: #fff;
  text-shadow:
    0 0 12px rgba(230, 57, 70, 0.8),
    0 0 24px rgba(255, 255, 255, 0.5),
    0 0 36px rgba(47, 123, 255, 0.7);
}

.seasonal-banner--bastille .seasonal-particles span {
  font-size: 1.4rem;
  animation-duration: 5s;
}

/* ============================================================
   RESPECT DE prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .seasonal-banner *,
  .seasonal-particles span {
    animation: none !important;
  }
}