/* =========================================================================
   GRAND CONCOURS DE BD 2026 - Fluide Glacial
   Page de section : sections/fluide_glacial/concoursbd2026.html
   Assets : concoursbd2026_assets/ (chemins relatifs depuis ce .css)
   Cadre BD : approximation CSS (option A, sans ornements grecs).
   ========================================================================= */

@font-face {
	font-family: "Gigalypse";
	src: url('concoursbd2026_assets/Gigalypse.woff2') format('woff2'),
		 url('concoursbd2026_assets/Gigalypse.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Classe utilitaire : titres en Gigalypse */
.concours2026 .gigalypse {
	font-family: "Gigalypse", Impact, "Arial Black", sans-serif;
}

.concours2026 {
	--fg-red: #E2001A;
	--fg-red-dark: #B00014;
	--fg-yellow: #FFD200;
	--fg-maroon: #481d0b;      /* continuité du tas de planches */
	--fg-cream: #f7efe1;       /* texte clair sur fond sombre */
	--fg-frame: #E2001A;

	box-sizing: border-box;
	padding: 24px 14px;
	font-family: inherit;
}
.concours2026 *,
.concours2026 *::before,
.concours2026 *::after { box-sizing: border-box; }

/* ---- Cadre / poster ---------------------------------------------------- */
.concours2026__frame {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	/* L'artwork (affiche complète 3188x5140) épouse la largeur du cadre */
	background: #3a0e16 url('concoursbd2026_assets/background_grandjeuconcours2026.webp') no-repeat top center;
	background-size: 100% auto;
	overflow: hidden;
	color: var(--fg-cream);
}

/* ---- Hero : illustration + titre --------------------------------------- */
/* Le hero ne porte plus le background (désormais sur .concours2026__frame) :
   il réserve seulement l'espace du bureau + titre, en proportion de la largeur. */
.concours2026__hero {
	position: relative;
	width: 100%;
	aspect-ratio: 1270 / 544;
}
.concours2026__title {
	display: block;
	max-width: 84%;
	margin: 0 auto;
	padding-top: 22px;
	position: relative;
	z-index: 2;
	font-family: "Gigalypse", Impact, "Arial Black", sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	text-align: center;
	color: #e30713;
	font-size: clamp(2rem, 6vw, 4.5rem);
}
.concours2026__title span {
	font-family: "Gigalypse", Impact, "Arial Black", sans-serif;
	display: block;
}

/* ---- Contenu ----------------------------------------------------------- */
.concours2026__content {
	position: relative;
	padding: 10px 7% 48px;
	z-index: 2;
}

.concours2026__validite {
	text-align: center;
	font-style: italic;
	opacity: .85;
	margin: 0 0 22px;
}

/* Accroche (titre H1) */
.concours2026__accroche {
	color: #fff;
	font-family: "Gigalypse", Impact, "Arial Black", sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	font-size: clamp(1.1rem, 2.5vw, 1.8rem);
	margin: 0 auto 2.5rem auto;
	padding: 12px 14px;
	max-width: 100%;
	position: relative;
	z-index: 0;
	width: fit-content;
}
.concours2026__accroche::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fg-red);
	border-radius: 8px;
	transform: skewX(11deg);   /* bords gauche/droit parallèles, inclinés vers la droite */
}
.concours2026__accroche em { font-style: italic; }

/* Blocs rouges (parallélogramme à pointes arrondies, comme l'accroche) */
.concours2026__bloc, .concours2026__bloc_reverse {
	color: #fff;
	text-align: center;
	padding: 12px 14px;   /* marge interne élargie pour les bords inclinés */
	margin: 0 auto .6rem auto;   /* aligné sur l'accroche : dégage le perso "gourdes" à gauche */
	max-width: 100%;
	font-size: 1.05rem;
	line-height: 1;
	position: relative;
	z-index: 0;
	width: fit-content;
}
.concours2026__bloc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fg-red);
	border-radius: 8px;
	transform: skewX(11deg);   /* bords gauche/droit parallèles, comme l'accroche */
}
.concours2026__bloc_reverse::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fg-red);
	border-radius: 8px;
	transform: skewX(-8deg);   /* bords gauche/droit parallèles, comme l'accroche */
}
.concours2026__bloc p { margin: 0; }
.concours2026__bloc strong { color: #fff; font-weight: 800; }
.concours2026__bloc em { font-style: italic; }

/* Consignes */
.concours2026__consignes {
	list-style: none;
	margin: 3rem auto;
	padding: 0;
	max-width: 900px;
	width: 100%;
	font-size: 1.05rem;
	line-height: 1.4;
	/* Positionné + z-index : sans ça, les persos en position:absolute
	   (ex. spatiate--bebe) sont peints AU-DESSUS du texte en flux. */
	position: relative;
	z-index: 1;
}
.concours2026__consignes li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 18px;
}
.concours2026__consignes li::before {
	content: "";
	position: absolute;
	left: 2px; top: .45em;
	width: 11px; height: 11px;
	background: var(--fg-red);
	border-radius: 50%;
}
.concours2026__consignes strong { color: #fff; font-weight: 800; }
.concours2026__consignes em { font-style: italic; }
.concours2026 a { color: #fff; font-weight: 700; text-decoration: underline; }
.concours2026 a:hover { text-decoration: none; }

/* Règlement */
.concours2026__reglement {
	max-width: 760px;
	margin: 0 auto 26px;
	font-size: 1.05rem;
	text-align: center;
}

/* Bandeau "chance" (parallélogramme à pointes arrondies, comme l'accroche) */
.concours2026__chance {
	color: #fff;
	font-family: "Gigalypse", Impact, "Arial Black", sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-style: italic;
	text-align: center;
	font-size: clamp(1.1rem, 2.6vw, 1.7rem);
	line-height: 1.12;
	max-width: 100%;
	margin: 0 12vw 30px auto;
	padding: 12px 14px;   /* marge interne élargie pour les bords inclinés */
	position: relative;
	z-index: 0;
	width: fit-content;
}
.concours2026__chance::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fg-red);
	border-radius: 8px;
	transform: skewX(11deg);   /* bords gauche/droit parallèles, comme l'accroche */
}

/* Mentions / RGPD / footer */
.concours2026__participants {
	max-width: 760px;
	margin: 0 auto 20px;
	font-style: italic;
}
.concours2026__rgpd {
	max-width: 760px;
	margin: 0 auto 24px;
	font-size: .9rem;
	line-height: 1.4;
	opacity: .92;
}
.concours2026__rgpd h2 {
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.concours2026__crayons {
	text-align: center;
	color: #fff;
	font-weight: 800;
	font-style: italic;
	font-size: 1.6rem;
	margin: 10px auto 26px;
}
.concours2026__footer {
	text-align: center;
	font-size: .95rem;
	margin: 0;
}

/* ---- Personnages décoratifs ------------------------------------------- */
.spatiate {
	position: absolute;
	height: auto;
	pointer-events: none;
	/*z-index: 1;*/
}
.spatiate--gourdes {           /* _5 : les porteuses de gourdes + bulles, à gauche */
	left: 7vh;
	top: -1vh;
	width: 17%;
}
.spatiate--garde {             /* _2 : garde seul, à droite */
	right: 17vh;
	top: 4vh;
	width: 8.5%;
}
.spatiate--bebe {              /* _4 : gag du "bébé spartiate", bas-droite */
	right: 1%;
	bottom: 5rem;
	width: 22%;
	z-index: -1;   /* derrière tout le texte (consignes, règlement, bandeau) */
}

/* =========================================================================
   RESPONSIVE : flux vertical simplifié, personnages décoratifs masqués
   ========================================================================= */
@media (max-width: 900px) {
	.spatiate--garde { display: none; }
	.spatiate--gourdes { display: none; }
	.spatiate--bebe { display: none; }
	.concours2026__content { padding: 10px 6% 40px; }
	.concours2026__chance { margin: 0 auto 30px auto}
}

@media (max-width: 600px) {
	.concours2026 { padding: 12px 6px; }
	.concours2026__frame { border-width: 26px; }   /* méandre un peu plus fin en mobile */
	/* En mobile : on masque tous les persos détourés (illisibles trop petits) */
	.spatiate { display: none; }
	.concours2026__accroche,
	.concours2026__bloc { margin-left: 0; }    /* plus de persos à dégager */
	.concours2026__hero { aspect-ratio: 1270 / 900; }
	.concours2026__title { max-width: 92%; padding-top: 14px; }
	.concours2026__content { padding: 8px 18px 32px; }
	.concours2026__bloc,
	.concours2026__accroche,
	.concours2026__consignes { font-size: .98rem; }
	.concours2026__crayons { font-size: 1.3rem; }
}