/* Reloge - decoration saisonniere du bandeau d'accueil (saison.php, reloge-saison.js ; Fred 2026-10-30).
   Un calque sans clic, sous le contenu du bandeau : toiles, araignee, chauves-souris, citrouilles. */

/* span. : passe devant « .stk--has-background-overlay > :not(...) » de Stackable (relative, z-index 3). Meme
   z-index que le contenu du bandeau, mais pose avant lui : le contenu reste dessus, le voile du fond dessous. */
span.reloge-saison.reloge-saison--halloween {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    --rl-saison-haut: 0px;
}
.reloge-saison > span { position: absolute; display: block; }
.reloge-saison svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Les toiles, dans les deux coins du haut, sous l'en-tete. */
.reloge-saison .rl-toile { top: var(--rl-saison-haut); width: 140px; }
.reloge-saison .rl-toile--gauche { left: 0; }
.reloge-saison .rl-toile--droite { right: 0; transform: scaleX(-1); width: 110px; }
.reloge-saison .rl-toile path {
    fill: none;
    stroke: rgba(255, 255, 255, .75);
    stroke-width: .9;
    filter: drop-shadow(0 0 1px rgba(1, 22, 39, .45));
}

/* L'araignee, au bout de son fil, qui monte et descend. */
.reloge-saison .rl-araignee {
    top: calc(var(--rl-saison-haut) + 18px);
    right: 3%;
    width: 30px;
    animation: rl-saison-descente 6s ease-in-out infinite alternate;
}
.reloge-saison .rl-araignee__fil {
    position: absolute;
    bottom: 60%;
    left: 50%;
    width: 1px;
    height: 600px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 1px rgba(1, 22, 39, .5);
}
.reloge-saison .rl-araignee__corps { position: relative; display: block; animation: rl-saison-balance 3s ease-in-out infinite alternate; transform-origin: 50% 0; }
.reloge-saison .rl-araignee svg { fill: #011627; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.reloge-saison .rl-araignee .rl-pattes path { fill: none; stroke: #011627; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reloge-saison .rl-araignee .rl-yeux { fill: #fd6905; }

/* Les chauves-souris : une traversee, une ondulation, un battement d'ailes. */
.reloge-saison .rl-vol { animation: rl-saison-traverse 20s linear infinite; }
.reloge-saison .rl-vol__onde { display: block; animation: rl-saison-onde 2.6s ease-in-out infinite alternate; }
.reloge-saison .rl-chauve-souris { display: block; animation: rl-saison-battement .26s ease-in-out infinite alternate; }
/* Un liseré clair : sur le feuillage sombre du bas de la photo, la silhouette seule se perdait. */
.reloge-saison .rl-chauve-souris svg { fill: #011627; opacity: .9; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.reloge-saison .rl-vol--1 { top: calc(var(--rl-saison-haut) + 6px); left: 22%; width: 46px; animation-duration: 19s; animation-delay: -4s; }
.reloge-saison .rl-vol--2 { top: calc(var(--rl-saison-haut) + 30px); left: 64%; width: 30px; animation-duration: 25s; animation-delay: -15s; animation-direction: reverse; }
.reloge-saison .rl-vol--3 { top: 74%; left: 38%; width: 38px; animation-duration: 22s; animation-delay: -9s; }
.reloge-saison .rl-vol--4 { top: 82%; left: 80%; width: 26px; animation-duration: 28s; animation-delay: -20s; animation-direction: reverse; }
.reloge-saison .rl-vol--5 { top: 40%; left: 8%; width: 34px; animation-duration: 31s; animation-delay: -2s; }
.reloge-saison .rl-vol--2 .rl-vol__onde { animation-duration: 3.1s; }
.reloge-saison .rl-vol--3 .rl-vol__onde { animation-duration: 2.2s; }
.reloge-saison .rl-vol--4 .rl-chauve-souris { animation-duration: .22s; }

/* Les citrouilles, posees sur le bord bas du bandeau, la bouche qui luit. */
.reloge-saison .rl-citrouille { bottom: 6px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35)); }
.reloge-saison .rl-citrouille--1 { left: 2%; width: 74px; }
.reloge-saison .rl-citrouille--2 { left: calc(2% + 60px); width: 48px; bottom: 4px; }
.reloge-saison .rl-citrouille--3 { right: 2.5%; width: 60px; }
.reloge-saison .rl-citrouille .rl-cote { fill: #e35d06; stroke: rgba(110, 35, 0, .35); stroke-width: .8; }
.reloge-saison .rl-citrouille .rl-corps { fill: #fd6905; stroke: rgba(110, 35, 0, .35); stroke-width: .8; }
.reloge-saison .rl-citrouille .rl-tige { fill: #3f6b2a; }
.reloge-saison .rl-citrouille .rl-lueur { fill: #ffd23f; animation: rl-saison-flamme 2.4s ease-in-out infinite; }
.reloge-saison .rl-citrouille--2 .rl-lueur { animation-delay: -.8s; }
.reloge-saison .rl-citrouille--3 .rl-lueur { animation-delay: -1.5s; }

@keyframes rl-saison-traverse { from { left: -8%; } to { left: 106%; } }
@keyframes rl-saison-onde { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
@keyframes rl-saison-battement { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes rl-saison-descente { from { transform: translateY(0); } to { transform: translateY(70px); } }
@keyframes rl-saison-balance { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes rl-saison-flamme { 0%, 100% { opacity: 1; } 40% { opacity: .7; } 60% { opacity: .9; } 75% { opacity: .65; } }

@media (max-width: 600px) {
    .reloge-saison .rl-toile { width: 80px; }
    .reloge-saison .rl-toile--droite { width: 64px; }
    .reloge-saison .rl-araignee { width: 22px; }
    .reloge-saison .rl-vol--4, .reloge-saison .rl-vol--5 { display: none; }
    .reloge-saison .rl-vol--1 { width: 34px; }
    .reloge-saison .rl-vol--3 { width: 28px; }
    .reloge-saison .rl-citrouille--1 { width: 48px; }
    .reloge-saison .rl-citrouille--2 { left: calc(2% + 38px); width: 32px; }
    .reloge-saison .rl-citrouille--3 { width: 40px; }
}

/* Mouvements reduits demandes par l'appareil : la decoration reste, immobile. */
@media (prefers-reduced-motion: reduce) {
    .reloge-saison * { animation: none !important; }
}