/* ========== OVERLAY NOËL AMÉLIORÉ - Esthétique naturelle ========== */
:root{
  --noel-z: 9999;
  --noel-safe-top: 14px;
  --noel-safe-side: 10px;
  --navbar-height: 90px;
  --footer-safe-zone: 100px; /* Zone de sécurité pour le footer */
}

/* Canvas flocons - Couvre tout l'écran (header, contenu, footer) */
#noel-snow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: var(--noel-z);
  opacity: 0.9;
}

/* Badge Joyeux Noël - Style naturel discret */
.noel-banner{
  position: fixed;
  top: calc(var(--navbar-height) + 15px);
  right: 20px;
  z-index: calc(var(--noel-z) + 1);
  pointer-events: none;

  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: clamp(18px, 2vw, 22px);

  padding: 10px 18px;
  border-radius: 25px;

  /* Style naturel avec dégradé subtil */
  background: linear-gradient(135deg, 
    rgba(15, 82, 45, 0.92), 
    rgba(20, 102, 56, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #f0f9f4;
  text-shadow: 
    0 1px 3px rgba(0,0,0,0.3),
    0 0 15px rgba(255,255,255,0.2);
  box-shadow: 
    0 4px 20px rgba(15, 82, 45, 0.3),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  
  /* Rotation de 20 degrés dans le sens horaire */
  transform: rotate(20deg);
  
  /* Animation subtile de brillance */
  animation: noelBannerGlow 3s ease-in-out infinite;
}

/* Animation de brillance douce */
@keyframes noelBannerGlow {
  0%, 100% { 
    box-shadow: 
      0 4px 20px rgba(15, 82, 45, 0.3),
      0 2px 8px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }
  50% { 
    box-shadow: 
      0 6px 30px rgba(15, 82, 45, 0.4),
      0 3px 12px rgba(0,0,0,0.25),
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 0 20px rgba(255, 215, 150, 0.3);
  }
}

/* Décorations latérales - Positionnées dans les coins bas gauche et droite avec effet de neige */
.noel-side {
  position: fixed;
  bottom: 0;
  z-index: calc(var(--noel-z) + 1);
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  font-size: clamp(48px, 6vw, 80px); /* Beaucoup plus gros */
  line-height: 1.2;
  user-select: none;
  
  padding: 20px 25px 80px 25px; /* Padding en bas pour laisser place à la neige */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.noel-side::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  width: 100%;
  background: 
    radial-gradient(ellipse at 20% 100%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 15%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 15%, transparent 40%),
    linear-gradient(to top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 30%, transparent 70%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: -1;
  animation: snowAccumulate 8s ease-in-out infinite;
}

/* Animation d'accumulation de neige */
@keyframes snowAccumulate {
  0%, 100% { 
    height: 60px;
    opacity: 0.8;
  }
  50% { 
    height: 75px;
    opacity: 1;
  }
}

.noel-side.left  { 
  left: 0;
  border-radius: 0 30px 0 0;
}

.noel-side.right { 
  right: 0;
  border-radius: 30px 0 0 0;
}

/* Animation douce de balancement */
@keyframes noelFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0); 
    opacity: 0.9;
  }
  50% { 
    transform: translateY(-3px) translateX(0); 
    opacity: 1;
  }
}
.noel-side { animation: noelFloat 4s ease-in-out infinite; }

/* Branche de sapin en haut à gauche (optionnel) - Sous le header */
.noel-branch-top {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  width: 180px;
  height: 160px;
  z-index: calc(var(--noel-z) + 1);
  pointer-events: none;
  opacity: 0.6;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M10,30 Q50,20 80,40 L75,45 Q55,35 40,38 Q60,45 85,55 L80,60 Q65,52 50,53 Q70,62 90,75 L85,82 Q68,72 55,73" fill="%23165432" opacity="0.8"/><circle cx="65" cy="45" r="4" fill="%23c41e3a"/><circle cx="55" cy="62" r="3.5" fill="%23ffd700"/><circle cx="72" cy="58" r="3" fill="%23c41e3a"/></svg>') no-repeat center;
  background-size: contain;
  animation: branchSway 6s ease-in-out infinite;
}

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

/* Effet de givre sur les bords (subtil) - Couvre tout l'écran */
.noel-frost {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--noel-z) - 1);
  background: 
    radial-gradient(ellipse at top left, rgba(200, 230, 255, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at top right, rgba(200, 230, 255, 0.08) 0%, transparent 40%);
  opacity: 0.6;
}

/* Lumières scintillantes subtiles - Sous le header */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

.noel-lights {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: calc(var(--noel-z) + 2);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 40px;
}

.noel-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 215, 150, 0.8);
  box-shadow: 0 0 8px rgba(255, 215, 150, 0.6);
  animation: twinkle 2s ease-in-out infinite;
}

.noel-light:nth-child(2n) {
  background: rgba(255, 100, 100, 0.7);
  box-shadow: 0 0 8px rgba(255, 100, 100, 0.5);
  animation-delay: 0.5s;
}

.noel-light:nth-child(3n) {
  background: rgba(100, 200, 255, 0.7);
  box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
  animation-delay: 1s;
}

/* Responsive : ajustement pour mobile */
@media (max-width: 768px) {
  :root {
    --footer-safe-zone: 80px;
  }
  
  .noel-banner {
    right: 10px;
    top: calc(var(--navbar-height) + 10px);
    font-size: clamp(14px, 3vw, 18px);
    padding: 8px 14px;
    border-radius: 20px;
    transform: rotate(20deg); /* Rotation de 20 degrés également sur mobile */
  }
  
  .noel-side {
    font-size: clamp(32px, 8vw, 56px); /* Plus gros même sur mobile */
    line-height: 1.3;
    padding: 15px 20px 60px 20px;
  }
  
  .noel-side::before {
    height: 45px;
  }
  
  @keyframes snowAccumulate {
    0%, 100% { height: 45px; }
    50% { height: 55px; }
  }
  
  .noel-side.left { left: 0; }
  .noel-side.right { right: 0; }
  
  .noel-branch-top {
    width: 120px;
    height: 110px;
  }
  
  .noel-lights {
    padding: 0 20px;
  }
  
  .noel-light {
    width: 4px;
    height: 4px;
  }
}

/* Tablettes */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --footer-safe-zone: 90px;
  }
  
  .noel-side {
    font-size: clamp(20px, 2.8vw, 28px);
  }
}

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce){
  #noel-snow { display: none; }
  .noel-side { animation: none; opacity: 0.75; }
  .noel-banner { animation: none; }
  .noel-branch-top { animation: none; }
  .noel-light { animation: none; opacity: 0.5; }
  .noel-frost { display: none; }
}

/* Mode sombre automatique */
@media (prefers-color-scheme: dark) {
  .noel-banner {
    background: linear-gradient(135deg, 
      rgba(15, 82, 45, 0.95), 
      rgba(20, 102, 56, 0.92));
    box-shadow: 
      0 4px 20px rgba(15, 82, 45, 0.4),
      0 2px 8px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.2);
  }
  
  .noel-frost {
    background: 
      radial-gradient(ellipse at top left, rgba(150, 200, 230, 0.06) 0%, transparent 40%),
      radial-gradient(ellipse at top right, rgba(150, 200, 230, 0.06) 0%, transparent 40%);
  }
}

/* ========== OVERLAY NOËL 2.0 - Éléments décoratifs ========== */
/* Conteneur principal overlay */
#christmas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--noel-z);
  overflow: hidden;
}

/* Classe pour masquer un élément */
.hidden {
  display: none !important;
}

/* Neige qui tombe - Points ronds simples */
.snowflake {
  position: absolute;
  top: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
  animation: fall linear infinite;
  pointer-events: none;
}

@keyframes fall {
  to { transform: translateY(100vh); }
}

/* Père Noël */
.santa {
  position: absolute;
  top: 15%;
  left: 10%;
  font-size: 5em;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

/* Bonhomme de neige */
.snowman {
  position: absolute;
  top: 25%; /* Déplacé plus bas pour éviter le bandeau "Joyeux Noël" */
  right: 8%; /* Légèrement plus à gauche */
  font-size: 5em;
  animation: float 3s ease-in-out infinite 0.5s;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

/* Étoile */
.star-deco {
  position: absolute;
  top: 35%;
  left: 15%;
  font-size: 4em;
  animation: rotate-star 4s linear infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

/* Cloche */
.bell {
  position: absolute;
  top: 35%;
  right: 15%;
  font-size: 4em;
  animation: swing 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

/* Sapin */
.tree {
  position: absolute;
  bottom: 20%;
  left: 5%;
  font-size: 6em;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.4));
}

/* Renne */
.reindeer {
  position: absolute;
  top: 10%;
  right: 25%;
  font-size: 4em;
  animation: jump 2s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(139, 69, 19, 0.6));
}

/* Cadeau volant */
.flying-gift {
  position: absolute;
  top: 40%;
  right: 8%;
  font-size: 3em;
  animation: fly 5s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5));
}

/* Bonbon */
.candy {
  position: absolute;
  top: 45%;
  left: 8%;
  font-size: 3.5em;
  animation: rotate-slow 6s linear infinite;
  filter: drop-shadow(0 0 15px rgba(255, 192, 203, 0.6));
}

/* Flocon géant */
.giant-snowflake {
  position: absolute;
  top: 50%;
  right: 20%;
  font-size: 5em;
  animation: spin-slow 10s linear infinite;
  filter: drop-shadow(0 0 25px rgba(135, 206, 250, 0.8));
  opacity: 0.7;
}

/* Chaussette */
.stocking {
  position: absolute;
  bottom: 25%;
  right: 12%;
  font-size: 4em;
  animation: swing 2s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5));
}

/* Houx */
.holly {
  position: absolute;
  top: 8%;
  left: 30%;
  font-size: 3em;
  animation: float 3s ease-in-out infinite 1s;
  filter: drop-shadow(0 0 15px rgba(0, 128, 0, 0.6));
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

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

@keyframes fly {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-30px, -30px); }
}

@keyframes rotate-star {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

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

/* Cadeaux en bas */
.gift-1 {
  position: absolute;
  bottom: 5%;
  left: 5%;
  font-size: 4em;
  animation: wiggle 2s ease-in-out infinite;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.gift-2 {
  position: absolute;
  bottom: 3%;
  left: 20%;
  font-size: 3.5em;
  animation: wiggle 2s ease-in-out infinite 0.3s;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.gift-3 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4.5em;
  animation: wiggle 2s ease-in-out infinite 0.6s;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.gift-4 {
  position: absolute;
  bottom: 3%;
  right: 20%;
  font-size: 3.5em;
  animation: wiggle 2s ease-in-out infinite 0.9s;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.gift-5 {
  position: absolute;
  bottom: 5%;
  right: 5%;
  font-size: 4em;
  animation: wiggle 2s ease-in-out infinite 1.2s;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

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

/* Guirlande lumineuse haut */
.lights {
  position: absolute;
  top: 2%;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.light {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

.light:nth-child(odd) {
  background: #ff4444;
  box-shadow: 0 0 20px #ff4444;
}

.light:nth-child(even) {
  background: #ffd700;
  box-shadow: 0 0 20px #ffd700;
  animation-delay: 0.75s;
}

@keyframes blink {
  0%, 49%, 100% { opacity: 1; }
  50%, 99% { opacity: 0.3; }
}

/* Responsive pour les nouveaux éléments */
@media (max-width: 768px) {
  /* Réduction des tailles */
  .santa, .snowman, .tree { font-size: 3em; }
  .star-deco, .bell, .stocking { font-size: 2.5em; }
  .gift-1, .gift-3, .gift-5 { font-size: 2.5em; }
  .gift-2, .gift-4 { font-size: 2em; }
  .reindeer, .candy { font-size: 2.5em; }
  .flying-gift { font-size: 2em; }
  .giant-snowflake { font-size: 3em; }
  .holly { font-size: 2em; }
  
  /* Ajustement des positions pour mobile */
  .santa {
    top: 20%;
    left: 5%;
  }
  
  .snowman {
    top: 30%; /* Plus bas sur mobile pour éviter le bandeau */
    right: 3%; /* Plus à gauche sur mobile */
  }
  
  .star-deco {
    top: 40%;
    left: 5%;
  }
  
  .bell {
    top: 40%;
    right: 5%;
  }
  
  .tree {
    bottom: 25%;
    left: 2%;
  }
  
  .reindeer {
    top: 15%;
    right: 15%;
  }
  
  .flying-gift {
    top: 45%;
    right: 3%;
  }
  
  .candy {
    top: 50%;
    left: 3%;
  }
  
  .giant-snowflake {
    top: 55%;
    right: 10%;
  }
  
  .stocking {
    bottom: 30%;
    right: 5%;
  }
  
  .holly {
    top: 12%;
    left: 20%;
  }
  
  /* Cadeaux en bas - ajustement */
  .gift-1 {
    bottom: 8%;
    left: 2%;
  }
  
  .gift-2 {
    bottom: 5%;
    left: 15%;
  }
  
  .gift-3 {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .gift-4 {
    bottom: 5%;
    right: 15%;
  }
  
  .gift-5 {
    bottom: 8%;
    right: 2%;
  }
  
  /* Guirlande lumineuse - ajustement */
  .lights {
    top: 1%;
    height: 30px;
  }
  
  .light {
    width: 10px;
    height: 10px;
  }
}