/*
 * Bannière de la collection hiver-Noël : les décors de la fenêtre de Noël de
 * l'accueil (scripts/noel.js), posés autour du titre et de la vitrine
 * (pages-catalogue.js, decorerNoel). La neige tombe ; les décors apparaissent
 * l'un après l'autre au chargement, puis le traîneau flotte et la grosse
 * boule monte et descend au bout de son ruban. Purement décoratifs : jamais
 * cliquables, ignorés des lecteurs d'écran.
 *
 * Rien de ce qui bouge sans fin ne dépasse de la bannière (qui rogne ce qui
 * sort) par une transformation : Safari efface un tel élément. La boule
 * s'anime par sa position, dans une accroche isolée du reste de la page.
 */
.noel-decor {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    animation: noel-decor-apparition 700ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.noel-decor img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(60, 20, 10, 0.25));
}

/* Le sapin et le traîneau, sans ombre portée : Safari la rogne au cadre de
   l'image, un rectangle clair apparaît autour. */
.noel-decor--sapin img,
.noel-bas--sapin img,
.noel-decor--traineau img { filter: none; }

/* Le texte et la vitrine passent devant les suspensions et la neige. */
.banniere--noel .banniere__texte,
.banniere--noel .vitrine { position: relative; z-index: 2; }

/* — La neige, sur toute la bannière, dessinée sur une seule surface
   (scripts/neige.js) — */

.noel-neige {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}


/* — Les suspensions de boules, dans les coins hauts ; retournée, l'image sert
   au coin gauche. — */

.noel-decor--suspension,
.noel-decor--suspension-gauche {
    z-index: 0;
    top: 0;
    width: clamp(5.5rem, 9vw, 8.5rem);
    animation-name: noel-decor-tombe;
    animation-duration: 1100ms;
    animation-timing-function: cubic-bezier(0.25, 1.2, 0.5, 1);
}

.noel-decor--suspension { right: 1.5rem; animation-delay: 250ms; }
.noel-decor--suspension-gauche { left: 1.5rem; animation-delay: 100ms; }
.noel-decor--suspension-gauche img { transform: scaleX(-1); }

/* — Le traîneau arrive par la gauche et s'arrête à droite du titre, où il
   flotte. — */

.noel-decor--traineau {
    z-index: 3;
    top: 5%;
    left: 27%;
    width: clamp(8rem, 13vw, 12rem);
    animation: noel-decor-arrivee 2200ms cubic-bezier(0.2, 0.9, 0.3, 1.05) 600ms both;
}

.noel-decor--traineau img { animation: noel-decor-plane 3s ease-in-out 2.8s infinite; }

/* — La grosse boule pend sous l'en-tête, qui reste en haut de l'écran : elle
   reste visible quand on fait défiler la page. Son accroche est une bande
   sous l'en-tête qui rogne ce qui dépasse : le ruban part du bas de
   l'en-tête. En haut de page, elle est entre le texte et la vitrine. Elle
   descend, puis monte et descend sans fin par sa marge haute ; le ruban la
   suit. Sous le menu mobile ouvert, rien. — */

.noel-accroche {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    height: 24rem;
    overflow: hidden;
    /* Le va-et-vient change la mise en page de l'accroche à chaque image :
       isolée, elle ne fait recalculer qu'elle-même, pas toute la page. */
    contain: strict;
    pointer-events: none;
}

.sans-defilement .noel-accroche { display: none; }

/* Un clic sur la boule la fait remonter sous l'en-tête ; elle redescend dix
   secondes plus tard (scripts/collection-noel.js). */
.noel-accroche .noel-decor--boule { pointer-events: auto; cursor: pointer; }
.noel-decor__ruban::before { pointer-events: none; }

.noel-decor--boule.noel-decor--remonte {
    animation: noel-decor-remontee 900ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.noel-decor--boule.noel-decor--redescend {
    animation: noel-decor-redescente 1800ms cubic-bezier(0.25, 1.15, 0.5, 1) both;
}

.noel-decor--boule {
    --ruban: clamp(3rem, 6vw, 5rem);
    --yoyo: 1rem;
    z-index: 3;
    top: 0;
    left: 41%;
    width: clamp(4rem, 6.5vw, 6rem);
    animation: noel-decor-descente 1800ms cubic-bezier(0.25, 1.15, 0.5, 1) 1100ms both;
}

.noel-decor__ruban {
    position: relative;
    display: block;
    margin-top: var(--ruban);
    animation: noel-decor-ruban 2.8s ease-in-out 2.9s infinite alternate;
}

.noel-decor__ruban::before {
    content: "";
    position: absolute;
    bottom: 92%;
    left: calc(50% - 1px);
    width: 2px;
    height: 40rem;
    background: linear-gradient(#e6c675, #b8892f);
}

.noel-decor__ruban img {
    position: relative;
    /* Sans ombre portée : Safari la rogne au cadre de l'image pendant le
       va-et-vient, et un rectangle clair apparaît autour de la boule. */
    filter: none;
}

/* — Le sapin, posé sur le bas de la bannière entre le texte et la vitrine, et la
   lanterne contre le bord gauche ; les cadeaux dans le coin bas droit (le bord coupé de leur
   image est contre le bord de la bannière). — */

.noel-decor--sapin,
.noel-decor--lanterne,
.noel-decor--cadeaux {
    z-index: 3;
    bottom: 0.5rem;
    transform-origin: bottom center;
    animation-name: noel-decor-pousse;
}

.noel-decor--sapin { left: calc(34% - min(8rem, 12vh)); width: min(16rem, 24vh); animation-delay: 400ms; }
.noel-decor--lanterne { left: 0; width: clamp(9rem, 14vw, 14rem); transform-origin: bottom left; animation-delay: 550ms; }

/* Grand écran : de l'air sous le texte pour le sapin et la lanterne ; une
   seule suspension, à droite (à gauche, elle couvrirait le titre), plus
   petite et devant la dernière carte de la vitrine. */
@media (min-width: 901px) {
    /* La bannière tient dans l'écran, sous le bandeau et l'en-tête (7,6rem) :
       les décors du bas restent entiers. Le sapin suit la hauteur. */
    .banniere.banniere--noel {
        box-sizing: border-box;
        height: max(36rem, calc(100vh - 7.6rem));
        padding-top: 2rem;
        padding-bottom: min(15rem, 30vh);
    }
    .noel-decor--suspension { z-index: 3; right: 0.75rem; width: clamp(7rem, 10vw, 10.5rem); }
    /* La vitrine descend un peu, vers le milieu de la bannière agrandie. */
    .banniere--noel .vitrine { top: min(5rem, 7vh); }
    .noel-decor--suspension-gauche { display: none; }
}

/* Petit ordinateur : le texte descend plus bas, le sapin rapetisse un peu. */
@media (min-width: 901px) and (max-width: 1199px) {
    .noel-decor--sapin { width: min(13rem, 22vh); left: calc(32% - min(6.5rem, 11vh)); }
}

.noel-decor--cadeaux { right: 0; bottom: 0.25rem; width: clamp(7rem, 12vw, 11rem); animation-delay: 700ms; }

/* Leur lueur : une copie de l'image, illuminée une fois pour toutes, apparaît
   et s'efface (seule sa transparence s'anime, sans redessiner l'image). */
.noel-decor .noel-decor__lueur,
.noel-bas .noel-decor__lueur {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 14px rgba(255, 200, 90, 0.6)) brightness(1.06);
    opacity: 0;
    animation: noel-decor-lueur 2.8s ease-in-out 1.6s infinite;
}

.noel-bas .noel-decor__lueur { animation-delay: 1s; }

/* — Tablettes et téléphones : texte au-dessus, vitrine dessous. Une bande
   libre en haut accueille le traîneau, entre les deux suspensions ; la boule
   pend à droite du titre ; le sapin, la lanterne et les cadeaux sous la
   vitrine. — */

@media (max-width: 900px) {
    .banniere.banniere--noel { padding-top: 6.5rem; padding-bottom: 6rem; }
    .noel-decor--traineau { top: 1.25rem; left: calc(50% - 4.5rem); width: 9rem; }
    .noel-decor--boule { --ruban: 9rem; left: auto; right: 10%; }
    .noel-decor--lanterne { left: 0.75rem; }
    .noel-decor--sapin { left: calc(50% - 2.75rem); }
}

@media (max-width: 600px) {
    .banniere.banniere--noel { padding-top: 5.5rem; padding-bottom: 5rem; }
    .noel-decor--suspension,
    .noel-decor--suspension-gauche { width: 4.5rem; }
    .noel-decor--suspension { right: 0.5rem; }
    .noel-decor--suspension-gauche { left: 0.5rem; }
    .noel-decor--traineau { top: 0.75rem; left: calc(50% - 3.5rem); width: 7rem; }
    .noel-decor--boule { --ruban: 8rem; --yoyo: 0.6rem; right: 6%; width: 3.25rem; }
    .noel-decor--sapin { width: 4rem; left: calc(50% - 2rem); }
    .noel-decor--lanterne { width: 3.75rem; }
    .noel-decor--cadeaux { width: 6rem; }
}

/* — En bas de page, la section des coffrets : la guirlande accrochée sur son
   bord haut, la lanterne et le sapin à gauche, les cadeaux à droite, posés
   sur son bord bas. Sans apparition (la section est loin sous l'écran au
   chargement) ; la lanterne et les cadeaux scintillent. — */

.coffrets--noel {
    position: relative;
    overflow: hidden;
    /* En haut, la hauteur de la guirlande (un tiers de sa largeur). */
    padding-block: calc(min(34rem, 92vw) * 0.33 + 0.5rem) 6rem;
}

.coffrets--noel .coffrets__contenu { position: relative; z-index: 2; }

.noel-bas {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.noel-bas img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(60, 20, 10, 0.25));
}

.noel-bas--guirlande { top: -0.75rem; left: 50%; width: min(34rem, 92vw); transform: translateX(-50%); }
.noel-bas--lanterne { bottom: 0; left: 0; width: clamp(7rem, 13vw, 12rem); }
.noel-bas--sapin { bottom: 0; left: clamp(6rem, 13vw, 12rem); width: clamp(6rem, 10vw, 10rem); }
.noel-bas--cadeaux { bottom: 0; right: 1rem; width: clamp(9rem, 17vw, 16rem); }

/* Téléphones : la guirlande en haut, les autres sous le bouton. */
@media (max-width: 600px) {
    .coffrets--noel { padding-bottom: 8rem; }
    .noel-bas--lanterne { width: 5.5rem; }
    .noel-bas--sapin { left: calc(50% - 2.5rem); width: 5rem; }
    .noel-bas--cadeaux { right: 0.25rem; width: 7rem; }
}

/* — Animations — */

@keyframes noel-decor-apparition {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}


@keyframes noel-decor-tombe {
    from { opacity: 0; transform: translateY(-2rem); }
    to { opacity: 1; transform: none; }
}

@keyframes noel-decor-arrivee {
    from { opacity: 0; transform: translateX(-40vw) rotate(-8deg); }
    15% { opacity: 1; }
    to { opacity: 1; transform: none; }
}

@keyframes noel-decor-plane {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-1.5deg); }
}

/* Hors de vue au départ : au-dessus de l'accroche, qui la rogne. */
@keyframes noel-decor-descente {
    from { top: -16rem; }
    to { top: 0; }
}

@keyframes noel-decor-remontee {
    from { top: 0; }
    to { top: -16rem; }
}

/* La descente du chargement, sous un autre nom pour pouvoir la rejouer. */
@keyframes noel-decor-redescente {
    from { top: -16rem; }
    to { top: 0; }
}

@keyframes noel-decor-ruban {
    from { margin-top: var(--ruban); }
    to { margin-top: calc(var(--ruban) - var(--yoyo)); }
}

@keyframes noel-decor-pousse {
    from { opacity: 0; transform: translateY(2rem) scale(0.7); }
    to { opacity: 1; transform: none; }
}

@keyframes noel-decor-lueur {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Section hors de l'écran : ses décors s'arrêtent (collection-noel.js). */
.decors-en-pause .noel-decor,
.decors-en-pause .noel-decor *,
.decors-en-pause .noel-bas * { animation-play-state: paused; }

/* Mouvements réduits : tout est là d'emblée, rien ne bouge, pas de neige. */
@media (prefers-reduced-motion: reduce) {
    .noel-decor,
    .noel-decor img,
    .noel-decor__ruban,
    .noel-bas img { animation: none; }
    /* Pas de lueur : sa copie reste transparente. */
    .noel-decor .noel-decor__lueur,
    .noel-bas .noel-decor__lueur { animation: none; }
    .noel-neige { display: none; }
}