/**
 * SD Formation - Styles page single formation.
 * Mobile-first. Couleurs approximées depuis l'export Figma (à ajuster si besoin) :
 * bleu de marque #2563eb, fond sombre #0a0d14.
 */

:root {
	--sdf-blue: #2563eb;
	--sdf-blue-dark: #1d4ed8;
	--sdf-dark: #0a0d14;
	--sdf-gray-50: #f8fafc;
	--sdf-gray-100: #f1f5f9;
	--sdf-gray-200: #e2e8f0;
	--sdf-gray-600: #475569;
	--sdf-gray-900: #0f172a;
	--sdf-radius: 12px;
	--sdf-max-width: 1200px;
}

.sdf-single-formation {
	max-width: var( --sdf-max-width );
	margin: 0 auto;
	padding: 0 20px 60px;
}

/* Fil d'ariane */
.sdf-breadcrumb {
	font-size: 13px;
	color: var( --sdf-gray-600 );
	padding: 16px 0;
}
.sdf-breadcrumb a {
	color: var( --sdf-gray-600 );
	text-decoration: none;
}
.sdf-breadcrumb a:hover {
	color: var( --sdf-blue );
}
.sdf-breadcrumb span {
	margin: 0 6px;
}

/* Hero */
.sdf-hero {
	border-radius: var( --sdf-radius );
	overflow: hidden;
	color: #fff;
	margin-bottom: 32px;
}
.sdf-hero--plain {
	background: linear-gradient( 135deg, var( --sdf-dark ), var( --sdf-blue-dark ) );
}
.sdf-hero--image {
	background-size: cover;
	background-position: center;
	position: relative;
}
.sdf-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba(10,13,20,.75), rgba(10,13,20,.55) );
}
.sdf-hero__inner {
	position: relative;
	padding: 32px 20px 40px;
}
.sdf-badge-categorie {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 16px;
}
.sdf-hero h1 {
	font-size: 28px;
	line-height: 1.2;
	margin: 0 0 12px;
}
.sdf-hero__resume {
	font-size: 16px;
	opacity: .9;
	margin: 0 0 16px;
	max-width: 640px;
}
.sdf-hero__rncp {
	font-size: 13px;
	opacity: .85;
	margin: 0 0 24px;
}
.sdf-hero__rncp a {
	color: #fff;
	text-decoration: underline;
}
.sdf-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

/* Boutons */
.sdf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	border: 2px solid transparent;
	cursor: pointer;
}
.sdf-btn--primary {
	background: var( --sdf-blue );
	color: #fff;
}
.sdf-btn--primary:hover {
	background: var( --sdf-blue-dark );
}
.sdf-btn--secondary {
	background: #fff;
	color: var( --sdf-dark );
}
.sdf-btn--secondary:hover {
	background: var( --sdf-gray-100 );
}
.sdf-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.sdf-btn--outline:hover {
	background: rgba(0,0,0,.05);
}
.sdf-btn--small {
	padding: 8px 16px;
	font-size: 13px;
}
.sdf-btn--block {
	display: flex;
	width: 100%;
	margin-bottom: 10px;
}

/* Stats */
.sdf-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255,255,255,.2);
}
.sdf-stats li {
	display: flex;
	flex-direction: column;
}
.sdf-stats strong {
	font-size: 22px;
	line-height: 1.1;
}
.sdf-stats span {
	font-size: 12px;
	opacity: .8;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Layout principal / sidebar */
.sdf-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media ( min-width: 900px ) {
	.sdf-layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.sdf-section {
	margin-bottom: 36px;
}
.sdf-section h2 {
	font-size: 20px;
	margin: 0 0 14px;
	color: var( --sdf-gray-900 );
}
.sdf-wysiwyg {
	color: var( --sdf-gray-600 );
	line-height: 1.6;
}
.sdf-wysiwyg :first-child {
	margin-top: 0;
}

.sdf-section--duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media ( min-width: 640px ) {
	.sdf-section--duo {
		grid-template-columns: 1fr 1fr;
	}
}

/* Programme */
.sdf-programme-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sdf-programme-list li {
	background: var( --sdf-gray-50 );
	border: 1px solid var( --sdf-gray-200 );
	border-radius: var( --sdf-radius );
	padding: 16px 18px;
}
.sdf-programme-list li strong {
	display: block;
	color: var( --sdf-gray-900 );
	margin-bottom: 6px;
}

/* Accordéon (déroulement de la formation) */
.sdf-accordion-item {
	border: 1px solid var( --sdf-gray-200 );
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
}
.sdf-accordion-item summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 700;
	color: var( --sdf-gray-900 );
	background: var( --sdf-gray-50 );
	list-style: none;
}
.sdf-accordion-item summary::-webkit-details-marker {
	display: none;
}
.sdf-accordion-item summary::after {
	content: "+";
	float: right;
	font-weight: 400;
}
.sdf-accordion-item[open] summary::after {
	content: "−";
}
.sdf-accordion-item .sdf-wysiwyg {
	padding: 4px 18px 18px;
}

.sdf-simple-list {
	margin: 0;
	padding-left: 18px;
	color: var( --sdf-gray-600 );
	line-height: 1.7;
}

.sdf-responsable {
	font-size: 13px;
	color: var( --sdf-gray-600 );
	margin: -16px 0 36px;
}

/* Sessions */
.sdf-sessions-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sdf-session-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var( --sdf-gray-50 );
	border: 1px solid var( --sdf-gray-200 );
	border-radius: 8px;
	padding: 14px 18px;
}
.sdf-session-row--complet {
	opacity: .65;
}
.sdf-session-dates {
	font-weight: 600;
	color: var( --sdf-gray-900 );
}
.sdf-session-places {
	font-size: 13px;
	color: var( --sdf-gray-600 );
	margin-right: auto;
}

/* Sidebar */
.sdf-sidebar__sticky {
	background: #fff;
	border: 1px solid var( --sdf-gray-200 );
	border-radius: var( --sdf-radius );
	padding: 22px;
	box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
@media ( min-width: 900px ) {
	.sdf-sidebar__sticky {
		position: sticky;
		top: 24px;
	}
}
.sdf-sidebar__tarif {
	font-size: 22px;
	font-weight: 800;
	color: var( --sdf-gray-900 );
	margin: 0 0 12px;
}
.sdf-sidebar__prochaine,
.sdf-sidebar__lieu {
	font-size: 13px;
	color: var( --sdf-gray-600 );
	margin: 0 0 16px;
}
.sdf-sidebar__pdf {
	display: block;
	font-size: 13px;
	color: var( --sdf-blue );
	text-align: center;
	margin-top: 10px;
	text-decoration: underline;
}

/* Mobile : sidebar devient une barre collante en bas d'écran */
@media ( max-width: 899px ) {
	.sdf-sidebar__sticky {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 40;
		padding: 14px 18px;
	}
	.sdf-sidebar__prochaine,
	.sdf-sidebar__pdf {
		display: none;
	}
	.sdf-single-formation {
		padding-bottom: 140px;
	}
}

/* Formations similaires */
.sdf-similaires-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media ( min-width: 640px ) {
	.sdf-similaires-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}
.sdf-similaire-card {
	display: block;
	border: 1px solid var( --sdf-gray-200 );
	border-radius: var( --sdf-radius );
	overflow: hidden;
	text-decoration: none;
	color: var( --sdf-gray-900 );
}
.sdf-similaire-card img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}
.sdf-similaire-card h3 {
	font-size: 16px;
	margin: 14px 16px;
}

/* CTA finale */
.sdf-cta-final {
	text-align: center;
	background: var( --sdf-gray-50 );
	border-radius: var( --sdf-radius );
	padding: 40px 20px;
	margin-top: 40px;
}
.sdf-cta-final h2 {
	margin: 0 0 20px;
}
.sdf-cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}