/* ============================================================
   HABILLAGE DE NOËL — Jardiland Guadeloupe
   Actif uniquement quand <html class="noel"> (classe posée par le script du
   <head>, entre le 31/10/2026 et le 05/01/2027). Sans la classe : aucun effet.
   Retrait définitif : supprimer ce fichier + la ligne <link> et le <script>
   « Habillage de Noël » dans l'en-tête de chaque page.
   ============================================================ */
html.noel { --noel-rouge:#B3151F; --noel-rouge-fonce:#8E0E17; --noel-or:#E6B54A; --noel-bar:40px; }

/* ---- bandeau fixe au-dessus du menu ---- */
html.noel body { padding-top: var(--noel-bar); }
html.noel header.site-header { top: var(--noel-bar); }
html.noel body::before {
  content: "🎄 Village de Noël en magasin dès le 31 octobre · Sapins naturels dès le 19 novembre";
  position: fixed; top: 0; left: 0; right: 0; height: var(--noel-bar); z-index: 1001;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, var(--noel-rouge-fonce), var(--noel-rouge) 50%, var(--noel-rouge-fonce));
  color: #fff; font: 700 .86rem/1 var(--font-brand, 'Inter', sans-serif); letter-spacing: .02em;
  padding: 0 130px 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
html.noel .noel-bar-link {   /* lien invisible posé par le script par-dessus le bandeau */
  position: fixed; top: 0; left: 0; right: 0; height: var(--noel-bar); z-index: 1002;
  display: block; color: transparent; font-size: 0; overflow: hidden;
}
html.noel .noel-bar-link::after {
  content: "En savoir plus →"; position: absolute; right: 16px; top: 0; height: var(--noel-bar);
  display: flex; align-items: center; color: var(--noel-or); font: 700 .8rem/1 var(--font-brand, 'Inter', sans-serif);
}
@media (max-width: 600px) {
  html.noel body::before { content: "🎄 Village de Noël dès le 31 oct. · Sapins dès le 19 nov."; font-size: .76rem; padding: 0 36px 0 12px; justify-content: flex-start; }
  html.noel .noel-bar-link::after { content: "→"; font-size: 1rem; right: 12px; }
}

/* ---- guirlande sous le menu ---- */
html.noel header.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; pointer-events: none;
  background:
    radial-gradient(circle at 4px 3px, var(--noel-or) 1.9px, transparent 2.7px) 0 0 / 18px 7px repeat-x,
    radial-gradient(circle at 13px 4px, var(--noel-rouge) 1.7px, transparent 2.5px) 0 0 / 18px 7px repeat-x;
}

/* ---- accueil : hero « Village de Noël » ---- */
html.noel .hero-bg {
  background: url('../images/noel/village-noel-hero-paysage-1280.jpg') 70% 50% / cover no-repeat;
  background-image: image-set(
    url('../images/noel/village-noel-hero-paysage-1672.avif') type('image/avif'),
    url('../images/noel/village-noel-hero-paysage-1672.webp') type('image/webp'),
    url('../images/noel/village-noel-hero-paysage-1280.jpg') type('image/jpeg'));
  background-position: 70% 50%;
}
html.noel .hero-bg::after {
  background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.12) 70%, rgba(0,0,0,0) 100%);
}
html.noel .hero-content::before {
  content: "🎄 Bienvenue au Village de Noël — à partir du 31 octobre";
  display: block; width: max-content; max-width: 100%;
  background: var(--noel-rouge); color: #fff; font-weight: 800; font-size: .86rem; letter-spacing: .05em;
  text-transform: uppercase; padding: 10px 18px; border-radius: 50px; margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
@media (max-width: 768px) {
  html.noel .hero-bg {
    background-image: url('../images/noel/village-noel-hero-portrait-828.jpg');
    background-image: image-set(
      url('../images/noel/village-noel-hero-portrait-828.avif') type('image/avif'),
      url('../images/noel/village-noel-hero-portrait-828.webp') type('image/webp'),
      url('../images/noel/village-noel-hero-portrait-828.jpg') type('image/jpeg'));
    background-position: 50% 50%;
  }
  html.noel .hero-bg::after { background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.06) 72%, rgba(0,0,0,0) 100%); }
  html.noel .hero-content::before { font-size: .74rem; padding: 9px 14px; white-space: normal; }
}

/* ---- page catalogue : bandeau de tête ---- */
html.noel[data-page="catalogue"] .page-hero-bg {
  background-image: image-set(
    url('../images/noel/village-noel-hero-paysage-1672.avif') type('image/avif'),
    url('../images/noel/village-noel-hero-paysage-1672.webp') type('image/webp'),
    url('../images/noel/village-noel-hero-paysage-1280.jpg') type('image/jpeg')) !important;
  background-position: 70% 50% !important;
}
@media (max-width: 768px) {
  html.noel[data-page="catalogue"] .page-hero-bg {
    background-image: image-set(
      url('../images/noel/village-noel-hero-portrait-828.avif') type('image/avif'),
      url('../images/noel/village-noel-hero-portrait-828.webp') type('image/webp'),
      url('../images/noel/village-noel-hero-portrait-828.jpg') type('image/jpeg')) !important;
    background-position: 50% 50% !important;
  }
}

html.noel[data-page="catalogue"] .page-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.05) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}

/* ---- pied de page ---- */
html.noel footer::after {
  content: "🎄 Toute l'équipe Jardiland vous souhaite de belles fêtes de fin d'année";
  display: block; text-align: center; color: var(--noel-or); font-weight: 700; font-size: .95rem;
  padding: 0 24px 26px;
}