/* === pages.css ========================================================= */
/* Styles spécifiques pages — étoffés au Sprint 3                          */

/* Wheel + diagnostic styles : voir Sprint 2 (assets/css/wheel.css, diag.css à venir) */

.page-header {
	padding-block: clamp(var(--s-6), 6vw, var(--s-8));
	background: var(--c-gris-fond);
}
.page-header h1 { margin-bottom: var(--s-3); }
.page-header__intro { font-size: var(--fs-lg); color: var(--c-text-muted); max-width: 60ch; }

.entry-content > * + * { margin-top: var(--s-4); }
.entry-content h2 { margin-top: var(--s-7); }
.entry-content h3 { margin-top: var(--s-6); }

/* === Formations catalogue === */
.formations-grid {
	display: grid;
	gap: var(--s-3);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.formation-item {
	display: flex; gap: var(--s-4); align-items: center;
	padding: var(--s-4);
	background: var(--c-white);
	border: 1px solid var(--c-gris-bord);
	border-radius: var(--radius-md);
	transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-base);
}
.formation-item:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.formation-item__num {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-rose-fond);
	color: var(--c-accent);
	border-radius: 50%;
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 500;
}
.formation-item h4 { font-size: var(--fs-sm); font-weight: 500; margin: 0; }

/* === Page Contact — 3 options === */
.contact-options {
	display: grid; gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.contact-option {
	background: var(--c-white);
	border: 1px solid var(--c-gris-bord);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
	display: flex; flex-direction: column; align-items: flex-start;
	gap: var(--s-3);
	text-decoration: none;
	color: var(--c-text);
	transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.contact-option:hover, .contact-option:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
	color: var(--c-text);
}
.contact-option__icon {
	width: 72px; height: 72px;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius-md);
}
.contact-option h3 { margin: 0; font-size: var(--fs-xl); }
.contact-option p { color: var(--c-text-muted); flex: 1; }
.contact-option__cta {
	color: var(--c-accent);
	font-weight: 600;
	font-size: var(--fs-sm);
}

/* === Formulaires de contact === */
.contact-form {
	background: var(--c-white);
	border: 1px solid var(--c-gris-bord);
	border-radius: var(--radius-lg);
	padding: clamp(var(--s-5), 4vw, var(--s-7));
	box-shadow: var(--shadow-sm);
}
.form-actions { text-align: center; margin-top: var(--s-5); }

/* === Coordonnées contact === */
.contact-info {
	display: grid; gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.contact-info__item {
	display: flex; gap: var(--s-4); align-items: flex-start;
	padding: var(--s-4);
}
.contact-info__item svg { flex-shrink: 0; margin-top: 4px; }
.contact-info__item h4 { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
.contact-info__item p { margin: 0; color: var(--c-text-muted); }