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

@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;

  /* ---- Une seule police ---------------------------------------------
     La direction artistique du site tient sur Geist Sans, et rien d'autre.
     Le site portait aussi Geist Mono sur ses libellés, ses kickers et ses
     boutons : deux dessins de lettre pour un seul propos, et un second
     fichier de police à charger.

     `--font-mono` reste, et pointe sur la même famille. Soixante-dix
     déclarations s'y réfèrent : les renommer une à une n'aurait rien changé
     à l'écran et aurait fait un diff illisible. Le nom devient impropre, le
     commentaire est là pour ça, et le jour où l'on voudrait vraiment une
     chasse fixe quelque part, c'est ici qu'on la remet.

     Ce qui faisait le caractère de ces libellés reste : les capitales,
     l'interlettrage large, les petites tailles. C'est la lettre qui change,
     pas le geste. */
  --font-mono: "Geist", "Inter", system-ui, sans-serif;
  --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 */
  /* Workshops : vente directe, pas de mentions Qualiopi/NDA à l'impression. */
  .lg__formation.is-workshop::after,
  .lg__formation.is-event::after {
    content: "LA GRIOTHÈQUE™ — LES GRIOTS · formations@lesgriots.com" !important;
  }
  .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;
}
/* Logo mot-marque « LA GRIOTHÈQUE » en inline (remplace le texte de marque dans
   les phrases). Dimensionné sur la hauteur du texte, calé sur la ligne de base. */
.lg-brand-logo {
  display: inline-block;
  height: 1.05em;
  vertical-align: baseline;
  position: relative;
  top: 0.16em;
  line-height: 0;
  white-space: nowrap;
}
.lg-brand-logo .lg__hero__griot__wrap {
  width: auto;
  height: 1.05em;
  min-width: 0;
  display: inline-flex;
}
.lg-brand-logo .lg__wordmark-svg {
  height: 1.05em;
  width: auto;
}
.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 24px;
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  z-index: 50;
  /* Bascule douce solide <-> transparent (au-dessus du hero / de la vidéo). */
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
/* Fondu de la couleur du texte du menu lors du même basculement. */
.lg__menu__link,
.lg__menu__sep,
.lg__header__wordmark,
.lg__header__griot,
.lg__header__menubtn {
  transition: color 0.4s ease;
}
.lg__header__griot {
  /* Mot-marque large — même largeur que le logo d'accueil (320 px). */
  width: min(240px, 55vw);
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 620 / 86;
  text-decoration: none;
}
.lg__header__griot .lg__hero__griot__wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: 620 / 86;
}
.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);
}
/* Le menu a 2 rangées (utilitaires en haut, nav en bas) ; align-items:center
   place le logo au centre du bloc → légèrement au-dessus de la rangée nav.
   On le redescend pour le centrer sur "formations…". Desktop uniquement
   (le décalage n'affecte pas la hauteur du header). */
@media (min-width: 601px) {
  /* Le reste du site (titre sticky des fiches, barres de sections) suppose un
     header de 121 px. Mon logo plat l'avait raccourci → 39 px de vide sous le
     menu. On restaure 121 px pour que tout se cale correctement. */
  .lg__header { min-height: 121px; }
  .lg__header__griot { transform: translateY(12px); }
}
@media (max-width: 600px) {
  /* Sur mobile, le titre des fiches colle à top:85px → on fixe la hauteur du
     header mobile à 85px pour éviter le vide sous le menu. */
  .lg__header { min-height: 85px; }
}
/* 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;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
/* Première ligne : utilitaires, petit */
.lg__menu__row:first-child {
  font-size: 17px;
  gap: 10px;
}
/* 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.3s 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.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@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: none;
  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 {
  /* Même largeur que le logo d'accueil (320 px) → taille identique. */
  width: min(240px, 75%);
  height: auto;
  aspect-ratio: 620 / 86;
}
.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;
}

/* ----- MÉTHODE EN 3 ÉTAPES (home) ----- */
.lg__method {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 90px 24px;
  background: var(--paper);
  border-top: 1px solid var(--ink);
}
.lg__method__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  margin: 0 0 18px;
}
.lg__method__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 56px;
  max-width: 18ch;
}
.lg__method__bands {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lg__method__band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 360px;
  border-top: 1px solid var(--ink);
}
/* Côtés alternés : étape paire → média à droite, texte à gauche. */
.lg__method__band:nth-child(even) .lg__method__band__media { order: 2; }
.lg__method__band__media {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  min-height: 280px;
}
.lg__method__band__media img,
.lg__method__band__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg__method__band__num {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--paper);
}
.lg__method__band__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px clamp(24px, 4vw, 72px);
}
.lg__method__band__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.lg__method__band__text {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--ink-2, #555);
  margin: 0;
  max-width: 42ch;
}
@media (max-width: 700px) {
  .lg__method { padding: 56px 24px; }
  .lg__method__title { margin-bottom: 40px; }
  .lg__method__band {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Sur mobile, média toujours au-dessus du texte (pas d'alternance). */
  .lg__method__band:nth-child(even) .lg__method__band__media { order: 0; }
  .lg__method__band__media { aspect-ratio: 16 / 10; min-height: 0; }
  .lg__method__band__body { padding: 24px 0 8px; }
}
.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: none;
  -webkit-hyphens: none;
}
@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 {
  /* Full-bleed compensé de la barre de défilement (--sbw posée en JR) : la
     page occupe exactement la largeur visible (clientWidth), donc les traits
     touchent les deux bords sans gap ni débord sous la scrollbar. */
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
  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: 0 auto 40px;   /* le média est désormais en hero banner en haut */
  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 : le panneau de reservation est deja fixe en bas de l'ecran et
     porte le meme bouton. Repeter un grand bloc CTA juste au-dessus, c'est
     deux fois la meme demande a dix centimetres d'intervalle. */
  .lg__cta-final { display: none; }
}
@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;
  /* Gouttière symétrique : le layout s'aligne sur les 24px de la section
     (l'ancien padding-right: 180px désaxait la marge droite). */
}
.lg__formation__main { min-width: 0; }
/* Cible de scroll des onglets : on s'arrête pile sous la pile sticky
   (header + titre collé + barre d'onglets). */
#tab-content { scroll-margin-top: 232px; }
@media (max-width: 600px) { #tab-content { scroll-margin-top: 176px; } }
.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) {
  /* 1 colonne pleine largeur : on annule le padding-right desktop (180px)
     qui poussait le contenu à gauche avec du vide à droite sur mobile. */
  .lg__formation__layout { display: block; padding-right: 0; }
  /* Carte de réservation NON figée sur mobile : elle s'affiche en bas du
     contenu, complète, avec tous les boutons empilés et bien visibles. */
  .lg__formation__side {
    position: static;
    width: 100%;
    margin-top: 32px;
  }
  .lg__formation { padding-bottom: 60px; }
}

/* ===================================================================
   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; }
/* Bloc « Prochaine(s) session(s) » — plus lisible : label + date en évidence
   + statut/places. */
.lg__cta-mini__sessions {
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.lg__cta-mini__sessions__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.lg__cta-mini__sessions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg__cta-mini__session {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lg__cta-mini__session__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lg__cta-mini__session__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg__cta-mini__session__loc {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
  margin: 2px 0 4px;
}
.lg__cta-mini__session__status.is-open { color: var(--accent); font-weight: 700; }
.lg__cta-mini__session__places { color: var(--ink-3); }
.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);
}
/* Encart « Mon Compte Formation » en bas de la carte : logo + mention. */
.lg__cta-mini__cpfbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background: var(--paper);
}
.lg__cta-mini__cpfbox__logo {
  height: 42px;
  width: 42px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 4px;
}
.lg__cta-mini__cpfbox__text {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
}
/* 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;
  /* Au-dessus du panneau de reservation fixe du mobile (48) et du header. */
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lg-modal-fade 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 700px) {
  .lg__modal { padding: 16px; }
}
@keyframes lg-modal-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.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;
  min-width: 0;
}
.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 {
  width: 100%;
  box-sizing: border-box;
  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) {
  /* Mobile : on resserre tout. Un formulaire de quatre champs doit tenir
     sans defilement sur un telephone courant, sinon le bouton d'envoi passe
     sous la ligne de flottaison et personne ne le voit. */
  .lg__modal__panel {
    padding: 20px 16px 18px;
    max-width: 100%;
    /* Le panneau ne depasse jamais l'ecran : il defile a l'interieur. */
    max-height: calc(100svh - 32px);
  }
  .lg__modal__close { top: 10px; right: 12px; }
  .lg__modal__kicker { font-size: 10px; margin-bottom: 5px; }
  .lg__modal__title { font-size: 19px; line-height: 1.12; margin-bottom: 8px; }
  .lg__modal__intro { font-size: 13px; line-height: 1.42; margin-bottom: 16px; }
  .lg__modal__form { gap: 10px; }
  .lg__modal__field { gap: 4px; }
  .lg__modal__field__k { font-size: 9px; }
  .lg__modal__field input { font-size: 16px; padding: 8px 10px; }
  .lg__modal__consent { font-size: 11px; line-height: 1.35; gap: 8px; margin-top: 2px; }
  .lg__modal__submit { padding: 12px 14px; font-size: 13px; margin-top: 8px; }
}
/* Prenom et nom restent cote a cote meme sur un petit ecran : deux champs
   courts empiles, c'est deux lignes perdues pour rien. */
@media (max-width: 480px) {
  .lg__modal__row { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.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); }

/* Carte de réservation : tous les libellés passent en Geist Sans (plus de
   Geist Mono). Léger ajustement de letter-spacing pour la lisibilité. */
.lg__cta-mini__hint,
.lg__cta-mini__cert__code,
.lg__cta-mini__badges span,
.lg__cta-mini__sessions__label,
.lg__cta-mini__session__meta,
.lg__cta-mini__sub {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* Mobile : la carte reste une carte complète (boutons empilés, tout visible),
   affichée en bas du contenu de la formation. */
@media (max-width: 900px) {
  .lg__cta-mini {
    padding: 22px 18px 20px;
  }
  .lg__cta-mini__btn {
    display: block;
    width: 100%;
    padding: 15px 18px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .lg__cta-banner {
    margin: 0 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 {
    /* Sur mobile, le CTA est assuré par la barre fixe en bas → on masque le
       bouton de la carte pour éviter deux boutons identiques superposés. */
    display: none;
  }
}
.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;
}
/* Hero banner de fiche : titre + type en overlay (style pages liste).
   Placé en HAUT du média (le bas est occupé par la bannière CTA). */
.lg__formation__hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(24px, 4vw, 56px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.lg__formation__hero__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  margin: 0 0 10px;
}
.lg__formation__hero__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  max-width: 20ch;
}
/* Le titre vit dans le hero banner ; la barre titre n'apparaît qu'au scroll.
   useFitOne pose une taille inline → on masque par la hauteur (pas le font-size)
   pour que le bloc soit réellement à 0 (sinon trou sous le banner). */
.lg__formation__title:not(.is-stuck) {
  height: 0;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
  overflow: hidden;
  visibility: hidden;
}
.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: 42;
  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);
}
/* La home utilise désormais le même menu blanc-sur-média que les pages-listes
   (plus de menu caché). Le gros logo du hero est masqué : le logo du menu sert. */
body.is-home .lg__hero-yard__brand,
body.is-home .lg__hero-yard__wordmark {
  display: none !important;
}
.lg__header {
  transition: opacity 0.35s ease, transform 0.35s ease,
              background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

/* Pages-listes : le menu reste VISIBLE sur le média (texte blanc, sans barre),
   et devient une barre solide (papier, texte encre) dès qu'on scrolle. */
body.is-listhero .lg__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--paper);
}
body.is-listhero:not(.past-hero) .lg__header {
  background: transparent;
  border-bottom-color: transparent;
}
body.is-listhero:not(.past-hero) .lg__menu__link,
body.is-listhero:not(.past-hero) .lg__menu__sep,
body.is-listhero:not(.past-hero) .lg__header__griot,
body.is-listhero:not(.past-hero) .lg__header__menubtn,
body.is-listhero:not(.past-hero) .lg__header__wordmark {
  color: #fff;
}
/* ===== Menu à deux couches : plaque papier (DESSOUS) + nav (DESSUS) =====
   Le header porte la nav, transparent, au premier plan (z 55). Une plaque
   papier fixe (z 45) fait le fond du menu ; la section vidéo (home, z 46)
   remonte PAR-DESSUS la plaque → superposition, le papier reste dessous et le
   hero n'apparaît jamais. La plaque se cache quand un média doit transparaître
   directement derrière (hero d'accueil, pagehero des pages liste). */
.lg__header,
body.is-home .lg__header,
body.is-listhero .lg__header {
  background: transparent;
  border-bottom-color: transparent;
  z-index: 55;
}
.lg__header__plate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 121px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  z-index: 45;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.menu-transparent .lg__header__plate { opacity: 0; }
/* Barre de menu NOIRE quand une section noire de la home est calée sous le
   header (continuité visuelle : plaque noire + nav blanc). */
body.menu-dark .lg__header__plate {
  background: #000000;
  border-bottom-color: rgba(246, 245, 243, 0.14);
}
@media (max-width: 600px) {
  .lg__header__plate { height: 85px; }
}
/* Nav en blanc quand un média est derrière (plaque cachée) OU quand la vidéo
   passe par-dessus la plaque. */
/* Header en DEUX couches empilées pour une révélation VRAIMENT progressive :
   - couche de base (sombre) toujours là ;
   - couche blanche par-dessus, découpée au ras du bord de la vidéo via
     clip-path (--vid-top / --vid-bottom posés en JS). Le texte devient blanc
     pixel par pixel là où la vidéo passe derrière lui. */
.lg__header {
  display: block;
  padding: 0;
  height: 121px;
  min-height: 121px;
}
.lg__header__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
}
.lg__header__layer--white {
  color: #fff;
  pointer-events: none;
  clip-path: inset(var(--vid-top, 100%) 0 var(--vid-bottom, 0) 0);
}
.lg__header__layer--white .lg__menu__link,
.lg__header__layer--white .lg__menu__sep,
.lg__header__layer--white .lg__header__griot,
.lg__header__layer--white .lg__header__menubtn,
.lg__header__layer--white .lg__header__wordmark {
  color: #fff;
}
@media (max-width: 600px) {
  .lg__header { height: 85px; min-height: 85px; }
}

.lg__hero-yard {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  background: var(--ink);
}
/* Hero plein écran tant qu'on ne l'a pas dépassé (il défile ensuite
   naturellement au lieu de rétrécir au scroll → plus de contenu qui
   "passe par-dessus" la vidéo). */
body.is-home:not(.past-hero) .lg__hero-yard {
  height: 100vh;
  max-height: 100vh;
  aspect-ratio: auto;
}
.lg__hero-yard {
  transition: max-height 0.5s ease, height 0.5s ease;
}
/* Effet de superposition : le hero reste fixé (sticky) plein écran, et le
   contenu en dessous (opaque) remonte par-dessus au scroll. */
body.is-home .lg__hero-yard {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  max-height: 100vh;
}
body.is-home .lg__manifesto,
body.is-home .lg__method,
body.is-home .lg__latest {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
/* Effet de pile au scroll (home) : le manifeste se FIGE sous le menu quand il
   l'atteint, et la section vidéo « New stories » remonte PAR-DESSUS lui
   (z-index supérieur + opaque). Le manifeste reste ensuite couvert par la
   vidéo puis par les formations. */
body.is-home .lg__manifesto {
  position: sticky;
  top: 121px;
  z-index: 1;
}
/* La section vidéo se cale (sticky) en haut, DERRIÈRE le header, pour que la
   vidéo soit continue sous le menu devenu transparent (pas de raccord avec le
   hero). Les formations (z-index supérieur) remontent ensuite par-dessus. */
body.is-home .lg__latest {
  /* Se FIGE sous le menu quand elle l'atteint → la section récits (z-index
     supérieur) remonte ensuite PAR-DESSUS (overlap). */
  position: sticky;
  top: 121px;
  z-index: 46; /* AU-DESSUS de la plaque papier du menu (z-index 45) : remonte par-dessus le manifeste */
}
@media (max-width: 600px) {
  body.is-home .lg__latest { top: 85px; }
}
body.is-home .lg__vision-track {
  position: relative;
  z-index: 48; /* final : la section récits remonte par-dessus formations + workshops */
}
/* Section « Nos formations » sur fond NOIR (home). Le fond est une couleur
   littérale (pas var(--ink)) car on redéfinit ci-dessous --ink/--ink-2/--ink-3
   en clair : ainsi tous les textes ET les styles inline (color:var(--ink-3))
   basculent en clair sur le noir, sans toucher au reste du site. */
body.is-home .lg__latest {
  background: #000000;
  border-top-color: rgba(246, 245, 243, 0.14);
  --ink: #f6f5f3;
  --ink-2: rgba(246, 245, 243, 0.72);
  --ink-3: rgba(246, 245, 243, 0.45);
}
/* Section « Nos workshops » (home) : même construction que les formations,
   mais sur fond PAPIER. Elle est sticky comme la section noire et remonte
   PAR-DESSUS elle (z-index supérieur) ; la section récits remonte ensuite
   par-dessus les deux. On rétablit ici les tokens d’encre sombres, annulés
   par la règle noire ci-dessus. */
body.is-home .lg__latest--workshops {
  background: var(--paper);
  border-top-color: rgba(0, 0, 0, 0.14);
  --ink: #000000;
  --ink-2: #2a2a2a;
  --ink-3: #6b6b6b;
  z-index: 47;
}
/* Rows « à la page Formations » dans la section noire de la home : alignées à
   gauche (la section .lg__latest est centrée pour ses onglets). */
.lg__latest__rows { text-align: left; margin-top: 8px; }
.lg__latest__rows .lg__row:first-child { border-top: none; }
/* Section workshops (fond papier) : la liste garde ses filets haut et bas,
   comme sur la page Formations. Sans eux, une liste d’un seul workshop
   n’aurait aucune ligne. */
.lg__latest--workshops .lg__latest__rows .lg__row:first-child { border-top: 1px solid var(--ink); }
.lg__latest--workshops .lg__latest__rows .lg__row:last-child { border-bottom: 1px solid var(--ink); }
/* Pas de bordure basse sur la dernière formation : la section récits (vidéo)
   arrive juste après → le trait ferait doublon. */
.lg__latest__rows .lg__row:last-child { border-bottom: none; }

/* En-tête éditorial de la section formations (style VSCO) : grand titre
   capitales + lede, alignés à gauche. Onglets réalignés à gauche pour la
   cohérence. */
.lg__latest__intro {
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
  margin-bottom: 44px;
}
.lg__latest__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  /* Sur une seule ligne au desktop (nowrap ci-dessous), taille mesurée. */
  font-size: clamp(24px, 3.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
@media (min-width: 701px) {
  .lg__latest__heading { white-space: nowrap; }
}
.lg__latest__lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin: 0;
  max-width: 640px;
}
.lg__latest__lede__link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.is-home .lg__latest__tabs {
  justify-content: flex-start;
  padding-left: 24px;
}
/* Desktop : mêmes retraits que le mobile — le contenu de « Nos formations »
   se cale sur la gouttière de la section, pas de double retrait. */
@media (min-width: 601px) {
  .lg__latest__intro { padding-left: 0; padding-right: 0; }
  body.is-home .lg__latest__tabs { padding-left: 0; }
  .lg__latest .lg__cat-filters { padding-left: 0; padding-right: 0; }
  .lg__latest .lg__row { padding-left: 0; }
}
@media (max-width: 700px) {
  /* La section .lg__latest porte déjà la gouttière 24px sur mobile : pas de
     retrait interne supplémentaire — tout s'aligne sur la même marge. */
  .lg__latest__intro { padding-left: 0; padding-right: 0; margin-bottom: 32px; }
  body.is-home .lg__latest__tabs { padding-left: 0; }
  .lg__latest .lg__row { padding-left: 0; }
  .lg__latest .lg__cat-filters { padding-left: 0; padding-right: 0; }
}
@media (max-width: 600px) {
  body.is-home .lg__manifesto { top: 85px; }
}

/* 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;
}
@media (max-width: 700px) {
  /* Sceau jaune masqué sur mobile (il dépassait derrière la carte + il tourne
     en continu = bruit visuel et un peu de calcul inutile). */
  .lg__yellow-sticker { display: none; }
}
.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 {
  display: none; /* petit indicateur de chargement retiré du hero d'accueil */
  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: 16vh;
  left: 24px;
  right: 24px;
  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);
}
/* Variante "phrase forte / citation" : texte plus long → taille réduite,
   interligne respirant, largeur limitée pour un rendu éditorial. */
.lg__hero-yard__tagline--quote p {
  font-weight: 400;
  font-size: clamp(22px, 2.9vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 900px;
}
@media (max-width: 700px) {
  .lg__hero-yard__tagline--quote p { font-size: clamp(21px, 6vw, 30px); max-width: none; }
}
/* Eyebrow descriptif au-dessus de la phrase forte (situe l'école).
   Sélecteur renforcé pour battre .lg__hero-yard__tagline--quote p. */
.lg__hero-yard__tagline .lg__hero-yard__eyebrow {
  margin: 0 0 10px;
  max-width: 1000px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* Sous-titre concret du hero (façon VSCO : bénéfices en une phrase).
   Sélecteur renforcé pour battre .lg__hero-yard__tagline--quote p. */
.lg__hero-yard__tagline .lg__hero-yard__sub {
  pointer-events: auto;
  margin: 20px 0 0;
  max-width: 560px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper);
  opacity: 0.9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* CTA principal du hero (Chris Do : une action claire au-dessus de la ligne
   de flottaison). Bouton blanc plein, texte sombre, inversion au survol. */
.lg__hero-yard__cta {
  pointer-events: auto;
  display: inline-block;
  margin-top: 24px;
  padding: 14px 28px;
  background: var(--paper);
  color: #000;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid var(--paper);
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
.lg__hero-yard__cta:hover {
  background: transparent;
  color: var(--paper);
}
@media (max-width: 700px) {
  .lg__hero-yard__cta { margin-top: 20px; padding: 12px 22px; }
}
@media (max-width: 700px) {
  .lg__hero-yard { aspect-ratio: 4 / 5; max-height: none; }
  .lg__hero-yard__play { top: 16px; left: 24px; font-size: 10px; padding: 6px 10px; }
  .lg__hero-yard__tagline { bottom: 33.333vh; left: 24px; right: 24px; }
  .lg__hero-yard__tagline p { font-size: clamp(22px, 7vw, 36px); }
}

/* ===========================================================
   LATEST — liste des formations à l'affiche style YARD
   =========================================================== */
/* VISION — bandeau vidéo plein cadre entre le manifeste et les formations
   (home). Texte blanc sur vidéo assombrie. Opaque (vidéo) → couvre le hero
   sticky au scroll comme les autres blocs de la home. */
/* Piste de scroll : sa hauteur = durée de la séquence (4 visages). La section
   .lg__vision à l'intérieur est sticky et reste figée pendant tout ce scroll. */
.lg__vision-track {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* Bannière vidéo compacte et cinématique (façon VSCO « PURE PHOTOGRAPHY ») :
   une seule vidéo, ratio large, texte en bas à gauche. Elle remonte par-dessus
   les formations (overlap) grâce au z-index de .lg__vision-track. */
.lg__vision {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5; /* ~2,4:1, banner cinématique */
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: flex-end;
}
.lg__vision__media { position: absolute; inset: 0; }
.lg__vision__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg__vision__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.3) 100%);
}
.lg__vision__overlay {
  position: relative;
  z-index: 10; /* au-dessus des visages (z 1→3) qui glissent par-dessus */
  width: 100%;
  /* Collé à la gouttière gauche (plus à gauche) au lieu d'être centré dans
     un conteneur de 1400px. */
  padding: 0 24px 8vh;
  color: #fff;
}
.lg__vision__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 60px);
  line-height: 0.98;
  white-space: pre-line; /* respecte le \n → deux lignes */
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: 20ch;
  color: #fff;
}
.lg__vision__text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: 1.35;
  max-width: 42ch;
  opacity: 0.95;
  margin: 0;
  color: #fff;
  white-space: pre-line; /* retours à la ligne du back-office respectés */
}
@media (max-width: 700px) {
  .lg__vision { aspect-ratio: 4 / 5; } /* plus haut en mobile */
  .lg__vision__overlay { padding: 0 24px 8vh; }
}

.lg__latest {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 40px 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: 17px;
  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: 17px;
  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: 14px; 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: 14px;
  }
  .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-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  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.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  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));
  /* Au-dessus de la carte de réservation pour que le trait reste continu. */
  z-index: 41;
  margin: 0 -16px;
  /* Padding gauche aligné sur le titre (.lg__formation__title : padding-left
     16 avec la même marge -16 → décalage effectif 0). Gap vertical identique
     au-dessus et en dessous (12px, cf. .lg__tabsec:first-child). */
  padding: 12px 24px 12px 16px;
  background: var(--paper);
  /* Trait de séparation sous la barre d'onglets. */
  border-bottom: 1px solid var(--ink);
  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; }
  /* Flèches calées sur la gouttière du site : on retire leur padding externe
     pour que les glyphes ← → s'alignent sur la marge du contenu. */
  .lg__tabs__nav--prev { padding-left: 0; }
  .lg__tabs__nav--next { padding-right: 0; }
  /* Scroll interne centré sur le bouton actif (scrollIntoView au changement) */
  .lg__tabs__scroll {
    justify-content: flex-start;
    gap: 26px;
    /* Fondu sur les bords pour indiquer qu'on peut scroller les onglets. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
    /* Défilement CRANTÉ : chaque pression de flèche (ou swipe) cale un onglet
       au cran, aligné au début de la barre — effet cliquet, pas de position
       flottante. Le scroll-padding décale le cran au-delà du fondu (18px)
       pour que l'onglet actif soit toujours pleinement lisible. */
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 18px;
  }
  .lg__tabs__scroll .lg__tabs__btn { scroll-snap-align: start; }
  .lg__tabs__btn { font-size: 15px; }
  /* Pas de point entre les onglets sur mobile (réf. UAL) : la respiration
     vient de l'espacement seul. */
  .lg__tabs__sep { display: none; }
  /* CTA masqué sur mobile : on garde la barre d'onglets seule (le bouton
     Réserver/Payer reste accessible dans la page et la sidebar). */
  .lg__tabs__cta { display: none; }
}

/* 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.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lg__tabsec:first-child { padding-top: 12px; }
.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.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin-left: 16px;
}
.lg__tabsec--coll[open] .lg__tabsec__chev { transform: rotate(45deg); }
/* Dépliage fluide du contenu des accordéons (fondu + glissement). */
.lg__tabsec--coll[open] .lg__tabsec__body {
  animation: lg-acc-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes lg-acc-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.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;
}
/* Public visé dans la carte latérale : texte court, lisible, discret.
   Limité à 3 lignes : la carte doit rester plus petite que l'écran, sinon
   le comportement collant (sticky) casse et elle défile avec la page. */
/* « Pour qui » en puces : repère rapide « c'est pour moi ». */
.lg__cta-mini__audience__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
}
.lg__cta-mini__audience__list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  opacity: .9;
}
.lg__cta-mini__audience__list li:last-child { margin-bottom: 0; }
.lg__cta-mini__audience__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: .55;
}
.lg__cta-mini__audience__text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Filet de sécurité : la carte ne dépasse jamais la hauteur disponible. */
.lg__formation__side {
  max-height: calc(100vh - (121px + var(--lg-title-h, 80px) + 88px));
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (max-width: 900px) {
  .lg__formation__side { max-height: none; overflow-y: visible; }
}
/* Blocs éditoriaux de la description : accroche + paragraphes (façon page produit). */
.lg__ovw { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); }
.lg__ovw__block { max-width: 82ch; }
/* Bloc AVEC média : deux colonnes, le média occupe l'espace à droite du texte. */
.lg__ovw__block--media {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 60px);
  align-items: start;
}
.lg__ovw__block--media .lg__ovw__media { margin-top: 0; }
@media (max-width: 900px) {
  .lg__ovw__block--media { display: block; }
  .lg__ovw__block--media .lg__ovw__media {
    margin-top: 20px;
    /* Mobile aussi : jamais de vertical, on garde le 16/9. */
    aspect-ratio: 16 / 9;
  }
  .lg__ovw__block--media .lg__ovw__media img,
  .lg__ovw__block--media .lg__ovw__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.lg__ovw__head {
  font-family: var(--font-sans);
  /* Jamais plus gras que le titre de section (.lg__tabsec__title, 500),
     sinon la hiérarchie s'inverse. Geist n'a que 400 et 500. */
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.lg__ovw__text {
  font-family: var(--font-sans);
  /* Le parent .lg__tabsec impose 500 (Medium) : on revient au Regular.
     Geist n'a que 400 et 500, un 300 n'aurait aucun effet. */
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--ink-2, var(--ink));
}
.lg__ovw__text:last-child { margin-bottom: 0; }
/* Média du bloc : image ou vidéo, pleine largeur du bloc. */
.lg__ovw__media {
  margin: 22px 0 0;
  background: var(--ink);
  overflow: hidden;
  /* Toujours en paysage, sur tous les écrans. */
  aspect-ratio: 16 / 9;
}
.lg__ovw__media img,
.lg__ovw__media video { object-fit: cover; }
.lg__ovw__media img,
.lg__ovw__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* En deux colonnes : le média reste TOUJOURS en paysage (jamais vertical).
   Il se recadre pour remplir ce cadre, sans jamais se déformer. */
@media (min-width: 901px) {
  .lg__ovw__block--media .lg__ovw__media {
    align-self: start;
    aspect-ratio: 16 / 9;
  }
  .lg__ovw__block--media .lg__ovw__media img,
  .lg__ovw__block--media .lg__ovw__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.lg__ovw__cap {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  margin: 8px 0 0;
  opacity: .7;
  background: none;
}
/* Le paragraphe factuel (description) arrive après, en plus discret. */
.lg__ovw__meta {
  padding-top: 22px;
  border-top: 1px solid var(--rule, rgba(0,0,0,.12));
  opacity: .78;
  font-size: 16px !important;
}
@media (max-width: 700px) {
  .lg__ovw { gap: 26px; }
  .lg__ovw__head { font-size: 19px; }
  .lg__ovw__text { font-size: 17px; line-height: 1.55; }
}
.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éons (Objectifs pédagogiques, Public, Pré-requis…) resserrés :
     le padding générique des sections (24/20) ne s'applique pas aux
     déroulants — seul le header garde un padding vertical compact. */
  .lg__tabsec--sub { padding: 0; }
  .lg__tabsec__head { padding: 12px 0; }
  .lg__tabsec--coll .lg__tabsec__body { padding: 0 0 16px; }
}

/* 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 { display: none !important; }
.lg__section-big__num { display: none !important; }
/* Sans le numéro, la grille passe à 2 colonnes : titre extensible + toggle
   calé à droite (sinon le + flotte juste après le texte). */
.lg__section-head { grid-template-columns: 1fr auto !important; }
.lg__section-head__num--legacy {
  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.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* === 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.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.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; }
}

/* Variante ACCORDÉON : liste verticale de jours repliables (pas de grille de
   cartes). Chaque jour = un en-tête cliquable (titre + toggle) qui déroule
   son contenu en dessous. */
/* Formateurs « façon IDW » (réf. idw.li) : petit label mono + nom en typo
   géante, puis panneau photo + rôle + bio TOUJOURS visible. Une ligne fine
   sépare chaque entrée — même vocabulaire que les listes formations (lg__row)
   et intervenants du home (lg__trainer). */
.lg__trx { position: relative; }
.lg__trx__list { list-style: none; margin: 0; padding: 0; }
/* display:block avec la spécificité nécessaire pour battre le générique
   `.lg__tabsec__body li { display:flex }` (listes numérotées des onglets). */
.lg__trx__row,
.lg__tabsec__body .lg__trx__row {
  display: block;
  border-top: 1px solid var(--ink);
  padding: 0;
}
.lg__trx__row:last-child { border-bottom: 1px solid var(--ink); }
/* En-tête cliquable (nom + toggle) — reset bouton, pleine largeur. */
.lg__trx__head {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 46px 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: opacity 0.18s ease;
}
.lg__trx__head:hover { opacity: 0.6; }
.lg__trx__name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
.lg__trx__toggle {
  position: absolute;
  right: 4px;
  top: 20px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
}
.lg__trx__panel {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 4px 0 32px;
}
/* Photo qui suit le curseur au survol du nom : noir & blanc, centrée sur la
   souris. Au clic (panneau ouvert), la photo .lg__trx__photo reste en couleur. */
.lg__trx__cursorimg {
  position: fixed;
  width: clamp(150px, 15vw, 200px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 60;
  filter: grayscale(1) contrast(1.04);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
}
.lg__trx__cursorimg--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  filter: none;
}
.lg__trx__cursorimg--ph span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .lg__trx__cursorimg { display: none; }
}
.lg__trx__photo {
  width: clamp(140px, 17vw, 200px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  flex: 0 0 auto;
}
.lg__trx__photo--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
}
.lg__trx__photo--ph span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: 0.02em;
}
.lg__trx__bio { flex: 1 1 auto; min-width: 0; max-width: 68ch; }
.lg__trx__role {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.lg__trx__text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 700px) {
  .lg__trx__panel { flex-direction: column; gap: 16px; }
  .lg__trx__name { font-size: clamp(24px, 7vw, 40px); }
  .lg__trx__row { padding-bottom: 26px; }
}

/* Section Avis dédiée (page formation), avant le CTA final. */
.lg__avis {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 64px 24px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}
.lg__avis__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--ink);
}
.lg__avis__text {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: 720px;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 900px) {
  .lg__avis { padding: 44px 28px; } /* alignée sur la gouttière effective du contenu de la fiche (tablette) */
}
@media (max-width: 600px) {
  .lg__avis { padding: 44px 24px; } /* gouttière unifiée 24px en mobile */
}

.lg__program--accordion {
  display: block;
}
.lg__program--accordion .lg__program__day {
  position: static;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 0;
  gap: 0;
  display: block;
  background: transparent;
}
.lg__program--accordion .lg__program__day:last-child {
  border-bottom: 1px solid var(--ink);
}
.lg__program__day__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}
.lg__program--accordion .lg__program__day__tag {
  position: static;
  top: auto;
  right: auto;
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 27px);
  letter-spacing: -0.01em;
}
.lg__program__day__toggle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  flex: 0 0 auto;
}
.lg__program__day__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Contenu déroulé encadré (le « carré ») au clic. */
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 22px 24px 26px;
  margin: 0 0 16px;
  background: var(--paper);
}
.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(10px); }
  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;
}
/* NOTRE APPROCHE mobile : chaque pilier tient sur UNE ligne et remplit
   la largeur — taille par titre via le hook de fit (--fit-size). Stable
   depuis que la colonne du titre est en 1fr (largeur indépendante du
   contenu : la mesure ne se re-boucle plus sur elle-même). */
@media (max-width: 700px) {
  /* Piliers : même taille pour les trois, passage sur deux lignes si besoin. */
  .lg__approche__accordion .lg__section-head__title {
    font-size: 24px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
  }
  .lg__approche__accordion .lg__section-big__title {
    font-size: 30px;
    line-height: 1.1;
    white-space: normal;
    overflow: visible;
    padding-right: 34px; /* place du toggle − */
  }
}
/* (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(30px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--ink-2);
  max-width: 36ch;
}
.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;
  /* Les sauts de ligne saisis dans le back-office sont respectés. */
  white-space: pre-line;
}
.lg__ovw__text,
.lg__trainercard__bio { white-space: pre-line; }
/* Vidéo 16/9 qui suit le curseur au survol des lignes de catalogue. */
.lg__row__cursorvid {
  position: fixed;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
}
@media (hover: none), (max-width: 900px) {
  .lg__row__cursorvid { display: none; }
}
/* À propos (page Approche) : L'école + La maison — deux colonnes sur
   desktop, empilées avec filet sur mobile. Kickers mono en tête. */
.lg__approche__about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  margin: clamp(28px, 5vh, 56px) 0;
}
.lg__approche__about__col { min-width: 0; }
.lg__approche__about__kicker {
  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: 0 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.lg__approche__about__text {
  font-size: clamp(17px, 1.4vw, 21px) !important;
  line-height: 1.55 !important;
  max-width: 72ch;
  margin: 0;
}
.lg__approche__about__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lg__approche__about__link:hover { opacity: 0.7; }
@media (max-width: 700px) {
  .lg__approche__about { grid-template-columns: 1fr; gap: 28px; }
}
/* Le bloc La maison suit directement la présentation sur la page À propos,
   dans la MÊME typo que le paragraphe de présentation. */
.lg__contact .lg__approche__about {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0 0 clamp(40px, 6vh, 72px);
}
.lg__contact .lg__approche__about__text {
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: 1.42 !important;
  letter-spacing: -0.01em;
  font-weight: 500;
  max-width: 60ch;
}
/* Titre « Notre écosystème » : même police que le texte, en gras. */
.lg__contact .lg__approche__about__kicker {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
/* Miniatures des sites de l'écosystème (lesgriots.com / studio). */
.lg__contact__eco {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 640px;
  margin-top: 22px;
}
.lg__contact__eco__card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.lg__contact__eco__card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--ink);
  background: #0b0b0c;
  transition: opacity 0.2s ease;
}
.lg__contact__eco__card:hover img { opacity: 0.85; }
.lg__contact__eco__desc {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
}
.lg__contact__eco__label {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 480px) {
  .lg__contact__eco { grid-template-columns: 1fr; }
}
.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-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  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-top: 1px solid var(--ink-4, rgba(0, 0, 0, 0.14));
}
.lg__ag:last-child { border-bottom: 1px solid var(--ink-4, rgba(0, 0, 0, 0.14)); }
.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 {
  /* Même disposition que la liste Événements : titre+méta à gauche,
     statut/caret à droite, calés sur la gouttière du conteneur. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  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 : titre + ligne méta (même traitement que la liste Événements) */
.lg__ag__main { min-width: 0; }
.lg__ag__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}
.lg__ag__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
}
.lg__ag__meta__dot { color: var(--ink-3); padding: 0 6px; }
.lg__ag__meta__kind { color: var(--ink); font-weight: 500; }

/* SIDE : pill statut + places + caret, alignés à droite sur la ligne. */
.lg__ag__side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.lg__ag__pill {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  line-height: 1.4;
}
.lg__ag__pill.is-open { color: var(--accent); }
.lg__ag__pill.is-full { color: var(--ink-3); }
.lg__ag__pill.is-cancel { color: var(--ink-3); 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 {
  /* Plus de colonne date : le panneau s'aligne sur la gouttière, comme la head. */
  padding: 4px 0 32px;
  max-width: 900px;
  animation: lg-ag-slide 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@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 {
  /* Une seule police pour tous les boutons du site : la sans maison. */
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
  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 — même disposition, tailles resserrées ----- */
@media (max-width: 700px) {
  .lg__ag__head { gap: 14px; padding: 16px 0; }
  .lg__ag__title { font-size: 17px; }
  .lg__ag__meta { font-size: 12px; }
  .lg__ag__meta__dot { padding: 0 4px; }
  .lg__ag__places { display: none; }
  .lg__ag__caret { margin-top: 0; }
  .lg__ag__panel {
    padding-left: 0;
    padding-right: 0;
  }
}
.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);
  /* Contenu bord à bord, sans marge latérale (look éditorial plein cadre). */
  padding: 40px 0 80px;
  /* Pas de min-height forcée : sur une page à peu de contenu (ex. Workshops
     avec un seul item), elle créait un grand vide entre le contenu et le
     footer (« un trou »). Le footer reste collé en bas grâce au flex
     (#root > .lg > main { flex: 1 }), sans creuser d'espace superflu. */
  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;
}
/* Bandeau média en haut des pages-listes (catalogue, workshops). Pleine
   largeur, ratio cinéma, le média couvre la zone. */
.lg__pagehero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Annule le padding-top de la section pour coller le média sous le menu
     (supprime la barre blanche au-dessus). */
  margin-top: -40px;
  /* Même gabarit que le hero d'accueil (16/9, max 78vh). */
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  background: #0b0b0c;
  margin-bottom: 36px;
}
/* Effet de superposition au scroll sur les pages liste (Formations,
   Workshops, Agenda, Ressources) — identique à la home : le média du hero
   reste fixé (sticky) et le contenu opaque en dessous remonte par-dessus.
   NB : la vidéo-au-survol des lignes (.lg__page-bg) est retirée sur ces pages
   car elle entrerait en conflit avec le contenu devenu opaque. */
body.is-listhero:not(.is-home) .lg__catalogue .lg__pagehero {
  position: sticky;
  top: 0;
  z-index: 0;
  margin-bottom: 0;
}
/* Superposition — MÊME MÉCANIQUE QUE LA HOME : chaque bloc de contenu sous le
   hero est OPAQUE (fond papier) et remonte par-dessus la vidéo sticky au
   scroll. On n'utilise plus la plaque ::after mesurée en JS : elle restait
   ancrée au bas du hero et ne suivait pas le contenu qui monte, si bien que
   le texte passait en transparent (illisible) sur la vidéo sombre pendant la
   transition. Des blocs opaques et jointifs = l'effet propre de la home. */
body.is-listhero:not(.is-home) .lg__catalogue .lg__pagehero ~ * {
  position: relative;
  z-index: 2;
  background: var(--paper);
  /* Fond papier PLEINE LARGEUR : le hero sticky est full-bleed (100vw), donc
     le fond opaque doit couvrir aussi la gouttière latérale de 24px, sinon la
     vidéo sombre réapparaît sur les bords pendant la superposition. On étend
     la boîte au bord de l'écran (margin négatif) tout en gardant le texte à sa
     place (padding compensé). */
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}
/* Pas de gap transparent entre blocs opaques (sinon la vidéo sticky
   réapparaît dans l'interstice quand le contenu monte au-dessus du hero). */
body.is-listhero:not(.is-home) .lg__catalogue .lg__ag__list,
body.is-listhero:not(.is-home) .lg__catalogue .lg__rows {
  margin-top: 0;
}
/* Fiche formation/workshop : banner normal (pas de superposition).
   Le contenu de la fiche ne couvre pas toute la largeur (onglets + 2 colonnes),
   donc un banner sticky transparaîtrait dans les zones non couvertes (bandes
   sombres). On le laisse défiler normalement. */
/* Marge tampon en haut du 1er bloc de contenu : quand il remonte au scroll,
   c'est une bande de papier propre qui glisse par-dessus le média (et l'intro),
   au lieu d'un texte qui en percute un autre. */
body.is-listhero:not(.is-home) .lg__catalogue .lg__pagehero + * {
  padding-top: 40px;
}
/* Pas de marge transparente entre blocs opaques (sinon le hero sticky
   apparaît dans la bande). La marge-bas des filtres devient du padding. */
body.is-listhero:not(.is-home) .lg__cat-filters {
  margin-bottom: 0;
  padding-bottom: 28px;
}
body.is-listhero:not(.is-home) .lg__page-bg {
  display: none;
}
.lg__pagehero video,
.lg__pagehero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Texte de l'intro superposé sur le média, calé en bas, sur un dégradé sombre
   pour rester lisible. */
.lg__pagehero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Titre + intro regroupés en bas (le titre est ainsi placé bas). */
  justify-content: flex-end;
  padding: 32px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 56%, rgba(0,0,0,0.65) 100%);
}
.lg__pagehero__overlay .lg__intro {
  margin: 0;
  max-width: 1000px;
}
.lg__pagehero__overlay .lg__intro__text {
  color: #fff;
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  max-width: 720px;
}
.lg__pagehero__overlay .lg__intro__sub {
  color: #fff;
  font-size: clamp(12px, 1.1vw, 15px);
  opacity: 0.85;
}
.lg__pagehero__brand {
  /* Le logo est désormais porté par le menu (visible sur le média) → on
     masque ce mot-marque pour éviter le doublon. */
  display: none;
  position: absolute;
  top: 24px;
  left: 24px;
  width: 240px;
  z-index: 3;
  color: var(--paper);
  text-decoration: none;
  transition: opacity 0.35s ease;
}
.lg__pagehero__brand .lg__hero__griot__wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 620 / 86;
}
body.is-scrolled .lg__pagehero__brand {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  /* Même taille / position que le mot-marque de la home sur mobile. */
  .lg__pagehero__brand { top: 18px; left: 18px; width: 175px; }
}
.lg__pagehero__title {
  font-family: var(--font-sans);
  font-weight: 500; /* Geist n'a pas de 700 réel → 500 (Medium) évite le faux-gras */
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 12px;
}
.lg__pagehero__title--plain { color: var(--ink); margin: 0 0 18px; }
@media (max-width: 700px) {
  .lg__pagehero__title { font-size: clamp(26px, 8vw, 40px); margin-bottom: 8px; }
  .lg__pagehero__overlay .lg__intro__text { font-size: 15px; }
}
@media (max-width: 700px) {
  .lg__pagehero { aspect-ratio: 3 / 2; margin-bottom: 22px; margin-top: -50px; }
  /* Le hero mobile est désormais un bandeau (pas plein écran) : on cale le
     titre + l'intro en bas du bandeau, sans le décalage 33vh prévu pour le
     plein écran (qui poussait le texte hors du média). */
  .lg__pagehero__overlay { padding: 16px 18px; }
  /* Fiche formation/workshop : le bandeau 3/2 était trop court — le bloc
     titre + accroche débordait vers le haut et percutait le menu. On rend au
     hero une vraie hauteur (~3/4 d'écran) et on réserve la zone du header
     transparent (85px) en haut de l'overlay pour interdire la collision. */
  .lg__formation .lg__pagehero {
    aspect-ratio: auto;
    height: 76vh;
    height: 76svh;
    max-height: none;
  }
  .lg__formation .lg__pagehero__overlay {
    padding-top: 105px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 600px) {
  /* Mobile : le média des pages ne prend PLUS tout l'écran au repos — il garde
     son ratio 3/2 (bandeau, cf. règle max-width:700) au lieu de 100vh. Le
     contenu opaque remonte quand même par-dessus au scroll (superposition
     conservée). La home (.lg__hero-yard) garde son plein écran, elle. */
  .lg__pagehero { transition: height 0.5s ease, max-height 0.5s ease; }
}
/* Desktop : hauteurs d'origine conservées. Le bloc titre + accroche reste
   donc exactement là où il était ; ce n'était pas la hauteur le problème,
   c'était que le bandeau ne remontait pas sous le menu et laissait du blanc
   au-dessus. */
@media (min-width: 601px) {
  #catalogue .lg__pagehero,
  #workshops .lg__pagehero,
  #agenda .lg__pagehero,
  #events .lg__pagehero,
  #ressources .lg__pagehero { max-height: 44vh; }
  /* Fiche formation, workshop, événement : un peu plus grand que les listes. */
  .lg__formation .lg__pagehero { max-height: 50vh; }
}

/* Le média est cadré par le haut. En « cover », un bandeau plus large que
   le 16/9 de la vidéo rogne autant en haut qu'en bas : le sujet, qui est
   toujours dans la moitié haute, se faisait couper. On garde le haut de
   l'image et on rogne par le bas. */
.lg__pagehero video,
.lg__pagehero img { object-position: center top; }
.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;
}
/* Pages liste SANS média hero (mode "Notre approche") : l'intro n'est plus dans
   l'overlay du hero, elle prenait donc la taille de base énorme (jusqu'à 48px)
   et alourdissait la page (effet "titre en trop gras"). On la ramène à une
   taille de lede, sous le titre, comme sur Notre approche. */
body:not(.is-listhero) .lg__catalogue .lg__intro__text {
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-2);
  max-width: 68ch;
}
/* Lien cliquable dans le sous-titre (ex. Agenda → recevoir les prochaines dates) */
.lg__intro__sublink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Petit texte sous le titre dans le hero banner d'une fiche formation. */
.lg__formation__herosub {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0.96;
  max-width: 38ch;
}
.lg__intro__sublink:hover { color: inherit; opacity: 0.75; }
.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);
}

/* ===== ÉVÉNEMENTS — liste en lignes (titre + méta à gauche, lien à droite) ===== */
.lg__events {
  padding: 12px 0 90px;
  display: flex;
  flex-direction: column;
}
.lg__event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--ink-4, rgba(0, 0, 0, 0.14));
}
.lg__event:last-child { border-bottom: 1px solid var(--ink-4, rgba(0, 0, 0, 0.14)); }
/* La ligne entière est un lien vers la fiche : on neutralise le hover jaune
   global des <a> et on anime seulement le lien de droite. */
a.lg__event, a.lg__event:hover { color: var(--ink); }
.lg__event:hover .lg__event__cta { color: var(--ink-2); }
.lg__event.is-past { opacity: 0.5; }
.lg__event__main { min-width: 0; }
.lg__event__title {
  /* Proportions de la réf. : titre modéré au-dessus de la ligne méta. */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}
.lg__event__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
}
.lg__event__meta__dot { color: var(--ink-3); padding: 0 6px; }
.lg__event__kind { color: var(--ink); font-weight: 500; }
.lg__event__cta {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.18s ease;
}
.lg__event__cta__arrow { font-size: 13px; transform: translateY(1px); }
@media (max-width: 640px) {
  /* Même disposition qu'en desktop : titre+méta à gauche, lien à droite. */
  .lg__event { gap: 14px; padding: 18px 0; }
  .lg__event__title { font-size: 17px; }
  .lg__event__meta { font-size: 12px; }
  .lg__event__meta__dot { padding: 0 4px; }
  .lg__event__cta { font-size: 13px; }
}

.lg__rows {
  display: flex;
  flex-direction: column;
}
.lg__row {
  border-top: 1px solid var(--ink);
  /* Léger retrait du texte à gauche (la ligne de séparation reste bord à bord). */
  padding: 10px 0 14px 24px;
  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;
  /* Retrait à gauche aligné sur les titres (les lignes restent bord à bord). */
  padding: 16px 0 16px 24px;
  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;
}
/* Mobile : les filtres (tous · formations · événements) restent ALIGNÉS sur
   une seule ligne — typo réduite, pas de retour à la ligne (défilement
   horizontal discret en secours si un libellé s'ajoute). */
@media (max-width: 700px) {
  .lg__cat-filters {
    font-size: 15px;
    gap: 16px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lg__cat-filters::-webkit-scrollbar { display: none; }
}
.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;
}
.lg__cat-empty__news {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.lg__cat-empty__news a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

/* ----- 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;
  /* Même taille que le titre des pages liste (Formations/Agenda/Ressources). */
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  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;
  white-space: pre-line; /* retours à la ligne du back-office respectés */
}
.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,
.lg__trx__row:hover .lg__trx__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);
}
/* ---- Gouttière gauche uniforme (24px) sur toutes les pages ----
   Aligne le bord gauche du contenu de chaque page (réf. YARD mobile).
   .lg__catalogue est géré à part (lignes bord à bord, texte en retrait via
   .lg__row / .lg__cat-filters). .lg__latest est centré → non concerné. */
.lg__manifesto,
.lg__formation,
.lg__trainers,
.lg__cgv,
.lg__approche,
.lg__financement,
.lg__contact { padding-left: 24px; }
/* Desktop : gouttière SYMÉTRIQUE 24px gauche + droite sur toutes les pages
   (y compris les listes). Sur les listes, la gouttière vient de la section,
   donc on annule le retrait des lignes/filtres pour ne pas doubler à 48px. */
@media (min-width: 601px) {
  .lg__catalogue,
  .lg__manifesto,
  .lg__formation,
  .lg__trainers,
  .lg__cgv,
  .lg__approche,
  .lg__financement,
  .lg__contact,
  .lg__latest {
    padding-left: 24px;
    padding-right: 24px;
  }
  .lg__catalogue .lg__row,
  .lg__catalogue .lg__cat-filters {
    padding-left: 0;
  }
  /* Fiche : aligner les éléments edge-to-edge (lignes, onglets, sections)
     sur la même gouttière 24px (annule les margin: 0 -16px). */
  .lg__formation .lg__sommaire,
  .lg__formation .lg__tabs,
  .lg__formation .lg__tabsec,
  .lg__formation .lg__tabsec__title,
  .lg__formation .lg__section,
  .lg__formation .lg__section.is-open,
  .lg__formation .lg__formation__upcoming__head {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Titre de la page À propos. */
.lg__contact__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 clamp(24px, 4vh, 40px);
  color: var(--ink);
}
/* Bloc contact de la page À propos — même langage que Notre écosystème. */
.lg__contact__coords {
  max-width: 640px;
  margin: 0 0 clamp(48px, 8vh, 96px);
}
.lg__contact__coords .lg__approche__about__kicker {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.lg__contact__coords__mail {
  margin: 0 0 10px;
}
.lg__contact__coords__mail a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.lg__contact__coords__mail a:hover { opacity: 0.7; }
.lg__contact__coords__line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 4px;
}
.lg__contact__coords__line--muted {
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.lg__contact__coords__links {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
}
.lg__contact__coords__links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg__contact__coords__links a:hover { opacity: 0.7; }
/* Présentation de la page À propos : paragraphe de lecture, largeur de
   colonne confortable — distinct de la pile display en dessous. */
.lg__contact__presentation {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 clamp(36px, 6vh, 64px);
  white-space: pre-line; /* retours à la ligne du back-office respectés */
}
.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);
}

/* Formulaire de contact (page À propos) — sujets cliquables + message. */
.lg__contact__form {
  max-width: 640px;
  margin-top: clamp(36px, 6vh, 64px);
}
.lg__contact__form__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.lg__contact__form__subject {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lg__contact__form__subject.is-active {
  background: var(--ink);
  color: var(--paper);
}
.lg__contact__form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .lg__contact__form__row { grid-template-columns: 1fr; }
}
.lg__contact__form input,
.lg__contact__form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--ink);
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
}
.lg__contact__form textarea { resize: vertical; }
.lg__contact__form input::placeholder,
.lg__contact__form textarea::placeholder { color: var(--ink-3); }
.lg__contact__form input:focus,
.lg__contact__form textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.lg__contact__form__send {
  display: inline-block;
  padding: 13px 26px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lg__contact__form__send:hover { background: transparent; color: var(--ink); }
.lg__contact__form__send:disabled { opacity: 0.6; cursor: wait; }
.lg__contact__form__err {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #b03030;
  margin: 0 0 10px;
}
.lg__contact__form__done {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}

@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;
}
/* Titre + texte d'intro de la section partenaires (page Notre approche). */
.lg__partners__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.lg__partners__intro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
  white-space: pre-line;
}
.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 24px 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; }

/* Newsletter du footer — même registre typographique que les liens de colonne,
   un simple champ souligné + flèche (pas de bloc rapporté). */
.lg__footer__nl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.lg__footer__nl label {
  color: var(--paper);
  cursor: pointer;
}
.lg__footer__nl__row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  max-width: 220px;
}
.lg__footer__nl__row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  padding: 4px 0 6px;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.lg__footer__nl__row input::placeholder {
  color: color-mix(in srgb, var(--paper) 50%, transparent);
  text-transform: uppercase;
}
.lg__footer__nl__row button {
  background: none;
  border: 0;
  padding: 0 0 2px;
  color: var(--paper);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.lg__footer__nl__row button:disabled { opacity: 0.5; cursor: default; }
.lg__footer__nl__err,
.lg__footer__nl__done {
  margin: 0;
  color: var(--paper);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* 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);
  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; }
  /* Mobile aussi : le logo (mot-marque SVG) plutôt que le texte. */
  .lg__header__griot { display: flex; }
  .lg__header__wordmark { display: none; }
  .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; }
}

/* Mobile : gouttière latérale UNIFORME 24px partout (gauche = droite), comme
   sur desktop et le footer. Uniformise le retrait du texte sur toutes les
   pages et sections. Les médias/héros restent plein cadre (full-bleed). */
@media (max-width: 600px) {
  .lg { padding-left: 24px; padding-right: 24px; }
  .lg__catalogue,
  .lg__manifesto,
  .lg__approche,
  .lg__financement,
  .lg__contact,
  .lg__cgv,
  .lg__trainers,
  .lg__formation,
  .lg__latest {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Les lignes/filtres des listes s'alignent sur la gouttière (pas de double retrait). */
  .lg__catalogue .lg__row,
  .lg__catalogue .lg__cat-filters {
    padding-left: 0;
  }
  /* Fiche : full-bleed déterministe — le contenu se cale sur la gouttière 24. */
  .lg__formation {
    width: auto;
    margin-left: -24px;
    margin-right: -24px;
  }
  /* Fiche formation : annule les breakouts edge-to-edge internes pour rester
     dans la même gouttière 24px (mêmes sélecteurs que la règle desktop). */
  .lg__formation .lg__sommaire,
  .lg__formation .lg__tabs,
  .lg__formation .lg__tabsec,
  .lg__formation .lg__tabsec__title,
  .lg__formation .lg__section,
  .lg__formation .lg__section.is-open,
  .lg__formation .lg__formation__upcoming__head {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   PAGE RESSOURCE — détail (inspiration The Futur, palette Griothèque)
   ============================================================ */
/* La fiche ressource vit dans le même cadre que le reste du site : bord à
   bord, texte décalé de 24px comme les lignes du catalogue. Elle était dans
   une boîte de 1100px centrée, seule page du site à l'être, et son titre
   commençait au milieu de l'écran là où tous les autres commencent au bord. */
.lg__resource {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
  padding: 40px 24px 80px;
}
.lg__resource__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

/* Le plein cadre est fait pour les grands titres, pas pour les paragraphes :
   sur un écran large, une ligne de texte de deux mille pixels ne se lit plus.
   Le titre garde toute la largeur, la prose se borne. */
.lg__resource__desc,
.lg__resource__inside { max-width: 72ch; }
.lg__resource__head .lg__resource__subtitle {
  max-width: 52ch;
  margin-bottom: 0;
  font-size: clamp(16px, 1.5vw, 21px);
}

/* ---- Colonne média : elle suit le scroll, et ne bouge pas ----
   Le visuel et la carte de téléchargement restent sous les yeux pendant
   toute la lecture, comme le bloc d'informations d'une fiche formation.

   Le calage est une constante, et c'est le point important. Une première
   version suivait la hauteur réelle de la barre de titre, qui passe de zéro
   à sa taille pleine au moment où elle se colle : la colonne se décalait
   d'un coup sous les yeux du lecteur, exactement pendant qu'il lisait. On
   réserve donc la place de la barre collée une fois pour toutes. Rien ne
   bouge, jamais. */
.lg__resource__aside {
  position: sticky;
  top: 195px; /* 121 en-tête du site + 58 barre de titre collée + 16 d'air */
}
.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__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.04em;
  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 ---- */
/* ---- La barre de titre au scroll ----------------------------------
   Même geste que sur les fiches formation : le titre se replie en une
   barre collée sous l'en-tête du site dès qu'on descend. Elle n'existe pas
   tant qu'on est en haut de page, où le vrai titre est déjà là. On la
   masque par la hauteur et non par le font-size, sinon elle laisse un
   trou au-dessus du contenu. */
.lg__resource__temoin {
  display: block;
  height: 1px;
  margin-bottom: -1px;
}
.lg__resource__barre {
  position: sticky;
  top: 121px;
  z-index: 42;
  margin: 0 -24px;
  padding: 10px 24px 12px;
  background: var(--paper);
  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.03em;
  color: var(--ink);
  transition: opacity 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lg__resource__barre:not(.is-stuck) {
  height: 0;
  padding: 0;
  border-bottom: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

/* L'en-tête de la fiche : titre et sous-titre, pleine largeur, au bord
   gauche, au-dessus de la colonne média. Un filet le sépare du contenu,
   comme sur les pages de catalogue. */
.lg__resource__head {
  margin: 0 0 44px;
  padding: 12px 0 32px;
  border-bottom: 1px solid var(--ink);
}
/* Le titre d'une ressource se lit comme celui d'une formation ou d'un
   événement : même graisse, même échelle, même approche. Il était en 700 et
   en taille fixe, ce qui le faisait crier à côté des autres et déborder sur
   les petits écrans. */
.lg__resource__title {
  font-family: var(--font-sans);
  /* Une vraie tête de page, à l'échelle des titres de fiche formation.
     La taille est calculée pour que le titre tienne sur UNE ligne quelle
     que soit la largeur de l'écran : un titre coupé en deux perd son
     souffle, et la coupure tombe rarement où on l'aurait choisie. Le clamp
     sert de secours tant que la mesure n'a pas eu lieu. */
  font-size: var(--fit-size, clamp(36px, 6vw, 80px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  white-space: nowrap;
}
.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.04em;
  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: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  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) 16px var(--space-15); }
  /* Sur téléphone, tenir sur une ligne voudrait dire écrire en 18px : on
     laisse le titre se casser, et on reprend une taille lisible. */
  .lg__resource__title {
    white-space: normal;
    font-size: clamp(30px, 7.5vw, 44px) !important;
    line-height: 1.05;
  }
  .lg__resource__barre { top: 85px; margin: 0 -16px; padding: 8px 16px 10px; font-size: clamp(16px, 4.5vw, 22px); }
  .lg__resource__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Sous 900px la grille passe à une colonne : coller la carte en haut
     mangerait la moitié de l'écran d'un téléphone. */
  .lg__resource__aside { position: static; max-width: 360px; }

}

/* ===================================================================
   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;
}

/* ===== Page de lancement "Bientôt" (coming soon plein écran) ===== */
.lg__launch {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper, #f6f5f3);
  padding: 32px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--ink, #111111);
}
/* Vidéo (ou image) en fond plein écran */
.lg__launch__bg {
  /* fixed : ancres a l'ecran, pas a la page. Le contenu descendu de 20vh
     rend la page defilable ; en absolute, fond, voile et logo montaient
     au scroll au lieu de rester en place. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Voile sombre pour la lisibilité du texte */
.lg__launch__scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 38%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
/* Barre du haut : marque à gauche, réseaux à droite (comme le header) */
.lg__launch__top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}
.lg__launch__logo {
  color: var(--paper);
  text-decoration: none;
  display: block;
}
.lg__launch__logo svg {
  /* Même taille que le logo du header du site */
  width: min(240px, 55vw);
  height: auto;
  display: block;
}
.lg__launch__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--paper);
}
.lg__launch__social a { color: var(--paper); text-decoration: none; }
.lg__launch__social a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.lg__launch__social span { opacity: 0.55; }
.lg__launch__inner { position: relative; z-index: 2; max-width: 860px; width: 100%; text-align: center; transform: translateY(20vh); }
.lg__launch__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto 22px;
  max-width: 100%;
  text-wrap: balance;
}
.lg__launch__text {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 38ch;
  margin: 0 auto 32px;
}
.lg__launch__form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.lg__launch__input {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(246, 245, 243, 0.4);
  color: var(--paper);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
}
.lg__launch__input:focus { border-color: var(--paper); }
.lg__launch__input::placeholder { color: rgba(246, 245, 243, 0.5); }
.lg__launch__btn {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 14px 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.lg__launch__btn:disabled { opacity: 0.6; cursor: default; }
.lg__launch__ok { font-size: 18px; font-weight: 500; }
.lg__launch__err { color: #ff9b9b; font-size: 13px; margin-top: 12px; }
@media (max-width: 560px) {
  .lg__launch__form { flex-direction: column; }
  .lg__launch__top { flex-direction: column; gap: 10px; padding: 18px 18px; }
  .lg__launch__social { justify-content: flex-start; font-size: 12px; }
  /* Décalage réduit sur mobile pour ne pas pousser le formulaire hors écran */
  .lg__launch__inner { transform: translateY(9vh); }
}
/* Écrans peu hauts (mobile paysage, petits laptops) : on limite la descente */
@media (max-height: 720px) {
  .lg__launch__inner { transform: translateY(9vh); }
}

/* iOS (mode économie d'énergie) : masque le gros bouton play superposé sur la
   vidéo de fond quand l'autoplay est bloqué — la lecture reprend au 1er toucher. */
.lg__launch__bg::-webkit-media-controls-start-playback-button,
.lg__launch__bg::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}

/* Vidéo de fond launch : invisible tant qu'elle ne joue pas (l'image poster
   dessous prend le relais) → le bouton play iOS n'est jamais visible. */
.lg__launch__bg--video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.lg__launch__bg--video.is-playing {
  opacity: 1;
}

/* Mention légale sous le formulaire launch (consentement newsletter) */
.lg__launch__legal {
  margin: 14px auto 0;
  max-width: 420px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(246, 245, 243, 0.55);
  text-align: center;
}

/* Carte de réservation complète : colonne droite sur desktop ; sur mobile,
   ÉCRAN SCINDÉ — la carte entière occupe en permanence la moitié basse de
   l'écran (scrollable à l'intérieur), la fiche se lit dans la moitié haute. */
.lg__formation__side--mobile { display: none; }
@media (max-width: 900px) {
  .lg__formation__side--desktop { display: none; }
  .lg__formation__side--mobile {
    display: block;
    /* sticky ; le panneau colle au bas de l'écran pendant la lecture, puis se
       range à sa place (fin de fiche) quand on arrive en bas : le footer
       vient APRÈS lui, jamais par-dessus. fixed l'arrachait du flux, et le
       footer finissait affiché au-dessus du bloc d'achat. */
    position: sticky;
    position: -webkit-sticky;
    top: auto; /* neutralise le top: hérité de la règle sticky desktop */
    bottom: 0;
    /* Pleine largeur : compense la gouttière de 24px de la fiche. Une règle
       plus haut fige width: 100%, d'où le calc plutôt que des marges seules. */
    margin: 0 -24px;
    width: calc(100% + 48px);
    box-sizing: border-box;
    /* SANS défilement : le panneau prend la hauteur de la carte entière. */
    height: auto;
    z-index: 48; /* au-dessus des onglets sticky (41), sous le header (55) */
    background: var(--paper);
    border-top: 1px solid var(--ink);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  }
  .lg__sheet__body {
    overflow: visible;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .lg__sheet__body .lg__cta-mini { box-shadow: none; }
  /* Version ULTRA-DENSE de la carte dans le panneau : tout visible d'un
     bloc, hauteur minimale. */
  .lg__sheet__body { padding: 0 0 env(safe-area-inset-bottom, 0px); }
  /* Pas de rectangle interne : la carte se fond dans le panneau (le trait
     supérieur du panneau suffit). */
  .lg__sheet__body .lg__cta-mini { padding: 10px 14px 8px; border: 0; }
  .lg__sheet__body .lg__cta-mini__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 7px;
    padding-bottom: 7px;
  }
  .lg__sheet__body .lg__cta-mini__head { gap: 1px; padding-bottom: 5px; margin-bottom: 5px; }
  .lg__sheet__body .lg__cta-mini__price { font-size: 16px; }
  .lg__sheet__body .lg__cta-mini__hint { font-size: 8px; }
  .lg__sheet__body .lg__cta-mini__cert { font-size: 10px; margin: 0 0 4px; }
  .lg__sheet__body .lg__cta-mini__cert__code { font-size: 9px; }
  .lg__sheet__body .lg__cta-mini__badges { gap: 3px; margin-bottom: 5px; }
  .lg__sheet__body .lg__cta-mini__badges span { font-size: 7px; padding: 2px 5px; }
  .lg__sheet__body .lg__cta-mini__meta { margin: 0 0 5px; font-size: 10px; }
  .lg__sheet__body .lg__cta-mini__meta li { padding: 2px 0; }
  .lg__sheet__body .lg__cta-mini__sessions { margin: 0 0 5px; padding-top: 5px; }
  .lg__sheet__body .lg__cta-mini__sessions__label { font-size: 8px; margin-bottom: 1px; }
  .lg__sheet__body .lg__cta-mini__session__date { font-size: 12px; }
  .lg__sheet__body .lg__cta-mini__session__meta { font-size: 9px; }
  .lg__sheet__body .lg__cta-mini__audience__list li,
  .lg__sheet__body .lg__cta-mini__audience__text { font-size: 10px; line-height: 1.3; }
  .lg__sheet__body .lg__cta-mini__btn { padding: 7px 12px; font-size: 12px; margin-bottom: 4px; }
  .lg__sheet__body .lg__cta-mini__sub { font-size: 9px; }
  .lg__sheet__body .lg__cta-mini__cpfbox { margin-top: 4px; gap: 6px; }
  .lg__sheet__body .lg__cta-mini__cpfbox__logo { height: 20px; width: 20px; }
  .lg__sheet__body .lg__cta-mini__cpfbox__text { font-size: 9px; }
  /* Seul le footer réserve la hauteur du panneau fixe : c'est lui qui finit
     la page. La fiche elle-même n'en a plus besoin depuis que le bloc CTA de
     bas de page est masqué en mobile, sinon on verrait un grand trou blanc
     entre la dernière section et le footer. */
  /* Le panneau sticky est le dernier élément de la fiche : il la termine
     lui-même, aucune réserve de hauteur à prévoir. */
  .lg__formation { padding-bottom: 0; }

}

/* ===================================================================
   MOTION — respect du réglage système « réduire les animations ».
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ===================================================================
   FICHE WORKSHOP — layout ÉVÉNEMENT (distinct des formations).
   Page linéaire : bandeau méta, CTA, blocs de contenu à filets.
   =================================================================== */
.lg__ws__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(16px, 3vw, 40px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0;
  margin: 8px 0 22px;
}
.lg__ws__meta__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lg__ws__meta__label {
  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));
}
.lg__ws__meta__value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lg__ws__meta__status {
  /* Même traitement que les statuts de l'agenda et des sessions :
     sans maison + jaune brand, pas de mono vert. */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.lg__ws__meta__status.is-open { color: var(--accent); }
.lg__ws__meta__status.is-full,
.lg__ws__meta__status.is-cancel,
.lg__ws__meta__status.is-closed { color: var(--ink-3); }
.lg__ws__ctarow { margin: 0 0 clamp(36px, 6vh, 64px); }
.lg__ws__btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.lg__ws__btn:hover { background: var(--accent); color: var(--ink); }
.lg__ws__body { max-width: 760px; }
.lg__ws__block {
  border-top: 1px solid var(--ink);
  padding: 18px 0 30px;
}
.lg__ws__h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--ink);
}
.lg__ws__prose { margin: 0 0 12px; }
.lg__ws__prose--muted { color: var(--ink-3, rgba(0, 0, 0, 0.55)); font-size: 0.92em; }
.lg__ws__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lg__ws__list li {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  padding: 10px 0 10px 26px;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.lg__ws__list li:last-child { border-bottom: 0; }
.lg__ws__list li::before {
  content: "→";
  position: absolute;
  left: 0;
}
.lg__cta-final__btn--ws { margin-top: 8px; }
@media (max-width: 700px) {
  .lg__ws__meta { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 16px 0; }
  .lg__ws__btn { display: block; text-align: center; }
}


/* ---- Modale newsletter --------------------------------------------------
   Une colonne, rien que le formulaire. Champs soulignés plutôt qu'encadrés,
   comme le reste des formulaires du site. Au mobile le panneau occupe tout
   l'écran. */
.lg__nl {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lg-nl-voile 0.25s ease both;
}
@keyframes lg-nl-voile { from { opacity: 0; } to { opacity: 1; } }

.lg__nl__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  animation: lg-nl-monte 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lg-nl-monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lg__nl__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 8px 15px;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
}
.lg__nl__close:hover { background: var(--accent); color: var(--ink); }

.lg__nl__body { padding: 34px 32px 30px; }
.lg__nl__logo {
  display: block;
  width: 150px;
  margin: 0 0 20px;
  line-height: 0;
  color: var(--ink);
}
/* Le mot-marque partage son wrapper avec le hero, qui le fixe à 400px : on
   le ramène ici à la largeur du bloc. */
.lg__nl__logo .lg__hero__griot__wrap {
  position: static;
  width: 100%;
  height: auto;
  display: block;
}
.lg__nl__logo .lg__wordmark-svg { width: 100%; height: auto; display: block; }
.lg__nl__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 12px;
}
.lg__nl__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  max-width: 20ch;
}
.lg__nl__lede {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 42ch;
}

.lg__nl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lg__nl__field { margin-bottom: 18px; }
.lg__nl__field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0.6;
  margin-bottom: 4px;
}
.lg__nl__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lg__nl__field input::placeholder { color: var(--ink-3); }
.lg__nl__field input:focus {
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 0 var(--ink);
}

.lg__nl__consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
  margin: 4px 0 20px;
}
.lg__nl__consent input { margin-top: 2px; accent-color: var(--ink); flex: 0 0 auto; }

.lg__nl__err {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #d72d2d;
  margin: 0 0 14px;
}

.lg__nl__actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.lg__nl__btn,
.lg__nl__ghost {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 12px 26px;
  border: 1px solid var(--ink);
  /* Pastille, comme le CTA du hero : c'est la forme de bouton de la maison. */
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lg__nl__btn { background: var(--accent); color: var(--ink); font-weight: 600; }
.lg__nl__btn:hover { background: var(--ink); color: var(--paper); }
.lg__nl__btn:disabled { opacity: 0.6; cursor: wait; }
.lg__nl__ghost { background: transparent; color: var(--ink-2); }
.lg__nl__ghost:hover { color: var(--ink); }

.lg__nl__done .lg__nl__btn { margin-top: 4px; }

@media (max-width: 700px) {
  .lg__nl { padding: 0; align-items: stretch; }
  .lg__nl__panel {
    max-width: none;
    max-height: none;
    min-height: 100%;
    border: 0;
  }
  /* Retrait en haut à droite : le bouton de fermeture est posé dans ce coin. */
  .lg__nl__body { padding: 30px 24px 32px; }
  .lg__nl__kicker { padding-right: 52px; }
  .lg__nl__row { grid-template-columns: 1fr; gap: 0; }
  .lg__nl__actions { flex-direction: column-reverse; align-items: stretch; }
  .lg__nl__btn, .lg__nl__ghost { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lg__nl, .lg__nl__panel { animation: none; }
}

/* ---- Complements pour la modale de telechargement -----------------------
   Elle partage le gabarit des autres modales ; il lui manquait un style de
   message d'erreur et un bouton-lien pour relancer le telechargement. */
.lg__modal__err {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #d72d2d;
  margin: 0;
}
.lg__modal__submit--lien {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin-top: 4px;
}
.lg__modal__done .lg__modal__intro:last-of-type { margin-bottom: 16px; }
/* Deux cases a cocher a la suite : on les rapproche pour qu'elles se lisent
   comme un bloc, la seconde etant clairement facultative. */
.lg__modal__consent + .lg__modal__consent { margin-top: -4px; }

/* ---- Page newsletter partageable (#/newsletter) --------------------------
   Deux colonnes au desktop : la promesse à gauche, le formulaire à droite.
   Une colonne au mobile. Pas de bandeau : c'est une page d'action, on va
   droit au formulaire. */
.lg__nlpage {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 24px 90px;
  min-height: calc(100vh - 320px);
  display: flex;
  align-items: center;
}
.lg__nlpage__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.lg__nlpage__logo {
  display: block;
  width: 190px;
  margin: 0 0 26px;
  line-height: 0;
  color: var(--ink);
}
.lg__nlpage__logo .lg__hero__griot__wrap {
  position: static;
  width: 100%;
  height: auto;
  display: block;
}
.lg__nlpage__logo .lg__wordmark-svg { width: 100%; height: auto; display: block; }
.lg__nlpage__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--ink);
}
.lg__nlpage__lede {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
  max-width: 46ch;
}
/* Le formulaire est posé sur un cadre, pour qu'il se lise comme la carte de
   réservation des fiches plutôt que comme des champs flottants. */
.lg__nlpage__form {
  border: 1px solid var(--ink);
  padding: 30px 30px 28px;
  background: var(--paper);
}
.lg__nlpage__done .lg__nl__btn {
  display: inline-block;
  text-decoration: none;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .lg__nlpage { padding: 0 24px 70px; min-height: 0; display: block; }
  .lg__nlpage__inner { grid-template-columns: 1fr; gap: 32px; }
  /* Le mot-marque est deja dans le menu juste au-dessus : inutile de le
     repeter a dix pixels d'ecart. */
  .lg__nlpage__logo { display: none; }
  .lg__nlpage__form { padding: 24px 20px 22px; }
}