/*
 * Bannière de la collection automne-Halloween : les décors de la fenêtre de
 * l'accueil (scripts/halloween.js), posés autour du titre et de la vitrine
 * (pages-catalogue.js, decorerHalloween). Ils apparaissent l'un après
 * l'autre au chargement, puis l'araignée se balance et le fantôme flotte.
 * Purement décoratifs : jamais cliquables, ignorés des lecteurs d'écran.
 */
.halloween-decor {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    animation: halloween-decor-apparition 700ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

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

.banniere--halloween { --toile: clamp(7rem, 12vw, 11rem); }

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

/* Les toiles, dans les coins hauts de la bannière. L'image est dessinée pour
   le coin gauche ; retournée, elle sert au coin droit. */
.halloween-decor--toile,
.halloween-decor--toile-gauche {
    z-index: 0;
    top: 0;
    width: var(--toile);
    opacity: 0.8;
    animation-name: halloween-decor-toile;
    animation-duration: 900ms;
}

.halloween-decor--toile { right: 0; transform-origin: top right; animation-delay: 250ms; }
.halloween-decor--toile-gauche { left: 0; transform-origin: top left; animation-delay: 100ms; }
.halloween-decor--toile img { transform: scaleX(-1); }
.halloween-decor--toile img,
.halloween-decor--toile-gauche img { filter: none; }

/* L'araignée 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 fil part du bas de l'en-tête, et
   l'araignée en sort en descendant. Sous le menu mobile ouvert, rien. */
.halloween-accroche {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    height: 20rem;
    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 .halloween-accroche { display: none; }

/* L'araignée, au bout de son fil : en haut de page, entre le texte et la
   vitrine ; sur grand écran, le fil s'accroche entre « Notre histoire » et
   « Événements » (scripts/collection-halloween.js). Elle sort de sous
   l'en-tête en descendant, puis remonte et redescend sans fin. Le fil
   s'arrête sous le corps, caché par lui. Tout se fait par la position (top,
   marge), sans transformation : Safari efface un élément animé par
   transformation qui dépasse d'un cadre rogné. */
.halloween-decor--araignee {
    --largeur: clamp(4rem, 7vw, 6.5rem);
    --marge: clamp(3rem, 6vw, 5rem);
    z-index: 3;
    top: 0;
    left: 41%;
    width: var(--largeur);
    animation: halloween-decor-descente 2200ms cubic-bezier(0.25, 1.15, 0.5, 1) 900ms both;
}

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

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

.halloween-decor--araignee.halloween-decor--redescend {
    animation: halloween-decor-redescente 2200ms cubic-bezier(0.25, 1.15, 0.5, 1) both;
}

.halloween-decor__fil {
    --yoyo: 1.25rem;
    position: relative;
    display: block;
    margin-top: var(--marge);
    animation: halloween-decor-yoyo 2.6s ease-in-out 3.1s infinite alternate;
}

.halloween-decor__fil::before {
    content: "";
    position: absolute;
    bottom: 55%;
    left: calc(50% - 0.5px);
    width: 1px;
    height: 600px;
    background: rgba(60, 40, 40, 0.55);
}

.halloween-decor__fil img { position: relative; }

/* Le fantôme flotte à droite du titre. */
.halloween-decor--fantome {
    z-index: 3;
    top: 14%;
    left: 30%;
    width: clamp(6rem, 11vw, 10rem);
    animation-name: halloween-decor-fantome;
    animation-delay: 700ms;
    animation-duration: 900ms;
}

.halloween-decor--fantome img { animation: halloween-decor-flotter 4s ease-in-out 1.6s infinite; }

/* La lanterne et la citrouille, posées sur le bas de la bannière, en entier :
   la bannière rogne tout ce qui dépasse. */
.halloween-decor--lanterne,
.halloween-decor--citrouille {
    z-index: 3;
    bottom: 0.75rem;
    transform-origin: bottom center;
    animation-name: halloween-decor-pousse;
}

.halloween-decor--lanterne { left: 40%; width: clamp(4.5rem, 7.5vw, 7rem); animation-delay: 400ms; }
.halloween-decor--citrouille { right: 1.25rem; width: clamp(5rem, 8.5vw, 8rem); animation-delay: 550ms; }

/* 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). */
.halloween-decor .halloween-decor__lueur {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 14px rgba(255, 150, 40, 0.55)) brightness(1.06);
    opacity: 0;
    animation: halloween-decor-lueur 2.8s ease-in-out 1.4s infinite;
}

/* — Téléphones et tablettes : texte au-dessus, vitrine dessous — */

@media (max-width: 900px) {
    .halloween-decor--araignee { left: auto; right: 12%; }
    .halloween-decor--fantome { top: 2.5rem; left: auto; right: 22%; }
    .banniere.banniere--halloween { padding-bottom: 5rem; }
    .halloween-decor--lanterne { left: 0.75rem; }
    .halloween-decor--citrouille { right: 0.75rem; }
}

/* Téléphones : le titre prend toute la largeur. Une bande libre au-dessus
   accueille le fantôme, entre les deux toiles ; l'araignée descend jusqu'à
   côté du cœur, sur la seconde ligne du titre. */
@media (max-width: 600px) {
    .banniere.banniere--halloween { padding-top: 6rem; padding-bottom: 4.5rem; }
    .banniere--halloween { --toile: 7rem; }
    .halloween-decor--araignee { --largeur: 3.5rem; --marge: 10rem; right: 8%; }
    .halloween-decor__fil { --yoyo: 0.75rem; }
    .halloween-decor--fantome { top: 0.75rem; right: auto; left: calc(50% - 2.5rem); width: 5rem; }
    .halloween-decor--lanterne { width: 3.75rem; }
    .halloween-decor--citrouille { width: 4.5rem; }
}

/* — Animations — */

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

@keyframes halloween-decor-toile {
    from { opacity: 0; transform: scale(0.4) rotate(8deg); }
    to { opacity: 0.8; transform: none; }
}

/* Hors de vue au départ : au-dessus de la bande d'accroche, qui le rogne. */
@keyframes halloween-decor-descente {
    from { top: calc(-1 * (var(--marge) + var(--largeur) * 1.1)); }
    to { top: 0; }
}

@keyframes halloween-decor-remontee {
    from { top: 0; }
    to { top: calc(-1 * (var(--marge) + var(--largeur) * 1.1)); }
}

/* La descente du chargement, sous un autre nom pour pouvoir la rejouer. */
@keyframes halloween-decor-redescente {
    from { top: calc(-1 * (var(--marge) + var(--largeur) * 1.1)); }
    to { top: 0; }
}

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

@keyframes halloween-decor-fantome {
    from { opacity: 0; transform: translateX(-2rem) scale(0.8); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes halloween-decor-flotter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

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

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

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