/**
 * SD Formation - Page Contact.
 * Mobile-first. Tokens repris de custom.css (:root déjà chargé avant ce
 * fichier). Hero / breadcrumb / boutons / accordéon FAQ : classes
 * globales déjà définies dans custom.css, pas redéfinies ici.
 */

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

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

/* ---------- Corps : formulaire + sidebar ---------- */
.sdf-c-body {
	/* Longhand : cet élément porte aussi .sdf-band (padding horizontal,
	   voir page-contact.php) sur le même tag. Un padding shorthand ici
	   remettait le gauche/droite à 0 et écrasait celui de .sdf-band -
	   c'était le bug "toute la page sans padding" sur mobile. */
	padding-top: clamp( 40px, 6vw, 64px );
	padding-bottom: clamp( 40px, 6vw, 64px );
}
.sdf-c-body__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 32px, 4vw, 48px );
	align-items: start;
}
@media ( min-width: 900px ) {
	.sdf-c-body__grid {
		grid-template-columns: minmax( 0, 1fr ) 340px;
	}
}

.sdf-c-form h2 {
	font-weight: 700;
	font-size: clamp( 24px, 3vw, 30px );
	margin: 0 0 8px;
}
.sdf-c-form__hint {
	font-size: 15px;
	color: var( --sdf-text-muted );
	margin: 0 0 28px;
}

/* Style générique des champs natifs du formulaire JetFormBuilder (shortcode
   [jet_fb_form] collé par Pierre dans le contenu WordPress de cette page).
   Ciblage par sélecteur d'élément (input/select/textarea/button), pas par
   classes internes JetFormBuilder : plus robuste, indépendant de la version
   du plugin. Si JetFormBuilder ajoute ses propres marges/bordures autour
   des champs (wrapper .jet-form-builder-row, etc.), il faudra les inspecter
   en direct et ajouter quelques règles ciblées en complément. */
.sdf-c-form__embed label,
.sdf-c-form__embed .jet-form-builder__label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --sdf-text-primary );
	margin-bottom: 8px;
}
.sdf-c-form__embed input[type="text"],
.sdf-c-form__embed input[type="email"],
.sdf-c-form__embed input[type="tel"],
.sdf-c-form__embed input[type="number"],
.sdf-c-form__embed input[type="search"],
.sdf-c-form__embed select,
.sdf-c-form__embed textarea {
	width: 100%;
	padding: 13px 14px;
	border-radius: var( --sdf-radius-xs );
	border: 1px solid var( --sdf-border );
	font-size: 15px;
	font-family: var( --sdf-font-body );
	color: var( --sdf-text-primary );
	background: #fff;
	outline: none;
	transition: border-color .15s ease;
	margin-bottom: 18px;
}
.sdf-c-form__embed input:focus,
.sdf-c-form__embed select:focus,
.sdf-c-form__embed textarea:focus {
	border-color: var( --sdf-blue );
}
.sdf-c-form__embed textarea {
	resize: vertical;
	min-height: 140px;
}
.sdf-c-form__embed button[type="submit"],
.sdf-c-form__embed input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --sdf-blue );
	color: #fff;
	border: none;
	padding: 14px 30px;
	border-radius: var( --sdf-radius-xs );
	font-size: 15px;
	font-weight: 700;
	font-family: var( --sdf-font-heading );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sdf-c-form__embed button[type="submit"]:hover,
.sdf-c-form__embed input[type="submit"]:hover {
	background: var( --sdf-blue-dark );
}

/* ---------- Sidebar : carte coordonnées + badge Qualiopi ---------- */
.sdf-c-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sdf-c-card {
	border-radius: var( --sdf-radius-lg );
	background: #243f51;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.sdf-c-card__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sdf-c-card__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var( --sdf-font-heading );
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sdf-blue );
	margin: 0;
}
.sdf-c-card__label svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.sdf-c-card__value {
	font-size: 14.5px;
	line-height: 1.5;
	color: #fff;
	margin: 0;
}
.sdf-c-card__value a {
	color: #fff;
}
.sdf-c-card__value a:hover {
	color: var( --sdf-blue );
	text-decoration: none;
}
.sdf-c-card__value--lg {
	font-family: var( --sdf-font-heading );
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
}
.sdf-c-card__divider {
	height: 1px;
	background: #1e293b;
}
.sdf-c-card__social {
	display: flex;
	align-items: center;
	gap: 14px;
}
.sdf-c-card__social a {
	width: 38px;
	height: 38px;
	border-radius: var( --sdf-radius-xs );
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sdf-c-card__social a svg {
	width: 17px;
	height: 17px;
	color: #fff;
}
.sdf-c-card__social a:hover svg {
	color: var( --sdf-blue );
}

/* Le bloc Qualiopi de la sidebar contact utilise désormais le composant
   partagé .sdf-qualiopi--boxed (custom.css, chargé sur tout le site), rendu
   par sdf_qualiopi_bloc(). Les anciennes règles .sdf-c-qualiopi ont été
   supprimées : elles dupliquaient à l'identique celles de la sidebar
   formation. */

/* ---------- Nous trouver ---------- */
.sdf-c-map {
	padding-bottom: clamp( 48px, 6vw, 72px );
}
.sdf-c-map h2 {
	font-weight: 700;
	font-size: clamp( 24px, 3vw, 30px );
	margin: 0 0 20px;
}
.sdf-c-map__frame {
	position: relative;
	border-radius: var( --sdf-radius-md );
	overflow: hidden;
	height: clamp( 260px, 32vw, 380px );
	border: 1px solid var( --sdf-border-soft );
}
.sdf-c-map__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.sdf-c-map__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	margin-top: 20px;
}
/* L'ellipsis nowrap ne fonctionnait pas comme prévu sur mobile : élément
   flex (icône + libellé + texte), le troncage "…" sur un conteneur flex
   avec plusieurs enfants n'est pas fiable (même famille de bug que les
   pills filtres), le texte débordait au lieu d'être tronqué. Retour à la
   ligne classique à la place. */
.sdf-c-map__transports {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 14.5px;
	line-height: 1.5;
	color: var( --sdf-text-secondary );
	margin: 0;
}
.sdf-c-map__transports svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var( --sdf-blue );
}
.sdf-c-map__transports-label {
	font-weight: 600;
	color: var( --sdf-text-muted );
	margin-right: 4px;
}
.sdf-c-map__footer .sdf-btn {
	flex: none;
}
@media ( max-width: 639px ) {
	.sdf-c-map__footer .sdf-btn {
		width: 100%;
	}
}

/* ---------- FAQ ---------- */
.sdf-c-faq {
	background: #f8fafc;
	padding: clamp( 48px, 6vw, 72px ) 0;
}
.sdf-c-faq h2 {
	font-weight: 800;
	font-size: clamp( 28px, 4vw, 40px );
	text-align: center;
	margin: 0 0 32px;
}