/* =========================================================
   RESET GLOBAL (IMPORTANT POUR L'OVERFLOW)
========================================================= */

*,
*::before,
*::after{
	box-sizing:border-box;
}

html,
body{
	margin:0;
	padding:0;
	width:100%;
	overflow-x:hidden;
}

/* =========================================================
   FONTS
========================================================= */

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/open-sans-v44-latin-300.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* =========================================================
   BASE
========================================================= */

body{
	font-family: 'Open Sans', sans-serif;
	background:#fff;
}

p{
	font-size:18px;
	line-height:25px;
	margin:0 0 14px 0;
}

/* =========================================================
   HEADER
========================================================= */

header{
	background-color:#fff;
	padding:10px 0 0 0;
	text-align:center;
	display:flex;
	flex-direction:column;
	margin-bottom:19px;
}

#headerContainer{
	display:flex;
	flex-direction:column;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:10px 16px 0 16px;
}
a{
	color: white;
}
#logoHeader{
	margin:auto;
}

/* =========================================================
   SECTION 1
========================================================= */

#section1{
	text-align:center;
}

.bandeau{
	width:100%;
}

#bandeau1{
	background:#EF824B;
	padding:1px 0;
}

h1{
	font-size:36px;
	color:#fff;
	font-weight:700;
}

h2{
	color:#fff;
	font-size:24px;
	font-weight:300;
}

h3{
	font-size:28px;
	color:#0033CC;
}

/* =========================================================
   BANDEAU PICTOS
========================================================= */

#bandeau2{
	font-weight:700;
	font-size:10px;
	padding:5px 0;
	margin-top:10px;
}

#bandPicto{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:60px;
	margin:0 auto;
	padding:30px 0 20px 0;
}

.bandeau2Flex{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	font-size:14px;
	font-weight:700;
}

.bandeau2Flex img{
	width:32px;
	height:32px;
}

/* =========================================================
   SECTION 2
========================================================= */

#section2{
	background: url('fond4.webp') no-repeat center top;
	background-size: cover;
	background-color:#e9efe9;
}

@media (max-width:768px){
	#section2{
		background: url('fond4-mobile.webp') no-repeat center top;
		background-size: cover;
		min-height:520px;
	}
}

#container2{
	display:flex;
	flex-direction:column-reverse;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 16px;
}

.gauche{
	width:100%;
	max-width:700px;
	margin:20px auto;
	padding:15px;
	background:rgba(255,255,255,0.85);
}

#droite{
	width:100%;
	margin:auto;
	padding:30px 0;
}

/* 🔥 FIX FORMULAIRE OVERFLOW */
#formulaire,
#fde-slot-am-1675679970{
	width:100%;
	max-width:100%;
	overflow:hidden;
}

#fde-slot-am-1675679970 iframe{
	width:100% !important;
	max-width:100% !important;
	display:block;
	border:0;
}

#avantages{
	text-align:left;
	margin:25px auto;
	font-size:17px;
	line-height:23px;
	list-style-image:url(check.png);
	color:#233c46;
}

#avantages li{
	margin-bottom:10px;
}

/* =========================================================
   SECTION 3
========================================================= */

#section3{
	width:100%;
	max-width:1200px;
	margin:30px auto 50px auto;
	padding:0 16px;
}

.titreShema{
	font-weight:700;
	font-size:30px;
	line-height:30px;
	text-align:center;
	margin-bottom:20px;
}

.conteneur_multiCol{
	display:grid;
	grid-template-columns:1fr;
	gap:18px;
}

.liste-raisons{
	margin:10px 0 14px 0;
	padding-left:20px;
}

.liste-raisons li{
	margin-bottom:8px;
}

/* =========================================================
   CTA
========================================================= */

.cta-wrapper{
	display:flex;
	justify-content:center;
	margin:50px auto 60px auto;
}

.cta-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:26px;

	padding:18px 42px;
	min-width:300px;

	background:linear-gradient(135deg,#EF824B,#EF824B);
	color:#fff;

	border:none;
	border-radius:14px;

	font-size:20px;
	font-weight:700;
	text-transform:uppercase;

	cursor:pointer;

	box-shadow:
		0 10px 20px rgba(0,0,0,0.18),
		inset 0 -2px 0 rgba(255,255,255,0.15);

	transition:all .25s ease;
}

/* =========================================================
   FOOTER
========================================================= */

footer{
	padding:20px;
	background:#a5a5a5;
	text-align:center;
	color:#fff;
}

#signature{
	font-size:12px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width:768px){

	#headerContainer{
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
	}

	#logoHeader{
		margin:0;
	}

	#bandPicto{
		justify-content:flex-end;
		padding:0;
		gap:40px;
	}

	#container2{
		flex-direction:row;
		justify-content:space-between;
	}

	.gauche{
		width:30%;
		margin:20px 0;
	}

	#droite{
		width:68%;
	}

	#section3{
		padding:0 10px;
	}
}

@media (min-width:992px){

	.conteneur_multiCol{
		grid-template-columns:1fr 1fr;
		gap:30px;
	}

	#section3 p{
		font-size:18px;
		line-height:28px;
	}
}

@media (max-width:767px){
	#bandeau2{
		display:none;
	}
}

@media (max-width:480px){

	.cta-btn{
		width:90%;
		padding:16px 24px;
		font-size:18px;
		min-width:0;
	}

	#bandPicto{
		gap:24px;
	}

	#section3{
		padding:0 18px;
	}
}