/* Importation de la police avec les graisses nécessaires (400, 500, 600, 700) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
	--text-main: #333333;
	/* Un gris très foncé est moins agressif que le noir pur (#000) */
	--text-heading: #111111;
	--text-muted: #666666;
	/* On force les variables de Bootstrap à utiliser Montserrat */
	--bs-body-font-family: 'Montserrat', sans-serif;
	--bs-font-sans-serif: 'Montserrat', sans-serif;
}

body {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px;
	/* Taille de base standard et lisible */
	line-height: 1.6;
	/* Crucial pour Montserrat : aère les lignes de texte */
	font-weight: 400;
	/* Graisse normale pour le corps de texte */
	color: var(--text-main);

	/* Améliore le rendu des polices sur les écrans modernes */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- RÉGLAGES DES TITRES --- */
h1,
h2,
h3,
h4 {
	font-family: 'Montserrat', sans-serif !important;
	line-height: 1.25;
	/* Les titres ont besoin de lignes plus resserrées que le texte */
	color: var(--text-heading);
	margin-bottom: 0.75em;
	color: #692144;
}

h1 {
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	/* Rapprocher légèrement les lettres donne plus d'impact aux gros titres */
}

h2 {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

h3 {
	font-size: 1.5rem;
	font-weight: 600;
}

/* --- ASTUCE ÉLÉGANCE : Les sur-titres ou étiquettes --- */
.eyebrow-text {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/* Espacer les majuscules améliore grandement la lisibilité */
	color: var(--text-muted);
}

.cefor {
	font-weight: bold;
	color: #692144;
	font-style: italic;
}

/* --- Styles pour les inclusions (SlidesC.php, etc.) --- */
.banner {
	position: relative;
	overflow: auto;
}

.banner li {
	list-style: none;
}

.banner ul li {
	float: left;
	min-height: 250px;
}

.interIndex {
	background-color: #fcfcfc;
	margin: 75px 0;
	padding: 25px;
	border-top: 2px solid #692144;
	border-bottom: 2px solid #692144;
}

/* --- Style Global --- */
.section-cefor {
	padding-left: 10%;
	padding-right: 10%;
}

/* --- Comportement Tablette & Mobile (< 992px) --- */
@media (max-width: 991.98px) {
	.section-cefor {
		padding-left: 5%;
		/* Marges plus petites sur mobile */
		padding-right: 5%;
	}

	.bg-responsive {
		position: relative;
		overflow: hidden;
		padding: 40px 20px;
		border-radius: 8px;
		/* On charge l'image en fond ici (chemin adapté) */
		background-image: url('../img/cefor_story.png');
		background-size: cover;
		background-position: center;
	}

	/* Le voile d'opacité : il s'applique SUR l'image mais SOUS le texte */
	.bg-responsive::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.85);
		/* 0.85 = forte opacité pour lire le texte */
		z-index: 1;
	}

	/* On force le texte à passer au-dessus du voile */
	.content-text {
		position: relative;
		z-index: 2;
	}
}

/* --- Ajustements Section Contact (< 768px) --- */
@media (max-width: 768px) {
	.info-details,
	.info-map {
		flex: 1 1 100%;
	}
	.info-section h3 {
		font-size: 1.5rem;
	}
}

/* --- Ajustement Mobile très petit (< 576px) --- */
@media (max-width: 575.98px) {
	.section-cefor {
		padding-left: 15px;
		padding-right: 15px;
	}
}