/*
 * Bannière de l'accueil pendant le temps fort de Noël (scripts/accueil-noel.js) :
 * les décors de la collection hiver-Noël autour du titre et de la photo.
 * Purement décoratifs : jamais cliquables, ignorés des lecteurs d'écran.
 * Sans ombre portée (Safari la rogne au cadre des images) ; rien de ce qui
 * bouge sans fin ne dépasse de la bannière par une transformation.
 */
.accueil-noel {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    animation: accueil-noel-apparition 700ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.accueil-noel img {
    display: block;
    width: 100%;
    height: auto;
}

/* La neige, sur toute la bannière, devant la photo et derrière le texte. */
.accueil-noel-neige {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.banniere--noel-accueil .banniere__texte { z-index: 2; }

/* Le traîneau arrive par la gauche et s'arrête entre le titre et la photo,
   où il flotte. */
.accueil-noel--traineau {
    top: 6%;
    left: 34%;
    width: clamp(9rem, 14vw, 13rem);
    animation: accueil-noel-arrivee 2200ms cubic-bezier(0.2, 0.9, 0.3, 1.05) 500ms both;
}

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

/* La grosse boule, au bout de son ruban doré qui part du haut de la
   bannière, à l'orée de la photo : elle descend, puis monte et descend sans
   fin. Le va-et-vient ne coûte rien : la boule glisse et le ruban se
   raccourcit par des transformations, à l'intérieur d'une boîte de taille
   fixe et isolée dont rien ne dépasse (Safari efface un élément animé par
   transformation qui sort d'un cadre rogné). Seule la descente du
   chargement déplace la boîte. */
.accueil-noel--boule {
    --ruban: 8.5rem;
    top: 0;
    left: 52%;
    width: clamp(3.75rem, 5.5vw, 5.25rem);
    height: calc(var(--ruban) + 6rem);
    contain: strict;
    animation: accueil-noel-descente 1800ms cubic-bezier(0.25, 1.15, 0.5, 1) 1000ms both;
}

.accueil-noel__fil {
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    width: 2px;
    height: calc(var(--ruban) + 0.4rem);
    background: linear-gradient(#e6c675, #b8892f);
    transform-origin: top center;
    animation: accueil-noel-fil 2.8s ease-in-out 2.8s infinite alternate;
}

.accueil-noel .accueil-noel__boule {
    position: absolute;
    top: var(--ruban);
    left: 0;
    animation: accueil-noel-boule 2.8s ease-in-out 2.8s infinite alternate;
}

/* La lanterne, posée en bas entre le texte et la photo ; les cadeaux dans le
   coin bas droit (le bord coupé de leur image contre le bord de la
   bannière). */
.accueil-noel--lanterne,
.accueil-noel--cadeaux {
    bottom: 0;
    transform-origin: bottom center;
    animation-name: accueil-noel-pousse;
}

.accueil-noel--lanterne { left: 42%; width: clamp(7rem, 11vw, 10rem); animation-delay: 400ms; }
.accueil-noel--cadeaux { right: 0; width: clamp(9rem, 15vw, 14rem); animation-delay: 600ms; }

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

/* Tablette : le texte prend plus de place ; le traîneau se pose en bas, à
   côté de « Plus qu'une bougie », les cadeaux restent dans le coin. */
@media (max-width: 1024px) {
    .accueil-noel--traineau { left: 33%; top: auto; bottom: 2%; width: 9rem; }
    .accueil-noel--boule,
    .accueil-noel--lanterne { display: none; }
}

/* Téléphone : la photo est étroite, derrière le texte ; seuls la neige et
   les cadeaux restent. */
@media (max-width: 560px) {
    .accueil-noel--traineau { display: none; }
    .accueil-noel--cadeaux { width: 7rem; }
}

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

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

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

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

@keyframes accueil-noel-descente {
    from { top: -16rem; }
    to { top: 0; }
}

/* La boule remonte de 1rem ; le ruban (8,9rem) se raccourcit d'autant. */
@keyframes accueil-noel-boule {
    from { transform: none; }
    to { transform: translateY(-1rem); }
}

@keyframes accueil-noel-fil {
    from { transform: none; }
    to { transform: scaleY(0.888); }
}

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

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

/* Mouvements réduits : tout est là d'emblée, rien ne bouge, pas de neige. */
@media (prefers-reduced-motion: reduce) {
    .accueil-noel,
    .accueil-noel img,
    .accueil-noel__fil,
    .accueil-noel .accueil-noel__lueur { animation: none; }
}