/* Pour la dimension des boites identiques même avec un padding   */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Pour les ordinateurs "Times New Roman", Times, serif*/
HTML {
	font-size: 100%;
}

body {
	font:
		1.1em/1em "Times New Roman",
		Times,
		arial;

	max-width: 1200px;
	margin: auto;
}

input, select, textarea: {
	font-size: 100%;
}

h1 {
	font: 2em/1em;
	line-height: 30px;
}

h2 {
	font: 1.5em/1em;
}

h3 {
	font: bold 1.2em/1em;
	margin-bottom: 0.5em;
	margin-top: 0em;
}

#logo {
	width: 100%;
	height: auto;
	background:;
	float: none;
}

#logo img {
	width: 100%;
	height: auto;
	display: block;
}

#menu {
	display: none;
}

#gauche {
	width: 20%;
	height: auto;
	background:;
	float: left;
	padding-left:;
	word-wrap: break-word;
	overflow: auto;
}

#gauche2 {
	width: 100%;
	height: 1500px;
	background: #b0cc99;
	float: left;
	padding-left: 1%;
	word-wrap: break-word;
	overflow: auto;
}

#gauche1 {
	width: 100%;
	height: auto;
	background: #b0cc99;
	color: white;
	float: left;
	padding-left: 1%;
	word-wrap: break-word;
	overflow: hidden;
	font-weight: bold;
}
#gauche1 a:link {
	color: rgb(0, 0, 0);
	text-decoration: underline;
}
#gauche1 a:visited {
	color: rgb(0, 0, 0);
	text-decoration: underline;
}
#gauche1 a:hover {
	color: red;
	text-decoration: underline;
}

#gauche3 {
	width: 100%;
	height: auto;
	background:;
	float: left;
	word-wrap: break-word;
	overflow: hidden;
}

#gauche3 img {
	max-width: 100%;
	height: auto;
}

#gauche4 {
	width: 100%;
	height: auto;
	background: #b0cc99;
	float: left;
	padding-left: 1%;
	word-wrap: break-word;
	overflow: hidden;
}

#centre {
	padding: 0.5em;
	width: 51%;
	background:;
	height: auto;
	float: left;
}

#centreresponsive {
	width: 600px;
	background: #efefef;
	height: auto;
	border-style: solid;
	border-width: 1px;
	float: left;
	word-wrap: break-word;
}

#centre1 {
	width: 53%;
	height: auto;
	background: #efefef;
	float: left;
	word-wrap: break-word;
	overflow: hidden;
	padding: 1%;
}

#centre11 {
	width: 15%;
	height: auto;
	background:;
	float: right;
	word-wrap: break-word;
	overflow: hidden;
	padding: 1%;
}

#centre11 img {
	max-width: 100%;
	height: auto;
}

#centre2 {
	width: 40%;
	height: 100%;
	background: #efefef;
	float: right;
	word-wrap: break-word;
	text-align: center;
	padding: 1%;
}

#centre2 img {
	max-width: 100%;
	height: auto;
}

#centre3 {
	width: 100%;
	height: 100%;
	background:;
	float: right;
	word-wrap: break-word;
	text-align: center;
	padding: 1%;
}

#centre3 img {
	max-width: 100%;
	height: auto;
}

#droit {
	padding-left: 0.5em;
	width: 29%;
	background:;
	height: auto;
	float: left;
}

#droit1 {
	padding-top: 1em;
	width: 100%;
	background:;
	height: auto;
	float: left;
}

#droit1 img {
	width: 100%;
	height: auto;
}

#droit2 {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; /* Aligne gauche/droite pour les duos */
}

/* 1. Règle par défaut pour TOUTES les images (elles se mettent par deux) */
#droit2 img {
	width: 48%; /* Environ la moitié de la largeur */
	height: auto;
	margin-bottom: 20px;
}

/* 2. On cible une image spécifique pour qu'elle prenne 100% */
#droit2 img:nth-child(3),
#droit2 img:nth-child(6) {
	width: 100%;
}

a:link {
	color: black;
	text-decoration: undreline;
}
a:visited {
	color: black;
	text-decoration: undreline;
}
a:hover {
	color: red;
	text-decoration: undreline;
}

#pied {
	width: 100%;
	height: auto;
	background-color: #008080;
	color: white;
	overflow: hidden;
}

/* Définit la couleur des liens hypertexte dans le div footer */
#pied a:link {
	color: white;
	text-decoration: undreline;
}
#pied a:visited {
	color: white;
	text-decoration: undreline;
}
#pied a:hover {
	color: red;
	text-decoration: undreline;
}

/* ***********************************************************************************Pour les tablettes **************************************************************************/
@media all and (max-width: 1200px) /* Pour les tablettes */ {
	#body {
		width: auto;
	}

	#gauche {
		width: 30%;
		height: auto;
		background:;
		float: left;
	}

	#centre {
		width: 70%;
		background:;
		height: auto;
		float: left;
	}

	#droit {
		display: none;
	}
}

/******************************************************************************** Pour les smartphones *********************************************************************************/

@media all and (max-width: 600px) /* Pour les smartphones */ {
	#body {
		width: auto;
	}

	#logo {
		position: relative;
		top: 0px;
	}

	#menu {
		display: block;
		font-size: 0.6em;
	}

	#gauche {
		display: none;
	}

	#droit {
		display: none;
	}

	#centre {
		width: 100%;
		background:;
		height: auto; /* La hauteur se définit automatiquement */
		float: none;
		overflow: hidden;
		word-wrap: break-word;
	}

	#centreresponsive {
		width: 100%;
		height: auto; /* La hauteur se définit automatiquement */
		float: none;
		overflow: hidden;
	}

	#centre1 {
		padding: 0.3em;
		font-size: 0.6em;
		width: 70%;

		height: auto;
		float: left;
	}

	#centre2 {
		width: 30%;
		background:;
		height: auto;
		float: left;
	}

	#pied {
		width: 100%;
		height: auto;
		background-color: #008080;
		color: white;
		overflow: hidden;
	}
}

/* Barre d'appel à l'action */
.cta-banner {
	background-color: #b0cc99;
}

.cta-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.cta-text {
	color: rgb(0, 0, 0);
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	flex: 1;
	line-height: 1.4;
	font-weight: bolder;
}

.cta-buttons {
	display: flex;
	gap: 15px;
	flex-shrink: 0;
}

.btn {
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.btn-primary {
	background-color: #e84c3d; /* Rouge comme Pourdebon */
	color: white;
}

.btn-primary:hover {
	background-color: #d63c2d;
	transform: scale(1.05);
}

.btn-secondary {
	background-color: white;
	color: #2d2d2d;
	border: 2px solid #2d2d2d;
}

.btn-secondary:hover {
	background-color: #f5f5f5;
}

/* Responsive */
@media (max-width: 768px) {
	.cta-container {
		flex-direction: column;
		text-align: center;
	}

	.cta-text {
		flex: none;
	}
}

.btn a {
	text-decoration: none; /* Supprime le soulignement */
	color: inherit; /* Permet au lien de prendre la couleur blanche du bouton */
}