/* ==========================================================================
   Accueil — bandeau de Noël, au-dessus des quatre panneaux.
   Le sapin occupe la gauche du visuel, qui se fond à droite dans un vert
   presque noir : le texte se pose sur ce fond uni, la couleur de raccord
   prolonge l'image quand l'écran est plus large qu'elle.
   ========================================================================== */

/* Enregistrée pour pouvoir s'animer : à la fermeture, la grille reprend la
   hauteur du bandeau au même rythme qu'il la rend. */
@property --hero-decal {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.noel {
  --ivoire: #f5f1df;
  --encre: #101810;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 152px;
  padding: var(--u2) var(--u2) var(--u2) 31%;
  background: #041309 url("../../images/home/noel-mobile.webp") left center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}

/* « display: flex » l'emporterait sur le masquage par défaut de [hidden]. */
.noel[hidden] { display: none; }

.noel.is-fermeture {
  min-height: 0;
  padding-block: 0;
  opacity: 0;
  transition:
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}

.noel__contenu {
  display: grid;
  gap: var(--u2);
}

.noel__titre {
  margin: 0;
  padding-right: var(--u4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 5.4vw, 1.5rem);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--white);
}

.noel__sous-titre {
  display: none;
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.85);
}

.noel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u1);
}

.noel__bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  background: var(--ivoire);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--encre);
  cursor: var(--cursor-pointer);
  transition: background var(--ease);
}

.noel__bouton svg {
  flex: none;
  transition: transform var(--ease);
}

.noel__bouton:hover { background: var(--white); }
.noel__bouton:hover svg { transform: translateX(3px); }
.noel__bouton:focus-visible { box-shadow: var(--focus-ring); }

.noel__libelle-long { display: none; }

.noel__fermer {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--white);
  cursor: var(--cursor-pointer);
  transition: background var(--ease);
}

.noel__fermer:hover { background: rgb(255 255 255 / 0.1); }
.noel__fermer:focus-visible { box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   Tablette : visuel large, sous-titre et libellés complets
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .noel {
    min-height: 150px;
    padding: var(--u3) var(--u8) var(--u3) 33%;
    background-color: #05150c;
    background-image: url("../../images/home/noel-desktop.webp");
  }

  .noel:not([hidden]):not(.is-fermeture) ~ .hero-grid { --hero-decal: 150px; }

  .noel__titre {
    padding-right: 0;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
  }

  .noel__sous-titre { display: block; }
  .noel__libelle-long { display: inline; }
  .noel__libelle-court { display: none; }

  .noel__bouton {
    min-height: 44px;
    padding: 0 var(--u2);
    font-size: 0.875rem;
  }

  .noel__fermer {
    top: 50%;
    right: var(--u2);
    translate: 0 -50%;
  }
}

/* --------------------------------------------------------------------------
   Ordinateur : une seule ligne, le texte à gauche, les boutons à droite
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .noel {
    height: 120px;
    min-height: 0;
    padding-block: 0;
  }

  .noel:not([hidden]):not(.is-fermeture) ~ .hero-grid { --hero-decal: 120px; }

  .noel__contenu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--u4);
  }

  .noel__actions {
    flex-wrap: nowrap;
    gap: var(--u2);
  }
}

.hero-grid {
  transition: --hero-decal 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .noel.is-fermeture,
  .hero-grid { transition: none; }
}