/*  FFSMC PRODUCTIONS — HABILLAGE HALLOWEEN : « L'ÉTABLI HANTÉ »
 *  ------------------------------------------------------------------
 *  Même esprit que le forum (un décor qui parle du métier plutôt que
 *  du pêle-mêle de citrouilles), transposé à la boutique : quelqu'un
 *  s'est installé sur l'établi du maquettiste pendant la nuit — une
 *  lampe-citrouille, une araignée qui inspecte le travail, un petit
 *  fantôme curieux.
 *
 *  Ambiance complète : nouvelle palette, nouvelles polices, décors
 *  animés. Tout est rangé sous « html.st5-saison-halloween », posée
 *  par ffsmc-saisons.js : en dehors de la période (20 octobre → 3
 *  novembre), ce fichier ne change strictement rien à l'affichage.
 *
 *  Le bandeau fixe de la boutique (logo, menu, panier — 195px de haut,
 *  toujours à l'écran même en défilant) n'est JAMAIS déplacé ni
 *  agrandi : seules ses couleurs changent. Tous les nouveaux éléments
 *  vivent dans leur propre bande, ajoutée par ffsmc-halloween-
 *  animations.js tout en haut de la zone de contenu — jamais par-
 *  dessus le logo, le menu ou le panier.
 *
 *  Choix de lisibilité, identiques à ceux du forum et non négociables :
 *   - le texte reste toujours très contrasté (fond sombre, texte clair
 *     chaud) ; aucune information n'est donnée par la seule couleur ;
 *   - vérifié aux normes WCAG (voir banc/contraste.py, mêmes paires de
 *     couleurs que le forum) — tenu compte de la cécité chromatique de
 *     Chris et d'une clientèle plutôt âgée ;
 *   - toute animation respecte « prefers-reduced-motion ».
 *
 *  26 septembre 2026.
 */

html.st5-saison-halloween {
	/* Mêmes couleurs que le forum : une seule identité « Halloween »
	   pour les deux sites, cohérente pendant toute la période. */
	--hw-nuit: #150f14;
	--hw-panneau: #211823;
	--hw-panneau-clair: #2c2030;
	--hw-filet: #4a3550;
	--hw-texte: #f1e6d8;
	--hw-texte-doux: #cdbcc4;
	--hw-citrouille: #ff8a2b;
	--hw-citrouille-sombre: #c85f10;
	--hw-brume: #b092d6;
	--hw-fantome: #b9e0c9;
	--hw-ombre: rgba(0, 0, 0, .55);
	--hw-bois-clair: #5a3d28;
	--hw-bois-sombre: #2a1a10;
	--hw-bois-rebord: #7a4a22;

	--hw-police-titres: 'Rye', Georgia, 'Times New Roman', serif;
	--hw-police-corps: 'Literata', Georgia, 'Times New Roman', serif;
}

/* ── Structure générale ── */
html.st5-saison-halloween body {
	background: var(--hw-nuit) !important;
	color: var(--hw-texte) !important;
	font-family: var(--hw-police-corps) !important;
}

html.st5-saison-halloween #wrapper,
html.st5-saison-halloween #content,
html.st5-saison-halloween .page-content {
	background: transparent !important;
}

html.st5-saison-halloween a {
	color: var(--hw-citrouille) !important;
}
html.st5-saison-halloween a:hover,
html.st5-saison-halloween a:focus {
	color: var(--hw-citrouille) !important;
	text-decoration: underline !important;
}

html.st5-saison-halloween h1,
html.st5-saison-halloween h2,
html.st5-saison-halloween h3,
html.st5-saison-halloween .h1,
html.st5-saison-halloween .h2 {
	font-family: var(--hw-police-titres) !important;
	color: var(--hw-citrouille) !important;
	text-shadow: 0 0 18px rgba(255, 138, 43, .3);
}

/* ── En-tête fixe de la boutique : uniquement les couleurs changent,
   jamais sa hauteur ni sa position (elle reste ancrée en haut de
   l'écran même en défilant — la toucher structurellement risquerait
   de désynchroniser l'espace réservé sous elle). ── */
html.st5-saison-halloween header.header {
	background: var(--hw-nuit) !important;
	box-shadow: 0 4px 22px var(--hw-ombre);
}
html.st5-saison-halloween .header-top {
	color: var(--hw-texte-doux) !important;
	border-bottom: 1px solid var(--hw-filet);
}
html.st5-saison-halloween .header-top a {
	color: var(--hw-texte-doux) !important;
}
html.st5-saison-halloween .header-bottom.ffsmc-entete {
	position: relative;
	overflow: hidden;
}
html.st5-saison-halloween .ffsmc-lockup__h1,
html.st5-saison-halloween .ffsmc-retour {
	color: var(--hw-texte) !important;
}
html.st5-saison-halloween .ps-mainmenu a,
html.st5-saison-halloween .header-block__icon,
html.st5-saison-halloween .header-block__label {
	color: var(--hw-texte) !important;
}
html.st5-saison-halloween .ps-mainmenu a:hover,
html.st5-saison-halloween .ps-mainmenu > li.active > a {
	color: var(--hw-citrouille) !important;
}
html.st5-saison-halloween .header-block__badge {
	background: var(--hw-citrouille) !important;
	color: var(--hw-nuit) !important;
}

/* Toile d'araignée dans le coin du bandeau : décor discret, en CSS
   pur — comme un atelier qu'on n'a pas dépoussiéré depuis l'été. */
html.st5-saison-halloween .header-bottom.ffsmc-entete::before {
	content: '';
	position: absolute;
	top: -22px;
	right: 8px;
	width: 80px;
	height: 80px;
	pointer-events: none;
	opacity: .22;
	background-image:
		radial-gradient(circle at 100% 0, transparent 8px, var(--hw-filet) 8.5px, transparent 9px),
		radial-gradient(circle at 100% 0, transparent 20px, var(--hw-filet) 20.5px, transparent 21px),
		radial-gradient(circle at 100% 0, transparent 34px, var(--hw-filet) 34.5px, transparent 35px),
		radial-gradient(circle at 100% 0, transparent 50px, var(--hw-filet) 50.5px, transparent 51px);
	background-repeat: no-repeat;
	-webkit-mask-image: linear-gradient(-135deg, #000 0 55%, transparent 56%);
	        mask-image: linear-gradient(-135deg, #000 0 55%, transparent 56%);
}

/* ── L'établi : la bande neuve tout en haut de la zone de contenu,
   sous le bandeau fixe — jamais par-dessus le logo, le menu ou le
   panier, toujours dans son propre espace, à hauteur connue. Du vrai
   bois et un panneau perforé à outils, pour qu'on la reconnaisse tout
   de suite comme un établi et pas comme un simple bandeau sombre. ── */
html.st5-saison-halloween .ffsmc-hw-etabli {
	position: relative;
	overflow: visible;
	height: 92px;
	margin-bottom: 10px;
	background:
		repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px),
		linear-gradient(180deg, var(--hw-bois-clair) 0%, var(--hw-bois-sombre) 100%);
	border-bottom: 6px solid var(--hw-bois-rebord);
	box-shadow: inset 0 -14px 20px rgba(0,0,0,.45), 0 8px 20px var(--hw-ombre);
}
/* panneau perforé, comme sur le mur d'un vrai atelier */
html.st5-saison-halloween .ffsmc-hw-etabli::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0; height: 48px;
	background-image: radial-gradient(circle, rgba(241,230,216,.22) 1.6px, transparent 1.8px);
	background-size: 24px 24px;
	background-position: 12px 10px;
	opacity: .55;
	pointer-events: none;
}
html.st5-saison-halloween .ffsmc-hw-etabli::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 3px;
	background: linear-gradient(var(--hw-citrouille-sombre), var(--hw-citrouille-sombre));
	opacity: .7;
}
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-etabli { height: 64px; }
	html.st5-saison-halloween .ffsmc-hw-etabli::before { height: 34px; background-size: 18px 18px; }
}

/* ── Contenu (fil d'Ariane, colonnes, fiches produit) ── */
html.st5-saison-halloween .block,
html.st5-saison-halloween .card,
html.st5-saison-halloween .thumbnail,
html.st5-saison-halloween .featured-products,
html.st5-saison-halloween .products .product-miniature {
	background: var(--hw-panneau) !important;
	border-color: var(--hw-filet) !important;
	color: var(--hw-texte) !important;
	box-shadow: 0 6px 18px var(--hw-ombre);
}
html.st5-saison-halloween .card-header,
html.st5-saison-halloween .block .h3,
html.st5-saison-halloween .block-title {
	background: linear-gradient(180deg, var(--hw-panneau-clair), var(--hw-panneau)) !important;
	border-color: var(--hw-filet) !important;
	color: var(--hw-citrouille) !important;
}
html.st5-saison-halloween .product-title,
html.st5-saison-halloween .product-title a {
	color: var(--hw-texte) !important;
}
html.st5-saison-halloween .price,
html.st5-saison-halloween .product-price {
	color: var(--hw-citrouille) !important;
}
html.st5-saison-halloween .breadcrumb {
	background: transparent !important;
	color: var(--hw-texte-doux) !important;
}
html.st5-saison-halloween .breadcrumb a {
	color: var(--hw-texte-doux) !important;
}

/* ── Boutons ── */
html.st5-saison-halloween .btn-primary,
html.st5-saison-halloween .btn.btn-primary,
html.st5-saison-halloween input[type="submit"].btn-primary {
	background: linear-gradient(180deg, var(--hw-citrouille), var(--hw-citrouille-sombre)) !important;
	border-color: var(--hw-citrouille-sombre) !important;
	color: var(--hw-nuit) !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}
html.st5-saison-halloween .btn-secondary,
html.st5-saison-halloween .btn-outline-primary {
	background: var(--hw-panneau-clair) !important;
	border-color: var(--hw-brume) !important;
	color: var(--hw-brume) !important;
}

/* ── Pied de page (déjà presque noir : on l'accorde à l'ambiance) ── */
html.st5-saison-halloween #footer,
html.st5-saison-halloween .footer {
	background: var(--hw-nuit) !important;
	border-top: 1px solid var(--hw-filet) !important;
	color: var(--hw-texte-doux) !important;
}
html.st5-saison-halloween #footer a,
html.st5-saison-halloween .footer a {
	color: var(--hw-brume) !important;
}

/* ── Bandeau d'annonce, posé juste après #main-content ── */
html.st5-saison-halloween .ffsmc-hw-banniere {
	position: relative;
	margin: 0 0 16px;
	padding: 22px 78px 22px 24px;
	background: linear-gradient(135deg, var(--hw-panneau-clair), var(--hw-panneau) 70%);
	border: 1px solid var(--hw-filet);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 24px var(--hw-ombre);
}
html.st5-saison-halloween .ffsmc-hw-banniere__titre {
	margin: 0 0 6px;
	font-family: var(--hw-police-titres);
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1.2;
	color: var(--hw-citrouille);
	text-shadow: 0 0 22px rgba(255, 138, 43, .4);
}
html.st5-saison-halloween .ffsmc-hw-banniere__texte {
	margin: 0;
	color: var(--hw-texte-doux);
	font-family: var(--hw-police-corps);
	max-width: 62ch;
}

/* ── Le petit fantôme qui flotte près de la bannière ── */
html.st5-saison-halloween .ffsmc-hw-fantome {
	position: absolute;
	top: 10px;
	right: 22px;
	width: 46px;
	height: 54px;
	z-index: 2;
	opacity: .85;
	animation: ffsmc-hw-flotter 4.8s ease-in-out infinite;
	filter: drop-shadow(0 4px 10px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-fantome svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-fantome { width: 32px; height: 38px; top: 8px; right: 12px; }
	html.st5-saison-halloween .ffsmc-hw-banniere { padding-right: 56px; }
}

/* ── La lampe-citrouille posée sur l'établi — plus grosse (pièce
   maîtresse de la scène), avec une vraie flamme qui vacille : la
   lueur varie d'intensité de façon irrégulière, comme une bougie
   réelle, et pas seulement le balancement d'ensemble. ── */
html.st5-saison-halloween .ffsmc-hw-citrouille {
	position: absolute;
	left: 12px;
	bottom: 2px;
	width: 66px;
	height: 66px;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: ffsmc-hw-vaciller-citrouille 3.2s ease-in-out infinite;
	filter: brightness(1) drop-shadow(0 0 10px rgba(255, 138, 43, .55));
}
html.st5-saison-halloween .ffsmc-hw-citrouille svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-citrouille { width: 44px; height: 44px; left: 10px; bottom: 2px; }
}

/* ── La lanterne suspendue au-dessus de l'établi, sur son cordon ── */
html.st5-saison-halloween .ffsmc-hw-cordon {
	position: absolute;
	left: 116px;
	top: -20px;
	width: 2px;
	height: 24px;
	background: var(--hw-filet);
	transform-origin: 50% 0%;
	animation: ffsmc-hw-balancer 3.6s ease-in-out infinite;
}
html.st5-saison-halloween .ffsmc-hw-lanterne {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 22px;
	height: 26px;
	filter: drop-shadow(0 0 7px rgba(255, 138, 43, .8));
}
html.st5-saison-halloween .ffsmc-hw-lanterne svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-cordon { left: 78px; }
}

/* ── L'araignée qui descend inspecter l'établi, sur son fil ──
   Posée près de la citrouille et de la lanterne (et non à l'autre
   bout de l'établi, qui peut dépasser 1200px de large sur grand
   écran) : tous les éléments forment une seule scène repérable d'un
   coup d'œil, au lieu d'être épars sur toute la largeur. ── */
html.st5-saison-halloween .ffsmc-hw-fil {
	position: absolute;
	left: 176px;
	top: -26px;
	width: 1px;
	height: 84px;
	background: var(--hw-filet);
	opacity: .8;
}
html.st5-saison-halloween .ffsmc-hw-araignee {
	position: absolute;
	top: 34px;
	left: 50%;
	transform: translateX(-50%);
	width: 26px;
	height: 24px;
	animation: ffsmc-hw-descendre 6.5s ease-in-out infinite;
	filter: drop-shadow(0 3px 5px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-araignee svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-fil { left: 130px; height: 56px; }
	html.st5-saison-halloween .ffsmc-hw-araignee { width: 20px; height: 18px; top: 26px; }
}

/* ── Les outils suspendus au panneau perforé, à côté de l'araignée :
   un établi de maquettiste digne de ce nom en a besoin de plusieurs,
   mêmes crochets que sur un vrai panneau. ── */
html.st5-saison-halloween .ffsmc-hw-pinceau {
	position: absolute;
	left: 210px;
	top: 3px;
	width: 15px;
	height: 56px;
	transform-origin: 50% 0%;
	animation: ffsmc-hw-balancer 4.2s ease-in-out infinite;
	filter: drop-shadow(0 3px 4px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-tournevis {
	position: absolute;
	left: 236px;
	top: 3px;
	width: 13px;
	height: 50px;
	transform-origin: 50% 0%;
	animation: ffsmc-hw-balancer 3.4s ease-in-out infinite reverse;
	filter: drop-shadow(0 3px 4px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-scalpel {
	position: absolute;
	left: 260px;
	top: 3px;
	width: 12px;
	height: 48px;
	transform-origin: 50% 0%;
	animation: ffsmc-hw-balancer 3.8s ease-in-out infinite;
	filter: drop-shadow(0 3px 4px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-pince {
	position: absolute;
	left: 282px;
	top: 3px;
	width: 16px;
	height: 50px;
	transform-origin: 50% 0%;
	animation: ffsmc-hw-balancer 4.6s ease-in-out infinite reverse;
	filter: drop-shadow(0 3px 4px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-marteau {
	position: absolute;
	left: 308px;
	top: 3px;
	width: 20px;
	height: 52px;
	transform-origin: 50% 0%;
	animation: ffsmc-hw-balancer 3.6s ease-in-out infinite;
	filter: drop-shadow(0 3px 4px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-pinceau svg,
html.st5-saison-halloween .ffsmc-hw-tournevis svg,
html.st5-saison-halloween .ffsmc-hw-scalpel svg,
html.st5-saison-halloween .ffsmc-hw-pince svg,
html.st5-saison-halloween .ffsmc-hw-marteau svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-pinceau { left: 166px; top: 2px; width: 11px; height: 40px; }
	html.st5-saison-halloween .ffsmc-hw-tournevis { left: 186px; top: 2px; width: 10px; height: 36px; }
	html.st5-saison-halloween .ffsmc-hw-scalpel { left: 204px; top: 2px; width: 9px; height: 34px; }
	html.st5-saison-halloween .ffsmc-hw-pince { display: none; }
	html.st5-saison-halloween .ffsmc-hw-marteau { display: none; }
}

/* ── Deux maquettes commencées puis laissées en plan sur l'établi —
   d'où la petite locataire : personne n'est venu les finir. Posées
   sur le bois, comme la citrouille, pas accrochées au panneau. ── */
html.st5-saison-halloween .ffsmc-hw-maquette-char {
	position: absolute;
	left: 350px;
	bottom: 3px;
	width: 92px;
	height: 40px;
	z-index: 3;
	opacity: .92;
	filter: drop-shadow(0 3px 5px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-maquette-avion {
	position: absolute;
	left: 452px;
	bottom: 3px;
	width: 84px;
	height: 40px;
	z-index: 3;
	opacity: .92;
	filter: drop-shadow(0 3px 5px var(--hw-ombre));
}
html.st5-saison-halloween .ffsmc-hw-maquette-char svg,
html.st5-saison-halloween .ffsmc-hw-maquette-avion svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	/* la largeur d'un mobile ne laisse pas la place pour les deux
	   maquettes à côté du reste de la scène sans la faire déborder
	   hors écran : on les retire là, le décor garde tout son sens
	   sans elles (citrouille, lanterne, araignée, trois outils). */
	html.st5-saison-halloween .ffsmc-hw-maquette-char,
	html.st5-saison-halloween .ffsmc-hw-maquette-avion { display: none; }
}

/* ── Le fantôme qui passe devant l'établi de loin en loin, en
   travers de toute sa largeur — translucide, pour qu'on devine les
   outils et les maquettes derrière lui à son passage, pas un
   aplat opaque qui les cacherait. ── */
html.st5-saison-halloween .ffsmc-hw-spectre {
	position: absolute;
	left: -90px;
	top: -8px;
	width: 78px;
	height: 92px;
	z-index: 8;
	opacity: 0;
	pointer-events: none;
	animation: ffsmc-hw-traverser-etabli 32s ease-in-out infinite;
	animation-delay: 5s;
}
html.st5-saison-halloween .ffsmc-hw-spectre svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
	html.st5-saison-halloween .ffsmc-hw-spectre { left: -56px; top: -4px; width: 50px; height: 60px; }
}

/* ── Brume qui dérive en bas d'écran ── */
html.st5-saison-halloween .ffsmc-hw-brume {
	position: fixed;
	left: -20%;
	right: -20%;
	bottom: 0;
	height: 160px;
	pointer-events: none;
	z-index: 5;
	background:
		radial-gradient(closest-side, rgba(176,146,214,.20), transparent 70%) 10% 100% / 40% 100% no-repeat,
		radial-gradient(closest-side, rgba(241,230,216,.10), transparent 70%) 55% 100% / 50% 100% no-repeat,
		radial-gradient(closest-side, rgba(176,146,214,.16), transparent 70%) 85% 100% / 35% 100% no-repeat;
	filter: blur(6px);
	animation: ffsmc-hw-derive 50s linear infinite;
}

/* ── Chauves-souris ── */
html.st5-saison-halloween .ffsmc-hw-chauve {
	position: fixed;
	top: 22%;
	left: -60px;
	width: 30px;
	height: 30px;
	pointer-events: none;
	z-index: 6;
	opacity: 0;
	animation: ffsmc-hw-voler 24s linear infinite;
}
html.st5-saison-halloween .ffsmc-hw-chauve svg { width: 100%; height: 100%; }
html.st5-saison-halloween .ffsmc-hw-chauve:nth-child(2) { top: 32%; animation-delay: 9s; animation-duration: 28s; }
html.st5-saison-halloween .ffsmc-hw-chauve:nth-child(3) { top: 16%; animation-delay: 17s; animation-duration: 21s; }

/* ── Les mouvements eux-mêmes ── */
@keyframes ffsmc-hw-balancer {
	0%, 100% { transform: rotate(-6deg); }
	50%      { transform: rotate(6deg); }
}
@keyframes ffsmc-hw-derive {
	from { transform: translateX(0); }
	to   { transform: translateX(12%); }
}
@keyframes ffsmc-hw-voler {
	0%   { transform: translate(0, 0) scale(1); opacity: 0; }
	4%   { opacity: .8; }
	48%  { transform: translate(58vw, -30px) scale(.8); opacity: .8; }
	54%  { opacity: 0; }
	100% { transform: translate(58vw, -30px) scale(.8); opacity: 0; }
}
/* Flamme de bougie : la lueur (halo + luminosité) varie de façon
   irrégulière — pas une simple respiration symétrique — pour
   ressembler à une vraie flamme qui vacille, en plus du léger
   balancement d'ensemble. */
@keyframes ffsmc-hw-vaciller-citrouille {
	0%   { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 10px rgba(255, 138, 43, .55)); }
	8%   { filter: brightness(1.08) drop-shadow(0 0 13px rgba(255, 138, 43, .7)); }
	17%  { filter: brightness(.9) drop-shadow(0 0 6px rgba(255, 138, 43, .38)); }
	29%  { transform: scale(1.02) rotate(-1deg); filter: brightness(1.14) drop-shadow(0 0 16px rgba(255, 138, 43, .8)); }
	38%  { filter: brightness(.94) drop-shadow(0 0 8px rgba(255, 138, 43, .45)); }
	50%  { transform: scale(1.03) rotate(-1.5deg); filter: brightness(1.18) drop-shadow(0 0 18px rgba(255, 138, 43, .85)); }
	61%  { filter: brightness(.88) drop-shadow(0 0 6px rgba(255, 138, 43, .36)); }
	74%  { transform: scale(0.99) rotate(1deg); filter: brightness(1.06) drop-shadow(0 0 12px rgba(255, 138, 43, .6)); }
	85%  { filter: brightness(.96) drop-shadow(0 0 8px rgba(255, 138, 43, .42)); }
	100% { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 10px rgba(255, 138, 43, .55)); }
}
@keyframes ffsmc-hw-flotter {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
@keyframes ffsmc-hw-descendre {
	0%, 100% { top: 34px; }
	50%      { top: 54px; }
}
/* Le fantôme traverse toute la largeur de l'établi, lentement, puis
   attend hors champ avant de repasser (même principe que les
   chauves-souris : un passage, une pause, pas un défilé continu). */
@keyframes ffsmc-hw-traverser-etabli {
	0%   { transform: translateX(0); opacity: 0; }
	4%   { opacity: .8; }
	46%  { transform: translateX(115vw); opacity: .65; }
	52%  { opacity: 0; }
	100% { transform: translateX(115vw); opacity: 0; }
}

/* ── Personne n'est obligé de regarder ça bouger ──
   La citrouille, la lanterne, l'araignée et le fantôme restent :
   seul leur mouvement s'arrête. Les chauves-souris, elles,
   disparaissent (mouvement large et rapide en plein écran). ── */
@media (prefers-reduced-motion: reduce) {
	html.st5-saison-halloween .ffsmc-hw-lanterne,
	html.st5-saison-halloween .ffsmc-hw-cordon,
	html.st5-saison-halloween .ffsmc-hw-brume,
	html.st5-saison-halloween .ffsmc-hw-araignee,
	html.st5-saison-halloween .ffsmc-hw-citrouille,
	html.st5-saison-halloween .ffsmc-hw-pinceau,
	html.st5-saison-halloween .ffsmc-hw-tournevis,
	html.st5-saison-halloween .ffsmc-hw-scalpel,
	html.st5-saison-halloween .ffsmc-hw-pince,
	html.st5-saison-halloween .ffsmc-hw-marteau,
	html.st5-saison-halloween .ffsmc-hw-fantome {
		animation: none !important;
	}
	html.st5-saison-halloween .ffsmc-hw-chauve,
	html.st5-saison-halloween .ffsmc-hw-spectre {
		display: none;
	}
}