/* =============================================================================
   pages/formation.css · Page Formation en entreprise.
   Les styles viennent de la section « formation » de la page Offre : celle-ci
   n'en garde plus qu'un encart de renvoi.
   ========================================================================== */

/* --- Bandeau et publics ------------------------------------------------------------------- */

.training { scroll-margin-top: 100px; }

.training__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
}

.training__heading h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: var(--tracking-display); line-height: 0.99; }
.training__heading > p { max-width: 46ch; margin: 0; color: var(--ink-muted); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.72; }

.training .rail { margin-top: clamp(44px, 6vw, 74px); }
.training .rail h3 { font-size: clamp(1.35rem, 1.8vw, 1.62rem); }

.training__programme {
  margin-top: 20px;
  padding: clamp(30px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 70px);
  color: #f5f9ff;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 12% 20%, rgba(23, 104, 255, 0.19), transparent 24rem),
    #07182f;
}

.training__programme .kicker { color: var(--cyan); }
.training__programme h3 { color: #f5f9ff; font-size: clamp(1.9rem, 3.6vw, 3.25rem); font-weight: 570; letter-spacing: var(--tracking-display); line-height: 1.05; }

.training__programme li {
  min-height: 70px;
  padding: 18px 0;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  color: #ccd9e8;
  border-bottom: 1px solid rgba(174, 205, 239, 0.17);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.training__programme li span { color: var(--cyan); font-family: var(--font-mono); font-size: var(--fs-mono); }

/* Bloc « qui forme réellement » : l'argument d'expertise, puis trois repères. */
.training__proof {
  margin-top: 20px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  gap: clamp(26px, 3.5vw, 44px);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
}

.training__proof-copy { display: grid; gap: 14px; }
.training__proof-copy h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: var(--tracking-display); }
.training__proof-copy p:not(.kicker) { max-width: 76ch; color: var(--ink-muted); line-height: 1.75; }
.training__proof .stats { --stats-cols: 3; }

@media (max-width: 760px) {
  .training__proof .stats { --stats-cols: 1; }
}

.training .case { margin-top: 20px; }

@media (max-width: 900px) {
  .training__heading { grid-template-columns: 1fr; gap: 26px; }
  .training__programme { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Fil d'Ariane, repris de la page d'article ------------------------------ */

.breadcrumb {
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumb a { padding: 4px 0; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb [aria-hidden] { opacity: 0.6; }
.breadcrumb [aria-current] { color: var(--ink-subtle); }

/* --- Modalites --------------------------------------------------------------- */

.training-format { padding: var(--section-y-sm) 0; }
.training-format .rail { margin-top: 26px; }

/* Le bloc « qui forme » ouvre la page : ici en version sombre. */
.training__proof {
  margin-top: var(--section-y-sm);
  border: 1px solid rgba(83, 150, 245, 0.22);
  background:
    radial-gradient(circle at 16% 40%, rgba(23, 104, 255, 0.17), transparent 24rem),
    var(--navy-800);
}

.training__proof-copy h2 { color: var(--ink); font-size: var(--fs-h2-sm); letter-spacing: var(--tracking-display); }
.training__proof-copy p:not(.kicker) { color: var(--ink-muted); }