/* Thème Noël : actif seulement quand <html> porte la classe noel-on (voir seasonal-noel.js).
   Retirer ce fichier ou désactiver le script remet l'app à l'identique. */
html.noel-on header.topbar {
  background: linear-gradient(120deg, #c8102e 0%, #e0213d 60%, #f1502f 100%) !important;
  position: relative;
  overflow: hidden;
}
html.noel-on header.topbar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background:
    radial-gradient(circle at 6px 2px, #f5c542 3px, transparent 3.5px) 0 0 / 14px 10px,
    radial-gradient(circle at 13px 4px, #ffffff 2px, transparent 2.5px) 0 0 / 14px 10px;
  pointer-events: none;
  z-index: 1;
}
/* Neige qui verse du haut vers le bas, en fils fins épars, derrière le texte.
   Les fils les plus épais tombent plus vite (effet de profondeur). */
html.noel-on header.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  background-size: 1.5px 30px, 1.5px 44px, 2px 60px, 1.5px 30px, 1.5px 44px, 2px 60px, 1.5px 30px, 1.5px 44px, 2px 60px, 1.5px 30px, 1.5px 44px, 2px 60px, 1.5px 30px;
  background-repeat: repeat-y;
  animation: mv-noel-snow 3s linear infinite;
}
/* Le contenu reste au-dessus de la neige pour rester lisible */
html.noel-on header.topbar > * {
  position: relative;
  z-index: 1;
}
@keyframes mv-noel-snow {
  from { background-position: 4% 0, 12% 0, 19% 0, 27% 0, 34% 0, 42% 0, 50% 0, 57% 0, 65% 0, 73% 0, 80% 0, 88% 0, 95% 0; }
  to   { background-position: 4% 30px, 12% 44px, 19% 60px, 27% 30px, 34% 44px, 42% 60px, 50% 30px, 57% 44px, 65% 60px, 73% 30px, 80% 44px, 88% 60px, 95% 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html.noel-on header.topbar::after { animation: none; }
}

/* L'icône de l'app porte le bonnet du Père Noël */
html.noel-on .mv-noel-logo {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: visible;
}
html.noel-on .mv-noel-logo img { display: block; }
html.noel-on .mv-noel-hat {
  position: absolute;
  left: 50%;
  top: -13px;
  width: 30px;
  height: 22px;
  transform: translateX(-46%) rotate(-12deg);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
html.noel-on .mv-noel-hat svg { width: 100%; height: 100%; display: block; }