/* globals */
:root {
	--blanc: #fff;
	--noir: #000;
	--rouge: #c00c1b;
	--jaune: #ffc332;
	--bleu: #2a3580;
	--vert: #9ebe49;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	--font-size: 17px;
}

.noir { color: var(--noir); }
.jaune { color: var(--jaune); }
.blanc { color: var(--blanc); }
.rouge { color: var(--rouge); }

.carousel {
	max-width: 945px;
	width: 100%;
	margin: 0 auto;
}

.slick-prev:before, .slick-next:before { color: #d22c2e; }
.slick-dots li button:before { color: #206c1b; }
.slick-dots li.slick-active button:before { color: #f4bd28; }

.carousel-item img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.slick-slide { margin: 0 0px; }
.slick-list { margin: 0 -10px; }

.carousel-container {
	max-width: 800px;
	margin: 0 auto;
}

.slick-track { display: flex; align-items: center; }
.carousel-item { height: 400px; }

@media (max-width: 1024px) {
	.mobile-noir { color: var(--noir); }
	.mobile-jaune { color: var(--jaune); }
	.mobile-blanc { color: var(--blanc); }
	.mobile-rouge { color: var(--rouge); }
}

/* layout */
.container { max-width: 1024px; width: 100vw; }
@media (max-width: 1024px) {
	.container { max-width: 100vw; }
}

.only-mobile { display: none; }
.only-desktop { display: block; }
.inline-only-mobile { display: none; }
.inline-only-desktop { display: inline; }
@media (max-width: 1024px) {
	.only-mobile { display: block; }
	.only-desktop { display: none; }
	.inline-only-mobile { display: inline; }
	.inline-only-desktop { display: none; }
}

.screen-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.screen-box-content {
	flex-grow: 1;
	width: 100%;
	width: min(1920px, 100%);
}

@media (min-width: 1024px) {
	body.home .screen-box {
		position: absolute;
		inset: 0;
	}
}

.col-left { flex-basis: 55%; }
.col-middle { flex-basis: 100%; }
.col-right { flex-basis: 50%; }

body:not(.home) .col-left { flex-basis: 70%; }
body:not(.home) .col-middle { flex-basis: 100%; }
body:not(.home) .col-right { flex-basis: 68%; }

@media (min-width: 1025px) {
	body:not(.home) .col-middle { min-width: 945px; }
}

@media (max-width: 1024px) {
	.cols { flex-direction: column !important; }
	.col-middle { min-width: auto; }
	.col-left, .col-middle, .col-right {
		flex-basis: 100%;
		width: 100%;
	}
}

/* bg */
html { display: flex; flex-direction: column; }
body { background: var(--rouge); display: flex; flex-direction: column; flex-grow: 1; }


@media (min-width: 1025px) {
	body:not(.home) .screen-box-content { min-height: 1080px; }
}

/* ----------------------------------------------------------------------- */
/* --- CORRECTION MOBILE MAJEURE (INSCRIPTION SEULEMENT) --- */
/* ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
	
	/* 1. L'IMAGE DE FOND GENERALE (Inscription par défaut) */
	body:not(.home) .screen-box-content {
		background-color: #ffffff;
		background-size: 100% auto;
		min-height: 100vh;
		padding-bottom: 0;
		position: relative;
		display: block; 
	}

	/* Nettoyage des styles PHP inline potentiels */
	.separation-verticale {
		border-right: none !important;
		border-bottom: 1px solid #ffcccc;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	
	.marge-gauche-col2 {
		padding-left: 0 !important;
	}
	
	#form-inscription fieldset {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	#form-inscription fieldset legend {
		display: none !important;
	}
}
/* ----------------------------------------------------------------------- */

.slick-initialized .slick-slide {}

/* custom */
#section-resultat { 
	padding: 80px 0; 
	padding: 1rem;
	padding-top: 315px;
	background-color: var(--blanc);
	margin: 0 auto;
	flex-grow: 1;
}

.intro-resultat h1 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 3rem;
	line-height: 3rem;
}

.intro-resultat p {
	font-weight: normal;
}

.texte-resultat .cadre {
	border: 7px solid #cb962d;
	padding: 10px;
	max-width: fit-content;
	margin: 0 auto;
}

#resultat-perdu.texte-resultat .cadre {
	border: 7px solid var(--noir);
}

@media (max-width: 1024px) {
	.intro-resultat, .texte-resultat {
		font-size: 2.5rem;
		line-height: 3rem;
	}
}

.boite {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 0;
	padding-top: 92.8%;
}

.boite .boite-content {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.result-gif {
	visibility: visible;
	position: absolute;
	top: 100px;
	left: 0px;
	right: 0px;
	object-fit: none;
	height: 694px;
	width: 100vw;
	cursor: pointer;
	object-position: center -313px;
}

body.home .boite {
	background: none;
	background-size: contain;
}

#section-intro {
	background: url('../images/bg-entremont-home.webp') no-repeat center top;
	flex-grow: 1;
	padding-top: 520px;
}

@media (max-width: 1024px) {
	#section-intro {
		background: url('../images/bg-entremont-home-mobile.webp') no-repeat center top;
		position: relative;
		background-size: contain;
		padding-top: 72%;
	}
}


@media (max-width: 1024px) {
	body.home .boite { background: none; padding-top: 245%; }
}

.boite.js-boite-back {
	display: none;
	background: url('../images/renvoi-site-carambar.jpg') no-repeat center center var(--bleu);
	background-size: contain;
}

.bouton {
	display: inline-block;
	color: var(--blanc);
	background: url('../images/bouton.png') no-repeat center center;
	background-size: contain;
	padding: 0 1rem 1% 1rem;
	font-size: 3rem;
	font-weight: 600;
	border: none;
	font-family: "Roboto", sans-serif;
}

.bouton-je-joue {
	display: block;
	color: transparent;
	text-indent: -9999px;
	background: url('../images/btn-je-joue-home.png') no-repeat center center;
	background-size: contain;
	max-width: 348px;
	height: 0;
	padding-top: 80px;
	margin: 0 auto;
	margin-bottom: 4rem;
}

.bouton-cliquez-ici {
	display: block;
	color: transparent;
	text-indent: -9999px;
	background: url('../images/btn-cliquez-ici.webp') no-repeat center center;
	background-size: contain;
	width: 56%;
	height: 0;
	padding-top: 14%;
	margin: 0% auto;
}

@media (max-width: 1024px) {
	.bouton {
		font-size: 1.5rem;
	}
	body.home .boite { background: none; padding-top: 245%; }
}

#cta {
	margin: 2rem auto 0 auto;
	font-size: 2rem;
	max-width: 630px;
	font-weight: bold;
}

/* Animations */
body .animation-pop { animation: pop 2s ease-in forwards; transform: scale(100%); opacity: 1; }
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(105%); opacity: 1; } 70% { transform: scale(95%); } 80% { transform: scale(102%); opacity: 1; } 90% { transform: scale(98%); } 100% { transform: scale(100%); } }

body .animation-vibe { animation: vibe 0.8s cubic-bezier(.36, .07, .19, .77) both; transform: translate3d(0, 0, 0); animation-iteration-count: infinite; }
@keyframes vibe { 10%, 90% { transform: translate3d(1px, -1px, 0); } 20%, 80% { transform: translate3d(0, 1px, 0); } 30%, 50%, 70% { transform: translate3d(-1px, -1px, 0); } 40%, 60% { transform: translate3d(0, 2px, 0); } }

body .animation-wobble { animation: wobble 2s cubic-bezier(.36, .07, .19, .77) both; transform: rotate(0); animation-iteration-count: infinite; }
@keyframes wobble { 5%, 15% { transform: rotate(-5deg); } 10%, 20% { transform: rotate(5deg); } 25%, 100% { transform: rotate(0); } }

body .animation-heartbeat { animation: heartbeat 2s cubic-bezier(.36, .07, .19, .77) both; transform: rotate(0); animation-iteration-count: infinite; }
@keyframes heartbeat { 5% { transform: scale(95%) } 10% { transform: scale(105%) } 15% { transform: scale(100%) } 20% { transform: scale(110%) } 25% { transform: scale(100%) } 100% { transform: scale(100%) } }

/* header */
#section-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#section-header .bg-header {
	max-width: 1413px;
	background: url('../images/entete.png') no-repeat center top;
	margin: 0% auto;
	min-height: 305px;
}
@media (max-width: 1024px) {
	#section-header .bg-header {
		max-width: 1413px;
		background: url('../images/bg-inscription-mobile.webp') no-repeat center top;
		margin: 0% auto;
		height: 0;
		padding-top: 72%;
		min-height: 0;
		background-size: contain;
	}
}

.page-content {
	background-color: #ffffff !important;
	min-height: 800px;
	margin: 0 auto;
	flex-grow: 1;
	padding: 315px 20px 50px 20px;
}
@media (max-width: 1024px) {
	.page-content {
		padding-top: 72%;
	}
}

/* formulaire */
#form-inscription fieldset { border: 5px solid red; padding: 1rem; border-radius: 20px; text-transform: uppercase; margin-bottom: 1rem; margin-top: 1rem; }
#form-inscription fieldset legend { width: max-content; padding: 0.2rem 1rem; margin: 0; background: red; border-radius: 50px; }
@media (max-width: 768px) { #form-inscription fieldset legend { margin: 0 auto; } }

.visuel-coupon { background: url('../images/visuel-coupon.webp') no-repeat center center; background-size: contain; width: auto; height: 200px; aspect-ratio: 5/4; }
@media (min-width: 769px) { .visuel-coupon { width: 30%; height: auto; margin-top: -140px; } }

.form-control { border-radius: 0; height: calc(1.1em + .4rem + 2px); padding: .2rem .75rem; }
select.form-control [multiple], select.form-control [size] { height: calc(1.1em + .4rem + 2px); }
.form-check-input { margin-left: -1.75rem; }
.form-check { padding-left: 1.75rem; }
input[type=radio], input[type=checkbox] { width: 1.3rem; height: 1.3rem; }

/* REGLAGE PAR DEFAUT (PC) POUR LE FORMULAIRE */
#section-inscription { 
	padding: 80px 0; 
	padding: 1rem;
	padding-top: 315px;
	background-color: var(--blanc);
	margin: 0 auto;
	flex-grow: 1;
}
@media (max-width: 1024px) {
	#section-inscription { 
		padding-top: 72%;
	}
}

#upload_preview1, #upload_preview2 { max-height: 80px; max-width: 100%; background: var(--blanc); padding: 0.4em; border-radius: 0.2em; }

/* page texte */
.page-wrapper { margin-top: 10rem; padding: 1rem 2rem; background: var(--noir); color: var(--blanc); border-radius: 15px; }
.page-wrapper a { color: var(--jaune); }
@media (max-width: 1024px) { .page-wrapper { margin-top: 2rem; } }

/* footer */
#section-footer { padding: 1rem; color: var(--blanc); background-color: var(--bleu); }
@media (max-width: 1024px) {
	#section-footer { padding-bottom: 4rem; }
}

#cookieconsent .container { max-width: 1530px; }
#cookieconsent, #cookieconsent-nojs { padding: 0.5rem; position: fixed; z-index: 80; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--blanc); background: var(--vert); color: var(--blanc); }
.cookieconsent-toogle { border: none; padding: 1rem 2rem; border-radius: 10px; background: var(--vert); color: var(--blanc); }
#footer-cookieconsent-toogle { position: fixed; z-index: 90; bottom: 0; right: 1rem; padding: 0.5rem 1rem; border: 1px solid #fff; border-bottom: 0; border-radius: 10px 10px 0 0; transition: 0.2s linear; height: 2rem; }
@media (max-width: 1024px) { #footer-cookieconsent-toogle { left: 5rem; right: 5rem; } }
#cookieconsent .text { padding: 0.5rem; }
#cookieconsent .buttons { width: fit-content; }

html, body { font-family: var(--font-family); font-weight: 600; font-style: normal; font-size: var(--font-size); }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 600; }
.sansserif { font-family: sans-serif; font-weight: 600; font-style: normal; }
html { box-sizing: border-box; scroll-behavior: smooth; width: 100%; margin: auto; font-size: 1.1rem; min-height: 100% !important; }
a { color: inherit; text-decoration: underline; }
a:hover { color: inherit; }
img { object-fit: cover; }
h1 { line-height: 2.6rem; font-size: 2.6rem; margin: 2rem 0; font-weight: 600; }
h2 { line-height: 1.8rem; font-size: 1.8rem; margin: 1.8rem auto; }
h3 { line-height: 1.6rem; font-size: 1.6rem; }
h4 { line-height: 1.4rem; font-size: 1.4rem; }
p { line-height: 1.2em; }

.jmenu { margin: 0; }
@media (max-width: 1024px) {
	html, body { font-size: 16px; }
	.jmenu a { padding: 0px 1rem; font-size: 0.6rem; }
}

/* ==========================================================================
OVERRIDE IMAGE DE FOND POUR LES PAGES DE TEXTE 
(Reglement, CGU, Politique, Mentions)
========================================================================== */

/* 1. SUR ORDINATEUR : ON UTILISE BG-FONT.JPG */
body.reglement .screen-box-content,
body.cgu .screen-box-content,
body.politique .screen-box-content,
body.mentions .screen-box-content {
	background-image: url('../images/bg-font.jpg') !important;
}

/* 2. SUR MOBILE UNIQUEMENT : ON UTILISE MOBIL_FONT.JPG */
@media (max-width: 1024px) {
	body.reglement .screen-box-content,
	body.cgu .screen-box-content,
	body.politique .screen-box-content,
	body.mentions .screen-box-content {
		/* Changement d'image pour le mobile */
		background-image: url('../images/mobil_font.jpg') !important;
		
		/* Réglages de position spécifiques au mobile */
		background-position: top center !important;
		background-size: 100% auto !important;
		background-repeat: no-repeat !important;
		background-color: #980000 !important; /* Fond rouge sombre en bas */
		min-height: 100vh;
		padding-bottom: 0 !important;
	}

	/* 3. On descend le texte BEAUCOUP plus bas pour dégager l'image */
	body.reglement .col-middle,
	body.cgu .col-middle,
	body.politique .col-middle,
	body.mentions .col-middle {
		/* On écrase le padding-top: 50% du PHP */
		padding-top: 0 !important;
		
		/* On pousse le texte vers le bas (comme pour l'inscription) */
		/* Si c'est encore trop haut, augmentez ce chiffre (ex: 95vw) */
		margin-top: 85vw !important; 
		
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}
/* ==========================================================================
PAGE TEASER (Images spécifiques)
========================================================================== */

/* 1. VERSION ORDINATEUR (Desktop) */
body.teaser .screen-box-content {
	/* Image Desktop */
	background-image: url('../images/teaser.webp') !important;
	
	/* Réglages pour que l'image prenne bien la place */
	background-position: center top !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important; /* Fond blanc si l'image s'arrête */
}

/* 2. VERSION MOBILE */
@media (max-width: 1024px) {
	body.teaser .screen-box-content {
		background-image: url('../images/mobil-teaser.jpg') !important;
		background-size: cover;
	}
}