/**
 * SD Formation - Page Accessibilité handicap.
 * Mobile-first. Tokens repris de custom.css (:root déjà chargé avant ce
 * fichier). Hero / breadcrumb / boutons / cta finale / carte pdf : classes
 * globales déjà définies dans custom.css, pas redéfinies ici.
 */

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

.sdf-a11y {
	font-family: var( --sdf-font-body );
	color: var( --sdf-text-primary );
}
.sdf-a11y h1,
.sdf-a11y h2 {
	font-family: var( --sdf-font-heading );
}

/* Surcharge scopée à cette page : .sdf-hero h1 et .sdf-hero__resume ont un
   max-width en ch dans custom.css (pensé pour les titres/sous-titres courts
   de single-formation et contact), ici le texte est plus long et doit
   prendre toute la largeur disponible. Scopé à .sdf-a11y pour ne pas
   impacter les autres pages qui partagent ces mêmes classes globales.
   (.sdf-section p n'a plus de max-width du tout dans custom.css depuis le
   24/07, plus besoin de surcharge ici pour ce sélecteur.) */
.sdf-a11y .sdf-hero h1 {
	max-width: none;
}
.sdf-a11y .sdf-hero__resume {
	max-width: none;
}

.sdf-a11y-body {
	/* Longhand : même bug que .sdf-c-body (contact.css) / .sdf-hero
	   (custom.css) - cet élément porte aussi .sdf-band sur le même tag,
	   un shorthand ici écrasait son padding horizontal. */
	padding-top: clamp( 40px, 6vw, 64px );
	padding-bottom: clamp( 40px, 6vw, 64px );
}

/* Layout 2 colonnes desktop : texte en pleine largeur de la colonne
   principale, contacts + PDF dans un aside à droite. Contrairement à
   .sdf-sidebar (custom.css, utilisée sur single-formation.php), l'aside
   reste visible en mobile (empilée sous le contenu) : pas de barre fixe de
   remplacement sur cette page, donc pas de display:none en dessous de
   900px. */
.sdf-a11y-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 32px, 4vw, 44px );
	align-items: start;
}
@media ( min-width: 900px ) {
	.sdf-a11y-layout {
		grid-template-columns: minmax( 0, 1fr ) 340px;
	}
}

.sdf-a11y-main {
	display: flex;
	flex-direction: column;
	gap: clamp( 32px, 4vw, 44px );
	min-width: 0;
}

.sdf-a11y-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media ( min-width: 900px ) {
	.sdf-a11y-aside {
		position: sticky;
		top: 24px;
	}
}
.sdf-a11y-aside__title {
	margin-bottom: -4px;
}

.sdf-a11y-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sdf-a11y-card__name {
	font-weight: 700;
	font-size: 16px;
	color: var( --sdf-text-primary );
	margin: 0 0 4px;
}
.sdf-a11y-card__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var( --sdf-text-secondary );
}
.sdf-a11y-card__row svg {
	flex: none;
	width: 16px;
	height: 16px;
	stroke: var( --sdf-blue );
}
.sdf-a11y-card__row a {
	color: var( --sdf-text-secondary );
	text-decoration: none;
}
.sdf-a11y-card__row a:hover {
	color: var( --sdf-blue );
}

.sdf-a11y-pdf {
	display: inline-flex;
	width: fit-content;
}