/* ==========================================================================
   STYLES FÉÉRIQUES DE NOËL — 5 THÈMES COMPLETS (ÉDITION 2026)
   ========================================================================== */

:root {
  --theme-bg: #0B1A17;
  --theme-text: #F3EDE2;
  --theme-primary: #0F766E;
  --theme-accent: #FDBA4D;
  --theme-font-body: 'Nunito', sans-serif;
  --theme-font-display: 'Alegreya SC', serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-font-body);
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ==========================================================================
   KEYFRAMES DES 5 THÈMES
   ========================================================================== */

@keyframes fall {
  from { transform: translateY(-20px); }
  to { transform: translateY(100vh); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

@keyframes glowA {
  0%, 100% {
    box-shadow: 0 0 0 3px #FDBA4D, 0 0 22px 4px rgba(253, 186, 77, 0.45);
  }
  50% {
    box-shadow: 0 0 0 3px #FDBA4D, 0 0 42px 12px rgba(253, 186, 77, 0.75);
  }
}

@keyframes smoke {
  0% { transform: translateY(0) scale(0.6); opacity: 0.55; }
  100% { transform: translateY(-46px) scale(1.5); opacity: 0; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-4deg); }
  20% { transform: rotate(4deg); }
  30% { transform: rotate(-3deg); }
  40% { transform: rotate(2deg); }
  50% { transform: rotate(0); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes drift {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(60px) scaleY(1.25); }
}

@keyframes pulseC {
  0%, 100% {
    box-shadow: 0 0 0 1px #67E8F9, 0 0 24px 2px rgba(34, 211, 238, 0.45), inset 0 0 24px rgba(34, 211, 238, 0.25);
  }
  50% {
    box-shadow: 0 0 0 1px #A5F3FC, 0 0 46px 10px rgba(34, 211, 238, 0.7), inset 0 0 34px rgba(34, 211, 238, 0.4);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes sheen {
  0% { transform: translateX(-160%) skewX(-20deg); }
  60%, 100% { transform: translateX(260%) skewX(-20deg); }
}

@keyframes swing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pulseGlowVillage {
  0%, 100% {
    box-shadow: 0 0 0 3px #FDBA4D, 0 0 22px 4px rgba(253, 186, 77, 0.45);
  }
  50% {
    box-shadow: 0 0 0 3px #FDBA4D, 0 0 38px 10px rgba(253, 186, 77, 0.75);
  }
}

@keyframes wiggleGift {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-3.5deg) translateY(-2px); }
  24% { transform: rotate(3.5deg) translateY(-2px); }
  36% { transform: rotate(-2deg); }
  48% { transform: rotate(2deg); }
  60% { transform: rotate(0deg); }
}

@keyframes auroraPulse {
  0%, 100% {
    box-shadow: 0 0 0 1.5px #67E8F9, 0 0 24px 2px rgba(34, 211, 238, 0.45), inset 0 0 20px rgba(34, 211, 238, 0.22);
  }
  50% {
    box-shadow: 0 0 0 2px #A5F3FC, 0 0 40px 8px rgba(52, 211, 153, 0.65), inset 0 0 30px rgba(34, 211, 238, 0.38);
  }
}

@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(241, 210, 122, 0.6), 0 0 22px rgba(201, 162, 39, 0.35);
  }
  50% {
    box-shadow: 0 0 0 2px #F6E29B, 0 0 36px rgba(229, 193, 88, 0.65);
  }
}

@keyframes cookiePulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 0 #5A2E14, 0 0 0 3px #FFF7EA, 0 14px 24px rgba(217, 56, 41, 0.35);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 11px 0 #5A2E14, 0 0 0 4px #FBBF24, 0 18px 30px rgba(217, 56, 41, 0.5);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   PARTICULES & ÉLÉMENTS DÉCORATIFS DES THÈMES
   ========================================================================== */

.flake {
  position: fixed;
  top: -12px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.75;
  pointer-events: none;
  animation: fall linear infinite;
}

.bulb {
  position: absolute;
  width: 10px;
  height: 15px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  animation: twinkle 2.6s ease-in-out infinite;
}

.puff {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #DDE6E4;
  animation: smoke 3.2s ease-out infinite;
}

.spark {
  position: absolute;
  pointer-events: none;
  animation: sparkle 1.8s ease-in-out infinite;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #E0F2FE;
  pointer-events: none;
  animation: twinkle 3s ease-in-out infinite;
}

.aur {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.42;
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}

.bauble {
  position: absolute;
  top: 0;
  transform-origin: 50% 0;
  pointer-events: none;
  animation: swing 5s ease-in-out infinite;
}

/* ==========================================================================
   LAYOUT DU CALENDRIER & GRILLE RESPONSIVE DES 24 PORTES
   ========================================================================== */

.theme-page-wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.theme-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.theme-header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 28px 48px 0;
}

.theme-header-pain {
  padding: 16px 48px 18px;
}

.theme-hero {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 32px 24px 40px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.theme-hero-side-left,
.theme-hero-side-right {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.theme-hero-content {
  position: relative;
  z-index: 2;
}

.theme-grid-section {
  position: relative;
  z-index: 5;
  padding: 0 48px 48px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   SCÉNOGRAPHIE LUDIQUE & GRILLE BENTO RESPONSIVE (12 / 8 / 6 / 2 COLONNES)
   ========================================================================== */

.advent-scenography-stage {
  position: relative;
  padding: 18px 0 12px;
}

.advent-stage-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Grille organisée, régulière et chronologique (4 col Desktop / 3 col Tablette / 2 col Mobile) */
.advent-doors-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 20px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.advent-door-item {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  grid-column: auto !important;
  transform: none;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.advent-door-active:hover,
.advent-door-today:hover {
  z-index: 15;
  transform: translateY(-5px);
  filter: brightness(1.03);
}

.advent-door-active:active,
.advent-door-today:active {
  transform: translateY(0px) scale(0.985);
}

.advent-door-expired {
  cursor: not-allowed;
}

.advent-door-expired:hover {
  transform: none;
  filter: none;
}

.advent-door-locked:hover {
  transform: translateY(-2px);
}

/* Hauteur harmonieuse et constante des cartes sur toute la grille */
.advent-door-card {
  width: 100%;
  height: 100%;
  min-height: 186px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1150px) {
  .theme-hero-side-left,
  .theme-hero-side-right {
    transform: scale(0.78);
    opacity: 0.85;
  }
  .theme-hero-side-left {
    left: 12px !important;
  }
  .theme-hero-side-right {
    right: 12px !important;
  }
}

/* Tablette (640px à 1023px) : Grille 3 colonnes régulières */
@media (max-width: 1023px) {
  .advent-doors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 16px;
  }
  .advent-door-card {
    min-height: 174px;
  }
  .theme-header,
  .theme-header-pain {
    padding-left: 24px;
    padding-right: 24px;
  }
  .theme-grid-section {
    padding-left: 24px;
    padding-right: 24px;
  }
  .theme-hero-side-left,
  .theme-hero-side-right {
    display: none !important;
  }
  .bauble-outer-mobile-hide {
    display: none !important;
  }
}

/* Mobile (< 640px) : Grille 2 colonnes régulières */
@media (max-width: 639px) {
  .advent-doors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
  .advent-door-card {
    min-height: 162px;
  }
  .theme-header,
  .theme-header-pain {
    flex-wrap: wrap;
    padding: 18px 16px 12px;
  }
  .theme-grid-section {
    padding: 0 16px 36px;
  }
  .theme-hero {
    padding: 22px 16px 28px;
  }
  .theme-hero-title {
    font-size: 38px !important;
  }
  .theme-hero-subtitle {
    font-size: 14px !important;
  }
  .flake:nth-child(even),
  .star:nth-child(even) {
    display: none;
  }
}

@media (max-width: 479px) {
  .theme-store-name {
    font-size: 16px !important;
  }
  .theme-countdown-badge {
    font-size: 11px !important;
    padding: 6px 11px !important;
  }
  .theme-sound-btn {
    font-size: 11px !important;
    padding: 6px 11px !important;
  }
}

button, a, select, [onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   ACCESSIBILITÉ : PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .flake {
    display: none !important;
  }
}

.animate-marquee {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}