/* ============================================================================
   CAP Forma — pages catalogue, fiche formation, approche, contact, légal, 404.
   Complète main.css (qui reste la référence, voir DESIGN.md) : mêmes tokens,
   même grille « marge » 3/9, aucun nouvel accent, aucune ombre, aucun dégradé.
   ========================================================================== */

/* ── Métadonnées de marge (dl) : même dessin que la marge de l’accueil ─── */

.cat-facts { margin: 0; display: grid; gap: 16px; }
.cat-facts dt { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cat-facts dd { margin: 3px 0 0; font-size: 15px; max-width: 26ch; overflow-wrap: anywhere; }
.cat-facts address { font-style: normal; }

/* ── /offres ────────────────────────────────────────────────────────── */

.cat-list { padding-top: clamp(32px, 3.4vw, 48px); }
.cat-intro { row-gap: 28px; padding-bottom: clamp(48px, 6vw, 88px); }
.cat-intro__text p { margin: 0; font-family: var(--serif); font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.cat-list .h-fam { scroll-margin-top: 96px; }
.cat-cta__lede { margin-top: 24px; }
.h-cta__aside .btn { justify-self: start; }

/* ── Fiche formation ────────────────────────────────────────────────── */

.fiche { padding-top: clamp(20px, 2.4vw, 32px); padding-bottom: var(--sec); }
.fiche__body { min-width: 0; }

.fiche-head { padding: clamp(20px, 3vw, 40px) 0 clamp(28px, 3.4vw, 44px); }
.fiche-head__kicker { margin-bottom: clamp(22px, 3vw, 36px); }
.fiche-head__kicker a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.fiche-head__kicker a:hover { color: var(--minium); text-decoration-color: currentColor; }
.fiche-head__title { max-width: 16ch; }
.fiche-head__lede { margin-top: 24px; color: var(--ink); }
.fiche-head__mprice { display: none; }

.fiche .specs { margin-top: 0; }
.fiche .specs dd { font-size: 1.05rem; line-height: 1.4; }

/* Sommaire de la fiche */
.fiche-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; padding: 16px 0; border-top: var(--line-2); border-bottom: var(--line-2); }
.fiche-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fiche-toc a { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.fiche-toc a .num { margin-right: 4px; }
.fiche-toc a:hover { color: var(--minium); }

.fiche__intro { max-width: none; margin-top: clamp(32px, 4vw, 52px); }
.fiche__intro p { font-family: var(--serif); font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.6; max-width: 40em; margin: 0; }

/* Chaque rubrique : la marge porte le numéro, la colonne principale le texte. */
.fiche-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr); column-gap: var(--gap); row-gap: 14px; margin-top: clamp(56px, 7vw, 96px); padding-top: 18px; border-top: var(--line); scroll-margin-top: 96px; }
.fiche-sec > .kicker { padding-top: 10px; }
.fiche-sec > .kicker::after { display: none; }
.fiche-sec .h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); margin: 0 0 clamp(22px, 2.6vw, 34px); }
.fiche-sec__sub { margin: -10px 0 0; color: var(--ink-2); max-width: 52ch; }
.fiche-sec .steps { list-style: none; margin: 24px 0 0; padding: 0; }
.fiche-sec .step .h3 { font-size: clamp(1.12rem, 1.4vw, 1.28rem); }
.fiche-sec .step__time { white-space: nowrap; font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.fiche-sec__annot { margin-top: 28px; max-width: 46ch; }

.fiche-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
.fiche-cols > div { border-top: var(--line-2); padding-top: 16px; }
.fiche-cols__title { display: block; margin: 0 0 16px; }
.fiche-cols .ticks li { margin-bottom: 12px; line-height: 1.5; }
.fiche .faq details > :not(summary) { margin-right: 0; }

@media (max-width: 720px) {
  .fiche-sec { grid-template-columns: minmax(0, 1fr); }
  .fiche-sec > .kicker { padding-top: 4px; }
  .fiche-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Bloc d’achat */
.buy > .label { display: block; margin: 0; color: var(--minium); }
.buy__facts { margin: 0 0 24px; border-top: var(--line-2); }
.buy__facts div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: var(--line-2); font-size: 14.5px; line-height: 1.45; }
.buy__facts dt { color: var(--ink-3); }
.buy__facts dd { margin: 0; color: var(--ink-2); text-wrap: balance; }
/* Au-dessus de 1000 px, durée / format / entrée sont déjà dans la bande .specs, juste à côté :
   on ne les répète pas, et le bloc collant reste plus court que l’écran. */
@media (min-width: 1001px) { .buy__facts { display: none; } .buy__note { margin-bottom: 26px; } }
.buy__ask { margin: 18px 0 0; text-wrap: balance; }

/* Sous 1000 px le bloc d’achat passe après le programme : on rappelle le prix en tête. */
@media (max-width: 1000px) {
  .fiche-head__mprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 28px 0 0; padding-top: 14px; border-top: 1px dotted var(--rule-2); }
  .fiche-head__mprice .price { font-size: 1.7rem; }
  .buy { margin-top: 8px; scroll-margin-top: 90px; }
}

.fiche-others { padding-top: 0; }
.fiche-others .sec-head > :nth-child(2) { justify-self: end; }
.fiche-others .fcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fiche-others .fcard__text { font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 900px) { .fiche-others .sec-head > :nth-child(2) { justify-self: start; } }

/* ── Notre approche ─────────────────────────────────────────────────── */

.m-access .h2 { margin: 0 0 clamp(24px, 3vw, 40px); }
.m-access__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 64px); align-items: start; }
.m-access__contact { border-top: var(--line); padding-top: 16px; display: grid; gap: 10px; }
.m-access__mail { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; color: var(--minium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.m-access__mail:hover { color: var(--minium-2); }
.m-access__contact p { margin: 0; }
@media (max-width: 900px) { .section--tint .marg .kicker, .section .marg > .kicker { margin-bottom: 20px; } .m-access__cols { grid-template-columns: minmax(0, 1fr); } }

.m-who__facts { margin-top: 28px; }
.m-who .h2 { margin: 0 0 clamp(24px, 3vw, 36px); }
.m-who__prose { font-size: 17px; }
.m-who__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
@media (max-width: 900px) { .m-who__facts { margin: 20px 0 32px; } }

/* ── Contact ────────────────────────────────────────────────────────── */

.contact { padding-top: clamp(40px, 5vw, 72px); }
.contact__marg { display: grid; gap: 32px; align-content: start; }
.contact__annot { max-width: 28ch; }
.contact__main { grid-column: 4 / span 7; }
.contact .form select { appearance: none; padding-right: 40px; background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1f1c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.contact__submit { display: grid; gap: 14px; justify-items: start; margin-top: 8px; padding-top: 22px; border-top: var(--line-2); }
.contact__submit p { margin: 0; max-width: 52ch; }
.contact .errors:focus { outline: none; }
@media (max-width: 1100px) { .contact__main { grid-column: 4 / -1; } }
@media (max-width: 900px) {
  .contact__main { grid-column: 1 / -1; order: -1; }
  .contact__marg { margin-top: 48px; padding-top: 24px; border-top: var(--line); }
}

.merci__actions { margin-top: 0; }

/* ── 404 ────────────────────────────────────────────────────────────── */

.nf-links { list-style: none; margin: 0; padding: 0; border-top: var(--line); max-width: 760px; }
.nf-links a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 20px 0; border-bottom: var(--line-2); }
.nf-links .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 420; }
.nf-links__go { color: var(--minium); font-size: 18px; transition: transform .15s ease; }
.nf-links a:hover .h3 { text-decoration: underline; text-decoration-color: var(--minium); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nf-links a:hover .nf-links__go { transform: translateX(3px); }
@media (max-width: 900px) { .nf-links { margin-top: 28px; } }

/* ── Pages légales ──────────────────────────────────────────────────── */

.legal-page { padding-top: clamp(40px, 5vw, 72px); }
.legal-toc { align-self: start; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.legal-toc .label { display: block; padding-bottom: 10px; border-bottom: var(--line); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: ltoc; }
.legal-toc li { counter-increment: ltoc; }
.legal-toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 7px 0; border-bottom: var(--line-2); font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.legal-toc a::before { content: counter(ltoc, decimal-leading-zero); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--minium); font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: var(--minium); }
@media (max-width: 900px) {
  .legal-toc { position: static; max-height: none; margin-bottom: 40px; }
  .legal-toc a { padding-block: 12px; }
}

.legal { min-width: 0; max-width: 760px; color: var(--ink-2); }
.legal > :first-child { margin-top: 0; }
.legal h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--ink); margin: 2.4em 0 .7em; padding-top: 18px; border-top: var(--line); line-height: 1.2; scroll-margin-top: 96px; }
.legal h2 .num { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.legal h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 1.6em 0 .4em; }
.legal p { margin: 0 0 1em; }
.legal ul { margin: 0 0 1em; padding: 0; list-style: none; }
.legal ul li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.legal ul li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 12px; height: 0; border-top: 1px solid var(--minium); }
.legal strong { color: var(--ink); font-weight: 600; }

.legal-dl { margin: 1.2em 0 0; border-top: var(--line-2); }
.legal-dl div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 4px var(--gap); padding: 10px 0; border-bottom: var(--line-2); font-size: 15.5px; }
.legal-dl dt { color: var(--ink-3); }
.legal-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal-dl div { grid-template-columns: minmax(0, 1fr); } }

.legal-table { margin: .4em 0 1.2em; }
.legal-table td { color: var(--ink-2); }
.legal-table td:first-child { color: var(--ink); padding-right: 24px; }
@media (max-width: 560px) {
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding: 12px 0; border-bottom: var(--line-2); }
  .legal-table td { display: block; border: 0; padding: 0; }
  .legal-table td + td { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
}

/* Marqueur visible d’une information à compléter (ex. médiateur à désigner). */
.legal-todo { border-left: 4px solid var(--warn); background: var(--paper-3); padding: 12px 16px; color: var(--ink) !important; font-size: 15px; }

.legal-form { border: var(--line); background: var(--paper-3); padding: clamp(18px, 2.4vw, 28px); margin-top: 1.2em; }
.legal-form p { color: var(--ink); }
.legal-form .legal-form__lines li { padding: 12px 0 6px; margin: 0; border-bottom: 1px dotted var(--rule-2); color: var(--ink); }
.legal-form .legal-form__lines li::before { display: none; }

@media print {
  .legal-toc, .fiche-toc, .fiche-others { display: none !important; }
  .legal-page .grid12 { display: block; }
}
@media (max-width: 720px) { .contact .field-row { row-gap: 0; } }