/* =====================================================
   🎨 VARIABLES GLOBALES (thème formation)
===================================================== */
:root {
	--color-primary: #875e40;
	--color-primary-dark: #6c4a33;
	--color-secondary: #2b2d42;
	--color-light: #f9f6f4;
	--color-white: #fff;
	--color-text: #333;

	--shadow-light: 0 4px 12px rgba(0, 0, 0, 0.12);
	--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.16);
}

/* =====================================================
   🧱 STRUCTURE GÉNÉRALE
===================================================== */
#formations-periode {
	background-color: var(--color-light);
	padding: 4rem 1rem 7rem 1rem;
}

.page-title {
	color: var(--color-secondary);
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
}

/* =====================================================
   🧩 CARTES DE FORMATION
===================================================== */
.formations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.card {
	border: none;
	border-radius: 0.5rem;
	box-shadow: var(--shadow-light);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background-color: var(--color-white);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* En-tête */
.card-header {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
	text-align: center;
}

/* Corps */
.card-body {
	text-align: center;
}

.display-6 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-secondary);
}

/* Séparateur */
hr,
.session-separator {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	width: 60%;
	margin: 0.75rem auto;
}

/* =====================================================
   📅 LISTE DES DATES / SESSIONS
===================================================== */
.formation-sessions {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}

.formation-sessions li {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	font-size: 0.95rem;
	transition: color 0.2s ease;
}

.formation-sessions li:hover {
	color: var(--color-primary);
}

.formation-sessions i,
.fa-calendar {
	color: var(--color-secondary);
	font-size: 1.1rem;
	margin-right: 0.5rem;
}

.session-label {
	font-size: 0.95rem;
}

/* =====================================================
   🔘 BOUTON “EN SAVOIR +” et Formations
===================================================== */
.btn-danger {
	background-color: var(--color-secondary);
	border: none;
	transition: background-color 0.25s ease;
}

.btn-danger:hover,
.btn-danger:focus {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-outline-primary {
	color: var(--color-primary);
	border-color: var(--color-primary);
	transition: background-color 0.25s ease, color 0.25s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

/* =====================================================
   🖼️ RESPONSIVE
===================================================== */
@media (max-width: 768px) {
	.page-title {
		font-size: 1.6rem;
	}

	.display-6 {
		font-size: 1.6rem;
	}
}