/* Hero Halloween 2026 : scène (hero-halloween) + texte (hh-copy).
   - La barre de statut (.status-bar-inline, absolue, noir à 40 %) se superpose au bas du hero : le fond du conteneur prend la couleur du sol
     (#04060a) sur toute la hauteur, la scène s'arrête au-dessus de la barre (--hh-bar, posée par hero.js) et s'y fond par un dégradé.
   - La scène est centrée et nette sur 1500 px max. Au-delà (grands écrans), elle se prolonge et se floute progressivement sur les côtés.
   - --hh-u (posée par hero.js) = hauteur de la scène / 463 px : les titres suivent la hauteur du hero. */
.hero.has-halloween .hero-content { visibility: hidden; }
.hero:has(.hero-halloween) .hero-content { visibility: hidden; }
.hero.has-halloween .hero-pattern { display: none; } /* la trame diagonale du hero n'a pas sa place sur la scène */

.hero-halloween {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	background: #04060a;
}
.hero-halloween .hh-scene,
.hero-halloween .hh-fx { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--hh-bar, 0px)); display: block; }
.hero-halloween .hh-dyn { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--hh-bar, 0px)); display: block; z-index: 1; }
.hero-halloween .hh-fx { z-index: 2; }
.hh-lite .hero-halloween .hh-scene { will-change: transform; transform: translateZ(0); } /* scène fixe rastérisée une seule fois */
.hero-halloween::before { /* la scène se fond dans le noir sous la barre de statut */
	content: "";
	position: absolute; left: 0; right: 0; bottom: var(--hh-bar, 0px); height: clamp(48px, 16%, 96px);
	z-index: 3; pointer-events: none;
	background: linear-gradient(180deg, rgba(4,6,10,0), #04060a 92%);
}
.hero-halloween::after { /* lisibilité du texte + vignette */
	content: "";
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 40%, transparent 62%), radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* flou dégradé sur les côtés, au-delà de 1500 px : net au centre, de plus en plus flou vers les bords */
.hh-side { display: none; }
@media (min-width: 1501px) {
	.hh-side {
		display: block; position: absolute; top: 0; bottom: var(--hh-bar, 0px); z-index: 4; pointer-events: none;
		width: calc((100% - 1500px) / 2 + 220px);
		-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	}
	.hh-side--l {
		left: 0;
		background: linear-gradient(90deg, rgba(4,6,10,.8), rgba(4,6,10,0));
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 220px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 220px), transparent 100%);
	}
	.hh-side--r {
		right: 0;
		background: linear-gradient(270deg, rgba(4,6,10,.8), rgba(4,6,10,0));
		-webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 220px), transparent 100%); mask-image: linear-gradient(270deg, #000 calc(100% - 220px), transparent 100%);
	}
}

/* Texte, aligné sur le bord gauche de la zone nette */
.hh-copy {
	position: absolute; z-index: 5;
	left: calc(max(0px, (100% - 1500px) / 2) + clamp(26px, 5.5%, 86px));
	top: 0; bottom: var(--hh-bar, 0px);
	max-width: min(720px, 60%);
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(12px * var(--hh-u, 1));
	pointer-events: none;
}
.hh-copy > * { margin: 0; animation: hh-rise .9s both; }
.hh-copy > *:nth-child(2) { animation-delay: .12s; }
.hh-copy > *:nth-child(3) { animation-delay: .24s; }
.hh-copy > *:nth-child(4) { animation-delay: .36s; }

/* Le thème stylise sans doute .hero p / span / a : on neutralise ce qui pourrait réduire ou transformer nos textes */
.hh-copy .hh-title, .hh-copy .hh-date, .hh-copy .hh-tag, .hh-copy .hh-title span, .hh-copy .hh-tag span { margin: 0 !important; padding: 0 !important; text-decoration: none; max-width: none; }

/* Titres : taille suivant la hauteur du hero, graisse renforcée par un contour (fonctionne même si la police n'a pas la graisse 900), à plat */
.hh-copy .hh-title { font: 900 min(8.4vw, calc(112px * var(--hh-u, 1)))/.9 'Playfair Display', Georgia, serif !important; text-align: left; letter-spacing: -.01em !important; text-transform: none !important; }
.hh-copy .hh-title span { font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; display: block; -webkit-text-stroke: .035em currentColor; paint-order: stroke fill; }
.hh-copy .hh-title span:first-child { color: #f6efe2; text-shadow: 0 .05em .14em rgba(0,0,0,.55); }
.hh-copy .hh-title .hl { color: #ff9a2e; text-shadow: 0 .05em .14em rgba(0,0,0,.45); animation: hh-glow 4.5s ease-in-out infinite alternate; }
.hh-copy .hh-date { font: italic 600 min(3.2vw, calc(38px * var(--hh-u, 1)))/1.1 'Playfair Display', Georgia, serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; display: flex; align-items: center; gap: 16px; -webkit-text-stroke: .02em currentColor; }
.hh-copy .hh-date::after { content: ""; height: 1px; width: calc(72px * var(--hh-u, 1)); background: rgba(255,255,255,.4); }
.hh-copy .hh-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.hh-copy .hh-tag .pre { font: 500 min(1.4vw, calc(16px * var(--hh-u, 1)))/1 'Roboto', system-ui, sans-serif !important; color: #e6dac6; letter-spacing: .3em !important; text-transform: uppercase !important; }
.hh-copy .hh-tag .dg {
	display: inline-block;
	font: italic 900 min(5vw, calc(68px * var(--hh-u, 1)))/1 'Playfair Display', Georgia, serif !important;
	letter-spacing: 0 !important; text-transform: none !important;
	color: #ffd9a0; -webkit-text-stroke: .03em currentColor; paint-order: stroke fill;
	text-shadow: 0 0 .3em rgba(255,160,50,.7), 0 0 .8em rgba(255,100,0,.35);
	transform-origin: 0 80%;
	animation: hh-wob 5s ease-in-out infinite alternate, hh-flick 6s steps(1, end) infinite;
}
.hh-copy .hh-cta {
	pointer-events: auto; margin-top: calc(8px * var(--hh-u, 1));
	display: inline-flex; align-items: center; gap: 14px;
	padding: calc(16px * var(--hh-u, 1)) calc(36px * var(--hh-u, 1));
	background: #ff9a2e; color: #1b0d02;
	font: 700 calc(15px * var(--hh-u, 1))/1 'Roboto', system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; text-decoration: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255,190,110,.5), 0 8px 28px rgba(255,120,20,.35), 0 0 36px rgba(255,138,31,.28);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.hh-copy .hh-cta:hover, .hh-copy .hh-cta:focus-visible { background: #ffb04f; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,210,150,.7), 0 12px 34px rgba(255,120,20,.5), 0 0 52px rgba(255,138,31,.45); }
.hh-copy .hh-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hh-copy .hh-copy .hh-cta span { font: inherit !important; letter-spacing: inherit !important; margin: 0 !important; transition: transform .2s ease; }
.hh-copy .hh-cta:hover span { transform: translateX(4px); }

/* Animations internes au SVG */
.hero-halloween .win { animation: hh-fl0 5s linear infinite; }
.hero-halloween .win.f1 { animation-name: hh-fl1; animation-duration: 7.3s; }
.hero-halloween .win.f2 { animation-name: hh-fl2; animation-duration: 3.9s; }
.hero-halloween .face { animation: hh-pkf 3.2s ease-in-out infinite alternate; }
.hero-halloween .spider { animation: hh-dangle 6s ease-in-out infinite alternate; }

@keyframes hh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hh-glow { from { filter: drop-shadow(0 0 10px rgba(255,138,31,.35)); } to { filter: drop-shadow(0 0 26px rgba(255,150,40,.8)); } }
@keyframes hh-wob { from { transform: rotate(-1.6deg); } to { transform: rotate(1.2deg) translateY(-2px); } }
@keyframes hh-flick { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 47% { opacity: .55; } 48% { opacity: 1; } 50% { opacity: .7; } 51% { opacity: 1; } }
@keyframes hh-fl0 { 0%, 100% { opacity: 1; } 12% { opacity: .8; } 25% { opacity: .96; } 41% { opacity: .68; } 57% { opacity: 1; } 73% { opacity: .86; } }
@keyframes hh-fl1 { 0%, 100% { opacity: .92; } 20% { opacity: 1; } 35% { opacity: .6; } 38% { opacity: 1; } 70% { opacity: .8; } }
@keyframes hh-fl2 { 0%, 100% { opacity: 1; } 30% { opacity: .78; } 33% { opacity: 1; } 60% { opacity: .88; } 80% { opacity: .7; } }
@keyframes hh-pkf { from { opacity: .78; } to { opacity: 1; } }
@keyframes hh-dangle { from { transform: translateY(-8px); } to { transform: translateY(34px); } }

/* Mode léger (mobile, appareils modestes) : moins d'animations CSS, scène plus légère */
.hh-lite .hero-halloween .win, .hh-lite .hero-halloween .face, .hh-lite .hero-halloween .spider, .hh-lite .hh-copy .hh-title .hl, .hh-lite .hh-copy .hh-tag .dg { animation: none; }
.hh-lite .hh-copy .hh-title .hl { filter: drop-shadow(0 0 14px rgba(255,138,31,.5)); }

/* Mobile : sur téléphone la barre de statut est une liste en flux sous le hero (grande hauteur). hero.js agrandit le hero (ou son bloc de contenu)
   pour que la zone de scène garde ~700 px, le texte est centré en haut sur fond uni et la scène se joue en dessous, centrée sur le manoir. */
@media (max-width: 700px) {
	.hero-halloween { background: #04060b; --hh-top: 215px; }
	.hero-halloween .hh-scene, .hero-halloween .hh-dyn { top: 0; height: calc(100% - var(--hh-bar, 0px)); }
	.hero-halloween .hh-fx { top: var(--hh-top); height: calc(100% - var(--hh-top) - var(--hh-bar, 0px));
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px); mask-image: linear-gradient(to bottom, transparent 0, #000 90px); }
	.hero-halloween::after { background: radial-gradient(120% 90% at 50% 70%, transparent 55%, rgba(0,0,0,.5) 100%); }
	.hh-copy { left: 0; right: 0; top: 0; max-width: none; justify-content: flex-start; align-items: center; text-align: center; padding: 26px 20px 0; gap: 12px; }
	.hh-copy .hh-title { font-size: min(16.4vw, 74px) !important; text-align: center; }
	.hh-copy .hh-date { font-size: min(6.6vw, 30px) !important; white-space: nowrap; justify-content: center; }
	.hh-copy .hh-date::after { display: none; }
	.hh-copy .hh-tag { gap: 6px 12px; justify-content: center; align-items: baseline; }
	.hh-copy .hh-tag .pre { font-size: 13px !important; }
	.hh-copy .hh-tag .dg { font-size: min(12.4vw, 54px) !important; }
	.hh-copy .hh-cta { padding: 16px 34px; font-size: 15px !important; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-halloween .win, .hero-halloween .face, .hero-halloween .spider, .hh-copy .hh-title .hl, .hh-copy .hh-tag .dg, .hh-copy > * { animation: none !important; }
	.hh-copy .hh-cta { transition: none; }
}