/*
 * Page de l'équipe pendant Halloween : l'équipe se déguise en super-héros (2026-10-16).
 * Même principe que le mode du 1er avril de team.php, mais en version bande dessinée.
 * Chargé par team.php seulement pendant la plage d'Halloween (assets/include/habillage.php),
 * par-dessus theme-halloween.css. Les textes sont changés par assets/js/equipe-heros.js.
 */

html.tm-halloween .team-page-container {
	--heros-rouge: #e62429;
	--heros-bleu: #1f4fa3;
	--heros-or: #ffc824;
	--heros-encre: #0b0b12;
	position: relative;
	/* Trame de points façon BD, sur la nuit d'Halloween */
	background:
		radial-gradient(rgba(255, 200, 36, 0.10) 1.2px, transparent 1.3px) 0 0 / 14px 14px,
		radial-gradient(900px 400px at 50% -80px, rgba(230, 36, 41, 0.22), transparent 70%) !important;
}

/* Titres en lettrage de BD : jaune, contour noir */
html.tm-halloween .team-page-container h1,
html.tm-halloween .team-page-container h3.team {
	font-family: 'Bangers', 'Impact', sans-serif !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--heros-or) !important;
	-webkit-text-stroke: 1.5px var(--heros-encre);
	text-shadow: 3px 3px 0 var(--heros-rouge), 6px 6px 0 rgba(0, 0, 0, 0.55) !important;
}
html.tm-halloween .team-page-container h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	transform: rotate(-1.5deg);
	border-bottom: 4px solid var(--heros-rouge) !important;
}

/* Bandeau d'accroche sous le titre */
.tm-heros-bandeau {
	display: inline-block;
	margin: 0 auto 28px;
	padding: 6px 18px;
	font-family: 'Bangers', 'Impact', sans-serif;
	font-size: 1.35rem;
	letter-spacing: 2px;
	color: var(--heros-encre);
	background: var(--heros-or);
	border: 3px solid var(--heros-encre);
	box-shadow: 5px 5px 0 var(--heros-rouge);
	transform: rotate(1deg);
}

/* Chaque rôle devient une case de BD. Le HTML de team.php met des <h3> dans des <p> :
   le navigateur coupe ces <p>, donc equipe-heros.js regroupe chaque rôle dans une div. */
.tm-heros-case {
	position: relative;
	max-width: 760px;
	margin: 0 auto 26px !important;
	padding: 22px 20px 18px;
	background: rgba(14, 10, 26, 0.88);
	border: 3px solid var(--heros-encre);
	outline: 2px solid rgba(255, 200, 36, 0.55);
	outline-offset: -7px;
	box-shadow: 8px 8px 0 var(--heros-bleu);
	transition: transform .15s, box-shadow .15s;
}
.tm-heros-case:nth-of-type(even) {
	box-shadow: 8px 8px 0 var(--heros-rouge);
}
.tm-heros-case:hover {
	transform: translate(-2px, -2px);
	box-shadow: 11px 11px 0 var(--heros-or);
}
html.tm-halloween .team-page-container hr,
.tm-heros-case p:empty {
	display: none;
}

/* Le nom de code de chaque héros */
.tm-heros-alias {
	display: inline-block;
	margin: 4px 0 2px 6px;
	padding: 1px 10px;
	font-family: 'Bangers', 'Impact', sans-serif;
	font-size: 1.05rem;
	letter-spacing: 1px;
	color: #fff;
	background: var(--heros-rouge);
	border: 2px solid var(--heros-encre);
	transform: rotate(-2deg);
	cursor: help;
	vertical-align: middle;
}
.tm-heros-replique {
	display: block;
	margin: 6px auto 10px;
	max-width: 520px;
	font-style: italic;
	color: #f3eefc;
	opacity: .88;
}

/* Bulles d'onomatopée */
.tm-heros-bulle {
	position: absolute;
	z-index: 5;
	padding: 4px 12px;
	font-family: 'Bangers', 'Impact', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 2px;
	color: var(--heros-encre);
	background: var(--heros-or);
	border: 3px solid var(--heros-encre);
	border-radius: 50% 46% 52% 44% / 48% 54% 46% 52%;
	box-shadow: 4px 4px 0 var(--heros-rouge);
	pointer-events: none;
	animation: tm-heros-pop .9s ease-out forwards;
}
@keyframes tm-heros-pop {
	0% { opacity: 0; transform: scale(.3) rotate(-12deg); }
	25% { opacity: 1; transform: scale(1.15) rotate(6deg); }
	70% { opacity: 1; transform: scale(1) rotate(-3deg); }
	100% { opacity: 0; transform: scale(.9) translateY(-18px) rotate(-3deg); }
}

/* Le réacteur caché sur la case du fondateur : un simple cercle lumineux */
.tm-heros-reacteur {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 8px;
	vertical-align: middle;
	border-radius: 50%;
	border: 2px solid #9ee7ff;
	background: radial-gradient(circle, #ffffff 0 22%, #7fdcff 40%, #1c7ed6 70%, transparent 72%);
	box-shadow: 0 0 10px #5cd0ff, 0 0 20px rgba(92, 208, 255, 0.6);
	cursor: pointer;
	animation: tm-heros-pulse 2.4s ease-in-out infinite;
}
.tm-heros-reacteur:focus-visible {
	outline: 3px solid var(--heros-or);
	outline-offset: 3px;
}
@keyframes tm-heros-pulse {
	0%, 100% { box-shadow: 0 0 8px #5cd0ff, 0 0 16px rgba(92, 208, 255, 0.5); }
	50% { box-shadow: 0 0 14px #9ee7ff, 0 0 30px rgba(92, 208, 255, 0.9); }
}

@media (max-width: 639px) {
	.tm-heros-case { box-shadow: 5px 5px 0 var(--heros-bleu); }
	.tm-heros-bandeau { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tm-heros-reacteur, .tm-heros-bulle { animation: none !important; }
	html.tm-halloween .team-page-container h1 { transform: none; }
}

/* Halloween clair (2026-10-17) : cases de BD sur papier, textes du thème clair */
html.tm-hw-clair .team-page-container {
	background:
		radial-gradient(rgba(230, 36, 41, 0.10) 1.2px, transparent 1.3px) 0 0 / 14px 14px,
		radial-gradient(900px 400px at 50% -80px, rgba(255, 200, 36, 0.25), transparent 70%) !important;
}
html.tm-hw-clair .tm-heros-case {
	background: #fffdf8;
	outline-color: rgba(230, 36, 41, 0.35);
}
html.tm-hw-clair .tm-heros-replique {
	color: #3b2456;
}