/* ============================================================
   LA GRIOTHÈQUE — formations afro-diasporiques
   Direction visuelle : Geist Mono partout, palette papier/encre.
   ============================================================ */

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Palette officielle La Griothèque — extraite du deck formation
     "Stratégie de contenu et acquisition client" */
  --paper: #f6f5f3;       /* crème, fond principal */
  --paper-2: #eeebe6;
  --ink: #000000;         /* noir pur */
  --ink-2: #2a2a2a;
  --ink-3: #6b6b6b;       /* muted */
  --rule: rgba(0, 0, 0, 0.18);
  --accent: #ffca00;      /* jaune brand officiel */
  --accent-soft: #ffe071;

  --font-mono: "Geist Mono", "JetBrains Mono", "Courier New", monospace;
  --font-sans: "Geist", "Inter", system-ui, sans-serif;

  /* ---- Échelle typographique canonique ----------------------------------
     Référence pour toute nouvelle UI. Les tailles existantes ont été
     resserrées sur ces paliers (sauf micro-valeurs décoratives < 4px et
     le bloc @media print qui reste en pt). Réutilise ces tokens plutôt
     que des px en dur pour garder la cohérence. */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 56px;

  /* ---- Échelle d'espacement (grille 4px) --------------------------------
     Les marges/paddings du site suivent déjà cette grille pour l'essentiel. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-20: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.lg {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ----- IMPRESSION / EXPORT PDF DU PROGRAMME ------------------ */

@media print {
  @page { margin: 14mm; size: A4; }

  /* Tout le chrome disparait à l'impression */
  .lg__header,
  .lg__footer,
  .lg__formation__stickybar,
  .lg__formation__hero,
  .lg__formation__actions,
  .lg__page-bg,
  .lg__drawer,
  .lg__splash {
    display: none !important;
  }

  html, body {
    background: white !important;
    color: black !important;
    font-family: var(--font-sans), sans-serif !important;
  }

  .lg {
    max-width: none !important;
    padding: 0 !important;
    display: block !important;
  }

  .lg__formation {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Titre + meta : compact, sérieux */
  .lg__formation__title {
    font-size: 28pt !important;
    line-height: 1.05 !important;
    margin: 0 0 8pt !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .lg__formation__kicker { font-size: 9pt !important; margin-bottom: 6pt !important; }
  .lg__formation__tagline {
    font-size: 12pt !important;
    color: #333 !important;
    margin-bottom: 14pt !important;
  }
  .lg__formation__meta {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8pt 12pt !important;
    margin-bottom: 14pt !important;
    border-top: 1pt solid #000 !important;
    border-bottom: 1pt solid #000 !important;
    padding: 8pt 0 !important;
  }
  .lg__formation__meta dt { font-size: 8pt !important; color: #666 !important; margin: 0 !important; }
  .lg__formation__meta dd { font-size: 10pt !important; margin: 0 !important; }

  .lg__formation__block {
    margin-bottom: 12pt !important;
    page-break-inside: avoid;
  }
  .lg__formation__block h2 {
    font-size: 12pt !important;
    font-weight: 700 !important;
    margin: 8pt 0 4pt !important;
    border-bottom: 0.5pt solid #000 !important;
    padding-bottom: 2pt !important;
  }
  .lg__formation__prose, .lg__formation__block li {
    font-size: 10pt !important;
    line-height: 1.4 !important;
    color: black !important;
  }

  /* Bandeau pied de page imprimé : mentions OF + Qualiopi */
  .lg__formation::after {
    content: "LA GRIOTHÈQUE™ — Pilier formation de la SASU LES GRIOTS · Certifié Qualiopi · NDA en cours · formations@lesgriots.com";
    display: block !important;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 0.5pt solid #000;
    font-size: 8pt;
    color: #666;
    text-align: center;
  }

  /* Pas d'animation, pas d'effet */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}

/* Marque LA GRIOTHÈQUE — toujours en weight 700 + ™ */
.lg-brand {
  font-weight: 700;
  white-space: nowrap;
}
.lg-brand::after {
  content: "™";
  font-size: 0.45em;
  vertical-align: super;
  font-weight: 500;
  margin-left: 0.08em;
  letter-spacing: 0;
}
/* Sur viewport étroit, autoriser le wrap pour éviter le débordement */
@media (max-width: 600px) {
  .lg-brand { white-space: normal; }
}
.lg > main {
  flex: 1;
}

/* ----- HEADER -------------------------------------------------- */

.lg__header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  z-index: 50;
}
.lg__header__griot {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  text-decoration: none;
}
.lg__header__griot .lg__hero__griot__wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.lg__header__griot .matrix-griot {
  font-size: 0.85px;
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
}
.lg__header__griot .lg__hero__griot__ring text {
  font-size: 28px;
  letter-spacing: 0.06em;
  fill: var(--ink);
}
/* Wordmark texte — affiché uniquement sur mobile, masqué desktop */
.lg__header__wordmark {
  display: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.lg__menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.lg__menu__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
/* Première ligne : utilitaires, petit */
.lg__menu__row:first-child {
  font-size: 13px;
  gap: 6px;
}
/* Deuxième ligne : nav principale, gros — fluide pour rester sur 1 ligne */
.lg__menu__row:last-child {
  font-size: clamp(16px, 1.8vw, 32px);
  gap: clamp(8px, 1vw, 14px);
}
.lg__menu__sep {
  color: var(--ink);
  font-weight: 500;
}
.lg__menu__link {
  color: inherit;
  text-decoration: none;
  text-transform: lowercase;
}
.lg__menu__link:hover {
  /* Override la règle globale `a:hover { color: var(--accent); }` qui rendait
     le menu jaune au survol. On garde la couleur noire (ink) et on signale
     le hover uniquement par un soulignement, cohérent avec la sobriété N&B
     du reste de l'interface. */
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__menu__link.is-active {
  /* Indicateur de page courante : soulignement (cohérent avec le hover)
     plutôt que barré. Le pointer-events: none reste pour éviter qu'on
     clique sur le lien de la page où on est déjà. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  pointer-events: none;
}

/* Bouton Menu (mobile only) */
.lg__header__menubtn {
  display: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  margin-left: auto;
  text-transform: none;
}

/* Drawer plein écran mobile */
.lg__drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.25);
  animation: lg-fade 0.2s ease;
}
.lg__drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 360px);
  background: var(--ink);
  color: var(--paper);
  padding: 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: lg-slide-right 0.25s ease;
}
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-slide-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

.lg__drawer__close {
  align-self: flex-end;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--paper);
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
}
.lg__drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg__drawer__nav--utility {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--paper);
  gap: 8px;
}
.lg__drawer__item .lg__menu__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-transform: lowercase;
  text-decoration: none;
}
.lg__drawer__nav--utility .lg__menu__link {
  font-size: 18px;
}
.lg__drawer__item .lg__menu__link.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lg__drawer__item .lg__menu__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Griot rotatif au bas du drawer mobile */
.lg__drawer__griot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg__drawer__griot .lg__hero__griot__wrap {
  width: 220px;
  height: 220px;
  aspect-ratio: 1 / 1;
}
.lg__drawer__griot .matrix-griot {
  font-size: 1.8px;
  color: var(--paper);
  line-height: 1;
}
.lg__drawer__griot .lg__hero__griot__ring text {
  fill: var(--paper);
  font-size: 22px;
  letter-spacing: 0.05em;
}

/* ----- SPLASH (home full-screen video + logo) ----------------- */

.lg__splash {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  z-index: 100;
  animation: lg-splash-fade-out 0.6s ease 1.9s forwards;
}
@keyframes lg-splash-fade-out {
  to { opacity: 0; }
}
.lg__splash__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.lg__splash__veil { display: none; }
.lg__splash__center {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Griot+ring noir sur fond jaune brand */
.lg__splash .matrix-griot { color: var(--ink); }
.lg__splash .lg__hero__griot__ring text { fill: var(--ink); }
.lg__splash .lg__hero__griot__wrap {
  width: 520px;
  height: 520px;
}
.lg__splash .matrix-griot { font-size: 4px; }
.lg__splash .lg__hero__griot__ring text {
  font-size: 32px;
  letter-spacing: 0.05em;
}
.lg__splash__sub {
  position: absolute;
  top: calc(50% + 280px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}
.lg__splash__cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: lg-splash-cue 1.6s ease-in-out infinite;
}
@keyframes lg-splash-cue {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ----- MANIFESTO / PRESENTATION (page d'accueil) -------------- */

.lg__manifesto {
  /* Full-bleed comme catalogue/trainers */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 12px 16px 24px;
  position: relative;
}
.lg__manifeste {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
  max-width: 72ch;
}
.lg__manifeste--top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 50px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink);
}
/* Variante hero : manifeste au format titre principal */
.lg__manifeste--hero {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 50px;
  max-width: none;
  width: 100%;
}
.lg__manifeste--hero .lg__manifeste__prose p {
  font-size: clamp(20px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: none;
  width: 100%;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 600px) {
  .lg__manifeste--hero .lg__manifeste__prose p {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
}
.lg__manifeste--hero .lg__manifeste__kicker {
  font-size: 12px;
  margin-bottom: 24px;
}
.lg__manifeste__tagline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 36px 0 0;
  max-width: 32ch;
}
@media (max-width: 600px) {
  .lg__manifeste__tagline { font-size: 22px; margin-top: 24px; }
}
.lg__manifeste__kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  margin: 0 0 18px;
  text-transform: lowercase;
}
.lg__manifeste__prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lg__manifeste__prose p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.lg__manifesto__griot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 180px;
  height: 180px;
  pointer-events: none;
}
.lg__manifesto__griot .matrix-griot { font-size: 1.6px; }
.lg__manifesto__griot .lg__hero__griot__ring text {
  font-size: 36px;
  letter-spacing: 0.04em;
  fill: var(--ink);
}
@media (max-width: 900px) {
  .lg__manifesto__griot { width: 120px; height: 120px; }
  .lg__manifesto__griot .matrix-griot { font-size: 1.1px; }
}
.lg__manifesto__hero {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink);
  max-width: none;
  width: 100%;
}
.lg__manifesto__sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  text-stroke: 1px var(--ink);
  width: 100%;
}
.lg__manifesto__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.lg__manifesto__cols article h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 10px;
  color: var(--ink);
}
.lg__manifesto__cols article p {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
}
.lg__manifesto__more {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.lg__manifesto__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg__manifesto__kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.lg__manifesto__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  max-width: 18ch;
}
.lg__manifesto__lead {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 40px;
}
.lg__manifesto__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg__hero__griot__wrap {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matrix-griot {
  font-family: var(--font-mono);
  font-size: 3px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  white-space: pre;
  margin: 0;
  user-select: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.lg__hero__griot__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: lg-ring-spin 60s linear infinite;
  z-index: 2;
}
.lg__hero__griot__ring text {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--ink);
  text-transform: uppercase;
}
@keyframes lg-ring-spin {
  to { transform: rotate(360deg); }
}
/* ----- PAGE FORMATION (détail) -------------------------------- */

.lg__formation {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 16px 60px;
}

/* ===================================================================
   BANNIÈRE CTA HORIZONTALE — bloc blanc qui chevauche le bas de la vidéo,
   contient le tagline + colonnes (sessions, formateur, tarif) + bouton.
   Style inspiré SCA/NABA.
   =================================================================== */
.lg__cta-banner {
  position: relative;
  z-index: 5;
  margin: -200px auto 40px;   /* chevauche le bas de la vidéo */
  max-width: 1200px;
  width: calc(100% - 64px);
  background: var(--paper);
  padding: 40px 48px 32px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  font-family: var(--font-sans);
}
.lg__cta-banner__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.lg__cta-banner__tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-2, #555);
  margin: 0 0 28px;
  max-width: 920px;
}
.lg__cta-banner__rule {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0 0 28px;
  opacity: 0.4;
}
.lg__cta-banner__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr auto;
  gap: 32px;
  align-items: start;
}
.lg__cta-banner__col {
  min-width: 0;
}
.lg__cta-banner__col__k {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  margin: 0 0 8px;
}
.lg__cta-banner__col__v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 4px;
}
.lg__cta-banner__col__v--muted {
  font-weight: 400;
  color: var(--ink-3, #888);
}
.lg__cta-banner__col__v--small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3, #666);
  margin-top: 4px;
}
.lg__cta-banner__col--cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
}
.lg__cta-banner__btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 24px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.lg__cta-banner__btn:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--ink);
  transform: translateY(-1px);
}

/* ===================================================================
   MINI-CARTE CTA (style SENZA) — apparaît quand on scrolle au-delà de la
   bannière CTA. Carte sticky fixed à droite avec prix + durée + badges
   + dates + bouton réserver + lien financement. Mobile : barre compacte
   en bas avec prix + bouton.
   =================================================================== */
/* ===================================================================
   BLOC CTA FINAL pleine largeur — fond noir, dernier rappel en bas de
   page. Inspiré de The Futur / Clearance Kit.
   =================================================================== */
.lg__cta-final {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  margin: 60px -16px -60px;
  padding: 100px 32px 110px;
  font-family: var(--font-sans);
  border-top: 1px solid var(--ink);
}
/* Vidéo (ou image) en background du CTA final — défile en loop muté. */
.lg__cta-final__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile sombre semi-transparent par-dessus la vidéo pour garder la
   lisibilité du texte. */
.lg__cta-final__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 1;
}
.lg__cta-final__inner {
  position: relative;
  z-index: 2;
}
.lg__cta-final__inner {
  /* Wrapper centré dans la page (max-width + margin auto) mais texte
     aligné à gauche à l'intérieur. */
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
.lg__cta-final__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
  margin: 0 0 24px;
}
.lg__cta-final__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 10px;
}
.lg__cta-final__author {
  font-size: 18px;
  font-weight: 400;
  color: var(--paper);
  opacity: 0.6;
  margin: 0 0 36px;
}
.lg__cta-final__price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 32px;
  line-height: 1;
}
.lg__cta-final__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  color: var(--ink);
  padding: 16px 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.lg__cta-final__btn:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--accent);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  /* Mobile : padding-bottom de .lg__formation = 96px (barre fixed bottom).
     On compense par margin-bottom: -96px pour coller au footer. */
  .lg__cta-final { margin-bottom: -96px; }
}
@media (max-width: 700px) {
  .lg__cta-final { padding: 64px 20px 72px; margin-top: 40px; }
  .lg__cta-final__title { font-size: clamp(28px, 8vw, 40px); }
  .lg__cta-final__price { font-size: 30px; margin-bottom: 24px; }
  .lg__cta-final__author { font-size: 15px; margin-bottom: 28px; }
}

/* ===================================================================
   LAYOUT 2 COLONNES style SENZA / Clearance Kit (The Futur)
   =================================================================== */
.lg__formation__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
  margin-top: 8px;
  /* Pousse tout le layout (et donc la sidebar) vers la gauche. */
  padding-right: 180px;
}
.lg__formation__main { min-width: 0; }
.lg__formation__side {
  position: sticky;
  /* Header (121) + titre sticky variable + menu d'onglets (~60) + marge.
     Évite que la carte passe sous les onglets quand on scrolle. */
  top: calc(121px + var(--lg-title-h, 80px) + 72px);
  align-self: start;
}
@media (max-width: 700px) {
  .lg__formation__side {
    /* Mobile : header (85) + titre + onglets (~50). */
    top: calc(85px + var(--lg-title-h, 60px) + 62px);
  }
}
@media (min-width: 901px) {
  /* Neutralise les "edge-to-edge" (margin: 0 -16px) qui sortiraient
     de la colonne main dans un layout 2 cols. */
  .lg__formation__main .lg__tabsec,
  .lg__formation__main .lg__section,
  .lg__formation__main .lg__formation__sections {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 900px) {
  .lg__formation__layout { display: block; }
  .lg__formation__side {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }
  .lg__formation { padding-bottom: 96px; }
}

/* ===================================================================
   CTA CARD (dans la sidebar) — style SENZA
   =================================================================== */
.lg__cta-mini {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 22px 20px;
  font-family: var(--font-sans);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  text-align: left;
}
.lg__cta-mini__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.lg__cta-mini__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 14px;
}
.lg__cta-mini__price {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.lg__cta-mini__price__ht {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--ink-3, #888);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.lg__cta-final__price__ht {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.lg__cta-mini__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}
/* Mention "Formation certifiante" : ligne courte et lisible juste sous le
   prix, avant les badges techniques (CPF / OPCO / RS). */
.lg__cta-mini__cert {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
}
.lg__cta-mini__cert__code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3, #888);
}
.lg__cta-mini__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.lg__cta-mini__badges span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
}
.lg__cta-mini__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.lg__cta-mini__meta li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.lg__cta-mini__meta li:last-child { border-bottom: 0; }
.lg__cta-mini__btn {
  display: block;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 18px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  transition: background 0.15s ease, color 0.15s ease, outline 0.15s ease;
}
.lg__cta-mini__btn:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--ink);
}
/* Variante "ghost" du bouton CTA dans la carte : fond clair, contour. */
.lg__cta-mini__btn--ghost {
  background: var(--paper);
  color: var(--ink);
  outline: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  width: 100%;
  text-align: center;
}
.lg__cta-mini__btn--ghost:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--ink);
}

/* ===================================================================
   MODALE "Télécharger le programme" — formulaire de capture de leads.
   Overlay sombre + panneau central avec form épuré.
   =================================================================== */
.lg__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lg-modal-fade 0.18s ease;
}
@keyframes lg-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lg__modal__panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  width: 100%;
  max-width: 480px;
  padding: 40px 36px 32px;
  font-family: var(--font-sans);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.lg__modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink);
  padding: 4px 8px;
}
.lg__modal__close:hover { text-decoration: underline; }
.lg__modal__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  margin: 0 0 8px;
}
.lg__modal__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.lg__modal__intro {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2, #555);
  margin: 0 0 24px;
}
.lg__modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lg__modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .lg__modal__row { grid-template-columns: 1fr; gap: 14px; }
}
.lg__modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg__modal__field__k {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}
.lg__modal__field input {
  font-family: var(--font-sans);
  font-size: 15px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 10px 12px;
  color: var(--ink);
  outline: none;
}
.lg__modal__field input:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
}
.lg__modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2, #555);
  margin-top: 6px;
}
.lg__modal__consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.lg__modal__submit {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.lg__modal__submit:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--ink);
}
@media (max-width: 700px) {
  .lg__modal__panel { padding: 32px 22px 24px; max-width: 100%; }
  .lg__modal__title { font-size: 22px; }
}
.lg__cta-mini__sub {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
}
.lg__cta-mini__sub:hover { color: var(--ink-3, #555); }

/* Mobile : la sidebar parent passe en fixed bottom (.lg__formation__side).
   La carte se compacte en barre prix + bouton. */
@media (max-width: 900px) {
  .lg__cta-mini {
    border: 0;
    border-top: 1px solid var(--ink);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .lg__cta-mini__head {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .lg__cta-mini__price { font-size: 18px; }
  .lg__cta-mini__title,
  .lg__cta-mini__hint,
  .lg__cta-mini__badges,
  .lg__cta-mini__meta,
  .lg__cta-mini__sub { display: none; }
  .lg__cta-mini__btn {
    margin-bottom: 0;
    padding: 12px 18px;
    flex: 1 1 auto;
    max-width: 60%;
  }
}

@media (max-width: 900px) {
  .lg__cta-banner {
    margin: -100px 16px 32px;
    width: auto;
    padding: 28px 22px 24px;
  }
  .lg__cta-banner__tagline {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .lg__cta-banner__rule { margin-bottom: 20px; }
  .lg__cta-banner__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lg__cta-banner__col--cta {
    justify-content: stretch;
  }
  .lg__cta-banner__btn {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
  }
}
.lg__cta-card__inner {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 24px 22px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.lg__cta-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 16px;
}
.lg__cta-card__price {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lg__cta-card__price__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3, #888);
  text-transform: uppercase;
}
.lg__cta-card__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg__cta-card__meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  line-height: 1.3;
}
.lg__cta-card__meta__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3, #888);
  text-transform: uppercase;
  flex-shrink: 0;
}
.lg__cta-card__meta__v {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
}
.lg__cta-card__btn {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 18px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.lg__cta-card__btn:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-1px);
}
.lg__cta-card__sub {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__cta-card__sub:hover { color: var(--ink-3, #555); }

/* Mobile : on neutralise le track et la carte devient une barre fixe en bas. */
@media (max-width: 900px) {
  .lg__cta-track {
    position: static;
    width: auto;
    height: 0;
  }
  .lg__cta-card {
    position: fixed;
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 30;
  }
  .lg__cta-card__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid var(--ink);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .lg__cta-card__head {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .lg__cta-card__price { font-size: 22px; }
  .lg__cta-card__price__hint { display: none; }
  .lg__cta-card__meta { display: none; }
  .lg__cta-card__sub { display: none; }
  .lg__cta-card__btn {
    margin-bottom: 0;
    padding: 12px 18px;
    flex: 1 1 auto;
    max-width: 60%;
  }
}

.lg__formation__stickybar {
  position: fixed;
  top: calc(121px + var(--lg-title-h, 60px)); /* sous le titre sticky */
  left: 0;
  right: 0;
  z-index: 40;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ink);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  animation: lg-stickybar-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (max-width: 600px) {
  .lg__formation__stickybar { top: calc(85px + var(--lg-title-h, 50px)); }
}
@keyframes lg-stickybar-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* (anciennement hint GPU pour le transform — plus nécessaire avec font-size) */
.lg__formation__stickybar__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1px solid var(--ink);
}
.lg__formation__stickybar__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}
.lg__formation__stickybar__link {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  opacity: 0;
  transform: translateX(40px);
  animation: lg-slide-in-right 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.lg__formation__stickybar__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__formation__stickybar__link.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__formation__stickybar__duration {
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  text-transform: none;
  color: var(--ink-3);
  opacity: 0;
  transform: translateX(40px);
  animation: lg-slide-in-right 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s forwards;
}
.lg__formation__stickybar__price {
  padding-left: 16px;
  border-left: 1px solid var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  text-transform: none;
  opacity: 0;
  transform: translateX(40px);
  animation: lg-slide-in-right 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s forwards;
}
@keyframes lg-slide-in-right {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .lg__formation__stickybar { padding: 8px 14px; font-size: 11px; gap: 8px; }
  .lg__formation__stickybar__title { max-width: 50%; padding-right: 8px; }
  .lg__formation__stickybar__nav { gap: 12px; }
}
@media (max-width: 600px) {
  .lg__formation__stickybar { top: 85px; }
}
@media (max-width: 600px) {
  .lg__formation__stickytitle {
    top: 85px;
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* Anciennes anchors gardées pour compat éventuelle, mais non rendues */
.lg__formation__anchors {
  display: none;
}
@media (max-width: 600px) {
  .lg__formation__anchors {
    top: 85px;
    gap: 4px 18px;
    font-size: 13px;
    padding: 6px 14px;
    margin: 10px -14px 18px;
  }
}
.lg__formation__anchors a {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.lg__formation__anchors a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__formation__anchors__title {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-right: auto;
  padding-right: 16px;
  border-right: 1px solid var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
@media (max-width: 700px) {
  .lg__formation__anchors__title {
    max-width: 100%;
    margin-bottom: 4px;
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
    width: 100%;
  }
}

.lg__formation__hero {
  position: relative;
  width: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  margin: 0 -16px 0; /* edge-to-edge + colle au premier divider */
}
.lg__formation__hero img,
.lg__formation__hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg__formation__hero__tagline {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  margin: 0;
  z-index: 2;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper);
  max-width: 30ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
@media (max-width: 700px) {
  .lg__formation__hero__tagline {
    bottom: 20px;
    left: 18px;
    right: 18px;
    font-size: clamp(22px, 7vw, 36px);
  }
}
.lg__formation__hero__credit {
  position: absolute;
  bottom: 12px;
  right: 12px;
  margin: 0;
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}
@media (max-width: 700px) {
  .lg__formation__hero { aspect-ratio: 4 / 3; margin: 0 -16px 0; }
  .lg__formation__hero__credit { font-size: 10px; bottom: 8px; right: 8px; }
}
.lg__formation__head {
  /* sentinel invisible pour l'observer "scrollé" — pas de bordure ni de spacing */
  height: 0;
  margin: 0;
  padding: 0;
}
.lg__formation__kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 14px;
  color: var(--ink);
}
.lg__formation__title {
  font-family: var(--font-sans);
  font-weight: 500;
  /* Font-size responsive — autorise le wrap sur 2 lignes si le titre est long.
     On garde useFitOne sur le ref mais le clamp prend le dessus visuellement. */
  font-size: clamp(36px, 6vw, 80px);
  /* line-height un peu plus généreux + padding-bottom suffisant pour que la
     descendante des g/q/p/y/j ne soit pas coupée par le border-bottom. */
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 -16px 0;
  padding: 12px 16px 20px;
  color: var(--ink);
  white-space: normal;
  overflow: visible;
  display: block;
  width: auto;
  position: sticky;
  top: 121px;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  transition: font-size 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* En mode stuck : taille réduite fixe pour rester compact en sticky. */
.lg__formation__title.is-stuck {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.1;
  padding: 6px 16px 8px;
}
@media (max-width: 600px) {
  .lg__formation__title { top: 85px; font-size: clamp(26px, 7vw, 40px); }
  .lg__formation__title.is-stuck { font-size: clamp(16px, 4.5vw, 22px); }
}

/* === Diviseur de section façon SUPSI / id-w =========================
   Petit label mono + gros titre auto-fit sur une ligne, rule edge-to-edge.
   Réutilisé pour chaque section de la page formation/workshop. */
/* Sticker LES GRIOTS — placement inline sous le manifeste de la home,
   accent jaune brand visible dès l'arrivée sur le site. */
/* Hero manifesto : texte à sa place naturelle, sticker derrière qui déborde */
.lg__manifeste--hero {
  position: relative;
  isolation: isolate;
}

/* ===========================================================
   HERO SPLASH — sur la home en haut de page : vidéo plein viewport,
   griot géant centré, menu caché. Au scroll, le menu apparaît,
   le griot revient à sa taille normale.
   =========================================================== */

/* Sur la home, le header est fixed pour que le hero touche le haut.
   Caché en splash mode, visible dès qu'on scroll. */
body.is-home .lg__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--paper);
}
body.is-home:not(.is-scrolled) .lg__header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}
.lg__header {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.lg__hero-yard {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  background: var(--ink);
}
/* En mode splash, le hero remplit tout le viewport */
body.is-home:not(.is-scrolled) .lg__hero-yard {
  height: 100vh;
  max-height: 100vh;
  aspect-ratio: auto;
}
.lg__hero-yard {
  transition: max-height 0.5s ease, height 0.5s ease;
}

/* GRIOT — overlay top-left du hero, même taille que sur la page contact */
.lg__hero-yard__brand {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 320px;
  height: 320px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  color: var(--paper);
  opacity: 1;
  transition: opacity 0.35s ease;
}
.lg__hero-yard__brand .lg__hero__griot__wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.lg__hero-yard__brand .matrix-griot {
  font-size: 2.6px;
  color: var(--paper);
}
.lg__hero-yard__brand .lg__hero__griot__ring text {
  fill: var(--paper);
  font-size: 36px;
  letter-spacing: 0.04em;
}
body.is-scrolled .lg__hero-yard__brand {
  opacity: 0;
}
@media (max-width: 900px) {
  .lg__hero-yard__brand { width: 200px; height: 200px; top: 16px; left: 16px; }
  .lg__hero-yard__brand .matrix-griot { font-size: 1.6px; }
}
/* Mobile : remplacer le griot rotatif par un wordmark texte sur la vidéo hero */
@media (max-width: 700px) {
  .lg__hero-yard__brand { display: none; }
}
.lg__hero-yard__wordmark {
  display: none;
}
@media (max-width: 700px) {
  .lg__hero-yard__wordmark {
    display: block;
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--paper);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    margin: 0;
  }
}

/* Bouton "Voir la vidéo" — passe la vidéo hero en fullscreen avec son + controls */
.lg__hero-yard__watch {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lg__hero-yard__watch:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
@media (max-width: 700px) {
  .lg__hero-yard__watch { top: 16px; right: 16px; font-size: 10px; padding: 7px 10px; }
}

/* Sticker jaune rond — bottom-right du hero vidéo, "LA GRIOTHÈQUE" en cercle */
.lg__yellow-sticker {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 3;
  width: 96px;
  height: 96px;
  display: block;
  text-decoration: none;
  animation: lg-sticker-spin 22s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease;
}
.lg__yellow-sticker:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.lg__yellow-sticker svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.lg__yellow-sticker__griot {
  position: absolute;
  inset: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.lg__yellow-sticker__griot .matrix-griot {
  font-size: 0.5px;
  line-height: 0.82;
  color: var(--ink);
  margin: 0;
  white-space: pre;
}
.lg__yellow-sticker__text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--ink);
}
@keyframes lg-sticker-spin {
  to { transform: rotate(360deg); }
}
.lg__yellow-sticker:hover { animation-play-state: paused; }
@media (max-width: 700px) {
  .lg__yellow-sticker { width: 72px; height: 72px; bottom: 14px; right: 14px; }
}
@media print {
  .lg__yellow-sticker { display: none !important; }
}

/* LOADING — scramble sous le griot pendant que la vidéo charge */
.lg__hero-yard__loading {
  position: absolute;
  top: 356px;
  left: 24px;
  width: 320px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  pointer-events: none;
  animation: lg-loading-blink 1.4s ease-in-out infinite;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@keyframes lg-loading-blink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (max-width: 900px) {
  .lg__hero-yard__loading {
    top: 232px;
    left: 16px;
    width: 200px;
    font-size: 11px;
    letter-spacing: 0.2em;
  }
}

/* Scroll hint au bas du hero, disparaît au scroll */
.lg__hero-yard__scrollhint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
  animation: lg-scrollhint-bob 1.6s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.is-scrolled .lg__hero-yard__scrollhint { opacity: 0; }
@keyframes lg-scrollhint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}
.lg__hero-yard__media {
  position: absolute;
  inset: 0;
}
.lg__hero-yard__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg__hero-yard__play {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  border-radius: 2px;
  transition: background 0.2s ease;
}
.lg__hero-yard__play:hover {
  background: var(--ink);
  color: var(--accent);
}
.lg__hero-yard__tagline {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  z-index: 2;
  color: var(--paper);
  pointer-events: none;
}
.lg__hero-yard__tagline p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
@media (max-width: 700px) {
  .lg__hero-yard { aspect-ratio: 4 / 5; max-height: none; }
  .lg__hero-yard__play { top: 16px; left: 16px; font-size: 10px; padding: 6px 10px; }
  .lg__hero-yard__tagline { bottom: 33.333vh; left: 18px; right: 18px; }
  .lg__hero-yard__tagline p { font-size: clamp(22px, 7vw, 36px); }
}

/* ===========================================================
   LATEST — liste des formations à l'affiche style YARD
   =========================================================== */
.lg__latest {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 80px 16px 80px;
  text-align: center;
  background: var(--paper);
  border-top: 1px solid var(--ink);
}
/* Section "Nos formations / Workshops" — typo alignée sur la
   "souscrire à notre newsletter" du menu (.lg__menu__link dans la
   première ligne du menu) : sans-serif, weight 500, lowercase, 13px.
   Tabs + métadonnées + titre formation partagent la même grammaire
   typographique pour un rendu sobre, éditorial, minimaliste. */
.lg__latest__tabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: lowercase;
  margin: 0 0 40px;
  color: var(--ink-3);
}
.lg__latest__tabs .is-active { color: var(--ink); }
.lg__latest__tabs a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lg__latest__tabs a:hover { color: var(--ink); }
.lg__latest__list {
  display: flex;
  flex-direction: column;
}
.lg__latest__row {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: baseline;
  gap: 24px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.18s ease;
}
.lg__latest__row:hover { opacity: 0.55; }
.lg__latest__row__left,
.lg__latest__row__right {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: lowercase;
  color: var(--ink-2);
  align-self: center;
}
.lg__latest__row__left  { text-align: left; }
.lg__latest__row__right { text-align: right; }
.lg__latest__row__title {
  font-family: var(--font-sans);
  /* Même graisse que la typo menu (weight 500) — c'est juste la TAILLE
     qui crée la hiérarchie : titre nettement plus gros que les méta
     left/right (13px), ce qui le pose comme l'élément principal de
     chaque ligne. */
  font-weight: 500;
  /* Taille intermédiaire entre la version actuelle (22-36) et l'ancienne
     (36-78). Donne plus de présence sans tomber dans le titre énorme. */
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-align: center;
  /* On préserve la casse d'origine des titres (ex. "Stratégie de marque",
     "Filmer au téléphone") qui commencent par une majuscule. Les tabs
     et métadonnées restent en lowercase pour le côté "menu" sobre, mais
     le titre formation respecte la casse éditoriale. */
  text-transform: none;
}
@media (max-width: 700px) {
  .lg__latest { padding: 50px 14px 60px; }
  .lg__latest__tabs { font-size: 12px; gap: 16px; margin-bottom: 28px; }
  .lg__latest__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .lg__latest__row__left,
  .lg__latest__row__right {
    text-align: center;
    font-size: 12px;
  }
  .lg__latest__row__title { font-size: 32px; }
}

/* ----- NEEDS — section noire "Tout ce qu'un créatif a besoin" ----- */
/* On garde la DA originale (FormationRow) : titre aligné à gauche,
   label mono au-dessus, divider edge-to-edge — mais sur fond ink. */
.lg__needs {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ink);
  color: var(--paper);
  padding: 90px 0 100px;
}
.lg__needs__inner {
  padding: 0 16px;
}
.lg__needs__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
  color: var(--paper);
  text-transform: none;
  text-align: left;
  max-width: none;
}
.lg__needs__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  margin: 0;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.lg__needs__filters__btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--paper);
  cursor: pointer;
  text-transform: lowercase;
}
.lg__needs__filters__btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__needs__filters__btn.is-active {
  text-decoration: line-through;
}
/* Override des couleurs des rows sur fond noir */
.lg__needs__rows .lg__row {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--paper);
}
.lg__needs__rows .lg__row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.lg__needs__rows .lg__row__label {
  color: rgba(255, 255, 255, 0.55);
}
.lg__needs__rows .lg__row__title {
  color: var(--paper);
}
.lg__needs__cta {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}
.lg__needs__cta:hover { color: var(--paper); border-bottom-color: var(--paper); }
@media (max-width: 700px) {
  .lg__needs { padding: 60px 0 70px; }
  .lg__needs__inner { padding: 0 14px; }
  .lg__needs__title {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 24px;
  }
  .lg__needs__filters {
    font-size: clamp(16px, 5vw, 22px);
    gap: 12px;
    padding: 12px 0;
  }
}
/* Texte au-dessus du sticker */
.lg__manifeste--hero .lg__manifeste__prose {
  position: relative;
  z-index: 2;
}
/* Sticker derrière le texte — large mais avec marge respiratoire vs bords
   du viewport (40px desktop, 16px mobile). Texte intact. */
.lg__manifeste__sticker {
  position: absolute;
  top: -64px;
  bottom: -64px;
  left: 50%;
  width: calc(100vw - 80px);
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 36px;
  background-color: var(--accent);
  /* Texture papier : noise SVG superposé en multiplicateur sombre faible */
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 8px 22px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.3s ease;
}
.lg__manifeste__sticker:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 12px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 700px) {
  .lg__manifeste__sticker {
    top: -28px;
    bottom: -28px;
    width: calc(100vw - 32px);
    border-radius: 22px;
  }
}
@media (max-width: 700px) {
  .lg__manifeste__sticker { width: 120px; margin-top: 28px; }
}
@media print {
  .lg__manifeste__sticker { display: none !important; }
}

/* Sticker LES GRIOTS (variante fixe — désactivée pour l'instant,
   conservée au cas où on voudrait la réactiver sur certaines pages). */
.lg__promo-sticker {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 35;
  width: 118px;
  height: 118px;
  display: block;
  transform: rotate(-8deg);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 0.3s ease;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
  animation: lg-promo-pop 0.45s cubic-bezier(0.2, 1.3, 0.5, 1) 0.4s both;
}
.lg__promo-sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.lg__promo-sticker:hover {
  transform: rotate(0deg) scale(1.08);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
@keyframes lg-promo-pop {
  0%   { transform: rotate(-30deg) scale(0); opacity: 0; }
  60%  { transform: rotate(0deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
@media (max-width: 700px) {
  .lg__promo-sticker {
    width: 92px;
    height: 92px;
    bottom: 14px;
    left: 14px;
  }
}
@media print {
  .lg__promo-sticker { display: none !important; }
}

/* CTA discret — pastille fixe à droite, alignée verticalement avec
   la barre du titre quand elle est sticky. */
.lg__formation__cta-reserve {
  position: fixed;
  top: 121px;
  right: 16px;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  height: calc(var(--lg-title-h, 60px) - 8px);
  padding: 0 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: lowercase;
  text-decoration: none;
  border: 0;
  transform: translateY(4px);
  transition: background 0.15s ease, color 0.15s ease;
  animation: lg-cta-in 0.18s ease;
}
.lg__formation__cta-reserve:hover {
  background: var(--accent, var(--ink));
  color: var(--paper);
}
@keyframes lg-cta-in {
  from { opacity: 0; transform: translateY(4px) translateX(8px); }
  to { opacity: 1; transform: translateY(4px) translateX(0); }
}
@media (max-width: 700px) {
  .lg__formation__cta-reserve {
    top: 85px;
    right: 12px;
    font-size: 12px;
    padding: 0 10px;
  }
}
@media print {
  .lg__formation__cta-reserve { display: none !important; }
}

/* Prochaines sessions — bloc toujours visible sous la vidéo */
.lg__formation__upcoming {
  margin: 0 0 24px;
  padding: 0;
}
.lg__formation__upcoming__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding: 12px 0 14px;
  margin: 0 -16px 0;
  padding-left: 16px;
  padding-right: 16px;
}
.lg__formation__upcoming__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
}
.lg__formation__upcoming__more {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.lg__formation__upcoming__more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Ligne de modalité (INTER) — petite info en mono, sobre, juste sous le head */
.lg__formation__upcoming__modality {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0,0,0,0.65));
  margin: 0 16px 14px;
  padding: 0;
}
.lg__formation__upcoming__empty {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  padding: 14px 0;
}
.lg__formation__upcoming__empty a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__formation__upcoming .lg__formation__sessions {
  margin: 0;
}

/* Sommaire sticky plié — un seul bouton compact, panneau au clic.
   Bouton style mono terminal (cohérent avec le menu burger mobile). */
.lg__sommaire {
  position: sticky;
  top: calc(121px + var(--lg-title-h, 80px));
  z-index: 28;
  margin: 0 -16px;
  background: var(--paper);
}
.lg__sommaire__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--paper);
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 16px;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.lg__sommaire__btn:hover { background: var(--ink); color: var(--paper); }
.lg__sommaire__btn.is-open {
  background: var(--ink);
  color: var(--paper);
}
.lg__sommaire__btn__arrow {
  font-family: var(--font-sans);
  font-size: 14px;
  margin-left: 12px;
}
.lg__sommaire__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 24px 16px 28px;
  max-height: 70vh;
  overflow-y: auto;
  animation: lg-section-in 0.18s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.lg__sommaire__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 48px;
}
.lg__sommaire__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  color: var(--ink);
  text-align: left;
}
.lg__sommaire__item:hover .lg__sommaire__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__sommaire__item.is-active .lg__sommaire__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__sommaire__item.is-open .lg__sommaire__label {
  text-decoration: line-through;
}
.lg__sommaire__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  flex-shrink: 0;
  min-width: 24px;
}
@media (max-width: 700px) {
  .lg__sommaire { top: calc(85px + var(--lg-title-h, 60px)); }
  .lg__sommaire__list { grid-template-columns: 1fr; }
  .lg__sommaire__item { font-size: 18px; }
  .lg__sommaire__panel { max-height: 60vh; padding: 18px 14px 24px; }
}

/* ===================================================================
   Barre d'onglets sticky — remplace le sommaire dans la page formation.
   4 boutons côte à côte sous le titre sticky, scrollables horizontalement
   sur mobile si nécessaire.
   =================================================================== */
.lg__tabs {
  position: sticky;
  top: calc(121px + var(--lg-title-h, 80px));
  z-index: 28;
  margin: 0 -16px;
  padding: 16px 24px;
  background: var(--paper);
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  white-space: nowrap;
}
/* Wrapper scrollable interne — contient les onglets + séparateurs */
.lg__tabs__scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  flex: 1 1 auto;
}
.lg__tabs__scroll::-webkit-scrollbar { display: none; }
/* Flèches prev/next — masquées sur desktop, visibles sur mobile */
.lg__tabs__nav {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  padding: 4px 8px;
  flex-shrink: 0;
}
.lg__tabs__nav:hover { opacity: 0.6; }
.lg__tabs__btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* Typo proche du menu principal (.lg__menu__link) mais avec majuscule
     initiale conservée ("Présentation", "Objectifs"…). */
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}
.lg__tabs__sep {
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.1;
  user-select: none;
}
/* Bouton CTA "Réserver →" à la fin du menu sticky — toujours visible quand
   le menu est collé en haut. */
.lg__tabs__cta {
  margin-left: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lg__tabs__cta:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--ink);
}
/* Vestige : numéros 01/02… masqués (la nouvelle structure n'en a plus). */
.lg__tabs__num { display: none; }
.lg__tabs__btn:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__tabs__btn.is-active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .lg__tabs {
    top: calc(85px + var(--lg-title-h, 60px));
    padding: 10px 6px;
    gap: 4px;
    align-items: center;
  }
  /* Flèches visibles, à gauche et à droite */
  .lg__tabs__nav { display: inline-flex; align-items: center; }
  /* Scroll interne centré sur le bouton actif (scrollIntoView au changement) */
  .lg__tabs__scroll {
    justify-content: flex-start;
    gap: 10px;
    /* Padding pour que le bouton actif puisse être centré visuellement */
    scroll-padding-inline: 30%;
  }
  .lg__tabs__btn { font-size: 15px; }
  .lg__tabs__sep { font-size: 15px; }
  /* CTA mobile : version compacte */
  .lg__tabs__cta { padding: 6px 10px; font-size: 12px; }
}

/* Liste à puces générique pour les contenus type pré-requis */
.lg__formation__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg__formation__bullets li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.lg__formation__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
  font-weight: 600;
}

/* Notre approche en mini-points dans l'onglet La Griothèque */
.lg__approche-mini {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 24px 0 28px;
}
.lg__approche-mini__point {
  padding: 20px 0;
  border-top: 1px solid var(--ink);
}
.lg__approche-mini__point:last-child {
  border-bottom: 1px solid var(--ink);
}
.lg__approche-mini__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
}
.lg__approche-mini__point p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 700px) {
  .lg__approche-mini__title { font-size: 18px; }
  .lg__approche-mini__point p { font-size: 14px; }
}

/* FAQ : style des questions H4 dans le body de l'onglet FAQ */
.lg__faq h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  margin: 20px 0 6px;
  color: var(--ink);
}
.lg__faq h4:first-child { margin-top: 0; }
.lg__faq p { margin: 0 0 12px; }

/* ===================================================================
   Sections affichées dans la zone de contenu de l'onglet actif.
   Plus d'accordéon : tout est ouvert, empilé.
   =================================================================== */
.lg__tabsec {
  margin: 0 -16px;
  padding: 16px 16px;
  animation: lg-section-in 0.2s ease;
}
.lg__tabsec:first-child { padding-top: 24px; }
.lg__tabsec:last-child { padding-bottom: 40px; }
.lg__tabsec__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 -16px 20px;
  color: var(--ink);
  text-transform: none;
  padding: 12px 16px;
  border-bottom: 0;
  /* Sticky : reste sous le menu d'onglets pour qu'on sache toujours dans
     quelle section on est en train de lire. */
  position: sticky;
  top: calc(121px + var(--lg-title-h, 80px) + 56px);
  z-index: 22;
  background: var(--paper);
}
@media (max-width: 700px) {
  .lg__tabsec__title {
    top: calc(85px + var(--lg-title-h, 60px) + 48px);
  }
}
/* Sous-section : titres H3 pour les sections suivantes d'un même onglet
   (ex : Public et Pré-requis dans l'onglet Présentation). Style accordéon
   (déroulant), même pattern que les objectifs / programme. */
.lg__tabsec--sub {
  margin-top: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.lg__tabsec--sub:last-child {
  border-bottom: 1px solid var(--ink);
}
/* Header cliquable du <details> — padding symétrique 16px haut/bas pour
   un espacement homogène avec les autres blocs. */
.lg__tabsec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lg__tabsec__head::-webkit-details-marker { display: none; }
.lg__tabsec__head::marker { display: none; }
.lg__tabsec__head:hover { opacity: 0.7; }
.lg__tabsec__chev {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.2s ease;
  margin-left: 16px;
}
.lg__tabsec--coll[open] .lg__tabsec__chev { transform: rotate(45deg); }
.lg__tabsec--coll .lg__tabsec__body {
  padding: 4px 16px 22px;
}
/* L'ancien style H3 reste pour les cas où on garde des sous-titres sans
   accordéon (au cas où on veut un mix plus tard). */
.lg__tabsec__title--sub {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: 0;
}
.lg__tabsec__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3, #888);
  flex-shrink: 0;
  min-width: 28px;
  text-transform: none;
}
.lg__tabsec__label {
  flex: 1;
}
.lg__tabsec__body {
  padding-top: 4px;
}
.lg__tabsec__body .lg__formation__prose {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
}
.lg__tabsec__body ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
}
.lg__tabsec__body li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
}
.lg__tabsec__body li .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3, #888);
  flex-shrink: 0;
  min-width: 24px;
}
@media (max-width: 700px) {
  .lg__tabsec { padding: 24px 14px 20px; }
  .lg__tabsec:first-child { padding-top: 28px; }
  .lg__tabsec__title { font-size: clamp(20px, 6vw, 28px); margin-bottom: 14px; }
  .lg__tabsec__body .lg__formation__prose { font-size: 15px; line-height: 1.5; }
  .lg__tabsec__body ol { grid-template-columns: 1fr; gap: 8px; }
  .lg__tabsec__body li { font-size: 14px; }
}

/* Accordéon : titre cliquable + corps déplié au clic */
.lg__section {
  border-top: 1px solid var(--ink);
  margin: 0 -16px;
}
.lg__section:last-of-type {
  border-bottom: 1px solid var(--ink);
}
.lg__section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 10px 16px 14px;
  margin: 0;
  transition: opacity 0.15s ease;
}
/* OVERVIEW — section narrative style Futur, pleine largeur, avant l'accordéon */
.lg__formation__overview {
  padding: 56px 16px 64px;
  max-width: 880px;
}
.lg__formation__overview__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2, #666);
  margin: 0 0 32px;
}
.lg__formation__overview__block {
  margin: 0 0 32px;
}
.lg__formation__overview__block:last-child { margin-bottom: 0; }
.lg__formation__overview__hook {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px;
}
.lg__formation__overview__p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
@media (max-width: 700px) {
  .lg__formation__overview { padding: 36px 14px 40px; }
  .lg__formation__overview__kicker { margin-bottom: 24px; }
  .lg__formation__overview__block { margin-bottom: 24px; }
  .lg__formation__overview__hook { font-size: clamp(20px, 6vw, 26px); margin-bottom: 10px; }
  .lg__formation__overview__p { font-size: 15px; line-height: 1.5; }
}

/* PAGES FORMATION uniquement : l'ENSEMBLE du bloc des sections fermées = 1/3 viewport.
   Bloc condensé — padding minimal, titre baseline-aligned. */
.lg__formation__sections {
  min-height: 33.333vh;
  display: flex;
  flex-direction: column;
}
.lg__formation__sections .lg__section:not(.is-open) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lg__formation__sections .lg__section:not(.is-open) .lg__section-head {
  flex: 1;
  align-items: end;
  padding: 2px 16px 4px;
  min-height: 0;
}
.lg__formation .lg__section-head__title {
  padding: 0;
  line-height: 1.1;
}
@media (max-width: 700px) {
  .lg__formation__sections { min-height: 28vh; }
  .lg__formation__sections .lg__section:not(.is-open) .lg__section-head {
    padding: 2px 14px 4px;
  }
}
/* Numéro 01/02/03 à gauche du titre fermé */
.lg__section-head__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2, #666);
  flex-shrink: 0;
}
/* Indicateur + / − à droite (toggle visuel) */
.lg__section__toggle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.lg__section-head:hover .lg__section__toggle { transform: rotate(90deg); }
.lg__section-big__head .lg__section__toggle {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 36px;
}
.lg__section-head:hover { opacity: 0.55; }
.lg__section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lg__section-head.is-open { background: var(--ink); color: var(--paper); }
.lg__section-head.is-open .lg__section-head__title { color: var(--paper); }
.lg__section__body {
  padding: 22px 16px 32px;
  background: var(--paper);
  color: var(--ink);
  animation: lg-section-in 0.2s ease;
}

/* === Section ouverte : proportion "Seasons" =========================
   Titre géant qui remplit la largeur + numéro (XX) en exposant à droite,
   rule fine en dessous, contenu en plus petit en dessous. */
.lg__section.is-open {
  margin: 0 -16px;
  padding: 24px 16px 8px;
  background: var(--paper);
  color: var(--ink);
  animation: lg-section-in 0.2s ease;
}
.lg__section-big__head {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  position: relative;
}
.lg__section-big__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 140px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--ink);
}
/* PAGES FORMATION : titres ouverts plus petits que sur Notre approche */
.lg__formation .lg__section-big__title {
  font-size: clamp(26px, 3.6vw, 64px);
  letter-spacing: -0.03em;
  padding: 6px 0 12px;
}
.lg__section-big__num {
  font-size: 0.16em;
  font-weight: 400;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 8px;
  color: var(--ink);
  line-height: 1;
}
.lg__section-big__body {
  padding: 28px 0 40px;
  max-width: 100%;
}
.lg__section-big__body .lg__formation__prose {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 64ch;
  margin: 0;
}

/* ----- TRAINER CARD — style SUPSI : nom + photo + bio toujours visibles ----- */
.lg__trainercard {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.lg__trainercard__item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 24px;
}
.lg__trainercard__item + .lg__trainercard__item {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.lg__trainercard__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 8px;
}
.lg__trainercard__panel {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
}
.lg__trainercard__photo {
  aspect-ratio: 4 / 5;
  width: 200px;
  background: var(--accent);
  overflow: hidden;
}
.lg__trainercard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
}
.lg__trainercard__photo--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 56px;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--accent);
}
.lg__trainercard__bio {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}
.lg__trainercard__bio p { margin: 0 0 12px; font-weight: 700; }
.lg__trainercard__bio p:last-child { margin-bottom: 0; }
.lg__trainercard__role {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink);
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
}
@media (max-width: 700px) {
  .lg__trainercard__panel {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lg__trainercard__photo { width: 140px; }
  .lg__trainercard__name { font-size: clamp(26px, 8vw, 40px); }
  .lg__trainercard__bio { font-size: 15px; }
}
.lg__section-big__body ol {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 48px;
  padding: 0;
  margin: 0;
  max-width: 100ch;
}
.lg__section-big__body li {
  display: flex;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
}
.lg__section-big__body li .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  flex-shrink: 0;
  padding-top: 8px;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .lg__section-big__body { padding: 14px 0 24px; }
  .lg__section-big__body .lg__formation__prose,
  .lg__section-big__body li { font-size: 14px; line-height: 1.5; }
  .lg__section-big__body ol { grid-template-columns: 1fr; gap: 8px; }
  /* Mobile : taille mobile des sections (formation seulement) */
  .lg__formation .lg__section-big__title {
    font-size: clamp(22px, 7vw, 36px);
    padding: 4px 0 10px;
    letter-spacing: -0.025em;
  }
  .lg__formation .lg__section-head__title { font-size: 16px; }
}
.lg__section__body .lg__formation__prose {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 72ch;
  margin: 0;
}
.lg__section__body ol {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  padding: 0;
  margin: 0;
  max-width: 100ch;
}
.lg__section__body li {
  display: flex;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.lg__section__body li .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  flex-shrink: 0;
  padding-top: 5px;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .lg__section__body ol { grid-template-columns: 1fr; }
  .lg__section__body .lg__formation__prose,
  .lg__section__body li { font-size: 16px; }
}

/* Programme en cartes 3 colonnes (jour 1 / jour 2 / jour 3) */
/* Objectifs pédagogiques en accordéon — même pattern que .lg__program */
.lg__obj {
  display: flex;
  flex-direction: column;
  /* Pas de border-top : le titre h2 .lg__tabsec__title a déjà un border-bottom
     qui fait office de séparateur (évite le double trait). */
}
.lg__obj__item {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.lg__obj__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lg__obj__head::-webkit-details-marker { display: none; }
.lg__obj__head::marker { display: none; }
.lg__obj__head:hover { opacity: 0.7; }
.lg__obj__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-3, #888);
  flex-shrink: 0;
  min-width: 28px;
  padding-top: 4px;
}
.lg__obj__text {
  flex: 1;
}
.lg__obj__chev {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.2s ease;
  margin-left: 16px;
}
.lg__obj__item[open] .lg__obj__chev { transform: rotate(45deg); }
.lg__obj__body {
  padding: 0 0 20px 46px;
}
.lg__obj__body p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2, #555);
  margin: 0;
}
@media (max-width: 700px) {
  .lg__obj__head { font-size: 16px; gap: 12px; }
  .lg__obj__num { min-width: 22px; }
  .lg__obj__body { padding-left: 34px; }
}

/* Programme en grille de blocs (1 carte par jour) */
.lg__program {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lg__program__day {
  position: relative;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 56px 24px 24px;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.lg__program__day__tag {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  color: var(--ink);
}
@media (max-width: 900px) {
  .lg__program { grid-template-columns: 1fr; }
}
.lg__program__module {
  display: block;
}
.lg__program__module__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.005em;
}
.lg__program__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lg__program__items li {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  position: relative;
  padding-left: 16px;
}
.lg__program__items li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
}
.lg__program__exercises {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg__program__exercises li {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  font-style: italic;
}
.lg__program__plus {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  margin-right: 2px;
}
@media (max-width: 900px) {
  .lg__program { grid-template-columns: 1fr; }
  .lg__program__day { padding: 48px 20px 20px; }
}
@keyframes lg-section-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.lg__section-head__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: var(--ink);
  text-transform: lowercase;
}
.lg__section-head__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin: 0;
  padding: 0.05em 0 0.12em;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
}
/* PAGES FORMATION : titres fermés plus petits */
.lg__formation .lg__section-head__title {
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* (anciennement masqué — le contenu vit maintenant dans .lg__section__body) */
/* Informations en grille pour aérer (mobile: 1 col) */
.lg__formation__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 32px;
}
.lg__formation__info-cell h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin: 0 0 6px;
  color: var(--ink-2);
}
@media (max-width: 700px) {
  .lg__formation__info-grid { grid-template-columns: 1fr; }
  .lg__section-head { margin-top: 40px; }
}
.lg__formation__tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-2);
  max-width: 56ch;
}
.lg__formation__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  margin: 0 0 50px;
}
.lg__formation__meta > div {
  border-top: 1px solid var(--ink);
  padding-top: 10px;
}
.lg__formation__meta dt {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 6px;
  color: var(--ink-3);
  text-transform: none;
}
.lg__formation__meta dd {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.lg__formation__block {
  margin-bottom: 40px;
}
/* h2 hors SectionHead — n'est plus utilisé sur la page formation
   (gardé pour compat éventuelle) */
.lg__formation__block > h2:not(.lg__section-head__title) {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  color: var(--ink);
  line-height: 1.1;
}
.lg__formation__prose {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 80ch;
}
.lg__formation__sessions {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.lg__formation__session {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 130px) minmax(0, 110px);
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
}
.lg__formation__session__book {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--ink);
  background: var(--accent);
  transition: background 0.15s ease;
  justify-self: end;
}
.lg__formation__session__book:hover { background: var(--ink); color: var(--paper); }
.lg__formation__session__book--soon {
  background: transparent;
  border-color: var(--ink-3);
  color: var(--ink-3);
  cursor: not-allowed;
}
.lg__formation__session:last-child { border-bottom: 1px solid var(--rule); }
.lg__formation__session__date { font-size: 15px; }
.lg__formation__session__format {
  font-size: 12px;
  color: var(--ink-3);
  text-transform: lowercase;
}
.lg__formation__session__status {
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}
.lg__formation__session.is-open .lg__formation__session__status { color: var(--accent); font-weight: 700; }
.lg__formation__session.is-soon .lg__formation__session__status,
.lg__formation__session.is-soon .lg__formation__session__date { color: var(--ink-3); }
.lg__formation__more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.lg__formation__more:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .lg__formation__session {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lg__formation__session__status { text-align: left; }
  .lg__formation__session__book { justify-self: start; }
}
.lg__formation__block ol {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  padding: 0;
}
.lg__formation__block li {
  display: flex;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
}
.lg__formation__block li .num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  flex-shrink: 0;
  width: 24px;
  padding-top: 3px;
}
.lg__formation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.lg__btn {
  display: inline-block;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.lg__btn:hover { background: var(--ink); color: var(--paper); }
.lg__btn--primary { background: var(--accent); border-color: var(--accent); }
.lg__btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.lg__btn--ghost { border-color: var(--ink-3); color: var(--ink-3); }
.lg__btn--ghost:hover { background: var(--ink-3); color: var(--paper); }

@media (max-width: 900px) {
  .lg__formation__meta { grid-template-columns: repeat(2, 1fr); }
  .lg__formation__block ol { grid-template-columns: 1fr; }
}

/* ----- AGENDA — vraie typo agenda (date prominente + accordion inline) ---
   Layout : grid 3 colonnes (date / titre / statut) qui s'empile en mobile.
   Date à gauche en très gros (Geist sans), titre Geist sans medium, statut
   en pill mono. Click sur la row → accordion qui déroule les détails juste
   en dessous, sans modal, identique PC + mobile. */

.lg__ag__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}

.lg__ag {
  border-bottom: 1px solid var(--ink);
}
.lg__ag.is-soon .lg__ag__title { color: var(--ink-3, rgba(0,0,0,0.55)); }
/* Anciennes classes .lg__ag__day / .lg__ag__month retirées avec la refonte
   du format de date (one-liner "Mercredi 15 avril 2026"). */
.lg__ag.is-full .lg__ag__title,
.lg__ag.is-cancel .lg__ag__title { opacity: 0.7; }

/* Row cliquable (head) : grid 3 cols desktop, stack mobile.
   La date est maintenant sur une ligne unique ("Mercredi 15 avril 2026")
   donc la colonne date n'a plus besoin de faire 200px — on resserre
   à minmax(220px, 260px) pour bien laisser respirer le label. */
.lg__ag__head {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr auto;
  gap: 24px;
  /* align-items: start permet aux 3 colonnes de partir du haut.
     La date (col 1) et le side (col 3) compensent ensuite via padding-top
     pour s'aligner au TITRE (col 2) et non au kind label au-dessus. */
  align-items: start;
  width: 100%;
  /* Padding latéral pour décoller la date du bord gauche et le side
     du bord droit. Le trait noir de l'état ouvert reste collé au bord
     (inset box-shadow sur .lg__ag) pour rester visuel. */
  padding: 18px 24px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: background 0.15s ease;
}
.lg__ag__head:hover { background: transparent; }
/* État ouvert : aucune surcharge visuelle (ni trait à gauche, ni fond).
   La signature de l'état déplié se fait uniquement via le caret (+/−)
   qui change et le panneau qui s'affiche en dessous. */
.lg__ag.is-open .lg__ag__head { background: transparent; }

/* DATE complète "Mercredi 15 avril 2026" — une seule ligne, lisible.
   Le sans (Geist) reste cohérent avec le reste des textes du site.
   On aligne le baseline de la date avec celui du titre (et non avec le
   kind label au-dessus) en compensant par un padding-top égal à la hauteur
   du kind label + son margin-bottom (~22px). */
.lg__ag__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 22px;
}
.lg__ag__date__full {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lg__ag.is-soon .lg__ag__date__full { color: var(--ink-3, rgba(0,0,0,0.55)); }

/* MAIN : type (mono) + titre (Geist sans medium) */
.lg__ag__main { min-width: 0; }
.lg__ag__kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(0,0,0,0.55));
  margin-bottom: 6px;
}
.lg__ag__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

/* SIDE : pill statut + places + caret.
   Padding-top pour aligner avec le titre (skipper le kind label). */
.lg__ag__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 22px;
}
.lg__ag__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  line-height: 1.4;
}
.lg__ag__pill.is-open { color: #1a7a3a; }
.lg__ag__pill.is-full { color: #b03030; }
.lg__ag__pill.is-cancel { color: #b03030; text-decoration: line-through; }
.lg__ag__pill.is-soon { color: var(--ink-3, rgba(0,0,0,0.55)); }
.lg__ag__places {
  /* Donnée (= texte), pas un label → on garde sans pour rester cohérent
     avec le reste des textes du site. */
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.75;
}
.lg__ag__caret {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  margin-top: 4px;
  color: var(--ink);
  opacity: 0.5;
}
.lg__ag.is-open .lg__ag__caret { opacity: 1; }

/* PANEL — accordion qui se déroule sous la row */
.lg__ag__panel {
  padding: 4px 24px 32px;
  /* Aligné sur la 2e col (date 260px + gap 24px) + padding gauche du head (24px) = 308px */
  padding-left: 308px;
  max-width: 900px;
  animation: lg-ag-slide 0.25s ease;
}
@keyframes lg-ag-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lg__ag__tagline {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  color: var(--ink);
}
.lg__ag__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 20px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin-bottom: 18px;
}
.lg__ag__pair__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(0,0,0,0.55));
  margin-bottom: 3px;
}
.lg__ag__pair__value {
  /* Valeur (= contenu) → sans, comme le reste des textes du site.
     Le label (.lg__ag__pair__label) reste en mono caps comme accent. */
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.lg__ag__desc {
  /* Description (= prose) → sans, aligné sur .lg__formation__prose. */
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 80ch;
}
.lg__ag__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lg__ag__btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.lg__ag__btn:hover { background: var(--ink); color: var(--paper); }
/* Bouton principal (Réserver) : noir plein, sans jaune. */
.lg__ag__btn--primary { background: var(--ink); color: var(--paper); font-weight: 600; }
.lg__ag__btn--primary:hover { background: transparent; color: var(--ink); }

/* ----- MOBILE — la grid passe en stack vertical ----- */
@media (max-width: 700px) {
  .lg__ag__head {
    /* La date est sur une ligne longue ("Mercredi 15 avril 2026"), pas
       intéressante à mettre en colonne. On stack date au-dessus du titre. */
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .lg__ag__date__full { font-size: 13px; }
  .lg__ag__title { font-size: 16px; }
  .lg__ag__side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }
  .lg__ag__caret { margin-top: 0; }
  .lg__ag__panel {
    /* En mobile, on garde le même padding horizontal (16px) que la head */
    padding-left: 16px;
    padding-right: 16px;
  }
  .lg__ag__head {
    /* En mobile, padding horizontal réduit (16px au lieu de 24px) */
    padding: 16px;
  }
}
.lg__agenda__head,
.lg__agenda__row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.2fr)
    minmax(70px, 0.5fr)
    minmax(0, 2fr)
    minmax(140px, 1fr)
    minmax(80px, 0.7fr);
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--ink);
}
.lg__agenda__head {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  text-transform: none;
}
.lg__agenda__head > span:last-child { text-align: right; }
.lg__agenda__kind {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink);
  padding: 2px 6px;
  border: 1px solid var(--ink);
  align-self: center;
  text-align: center;
  line-height: 1.4;
  width: fit-content;
}
.lg__agenda__kind--workshop {
  background: var(--ink);
  color: var(--paper);
}
.lg__agenda__row {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, padding 0.15s ease;
}
.lg__agenda__list .lg__agenda__row:last-child {
  border-bottom: 1px solid var(--ink);
}
.lg__agenda__row:hover {
  background: var(--accent);
  padding-left: 8px;
  padding-right: 8px;
}
.lg__agenda__date {
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lg__agenda__title {
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.lg__agenda__format {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-3);
  text-transform: lowercase;
}
.lg__agenda__status {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink);
  text-align: right;
}
.lg__agenda__row.is-open .lg__agenda__status {
  color: var(--accent);
}
.lg__agenda__row.is-open:hover .lg__agenda__status {
  color: var(--ink);
}
.lg__agenda__row.is-soon .lg__agenda__status,
.lg__agenda__row.is-soon .lg__agenda__title {
  color: var(--ink-3);
}
.lg__agenda__row.is-soon:hover .lg__agenda__title,
.lg__agenda__row.is-soon:hover .lg__agenda__status {
  color: var(--ink);
}

@media (max-width: 700px) {
  .lg__agenda__head { display: none; }
  .lg__agenda__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .lg__agenda__date { font-size: 13px; color: var(--ink-3); }
  .lg__agenda__title { font-size: 18px; }
  .lg__agenda__format { font-size: 11px; }
  .lg__agenda__status { text-align: left; font-size: 12px; }
  .lg__agenda__kind { font-size: 10px; }
}

/* ----- CATALOGUE (layout poster id w / SUPSI) ---------------- */

.lg__catalogue {
  /* Full-bleed : sort du gutter .lg */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 40px 16px 80px;
  min-height: calc(100vh - 200px);
  position: relative;
}

/* Vidéo bg au hover d'un row */
.lg__page-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  animation: lg-bg-fade 0.4s ease forwards;
}
.lg__page-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lg__page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246, 245, 243, 0.35);
}
@keyframes lg-bg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Contenu au-dessus de la vidéo */
.lg__catalogue__head,
.lg__catalogue__note,
.lg__rows { position: relative; z-index: 2; }

/* Petite ligne mono d'info en haut de la page formations */
.lg__catalogue__note {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Bloc d'intro SUPSI : gros texte + ligne info */
.lg__intro {
  position: relative;
  z-index: 2;
  margin: 0 0 36px;
  max-width: 1400px;
}
.lg__intro__text,
.lg__intro__sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.lg__intro__sub {
  margin-top: 6px;
}
.lg__catalogue__head {
  margin: 0 0 40px;
}
.lg__catalogue__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.lg__catalogue__intro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 42ch;
  margin: 0;
  color: var(--ink);
}

.lg__rows {
  display: flex;
  flex-direction: column;
}
.lg__row {
  border-top: 1px solid var(--ink);
  padding: 10px 0 14px;
  cursor: pointer;
  transition: opacity 0.18s ease;
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.lg__row:hover { color: var(--ink); }
.lg__row:last-child { border-bottom: 1px solid var(--ink); }
.lg__row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: var(--ink);
}
.lg__row__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  white-space: normal;
  overflow: visible;
  display: block;
  width: 100%;
}
.lg__row__soon { color: var(--ink-3); }
.lg__row__seats { color: var(--accent); font-weight: 700; }
.lg__row.is-soon .lg__row__title { color: var(--ink-3); }
.lg__row.is-soon:hover .lg__row__title { color: var(--ink); }

/* Filtres catégorie — même typographie que le menu principal (Geist sans, lowercase) */
.lg__cat-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 28px;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.lg__cat-filters__btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-transform: lowercase;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.lg__cat-filters__btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__cat-filters__btn.is-active {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.lg__cat-filters__count {
  font-weight: 400;
  opacity: 0.55;
  margin-left: 2px;
  font-size: 0.7em;
}
.lg__cat-filters__btn--archives {
  margin-left: auto;
  color: var(--ink-3);
}
.lg__cat-filters__btn--archives.is-active {
  color: var(--ink);
}
.lg__cat-filters__count {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 2px;
}
.lg__cat-empty {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink-3);
  padding: 40px 0;
  text-align: center;
}

/* ----- CGV ---------------------------------------------------- */

.lg__cgv {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 16px 80px;
}
.lg__cgv__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--ink);
}
.lg__cgv__lede {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 50px;
  max-width: 72ch;
}
.lg__cgv__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 72ch;
}
.lg__cgv__list li {
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}
.lg__cgv__list h2 {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 8px;
  color: var(--ink);
}
.lg__cgv__list p {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.lg__cgv__list p strong { font-weight: 700; }
.lg__cgv__list a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lg__cgv__footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-3);
}
.lg__cgv__footer a { color: var(--ink); }

/* ----- APPROCHE (manifeste pleine page) ----------------------- */

.lg__approche {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 16px 80px;
  min-height: calc(100vh - 200px);
}
.lg__approche__title {
  font-family: var(--font-sans);
  font-weight: 500;
  /* Légèrement réduit (vs 40-96px) pour ne pas écraser la lede en dessous. */
  font-size: clamp(36px, 5.2vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 40px;
  color: var(--ink);
  text-transform: none;
}
.lg__approche__prose {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 72ch;
}
.lg__approche__prose p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.lg__approche__cols {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid var(--ink);
}

/* Approche factuelle : lede + liste structurée */
.lg__approche__lede {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.35;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 68ch;
}
.lg__approche__feature {
  margin: 0 0 50px;
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.lg__approche__feature__h {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  text-transform: lowercase;
  margin: 0 0 16px;
}
.lg__approche__feature__p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}
.lg__approche__feature__p strong { font-weight: 700; }
.lg__approche__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 40px 0 0;
  padding: 0;
  border: 0;
}
.lg__approche__item {
  display: block;
  padding: 0;
  border: 0;
}
.lg__approche__item:nth-child(odd) {
  border: 0;
  padding: 0;
}
.lg__approche__item dt {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: none;
  margin: 0 0 12px;
}
.lg__approche__item dd {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.lg__approche__item dd strong { font-weight: 700; }
.lg__approche__item dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lg__approche__item dd + dd { margin-top: 14px; }
/* Lorem ipsum sous chaque point — légèrement plus discret */
.lg__approche .lg__approche__lorem {
  margin-top: 18px;
  color: var(--ink-2, #555);
  font-weight: 400;
}

@media (max-width: 900px) {
  .lg__approche__list { gap: 28px; margin-top: 28px; }
  .lg__approche__item dt { font-size: 18px; margin-bottom: 8px; }
}

/* ----- FINANCEMENT (layout Bildung : titre + 2 cols) ---------- */

.lg__financement {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 40px 16px 80px;
}
.lg__financement__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 5.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 80px;
  color: var(--ink);
  max-width: 22ch;
}
.lg__financement__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  align-items: start;
}
.lg__financement__col p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 38ch;
}
.lg__financement__email {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.lg__financement__email:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 900px) {
  .lg__financement__cols { grid-template-columns: 1fr; gap: 30px; }
  .lg__financement__title { margin-bottom: 50px; }
}

/* ----- INTERVENANTS (style id w / SUPSI poster) ---------------- */

.lg__trainers {
  background: var(--accent);
  color: var(--ink);
  /* Full-bleed sur la largeur viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 40px 16px 80px;
}
.lg__trainers__head {
  margin: 0 0 40px;
}
.lg__trainers__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.lg__trainers__intro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 64ch;
  margin: 0;
  color: var(--ink);
}

.lg__trainers__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.lg__trainer {
  border-top: 1px solid var(--ink);
  padding: 10px 0 2px;
}
.lg__trainer:last-child { border-bottom: 1px solid var(--ink); }
.lg__trainer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: var(--ink);
}
.lg__trainer__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
}

/* ----- Marquee on hover (titres trop longs) ------------------ */
.lg__marquee__inner {
  display: inline-block;
  will-change: transform;
  transition: transform 0.6s ease-out;
}
.is-overflowing:hover .lg__marquee__inner,
.lg__row:hover .is-overflowing .lg__marquee__inner {
  transform: translateX(var(--overflow, 0));
  transition: transform var(--marquee-duration, 6s) linear;
}
.lg__row:hover .lg__row__title.is-overflowing .lg__marquee__inner,
.lg__trainer:hover .lg__trainer__name.is-overflowing .lg__marquee__inner {
  transform: translateX(var(--overflow, 0));
  transition: transform var(--marquee-duration, 6s) linear;
}

/* ----- CONTACT (layout SUPSI : info gauche + griot coin bas-droit) ---- */

.lg__contact {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 16px 60px;
  min-height: calc(100vh - 200px);
}
.lg__contact__info {
  font-family: var(--font-sans);
  font-weight: 500;
  /* Légèrement réduit (vs 22-48px) — moins écrasant, plus respirant. */
  font-size: clamp(18px, 2.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 24ch;
}
.lg__contact__info p {
  margin: 0;
}
.lg__contact__info a {
  color: var(--ink);
  text-decoration: none;
}
.lg__contact__info a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Griot grand format dans le coin inférieur droit */
.lg__contact__griot {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 320px;
  height: 320px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.lg__contact__griot .lg__hero__griot__wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.lg__contact__griot .matrix-griot { font-size: 2.6px; color: var(--ink); }
.lg__contact__griot .lg__hero__griot__ring text {
  font-size: 36px;
  letter-spacing: 0.04em;
  fill: var(--ink);
}

@media (max-width: 900px) {
  .lg__contact { min-height: auto; padding-bottom: 240px; }
  .lg__contact__griot { width: 200px; height: 200px; bottom: 16px; right: 16px; }
  .lg__contact__griot .matrix-griot { font-size: 1.6px; }
}

/* ----- FOOTER -------------------------------------------------- */

/* ----- PARTENAIRES (3 tiers, style SUPSI/id-w) ------------------ */
.lg__partners {
  width: 100%;
  padding: 36px 0 0;
  background: transparent;
  border-top: 1px solid var(--ink);
  margin: 40px 0 0;
  display: block;
  grid-column: 1 / -1;
}
.lg__partners__tier {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lg__partners__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2, #666);
  margin: 0;
}
.lg__partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 28px 40px;
}
.lg__partners__logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
a.lg__partners__logo:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lg__partners__logo--main {
  font-size: 32px;
  letter-spacing: -0.02em;
}
.lg__partners__logo--main sup {
  font-size: 0.4em;
  font-weight: 500;
  margin-left: 0.08em;
}
/* Tier identité maison (sticker + wordmark LA GRIOTHÈQUE) */
.lg__partners__tier--brand {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 32px;
  margin-bottom: 4px;
}
.lg__partners__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lg__partners__brand__mark {
  width: 56px;
  height: 56px;
  display: block;
}
.lg__partners__brand__wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.lg__partners__brand__wordmark sup {
  font-size: 0.4em;
  font-weight: 500;
  margin-left: 0.08em;
}
/* Logos partenaires — TOUS la même proportion (hauteur fixe, alignés baseline)
   Box-height unique pour que les logos paraissent à la même échelle visuelle */
.lg__partners__logo--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.lg__partners__logo--img img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.2s ease;
}
.lg__partners__logo--img:hover img {
  filter: grayscale(0);
}
/* Le logo Qualiopi est une marque officielle — pas de filtre N&B */
.lg__partners__logo--img[aria-label^="Qualiopi"] img {
  filter: none;
}
@media (max-width: 700px) {
  .lg__partners { padding: 28px 0 0; margin-top: 30px; }
  .lg__partners__logo { font-size: 15px; }
  .lg__partners__logo--main { font-size: 24px; }
  .lg__partners__logo--img { height: 36px; }
  .lg__partners__logo--img img { max-width: 140px; }
  .lg__partners__list { gap: 20px 28px; }
}

.lg__footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 18px 16px 0;
  border-top: 1px solid var(--paper);
  font-family: var(--font-sans);
  color: var(--paper);
  background: var(--ink);
}
.lg__footer a { color: var(--paper); }
.lg__footer .lg__footer__wordmark,
.lg__footer .lg__footer__mark .matrix-griot,
.lg__footer .lg__footer__mark .lg__hero__griot__ring text {
  color: var(--paper);
  fill: var(--paper);
}

/* Top : wordmark géant + petit mark griot */
.lg__footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.lg__footer__wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 8vw, 110px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.lg__footer__mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin-top: 4px;
}
.lg__footer__mark .matrix-griot { font-size: 0.5px; color: var(--ink); pointer-events: none; }
.lg__footer__mark .lg__hero__griot__ring text { font-size: 36px; letter-spacing: 0.04em; fill: var(--ink); }

/* 4 colonnes de liens */
.lg__footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 16px;
}
.lg__footer__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lg__footer__col a,
.lg__footer__col p {
  color: var(--paper);
  text-decoration: none;
  margin: 0;
}
.lg__footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Badge Qualiopi — logo officiel + mention obligatoire (footer) */
.lg__qualiopi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  max-width: 280px;
}
.lg__qualiopi__logo {
  height: 56px;
  width: auto;
  display: block;
}
.lg__qualiopi__text {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-transform: none;
}

/* Tagline marquee défilante en bas */
.lg__footer__marquee {
  width: 100vw;
  margin-left: -16px;
  margin-right: -16px;
  overflow: hidden;
  border-top: 1px solid var(--paper);
  padding: 6px 0 8px;
}
.lg__footer__marquee__track {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  animation: lg-marquee 30s linear infinite;
}
@keyframes lg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (max-width: 900px) {
  .lg__footer__cols { grid-template-columns: repeat(2, 1fr); }
  .lg__footer__mark { width: 56px; height: 56px; }
}
@media (max-width: 600px) {
  /* Mobile : on retire les 2 premières colonnes du footer :
     - Col 1 : menu principal (redondant avec le hamburger en haut)
     - Col 2 : liens vers studio / plateforme / agence (sortie d'écosystème
       moins utile en mobile, ces liens sont accessibles depuis Approche)
     On garde les 2 dernières : social (instagram/linkedin/newsletter)
     et mentions/CGV/Qualiopi qui apportent une vraie info. */
  .lg__footer__cols { grid-template-columns: 1fr; }
  .lg__footer__col:nth-child(-n+2) { display: none; }
}

/* ----- DETAIL OVERLAY ----------------------------------------- */

.lg__detail {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26, 24, 20, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  animation: lg-fade 0.25s ease both;
}
@keyframes lg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lg__detail__panel {
  position: relative;
  background: var(--paper);
  max-width: 880px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 60px 56px;
  border: 1px solid var(--ink);
}
.lg__detail__close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
}
.lg__detail__close:hover { color: var(--accent); }
.lg__detail__kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.lg__detail__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.lg__detail__tagline {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 40px;
  max-width: 60ch;
}

/* Badge "ÉLIGIBLE CPF" affiché en haut de l'overview d'une formation
   certifiante. Visuellement distinct (couleur accent + brackets style
   terminal) pour qu'on repère le statut CPF immédiatement. */
.lg__detail__cpf-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--accent);
  padding: 10px 14px;
  margin-bottom: 28px;
  border-radius: 2px;
}
.lg__detail__cpf-badge__main {
  font-weight: 700;
  white-space: nowrap;
}
.lg__detail__cpf-badge__rs {
  color: var(--ink-2);
  font-weight: 500;
}
.lg__detail__cpf-badge__rs strong {
  color: var(--ink);
  font-weight: 700;
}
.lg__detail__cpf-badge__link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}
.lg__detail__cpf-badge__link:hover {
  color: var(--accent);
}
@media (max-width: 720px) {
  .lg__detail__cpf-badge {
    font-size: 10px;
    letter-spacing: 0.1em;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* CTA Mon Compte Formation — variante du bouton primary pour faire
   ressortir le financement CPF (le call-to-action principal pour les
   formations RS éligibles). */
.lg__btn--cpf {
  /* On garde le look du primary mais avec une icône / signal subtil */
  font-weight: 700;
  letter-spacing: 0.14em;
}
.lg__detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.lg__detail__grid h6 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 4px;
}
.lg__detail__grid p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.lg__detail__obj h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 20px;
}
.lg__detail__obj ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lg__detail__obj li {
  display: flex;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-2);
}
.lg__detail__obj li:last-child { border-bottom: 0; }
.lg__detail__obj .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  flex: 0 0 32px;
}

.lg__detail__actions {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.lg__btn {
  display: inline-block;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lg__btn:hover { background: var(--ink); color: var(--paper); }
.lg__btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.lg__btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ----- RESPONSIVE --------------------------------------------- */

@media (max-width: 900px) {
  .lg__approche__grid,
  .lg__financement__grid,
  .lg__manifesto__cols { grid-template-columns: 1fr; gap: 32px; }
  .lg__manifesto__sub { margin-bottom: 50px; }
  .lg__trainers { padding: 40px 18px 60px; }
  .lg__trainers__intro,
  .lg__catalogue__intro { font-size: clamp(20px, 3.6vw, 28px); }
  .lg__trainer__name,
  .lg__row__title { letter-spacing: -0.04em; }
}

@media (max-width: 900px) {
  .lg__splash { height: 80vh; min-height: 480px; }
  .lg__splash .lg__hero__griot__wrap { width: 400px; height: 400px; }
  .lg__splash .matrix-griot { font-size: 3px; }
  .lg__splash .lg__hero__griot__ring text { font-size: 32px; letter-spacing: 0.04em; }
}

@media (max-width: 600px) {
  .lg { padding: 0 18px; }
  .lg__header { padding: 10px 14px; gap: 12px; align-items: center; }
  .lg__header__griot { display: none; }
  .lg__header__wordmark { display: inline-block; font-size: 16px; }
  .lg__menu { display: none; }
  .lg__header__menubtn { display: inline-block; }
  .lg__manifesto { padding: 60px 0 50px; }
  .lg__catalogue, .lg__approche, .lg__financement { padding: 50px 0; }
  .lg__detail__panel { padding: 40px 24px; }
  .lg__detail__grid { grid-template-columns: 1fr; gap: 20px; }
  .lg__hero__griot__wrap { width: 260px; height: 260px; }
  .matrix-griot { font-size: 2px; }
  .lg__hero__griot__ring text { font-size: 18px; letter-spacing: 0.04em; }
  .lg__splash { height: 75vh; min-height: 420px; }
  .lg__splash__sub { font-size: 11px; letter-spacing: 0.26em; top: calc(50% + 180px); bottom: auto; }
  .lg__splash .lg__hero__griot__wrap { width: 320px; height: 320px; }
  .lg__splash .matrix-griot { font-size: 2.5px; }
  .lg__splash .lg__hero__griot__ring text { font-size: 24px; letter-spacing: 0.04em; }
}

/* ============================================================
   PAGE RESSOURCE — détail (inspiration The Futur, palette Griothèque)
   ============================================================ */
.lg__resource {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-20);
}
.lg__resource__back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: var(--space-8);
  transition: color 0.15s;
}
.lg__resource__back:hover { color: var(--ink); }

.lg__resource__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* ---- Colonne média (sticky) ---- */
.lg__resource__aside { position: sticky; top: var(--space-6); }
.lg__resource__cover {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.lg__resource__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg__resource__cover--ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.lg__resource__card {
  border: 1px solid var(--ink);
  padding: var(--space-5);
  background: var(--paper);
}
.lg__resource__card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 var(--space-2);
}
.lg__resource__card__price {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.lg__resource__cta { width: 100%; justify-content: center; text-align: center; }
.lg__resource__card__note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  margin: var(--space-3) 0 0;
  line-height: 1.5;
}

/* ---- Colonne contenu ---- */
.lg__resource__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  color: var(--accent);
  background: var(--ink);
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-4);
}
.lg__resource__title {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.lg__resource__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
}
.lg__resource__author {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 0 0 var(--space-8);
}
.lg__resource__desc {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: var(--space-10);
}
.lg__resource__desc p { margin: 0 0 var(--space-4); }
.lg__resource__h2 {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-2);
  margin: 0 0 var(--space-5);
}
.lg__resource__inside ul { list-style: none; padding: 0; margin: 0; }
.lg__resource__inside li {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-2);
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.lg__resource__inside li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}

@media (max-width: 900px) {
  .lg__resource { padding: var(--space-6) var(--space-4) var(--space-15); }
  .lg__resource__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .lg__resource__aside { position: static; max-width: 360px; }
  .lg__resource__title { font-size: var(--text-4xl); }
}

/* ===================================================================
   PAGE CHECKOUT DÉMO — simulation Stripe Checkout, pas de vrai paiement.
   2 colonnes : récap produit à gauche, formulaire à droite.
   =================================================================== */
.lg__checkout {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px 60px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.lg__checkout__demo-banner {
  background: #fff4b8;
  border: 1px solid var(--ink);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  text-align: center;
}
.lg__checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .lg__checkout__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ----- colonne gauche : récap produit ----- */
.lg__checkout__product {
  padding: 0;
}
.lg__checkout__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.lg__checkout__product__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink);
}
.lg__checkout__product__tagline {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.lg__checkout__product__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  margin-bottom: 24px;
}
.lg__checkout__product__media img,
.lg__checkout__product__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg__checkout__product__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--ink);
}
.lg__checkout__product__meta li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.lg__checkout__product__meta li span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg__checkout__product__meta li span:last-child {
  text-align: right;
  font-weight: 500;
}
.lg__checkout__product__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 10px;
  border-top: 1px solid var(--ink);
  font-family: var(--font-sans);
}
.lg__checkout__product__total span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg__checkout__product__total strong {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lg__checkout__product__hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
}

/* ----- colonne droite : formulaire ----- */
.lg__checkout__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lg__checkout__form__section {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  margin: 18px 0 6px;
  color: var(--ink);
}
.lg__checkout__form__section:first-child { margin-top: 0; }
.lg__checkout__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg__checkout__field span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg__checkout__field input {
  font-family: var(--font-sans);
  font-size: 15px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 12px 14px;
  color: var(--ink);
  outline: none;
}
.lg__checkout__field input:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
}
.lg__checkout__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lg__checkout__method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.lg__checkout__method--active {
  background: var(--ink);
  color: var(--paper);
}
.lg__checkout__method__radio { font-size: 14px; }
.lg__checkout__method__label { font-weight: 500; }
.lg__checkout__tos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 14px 0 6px;
}
.lg__checkout__tos input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.lg__checkout__tos a {
  color: var(--ink);
  text-decoration: underline;
}

/* ----- boutons checkout ----- */
.lg__checkout__btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 18px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, outline 0.15s ease;
}
.lg__checkout__btn:hover {
  background: var(--accent);
  color: var(--ink);
  outline: 1px solid var(--ink);
}
.lg__checkout__btn--pay {
  margin-top: 6px;
  font-size: 16px;
  padding: 16px 18px;
}
.lg__checkout__btn--ghost {
  background: var(--paper);
  color: var(--ink);
  outline: 1px solid var(--ink);
}
.lg__checkout__btn--ghost:hover {
  background: var(--accent);
  color: var(--ink);
}
.lg__checkout__form__secured {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin: 12px 0 0;
}

/* ----- page succès ----- */
.lg__checkout__success {
  text-align: center;
  padding: 80px 16px 60px;
  max-width: 600px;
  margin: 0 auto;
}
.lg__checkout__demo-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 24px;
}
.lg__checkout__success__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.lg__checkout__success__lede {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
}
.lg__checkout__success__hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 36px;
}
.lg__checkout__success__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Décomposition HT + TVA dans la page checkout démo */
.lg__checkout__product__breakdown {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--ink);
}
.lg__checkout__product__breakdown li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
}
.lg__checkout__product__breakdown li span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ===================================================================
   STRIPE ELEMENTS — overrides spécifiques à la page CheckoutStripe.
   =================================================================== */
.lg__checkout__stripe-mount {
  margin: 6px 0 18px;
  /* Stripe injecte ses iframes dedans ; on laisse ses appearance rules
     prendre la main, on ne style que le padding du wrapper. */
}
.lg__checkout__loading {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 20px 0;
  text-align: center;
}
.lg__checkout__alert {
  background: #fff4b8;
  border: 1px solid var(--ink);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.lg__checkout__alert p { margin: 0 0 6px; }
.lg__checkout__alert p:last-child { margin-bottom: 0; }
.lg__checkout__error {
  background: #ffe8e8;
  border: 1px solid #cc3333;
  color: #cc3333;
  padding: 10px 14px;
  font-size: 13px;
  margin: 12px 0;
}
.lg__checkout__btn--pay:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}