/**
 * SD Formation - Carte formation unifiée (archive + accueil).
 * Mobile-first. Tokens repris de custom.css (:root déjà chargé avant ce fichier).
 */

.sdf-fcard,
.sdf-fcard *,
.sdf-fcard *::before,
.sdf-fcard *::after {
	box-sizing: border-box;
}

.sdf-fcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border: 1px solid var( --sdf-border );
	border-radius: var( --sdf-radius-md );
	padding: 24px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	font-family: var( --sdf-font-body );
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sdf-fcard:hover {
	box-shadow: 0 6px 20px rgba(10,13,20,0.08);
	border-color: rgba(31,143,204,0.35);
	transform: translateY(-2px);
}

.sdf-fcard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.sdf-fcard__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --sdf-blue-soft );
	color: var( --sdf-blue );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.sdf-fcard__badge-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}
.sdf-fcard__duration {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var( --sdf-text-muted );
	/* Pas de nowrap : certaines durées sont longues (ex. TFP APS "175 heures
	   + 8 heures d'examen, soit 183 heures au total"), le nowrap forçait
	   cette carte à déborder du cadre sur mobile (visible uniquement sur les
	   onglets "Toutes"/"Sécurité privée" qui contiennent cette formation).
	   Simple texte + icône, pas une pill, le retour à la ligne reste propre. */
	white-space: normal;
	min-width: 0;
}
.sdf-fcard__duration svg {
	width: 13px;
	height: 13px;
	color: var( --sdf-blue );
	flex-shrink: 0;
}

.sdf-fcard__title {
	font-family: var( --sdf-font-heading );
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	margin: 0 0 8px;
	color: var( --sdf-text-primary );
}
.sdf-fcard__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var( --sdf-text-secondary );
	margin: 0;
}

.sdf-fcard__sessions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var( --sdf-border-soft );
}
.sdf-fcard__session {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 10px;
	font-size: 13px;
	color: var( --sdf-text-secondary );
}
.sdf-fcard__session-date {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.sdf-fcard__session-date svg {
	width: 13px;
	height: 13px;
	color: var( --sdf-blue );
	flex-shrink: 0;
}
.sdf-fcard__session-places {
	font-size: 12px;
	font-weight: 600;
	color: var( --sdf-blue );
	flex-shrink: 0;
	white-space: nowrap;
}
.sdf-fcard__session-full {
	font-size: 12px;
	font-weight: 600;
	color: var( --sdf-text-muted );
	flex-shrink: 0;
	white-space: nowrap;
}
.sdf-fcard__no-session {
	/* Pas de padding-top/border-top ici : ce texte est imbriqué dans
	   .sdf-fcard__sessions (voir inc/formation-card.php), qui porte déjà
	   ce border-top + padding-top. Les dupliquer ici créait 2 bordures
	   empilées quand une formation n'a pas de session. */
	font-size: 13px;
	color: var( --sdf-text-muted );
	font-style: italic;
	margin: 0;
}

.sdf-fcard__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sdf-fcard__price {
	font-family: var( --sdf-font-heading );
	font-weight: 800;
	font-size: 20px;
	color: var( --sdf-dark );
}
.sdf-fcard__link {
	font-size: 13px;
	font-weight: 700;
	color: var( --sdf-blue );
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.sdf-fcard__link svg {
	width: 13px;
	height: 13px;
}