/*
 * Fenêtre « Noël approche ! » de l'accueil (scripts/noel.js), dans l'esprit
 * de celle d'Halloween (halloween.css).
 *
 * Une boîte crème au centre, la neige qui tombe derrière, et autour d'elle
 * les décors qui apparaissent l'un après l'autre : la guirlande posée sur le
 * haut de la boîte, la suspension de boules accrochée en haut de l'écran, la
 * grosse boule qui descend au bout de son ruban, le sapin posé sur le bas de
 * la boîte, et dans les coins bas de l'écran la lanterne et les cadeaux. Le
 * traîneau arrive et s'arrête au-dessus de la boîte ; au clic sur
 * « Découvrir les produits », il repart.
 */
.noel {
    position: fixed;
    inset: 0;
    width: min(30rem, calc(100% - 2 * var(--marge-mobile)));
    max-width: none;
    max-height: none;
    margin: auto;
    height: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: var(--texte);
}

.noel::backdrop {
    background: rgba(24, 14, 20, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: noel-fondu 400ms ease-out both;
}

.noel__boite {
    position: relative;
    z-index: 1;
    /* En haut, la place de la guirlande. */
    padding: 9rem var(--espace-4) var(--espace-6);
    border: 1px solid #c9a24a;
    border-radius: var(--rayon-l);
    background: var(--creme);
    animation: noel-ouverture 400ms ease-out both;
    box-shadow: 0 18px 50px rgba(24, 14, 20, 0.35), 0 0 60px rgba(255, 210, 120, 0.22);
    text-align: center;
    /* Téléphone en paysage, texte agrandi : la boîte défile plutôt que de
       sortir de l'écran. Les décors sont hors de la boîte, jamais rognés. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

/* Hors de la boîte, en pastille sur son coin : la guirlande couvre le haut. */
.noel__fermer {
    position: absolute;
    z-index: 5;
    top: -1.1rem;
    right: -1.1rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #c9a24a;
    border-radius: var(--rayon-rond);
    background: var(--creme);
    box-shadow: 0 4px 12px rgba(24, 14, 20, 0.3);
    color: var(--texte-doux);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.noel__fermer:hover,
.noel__fermer:focus-visible { background: var(--creme-sombre); color: var(--texte); }

.noel__surtitre {
    margin: 0;
    font-family: var(--police-manuscrite);
    font-size: var(--taille-l);
    color: var(--bordeaux-clair);
}

.noel__titre {
    margin: 0 0 var(--espace-2);
    font-family: var(--police-titre);
    font-size: clamp(var(--taille-xl), 7vw, var(--taille-xxl));
    font-weight: 700;
    color: var(--bordeaux);
}

.noel__insecable { white-space: nowrap; }

.noel__actions .bouton { white-space: nowrap; }

.noel__texte {
    max-width: 24rem;
    margin: 0 auto var(--espace-3);
    color: var(--texte-doux);
    line-height: 1.6;
}

.noel__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-1);
}

.noel__plus-tard {
    min-height: 2.75rem;
    padding: 0 var(--espace-2);
    border: 0;
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-size: var(--taille-s);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.noel__plus-tard:hover { color: var(--texte); }

/* — La neige, sur tout l'écran, derrière la boîte. Fixée par rapport à
   l'écran : la fenêtre elle-même n'est jamais transformée. — */

.noel__neige {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    animation: noel-fondu 1200ms ease-out both;
}


/* — Les décors — */

.noel__decor {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    animation: noel-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(0, 0, 0, 0.3));
}

/* La suspension de boules, accrochée en haut de l'écran, qui se balance. */
.noel__decor--suspension {
    position: fixed;
    top: 0;
    right: 7vw;
    width: clamp(8rem, 14vw, 13rem);
    transform-origin: top center;
    animation-name: noel-tombe;
    animation-delay: 200ms;
    animation-duration: 1200ms;
    animation-timing-function: cubic-bezier(0.25, 1.2, 0.5, 1);
}

.noel__decor--suspension img {
    transform-origin: top center;
    animation: noel-balancier 4s ease-in-out 1.4s infinite;
}

/* La grosse boule, qui descend du haut de l'écran au bout de son ruban doré,
   puis se balance comme un pendule accroché en haut de l'écran. */
.noel__decor--boule {
    --haut: clamp(5rem, 14vh, 9rem);
    position: fixed;
    top: var(--haut);
    left: 9vw;
    width: clamp(6rem, 10vw, 9rem);
    transform-origin: 50% calc(-1 * var(--haut));
    animation:
        noel-descente 2000ms cubic-bezier(0.25, 1.15, 0.5, 1) 1500ms both,
        noel-pendule 4.5s ease-in-out 3.5s infinite;
}

.noel__decor--boule::before {
    content: "";
    position: absolute;
    bottom: 97%;
    left: calc(50% - 1px);
    width: 2px;
    height: 100vh;
    background: linear-gradient(#e6c675, #b8892f);
}

.noel__decor--boule img { position: relative; }

/* La guirlande, posée sur le haut de la boîte. */
.noel__decor--guirlande {
    z-index: 3;
    top: -1.25rem;
    left: -2%;
    width: 104%;
    animation-name: noel-guirlande;
    animation-delay: 300ms;
    animation-duration: 900ms;
}

/* Le sapin, posé sur le bas de la boîte à cheval sur son bord gauche, devant
   elle : à moitié dehors, il garde ses boutons dégagés. */
.noel__decor--sapin {
    --largeur: 9.5rem;
    z-index: 3;
    bottom: -0.4rem;
    left: calc(var(--largeur) * -0.1);
    width: var(--largeur);
    transform-origin: bottom center;
    animation-name: noel-pousse;
    animation-delay: 500ms;
}

/* La lanterne et les cadeaux, posés dans les coins bas de l'écran, qui
   scintillent. */
.noel__decor--lanterne {
    position: fixed;
    bottom: 0;
    left: 0;
    width: clamp(9rem, 17vw, 16rem);
    transform-origin: bottom left;
    animation-name: noel-pousse;
    animation-delay: 700ms;
}

.noel__decor--cadeaux {
    position: fixed;
    bottom: 0;
    right: 0;
    width: clamp(11rem, 22vw, 20rem);
    transform-origin: bottom right;
    animation-name: noel-pousse;
    animation-delay: 850ms;
}


/* 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__lueur {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 14px rgba(255, 200, 90, 0.6)) brightness(1.06);
    opacity: 0;
    animation: noel-lueur 2.8s ease-in-out 1.6s infinite;
}

/* Le traîneau arrive par la gauche et s'arrête au-dessus de la boîte, où il
   flotte en attendant. Au clic sur « Découvrir les produits », il repart
   vers le haut à droite en grandissant ; la collection s'ouvre à la fin. */
.noel__decor--traineau {
    --largeur: 14rem;
    z-index: 4;
    bottom: calc(100% - 0.75rem);
    left: 50%;
    width: var(--largeur);
    margin-left: calc(var(--largeur) / -2);
    animation: noel-arrivee 2400ms cubic-bezier(0.2, 0.9, 0.3, 1.05) 1000ms both;
}

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

.noel--depart .noel__decor--traineau {
    animation: noel-envol 1600ms cubic-bezier(0.5, 0, 0.75, 0.3) both;
}

.noel--depart .noel__decor--traineau img { animation: none; }

/* — Téléphones : décors plus petits ; la lanterne et les cadeaux restent dans
   les coins bas de l'écran. — */

@media (max-width: 600px) {
    .noel__boite { padding: 7.5rem var(--espace-3) var(--espace-8); }
    .noel__fermer { top: -0.9rem; right: -0.6rem; }
    .noel__actions .bouton { padding-inline: var(--espace-3); }
    .noel__decor--suspension { right: 2vw; width: 6.5rem; }
    .noel__decor--boule { --haut: 3.5rem; left: 36%; width: 4.25rem; }
    .noel__decor--guirlande { top: -1rem; left: -3%; width: 106%; }
    .noel__decor--lanterne { width: 7rem; }
    .noel__decor--cadeaux { width: 8.5rem; }
    .noel__decor--traineau { --largeur: 10rem; }
    .noel__decor--sapin { --largeur: 5.5rem; left: 0.5rem; }
}

/* Écran peu haut (ordinateur) : peu de place au-dessus de la boîte, le
   traîneau rapetisse et se pose sur la guirlande. */
@media (min-width: 601px) and (max-height: 760px) {
    .noel__decor--traineau { --largeur: 10rem; bottom: calc(100% - 3rem); }
}

/* Petits téléphones : la boîte remplit presque l'écran ; ce qui est
   au-dessus d'elle rapetisse. */
@media (max-width: 600px) and (max-height: 700px) {
    .noel__decor--traineau { --largeur: 6.5rem; bottom: calc(100% - 2.5rem); }
    .noel__boite { padding-top: 6.25rem; }
    .noel__decor--boule { --haut: 1.5rem; width: 3.25rem; }
    .noel__decor--suspension { width: 4.5rem; }
}

/* — Animations — */

@keyframes noel-ouverture {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes noel-fondu {
    from { opacity: 0; }
    to { opacity: 1; }
}


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

@keyframes noel-tombe {
    from { transform: translateY(-110%); }
    to { transform: none; }
}

@keyframes noel-balancier {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
}

@keyframes noel-descente {
    from { transform: translateY(-100vh); }
    to { transform: none; }
}

@keyframes noel-pendule {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1.5deg); }
    75% { transform: rotate(-1.5deg); }
}

@keyframes noel-guirlande {
    from { opacity: 0; transform: translateY(-1.5rem) scaleX(0.7); }
    to { opacity: 1; transform: none; }
}

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

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

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

@keyframes noel-arrivee {
    from { opacity: 1; transform: translate(-100vw, -12vh) rotate(-8deg); }
    to { opacity: 1; transform: none; }
}

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

@keyframes noel-envol {
    0% { opacity: 1; transform: none; }
    15% { opacity: 1; transform: translate(-1rem, 0.5rem) rotate(2deg); }
    100% { opacity: 1; transform: translate(70vw, -60vh) scale(1.8) rotate(-14deg); }
}

/* Mouvements réduits : tout est là d'emblée, rien ne bouge, pas de neige ni
   de traîneau. */
@media (prefers-reduced-motion: reduce) {
    .noel__boite,
    .noel::backdrop,
    .noel__decor,
    .noel__decor img { animation: none; }
    /* Pas de lueur : sa copie reste transparente. */
    .noel__decor .noel__lueur { animation: none; }
    .noel__neige { display: none; }
}