/* Décor de Noël 2026 — chargé par noel.php, activé par js/noel.js (classe .theme-noel sur <html>).
   Retour arrière : voir noel.php. Rien ici ne s'applique sans la classe .theme-noel. */

.theme-noel {
  --noel-rouge: #8b2635;
  --noel-rouge-fonce: #6e1d29;
  --noel-vert: #234a35;
  --noel-or: #c9a45c;
  --noel-or-clair: #f0d9a8;
  --noel-creme: #fdf9f6;
}

/* ---------- Neige ---------- */
.theme-noel .noel-neige {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Un seul transform animé (chute + oscillation) : calculé par la carte graphique, sans recalcul de la
   mise en page à chaque image (l'ancienne version animait « top », ce qui faisait ramer).
   --h = hauteur de la couche en px, posée par js/noel.js. */
.theme-noel .noel-neige span {
  position: absolute;
  top: -8px;
  border-radius: 50%;
  background: #fff;
  will-change: transform;
  animation: noel-chute linear infinite;
}

.theme-noel .noel-neige-doree span {
  background: #dcc7a0;
}

.theme-noel .noel-neige-accueil {
  z-index: 1;
}

/* Neige en pause quand la couche est hors de l'écran (js/noel.js), et neige de la vidéo en pause
   tant que la fenêtre d'offre est ouverte : cachée derrière le fond flouté, elle obligeait le flou
   à se recalculer à chaque image */
.theme-noel .noel-neige.noel-pause span,
.theme-noel body.offre-modal-ouverte .noel-neige-accueil span {
  animation-play-state: paused;
}

@keyframes noel-chute {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(10px, calc(var(--h, 600px) * 0.25), 0); }
  50% { transform: translate3d(-8px, calc(var(--h, 600px) * 0.5), 0); }
  75% { transform: translate3d(9px, calc(var(--h, 600px) * 0.75), 0); }
  100% { transform: translate3d(0, var(--h, 600px), 0); }
}

/* ---------- En-tête de la fenêtre d'offre : boules suspendues, titre, houx ---------- */
.theme-noel .noel-entete {
  position: relative;
  margin: -40px -50px 10px;
  padding: 92px 20px 0;
  text-align: center;
  border-top: 6px solid var(--noel-vert);
  box-shadow: inset 0 1px 0 var(--noel-or);
  background: linear-gradient(180deg, rgba(35, 74, 53, 0.07) 0%, rgba(253, 249, 246, 0) 100%);
}

.theme-noel .offre-printemps-mobile .noel-entete {
  margin: -30px -20px 10px;
  padding-top: 84px;
}

.theme-noel .noel-boule {
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--noel-or);
  transform-origin: top center;
  animation: noel-balance 4.5s ease-in-out infinite;
}

/* la boule */
.theme-noel .noel-boule::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 30%), var(--couleur-boule);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

/* l'attache dorée */
.theme-noel .noel-boule::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -3px;
  width: 7px;
  height: 4px;
  border-radius: 1px;
  background: var(--noel-or);
  z-index: 1;
}

.theme-noel .noel-boule-rouge { --couleur-boule: radial-gradient(circle at 40% 35%, #b3384a, #6e1d29); }
.theme-noel .noel-boule-or { --couleur-boule: radial-gradient(circle at 40% 35%, #e6c886, #a9823b); }
.theme-noel .noel-boule-vert { --couleur-boule: radial-gradient(circle at 40% 35%, #3f7a59, #1b3a29); }

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

.theme-noel .noel-titre {
  margin: 0;
  font-family: 'Cormorant', 'Cormorant Garamond', serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  color: var(--noel-rouge);
  letter-spacing: 0.5px;
}

/* brin de houx sous le titre */
.theme-noel .noel-houx {
  display: block;
  width: 64px;
  height: 26px;
  margin: 6px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 26'%3E%3Cpath d='M31 14 C24 4 14 2 4 5 C8 8 7 11 11 12 C9 15 12 17 15 16 C16 19 20 20 22 18 C25 20 28 18 31 14Z' fill='%23234a35'/%3E%3Cpath d='M33 14 C40 4 50 2 60 5 C56 8 57 11 53 12 C55 15 52 17 49 16 C48 19 44 20 42 18 C39 20 36 18 33 14Z' fill='%232f6145'/%3E%3Ccircle cx='28' cy='17' r='4' fill='%23a62b3c'/%3E%3Ccircle cx='36' cy='17' r='4' fill='%238b2635'/%3E%3Ccircle cx='32' cy='21' r='4' fill='%23b3384a'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Fenêtre d'offre (accueil PC + boutique) ---------- */
.theme-noel .offre-printemps-modal .offre-modal-overlay {
  background: rgba(20, 28, 24, 0.55);
}

.theme-noel .offre-printemps-modal .offre-modal-content {
  border: 1px solid var(--noel-or);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 7px var(--noel-creme), inset 0 0 0 8px rgba(201, 164, 92, 0.55);
}

.theme-noel .offre-printemps-modal .floral-decoration {
  display: none;
}

.theme-noel .offre-printemps-modal .close-modal,
.theme-noel .offre-printemps-mobile .close-mobile {
  color: var(--noel-or);
  z-index: 3;
}

/* !important : les règles d'origine (style.scss) sont imbriquées plus profondément */
.theme-noel .offre-printemps-modal .recompense-box {
  border-left-color: var(--noel-rouge) !important;
}

.theme-noel .offre-printemps-modal .btn-profiter-modal,
.theme-noel .offre-printemps-mobile .btn-profiter {
  background: var(--noel-rouge) !important;
  box-shadow: 0 4px 15px rgba(139, 38, 53, 0.3) !important;
  border: 1px solid var(--noel-or) !important;
}

.theme-noel .offre-printemps-modal .btn-profiter-modal:hover,
.theme-noel .offre-printemps-mobile .btn-profiter:hover {
  background: var(--noel-rouge-fonce) !important;
  box-shadow: 0 6px 20px rgba(139, 38, 53, 0.4) !important;
}

/* ---------- Bannière mobile de l'accueil ---------- */
.theme-noel .offre-printemps-mobile {
  border: 1px solid var(--noel-or);
}

.theme-noel .offre-printemps-mobile .offre-mobile-content {
  z-index: 1;
}

.theme-noel .offre-printemps-mobile .recompense-texte {
  border-color: var(--noel-rouge);
  background: rgba(139, 38, 53, 0.04);
}

/* ---------- Bandeau de la boutique ---------- */
.theme-noel .bandeau-offre-shop .bandeau-offre-shop-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--noel-rouge-fonce) 0%, var(--noel-rouge) 50%, var(--noel-rouge-fonce) 100%);
  border: 1px solid var(--noel-or);
  box-shadow: 0 3px 14px rgba(110, 29, 41, 0.25), inset 0 0 0 3px rgba(240, 217, 168, 0.25);
}

.theme-noel .bandeau-offre-shop .bandeau-offre-shop-inner > :not(.noel-neige) {
  position: relative;
  z-index: 1;
}

.theme-noel .bandeau-offre-shop .bandeau-offre-texte {
  color: #fff;
}

.theme-noel .bandeau-offre-shop .bandeau-offre-texte strong {
  color: var(--noel-or-clair);
}

.theme-noel .bandeau-offre-shop .bandeau-offre-btn {
  background: var(--noel-creme);
  color: var(--noel-rouge);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-noel .bandeau-offre-shop .bandeau-offre-btn:hover {
  background: var(--noel-or-clair);
}

/* ---------- Accessibilité : pas d'animation si l'utilisateur l'a demandé ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-noel .noel-boule {
    animation: none;
  }
}