/*  SMALL TRACKS 5 — HABILLAGE HALLOWEEN : « LE TRAIN FANTÔME »
 *  ------------------------------------------------------------------
 *  Pas un pêle-mêle de citrouilles et de toiles d'araignée : une seule
 *  idée, tenue du début à la fin, et qui parle aux gens d'ici — un
 *  train fantôme traverse la gare, une main sort du ballast. Le reste
 *  (lanterne, brume, chauves-souris) n'est là que pour servir cette
 *  idée-là.
 *
 *  Ambiance complète : nouvelle palette, nouvelles polices, décors
 *  animés. Tout est rangé sous « html.st5-saison-halloween », posée
 *  par st5-saisons.js : en dehors de la période (20 octobre → 3
 *  novembre), ce fichier ne change strictement rien à l'affichage.
 *
 *  Choix de lisibilité, volontaires et non négociables :
 *   - le texte des messages reste toujours très contrasté (fond
 *     sombre, texte clair chaud — jamais du orange sur du orange) ;
 *   - aucune information n'est donnée par la seule couleur (les liens
 *     restent soulignés au survol/au focus, les boutons gardent leur
 *     forme et leur texte) ;
 *   - vérifié aux normes WCAG (voir banc/contraste.py) : toutes les
 *     paires texte/fond dépassent 4.5:1, la plupart dépassent 7:1 —
 *     tenu compte de la cécité chromatique de Chris et d'un lectorat
 *     plutôt âgé. Le fantôme du train est reconnaissable à sa forme
 *     et sa transparence, jamais à une teinte qu'il faudrait deviner ;
 *   - toute animation respecte « prefers-reduced-motion ».
 *
 *  25 septembre 2026.
 */

/* ── Polices ──
   Chargées depuis <head> (voir overall_header.html) et non par @import
   ici, pour qu'elles arrivent plus vite et en parallèle du reste.
   Une seule police de caractère pour toute l'identité Halloween — une
   vieille lettre de fête foraine, chaleureuse et très lisible même en
   grand — plutôt que le classique duo « gothique + police d'horreur ». */

html.st5-saison-halloween {
	/* Couleurs — parchemin sur nuit charbon, lanterne citrouille, brume
	   spectrale ; le vert blafard du fantôme n'habille jamais de texte,
	   seulement la silhouette du train. */
	--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-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 #wrap,
html.st5-saison-halloween #page-body {
	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;
}

/* ── En-tête : le bandeau de marque, déjà sombre (encre #1C1C1E), on
   le fait juste virer à l'ambiance Halloween ── */
html.st5-saison-halloween .st5-bandeau {
	background: linear-gradient(180deg, var(--hw-panneau-clair), var(--hw-nuit)) !important;
	position: relative;
	overflow: hidden;
}

html.st5-saison-halloween .st5-titre {
	font-family: var(--hw-police-titres) !important;
	color: var(--hw-citrouille) !important;
	letter-spacing: .02em;
	text-shadow: 0 0 18px rgba(255, 138, 43, .35);
}

html.st5-saison-halloween .st5-baseline {
	color: var(--hw-texte-doux) !important;
}

html.st5-saison-halloween .st5-compte {
	color: var(--hw-texte-doux) !important;
}

/* Repli : si un jour la structure change et que .st5-bandeau
   n'existe plus, on retombe sur l'en-tête générique de phpBB. */
html.st5-saison-halloween:not(:has(.st5-bandeau)) #page-header,
html.st5-saison-halloween:not(:has(.st5-bandeau)) .headerbar {
	background: linear-gradient(180deg, var(--hw-panneau-clair), var(--hw-nuit)) !important;
	position: relative;
	overflow: hidden;
}
html.st5-saison-halloween:not(:has(.st5-bandeau)) #site-description h1,
html.st5-saison-halloween:not(:has(.st5-bandeau)) #site-description h1 a {
	font-family: var(--hw-police-titres) !important;
	color: var(--hw-citrouille) !important;
	text-shadow: 0 0 18px rgba(255, 138, 43, .35);
}

/* Toile d'araignée dans le coin du bandeau : décor discret, en CSS
   pur, comme dans une vieille remise de gare qu'on n'a pas balayée. */
html.st5-saison-halloween .st5-bandeau::before {
	content: '';
	position: absolute;
	top: -18px;
	left: 0;
	width: 90px;
	height: 90px;
	pointer-events: none;
	opacity: .3;
	background-image:
		radial-gradient(circle at 0 0, transparent 8px, var(--hw-filet) 8.5px, transparent 9px),
		radial-gradient(circle at 0 0, transparent 20px, var(--hw-filet) 20.5px, transparent 21px),
		radial-gradient(circle at 0 0, transparent 34px, var(--hw-filet) 34.5px, transparent 35px),
		radial-gradient(circle at 0 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%);
}

/* ── Le quai : une bande posée juste sous le bandeau de marque, dédiée
   au train/à la citrouille/à la main — jamais par-dessus le logo ou
   les chiffres du forum, toujours dans son propre espace. ── */
html.st5-saison-halloween .st5-hw-quai {
	position: relative;
	overflow: hidden;
	height: 72px;
	background: linear-gradient(180deg, var(--hw-nuit), var(--hw-panneau)) !important;
}
html.st5-saison-halloween .st5-hw-quai::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 8px;
	background:
		repeating-linear-gradient(90deg, var(--hw-filet) 0 6px, transparent 6px 26px) center / 100% 4px no-repeat,
		linear-gradient(var(--hw-citrouille-sombre), var(--hw-citrouille-sombre)) top / 100% 2px no-repeat,
		linear-gradient(var(--hw-citrouille-sombre), var(--hw-citrouille-sombre)) bottom / 100% 2px no-repeat;
	opacity: .85;
}
@media (max-width: 640px) {
	html.st5-saison-halloween .st5-hw-quai { height: 52px; }
}

/* ── Blocs de forum (catégories, sujets) ── */
html.st5-saison-halloween .forabg,
html.st5-saison-halloween .forumbg,
html.st5-saison-halloween .panel {
	background: var(--hw-panneau) !important;
	border: 1px solid var(--hw-filet) !important;
	box-shadow: 0 6px 18px var(--hw-ombre);
}

html.st5-saison-halloween .forabg .header,
html.st5-saison-halloween .forumbg .header {
	background: linear-gradient(180deg, var(--hw-panneau-clair), var(--hw-panneau)) !important;
	border-bottom: 1px solid var(--hw-filet) !important;
}

html.st5-saison-halloween .forabg .header dt a.forumtitle,
html.st5-saison-halloween .forumbg .header dt a.topictitle,
html.st5-saison-halloween h2 a,
html.st5-saison-halloween h3 a {
	font-family: var(--hw-police-titres) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	color: var(--hw-citrouille) !important;
}

html.st5-saison-halloween li.row,
html.st5-saison-halloween .topiclist li {
	background: transparent !important;
	border-bottom: 1px solid var(--hw-filet) !important;
	color: var(--hw-texte) !important;
}

html.st5-saison-halloween .topiclist .row:hover,
html.st5-saison-halloween li.row:hover {
	background: var(--hw-panneau-clair) !important;
}

/* ── Messages ── */
html.st5-saison-halloween .postbody,
html.st5-saison-halloween .post {
	background: var(--hw-panneau) !important;
	border-color: var(--hw-filet) !important;
	color: var(--hw-texte) !important;
}

html.st5-saison-halloween .postbody .content {
	color: var(--hw-texte) !important;
}

html.st5-saison-halloween .author,
html.st5-saison-halloween p.author {
	color: var(--hw-texte-doux) !important;
}

html.st5-saison-halloween .postprofile,
html.st5-saison-halloween dl.postprofile {
	background: var(--hw-panneau-clair) !important;
	border-color: var(--hw-filet) !important;
}

/* ── Boutons ── */
html.st5-saison-halloween input.button1,
html.st5-saison-halloween a.button1,
html.st5-saison-halloween .button1 {
	background: linear-gradient(180deg, var(--hw-citrouille), var(--hw-citrouille-sombre)) !important;
	border: 1px solid var(--hw-citrouille-sombre) !important;
	color: var(--hw-nuit) !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}
html.st5-saison-halloween input.button2,
html.st5-saison-halloween a.button2,
html.st5-saison-halloween .button2 {
	background: var(--hw-panneau-clair) !important;
	border: 1px solid var(--hw-brume) !important;
	color: var(--hw-brume) !important;
}

/* ── Pied de page ── */
html.st5-saison-halloween #page-footer,
html.st5-saison-halloween .footerbar {
	background: var(--hw-nuit) !important;
	border-top: 1px solid var(--hw-filet) !important;
	color: var(--hw-texte-doux) !important;
}
html.st5-saison-halloween #page-footer a {
	color: var(--hw-brume) !important;
}

/* ── Bannière d'accueil (posée par st5-halloween-animations.js) ── */
html.st5-saison-halloween .st5-hw-banniere {
	position: relative;
	margin: 0 0 12px;
	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 .st5-hw-banniere__titre {
	margin: 0 0 6px;
	font-family: var(--hw-police-titres);
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1.2;
	color: var(--hw-citrouille);
	text-shadow: 0 0 22px rgba(255, 138, 43, .4);
}
html.st5-saison-halloween .st5-hw-banniere__texte {
	margin: 0;
	color: var(--hw-texte-doux);
	font-family: var(--hw-police-corps);
	max-width: 62ch;
}

/* ── La lanterne qui se balance, à côté du nom du forum ── */
html.st5-saison-halloween .st5-hw-lanterne {
	display: inline-block;
	width: 26px;
	height: 30px;
	margin: 0 8px -6px 0;
	transform-origin: 50% 0%;
	animation: st5-hw-balancer 3.6s ease-in-out infinite;
	filter: drop-shadow(0 0 7px rgba(255, 138, 43, .8));
}
html.st5-saison-halloween .st5-hw-lanterne svg { width: 100%; height: 100%; display: block; }

/* ── La citrouille sculptée, posée au pied de l'en-tête ── */
html.st5-saison-halloween .st5-hw-citrouille {
	position: absolute;
	left: 18px;
	bottom: 4px;
	width: 46px;
	height: 46px;
	z-index: 4;
	transform-origin: 50% 100%;
	animation: st5-hw-vaciller-citrouille 4.4s ease-in-out infinite;
	filter: drop-shadow(0 0 10px rgba(255, 138, 43, .55));
}
html.st5-saison-halloween .st5-hw-citrouille svg { width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
	html.st5-saison-halloween .st5-hw-citrouille { width: 32px; height: 32px; left: 12px; bottom: 4px; }
}

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

@media (max-width: 640px) {
	html.st5-saison-halloween .st5-hw-fantome { width: 32px; height: 38px; top: 8px; right: 12px; }
	html.st5-saison-halloween .st5-hw-banniere { padding-right: 56px; }
}

/* ── Brume qui dérive en bas d'écran, comme une vapeur qui traîne ── */
html.st5-saison-halloween .st5-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: st5-hw-derive 50s linear infinite;
}

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

/* ── Le train fantôme, qui roule sur les rails au fond du quai ──
   Le quai a une hauteur fixe et connue (72px) : plus besoin de deviner
   la hauteur du vrai en-tête, ni de risquer de passer sur le logo. */
html.st5-saison-halloween .st5-hw-train {
	position: absolute;
	bottom: 10px;
	left: -360px;
	width: 330px;
	height: 44px;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	animation: st5-hw-rouler 52s linear infinite;
	animation-delay: 2s;
	filter: drop-shadow(0 0 12px rgba(185, 224, 201, .55)) drop-shadow(0 0 3px rgba(185, 224, 201, .45));
}
html.st5-saison-halloween .st5-hw-train svg { width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
	html.st5-saison-halloween .st5-hw-train { bottom: 8px; left: -250px; width: 225px; height: 30px; }
}

/* ── La main qui sort du ballast, au fond du quai ── */
html.st5-saison-halloween .st5-hw-main {
	position: absolute;
	right: 26px;
	bottom: -14px;
	width: 65px;
	height: 80px;
	z-index: 8;
	transform: translateY(115%);
	animation: st5-hw-surgir 1.8s cubic-bezier(.25, 1.4, .4, 1) 0.6s forwards;
	filter: drop-shadow(0 10px 14px var(--hw-ombre));
}
html.st5-saison-halloween .st5-hw-main svg { width: 100%; height: 100%; display: block; }

html.st5-saison-halloween .st5-hw-terre {
	position: absolute;
	right: 12px;
	bottom: -2px;
	width: 100px;
	height: 16px;
	z-index: 2;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent 75%);
	opacity: 0;
	animation: st5-hw-poussiere .9s ease-out 1.8s forwards;
}

@media (max-width: 640px) {
	html.st5-saison-halloween .st5-hw-main { width: 46px; height: 56px; right: 10px; bottom: -10px; }
	html.st5-saison-halloween .st5-hw-terre { width: 70px; right: 8px; }
}

/* ── Les mouvements eux-mêmes ── */
@keyframes st5-hw-balancer {
	0%, 100% { transform: rotate(-7deg); }
	50%      { transform: rotate(7deg); }
}
@keyframes st5-hw-derive {
	from { transform: translateX(0); }
	to   { transform: translateX(12%); }
}
@keyframes st5-hw-voler {
	0%   { transform: translate(0, 0) scale(1); opacity: 0; }
	4%   { opacity: .8; }
	48%  { transform: translate(58vw, -40px) scale(.8); opacity: .8; }
	54%  { opacity: 0; }
	100% { transform: translate(58vw, -40px) scale(.8); opacity: 0; }
}
@keyframes st5-hw-rouler {
	0%   { transform: translateX(0); opacity: 0; }
	3%   { opacity: .65; }
	92%  { opacity: .65; }
	100% { transform: translateX(calc(100vw + 40px)); opacity: 0; }
}
@keyframes st5-hw-surgir {
	0%   { transform: translateY(115%) rotate(-4deg); }
	65%  { transform: translateY(-6%) rotate(2deg); }
	100% { transform: translateY(0) rotate(0deg); }
}
@keyframes st5-hw-poussiere {
	0%   { opacity: 0; transform: scale(.6); }
	40%  { opacity: .8; }
	100% { opacity: 0; transform: scale(1.4); }
}
@keyframes st5-hw-vaciller-citrouille {
	0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255, 138, 43, .55)); }
	45%      { transform: scale(1.03) rotate(-1.5deg); filter: drop-shadow(0 0 15px rgba(255, 138, 43, .8)); }
	55%      { transform: scale(0.99) rotate(1deg); filter: drop-shadow(0 0 6px rgba(255, 138, 43, .4)); }
}
@keyframes st5-hw-flotter {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* ── Personne n'est obligé de regarder ça bouger ──
   La citrouille et le fantôme restent : seul leur mouvement s'arrête. */
@media (prefers-reduced-motion: reduce) {
	html.st5-saison-halloween .st5-hw-lanterne,
	html.st5-saison-halloween .st5-hw-brume,
	html.st5-saison-halloween .st5-hw-chauve,
	html.st5-saison-halloween .st5-hw-train,
	html.st5-saison-halloween .st5-hw-main,
	html.st5-saison-halloween .st5-hw-terre,
	html.st5-saison-halloween .st5-hw-citrouille,
	html.st5-saison-halloween .st5-hw-fantome {
		animation: none !important;
	}
	html.st5-saison-halloween .st5-hw-main { transform: translateY(0); }
	html.st5-saison-halloween .st5-hw-chauve,
	html.st5-saison-halloween .st5-hw-train { display: none; }
}