/* 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;
	margin-top: 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;
	}
}


/* ==========================================================================
   MODERNISATION GLOBALE ET RESPONSIVE DE LA PAGE (SANS TOUCHER AU PHP)
   ========================================================================== */

/* 1. MARGES DE SÉCURITÉ DE LA PAGE : Évite que les titres et formulaires collent aux bords */
form[name="soumis"],
#formSoumis,
section.portfolio-section {
	padding-left: 5% !important;
	padding-right: 5% !important;
	box-sizing: border-box !important;
}
h2.ms-5cefor:has(+ p + .image-clignote),
h2.ms-5cefor:has(a[href*="Adm=366"]) {
	margin-top: 45px !important;
	/* Crée une belle respiration sous les filtres */
}

/* Version mobile de l'espacement global */
@media (max-width: 767.98px) {

	form[name="soumis"],
	#formSoumis,
	section.portfolio-section {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}

/* ==========================================================================
   SECTION : FORMATIONS QUALIFIANTES / MÉTIERS (ZONE DU HAUT)
   ========================================================================== */

/* Alignement de la grille des métiers */
h2+p+section.portfolio-section[style*="margin-left:15px;"] {
	margin-left: 0 !important;
	padding-top: 10px !important;
}

/* Transformation des blocs rigides en cartes modernes et responsives */
section.portfolio-section .vignettes.col-sm-12.col-md-3 {
	height: auto !important;
	max-width: 100% !important;
	/* Annule le max-width:295px rigide */
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
	padding: 20px !important;
	margin-bottom: 24px !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	min-height: 180px !important;
	/* Donne une régularité visuelle aux blocs */
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Changement de fond subtil au survol (carte immobile) */
section.portfolio-section .vignettes.col-sm-12.col-md-3:hover {
	transform: none !important;
	background-color: #f1f3f5 !important;
	/* Même effet grisé discret demandé */
	box-shadow: 0 6px 16px rgba(105, 33, 68, 0.06) !important;
	border-color: rgba(105, 33, 68, 0.15) !important;
}

/* Nettoyage de la structure en lignes internes (.row) des métiers */
section.portfolio-section .vignettes .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-grow: 1 !important;
}

/* Style du texte du titre métier (ex: Barman, Fromager...) */
section.portfolio-section .vignettes .col-sm-9 {
	width: auto !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	/* Même épaisseur allégée élégante */
	color: #692144 !important;
	/* Votre bordeaux de charte */
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* Bouton d'information PDF à côté du titre métier */
section.portfolio-section .vignettes .col-sm-9 a.btn-default {
	background-color: #f1f3f5 !important;
	color: #495057 !important;
	border: 1px solid #dee2e6 !important;
	padding: 2px 8px !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	margin-left: 6px !important;
	font-size: 0.75rem !important;
	text-transform: uppercase;
}

/* Zone de droite contenant l'organigramme miniature clignotant */
section.portfolio-section .vignettes .col-sm-3 {
	width: auto !important;
	padding: 0 !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Suppression du texte "Cliquez ICI" caché derrière l'image */
section.portfolio-section .vignettes .col-sm-3 div[style*="position:absolute"] {
	display: none !important;
}

/* Modernisation de l'image de l'organigramme */
section.portfolio-section .vignettes img.organigramme {
	width: 70px !important;
	/* Un peu plus grand et net */
	height: auto !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Alignement et ancrage du bouton d'inscription en bas (ex: M'inscrire en 1ère année) */
section.portfolio-section .vignettes div:has(a.btn-primary) {
	width: 100% !important;
	margin-top: 15px !important;
}

section.portfolio-section .vignettes a.btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #692144 !important;
	/* Uniformisation bordeaux */
	color: #ffffff !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	border: none !important;
	width: 100% !important;
	/* S'étire sur toute la largeur de la carte */
	box-shadow: 0 2px 5px rgba(105, 33, 68, 0.15) !important;
	transition: background-color 0.2s ease !important;
}

section.portfolio-section .vignettes a.btn-primary:hover {
	background-color: #4e1832 !important;
}

/* Bouton Spécifique d'en-tête "Gestion" */
a.btn.btncefor {
	background-color: #692144 !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	padding: 4px 12px !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
}


/* ==========================================================================
   RAPPEL CONSERVÉ : LE SÉCURE-CSS POUR LA SECTION "FORMATIONS FILTRÉES"
   ========================================================================== */
#UEfiltrees+p+section.portfolio-section>div[style*="background-color"] {
	background-color: #f8f9fa !important;
	padding: 30px 15px !important;
	border-radius: 16px;
}

.vignettesUE.isotopeSelector {
	height: auto !important;
	min-height: 480px !important;
	max-width: 100% !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
	padding: 24px 20px !important;
	margin: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	box-sizing: border-box !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.vignettesUE.isotopeSelector:hover {
	transform: none !important;
	background-color: #f1f3f5 !important;
	box-shadow: 0 6px 16px rgba(105, 33, 68, 0.06) !important;
	border-color: rgba(105, 33, 68, 0.15) !important;
}

.vignettesUE>br {
	display: none !important;
}

.vignettesUE>a.link-folder {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: #692144 !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	display: block !important;
	overflow: visible !important;
	margin-bottom: 15px !important;
	height: auto !important;
}

.vignettesUE div.AA {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	flex-grow: 1 !important;
}

.vignettesUE table,
.vignettesUE tbody {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	border: none !important;
	flex-grow: 1 !important;
}

.vignettesUE tr {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	width: 100% !important;
	margin-bottom: 12px !important;
}

.vignettesUE tr:has(a[href*="&C="]),
.vignettesUE tr:last-child {
	margin-top: auto !important;
}

.vignettesUE tr:has(a[href*="&C="])+tr:has(a[href*="&C="]) {
	margin-top: 0 !important;
}

.vignettesUE td[rowspan="10"] {
	display: block !important;
	flex: 0 0 120px !important;
	max-width: 120px !important;
	padding: 0 !important;
}

.vignettesUE td[rowspan="10"] img {
	width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
	object-fit: cover !important;
}

.vignettesUE td[rowspan="10"]+td {
	display: none !important;
}

.vignettesUE td:not([rowspan="10"]) {
	display: block !important;
	flex: 1 1 150px !important;
	padding: 0 !important;
}

.vignettesUE td:first-child:not([rowspan="10"]) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #495057 !important;
}

.vignettesUE td:first-child:not([rowspan="10"]) span[title*="classe(s)"] {
	display: inline-block !important;
	margin-left: auto !important;
	background: #f1f3f5 !important;
	border: 1px solid #dee2e6 !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
}

.vignettesUE .tag {
	padding: 4px 10px !important;
	border-radius: 20px !important;
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	display: inline-block !important;
}

.vignettesUE .alert-success,
.vignettesUE td span.badge.alert-success {
	background-color: #e8f5e9 !important;
	color: #1b5e20 !important;
	border: 1px solid #c8e6c9 !important;
	padding: 4px 8px !important;
	border-radius: 6px !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
}

.vignettesUE td div[style*="max-height"] {
	max-height: none !important;
	font-size: 0.8rem !important;
	color: #666666 !important;
	line-height: 1.3 !important;
}

.vignettesUE td a.badge.alert-success[href*="&C="] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #692144 !important;
	color: #ffffff !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: 0 2px 5px rgba(105, 33, 68, 0.12) !important;
	white-space: normal !important;
	margin-bottom: 4px !important;
}

.vignettesUE td a.badge.alert-success[href*="&C="]:hover {
	background-color: #4e1832 !important;
}

.vignettesUE td[title*="année scolaire"] {
	font-size: 0.82rem !important;
	color: #666666 !important;
	font-weight: 500 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
	border-top: 1px dashed #dee2e6 !important;
	padding-top: 10px !important;
	margin-top: 4px !important;
}

.vignettesUE td[title*="année scolaire"] a.badge.alert-primary {
	background-color: #f1f3f5 !important;
	color: #212529 !important;
	border: 1px solid #dee2e6 !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
}


/* ==========================================================================
   RENDRE L'ORGANIGRAMME CLIQUABLE ET MODERNE (SANS TOUCHER AU PHP)
   ========================================================================== */

/* 1. On indique visuellement à l'utilisateur que l'image est cliquable */
img.organigramme.fancy {
	cursor: pointer !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Effet au survol de la miniature */
img.organigramme.fancy:hover {
	transform: scale(1.08) !important;
	/* Zoom léger pour inviter au clic */
	box-shadow: 0 4px 10px rgba(105, 33, 68, 0.2) !important;
}