/* ============================================================
   FORMATIONS (/formations) — ce que cette page est SEULE à porter.

   Le chrome de sous-page vient de `v2.css` (`pricing-page-*`, `btn-*`,
   `eyebrow`, `price-kicker`, `faq-*`) et le socle partagé avec /livre-blanc de
   `subpage.css` (`sub-section`, `sub-title`, `sub-head`, `sub-tile`,
   `sub-actions`, `sub-meta`, `sub-cards`). Ici : les deux parcours, le
   programme, l'encadré, le déroulé.
   ============================================================ */

/* ---------- Les deux parcours ---------- */
.fo-track-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 32px;
}
.fo-track {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 26px 24px;
	border: 1px solid var(--line-d);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 50px -42px rgba(7, 25, 87, .36);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.fo-track:hover {
	border-color: rgba(74, 31, 168, .34);
	box-shadow: 0 26px 60px -40px rgba(74, 31, 168, .5);
	transform: translateY(-2px);
}
.fo-track .price-kicker { margin-top: 18px; }
.fo-track h3 {
	margin-top: 8px;
	color: var(--brand-navy);
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.25;
}
.fo-track p { margin-top: 10px; color: var(--muted-d); font-size: 14.5px; line-height: 1.65; }
/* `margin-top: auto` : les deux cartes ont la même hauteur, leurs teasers non.
   Sans ça, les deux « Voir le programme » ne s'alignent pas. */
.fo-track-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--brand-violet);
	font-size: 13px;
	font-weight: 700;
}
.fo-track-more svg { width: 16px; height: 16px; }

/* ---------- Programme ---------- */
.fo-prog-title { margin-top: 40px; }
.fo-prog,
.fo-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	margin-top: 18px;
	padding: 0;
	list-style: none;
}
.fo-prog li,
.fo-steps li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 20px;
	border: 1px solid var(--line-d);
	border-radius: 16px;
	background: #fff;
}
.fo-prog svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--brand-violet);
}
/* --v2 et non --brand-lavender : la lavande est un fond dans cette charte,
   elle tombe à 2,7:1 sur blanc. */
.fo-step-i {
	flex: 0 0 auto;
	color: var(--v2);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
}
.fo-prog b,
.fo-steps b { display: block; color: var(--brand-navy); font-size: 15px; font-weight: 600; }
.fo-prog span,
.fo-steps span:not(.fo-step-i) {
	display: block;
	margin-top: 5px;
	color: var(--muted-d);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- Encadré « ce que nous ne faisons pas » ---------- */
.fo-note {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 22px;
	padding: 22px 24px;
	border: 1px solid rgba(74, 31, 168, .2);
	border-radius: 18px;
	background: rgba(176, 137, 242, .1);
}
.fo-note b { color: var(--brand-navy); font-size: 15px; font-weight: 600; }
.fo-note p { margin-top: 6px; color: var(--muted-d); font-size: 14.5px; line-height: 1.65; }

/* ---------- Pour qui / Format ---------- */
.fo-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 22px;
}
.fo-fact {
	padding: 22px 24px;
	border: 1px solid var(--line-d);
	border-radius: 18px;
	background: #fff;
}
.fo-fact b { display: block; margin-top: 14px; color: var(--brand-navy); font-size: 15px; font-weight: 600; }
.fo-fact p { margin-top: 6px; color: var(--muted-d); font-size: 14.5px; line-height: 1.65; }

/* ---------- Déroulé ---------- */
.fo-how {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 32px;
	padding: 0;
	list-style: none;
}
.fo-how li {
	padding: 24px 22px;
	border: 1px solid var(--line-d);
	border-radius: 18px;
	background: #fff;
}
.fo-how-i {
	color: var(--v2);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
}
.fo-how b { display: block; margin-top: 10px; color: var(--brand-navy); font-size: 16px; font-weight: 600; }
.fo-how p { margin-top: 7px; color: var(--muted-d); font-size: 14px; line-height: 1.6; }

/* ---------- FAQ ----------
   Primitives `faq-*` de v2.css, état [open] compris. La largeur de lecture se
   pose sur la LISTE : sur `.container`, un `max-width` recentre le bloc et
   décale la colonne par rapport au reste de la page. */
#faq-formations .faq-list { max-width: 880px; margin-top: 28px; }

/* ---------- Adaptatif ---------- */
@media (max-width: 1020px) {
	.fo-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.fo-track-grid,
	.fo-prog,
	.fo-steps,
	.fo-facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.fo-how { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.fo-track { transition: none; }
	.fo-track:hover { transform: none; }
}