/* === Polices custom === */
@font-face {
	font-family: 'Block Berthold';
	src: url('/fonts/BlockBerthold.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Motel California';
	src: url('/fonts/MotelCalifornia.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Acrom';
	src: url('/fonts/Acrom-Regular.ttf') format('truetype');
	font-weight: 400;
}
@font-face {
	font-family: 'Acrom';
	src: url('/fonts/Acrom-Bold.ttf') format('truetype');
	font-weight: 700;
}

/* === Reset minimal === */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Acrom', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--brossard-blanc);
	background-color: #11217D;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; }

:root {
	--brossard-rouge: #FF1812;
	--brossard-rouge-fonce: #A31C14;
	--brossard-bleu: #11217D;
	--brossard-bleu-fonce: #000A4B;
	--brossard-bleu-medium: #222863;
	--brossard-blanc: #FFFFFF;
	--brossard-noir: #1A1A1A;
	--bp-mobile: 800px;
}

/* === Layout commun === */
#page {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--brossard-blanc);
	overflow-x: clip;
	width: 100%;
	max-width: 100vw;
}
#content {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* =====================================================
   HEADER (forme avec creux pour le logo)
===================================================== */
.site-header {
	position: relative;
	height: 132px;
	z-index: 20;
	flex-shrink: 0;
}
.site-header__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	z-index: 0;
}
.site-header__svg--mobile {
	display: none;
	background-image: url('/img/header-shape-mobile.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.site-header__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 18px 60px 0;
	z-index: 2;
}
.site-header__nav {
	display: flex;
	align-items: center;
	gap: 46px;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;
	min-height: 44px;
}
.site-header__nav a { color: var(--brossard-blanc); transition: opacity .2s; }
.site-header__nav a:hover { opacity: 0.85; }

.site-header__audio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	transition: transform .15s;
}
.site-header__audio:hover { transform: scale(1.08); }
.site-header__audio img { display: block; width: 30px; height: auto; }
.site-header__audio.is-playing img { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.15); }
}

.site-header__logo {
	position: absolute;
	left: 50%;
	top: 19px;
	transform: translateX(-50%);
	z-index: 3;
}
.site-header__logo img {
	width: 200px;
	height: auto;
	display: block;
}

/* Tampon "Participe au challenge" — PNG unique exporté du Figma */
.site-header__stamp {
	position: absolute;
	left: calc(50% + 128px);
	top: 14px;
	width: 167px;
	height: 114px;
	z-index: 4;
	transition: transform .2s ease;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.site-header__stamp:hover { transform: scale(1.05); }
.site-header__stamp img {
	display: block;
	width: 100%;
	height: 100%;
}

.site-header__burger {
	display: none;
	width: 36px;
	height: 28px;
	flex-direction: column;
	justify-content: space-between;
	align-self: center;
	z-index: 3;
}
.site-header__burger span {
	display: block;
	height: 4px;
	background: var(--brossard-blanc);
	border-radius: 2px;
}

@media (max-width: 800px) {
	.site-header { height: 115px; }
	.site-header__svg--desktop { display: none; }
	.site-header__svg--mobile { display: block; }
	.site-header__inner { padding: 14px 16px 0; }
	.site-header__nav--right { display: none; }
	.site-header__nav--left { gap: 12px; min-height: 0; }
	.site-header__nav--left a { display: none; }
	.site-header__audio { width: auto; height: auto; margin-left: 2px; margin-top: 9px; }
	.site-header__audio img { width: 26px; height: auto; }
	.site-header__burger {
		display: flex;
		width: 26px;
		height: 18px;
		align-self: flex-start;
		margin-top: 22px;
	}
	.site-header__burger span { height: 3px; }
	.site-header__logo { top: 14px; }
	.site-header__stamp { display: none; }
}

/* =====================================================
   FOOTER
===================================================== */
.site-footer {
	position: relative;
	background: var(--brossard-rouge);
	color: var(--brossard-blanc);
	padding: 70px 40px 24px;
	margin-top: 0;
	z-index: 10;
	flex-shrink: 0;
	overflow-x: clip;
}
.site-footer__curve {
	background-image: url('/img/footer-top-shape.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100px;
	position: absolute;
	top: -42px;
	left: 0;
	transform: rotate(180deg);
	width: 100%;
	z-index: 0;
	pointer-events: none;
}
.site-footer__inner {
	position: relative;
	margin: 0 auto;
	display: flex;
	gap: 40px;
	align-items: start;
	justify-content: center;
	z-index: 2;
}
.site-footer__col--brand {
	margin-right: 40px;	
}
.site-footer__menu--col1 {
	max-width: 200px;
}
.site-footer__brand {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--brossard-blanc);
	margin-bottom: 24px;
}
.site-footer__brand-text {
	font-family: 'Motel California', 'Acrom', cursive;
	font-size: 28px;
	letter-spacing: 0;
	text-transform: lowercase;
	line-height: 1;
}
.site-footer__brand-arrow {
	width: 18px;
	height: 18px;
	display: inline-block;
	flex-shrink: 0;
}
.site-footer__socials {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}
.site-footer__socials a {
	display: inline-block;
	width: 52px;
	transition: transform .15s;
}
.site-footer__socials a:hover { transform: scale(1.08); }
.site-footer__socials a img,
.site-footer__socials a svg {
	width: 100%;
	height: 100%;
	display: block;
}
.site-footer__menu li { margin-bottom: 13px; font-size: 14px;  font-weight: 600; letter-spacing: -0.04em; line-height: 1.5;}
.site-footer__menu li:last-child { margin-bottom: 10px; }
.site-footer__menu a:hover { text-decoration: underline; }

/* Bande mention santé séparée */
.site-health {
	background-color: var(--brossard-rouge-fonce);
	color: var(--brossard-blanc);
	padding: 20px 15px;
	text-align: center;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;
}
.site-health__message {
	margin: 0;
	text-transform: uppercase;
}
.site-health__message a {
	color: var(--brossard-blanc);
	text-decoration: underline;
}
@media (max-width: 800px) {
	.site-health { font-size: 13px; padding: 16px 12px; }
}

/* Décors footer (à cheval) */
.site-footer__decor {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
}
.site-footer__decor img { width: 100%; height: auto; display: block; }
.site-footer__decor--pepite-grosse {
	left: 4%;
	top: -25%;
	width: 86px;
}
.site-footer__decor--noisette {
	left: 72%;
	top: -34px;
	width: 59px;
	transform: rotate(-50deg);
}
.site-footer__decor--pepite-petite {
	left: 84%;
	top: -56px;
	width: 100px;
	transform: rotate(151deg);
}

/* Pépite extra preview : mobile uniquement (cachée en desktop) */
.preview__decor--pepite-extra { display: none; }

@media (max-width: 800px) {
	.site-footer { padding: 60px 20px 22px; }
	.site-footer__inner {
		flex-wrap: wrap;
		gap: 16px 18px;
		align-items: flex-start;
	}
	.site-footer__col--brand {
		margin-right: 0;
		flex: 0 0 100%;
		width: 100%;
	}
	.site-footer__menu--col1,
	.site-footer__menu--col2 {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}
	.site-footer__menu li {
		font-size: 12px;
		margin-bottom: 10px;
	}
	.site-footer__brand-text { font-size: 19px; }
	.site-footer__socials { gap: 4px; }
	.site-footer__socials a { width: 44px; }
	.site-footer__decor--pepite-grosse  { left: 9%;  top: -39px; width: 70px; transform: rotate(-61deg) scaleX(-1) scaleY(-1); }
	.site-footer__decor--noisette       { display: none; }
	.site-footer__decor--pepite-petite  { left: 70%; top: -36px; width: 90px; transform: rotate(255deg) scaleX(-1) scaleY(-1); }
	.site-footer__curve { height: 60px; top: -28px; }
}

/* =====================================================
   PAGE PREVIEW
===================================================== */
body.preview #page,
body.termine #page {
	background-color: var(--brossard-bleu);
	background-image: url('/img/bg-party-desktop-cut.png');
	background-position: center top;
	background-size: 140% auto;
	background-repeat: no-repeat;
}

.preview {
	position: relative;
	width: 100%;
	flex: 1;
	color: var(--brossard-blanc);
	padding: 0;
	overflow-x: clip;
}

/* Décor flottants */
.preview__decor {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}
.preview__decor img { display: block; width: 100%; height: auto; }

/* Brownie carré à GAUCHE — ancré au bord gauche du viewport avec une marge
   "négative" pour conserver l'offset original quel que soit le viewport
   (sinon, sur écran large, l'image dérive vers l'intérieur de la page). */
.preview__decor--brownie-gauche {
	top: 280px;
	left: calc(50% - 50vw);
	width: 340px;
	z-index: 3;
}
/* Override position spécifique à la page challenge-danse :
   décalé de 68px en plus pour rester partiellement hors-viewport. */
body.challenge-danse .preview__decor--brownie-gauche {
	top: -82px;
	left: calc(50% - 50vw - 68px);
}
/* Twist gâteau long à DROITE — plus gros */
.preview__decor--brownie-droite {
	top: 224px;
	right: -11%;
	width: 30%;
	z-index: 3;
}
/* Noisette à droite du perso */
.preview__decor--noisette {
	top: 176px;
	left: 48px;
	opacity: 0.95;
	width: 70px;
	transform: rotate(20deg);
	z-index: 4;
}
/* Pépite grosse à GAUCHE-BAS */
.preview__decor--pepite-grosse {
	top: 480px;
	left: 26%;
	width: 50px;
	transform: rotate(20deg);
}
/* Pépite petite (éclat de chocolat) à droite */
.preview__decor--pepite-petite {
	top: 178px;
	right: 7%;
	width: 60px;
}

/* Hero centre */
.preview__hero {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 60px 24px 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	z-index: 4;
}
.preview__brand-block {
	position: relative;
	width: 720px;
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
	min-height: 320px;
	margin-bottom: -10px;
}
.preview__label {
	width: 357px;
	flex: 0 0 auto;
	z-index: 1;
	margin-right: -30px;
}
/* Perso brownie : flip horizontal pour qu'il regarde vers le label */
.preview__perso {
	width: 280px;
	flex: 0 0 auto;
	filter: drop-shadow(4px 8px 6px rgba(34, 40, 99, 0.5));
	z-index: 2;
	transform: scaleX(-1);
}
.preview__title {
	margin: 0;
}
.preview__title img {
	width: 720px;
	max-width: 90vw;
	height: auto;
	display: block;
	margin: 0 auto;
}
.preview__rdv {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 28px;
	color: var(--brossard-blanc);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.preview__cta {
	display: inline-block;
	margin-top: 8px;
	padding: 18px 40px;
	min-width: 320px;
	background: var(--brossard-rouge);
	color: var(--brossard-blanc);
	border-radius: 999px;
	text-transform: uppercase;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.5px;
	box-shadow: 4px 5px 0 var(--brossard-bleu-fonce);
	transition: transform .15s, box-shadow .15s;
}
.preview__cta:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 7px 0 var(--brossard-bleu-fonce);
}
.preview__cta:active {
	transform: translate(2px, 3px);
	box-shadow: 1px 2px 0 var(--brossard-bleu-fonce);
}

@media (max-width: 800px) {
	body.preview #page,
	body.termine #page {
		background-image: url('/img/bg-party-mobile.png');
		background-size: 700px auto;
		background-position: center 40px;
	}

	body.preview #content,
	body.termine #content {
		padding-bottom: 100px;
	}
	
	.preview { margin-top: 0; }
	.preview__hero {
		padding: 19px 18px 220px;
		gap: 5px;
	}
	.preview__brand-block {
		width: 100%;
		flex-direction: column;
		gap: 0;
		min-height: 220px;
		margin-bottom: 0;
	}
	.preview__label {
		width: 274px;
		max-width: 90%;
		margin: 0 auto;
	}
	.preview__perso {
		display: none;
	}
	.preview__title img { width: 100%; max-width: 320px; }
	.preview__rdv { font-size: 19px; margin-top: 10px; }
	.preview__cta { font-size: 22px; min-width: 240px; padding: 12px 22px; }

	/* Brownie carré GROS au centre-bas du hero (sous le CTA) */
	.preview__decor--brownie-gauche {
		top: auto;
		bottom: -65px;
		left: -21px;
		width: 258px;
		z-index: 3;
	}
	/* Twist gâteau caché en mobile (Figma ne le montre pas) */
	.preview__decor--brownie-droite { display: none; }
	/* Noisette à droite, près du brownie central */
	.preview__decor--noisette {
		top: auto;
		bottom: 110px;
		left: auto;
		right: 14%;
		width: 56px;
		transform: rotate(-191deg) scaleX(-1);
		z-index: 4;
	}
	/* Pépite extra preview mobile : juste sous la noisette, dans .preview */
	.preview__decor--pepite-extra {
		display: block;
		top: auto;
		bottom: -14px;
		left: auto;
		right: 31%;
		width: 41px;
		transform: rotate(-0deg);
		z-index: 6;
	}
	/* Pépite grosse — masquée en mobile */
	.preview__decor--pepite-grosse { display: none; }
	/* Pépite petite — masquée en mobile (pas visible Figma) */
	.preview__decor--pepite-petite { display: none; }
}

/* =====================================================
   PAGE HOME
===================================================== */
body.home #page {
	background-color: var(--brossard-bleu);
	background-image: url('/img/bg-party-desktop-cut.png');
	/* Boule disco toujours à cheval sur la courbe de la vidéo :
	   .home-top fait max(820px, 100vh) avec margin-top: -132px,
	   donc sa courbe se trouve à max(820px, 100vh) - 132. On décale
	   le bg de -138px pour caler la boule sur cette courbe. */
	background-position: center calc(max(820px, 100vh) - 270px);
	background-size: 170% auto;
	background-repeat: no-repeat;
}
.home {
	position: relative;
	width: 100%;
	color: var(--brossard-blanc);
}

/* Hero TOP "Monte le son" */
.home-top {
	position: relative;
	/* Desktop : au moins 100vh, mais au minimum 820px pour garantir
	   que tout le texte overlay (jusqu'à la mention sous le CTA) tienne
	   dans la zone arrondie même sur viewport court */
	min-height: max(820px, 100vh);
	background: var(--brossard-bleu-medium);
	margin-top: -132px; /* la photo passe sous le header */
	padding-top: 132px;
	overflow: hidden;
	z-index: 6; /* au-dessus de .home-mascotte pour cacher la boule disco par l'arc */
	/* Arrondi convexe identique au Figma : portion d'un énorme cercle
	   (Figma : ellipse 6323x6322 ≈ rayon 3161 sur un hero de 1440 → ~220vw).
	   On positionne le centre largement au-dessus du hero pour que seule
	   l'arc inférieure dépasse, créant une courbe très douce.
	   Les valeurs sont cappées aux équivalents 1440px : au-delà, l'écart
	   radius/offset (10vw) atteindrait >190px et ferait remonter l'arc
	   au-dessus du contenu sur écrans panoramiques courts. */
	clip-path: circle(min(210vw, 3024px) at 50% calc(100% - min(220vw, 3168px)));
}
.home-top__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.home-top__bg img,
.home-top__bg video,
.home-top__bg-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0.55;
	display: block;
	transform: translateY(53px);
}
@media (max-width: 800px) {
	.home-top__bg img,
	.home-top__bg video,
	.home-top__bg-media {
		transform: translateY(-20px);
	}
}
.home-top__inner {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
	padding: 108px 24px 60px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
.home-top__title,
.home-top__subtitle {
	margin: 0;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.1;
	font-weight: 400;
	-webkit-text-stroke: 17px var(--brossard-bleu-fonce);
	paint-order: stroke fill;
	text-shadow:
		-4px -4px 0 var(--brossard-bleu-fonce),
		 4px -4px 0 var(--brossard-bleu-fonce),
		-4px  4px 0 var(--brossard-bleu-fonce),
		 4px  4px 0 var(--brossard-bleu-fonce),
		 0   -4px 0 var(--brossard-bleu-fonce),
		 0    4px 0 var(--brossard-bleu-fonce),
		-4px  0   0 var(--brossard-bleu-fonce),
		 4px  0   0 var(--brossard-bleu-fonce);
}
.home-top__title { font-size: 58px; }
.home-top__subtitle { font-size: 39px; }
.home-top__icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: -6px;
	cursor: pointer;
}
.home-top__title { cursor: pointer; }
/* Quand le son est actif : on masque le CTA "Monte le son" + sous-titre + pictos.
   visibility: hidden en plus d'opacity car iOS Safari ignore l'opacity sur du texte
   combinant -webkit-text-stroke + text-shadow lourd (rendu compositing bugué). */
.home-top.is-sound-on .home-top__title,
.home-top.is-sound-on .home-top__subtitle,
.home-top.is-sound-on .home-top__icons {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.home-top__title,
.home-top__subtitle,
.home-top__icons {
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.home-top__icon-arrow {
	width: 63px;
	height: auto;
	filter: brightness(0) invert(1) drop-shadow(0 3px 4px rgba(0,0,0,0.3));
	transform: rotate(-40deg);
}
.home-top__icon-speaker {
	width: 67px;
	height: auto;
	filter: brightness(0) invert(1) drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.home-top__marquee {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	padding: 8px 0;
}
.home-top__marquee-track {
	display: inline-flex;
	gap: 30px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--brossard-blanc);
	white-space: nowrap;
	animation: marquee 30s linear infinite;
}
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.home-top__legal {
	position: relative;
	font-size: 11px;
	margin: 0;
	opacity: 0.85;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/* Décorations autour de "*J'adore ça" : pépite à gauche, noisette à droite */
.home-top__legal-deco {
	position: absolute;
	pointer-events: none;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.home-top__legal-deco img { display: block; width: 100%; height: auto; }
.home-top__legal-deco--left {
	left: 50%;
	margin-left: -90px;
	top: -10px;
	width: 42px;
	transform: rotate(90deg);
}
.home-top__legal-deco--right {
	left: 50%;
	margin-left: 50px;
	top: -4px;
	width: 30px;
	transform: rotate(-97deg);
}
/* Décors cachés sur desktop, visibles uniquement sur mobile */
@media (min-width: 801px) {
	.home-top__legal-deco { display: none; }
	.steps-numbered__play-mobile { display: none !important; }
}

/* CTA réutilisable */
.home-cta,
.cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 38px;
	min-width: 248px;
	background: var(--brossard-rouge);
	color: var(--brossard-blanc);
	border-radius: 999px;
	text-transform: uppercase;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 0.5px;
	box-shadow: 4px 5px 0 var(--brossard-bleu-fonce);
	transition: transform .15s, box-shadow .15s;
	line-height: 1;
}
.home-cta:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 7px 0 var(--brossard-bleu-fonce);
}
.home-cta:active {
	transform: translate(2px, 3px);
	box-shadow: 1px 2px 0 var(--brossard-bleu-fonce);
}

.home-cta {
	padding: 22px 38px;
	margin-top: 20px;
}

/* Mascotte LABEL + PERSO */
.home-mascotte {
	position: relative;
	z-index: 1;
	margin-top: -120px;
}
.home-mascotte__inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	min-height: 440px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 60px;
}
.home-mascotte__label {
	width: 360px;
	max-width: 42%;
	z-index: 1;
}
.home-mascotte__perso {
	width: 290px;
	max-width: 38%;
	z-index: 2;
	filter: drop-shadow(4px 8px 6px rgba(34, 40, 99, 0.5));
}

/* Éclats de chocolat / noisettes flottants autour du brownie */
.home-mascotte__deco {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 8px 10px rgba(0,0,0,0.35));
}
.home-mascotte__deco img { width: 100%; height: auto; display: block; }
.home-mascotte__deco--pepite-tl {
	top: 30px;
	left: 6%;
	width: 52px;
	transform: rotate(3deg) scaleX(-1);
}
.home-mascotte__deco--pepite-bl {
	top: -25px;
	left: 12%;
	width: 91.411px;
	height: 87.005px;
	opacity: 0.8;
	aspect-ratio: 83 / 79;
	transform: rotate(72.739deg);
	background: url('/img/decor-pepite-petite.png') 50% / cover no-repeat;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.home-mascotte__deco--noisette-tr {
	top: -40px;
	right: 6%;
	width: 64px;
	transform: rotate(-65deg) scaleX(-1);
}
.home-mascotte__deco--pepite-br {
	top: 100px;
	right: 4%;
	width: 44px;
	transform: rotate(-140deg);
}

/* Block (Jeu concours / Challenge danse) */
.home-block {
	position: relative;
	max-width: 1230px;
	margin: 60px auto;
	padding: 0 84px;
}
.home-block__inner {
	position: relative;
	border: 3px solid var(--brossard-blanc);
	border-radius: 23px;
	padding: 52px 40px 36px;
	text-align: center;
	color: var(--brossard-blanc);
	/* Flou bleu doux autour du cadre */
	box-shadow: 0 0 14px 2px rgba(80, 130, 255, 0.4);
}
/* Halo blanc flou autour du cadre */
.home-block__inner::before {
	content: '';
	position: absolute;
	inset: -6px;
	border: 5px solid var(--brossard-blanc);
	border-radius: 28px;
	filter: blur(4px);
	opacity: 0.6;
	pointer-events: none;
	z-index: -1;
}
.home-block__tag {
	position: absolute;
	left: 50%;
	top: -25px;
	transform: translateX(-50%);
	background: var(--brossard-blanc);
	color: var(--brossard-rouge);
	padding: 11px 28px;
	border-radius: 15px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.12;
}
.home-block__title { margin: 20px 0 28px; }
.home-block__title img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.home-block__title--jeu {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	line-height: 1;
	font-weight: 400;
	-webkit-text-stroke: 18px var(--brossard-bleu-fonce);
	paint-order: stroke fill;
	text-shadow:
		-3px -3px 0 var(--brossard-bleu-fonce),
		 3px -3px 0 var(--brossard-bleu-fonce),
		-3px  3px 0 var(--brossard-bleu-fonce),
		 3px  3px 0 var(--brossard-bleu-fonce),
		 0   -3px 0 var(--brossard-bleu-fonce),
		 0    3px 0 var(--brossard-bleu-fonce),
		-3px  0   0 var(--brossard-bleu-fonce),
		 3px  0   0 var(--brossard-bleu-fonce);
}
.home-block__title--jeu .title-line { display: block; line-height: 1.05; }
.home-block__title--jeu .title-line--md { font-size: 56px; }
.home-block__title--jeu .title-line--sm { font-size: 42px; line-height: 1.15; }
.home-block__title--jeu .title-line--lg { font-size: 70px; line-height: 0.95; }

/* Titre Challenge Danse (HTML, rotation -4.74deg comme Figma) */
.home-block__title--danse {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.1;
	margin: 30px auto 40px;
	transform: rotate(-4.74deg);
	display: inline-block;
	-webkit-text-stroke: 3px var(--brossard-bleu-fonce);
	paint-order: stroke fill;
	text-shadow:
		-3px -3px 0 var(--brossard-bleu-fonce),
		 3px -3px 0 var(--brossard-bleu-fonce),
		-3px  3px 0 var(--brossard-bleu-fonce),
		 3px  3px 0 var(--brossard-bleu-fonce),
		 0   -3px 0 var(--brossard-bleu-fonce),
		 0    3px 0 var(--brossard-bleu-fonce),
		-3px  0   0 var(--brossard-bleu-fonce),
		 3px  0   0 var(--brossard-bleu-fonce);
}
.home-block__title--danse .title-line { display: block; }
.home-block__title--danse .title-line--md { font-size: 60px; line-height: 1.1; }
.home-block__title--danse .title-line--lg { font-size: 70px; line-height: 1.1; }
.home-block__title--jeu sup {
	font-size: 0.6em;
	vertical-align: super;
	line-height: 0;
}
.home-block__cta { margin-top: 6px; min-width: 297px; font-size: 27px; }
.home-block__legal {
	margin: 18px auto 0;
	max-width: 800px;
	font-size: 10px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	opacity: 0.92;
	line-height: 1.32;
}
.home-block__legal a { text-decoration: underline; }

/* Phone disco bloc */
.home-block__phone {
	position: absolute;
	left: -68px;
	top: -52px;
	width: 250px;
	transform: rotate(-9.4deg);
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 12px 18px rgba(0,0,0,0.4));
}
.home-block--jeu .home-block__title { padding-left: 0; }
.home-block--jeu .home-block__top {
	position: relative;
	z-index: 4; /* au-dessus du phone (z-index 3) : le texte reste lisible si écran étroit */
	text-align: center;
}

/* Responsive : téléphone et titre s'adaptent avant le breakpoint mobile */
@media (max-width: 1200px) {
	.home-block__phone {
		width: 240px;
		left: -50px;
		top: -36px;
	}
	.home-block__title--jeu .title-line--md { font-size: 48px; }
	.home-block__title--jeu .title-line--sm { font-size: 36px; }
	.home-block__title--jeu .title-line--lg { font-size: 60px; }
}
@media (max-width: 1000px) {
	.home-block__phone {
		width: 200px;
		left: -36px;
		top: -24px;
	}
	.home-block__title--jeu .title-line--md { font-size: 40px; }
	.home-block__title--jeu .title-line--sm { font-size: 30px; }
	.home-block__title--jeu .title-line--lg { font-size: 50px; }
}

/* Steps icons (Jeu concours) */
.home-block__steps {
	margin-top: 80px;
	padding-top: 0;
	border-top: 0;
}
.home-block__steps-title {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 36px;
	color: var(--brossard-blanc);
}
.steps-icons {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	max-width: 960px;
	margin: 0 auto;
}
.steps-icons li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.25;
}
.steps-icons li img {
	height: 64px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

/* Steps numbered (Challenge danse) */
.steps-numbered {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 80px;
	max-width: 800px;
	margin: 0 auto 30px;
	text-align: center;
}
.steps-numbered li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.32;
}
.steps-numbered__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px 11px;
	background: var(--brossard-bleu-fonce);
	color: var(--brossard-blanc);
	border-radius: 20px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 32px;
	line-height: 1;
}
.steps-numbered__txt a { text-decoration: underline; }

/* Picto play + flèche pour l'étape 3 (PNG unique iso Figma) */
.steps-numbered__play {
	position: absolute;
	left: -110px;
	top: 84px;
	width: 150px;
	height: auto;
	pointer-events: none;
}
/* Picto play+note entre étape 3 et 4 — uniquement sur mobile */
.steps-numbered__play-mobile { display: none; }

/* RS bar */
.home-block__rs {
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.home-block__rs p {
	margin: 0;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--brossard-blanc);
}
.home-block__rs img {
	height: 65px;
	width: auto;
	display: block;
}
.home-block__rs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.home-block__rs-list a {
	display: inline-flex;
	transition: transform .15s ease;
}
.home-block__rs-list a:hover { transform: translateY(-2px); }
.home-block__rs-list img {
	height: 65px;
	width: auto;
	display: block;
}

/* CTA Challenge Danse plus court (244px au lieu de 297) */
.home-block--danse .home-block__cta {
	min-width: 244px;
	font-size: 32px;
}

/* Packs Brossard avant footer */
.home-packs {
	position: relative;
	margin-bottom: -40px;
	pointer-events: none;
}
.home-packs img {
	width: 90%;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Séparateur brownie disco — caché par défaut, visible uniquement sur mobile via @media */
.home-brownie-sep { display: none; }
/* CTA "Je tente ma chance" sous le logo Brownie Brossard sur jeu-concours (mobile only) */
.jeu-concours__top-cta { display: none; }
/* CTA "Je me lance" sous le logo Brownie Brossard sur challenge-danse (mobile only) */
.challenge-danse__top-cta { display: none; }
/* Titre blanc "JEU CONCOURS" / "CHALLENGE DANSE" au-dessus du top-CTA mobile
   — blanc + stroke bleu marine épais + drop-shadow offset (iso Figma) */
.page-mobile-title {
	display: none;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	font-size: 34px;
	letter-spacing: 0.5px;
	text-align: center;
	margin: 0 auto 18px;
	line-height: 1;
	-webkit-text-stroke: 3px var(--brossard-bleu-fonce);
	paint-order: stroke fill;
	text-shadow:
		-3px -3px 0 var(--brossard-bleu-fonce),
		 3px -3px 0 var(--brossard-bleu-fonce),
		-3px  3px 0 var(--brossard-bleu-fonce),
		 3px  3px 0 var(--brossard-bleu-fonce),
		 0   -3px 0 var(--brossard-bleu-fonce),
		 0    3px 0 var(--brossard-bleu-fonce),
		-3px  0   0 var(--brossard-bleu-fonce),
		 3px  0   0 var(--brossard-bleu-fonce),
		 4px  6px 0 rgba(0, 10, 75, 0.6);
}
/* Bottom CTA + mention du bloc JEU CONCOURS (jeu-concours mobile only) */
.home-block__bottom { display: none; }

/* Page jeu-concours / challenge-danse = même rendu que preview en haut (desktop) */
body.jeu-concours #page,
body.challenge-danse #page {
	background-color: var(--brossard-bleu);
	background-image: url('/img/bg-party-desktop-cut.png');
	background-position: center top;
	background-size: 140% auto;
	background-repeat: no-repeat;
}

@media (max-width: 800px) {
	/* Hero MONTE LE SON — arc plus haut, texte plus bas */
	.home-top { min-height: 100vh; margin-top: -115px; padding-top: 115px; }
	.home-top__inner { padding: 75px 16px 50px; gap: 6px; min-height: auto; justify-content: flex-end; }
	.home-top__title { font-size: 36px; -webkit-text-stroke-width: 2.5px; }
	.home-top__subtitle { font-size: 21px; -webkit-text-stroke-width: 2px; }
	.home-top__icon-arrow { width: 64px; }
	.home-top__icon-speaker { width: 72px; }
	.home-top__marquee { margin-top: 10px; }
	.home-top__marquee-track { font-size: 18px; gap: 16px; }
	
	.home-top__legal { margin-top: 35px; }
	
	.home-top__legal-deco--right { margin-left: 100px; }
	.home-top__legal-deco--left { margin-left: -132px; }
	
	/* Mascotte Brownie Brossard */
	.home-mascotte { margin-top: -10px; }
	.home-mascotte__inner { min-height: 260px; flex-direction: column; gap: 0; max-width: 100%; padding: 0 12px; }
	.home-mascotte__label { width: 240px; max-width: 65%; margin: 0 auto -16px; }
	.home-mascotte__perso { display: none; }
	/* Décors flottants autour du brownie : on les cache sur mobile (trop encombrants) */
	.home-mascotte__deco { display: none; }

	/* Block (Jeu concours / Challenge danse) */
	.home-block { margin: 30px auto; padding: 0 14px; }
	.home-block__inner { padding: 60px 18px 30px; border-width: 2px; }
	/* Tag plus gros sur mobile (iso Figma) */
	.home-block__tag { font-size: 18px; padding: 12px 28px; top: -22px; border-radius: 18px; }
	.home-block__title { margin: 12px 0 18px; }

	/* Titre JEU CONCOURS — 3 lignes mais bcp plus petit */
	.home-block__title--jeu { padding-left: 0; padding-top: 0; -webkit-text-stroke-width: 2.5px; }
	.home-block__title--jeu .title-line--md { font-size: 26px; }
	.home-block__title--jeu .title-line--sm { font-size: 20px; }
	.home-block__title--jeu .title-line--lg { font-size: 32px; }

	/* JEU CONCOURS — reorder iso Figma : titre → CTA → mention → téléphone+brownie → comment jouer */
	.home-block--jeu .home-block__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.home-block--jeu .home-block__top { order: 1; width: 100%; padding-left: 0; }
	.home-block--jeu .home-block__phone { order: 2; }
	.home-block--jeu .home-block__steps { order: 3; width: 100%; }
	/* Téléphone : centré après la mention légale, avec les brownies autour */
	.home-block--jeu .home-block__phone {
		content: url('/img/tel-brownie-mobile.png');
		position: static;
		width: 280px;
		max-width: 100%;
		height: auto;
		transform: none;
		margin: 18px auto 4px;
		display: block;
		filter: none;
	}

	.home-top__icons { margin-bottom: 10px; }

	/* Légal sous CTA — plus lisible */
	.home-block__legal { font-size: 9px; padding: 0 8px; }
	.home-block__legal br { display: none; }

	/* Comment jouer */
	.home-block__steps { margin-top: 40px; padding-top: 0; }
	.home-block__steps-title { font-size: 22px; margin-bottom: 22px; }
	.steps-icons { flex-direction: column; gap: 22px; }
	.steps-icons li img { height: 50px; }
	.steps-icons li { font-size: 16px; }

	/* Titre CHALLENGE DANSE rotaté — bigger sur mobile */
	.home-block__title--danse { margin: 22px auto 17px; -webkit-text-stroke-width: 2.5px; }
	.home-block__title--danse .title-line--md { font-size: 44px; }
	.home-block__title--danse .title-line--lg { font-size: 54px; }

	/* Étapes 1-2-3-4 — 1 colonne sur mobile */
	.steps-numbered { grid-template-columns: 1fr; gap: 24px 0; padding: 0 12px; }
	.steps-numbered li { font-size: 16px; gap: 8px; }
	.steps-numbered__num { width: 32px; height: 32px; font-size: 22px; }
	.steps-numbered__num,
	.form-steps__item.is-active.is-active span { background-size: contain; }
	/* Étape 3 (avec picto play) : on cache le picto desktop (positionné en absolu) */
	.steps-numbered__play { display: none; }
	/* Picto play+note mobile entre étape 3 et 4 + brownie twist à droite */
	.steps-numbered__play-mobile {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: -8px auto;
		width: 100%;
		list-style: none;
	}
	.steps-numbered__play-mobile > img:first-of-type {
		width: 64px;
		height: auto;
		filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
	}
	/* Brownie twist : collé contre le bord droit de la fenêtre */
	.steps-numbered__play-mobile-deco {
		position: absolute;
		right: -44px; /* compense les paddings (home-block 14 + inner 18 + steps 12) pour atteindre le bord viewport */
		top: 100%;
		transform: translateY(-50%);
		width: 110px;
		height: auto;
		filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
		pointer-events: none;
	}

	/* RS bar */
	.home-block__rs { flex-direction: column; gap: 12px; margin-top: 28px; }
	.home-block__rs p { font-size: 18px; }
	.home-block__rs img { height: 50px; }
	.home-block--danse .home-block__cta { min-width: 200px; font-size: 22px; height: 56px; }

	/* CTA générique mobile */
	.home-cta { font-size: 22px; min-width: 220px; padding: 18px 26px; }

	/* Cacher les gros brownies décoratifs autour du cadre danse sur mobile */
	body.challenge-danse .home-block--danse .home-block__deco--right,
	body.challenge-danse .home-block--danse .preview__decor--brownie-gauche {
		display: none;
	}
	/* Décor brownie de droite (jeu concours home) — scaled down sur mobile */
	.home-block__deco--right { width: 90px; right: -10px; top: -30px; transform: rotate(15deg); }
	body.challenge-danse .home-block__deco--right { display: none; }

	/* Fond disco home : boule positionnée juste après la vague de la vidéo (.home-top fait 100vh + margin-top -115px) */
	body.home #page {
		background-position: center calc(100vh - 102px);
		background-size: 177% auto;
		background-image: url(/img/bg-party-mobile.png);
	}
	/* Boule disco derrière le logo Brownie Brossard sur jeu-concours & challenge-danse — même image que la home */
	body.jeu-concours #page,
	body.challenge-danse #page {
		background-image: url(/img/bg-party-mobile.png);
		background-position: center 60px;
		background-size: 177% auto;
	}
	/* Titre + CTA mobile sous le logo */
	body.jeu-concours .jeu-concours__top-cta,
	body.challenge-danse .challenge-danse__top-cta {
		display: block;
		text-align: center;
		margin: 8px auto 30px;
	}
	.page-mobile-title { display: block; }

	/* On masque le CTA + la mention légale dans le bloc JEU CONCOURS (sortis dans le top-CTA et le bottom) */
	body.jeu-concours .home-block--jeu .home-block__top .home-block__cta,
	body.jeu-concours .home-block--jeu .home-block__top .home-block__legal {
		display: none;
	}
	/* Cacher le tag pilule blanche dans les blocs jeu-concours et challenge-danse (doublon avec le titre mobile au-dessus du top-CTA) */
	body.jeu-concours .home-block--jeu .home-block__tag,
	body.challenge-danse .home-block--danse .home-block__tag {
		display: none;
	}
	/* Brownie sep sous le bloc CHALLENGE DANSE (mobile only) */
	body.challenge-danse .home-brownie-sep--bottom {
		display: block;
		text-align: center;
		margin: 24px -14px 0;
		position: relative;
		z-index: 4;
		pointer-events: none;
	}
	body.challenge-danse .home-brownie-sep--bottom img {
		height: auto;
		margin: 0 auto;
		display: block;
	}
	/* CTA mobile placé sous le logo Brownie Brossard (jeu-concours only) */
	body.jeu-concours .jeu-concours__top-cta {
		display: block;
		text-align: center;
		margin: 8px auto 30px;
	}
	/* 2e CTA + mention en bas du bloc JEU CONCOURS (jeu-concours only) */
	body.jeu-concours .home-block__bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		margin-top: 36px;
		padding-top: 28px;
		border-top: 1px dashed rgba(255, 255, 255, 0.3);
	}
	body.jeu-concours .home-block__bottom .home-block__legal {
		max-width: 320px;
	}
	/* Séparateur brownie sous le bloc (jeu-concours only) */
	body.jeu-concours .home-brownie-sep--bottom {
		display: block;
		text-align: center;
		margin: 24px -14px 0;
		position: relative;
		z-index: 4;
		pointer-events: none;
	}
	body.jeu-concours .home-brownie-sep--bottom img {
		height: auto;
		margin: 0 auto;
		display: block;
	}

	.home-block.home-block--danse .home-block__inner { padding-top: 30px; }

	/* Séparateur brownie disco (mobile uniquement) */
	.home-brownie-sep {
		display: block;
		text-align: center;
		margin: -10px auto -20px;
		position: relative;
		z-index: 4;
		pointer-events: none;
	}
	.home-brownie-sep img {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		display: block;
	}
	
	.home-packs { margin-bottom: 15px; }
}

/* Page jeu-concours / challenge-danse = même rendu que preview en haut
   NOTE : règle desktop déplacée plus haut dans le fichier (avant le @media mobile)
   pour que l'override mobile (bg-party-mobile.png) prenne effet. */
.jeu-concours .home-mascotte,
.challenge-danse .home-mascotte {
	margin-top: 30px;
	background: transparent;
	padding-top: 0;
}
.jeu-concours .home-mascotte__perso,
.challenge-danse .home-mascotte__perso {
	transform: scaleX(-1);
}

/* =====================================================
   PAGE FORMULAIRE
===================================================== */
body.form #page {
	background-color: var(--brossard-bleu);
	background-image: url('/img/bg-party-fond-figma.png');
	background-position: center -180px;
	background-size: 143% auto;
	background-repeat: no-repeat;
}
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.form-page__teaser {
	position: relative;
	max-width: 1100px;
	margin: -20px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0 30px;
}
.form-page__title { margin: 0; flex: 1; max-width: 700px; }
.form-page__title img { width: 100%; height: auto; display: block; }
.form-page__phone {
	width: 220px;
	transform: rotate(-8deg);
	flex-shrink: 0;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}

/* Hero formulaire : center centré sur la page, label/phone en absolute */
.form-hero {
	position: relative;
	max-width: 1440px;
	margin: 30px auto 30px;
	padding: 0 30px;
	min-height: 360px;
}
.form-hero__label {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 280px;
	max-width: 100%;
}
.form-hero__phone {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%) rotate(12deg);
	width: 200px;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.form-hero__center {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.form-hero__title { margin: 0; }
.form-hero__title img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.form-hero__title .title-line { display: block; }

/* Étapes 1-2-3 — PNG iso Figma (texte caché, image rendue par le PNG) */
.form-steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 340px;
	height: 65px;
	margin: 0 auto 20px;
	padding: 0;
	list-style: none;
}
/* Ligne pointillée entre les steps (SVG Figma) */
.form-steps::before {
	content: "";
	position: absolute;
	left: 63px;
	right: 53px;
	top: 50%;
	height: 4px;
	background: url('/img/step-line.svg') center/100% 100% no-repeat;
	transform: translateY(-50%);
	z-index: 0;
}
.form-steps__item {
	position: relative;
	width: 65px;
	height: 65px;
	z-index: 2;
}
.form-steps__item span {
	display: block;
	width: 100%;
	height: 100%;
	background: center/contain no-repeat;
	font-size: 0; /* masque le texte HTML (1/2/3) — le numéro est dans le PNG */
	color: transparent;
}
/* Step inactive : PNG cercle bleu + numéro blanc */
.form-steps__item:nth-child(1) span { background-image: url('/img/step-1.png'); }
.form-steps__item:nth-child(2) span { background-image: url('/img/step-2.png'); }
.form-steps__item:nth-child(3) span { background-image: url('/img/step-3.png'); }
/* Step active : PNG chocolat pépite + numéro blanc (sort du cadre 65x65 car le PNG est 98x97) */
.form-steps__item.is-active span {
	position: absolute;
	left: -16px;
	top: -16px;
	width: 98px;
	height: 97px;
}
.form-steps__item.is-active:nth-child(1) span { background-image: url('/img/step-1-active.png'); }
.form-steps__item.is-active:nth-child(2) span { background-image: url('/img/step-2-active.png'); }
.form-steps__item.is-active:nth-child(3) span { background-image: url('/img/step-3-active.png'); }

@media (max-width: 800px) {
	/* Hero formulaire : empilé verticalement (label / steps + titre / phone) */
	.form-hero {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 0 16px;
		margin: 20px auto 16px;
		text-align: center;
		min-height: auto;
	}
	.form-hero__label {
		position: static;
		transform: none;
		width: 180px;
		margin: 0 auto;
		order: 1;
	}
	.form-hero__center {
		order: 2;
		max-width: 100%;
		width: 100%;
	}
	.form-hero__phone {
		display: none;
		position: static;
		transform: rotate(8deg);
		width: 130px;
		margin: 0 auto;
		order: 3;
	}
	/* Steps PNG plus petits sur mobile */
	.form-steps {
		width: 240px;
		height: 48px;
		margin: 0 auto 16px;
	}
	.form-steps::before { left: 50px; right: 42px; }
	.form-steps__item { width: 48px; height: 48px; }
	.form-steps__item.is-active span { left: -12px; top: -12px; width: 72px; height: 72px; }

	/* Décors brownies cachés autour du form-block et grattage sur mobile */
	body.form .form-block .home-block__deco--right,
	body.form .form-block .preview__decor--brownie-gauche,
	body.grattage .home-block--grattage .home-block__deco--right,
	body.grattage .home-block--grattage .preview__decor--brownie-gauche {
		display: none;
	}
	/* Form-block padding réduit */
	.form-block { margin: 30px auto; padding: 0 14px; }
	.form-block__inner { padding: 30px 16px 24px; }
	.form-block__intro { font-size: 18px; margin-bottom: 18px; }
}

.form-block {
	position: relative;
	max-width: 1100px;
	margin: 70px auto 60px;
	padding: 0 30px;
}
.form-block__inner {
	position: relative;
	border: 2px solid var(--brossard-blanc);
	border-radius: 24px;
	padding: 50px 60px 40px;
	box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.form-block__intro {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 30px;
	text-align: center;
}

/* Form */
form.form {
	max-width: 780px;
	margin: 0 auto;
	color: var(--brossard-blanc);
}
.form__row { margin-bottom: 18px; }
.form__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.form__row--civilite {
	display: flex;
	gap: 30px;
	align-items: center;
	border: 0;
	padding: 0;
	margin: 0 0 22px;
}
.form__radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
}
.form__radio input { width: 22px; height: 22px; cursor: pointer; accent-color: var(--brossard-rouge); }

.form__field { display: block; }
.form__label {
	display: block;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.form__field input,
.form__field select {
	width: 100%;
	height: 53px;
	border-radius: 61px;
	border: 3px solid #004AA2;
	padding: 0 23px;
	font-family: 'Acrom', 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
	background: var(--brossard-blanc);
	color: #004AA2;
	letter-spacing: -0.15px;
	transition: border-color .15s;
}
.form__field input::placeholder { color: #004AA2; opacity: 1; }
.form__field input:focus,
.form__field select:focus {
	outline: none;
	border-color: var(--brossard-rouge);
}
.form__field input.is-error {
	border-color: var(--brossard-rouge);
	background: #FFE5E3;
}

.form__upload { display: flex; justify-content: center; margin: 6px 0 24px; }
.form__file {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--brossard-blanc);
	border: 3px solid #004AA2;
	border-radius: 61px;
	padding: 13px 23px;
	cursor: pointer;
	min-width: 346px;
	color: #004AA2;
	font-family: 'Acrom', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.17px;
	transition: border-color .15s;
}
.form__file:hover { border-color: var(--brossard-rouge); }
.form__file.is-error { border-color: var(--brossard-rouge); background: #FFE5E3; }
.form__file input { display: none; }
.form__file-icon { display: inline-flex; }
.form__file-text { flex: 1; }
.form__file-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.form__file-info svg { display: block; }
.form__file-icon svg { display: block; }
.form__file-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	right: 0;
	max-width: min(320px, calc(100vw - 32px));
	width: max-content;
	background: var(--brossard-blanc);
	color: #004AA2;
	border: 3px solid var(--brossard-rouge);
	border-radius: 16px;
	padding: 10px 16px;
	font-family: 'Acrom', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
	letter-spacing: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	z-index: 30;
	cursor: default;
}
.form__file-tooltip[hidden] { display: none; }

.form__checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 22px auto;
	max-width: 720px;
}
.form__check {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	cursor: pointer;
	font-family: 'Acrom', sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.15px;
	color: var(--brossard-blanc);
	line-height: 1.3;
}
.form__check input { display: none; }
.form__check-box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--brossard-blanc);
	margin-top: 2px;
	transition: background .15s;
	position: relative;
}
.form__check.is-error .form__check-box {
	background: #FFE5E3;
	box-shadow: 0 0 0 2px var(--brossard-rouge);
}
.form__check input:checked + .form__check-box::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brossard-rouge);
	font-size: 14px;
	font-weight: 900;
}
.form__check-txt a { text-decoration: underline; }

.form__legal {
	font-size: 10px;
	opacity: 0.95;
	margin: 22px auto 0;
	line-height: 1.8;
	text-align: center;
	letter-spacing: -0.1px;
}
.form__legal a { text-decoration: underline; }

.form__actions {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.form__submit { min-width: 163px; }

.form__error {
	margin: 14px 0 0;
	min-height: 1.4em;
	color: #FFD7D5;
	background: rgba(0,0,0,0.25);
	border-radius: 12px;
	padding: 0 14px;
	font-size: 13px;
	text-align: center;
}
.form__error:empty { display: none; }

@media (max-width: 800px) {
	.form-page__teaser { flex-direction: column; gap: 8px; }
	.form-page__title { max-width: 100%; }
	.form-page__phone { width: 130px; }
	.form-block__inner { padding: 36px 18px 30px; }
	.form-block__intro { font-size: 16px; margin-bottom: 20px; }
	.form__row--two { grid-template-columns: 1fr; gap: 18px; }
	.form__field input { height: 42px; font-size: 14px; }
	.form__row--civilite { gap: 22px; }
	
	
	.form__file { min-width: 0; font-size: 13px; width: 100%; padding: 8px 23px; }
}

/* =====================================================
   GRATTAGE / RÉSULTAT
===================================================== */
body.grattage #page,
body.gagne #page,
body.perdu #page,
body.confirmation #page {
	background-color: var(--brossard-bleu);
	background-image: url('/img/bg-party-fond-figma.png');
	background-position: center -240px;
	background-size: 143% auto;
	background-repeat: no-repeat;
}

section.grattage {
	max-width: 1200px;
	margin: 30px auto 80px;
	padding: 0 20px;
	text-align: center;
}
/* Titre HTML : Block Berthold 30px blanc sur une seule ligne (iso Figma) */
.grattage__title {
	margin: 0 0 40px;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.17;
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.grattage__balls {
	display: flex;
	justify-content: center;
	gap: 36px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.grattage__ball {
	position: relative;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: grab;
	width: 293px;
	max-width: 30%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	transition: transform .25s ease;
	/* halo blanc lumineux iso Figma (drop-shadow combiné) */
	filter:
		drop-shadow(0 0 8px rgba(255,255,255,0.5))
		drop-shadow(0 0 10px rgba(255,255,255,0.7));
}
.grattage__ball:active { cursor: grabbing; }
/* Boule disco (image de base + état gagné/perdu superposé avec texte) */
.grattage__ball-base {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	z-index: 1;
}
.grattage__ball-result {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	pointer-events: none;
}
.grattage__ball-result img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.grattage__ball-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	text-transform: uppercase;
	font-size: 50px;
	color: var(--brossard-blanc);
	letter-spacing: 1px;
	line-height: 1;
	-webkit-text-stroke: 3px var(--brossard-bleu-fonce);
	paint-order: stroke fill;
	text-shadow:
		-2px -2px 0 var(--brossard-bleu-fonce),
		 2px -2px 0 var(--brossard-bleu-fonce),
		-2px  2px 0 var(--brossard-bleu-fonce),
		 2px  2px 0 var(--brossard-bleu-fonce);
}
.grattage__ball.is-gagne .grattage__ball-result--gagne { display: block; }
.grattage__ball.is-perdu .grattage__ball-result--perdu { display: block; }

/* Canvas par-dessus la boule (image boule disco scratchable) */
.grattage__ball-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	border-radius: 50%;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.grattage__ball.is-revealing .grattage__ball-canvas {
	transition: opacity .6s ease;
	opacity: 0;
}
.grattage__ball:not(.is-disabled):hover { transform: scale(1.03); }
.grattage__ball.is-disabled {
	pointer-events: none;
	filter: grayscale(0.5);
	opacity: 0.55;
	transition: opacity .3s, filter .3s;
}
.grattage__hint {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: var(--brossard-blanc);
	margin: 14px 0 0;
	letter-spacing: 0.5px;
	opacity: 0.85;
}

@media (max-width: 800px) {
	/* Layout iso Figma : 2 boules en haut côte à côte + 1 boule centrée en bas */
	.grattage__balls {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		max-width: 300px;
		margin: 0 auto 30px;
	}
	.grattage__ball {
		width: 100%;
		max-width: none;
		justify-self: center;
	}
	.grattage__ball:nth-child(3) {
		grid-column: 1 / span 2;
		justify-self: center;
		width: 50%;
	}
	.grattage__ball-text { font-size: 22px; -webkit-text-stroke-width: 2px; }
	.grattage__sad { font-size: 36px; }
	.grattage__title {
		font-size: 16px;
		margin: 0 0 24px;
		white-space: normal; /* on accepte le retour à la ligne sur mobile */
		padding: 0 8px;
	}
	.grattage__hint { font-size: 14px; }
}

/* Résultat (gagné / perdu) — iso Figma */
.result-hero { margin-top: 30px; min-height: 420px; }
.result-hero__trophy {
	width: 117px;
	height: auto;
	display: block;
	margin: 18px auto 22px;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}
.result-hero__title {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	color: var(--brossard-blanc);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	-webkit-text-stroke: 3px var(--brossard-bleu-fonce);
	paint-order: stroke fill;
	text-shadow:
		-3px -3px 0 var(--brossard-bleu-fonce),
		 3px -3px 0 var(--brossard-bleu-fonce),
		-3px  3px 0 var(--brossard-bleu-fonce),
		 3px  3px 0 var(--brossard-bleu-fonce),
		 0   -3px 0 var(--brossard-bleu-fonce),
		 0    3px 0 var(--brossard-bleu-fonce),
		-3px  0   0 var(--brossard-bleu-fonce),
		 3px  0   0 var(--brossard-bleu-fonce),
		 6px  8px 0 rgba(0, 10, 75, 0.55); /* drop-shadow offset iso Figma */
}
.result-hero__title .title-line { display: block; }
.result-hero__title .title-line--md { font-size: 70px; line-height: 1.3; }
.result-hero__title .title-line--lg { font-size: 87px; line-height: 0.9; }

.result-page__msg {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	max-width: 980px;
	line-height: 1.17;
	margin: -56px auto 28px;
	text-align: center;
	color: var(--brossard-blanc);
}
.result-page__contact {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	max-width: 700px;
	line-height: 1.32;
	margin: 0 auto 80px;
	padding: 0 20px;
	text-align: center;
	color: var(--brossard-blanc);
}
.result-page__contact a { text-decoration: underline; }

/* Bloc CTA challenge danse (page perdu) : play icon + CTA + stamp à droite */
.result-page__cta-bloc {
	position: relative;
	max-width: 360px;
	margin: 24px auto 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* Picto musique (speaker + note) composé de 2 SVG Figma — iso Figma */
.result-page__cta-icon {
	position: relative;
	display: block;
	width: 86px;
	height: 89px;
	margin: 0 auto 14px;
	filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.result-page__cta-icon-vector {
	position: absolute;
	left: 6.98%;
	top: 20%;
	right: 18.6%;
	bottom: 8.89%;
	width: auto;
	height: auto;
	filter: brightness(0) invert(1); /* blanc */
}
.result-page__cta-icon-note {
	position: absolute;
	left: 60.47%;
	top: 6.67%;
	right: 9.3%;
	bottom: 51.11%;
	width: auto;
	height: auto;
}
.result-page__cta {
	min-width: 299px;
	height: 74px;
	font-size: 25px;
	line-height: 1.12;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 8px 16px;
}
.result-page__cta-line {
	display: block;
	line-height: 1.12;
}
/* Stamp "Participe au challenge" + flèche à droite du CTA */
.result-page__cta-stamp {
	position: absolute;
	right: -90px;
	top: calc(100% - 96px);
	width: 84px;
	height: 84px;
	pointer-events: none;
}
.result-page__cta-stamp-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-21.28deg);
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.result-page__cta-stamp-brownie {
	position: absolute;
	left: 30%;
	top: 22%;
	width: 32%;
	height: auto;
	transform: rotate(-21.28deg);
}
.result-page__cta-stamp-arrow {
	position: absolute;
	left: 95%;
	top: 70%;
	width: 32px;
	height: auto;
	transform: rotate(-80deg) scaleY(-1);
	filter: brightness(0) invert(1);
}

/* Ancien rendu (legacy form si jamais utilisé) */
.result-page__inner {
	max-width: 1100px;
	margin: 30px auto 60px;
	padding: 0 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}
.result-page__title { margin: 0; }
.result-page__title img { max-width: 90%; height: auto; display: block; margin: 0 auto; }
.result-page__phone {
	width: 220px;
	transform: rotate(-8deg);
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.result-page__ctas {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 800px) {
	/* Hero résultat (gagne/perdu) */
	.result-hero { min-height: auto; }
	.result-hero__trophy { width: 80px; margin: 8px auto 14px; }
	.result-hero__title { -webkit-text-stroke-width: 2.5px; }
	.result-hero__title .title-line--md { font-size: 38px; line-height: 1.2; }
	.result-hero__title .title-line--lg { font-size: 48px; line-height: 0.95; }
	/* Message + contact + CTA */
	.result-page__msg { font-size: 18px; margin: 16px auto 20px; padding: 0 12px; }
	.result-page__contact { font-size: 9px; padding: 0 16px; margin-bottom: 60px; }
	.result-page__cta-bloc { max-width: 280px; margin: 18px auto 50px; }
	.result-page__cta { min-width: 240px; height: 64px; font-size: 20px; }
	.result-page__cta-icon { width: 70px; height: 72px; }
	.result-page__cta-stamp { right: -50px; width: 64px; height: 64px; }
	.result-page__cta-stamp-arrow { width: 24px; left: 92%; top: 75%; }
	/* Sur mobile, on cache les gros brownies décoratifs latéraux (trop encombrants) */
	body.gagne .result-page > .home-block__deco--right,
	body.gagne .result-page > .preview__decor--brownie-gauche,
	body.perdu .result-page > .home-block__deco--right,
	body.perdu .result-page > .preview__decor--brownie-gauche {
		display: none;
	}
	/* Page perdu : stamp rapproché du CTA sur mobile */
	body.perdu .result-page__cta-stamp {
		right: -20px;
		top: calc(100% - 80px);
	}
	/* Legacy */
	.result-page__phone { width: 140px; }
	.result-page__ctas { flex-direction: column; gap: 14px; align-items: center; }
}

/* =====================================================
   PAGES TEXTE (FAQ, règlement, mentions, CGU, cookies, confidentialité)
===================================================== */
body.faq #page,
body.reglement #page,
body.mentions-legales #page,
body.conditions-generales #page,
body.politique-cookies #page,
body.politique-confidentialite #page {
	background-color: var(--brossard-bleu);
	background-image: url('/img/bg-party-desktop-cut.png');
	background-position: center top;
	background-size: 140% auto;
	background-repeat: no-repeat;
}
@media (max-width: 800px) {
	body.faq #page,
	body.reglement #page,
	body.mentions-legales #page,
	body.conditions-generales #page,
	body.politique-cookies #page,
	body.politique-confidentialite #page {
		background-image: url('/img/bg-party-mobile.png');
		background-size: 700px auto;
		background-position: center 40px;
	}
}

.page-text {
	padding: 60px 20px 80px;
	color: var(--brossard-blanc);
	position: relative;
}
.page-text__inner {
	max-width: 1216px;
	margin: 0 auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	position: relative;
	z-index: 2;
}
.page-text__title {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 58px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 50px;
	text-align: center;
	color: var(--brossard-blanc);
	line-height: 1;
	text-shadow:
		-4px -4px 0 var(--brossard-bleu-fonce),
		 4px -4px 0 var(--brossard-bleu-fonce),
		-4px  4px 0 var(--brossard-bleu-fonce),
		 4px  4px 0 var(--brossard-bleu-fonce),
		 0   -4px 0 var(--brossard-bleu-fonce),
		 0    4px 0 var(--brossard-bleu-fonce),
		-4px  0   0 var(--brossard-bleu-fonce),
		 4px  0   0 var(--brossard-bleu-fonce),
		 6px  6px 0 rgba(0, 10, 75, 0.6);
}
.page-text__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0 0 44px;
}
.page-text .page-text__nav a {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.5px;
	color: var(--brossard-blanc);
	text-decoration: none;
	border: 2px solid var(--brossard-blanc);
	border-radius: 40px;
	padding: 10px 22px;
	transition: background .15s, color .15s;
}
.page-text .page-text__nav a:hover {
	background: var(--brossard-blanc);
	color: var(--brossard-bleu-fonce);
}
.page-text__sub-title {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	margin: 0 0 30px;
	color: var(--brossard-blanc);
	opacity: 0.95;
	scroll-margin-top: 24px;
}
.page-text__intro {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	text-align: center;
	margin: 0 0 30px;
	opacity: 0.9;
}
.page-text h2 {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 28px 0 12px;
}
.page-text p,
.page-text li {
	font-size: 15px;
	line-height: 1.6;
}
.page-text ul,
.page-text ol {
	padding-left: 22px;
	list-style: disc;
	margin: 10px 0;
}
.page-text ol { list-style: decimal; }
.page-text a {
	color: var(--brossard-blanc);
	text-decoration: underline;
}
.page-text__contact { margin-top: 32px; font-style: italic; }

/* FAQ */
.faq__group { margin-top: 30px; }
.faq__group-title {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 26px;
	text-transform: uppercase;
	margin: 24px 0 16px;
	color: var(--brossard-blanc);
}
.faq__item {
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding: 14px 0;
}
.faq__item summary {
	cursor: pointer;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.faq__item summary::after {
	content: '+';
	font-size: 32px;
	line-height: 1;
	flex-shrink: 0;
}
.faq__item[open] summary::after { content: '−'; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__content {
	padding: 14px 0 6px;
	font-size: 15px;
}

@media (max-width: 800px) {
	.page-text { padding: 30px 14px 60px; }
	.page-text__inner { padding: 0; }
	.page-text__title {
		font-size: 32px;
		text-shadow:
			-2px -2px 0 var(--brossard-bleu-fonce),
			 2px -2px 0 var(--brossard-bleu-fonce),
			-2px  2px 0 var(--brossard-bleu-fonce),
			 2px  2px 0 var(--brossard-bleu-fonce),
			 0   -2px 0 var(--brossard-bleu-fonce),
			 0    2px 0 var(--brossard-bleu-fonce),
			-2px  0   0 var(--brossard-bleu-fonce),
			 2px  0   0 var(--brossard-bleu-fonce),
			 3px  3px 0 rgba(0, 10, 75, 0.6);
	}
	.page-text__sub-title { font-size: 17px; }
	.page-text__nav { flex-direction: column; align-items: stretch; }
	.page-text .page-text__nav a { text-align: center; }
	.page-text h2 { font-size: 18px; }
	.faq__group-title { font-size: 20px; }
	.faq__item summary { font-size: 15px; }
}

/* Tableau cookies */
.page-text__table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	color: var(--brossard-blanc);
	font-size: 13px;
	line-height: 1.4;
}
.page-text__table th,
.page-text__table td {
	border: 1px solid rgba(255,255,255,0.6);
	padding: 12px 14px;
	text-align: center;
	vertical-align: top;
}
.page-text__table th {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background: rgba(255,255,255,0.06);
}
.page-text__table tr td a { text-decoration: underline; }
@media (max-width: 800px) {
	.page-text__table { font-size: 11px; }
	.page-text__table th,
	.page-text__table td { padding: 8px 6px; }
}

/* =====================================================
   MENU MOBILE (overlay + panel rouge)
===================================================== */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear .3s;
}
.mobile-menu.is-open {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}
.mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background: var(--brossard-bleu-medium);
	opacity: 0;
	cursor: pointer;
	transition: opacity .3s ease;
}
.mobile-menu.is-open .mobile-menu__overlay {
	opacity: 0.5;
}
.mobile-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 268px;
	max-width: 80vw;
	background: var(--brossard-rouge);
	color: var(--brossard-blanc);
	padding: 60px 32px 32px 38px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.mobile-menu.is-open .mobile-menu__panel {
	transform: translateX(0);
}
.mobile-menu__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	cursor: pointer;
	border: 0;
}
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding-bottom: 8px;
	margin: 0;
	list-style: none;
}
.mobile-menu__list a {
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--brossard-blanc);
	transition: opacity .15s;
}
.mobile-menu__list a:hover { opacity: 0.85; }
.mobile-menu__audio {
	margin-top: 18px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: 64px;
	height: 64px;
}
.mobile-menu__audio img { width: 100%; height: 100%; display: block; }

@media (min-width: 801px) {
	/* Sur desktop on n'affiche pas le menu mobile */
	.mobile-menu { display: none !important; }
}

/* Lock du scroll quand menu ouvert */
body.is-menu-open { overflow: hidden; }

/* =====================================================
   POPUP (générique — utilisée pour "Le cadeau")
===================================================== */
.popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear .25s;
}
.popup.is-open {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}
.popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 14, 60, 0.65);
	opacity: 0;
	cursor: pointer;
	transition: opacity .25s ease;
}
.popup.is-open .popup__overlay { opacity: 1; }
.popup__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--brossard-bleu-medium);
	color: var(--brossard-blanc);
	border-radius: 28px;
	padding: 48px 32px 32px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}
.popup.is-open .popup__panel {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}
.popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.popup__close svg { width: 18px; height: 18px; }
.popup__image {
	display: block;
	max-width: 100%;
	width: 320px;
	height: auto;
	margin: 14px auto;
}
.popup__title {
	margin: 0 0 0;
	font-family: 'Block Berthold', 'Acrom', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--brossard-blanc);
}
.popup__sub {
	margin: 0;
	font-family: 'Acrom', sans-serif;
	font-size: 13px;
	font-style: italic;
	color: var(--brossard-blanc);
	opacity: 0.85;
}
@media (max-width: 800px) {
	.popup__panel { padding: 42px 22px 26px; border-radius: 22px; }
	.popup__image { width: 240px; }
	.popup__title { font-size: 20px; }
}
body.is-popup-open { overflow: hidden; }

/* =====================================================
   DÉCORS FLOTTANTS (réutilisables sur toutes les pages)
===================================================== */
.page-deco {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
}
.page-deco img { width: 100%; height: auto; display: block; }

.page-deco--brownie-tl {
	top: 60px;
	left: -3%;
	width: 220px;
	transform: rotate(-12deg);
}
.page-deco--brownie-tr {
	top: 80px;
	right: -2%;
	width: 220px;
	transform: rotate(168deg) scaleY(-1);
}
.page-deco--brownie-br {
	bottom: 80px;
	right: -3%;
	width: 240px;
	transform: rotate(15deg);
}
.page-deco--brownie-bl {
	bottom: 100px;
	left: -3%;
	width: 220px;
	transform: rotate(-15deg);
}
.page-deco--noisette {
	top: 18%;
	right: 10%;
	width: 70px;
	transform: rotate(20deg);
}
.page-deco--noisette-2 {
	top: 50%;
	left: 5%;
	width: 60px;
	transform: rotate(-30deg);
}
/* Page perdu : décor noisette masqué */
body.perdu .page-deco--noisette-2 { display: none; }
.page-deco--pepite-1 {
	top: 30%;
	left: 7%;
	width: 50px;
	transform: rotate(80deg);
}
.page-deco--pepite-2 {
	top: 60%;
	right: 6%;
	width: 60px;
	transform: rotate(-15deg);
}
.page-deco--pepite-3 {
	bottom: 25%;
	left: 12%;
	width: 45px;
	transform: rotate(120deg);
}

@media (max-width: 800px) {
	.page-deco--brownie-tl { width: 130px; left: -10%; top: 40px; }
	.page-deco--brownie-tr { width: 130px; right: -10%; top: 100px; }
	.page-deco--brownie-br { width: 140px; right: -12%; bottom: 40px; }
	.page-deco--brownie-bl { width: 130px; left: -12%; bottom: 80px; }
	.page-deco--noisette   { width: 50px; right: 4%; }
	.page-deco--noisette-2 { width: 40px; left: 3%; }
	.page-deco--pepite-1   { width: 36px; }
	.page-deco--pepite-2   { width: 40px; }
	.page-deco--pepite-3   { width: 32px; }
}

/* Brownie à cheval sur le bord du cadre (jeu / danse) */
.home-block { position: relative; }
.home-block__deco {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.home-block__deco img { width: 100%; height: auto; display: block; }
.home-block__deco--right {
	right: calc(50% - 50vw - 85px);
	top: 130px;
	width: 363px;
	z-index: 6;
}
/* Override position spécifique à la page challenge-danse */
body.challenge-danse .home-block__deco--right {
	width: 305px;
	top: auto;
	bottom: 40px;
}
/* Override pages participer / grattage / gagne / perdu : on conserve juste la taille,
   les images restent ancrées sur leur bord viewport (caramel = droite, brownie = gauche). */
body.form .form-block .home-block__deco--right,
body.grattage .home-block--grattage .home-block__deco--right,
body.gagne .result-page > .home-block__deco--right,
body.perdu .result-page > .home-block__deco--right {
	width: 332px;
}
body.form .form-block .preview__decor--brownie-gauche,
body.grattage .home-block--grattage .preview__decor--brownie-gauche,
body.gagne .result-page > .preview__decor--brownie-gauche,
body.perdu .result-page > .preview__decor--brownie-gauche {
	width: 255px;
}
/* Sur gagne/perdu, les décors sont posés directement dans la section.result-page
   qui a position:relative — on les place verticalement vers le hero */
body.gagne .result-page > .home-block__deco--right,
body.gagne .result-page > .preview__decor--brownie-gauche,
body.perdu .result-page > .home-block__deco--right,
body.perdu .result-page > .preview__decor--brownie-gauche {
	top: 429px;
}
/* Override spécifique gagne pour home-block__deco--right */
body.gagne .result-page > .home-block__deco--right {
	top: 270px;
	width: 308px;
}
/* Override spécifique gagne pour le message (texte plus proche du titre que sur perdu) */
body.gagne .result-page__msg {
	margin-top: 0;
}
/* S'assurer que les textes/titres passent par-dessus les décors brownies (mobile/tablet) */
body.gagne .result-page > .home-block__deco--right,
body.gagne .result-page > .preview__decor--brownie-gauche,
body.perdu .result-page > .home-block__deco--right,
body.perdu .result-page > .preview__decor--brownie-gauche,
body.form .form-block .home-block__deco--right,
body.form .form-block .preview__decor--brownie-gauche,
body.grattage .home-block--grattage .home-block__deco--right,
body.grattage .home-block--grattage .preview__decor--brownie-gauche {
	z-index: 0;
}
body.form .form-hero,
body.form .form-hero__center,
body.form .form-hero__title,
body.form .form-block__inner,
body.grattage .form-hero,
body.grattage .form-hero__center,
body.grattage .form-hero__title,
body.grattage .home-block--grattage .home-block__inner {
	position: relative;
	z-index: 50;
}
body.gagne .result-hero,
body.gagne .result-page__msg,
body.gagne .result-page__contact,
body.gagne .form-hero__center,
body.gagne .result-hero__title,
body.gagne .result-hero__trophy,
body.perdu .result-hero,
body.perdu .result-page__msg,
body.perdu .result-page__contact,
body.perdu .result-page__cta-bloc,
body.perdu .form-hero__center,
body.perdu .result-hero__title {
	position: relative;
	z-index: 50;
}
.home-block__deco--left {
	left: -90px;
	bottom: -40px;
	width: 200px;
	transform: rotate(-12deg);
}

@media (max-width: 800px) {
	.home-block__deco--right { width: 110px; right: -30px; top: -30px; }
	.home-block__deco--left  { width: 100px; left: -20px; bottom: -25px; }
}

/* État du bouton upload après sélection */
.form__file.has-file {
	border-color: #004AA2;
	color: #004AA2;
}
.form__file.has-file .form__file-icon path { fill: #004AA2; }
.form__file.has-file .form__file-info path { fill: #004AA2; }
.form__file .form__file-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =====================================================
   OVERRIDES MOBILE FINS (placés en fin de fichier pour vaincre la cascade)
   — pages form, grattage, gagne, perdu, confirmation, termine
===================================================== */
@media (max-width: 800px) {
	body.form #page,
	body.grattage #page,
	body.gagne #page,
	body.perdu #page,
	body.confirmation #page,
	body.termine #page {
		background-image: url(/img/bg-party-mobile.png);
		background-position: center 71px;
		background-size: 123% auto;
	}
	/* Brownie séparateur en bas de page — 100% du viewport (pas de padding/max-width) */
	body.form .home-brownie-sep--bottom,
	body.grattage .home-brownie-sep--bottom,
	body.gagne .home-brownie-sep--bottom,
	body.perdu .home-brownie-sep--bottom,
	body.termine .home-brownie-sep--bottom {
		display: block;
		width: 100vw;
		max-width: 100%;
		margin: 24px 0 0;
		padding: 0;
		position: relative;
		z-index: 4;
		pointer-events: none;
	}
	body.form .home-brownie-sep--bottom img,
	body.grattage .home-brownie-sep--bottom img,
	body.gagne .home-brownie-sep--bottom img,
	body.perdu .home-brownie-sep--bottom img,
	body.termine .home-brownie-sep--bottom img {
		width: 100%;
		height: auto;
		display: block;
		margin: 0;
		max-width: none;
	}
	/* Variante téléphone + brownies (page gagne) : illustration centrée, pas full-width */
	body.gagne .home-brownie-sep--tel {
		width: auto;
		margin: 16px auto 8px;
	}
	body.gagne .home-brownie-sep--tel img {
		width: 280px;
		max-width: 100%;
		margin: 0 auto;
	}
}