/* ------------------------------------------------------------
	HALLOWEEN DRIVE (opération du 31/10)
	Chargé uniquement si index.php active la classe .hw sur <body>
	(page d'accueil, jusqu'au 31/10/2026 inclus, coupée le 01/11 à 00h00). Pour retirer
	l'opération : supprimer ce fichier, js/halloween.js et les 3 blocs
	$halloween d'index.php ENSEMBLE (définition en tête de fichier,
	<link>/<script> dans le <head>, classe de <body>).
------------------------------------------------------------ */

.hw {
	--hw-orange: #ff5a14;
	--hw-amber: #ffa31a;
	--hw-yellow: #ffe600;
}

.hw .hero_eyebrow {
	display: none !important;
}

/* ------------------------------------------------------------
	COULEURS (teal -> orange)
------------------------------------------------------------ */

.hw .btn-secondary {
	background-color: var(--hw-orange);
	border-color: var(--hw-orange);
	color: white;
}

.hw .btn-secondary:hover {
	background-color: var(--hw-yellow);
	border-color: var(--hw-yellow);
	color: black;
}

.hw .ban-macaron,
.hw .ban-macaron.double span {
	border-color: var(--hw-orange);
}

.hw .ban-macaron.double {
	border: none;
}

.hw .scroll-container .item h2,
.hw .scroll-container .item span {
	color: var(--hw-orange);
	-webkit-text-stroke-color: var(--hw-orange);
}

/* Coup de pinceau sous les titres des 4 modèles */
.hw .gauche-droite h2::after {
	content: "";
	display: block;
	width: 132px;
	height: 12px;
	margin-top: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M3 6C35 2 62 9 94 5s48 1 62-1' fill='none' stroke='%23ff5a14' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M12 11C50 9 100 12 142 9' fill='none' stroke='%23ffa31a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}

/* ------------------------------------------------------------
	PERSONNAGES PARTAGÉS : fantôme, citrouille, chauve-souris
------------------------------------------------------------ */

/* Flottement par défaut : chaque fantôme a sa durée (--hw-fd) et son décalage (--hw-fdel), posés par le JS */
.hw .hw-ghost {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	animation: hw-float var(--hw-fd, 3.4s) ease-in-out var(--hw-fdel, 0s) infinite;
	transition: translate .35s ease-out, filter .25s ease-out;
}

/* Hors écran (classe posée par le JS) : les animations sont en pause */
.hw .hw-ghost.hw-ghost--off,
.hw .hw-ghost.hw-ghost--off .hw-ghost-g,
.hw .hw-ghost.hw-ghost--off .hw-ghost-eye {
	animation-play-state: paused;
}

/* Le drap ondule doucement, à son propre rythme (se combine avec le flottement de l'ensemble).
   Souris uniquement : animer un élément à l'intérieur d'un SVG se fait sur le processeur à chaque image,
   trop lourd sur mobile (iOS) quand la page défile en même temps. */
.hw .hw-ghost-g {
	transform-origin: 50px 6px;
}

@media (hover: hover) {
	.hw .hw-ghost-g {
		animation: hw-wobble 4.7s ease-in-out infinite alternate;
	}
}

/* Fantôme éclairé par la lanterne : il sursaute (échelle / rotation), recule (--fx / --fy) et s'illumine.
   Propriétés individuelles scale / rotate / translate : elles s'ajoutent au flottement (transform) sans l'interrompre. */
.hw .hw-ghost.hw-spotted {
	animation: hw-float var(--hw-fd, 3.4s) ease-in-out var(--hw-fdel, 0s) infinite, hw-startle .55s ease-out;
	translate: calc(var(--fx, 0) * 1px) calc(var(--fy, 0) * 1px);
	filter: drop-shadow(0 0 10px rgba(255, 236, 150, .95)) drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}

.hw .hw-ghost.hw-spotted .hw-ghost-eye {
	animation: none;
	transform: scale(1.45);
}

.hw .hw-ghost.hw-spotted .hw-ghost-mouth {
	transform: scale(1.5, 1.9);
}

.hw .hw-ghost-body {
	fill: var(--hw-gf, none);
	stroke: var(--hw-gs, #fff);
	stroke-width: 5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.hw .hw-ghost-eye,
.hw .hw-ghost-mouth {
	fill: var(--hw-ge, #fff);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .15s ease-out;
}

/* Le visage suit le curseur (--ex / --ey, en unités du SVG, posées par le JS) */
.hw .hw-ghost-face {
	transform: translate(calc(var(--ex, 0) * 1px), calc(var(--ey, 0) * 1px));
	transition: transform .12s ease-out;
}

.hw .hw-ghost-eye {
	animation: hw-blink 4.5s infinite;
}

.hw .hw-pumpkin {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.hw .hw-pumpkin-face {
	fill: #ffd23a;
	animation: hw-flicker 1.8s infinite;
}

.hw .hw-bat svg {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--hw-orange);
	transform-origin: center;
}

@keyframes hw-blink {

	0%,
	92%,
	100% {
		transform: scaleY(1);
	}

	95% {
		transform: scaleY(.1);
	}
}

/* Dérive lente : montée, léger balancement gauche / droite. Les % sont relatifs au fantôme (valable à toute taille) */
@keyframes hw-float {

	0%,
	100% {
		transform: translate(0, 0) rotate(-2deg);
	}

	30% {
		transform: translate(2.5%, -4.5%) rotate(1deg);
	}

	55% {
		transform: translate(0, -8%) rotate(2.5deg);
	}

	80% {
		transform: translate(-2.5%, -3.5%) rotate(-1deg);
	}
}

@keyframes hw-wobble {
	from {
		transform: skewX(-2.5deg) scaleY(1);
	}

	to {
		transform: skewX(2.5deg) scaleY(1.03);
	}
}

@keyframes hw-startle {
	0% {
		scale: 1;
		rotate: 0deg;
	}

	25% {
		scale: .9 1.2;
		rotate: -7deg;
	}

	50% {
		scale: 1.14 .9;
		rotate: 6deg;
	}

	75% {
		scale: 1.04;
		rotate: -2deg;
	}

	100% {
		scale: 1;
		rotate: 0deg;
	}
}

@keyframes hw-flicker {

	0%,
	100% {
		opacity: 1;
	}

	18% {
		opacity: .78;
	}

	24% {
		opacity: 1;
	}

	61% {
		opacity: .88;
	}

	66% {
		opacity: 1;
	}
}

@keyframes hw-flap {
	from {
		transform: scaleY(1);
	}

	to {
		transform: scaleY(.5);
	}
}

/* ------------------------------------------------------------
	SURVOL DES IMAGES MODÈLES
------------------------------------------------------------ */

.hw .hw-host img {
	transition: transform .6s ease, filter .6s ease;
}

.hw .hw-host:is(:hover, .hw-on) img {
	transform: scale(1.05);
	filter: saturate(1.2) contrast(1.08) brightness(.93);
}

.hw .hw-fx {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	--dir: 1;
}

.hw .hw-fx--rev {
	--dir: -1;
}

.hw .hw-fx-glow {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(ellipse at 50% 60%, transparent 45%, rgba(60, 15, 0, .45) 100%);
	box-shadow: inset 0 0 90px 10px rgba(255, 90, 20, .65);
}

.hw .hw-host:is(:hover, .hw-on) .hw-fx-glow {
	opacity: 1;
	animation: hw-glow 1.4s ease-in-out infinite alternate;
}

@keyframes hw-glow-soft {
	from {
		opacity: .65;
	}

	to {
		opacity: 1;
	}
}

@keyframes hw-glow {
	from {
		filter: brightness(.9);
	}

	to {
		filter: brightness(1.25);
	}
}

/* Fantôme qui surgit */
.hw .hw-pop {
	position: absolute;
	top: 6%;
	left: 6%;
	width: 108px;
	opacity: 0;
	transform: translateY(30px) scale(.4) rotate(-12deg);
	transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
	--hw-gf: rgba(255, 255, 255, .12);
	--hw-gs: #fff;
	--hw-ge: #fff;
}

.hw .hw-fx--rev .hw-pop {
	left: auto;
	right: 6%;
}

.hw .hw-host:is(:hover, .hw-on) .hw-pop {
	opacity: 1;
	transform: none;
}

/* Citrouille qui fait peur */
.hw .hw-scare {
	position: absolute;
	bottom: -5%;
	left: 2%;
	width: 150px;
	opacity: 0;
	transform: translateY(70%) scale(.4) rotate(-14deg);
	transform-origin: 50% 100%;
	transition: opacity .2s ease .1s, transform .55s cubic-bezier(.34, 1.7, .5, 1) .15s;
	filter: drop-shadow(0 0 22px rgba(255, 150, 20, .9));
}

.hw .hw-fx--rev .hw-scare {
	left: auto;
	right: 2%;
}

.hw .hw-host:is(:hover, .hw-on) .hw-scare {
	opacity: 1;
	transform: none;
}

.hw .hw-host:is(:hover, .hw-on) .hw-scare .hw-pumpkin {
	animation: hw-shake .5s ease-in-out .75s 2;
	transform-origin: 50% 100%;
}

@keyframes hw-shake {

	0%,
	100% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(-7deg) scale(1.06);
	}

	75% {
		transform: rotate(7deg) scale(1.06);
	}
}

.hw .hw-boo {
	position: absolute;
	bottom: 36%;
	left: 13%;
	padding: 10px 22px;
	background: var(--hw-yellow);
	color: #000;
	font: 700 26px/1 'Agrandir wide', sans-serif;
	text-transform: uppercase;
	border: 1px dashed var(--hw-orange);
	border-radius: 3px;
	opacity: 0;
	transform: scale(0) rotate(-14deg);
	transform-origin: 0 100%;
	transition: opacity .15s ease .45s, transform .4s cubic-bezier(.34, 1.8, .5, 1) .45s;
}

.hw .hw-fx--rev .hw-boo {
	left: auto;
	right: 13%;
	transform-origin: 100% 100%;
}

.hw .hw-host:is(:hover, .hw-on) .hw-boo {
	opacity: 1;
	transform: rotate(-8deg);
}

/* Chauves-souris (5, de tailles différentes) */
.hw .hw-bat {
	position: absolute;
	bottom: 14%;
	left: 4%;
	width: 110px;
	opacity: 0;
	--tx: 460px;
	--ty: -280px;
}

.hw .hw-fx--rev .hw-bat {
	left: auto;
	right: 4%;
}

.hw .hw-bat--2 {
	bottom: 30%;
	width: 80px;
	--tx: 520px;
	--ty: -190px;
}

.hw .hw-bat--3 {
	bottom: 6%;
	width: 62px;
	--tx: 340px;
	--ty: -330px;
}

.hw .hw-bat--4 {
	bottom: 22%;
	width: 96px;
	--tx: 400px;
	--ty: -330px;
}

.hw .hw-bat--5 {
	bottom: 40%;
	width: 48px;
	--tx: 560px;
	--ty: -140px;
}

.hw .hw-host:is(:hover, .hw-on) .hw-bat {
	animation: hw-fly 3s ease-out both;
}

.hw .hw-host:is(:hover, .hw-on) .hw-bat--2 {
	animation-delay: .12s;
}

.hw .hw-host:is(:hover, .hw-on) .hw-bat--3 {
	animation-delay: .25s;
}

.hw .hw-host:is(:hover, .hw-on) .hw-bat--4 {
	animation-delay: .4s;
}

.hw .hw-host:is(:hover, .hw-on) .hw-bat--5 {
	animation-delay: .55s;
}

.hw .hw-host:is(:hover, .hw-on) .hw-bat svg {
	animation: hw-flap .26s ease-in-out infinite alternate;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}

@keyframes hw-fly {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(.4) rotate(0);
	}

	12% {
		opacity: 1;
	}

	50% {
		opacity: 1;
		transform: translate(calc(var(--dir) * var(--tx) * .5), calc(var(--ty) * .3 - 50px)) scale(.9) rotate(calc(var(--dir) * -10deg));
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(calc(var(--dir) * var(--tx)), var(--ty)) scale(1.2) rotate(calc(var(--dir) * 14deg));
	}
}

/* Pas de survol (mobile) : l'ambiance des images est toujours là (lueur orange, teinte, fantôme, citrouille, chauves-souris) */
@media (hover: none) {

	.hw .hw-host img {
		transform: scale(1.05);
		filter: saturate(1.2) contrast(1.08) brightness(.93);
	}

	/* la lueur pulse par son opacité (compositeur) : un filtre animé en continu coûterait trop cher sur mobile */
	.hw .hw-fx-glow {
		opacity: 1;
		animation: hw-glow-soft 2.4s ease-in-out infinite alternate;
	}

	/* Tailles en % de l'image (le bloc .hw-fx a la taille de l'image) : les décors suivent sa largeur, avec des bornes en px */
	.hw .hw-pop {
		opacity: 1;
		transform: none;
		width: clamp(84px, 28%, 125px);
		left: auto;
		right: 6%;
	}

	/* du côté opposé à la citrouille, pour qu'ils ne se recouvrent pas */
	.hw .hw-fx--rev .hw-pop {
		left: 6%;
		right: auto;
	}

	/* la citrouille est posée sur le bord bas de l'image */
	.hw .hw-scare {
		opacity: 1;
		transform: none;
		width: clamp(100px, 34%, 170px);
		top: auto;
		bottom: 0;
	}

	.hw .hw-boo {
		display: none;
	}

	.hw .hw-bat--1 {
		width: clamp(84px, 26%, 140px);
		animation: hw-fly 6s ease-out 1s infinite both;
	}

	.hw .hw-bat--2 {
		width: clamp(60px, 19%, 100px);
		animation: hw-fly 7s ease-out 3s infinite both;
	}

	.hw .hw-bat svg {
		animation: hw-flap .26s ease-in-out infinite alternate;
	}
}

/* ------------------------------------------------------------
	BANDEAU DÉFILANT (piloté par le scroll) : un fantôme discret,
	légèrement flou et translucide
------------------------------------------------------------ */

/* Le texte défilant (déplacé par un handler jQuery sur scroll, voir index.php) : on ne le laisse animer que transform
   et on le garde sur son propre calque. Sans cela, `transition: all` + 9 mots de 150 px à contour de 5 px
   sont redessinés par Safari iOS à chaque évènement de scroll. */
.hw .scroll-content {
	will-change: transform;
	transition: transform .15s linear;
}

/* Navigateurs avec la propriété `translate` (iOS 14.1+) : js/halloween.js déplace lui-même le texte, lissé image par image.
   Le transform inline posé par le handler du site est neutralisé, et plus aucune transition ne se relance à chaque évènement. */
.hw .hw-textscroll .scroll-content {
	transform: none !important;
	transition: none;
	will-change: translate;
}

.hw .hw-scroll-ghost {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100px;
	margin-top: -49px;
	z-index: 2;
	pointer-events: none;
	will-change: transform;
	/* le JS pose la position à chaque évènement de scroll (espacés sur iOS) : la transition les relie sans à-coup,
	   avec la même durée que le texte défilant (.scroll-content, front_end.css) pour qu'ils restent synchronisés */
	transition: transform .15s linear;
	opacity: 1;
	/* filter: blur(1.5px); */
	--hw-gf: #fff;
	--hw-gs: var(--hw-orange);
	--hw-ge: #1c1c1c;
}

/* ------------------------------------------------------------
	HEADER : BANDEAU + TOILE + ARAIGNÉE
------------------------------------------------------------ */

.hw .hw-band,
.hw .hw-band:hover,
.hw .hw-band:focus {
	color: #fff;
	text-decoration: none;
}

.hw .hw-band {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	/* fond nuit : le logo Halloween Drive (lettres blanches + DRIVE orange) n'est lisible que sur fond sombre */
	background: radial-gradient(at 50% 120%, rgb(255 90 20 / 67%), rgba(255, 90, 20, 0) 60%), linear-gradient(90deg, rgb(18, 10, 12), rgb(35, 16, 8) 50%, rgb(18, 10, 12));
	border-bottom: 2px solid var(--hw-orange);
	box-shadow: 0 6px 20px rgba(255, 90, 20, .3);
	font: 700 15px/1 'Agrandir wide', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .3s ease, transform .3s ease;
	padding: 0;
}

/* Le logo reste entièrement dans le bandeau (marge de 6 px en haut et en bas) */
.hw .hw-band-logo {
	display: block;
	flex: 0 0 auto;
	height: 88px;
	width: auto;
	filter: drop-shadow(0 0 12px rgba(255, 90, 20, .35));
}

.hw .hw-band b {
	color: var(--hw-yellow);
	font-size: 1.15em;
}

.hw .hw-band-ghost {
	width: 26px;
	flex: 0 0 auto;
	--hw-gs: #fff;
	--hw-ge: #fff;
}

.hw .hw-band-ghost .hw-ghost-body {
	stroke-width: 8;
}

.hw .hw-band-pumpkin {
	width: 32px;
	flex: 0 0 auto;
	filter: drop-shadow(0 0 6px rgba(255, 220, 80, .7));
}

.hw .hw-band .hw-band-cta {
	display: inline-block;
	padding: 10px 18px;
	background: var(--hw-yellow);
	color: #000;
	font-size: 12px;
	letter-spacing: .06em;
	border-radius: 3px;
	transform: skewX(-10deg);
	box-shadow: 0 0 0 0 rgba(255, 230, 0, .8);
	animation: hw-pulse 2s ease-out infinite;
}

.hw .hw-band:hover .hw-band-cta {
	background: #fff;
}

@keyframes hw-pulse {
	70% {
		box-shadow: 0 0 0 12px rgba(255, 230, 0, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 230, 0, 0);
	}
}

/* Menu déroulant (mobile / tablette) ouvert : le bandeau s'efface pour ne pas le recouvrir */
.hw .hw-band--away,
.hw .hw-band--menu {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

.hw .hw-web {
	position: absolute;
	top: 0;
	right: 0;
	width: 190px;
	height: auto;
	pointer-events: none;
	fill: none;
	stroke: rgba(255, 255, 255, .92);
	stroke-width: 1.4;
	stroke-linecap: round;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
}

.hw .hw-spider {
	position: absolute;
	top: 0;
	right: 112px;
	width: 40px;
	height: 75px;
	pointer-events: none;
	transform-origin: 50% 0;
	animation: hw-dangle 3.8s ease-in-out infinite;
	fill: rgba(255, 255, 255, .15);
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

@keyframes hw-dangle {

	0%,
	100% {
		transform: rotate(-5deg) translateY(0);
	}

	50% {
		transform: rotate(5deg) translateY(10px);
	}
}

.hw .hw-cta-short {
	display: none;
}

@media (max-width: 1199px) {
	.hw .hw-band-more {
		display: none;
	}

	.hw .hw-web {
		width: 130px;
	}

	.hw .hw-spider {
		right: 76px;
		width: 30px;
		height: 56px;
	}
}

@media (max-width: 767px) {
	.hw .hw-band {
		height: 78px;
		font-size: 11px;
		gap: 8px;
		justify-content: flex-start;
		padding-left: 10px;
	}

	.hw .hw-band-logo {
		height: 66px;
	}

	.hw .hw-band-ghost,
	.hw .hw-band-pumpkin {
		display: none;
	}

	.hw .hw-band .hw-band-cta {
		padding: 8px 10px;
		position: absolute;
		right: 16px;
		font-size: 10px;
	}

	.hw .hw-web {
		width: 90px;
	}

	.hw .hw-spider {
		right: 50px;
		width: 24px;
		height: 45px;
	}
}

@media (max-width: 480px) {
	.hw .hw-band {
		height: 72px;
		letter-spacing: .04em;
		font-size: 10px;
	}

	.hw .hw-band-logo {
		height: 60px;
	}

	.hw .hw-le,
	.hw .hw-cta-long {
		display: none;
	}

	.hw .hw-cta-short {
		display: inline;
	}

	.hw .hw-web {
		width: 66px;
	}

	.hw .hw-spider {
		right: 36px;
		width: 20px;
		height: 37px;
	}
}

/* ------------------------------------------------------------
	FOOTER : CIMETIÈRE DE LA FAMILLE
------------------------------------------------------------ */

.hw .hw-foot {
	position: relative;
	height: 270px;
	overflow: hidden;
	background: linear-gradient(#000 0%, #1a0a10 30%, #7a2e0c 88%, #9a3d0e 100%);
	text-align: center;
}

.hw .hw-foot-stars {
	position: absolute;
	top: 18px;
	left: 0;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 90px 40px #fff, 210px 14px #ffe9a8, 340px 66px #fff, 470px 22px #fff, 620px 10px #ffe9a8, 760px 58px #fff, 880px 24px #fff, 1010px 70px #ffe9a8, 1130px 16px #fff, 1260px 48px #fff, 1400px 12px #ffe9a8, 1540px 60px #fff, 1700px 26px #fff;
	animation: hw-twinkle 3.4s ease-in-out infinite alternate;
}

@keyframes hw-twinkle {
	from {
		opacity: .45;
	}

	to {
		opacity: 1;
	}
}

.hw .hw-foot-moon {
	position: absolute;
	top: 24px;
	right: 9%;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff7cf, #ffe27a 55%, #ffc23a);
	box-shadow: 0 0 60px 14px rgba(255, 200, 60, .35);
}

.hw .hw-fbat {
	position: absolute;
	top: 40px;
	left: -90px;
	width: 56px;
	z-index: 1;
	animation: hw-cross 17s linear infinite;
}

.hw .hw-fbat i {
	display: block;
	animation: hw-bob 2.4s ease-in-out infinite;
}

.hw .hw-fbat svg {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--hw-orange);
	animation: hw-flap .26s ease-in-out infinite alternate;
}

.hw .hw-fbat--2 {
	top: 96px;
	width: 38px;
	animation-duration: 23s;
	animation-delay: -9s;
}

.hw .hw-fbat--3 {
	top: 20px;
	width: 74px;
	animation-duration: 29s;
	animation-delay: -18s;
}

@keyframes hw-cross {
	to {
		transform: translateX(calc(100vw + 180px));
	}
}

@keyframes hw-bob {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(22px);
	}
}

/* Fantôme qui sort de derrière le sol quand le footer apparaît */
.hw .hw-foot-ghost {
	position: absolute;
	left: 62%;
	bottom: 24px;
	width: 84px;
	z-index: 2;
	transform: translateY(105%);
	transition: transform 1.1s cubic-bezier(.34, 1.4, .5, 1) .3s;
	--hw-gf: rgba(255, 255, 255, .12);
	--hw-gs: #fff;
	--hw-ge: #fff;
	filter: drop-shadow(0 0 14px rgba(255, 255, 255, .35));
}

.hw .hw-foot--in .hw-foot-ghost {
	transform: translateY(-8px);
}

.hw .hw-foot-ground {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	display: block;
	z-index: 3;
	fill: #0b0b0b;
}

.hw .hw-foot-ground text {
	fill: #5c5c5c;
	font: 700 11px 'Agrandir wide', sans-serif;
	text-anchor: middle;
}

.hw .hw-foot-ground .hw-foot-tree {
	fill: none;
	stroke: #0b0b0b;
	stroke-width: 5;
	stroke-linecap: round;
}

.hw .hw-foot-pumpkin {
	position: absolute;
	bottom: 8px;
	width: 92px;
	z-index: 4;
	filter: drop-shadow(0 0 16px rgba(255, 150, 20, .85));
}

.hw .hw-foot-pumpkin--1 {
	left: 19%;
}

.hw .hw-foot-pumpkin--2 {
	left: 26.5%;
	width: 62px;
	bottom: 6px;
}

.hw .hw-foot-pumpkin--3 {
	right: 26%;
	width: 70px;
	bottom: 6px;
}

.hw .hw-foot-pumpkin--4 {
	right: 1.5%;
	width: 110px;
}

.hw .hw-foot-msg {
	position: absolute;
	top: 36px;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 0 16px;
	color: #fff;
}

.hw .hw-foot-title {
	display: block;
	margin: 0 0 8px;
	font: 700 32px/1.1 'Agrandir wide', sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.hw .hw-foot-title b {
	color: var(--hw-orange);
}

.hw .hw-foot-text {
	display: block;
	margin: 0 0 16px;
	font: 400 14px/20px 'Agrandir wide', sans-serif;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.hw .hw-foot-msg a.hw-foot-cta,
.hw .hw-foot-msg a.hw-foot-cta:hover {
	display: inline-block;
	padding: 12px 22px;
	background: var(--hw-yellow);
	color: #000;
	font: 700 13px/1 'Agrandir wide', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	transform: skewX(-10deg);
	transition: background .2s ease;
}

.hw .hw-foot-msg a.hw-foot-cta:hover {
	background: var(--hw-orange);
	color: #fff;
}

@media (max-width: 767px) {
	.hw .hw-foot {
		height: 300px;
	}

	.hw .hw-foot-title {
		font-size: 21px;
	}

	.hw .hw-foot-text {
		font-size: 12px;
		line-height: 17px;
	}

	.hw .hw-foot-moon {
		width: 40px;
		height: 40px;
		right: 4%;
		top: 6px;
	}

	.hw .hw-foot-ground {
		width: 160%;
		left: -30%;
	}

	.hw .hw-foot-ghost {
		width: 68px;
		left: 56%;
	}

	.hw .hw-foot-pumpkin--1 {
		width: 70px;
		left: 3%;
	}

	.hw .hw-foot-pumpkin--2 {
		display: none;
	}

	.hw .hw-foot-pumpkin--3 {
		width: 54px;
		right: 20%;
	}

	.hw .hw-foot-pumpkin--4 {
		width: 80px;
		right: 3%;
	}
}

/* ------------------------------------------------------------
	BLOC D'INTRODUCTION : section.halloween_introduction (HTML saisi dans le CMS)
	Reprend la charte du site : Agrandir wide, forme inclinée à -10° aux coins arrondis, bordure en pointillés,
	macaron jaune, bouton .btn-secondary (orange sous .hw), pinceau sous le titre. Fond « nuit » comme le bandeau du header.
	Le fantôme et les citrouilles sont ajoutés par js/halloween.js (flottement, yeux, réaction à la lanterne).
	Le HTML porte l'attribut hidden : sans .hw (opération terminée), le bloc reste caché sans rien d'autre à faire.
	Les marges de paragraphes sont en !important : main#content p (sélecteur à identifiant) serait sinon plus fort.
------------------------------------------------------------ */

.hw .halloween_introduction {
	display: block;
	position: relative;
	max-width: 1170px;
	margin: 80px auto 72px;
	padding: 0 clamp(16px, 6vw, 72px);
}

.hw .halloween_introduction__card {
	position: relative;
	isolation: isolate;
	/* marge gauche élargie : le bord incliné recule de ~70 px en bas et avance d'autant en haut, le texte doit rester dedans */
	padding: 56px 64px 60px 130px;
	color: #fff;
}

/* le fond est incliné, pas le texte (même effet que .slider-text, sans contre-inclinaison de chaque ligne) */
.hw .halloween_introduction__card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: radial-gradient(ellipse at 92% 100%, rgba(255, 90, 20, .32), rgba(255, 90, 20, 0) 55%), linear-gradient(135deg, #120a0c, #231008 55%, #120a0c);
	border: 1px dashed var(--hw-orange);
	border-radius: 0 80px 80px 0;
	box-shadow: 0 0 80px 10px rgba(255, 90, 20, .2);
	transform: skewX(-10deg);
}

.hw .halloween_introduction__card > :not(.hw-intro-deco) {
	max-width: 680px;
}

/* macaron de la date */
.hw .halloween_introduction__date {
	margin: 0 0 24px !important;
}

.hw .halloween_introduction__date > span {
	display: inline-block;
	padding: 8px 22px;
	background: var(--hw-yellow);
	border: 1px dashed var(--hw-orange);
	border-radius: 3px;
	color: #000;
	font: 700 16px/24px 'Agrandir wide', sans-serif;
	text-transform: uppercase;
	transform: skewX(-10deg);
}

.hw .halloween_introduction__date > span > span {
	display: inline-block;
	transform: skewX(10deg);
}

.hw .halloween_introduction__title {
	margin: 0 0 28px;
	font: 800 clamp(26px, 3.4vw, 40px)/1.15 'Agrandir wide', sans-serif;
	color: #fff;
}

.hw .halloween_introduction__title span {
	color: var(--hw-yellow);
}

/* même coup de pinceau que sous les titres des modèles */
.hw .halloween_introduction__title::after {
	content: "";
	display: block;
	width: 132px;
	height: 12px;
	margin-top: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M3 6C35 2 62 9 94 5s48 1 62-1' fill='none' stroke='%23ff5a14' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M12 11C50 9 100 12 142 9' fill='none' stroke='%23ffa31a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.hw .halloween_introduction__text,
.hw .halloween_introduction__lead,
.hw .halloween_introduction__outro {
	margin: 0 0 20px !important;
	font: 400 16px/26px 'Agrandir wide', sans-serif;
}

.hw .halloween_introduction__text strong{
	color: var(--hw-yellow);
}

.hw .halloween_introduction__lead {
	margin-top: 28px !important;
	color: var(--hw-yellow);
	font-weight: 700;
	text-transform: uppercase;
}

/* programme : une « étiquette » par animation, avec une citrouille comme puce */
.hw .halloween_introduction__list {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.hw .halloween_introduction__list li {
	position: relative;
	margin: 0 0 10px;
	padding: 12px 20px 12px 62px;
	background: rgba(255, 255, 255, .06);
	border-left: 3px solid var(--hw-orange);
	border-radius: 0 22px 22px 0;
	font: 400 16px/24px 'Agrandir wide', sans-serif;
}

.hw .halloween_introduction__list li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 30px;
	height: 28px;
	margin-top: -14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 112'%3E%3Cellipse cx='38' cy='66' rx='28' ry='38' fill='%23e8480c'/%3E%3Cellipse cx='82' cy='66' rx='28' ry='38' fill='%23e8480c'/%3E%3Cellipse cx='60' cy='64' rx='30' ry='42' fill='%23ff6a13'/%3E%3Cpath d='M57 26Q56 10 70 6L72 14Q64 16 64 26Z' fill='%233f7a2a'/%3E%3Cg fill='%23ffd23a'%3E%3Cpath d='M36 50L54 58L41 69Z'/%3E%3Cpath d='M84 50L66 58L79 69Z'/%3E%3Cpath d='M60 66L54 77H66Z'/%3E%3Cpath d='M30 82Q60 106 90 82L83 86L78 79L72 90L66 81L60 92L54 81L48 90L42 79L37 86Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.hw .halloween_introduction__list strong {
	color: var(--hw-yellow);
	font-weight: 700;
}

.hw .halloween_introduction__outro {
	font-weight: 700;
}

.hw .halloween_introduction__cta {
	margin: 28px 0 0 !important;
}

.hw .halloween_introduction__cta .btn {
	margin: 0;
}

/* décors injectés par le JS : le fantôme émerge du bord haut, les citrouilles reposent sur le bord bas */
.hw .hw-intro-deco {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

.hw .hw-intro-ghost {
	position: absolute;
	top: -52px;
	right: 12%;
	width: 120px;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
	--hw-gf: rgba(255, 255, 255, .12);
	--hw-gs: #fff;
	--hw-ge: #fff;
}

.hw .hw-intro-pumpkin {
	position: absolute;
	right: 6%;
	bottom: -22px;
	width: 140px;
	filter: drop-shadow(0 0 22px rgba(255, 150, 20, .85));
}

.hw .hw-intro-pumpkin--2 {
	right: 17%;
	bottom: -16px;
	width: 84px;
}

@media (max-width: 991px) {
	.hw .halloween_introduction__card {
		padding: 44px 40px 52px 100px;
	}

	.hw .hw-intro-ghost {
		right: 6%;
		width: 96px;
		top: -44px;
	}

	.hw .hw-intro-pumpkin {
		width: 110px;
	}

	.hw .hw-intro-pumpkin--2 {
		display: none;
	}
}

@media (max-width: 767px) {
	.hw .halloween_introduction {
		margin: 72px auto 64px;
		padding: 0 16px;
	}

	.hw .halloween_introduction__card {
		padding: 40px 22px 56px;
	}

	/* pas d'inclinaison sur petit écran : le fond occupe toute la largeur disponible */
	.hw .halloween_introduction__card::before {
		border-radius: 0 40px 40px 0;
		transform: none;
	}

	.hw .halloween_introduction__date > span {
		font-size: 13px;
		line-height: 20px;
		padding: 6px 14px;
	}

	.hw .halloween_introduction__text,
	.hw .halloween_introduction__lead,
	.hw .halloween_introduction__outro,
	.hw .halloween_introduction__list li {
		font-size: 14px;
		line-height: 22px;
	}

	.hw .halloween_introduction__list li {
		padding: 10px 14px 10px 48px;
	}

	.hw .halloween_introduction__list li::before {
		left: 12px;
		width: 24px;
		height: 22px;
		margin-top: -11px;
	}

	.hw .hw-intro-ghost {
		width: 80px;
		top: -40px;
		right: 8%;
	}

	.hw .hw-intro-pumpkin {
		width: 84px;
		right: 5%;
		bottom: -18px;
	}

	.hw .halloween_introduction__cta .btn {
		font-size: 16px;
		line-height: 22px;
	}
}

/* ------------------------------------------------------------
	CARTES « QUELQUES EXEMPLES DE MODÈLES » (liste .type_12) : apparition d'un petit fantôme
	Le JS ajoute dans chaque .cc_vignette un calque .hw-card-fx (fantôme + lueur orange au bas de l'image).
	Souris : il surgit au survol de la carte. Sans survol (mobile) : une fois, quand la carte entre dans l'écran
	(classe hw-card--in), il apparaît puis s'efface. Que des transitions / animations d'opacité et de transform.
------------------------------------------------------------ */

.hw .hw-card .cc_vignette {
	position: relative;
	overflow: hidden;
}

/* Le site (modules.css, .type_12 .block_article:hover) fait passer l'image à opacity .6 au survol : elle laisse alors voir
   le fond bleu-vert #4cbdc5 de la vignette, d'où un voile bleuâtre. Sous .hw, l'image garde toute son opacité
   (l'inclinaison et le zoom du site, eux, sont conservés). */
.hw .type_12 .block_article:hover .cc_vignette img {
	opacity: 1;
}

.hw .hw-card-fx {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

/* halo orange sur les bords de l'image, centre dégagé et sans aucun voile : l'image garde ses couleurs */
.hw .hw-card-fx::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: inset 0 0 56px 6px rgba(255, 90, 20, .7);
	opacity: 0;
	transition: opacity .5s ease;
}

.hw .hw-card-ghost {
	position: absolute;
	left: 6%;
	bottom: 4%;
	width: clamp(56px, 22%, 96px);
	opacity: 0;
	transform: translateY(60%) scale(.5) rotate(-10deg);
	transform-origin: 50% 100%;
	transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
	--hw-gf: rgba(255, 255, 255, .14);
	--hw-gs: #fff;
	--hw-ge: #fff;
}

.hw .hw-card-fx--r .hw-card-ghost {
	left: auto;
	right: 6%;
	transform: translateY(60%) scale(.5) rotate(10deg);
}

/* le flottement du fantôme ne tourne que lorsqu'il est visible */
.hw .hw-card-ghost .hw-ghost,
.hw .hw-card-ghost .hw-ghost-g,
.hw .hw-card-ghost .hw-ghost-eye {
	animation-play-state: paused;
}

.hw .hw-card:hover .hw-card-fx::before {
	opacity: 1;
}

.hw .hw-card:hover .hw-card-ghost {
	opacity: 1;
	transform: none;
}

.hw .hw-card:hover .hw-card-ghost .hw-ghost,
.hw .hw-card:hover .hw-card-ghost .hw-ghost-g,
.hw .hw-card:hover .hw-card-ghost .hw-ghost-eye {
	animation-play-state: running;
}

@media (hover: none) {
	.hw .hw-card--in .hw-card-fx::before {
		animation: hw-card-glow 5s ease-in-out .4s both;
	}

	.hw .hw-card--in .hw-card-ghost {
		animation: hw-card-appear 5s ease-out .5s both;
	}

	.hw .hw-card--in .hw-card-ghost .hw-ghost,
	.hw .hw-card--in .hw-card-ghost .hw-ghost-g,
	.hw .hw-card--in .hw-card-ghost .hw-ghost-eye {
		animation-play-state: running;
	}
}

/* surgit, reste un moment, repart */
@keyframes hw-card-appear {
	0% {
		opacity: 0;
		transform: translateY(60%) scale(.5) rotate(-10deg);
	}

	12%,
	80% {
		opacity: 1;
		transform: none;
	}

	100% {
		opacity: 0;
		transform: translateY(40%) scale(.7);
	}
}

@keyframes hw-card-glow {

	0%,
	100% {
		opacity: 0;
	}

	15%,
	75% {
		opacity: 1;
	}
}

/* ------------------------------------------------------------
	IMAGE DU FORMULAIRE : au survol de .image_formulaire, l'image (img.img-responsive) cède la place à
	img/construct/formulaire-squelette.jpg, en fondu. HTML du CMS : le conteneur ne doit entourer que l'image
	(le calque a la taille du conteneur, donc de l'image qui le remplit).
	Sans survol (mobile / tablette) : les deux images alternent d'elles-mêmes, en boucle.
------------------------------------------------------------ */

.hw .image_formulaire {
	position: relative;
	overflow: hidden;
}

.hw .image_formulaire img.img-responsive {
	display: block;
	width: 100%;
	height: auto;
}

.hw .image_formulaire::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url("../img/construct/formulaire-squelette.jpg") center / cover no-repeat;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
	bottom: -8px;
}

.hw .image_formulaire:hover::after {
	opacity: 1;
}

@media (hover: none) {
	.hw .image_formulaire::after {
		animation: hw-squelette 8s ease-in-out infinite;
	}
}

/* 3 s sur l'image du CMS, fondu, 3 s sur les squelettes, fondu retour */
@keyframes hw-squelette {

	0%,
	38% {
		opacity: 0;
	}

	50%,
	88% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* ------------------------------------------------------------
	LANTERNE : la souris éclaire un masque sombre
	(créée par js/halloween.js, uniquement avec une vraie souris ; interrupteur FEATURES.lantern)
------------------------------------------------------------ */

.hw .hw-lantern {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 8000;
	pointer-events: none;
	--lx: 50vw;
	--ly: 40vh;
	--lr: 180px;
	--hw-night: 8, 3, 18;
	/* teinte de la nuit (r, g, b) : violet très sombre plutôt que noir plat */
	/* nuit qui tombe progressivement (courbe en douceur, sans anneau visible) ; opacité max .9 */
	background: radial-gradient(circle at var(--lx) var(--ly),
			rgba(var(--hw-night), 0) 0,
			rgba(var(--hw-night), 0) calc(var(--lr) * .42),
			rgba(var(--hw-night), .1) calc(var(--lr) * .62),
			rgba(var(--hw-night), .3) calc(var(--lr) * .82),
			rgba(var(--hw-night), .55) calc(var(--lr) * 1.02),
			rgba(var(--hw-night), .77) calc(var(--lr) * 1.3),
			rgba(var(--hw-night), .9) calc(var(--lr) * 1.7));
}

/* Lueur de la flamme : dessinée une seule fois (640 px), puis seulement déplacée et agrandie (transform),
   et elle vacille en continu sans rien redessiner (transform + opacité = compositeur seul) */
.hw .hw-lantern-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 640px;
	height: 640px;
	margin: -320px 0 0 -320px;
	z-index: 8000;
	pointer-events: none;
	--lx: 50vw;
	--ly: 40vh;
	--ls: 1.2;
	transform: translate3d(var(--lx), var(--ly), 0) scale(var(--ls));
	will-change: transform;
}

.hw .hw-lantern-glow::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 196, 96, .3) 0, rgba(255, 160, 56, .17) 18%, rgba(255, 122, 30, .07) 42%, rgba(255, 122, 30, 0) 70%);
	animation: hw-flame 3.1s ease-in-out infinite;
}

/* Vacillement irrégulier (pas une simple pulsation) */
@keyframes hw-flame {

	0%,
	100% {
		opacity: .85;
		transform: scale(1);
	}

	14% {
		opacity: 1;
		transform: scale(1.035);
	}

	29% {
		opacity: .74;
		transform: scale(.97);
	}

	46% {
		opacity: .96;
		transform: scale(1.02);
	}

	63% {
		opacity: .8;
		transform: scale(.985);
	}

	81% {
		opacity: 1;
		transform: scale(1.045);
	}
}

/* Curseur en forme de lanterne (flamme = point d'appui) ; les liens et champs gardent leur curseur d'origine */
.hw-lantern-on,
.hw-lantern-on body {
	/* même dessin que le bouton (lanterne vitrée, flamme), cerné de blanc pour rester lisible sur fond clair comme sur fond sombre */
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23fff' stroke='%23fff' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 8.4C12 3.2 20 3.2 20 8.4' fill='none'/%3E%3Cpath d='M8.8 11.8L11.4 8.2h9.2l2.6 3.6z'/%3E%3Cpath d='M10.2 11.5h11.6c1.2 4.3 1.7 8.6 1.9 13H8.3c.2-4.4.7-8.7 1.9-13z'/%3E%3Cpath d='M7.6 24.4h16.8l-1 3.4H8.6z'/%3E%3C/g%3E%3Cpath d='M10.2 11.5h11.6c1.2 4.3 1.7 8.6 1.9 13H8.3c.2-4.4.7-8.7 1.9-13z' fill='%23ffa526'/%3E%3Cpath d='M13.6 11.5l-.7 13M18.4 11.5l.7 13' fill='none' stroke='%232b1a0e' stroke-width='1.1'/%3E%3Cpath d='M12 8.4C12 3.2 20 3.2 20 8.4' fill='none' stroke='%232b1a0e' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M8.8 11.8L11.4 8.2h9.2l2.6 3.6z' fill='%232b1a0e'/%3E%3Cpath d='M7.6 24.4h16.8l-1 3.4H8.6z' fill='%232b1a0e'/%3E%3Cpath d='M16 13.6c2.7 2.9 3.3 5.6 0 8.6c-3.3-3-2.7-5.7 0-8.6z' fill='%23fff3b0'/%3E%3Cpath d='M16 17.2c1.1 1.3 1.3 2.5 0 3.8c-1.3-1.3-1.1-2.5 0-3.8z' fill='%23fff'/%3E%3C/svg%3E") 16 18, auto;
}

.hw .hw-lantern-toggle {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 8001;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 12px;
	border: 2px solid var(--hw-orange);
	border-radius: 999px;
	background: #1a0f08;
	color: #fff;
	font: 700 13px/1 'Agrandir wide', sans-serif;
	letter-spacing: .04em;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hw .hw-lantern-toggle:hover {
	background: #2b180c;
}

/* Allumée : le bouton prend la couleur de la flamme */
html.hw-lantern-on .hw .hw-lantern-toggle {
	border-color: var(--hw-amber);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 18px rgba(255, 163, 26, .45);
}

/* Lanterne éteinte (état par défaut) : le bouton fait signe quelques fois, puis se tait */
html:not(.hw-lantern-on) .hw .hw-lantern-toggle {
	animation: hw-toggle-hint 2.8s ease-out 1.5s 4;
}

@keyframes hw-toggle-hint {
	0% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 90, 20, .7);
	}

	70%,
	100% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 14px rgba(255, 90, 20, 0);
	}
}

.hw .hw-lantern-toggle:focus-visible {
	outline: 2px solid var(--hw-yellow);
	outline-offset: 2px;
}

.hw .hw-lantern-toggle svg {
	width: 38px;
	height: 38px;
	flex: none;
	overflow: visible;
}

/* Lanterne éteinte : vitre et flamme ternes. Allumée : vitre ambrée, flamme qui vacille, lueur. */
.hw .hw-ico-glass {
	fill-opacity: .3;
	transition: fill-opacity .25s ease;
}

.hw .hw-ico-flame,
.hw .hw-ico-glow {
	opacity: .15;
	transition: opacity .25s ease;
	transform-box: fill-box;
	transform-origin: 50% 90%;
}

html.hw-lantern-on .hw .hw-ico-glass {
	fill-opacity: .9;
}

html.hw-lantern-on .hw .hw-ico-flame,
html.hw-lantern-on .hw .hw-ico-glow {
	opacity: 1;
}

html.hw-lantern-on .hw .hw-ico-flame {
	animation: hw-ico-flicker 1.7s ease-in-out infinite;
}

@keyframes hw-ico-flicker {

	0%,
	100% {
		transform: scale(1);
	}

	20% {
		transform: scale(1.07, 1.12);
	}

	45% {
		transform: scale(.94, .9);
	}

	70% {
		transform: scale(1.04, 1.07);
	}
}

/* Le bandeau de cookies (mention légale) et le bouton « haut de page » restent éclairés, au-dessus du masque */
.hw #cookie_bottom_bar,
.hw #a_scrolltotop {
	z-index: 8002;
}

@media print {

	.hw .hw-lantern,
	.hw .hw-lantern-glow,
	.hw .hw-lantern-toggle {
		display: none;
	}
}

/* ------------------------------------------------------------
	ACCESSIBILITÉ : pas d'animation si demandé par le visiteur
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.hw .hw-ghost,
	.hw .hw-ghost.hw-spotted,
	.hw .hw-ghost-g,
	.hw .hw-ghost-eye,
	.hw .hw-bat,
	.hw .hw-bat svg,
	.hw .hw-spider,
	.hw .hw-pop .hw-ghost,
	.hw .hw-pumpkin,
	.hw .hw-pumpkin-face,
	.hw .hw-fx-glow,
	.hw .hw-band .hw-band-cta,
	.hw .hw-fbat,
	.hw .hw-fbat i,
	.hw .hw-fbat svg,
	.hw .hw-foot-stars,
	.hw .image_formulaire::after,
	.hw .hw-card--in .hw-card-fx::before,
	.hw .hw-card--in .hw-card-ghost,
	.hw .hw-lantern-glow::before,
	.hw .hw-lantern-toggle,
	html.hw-lantern-on .hw .hw-ico-flame {
		animation: none !important;
	}

	/* fantôme éclairé : il ne recule plus, il s'illumine seulement (yeux et bouche s'agrandissent) */
	.hw .hw-ghost.hw-spotted {
		translate: none !important;
	}

	.hw .hw-host img,
	.hw .hw-fx-glow,
	.hw .hw-pop,
	.hw .hw-scare,
	.hw .hw-boo,
	.hw .hw-band,
	.hw .hw-foot-ghost,
	.hw .hw-card-ghost,
	.hw .hw-card-fx::before,
	.hw .hw-ghost-face {
		transition: none !important;
	}

	.hw .hw-fbat {
		display: none;
	}
}