/* ==========================================================================
   formations.css — section « Formations », calquée sur « Research for a
   Better World » chez stanford.edu (audit-stanford/geometrie.md, remesure
   qui remplace les chiffres de medias.json/scroll-mechanics.md — voir
   ecarts.md, cinquième version). Absorbe l'ancienne section « Chiffres
   clés » (ses 4 compteurs deviennent le Bloc 2 ci-dessous, cf. index.html).
   ========================================================================== */

.formations {
  padding-top: var(--section-py-chapter-top);
  padding-bottom: var(--section-py);
  background-color: var(--white);
}

/* --------------------------------------------------------------------------
   Bloc 1 — en-tête centré, PAS épinglé.
   Écart assumé avec le brief initial : le <header> de « Research for a
   Better World » est en position: relative (aucun épinglage), contrairement
   aux 2 sections qui, elles, répliquent un AUTRE en-tête Stanford réellement
   épinglé (Actualités/Focus filière). Le média associé est en pleine
   largeur de conteneur (1405px, remesuré à 16/9 — voir .formations__media
   plus bas et audit-stanford/geometrie.md), PAS une colonne latérale.
   Largeur de colonne de texte (49rem) et padding-top de section
   (--section-py-chapter-top) alignés sur la même remesure. Conformément à
   la consigne « en cas de contradiction, c'est l'audit qui gagne », ce
   bloc suit l'audit — voir ecarts.md.
   -------------------------------------------------------------------------- */
.formations__intro {
  max-width: 49rem;
  margin-inline: auto;
  text-align: center;
}

.formations__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--black);
}

.formations__lead {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--cool-grey);
}

.formations__intro .link-arrow {
  margin-top: 1.75rem;
  justify-content: center;
}

/* Média plein conteneur, ratio 16/9 — remesuré en direct chez Stanford
   (audit-stanford/geometrie.md) : ce rôle (bannière éditoriale sous un
   en-tête centré, largeur de conteneur) vaut 1405×790.3px sur 4 sections
   différentes du live, systématiquement 16/9, PAS 3/4 (l'ancienne valeur
   venait d'une unique mesure isolée, aujourd'hui contredite par la
   remesure). Corrigé : à 3/4, la vidéo grues/porte-conteneurs (source
   portrait 1080×1920) montrait un grand aplat de ciel vide, le sujet
   relégué en bas de cadre — 16/9 recadre exactement sur les grues. */
.formations__media {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--light-grey);
}

.formations__video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.formations__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-grey);
  color: var(--cool-grey);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

.formations__media.has-no-media .formations__video {
  display: none;
}

/* --------------------------------------------------------------------------
   Bloc 2 — compteurs animés (voir assets/js/counters.js)
   -------------------------------------------------------------------------- */
.formations__counters {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background-color: var(--navy-deep);
}

/* Duo bleu/orange du logo, en alternance — même code couleur que le
   catalogue plus bas (Licences en bleu, Masters en orange), en
   avant-première sur les 2 premiers chiffres. --navy-deep (tokens.css)
   passe l'AA texte avec ces 2 couleurs posées telles quelles. */
.counter:nth-child(odd) {
  --stat-accent: var(--primary-bright);
}

.counter:nth-child(even) {
  --stat-accent: var(--accent-bright);
}

.counter {
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
  border-top: 3px solid var(--stat-accent, var(--primary-bright));
  background-color: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.counter__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--stat-accent, var(--primary-bright));
  font-variant-numeric: tabular-nums;
}

/* Libellé en .eyebrow (demandé) : blanc, pas la couleur du chiffre au-dessus
   — les 2 useraient la même teinte vive côte à côte sans le contraste de
   valeur qui les distingue. */
.formations__counters .eyebrow {
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   Bloc 3 — catalogue complet
   -------------------------------------------------------------------------- */
.formations__catalogue {
  margin-top: clamp(4rem, 7vw, 6rem);
}

.formations__group + .formations__group {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Système bicolore ESM : Licences en bleu, Masters en orange (couleurs
   extraites du logo — voir tokens.css). --card-accent/--card-tint sont
   posées ici, en variables CSS héritées par tout ce que contient le
   groupe (titre, cartes, badge, chip de niveau) : un seul point de
   réglage par groupe plutôt qu'un bleu/orange répété partout. */
.formations__group:first-of-type {
  --card-accent: var(--primary-bright);
  --card-tint: var(--primary-tint);
}

.formations__group:last-of-type {
  --card-accent: var(--accent-bright);
  --card-tint: var(--accent-tint);
}

.formations__group-title {
  display: inline-block;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--card-accent);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fw-h2);
  color: var(--black);
}

.formations__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

@media (min-width: 768px) {
  .formations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .formations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.formation-card {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--border);
  border-top: 4px solid var(--card-accent);
  background-color: var(--white);
  transition: border-color 250ms var(--ease), transform 250ms var(--ease),
              box-shadow 250ms var(--ease);
}

.formation-card:hover,
.formation-card:focus-within {
  border-color: var(--card-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -18px color-mix(in srgb, var(--card-accent) 55%, transparent);
}

.formation-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  color: var(--black);
}

.formation-card__text {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cool-grey);
}

/* Chip arrondi teinté (pas un simple texte gris) : reprend la couleur du
   groupe (bleu Licences / orange Masters). */
.formation-card__level {
  display: inline-flex;
  margin-top: 1.1rem;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background-color: var(--card-tint);
  color: var(--card-accent);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* Master Cadre : carte pleine largeur en fin de groupe Masters, seule
   carte du catalogue à porter une image (photo ESM réelle) — la mise en
   avant visuelle rejoint la mise en avant déjà donnée par le badge et le
   fond teinté. Padding retiré : .formation-card__media et __body gèrent
   chacun leur propre espacement. */
.formation-card--featured {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background-color: var(--sand);
  border-color: var(--sand);
  border-top-color: var(--card-accent);
}

.formation-card--featured:hover,
.formation-card--featured:focus-within {
  border-color: var(--card-accent);
}

.formation-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--light-grey);
}

.formation-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.formation-card__body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

@media (min-width: 640px) {
  .formation-card--featured {
    flex-direction: row;
    align-items: stretch;
  }

  .formation-card__media {
    flex: 0 0 42%;
    aspect-ratio: auto;
  }

  .formation-card__body {
    flex: 1 1 auto;
  }
}

.formation-card__badge {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3em 0.8em;
  background-color: var(--card-accent);
  color: var(--white);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Bloc 4 — focus filière (Droit Maritime et Portuaire)
   Patron du bloc « human-centered AI » chez Stanford : en-tête épinglé,
   830px de scroll mesurés (scroll-mechanics.md) — même mécanique CSS pure
   que .news__head/.section__head. Média à gauche, texte épinglé à droite
   (inverse du Bloc 1, comme demandé).
   -------------------------------------------------------------------------- */
.formations__focus {
  margin-top: clamp(4rem, 7vw, 6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.formations__focus-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--light-grey);
}

.formations__focus-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.formations__focus-content {
  max-width: 46ch;
}

.formations__focus-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--black);
}

.formations__focus-content p {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--cool-grey);
}

/* Intermédiaire entre le h3 (display, --fs-h2) et le chapô (--fs-lead) */
.formations__focus-quote {
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--primary);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--black);
}

.formations__focus-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--cool-grey);
}

.formations__focus-content .link-arrow {
  margin-top: 1.75rem;
}

@media (min-width: 1024px) {
  .formations__focus {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .formations__focus-media {
    flex: 1 1 auto;
    min-width: 0;
  }

  .formations__focus-content {
    position: sticky;
    top: var(--sticky-head-top);
    flex: 0 0 clamp(320px, 32vw, 440px);
  }
}

/* --------------------------------------------------------------------------
   Bloc 5 — débouchés (patron des cartes Actualités, sans date/temps de
   lecture ; photos ESM réelles fixes, jamais de vidéo — ce bloc montre des
   personnes).
   -------------------------------------------------------------------------- */
.formations__outcomes {
  margin-top: clamp(4rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .formations__outcomes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .formations__outcomes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.outcome-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--light-grey);
}

.outcome-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outcome-card__title {
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  color: var(--black);
}

.outcome-card__text {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cool-grey);
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .formation-card {
    transition: border-color 150ms linear;
  }

  .formation-card:hover,
  .formation-card:focus-within {
    transform: none;
  }
}