/* 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(3rem, 16%, 6rem);
	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% - 93.75rem) / 2 + 13.75rem);
		-webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
	}
	.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% - 13.75rem), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 13.75rem), 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% - 13.75rem), transparent 100%); mask-image: linear-gradient(270deg, #000 calc(100% - 13.75rem), transparent 100%);
	}
}

/* Texte, aligné sur le bord gauche de la zone nette */
.hh-copy {
	position: absolute; z-index: 5;
	left: calc(max(0px, (100% - 93.75rem) / 2) + clamp(1.625rem, 5.5%, 5.375rem));
	top: 0; bottom: var(--hh-bar, 0px);
	max-width: min(45rem, 60%);
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(0.75rem * 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 * var(--gdf-s)), calc(7rem * var(--hh-u, 1)))/.9 var(--gdf-font-display) !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 * var(--gdf-s)), calc(2.375rem * var(--hh-u, 1)))/1.1 var(--gdf-font-display) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; display: flex; align-items: center; gap: 1rem; -webkit-text-stroke: .02em currentColor; }
.hh-copy .hh-date::after { content: ""; height: 0.0625rem; width: calc(4.5rem * var(--hh-u, 1)); background: rgba(255,255,255,.4); }
.hh-copy .hh-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.hh-copy .hh-tag .pre { font: 500 min((1.4vw * var(--gdf-s)), calc(1rem * var(--hh-u, 1)))/1 var(--gdf-font-body) !important; color: #e6dac6; letter-spacing: .3em !important; text-transform: uppercase !important; }
.hh-copy .hh-tag .dg {
	display: inline-block;
	font: italic 900 min((5vw * var(--gdf-s)), calc(4.25rem * var(--hh-u, 1)))/1 var(--gdf-font-display) !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(0.5rem * var(--hh-u, 1));
	display: inline-flex; align-items: center; gap: 0.875rem;
	padding: calc(1rem * var(--hh-u, 1)) calc(2.25rem * var(--hh-u, 1));
	background: #ff9a2e; color: #1b0d02;
	font: 700 calc(0.9375rem * var(--hh-u, 1))/1 var(--gdf-font-body) !important; letter-spacing: .16em !important; text-transform: uppercase !important; text-decoration: none;
	border-radius: 0.125rem;
	box-shadow: 0 0 0 0.0625rem rgba(255,190,110,.5), 0 0.5rem 1.75rem rgba(255,120,20,.35), 0 0 2.25rem 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(-0.125rem); box-shadow: 0 0 0 0.0625rem rgba(255,210,150,.7), 0 0.75rem 2.125rem rgba(255,120,20,.5), 0 0 3.25rem rgba(255,138,31,.45); }
.hh-copy .hh-cta:focus-visible { outline: 0.125rem solid #fff; outline-offset: 0.1875rem; }
.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(0.25rem); }

/* 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(0.875rem); } to { opacity: 1; transform: none; } }
@keyframes hh-glow { from { filter: drop-shadow(0 0 0.625rem rgba(255,138,31,.35)); } to { filter: drop-shadow(0 0 1.625rem rgba(255,150,40,.8)); } }
@keyframes hh-wob { from { transform: rotate(-1.6deg); } to { transform: rotate(1.2deg) translateY(-0.125rem); } }
@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(-0.5rem); } to { transform: translateY(2.125rem); } }

/* 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 0.875rem 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: 13.4375rem; }
	.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 5.625rem); mask-image: linear-gradient(to bottom, transparent 0, #000 5.625rem); }
	.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: 1.625rem 1.25rem 0; gap: 0.75rem; }
	.hh-copy .hh-title { font-size: min((16.4vw * var(--gdf-s)), 4.625rem) !important; text-align: center; }
	.hh-copy .hh-date { font-size: min((6.6vw * var(--gdf-s)), 1.875rem) !important; white-space: nowrap; justify-content: center; }
	.hh-copy .hh-date::after { display: none; }
	.hh-copy .hh-tag { gap: 0.375rem 0.75rem; justify-content: center; align-items: baseline; }
	.hh-copy .hh-tag .pre { font-size: 0.8125rem !important; }
	.hh-copy .hh-tag .dg { font-size: min((12.4vw * var(--gdf-s)), 3.375rem) !important; }
	.hh-copy .hh-cta { padding: 1rem 2.125rem; font-size: 0.9375rem !important; margin-top: 0.5rem; }
}
@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; }
}