/* ============================================================
   VARIABLES
   ============================================================ */

:root {
  --blanc: #F7F5F0;
  --blanc-pur: #FFFFFF;
  --anthracite: #1D1D1B;
  --bleu-nuit: #104862;
  --teal: #196A7E;
  --gris: #5A5A56;
  --gris-clair: #D8D5CE;
  --gris-tres-clair: #EDEAE4;
  --vert-vif: #94C11F;
  --jaune: #DEDC00;
  --vert-foret: #2F7D5D;
  --orange: #ED902B;
  --terre: #C95959;

  /* ─── DA V2 — Palette enrichie "Le vivant dans les interstices" ─── */
  --sable: #EDE8DC;          /* Beige chaud — fond alternatif, plus doux que gris-tres-clair */
  --ocre: #C8906A;           /* Ocre terreux — capitalisation, ressources, carnets */
  --ocre-pale: #F2E3D5;      /* Ocre très pâle — fond teinté sections ressources */
  /* ─── Accent éditorial V2 ─── */
  /* Terracotta chaud — pour les italiques d'accent, les labels CONTENU PILIER,
     les numéros de section. Signal : institution apprenante, pas ONG écologique. */
  --accent: #A05C38;         /* Terracotta/sienna — accent éditorial principal V2 */
  --accent-pale: #F0E2D6;    /* Fond très pâle terracotta */
  --aqua: #5EA8BC;           /* Aqua clair — Academia, continuité */
  --aqua-pale: #C5DEE8;      /* Aqua très pâle — fond teinté Academia */
  --vert-pale: #D1E8BE;      /* Vert très pâle — fond piliers, Comprendre */
  --bleu-pale: #C4D8E6;      /* Bleu très pâle — fond nuancé */
  --argile: #8E7A6A;         /* Argile — ton neutre de profondeur */
  --encre: #0D3345;          /* Encre — variante bleu-nuit plus profond */

  --font-serif: "congenial", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;

  --container: 1400px;
  --transition: 200ms ease;
  --transition-lente: 360ms ease;
  --rayon: 3px;              /* Border-radius systémique, très subtil */
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--blanc);
  color: var(--anthracite);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Micro-texture documentaire — papier légèrement grain */
  background-image: radial-gradient(circle, rgba(16,72,98,0.028) 1px, transparent 1px);
  background-size: 28px 28px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   UTILITAIRES
   ============================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
}

.section {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.section-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  color: var(--anthracite);
  max-width: 700px;
}

.eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 1.5rem;
}

.corps {
  font-size: 1rem;
  color: var(--gris);
  line-height: 1.8;
  max-width: 520px;
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}

.btn-noir {
  background-color: var(--anthracite);
  color: var(--blanc);
  border: 1.5px solid var(--anthracite);
}
.btn-noir:hover { background-color: var(--vert-foret); border-color: var(--vert-foret); }

.btn-contour {
  background-color: transparent;
  color: var(--anthracite);
  border: 1.5px solid var(--anthracite);
}
.btn-contour:hover { background-color: var(--anthracite); color: var(--blanc); }

.btn-blanc {
  background-color: var(--blanc);
  color: var(--vert-foret);
  border: 1.5px solid var(--blanc);
}
.btn-blanc:hover { background-color: transparent; color: var(--blanc); border-color: rgba(255,255,255,0.6); }

.lien-fleche {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gris);
  transition: color var(--transition);
  padding: 0.8rem 0;
}
.lien-fleche:hover { color: var(--anthracite); }

.lien-discret {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.lien-discret:hover { color: var(--blanc-pur); border-color: rgba(255,255,255,0.6); }

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nav-logo-iec {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  letter-spacing: -0.01em;
}

.nav-logo-sep {
  color: var(--gris-clair);
  font-size: 0.72rem;
  font-weight: 300;
}

.nav-logo-full {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gris);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* ─── Nav item avec dropdown ─── */
.nav-item {
  position: relative;
}

.nav-links a {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gris);
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--anthracite); }

/* ─── État actif navigation — section courante ─── */
.nav-links a.nav-active {
  color: var(--bleu-nuit);
  font-weight: 500;
  position: relative;
}

.nav-links a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--vert-vif);
  border-radius: 1px;
}

/* Surcharger le chevron sur les nav-items actifs */
.nav-item > a.nav-active::after {
  content: " ›";
  position: static;
  height: auto;
  background: none;
  font-size: 0.6rem;
  opacity: 0.45;
  vertical-align: middle;
}

/* ─── Dropdown panel ─── */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background-color: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  min-width: 200px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 200;
  list-style: none;
}

/* Petite flèche en haut */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
  background-color: var(--blanc);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-top: 1px solid var(--gris-clair);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown li a {
  display: block;
  padding: 0.45rem 1.25rem;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--gris) !important;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.nav-dropdown li a:hover {
  background-color: var(--gris-tres-clair);
  color: var(--bleu-nuit) !important;
}

.nav-dropdown li + li {
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Indicateur "a un dropdown" — petit chevron */
.nav-item > a::after {
  content: " ›";
  font-size: 0.6rem;
  opacity: 0.45;
  vertical-align: middle;
}

.nav-cta {
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition) !important;
}
/* Pas de chevron sur les CTA */
.nav-cta::after { display: none !important; }

/* Événements — pilule verte pleine */
.nav-cta--evenements {
  background-color: var(--vert-foret);
  color: var(--blanc) !important;
  border: 1.5px solid var(--vert-foret);
}
.nav-cta--evenements:hover {
  background-color: var(--bleu-nuit) !important;
  border-color: var(--bleu-nuit) !important;
}

/* Contact — pilule contour sombre */
.nav-cta--contact {
  background-color: transparent;
  color: var(--anthracite) !important;
  border: 1.5px solid var(--anthracite);
}
.nav-cta--contact:hover {
  background-color: var(--anthracite) !important;
  color: var(--blanc) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--anthracite);
}

/* ============================================================
   HERO — DEUX COLONNES
   ============================================================ */

.hero {
  display: grid;
  /* Texte ~48%, image ~52% — image légèrement plus large */
  grid-template-columns: 1fr 1.15fr;
  min-height: calc(100vh - 60px);  /* pleine hauteur viewport - nav */
  overflow: hidden;
  border-bottom: none;
}

/* Colonne texte — alignée avec le container */
.hero-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Padding gauche = centre du container sur la moitié gauche */
  padding: clamp(3rem, 6vw, 6rem)
           clamp(2rem, 3vw, 3rem)
           clamp(3rem, 6vw, 6rem)
           max(2rem, calc((100vw / 2 - 700px) + 2rem));
}

/* Colonne image — pleine hauteur, bord droit de l'écran */
.hero-image-col {
  position: relative;
  overflow: hidden;
  /* Coins arrondis SEULEMENT côté gauche — côté droit flush avec le bord */
  border-radius: 20px 0 0 20px;
  /* Aucune marge — l'image colle au bord droit */
  margin: 1rem 0 1rem 0;
}

.hero-image-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* V2 : image très sombre — présente mais pas dominante.
     Signal : réalité en arrière-plan, texte au premier plan. */
  filter: brightness(0.38) saturate(0.25);
}

/* Overlay gradient gauche — fondu doux côté texte */
.hero-image-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(247,245,240,0.15), transparent 18%);
  z-index: 1;
  pointer-events: none;
}

/* Stat overlay en bas à droite */
.hero-stat-overlay {
  position: absolute;
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--blanc);
  padding: 1rem 1.5rem;
  border-radius: var(--rayon);
  z-index: 2;
  box-shadow: 0 4px 20px rgba(16,72,98,0.15);
  min-width: 140px;
}

.hero-stat-val {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.hero-stat-lab {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Accent typographique sur "complexe" */
.hero-accent {
  /* V2 : italic + couleur terracotta — pas de soulignement vert (signal ONG) */
  font-style: italic;
  color: var(--accent);
  text-decoration: none;
}

/* Mobile — colonne unique */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-texte {
    padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
    order: 1;
  }
  .hero-image-col {
    order: 2;
    height: clamp(300px, 60vw, 480px);
    border-radius: 16px;  /* tous les coins sur mobile */
    margin: 0 1rem 1rem 1rem;
  }
  .hero-image-col img {
    position: static;
    width: 100%;
    height: 100%;
  }
}

/* Ancienne classe — conservée pour compatibilité */
.hero .container {
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

.hero-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--anthracite);
  max-width: 840px;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* Tensions courtes dans le hero */
.hero-tensions {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.25vw, 1rem);
  font-weight: 300;
  color: var(--gris);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hero-bas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  max-width: 880px;
}

.hero-sous-texte {
  font-size: 0.95rem;
  color: var(--gris);
  line-height: 1.8;
  font-weight: 300;
  max-width: 680px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hero-ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.hero-cta-lien {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--anthracite);
  border-bottom: 1px solid var(--gris-clair);
  padding-bottom: 1px;
  display: inline-block;
  transition: border-color var(--transition), color var(--transition);
}
.hero-cta-lien:hover { border-color: var(--anthracite); }

.hero-cta-lien--sec {
  font-size: 0.82rem;
  color: var(--gris);
  border-color: transparent;
  margin-top: 0.2rem;
}
.hero-cta-lien--sec:hover { color: var(--anthracite); border-color: var(--gris-clair); }

/* Phrase de reconnaissance — vécu du visiteur */
.hero-reconnaissance {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  /* V2 : terracotta — signal éditorial/documentaire, pas écologique */
  color: var(--accent);
  max-width: 560px;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}

.hero-image-bande {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  height: clamp(220px, 34vw, 460px);
  background-color: var(--gris-tres-clair);
  overflow: hidden;
  position: relative;
}

.hero-image-bande img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  /* Légère désaturation pour rester dans la tonalité du site */
  filter: saturate(0.88) brightness(0.97);
  transition: transform 4s ease, filter 4s ease;
}

/* Léger effet ken burns au chargement */
@media (prefers-reduced-motion: no-preference) {
  .hero-image-bande img {
    animation: hero-kenburns 12s ease-out both;
  }
  @keyframes hero-kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
  }
}

/* Dégradé subtil en bas — transition vers le fond blanc */
.hero-image-bande::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(247,245,240,0.35), transparent);
  pointer-events: none;
}

.placeholder-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-clair);
}

/* ============================================================
   MANIFESTE
   ============================================================ */

.manifeste {
  background-color: var(--bleu-nuit);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.manifeste-citation {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.25;
  color: var(--blanc-pur);
  max-width: 820px;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.manifeste-suite {
  font-size: 0.95rem;
  color: rgba(247, 245, 240, 0.78);
  line-height: 1.85;
  max-width: 600px;
  margin-bottom: 2rem;
  font-weight: 300;
}

/* ============================================================
   TENSIONS — IDENTIFICATION HOMEPAGE
   ============================================================ */

.tensions {
  background-color: var(--bleu-nuit);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.tensions-eyebrow {
  color: var(--vert-vif);
  margin-bottom: 2.5rem;
}

.tensions-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tensions-item {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.82);
  padding: 1.5rem 0 1.5rem 2rem;
  border-left: 2px solid rgba(148, 193, 31, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tensions-item:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .tensions-item {
    padding: 1.25rem 0 1.25rem 1.25rem;
  }
}

/* ============================================================
   LE MONDE CHANGE — liste éditoriale
   ============================================================ */

.monde-change .section-titre {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--gris-clair);
  padding-bottom: 2rem;
}

.liste-editoriale {
  display: flex;
  flex-direction: column;
}

.liste-item {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--gris-clair);
  align-items: start;
}

.liste-item-gauche {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.liste-numero {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--vert-vif);
  flex-shrink: 0;
  opacity: 0.7;
}

.liste-titre {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--anthracite);
}

.liste-texte {
  font-size: 0.95rem;
  color: var(--gris);
  line-height: 1.8;
  font-weight: 300;
}

/* ============================================================
   CE QUE FAIT L'IEC
   ============================================================ */

.ce-que-fait {
  background-color: var(--anthracite);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.ce-que-fait-titre {
  color: var(--blanc);
  max-width: 720px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.piliers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.pilier {
  padding: 2.5rem 2.5rem 0 0;
}
.pilier:not(:first-child) { padding-left: 2.5rem; }

.pilier-mot {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.25rem);
  color: var(--blanc);
  margin-bottom: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pilier-texte {
  font-size: 0.85rem;
  color: rgba(247, 245, 240, 0.7);
  line-height: 1.75;
  font-weight: 300;
}

/* ============================================================
   LES TERRITOIRES
   ============================================================ */

.territoires {
  background-color: var(--vert-foret);
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.territoire-chapeau {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.6);
  margin-bottom: 1.5rem;
}

.territoire-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1.1;
  color: var(--blanc);
  max-width: 820px;
  margin-bottom: 2rem;
}

.territoire-texte {
  font-size: 1rem;
  color: rgba(247, 245, 240, 0.85);
  line-height: 1.85;
  max-width: 580px;
  font-weight: 300;
  margin-bottom: 2.5rem;
}

/* ============================================================
   SE FORMER
   ============================================================ */

.se-former {
  background-color: var(--blanc);
  border-top: 1px solid var(--gris-clair);
}

.se-former-entete {
  max-width: 700px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.se-former-entete .section-titre {
  margin-bottom: 1.25rem;
}

.se-former-accroche {
  font-size: 0.92rem;
  color: var(--gris);
  line-height: 1.85;
  font-weight: 300;
}

.offres-liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gris-clair);
  margin-bottom: 2.5rem;
}

.offre-ligne {
  display: grid;
  grid-template-columns: 3.5rem 9rem 1fr 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gris-clair);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition);
}
.offre-ligne:hover {
  background-color: var(--gris-tres-clair);
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0 -1rem;
}

.offre-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--vert-vif);
  opacity: 0.6;
  line-height: 1;
}

.offre-type {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
  font-weight: 600;
}

.offre-nom {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--anthracite);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.offre-detail {
  font-size: 0.82rem;
  color: var(--gris);
  font-weight: 300;
  line-height: 1.5;
}

.offre-fleche {
  font-size: 1rem;
  color: var(--gris-clair);
  transition: color var(--transition), transform var(--transition);
}
.offre-ligne:hover .offre-fleche { color: var(--anthracite); transform: translateX(4px); }

.lien-explorer {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--gris);
  border-bottom: 1px solid var(--gris-clair);
  padding-bottom: 1px;
  display: inline-block;
  transition: color var(--transition), border-color var(--transition);
}
.lien-explorer:hover { color: var(--anthracite); border-color: var(--anthracite); }

/* ============================================================
   PROJETS
   ============================================================ */

.projets-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--gris-clair);
  padding-bottom: 1.5rem;
}

.projets-image-bande {
  height: clamp(200px, 30vw, 380px);
  background-color: var(--gris-tres-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border-top: 1px solid var(--gris-clair);
}

.liste-item--lien {
  display: grid;
  grid-template-columns: 1fr auto;
  text-decoration: none;
  transition: background-color var(--transition);
}

.liste-item--lien:hover {
  background-color: var(--gris-tres-clair);
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
}

.projet-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--gris);
  font-weight: 300;
  padding: 2rem 0;
  padding-left: 2rem;
}

.projet-statut {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

/* ============================================================
   CHIFFRES & TÉMOIGNAGE
   ============================================================ */

.chiffres-section {
  background-color: var(--gris-tres-clair);
  border-top: 1px solid var(--gris-clair);
}

.chiffres-bande {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--gris-clair);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.chiffre-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(2rem, 4vw, 3rem) 0;
  padding-right: 2rem;
  border-right: 1px solid var(--gris-clair);
}
.chiffre-item:first-child { padding-left: 0; }
.chiffre-item:last-child { border-right: none; }
.chiffre-item:not(:first-child) { padding-left: 2rem; }

.chiffre-valeur {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.5vw, 5rem);
  color: var(--anthracite);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.chiffre-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 500;
}

.temoignage {
  max-width: 680px;
}

.temoignage-texte {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--anthracite);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.temoignage-auteur {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.temoignage-nom {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--anthracite);
}

.temoignage-fonction {
  font-size: 0.8rem;
  color: var(--gris);
  font-weight: 300;
}

/* Réseau — porte vers la continuité (Academia) */
.reseau-continuite {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--gris-clair);
  max-width: 580px;
}

.reseau-continuite-texte {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--gris);
  font-weight: 300;
  margin: 0.75rem 0 1.25rem;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */

.newsletter {
  background-color: var(--bleu-nuit);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.newsletter-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--blanc);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.newsletter-sous {
  font-size: 0.9rem;
  color: rgba(247, 245, 240, 0.75);
  font-weight: 300;
  line-height: 1.7;
}

.newsletter .eyebrow {
  color: var(--vert-vif);
  opacity: 0.85;
}

.newsletter-form {
  display: flex;
  gap: 0.5rem;
}

.newsletter-input {
  flex: 1;
  padding: 0.8rem 1rem;
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--blanc);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 300;
  border-radius: 2px;
  outline: none;
  transition: border-color var(--transition);
}

.newsletter-input::placeholder {
  color: rgba(247, 245, 240, 0.4);
}

.newsletter-input:focus {
  border-color: var(--vert-vif);
  background-color: rgba(255,255,255,0.12);
}

.newsletter .btn-noir {
  background-color: var(--vert-vif);
  color: var(--anthracite);
  border-color: var(--vert-vif);
  white-space: nowrap;
  font-weight: 600;
}
.newsletter .btn-noir:hover {
  background-color: var(--jaune);
  border-color: var(--jaune);
  color: var(--anthracite);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--anthracite);
  color: var(--blanc);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.footer-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--blanc);
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.footer-tagline {
  font-size: 0.85rem;
  color: rgba(247,245,240,0.7);
  line-height: 1.6;
  font-weight: 300;
}

.footer-since {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,245,240,0.4);
  margin-top: 0.75rem;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.footer-col h4 {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 1rem;
  font-weight: 600;
  opacity: 0.8;
}

.footer-col h4 a {
  color: var(--vert-vif) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  opacity: 1;
  transition: opacity var(--transition);
}

.footer-col h4 a:hover {
  opacity: 0.6;
  color: var(--vert-vif) !important;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  font-size: 0.72rem;
  color: rgba(247,245,240,0.7);
  font-weight: 400;
  line-height: 1.4;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--blanc); }

.footer-bottom {
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-gauche {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-bottom p,
.footer-bottom a {
  font-size: 0.68rem;
  color: rgba(247,245,240,0.4);
  font-weight: 300;
  transition: color var(--transition);
}
.footer-bottom a:hover { color: rgba(247,245,240,0.7); }

.footer-socials {
  display: flex;
  gap: 1.25rem;
}

.footer-socials a {
  font-size: 0.75rem;
  color: rgba(247,245,240,0.55);
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.footer-socials a:hover { color: var(--blanc); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .hero-bas { grid-template-columns: 1fr; gap: 2rem; max-width: 100%; }
  .liste-item { grid-template-columns: 1fr; gap: 0.75rem; }
  .liste-item--lien { grid-template-columns: 1fr; }
  .projet-meta { align-items: flex-start; padding-top: 0; padding-left: 0; }
  .piliers { grid-template-columns: repeat(2, 1fr); }
  .pilier { padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .pilier:nth-child(4), .pilier:nth-child(5) { border-bottom: none; }
  .pilier:not(:first-child) { padding-left: 0; }
  .pilier:nth-child(even) { padding-left: 2rem; }
  .pilier:last-child { grid-column: span 2; border-bottom: none; }
  .offre-ligne { grid-template-columns: 2.5rem 7rem 1fr auto; gap: 1.25rem; }
  .offre-detail { display: none; }
  .chiffres-bande { grid-template-columns: repeat(2, 1fr); }
  .chiffre-item:nth-child(2) { border-right: none; }
  .chiffre-item:nth-child(3) { border-top: 1px solid var(--gris-clair); }
  .newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }
  .newsletter-form { flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (max-width: 640px) {
  .nav-logo-full, .nav-logo-sep { display: none; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background-color: var(--blanc);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    gap: 1.25rem;
    border-top: 1px solid var(--gris-clair);
    z-index: 99;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 1rem; color: var(--anthracite); }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .piliers { grid-template-columns: 1fr; }
  .pilier { padding-left: 0 !important; padding-right: 0; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .pilier:last-child { border-bottom: none; grid-column: span 1; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .projets-header { flex-direction: column; gap: 0.5rem; }
  .offre-ligne { grid-template-columns: 2.5rem 1fr auto; gap: 1rem; }
  .offre-type { display: none; }
  .academia-bloc { margin-top: 4rem; padding: 2rem; }
  .academia-bloc { flex-direction: column; }
  .entrer-ctas { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .recits-header { flex-direction: column; gap: 0.5rem; }
  .reseau-intro { margin-bottom: 3rem; }
}

/* ============================================================
   NOUVELLES CAPACITÉS (ex-Territoires)
   ============================================================ */

.nouvelles-capacites {
  background-color: var(--vert-foret);
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.capacites-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.capacite-tag {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(247,245,240,0.35);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(247,245,240,0.9);
  transition: background-color var(--transition), border-color var(--transition);
}

/* ============================================================
   ACADEMIA BLOC
   ============================================================ */

.academia-bloc {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding: clamp(2.5rem, 5vw, 4rem);
  background-color: var(--bleu-nuit);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.academia-bloc .eyebrow {
  color: var(--vert-vif);
  margin-bottom: 1rem;
}

.academia-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--blanc);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.academia-texte {
  font-size: 0.92rem;
  color: rgba(247,245,240,0.78);
  line-height: 1.85;
  font-weight: 300;
  max-width: 620px;
  margin-bottom: 2rem;
}

.academia-bloc .btn-contour {
  color: var(--blanc);
  border-color: rgba(247,245,240,0.45);
  align-self: flex-start;
}
.academia-bloc .btn-contour:hover {
  background-color: rgba(247,245,240,0.1);
  color: var(--blanc);
}

/* ============================================================
   RÉCITS DE TERRAIN
   ============================================================ */

.recits-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--gris-clair);
  padding-bottom: 1.5rem;
}

.recits-image-bande {
  height: clamp(200px, 30vw, 380px);
  background-color: var(--gris-tres-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border-top: 1px solid var(--gris-clair);
}

/* Projets démonstratifs */
.recits-intro {
  font-size: 0.9rem;
  color: var(--gris);
  font-weight: 300;
  margin-bottom: 0;
}

.recits-demos {
  border-top: 1px solid var(--gris-clair);
  margin-top: 2rem;
}

.recit-demo {
  display: block;
  text-decoration: none;
  padding: 2rem 0;
  border-bottom: 1px solid var(--gris-clair);
  transition: padding-left var(--transition);
}

.recit-demo:hover {
  padding-left: 0.75rem;
}

.recit-demo-question {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--bleu-nuit);
  margin-bottom: 1.25rem;
  transition: color var(--transition);
}

.recit-demo:hover .recit-demo-question {
  color: var(--vert-foret);
}

.recit-demo-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.recit-demo-nom {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--anthracite);
}

.recit-demo-contexte {
  font-size: 0.82rem;
  color: var(--gris);
  font-weight: 300;
}

.recit-demo-statut {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert-foret);
  margin-left: auto;
}

@media (max-width: 640px) {
  .recit-demo {
    padding: 1.5rem 0;
  }

  .recit-demo-statut {
    margin-left: 0;
  }
}

/* ============================================================
   RÉSEAU VIVANT
   ============================================================ */

.reseau-vivant {
  background-color: var(--gris-tres-clair);
  border-top: 1px solid var(--gris-clair);
}

.reseau-intro {
  max-width: 680px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.reseau-texte {
  font-size: 0.95rem;
  color: var(--gris);
  line-height: 1.8;
  font-weight: 300;
  margin-top: 1rem;
}

/* ============================================================
   ENTRER EN MOUVEMENT
   ============================================================ */

.entrer {
  background-color: var(--bleu-nuit);
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.entrer-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1.1;
  color: var(--blanc);
  max-width: 760px;
  margin-bottom: 1.75rem;
}

.entrer-texte {
  font-size: 1rem;
  font-style: italic;
  color: rgba(247,245,240,0.75);
  line-height: 1.85;
  max-width: 560px;
  font-weight: 300;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.entrer-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.btn-lime {
  display: inline-block;
  padding: 0.85rem 2rem;
  background-color: var(--vert-vif);
  color: var(--anthracite);
  border: 1.5px solid var(--vert-vif);
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.btn-lime:hover {
  background-color: var(--jaune);
  border-color: var(--jaune);
}

.entrer-lien {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(247,245,240,0.65);
  border-bottom: 1px solid rgba(247,245,240,0.25);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.entrer-lien:hover {
  color: var(--blanc);
  border-color: rgba(247,245,240,0.6);
}

/* ============================================================
   DIAGNOSTIC — HOMEPAGE
   ============================================================ */

.diagnostic {
  background-color: var(--blanc);
}

.diagnostic-corps {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.diagnostic-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.2;
  color: var(--bleu-nuit);
  margin-bottom: 1.5rem;
}

.diagnostic-texte {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--gris);
  font-weight: 300;
}

.diagnostic-pivot {
  border-left: 3px solid var(--vert-vif);
  padding: 1.5rem 0 1.5rem 2rem;
  max-width: 680px;
}

.diagnostic-pivot-texte {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--bleu-nuit);
}

/* ============================================================
   IEC AGIT — 3 AXES (Former / Accompagner / Relier)
   ============================================================ */

.iec-agit {
  background-color: var(--gris-tres-clair);
  border-top: 1px solid var(--gris-clair);
}

.iec-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gris);
  font-weight: 300;
  max-width: 680px;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.iec-axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.iec-axe {
  border-top: 2px solid var(--bleu-nuit);
  padding-top: 1.75rem;
}

.iec-axe-verbe {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--bleu-nuit);
  margin-bottom: 1.25rem;
}

.iec-axe-texte {
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--gris);
  font-weight: 300;
  margin-bottom: 1.25rem;
}

.iec-axe-lien {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bleu-nuit);
  border-bottom: 1.5px solid var(--bleu-nuit);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.iec-axe-lien:hover {
  color: var(--vert-vif);
  border-color: var(--vert-vif);
}

@media (max-width: 768px) {
  .iec-axes {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ============================================================
   QUESTIONS PILIERS — HOMEPAGE
   ============================================================ */

/* ─────────────────────────────────────────────────────
   QUESTIONS PILIERS — LAYOUT DEUX COLONNES
   ───────────────────────────────────────────────────── */

.questions-piliers {
  background-color: var(--blanc);
  padding: clamp(5rem, 9vw, 8rem) 0;
}

/* Grille principale : gauche titre + droite liste */
.questions-piliers-inner {
  display: grid;
  grid-template-columns: 1fr 1.75fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

/* ── Colonne gauche ── */
.questions-col-gauche {
  position: sticky;
  top: 80px;  /* sous la nav sticky */
}

.questions-eyebrow {
  margin-bottom: 1.25rem;
}

.questions-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--anthracite);
  margin-bottom: 2rem;
}

.questions-lien-tout {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--vert-foret);
  border-bottom: 1px solid var(--vert-foret);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.questions-lien-tout:hover {
  color: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
}

/* ── Colonne droite — liste numérotée ── */
.questions-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--gris-clair);
}

.question-item {
  border-bottom: 1px solid var(--gris-clair);
  transition: background-color var(--transition);
}

.question-lien {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2rem;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  text-decoration: none;
}

/* Numéro — 01, 02... */
.question-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--vert-foret);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Texte question — gros, Congenial */
.question-texte {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--anthracite);
  transition: color var(--transition);
}
.question-lien:hover .question-texte {
  color: var(--vert-foret);
}

/* Flèche */
.question-fleche {
  font-size: 1rem;
  color: var(--gris-clair);
  transition: color var(--transition), transform var(--transition);
  text-align: right;
}
.question-lien:hover .question-fleche {
  color: var(--vert-foret);
  transform: translateX(4px);
}

/* Lien mobile — caché sur desktop */
.questions-pied-mobile {
  display: none;
  margin-top: 2rem;
}
.questions-pied {
  margin-top: 2.5rem;
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .questions-piliers-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .questions-col-gauche {
    position: static;
  }
  .questions-lien-tout { display: none; }
  .questions-pied-mobile { display: block; }
}

@media (max-width: 480px) {
  .question-lien {
    grid-template-columns: 2rem 1fr 1.5rem;
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .question-texte { font-size: 1rem; }
}

/* ============================================================
   CE QUE CELA PRODUIT — 3 GROUPES × 3 DÉMONSTRATIONS
   ============================================================ */

.produit {
  background-color: var(--blanc);
  border-top: 1px solid var(--gris-clair);
}

.produit-groupe {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid var(--bleu-nuit);
}

/* Eyebrow couleur par bloc */
.produit-groupe-eyebrow {
  margin-bottom: 0.5rem;
}

.produit-groupe-verbe {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1;
  color: var(--bleu-nuit);
  margin-bottom: 0.4rem;
}

/* Nature de la transformation */
.produit-groupe-nature {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gris);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ─── FORMER : apprendre — accent vert-vif ─── */
.produit-groupe--former {
  border-top-color: var(--vert-vif);
}

.produit-groupe--former .produit-groupe-eyebrow {
  color: var(--vert-vif);
}

.produit-groupe--former .produit-demo-question {
  color: var(--bleu-nuit);
}

/* ─── ACCOMPAGNER : agir — accent bleu-nuit, projet en titre ─── */
.produit-groupe--accompagner {
  border-top-color: var(--bleu-nuit);
}

.produit-groupe--accompagner .produit-groupe-eyebrow {
  color: var(--bleu-nuit);
}

/* Projet (nom) remonte visuellement — méta avant question */
.produit-groupe--accompagner .produit-demo {
  display: flex;
  flex-direction: column-reverse;
}

.produit-groupe--accompagner .produit-demo-question {
  font-size: clamp(0.92rem, 1.4vw, 1.1rem);
  color: var(--gris);
  margin-bottom: 0;
  margin-top: 0.6rem;
}

.produit-groupe--accompagner .produit-demo-meta {
  margin-bottom: 0;
}

.produit-groupe--accompagner .produit-demo-nom {
  font-size: 0.88rem;
  color: var(--bleu-nuit);
}

/* ─── RELIER : continuer — accent vert-forêt, fil de continuité ─── */
.produit-groupe--relier {
  border-top-color: var(--vert-foret);
}

.produit-groupe--relier .produit-groupe-eyebrow {
  color: var(--vert-foret);
}

/* Fil de continuité : bordure gauche reliant les trois démos */
.produit-groupe--relier .produit-demo {
  border-left: 2px solid rgba(47, 125, 93, 0.3);
  border-bottom: 1px solid rgba(47, 125, 93, 0.15);
  padding-left: 1.25rem;
  padding-right: 0.5rem;
  margin-bottom: 2px;
}

.produit-groupe--relier .produit-demo:first-child {
  border-top: 1px solid rgba(47, 125, 93, 0.15);
}

.produit-groupe--relier .produit-demo:hover {
  padding-left: 1.75rem;
  border-left-color: var(--vert-foret);
}

.produit-groupe--relier .produit-demo-question {
  color: var(--vert-foret);
}

.produit-groupe--relier .produit-demo:hover .produit-demo-question {
  color: var(--bleu-nuit);
}

.produit-groupe--relier .produit-demo-nom {
  color: var(--vert-foret);
}

.produit-groupe--relier .produit-demo:hover .produit-demo-nom {
  color: var(--bleu-nuit);
}

.produit-demo {
  display: block;
  text-decoration: none;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gris-clair);
  transition: padding-left var(--transition);
}

.produit-demo:first-child {
  border-top: 1px solid var(--gris-clair);
}

.produit-demo:hover {
  padding-left: 0.75rem;
}

.produit-demo-question {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--bleu-nuit);
  margin-bottom: 1rem;
  max-width: 780px;
  transition: color var(--transition);
}

.produit-demo:hover .produit-demo-question {
  color: var(--vert-foret);
}

.produit-demo-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.produit-demo-type {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--gris);
}

.produit-demo-nom {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--anthracite);
  margin-left: auto;
  transition: color var(--transition);
}

.produit-demo:hover .produit-demo-nom {
  color: var(--bleu-nuit);
}

@media (max-width: 640px) {
  .produit-demo {
    padding: 1.4rem 0;
  }

  .produit-demo-nom {
    margin-left: 0;
  }
}

/* ============================================================
   CE QUE CELA PRODUIT — 3 EXPÉRIENCES DISTINCTES (V2)
   ============================================================ */

/* ─── Typographie commune ─── */
.produit-section-eyebrow {
  margin-bottom: 0.75rem;
}

.produit-section-verbe {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.produit-section-nature {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--gris);
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
  padding-left: 1rem;
  border-left: 2px solid var(--vert-vif);
  max-width: 520px;
  line-height: 1.6;
}
/* Sur fond bleu-nuit (accompagner) */
.produit-section--accompagner .produit-section-nature {
  border-left-color: rgba(148,193,31,0.4);
  padding-left: 1rem;
}

.produit-section-intro {
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.85;
  font-weight: 300;
  max-width: 680px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.produit-section-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── APPRENDRE (Former) : blanc, photo dans container (entre intro et démos) ─── */
.produit-section--former {
  background-color: var(--blanc);
  border-top: 3px solid var(--vert-vif);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.produit-section--former .produit-section-photo {
  width: 100%;
  height: clamp(260px, 38vw, 480px);
  background-color: #E8E4DC;
  margin: clamp(2rem, 3.5vw, 3rem) 0;
  overflow: hidden;
}

.produit-section--former .produit-section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.produit-section--former .produit-section-eyebrow {
  color: var(--vert-vif);
}

.produit-section--former .produit-section-verbe {
  color: var(--bleu-nuit);
}

.produit-section--former .produit-section-intro {
  color: var(--gris);
}

/* ─── AGIR (Accompagner) : bleu-nuit, 2 colonnes pleine largeur ─── */
.produit-section--accompagner {
  background-color: var(--bleu-nuit);
  display: grid;
  grid-template-columns: 38% 1fr;
  min-height: clamp(420px, 62vw, 700px);
}

.produit-section--accompagner > .produit-section-photo {
  background-color: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.produit-section--accompagner > .produit-section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.65;
  mix-blend-mode: luminosity;
}

.produit-section--accompagner > .produit-section-contenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 5vw, 5rem);
}

.produit-section--accompagner .produit-section-eyebrow {
  color: var(--vert-vif);
}

.produit-section--accompagner .produit-section-verbe {
  color: var(--blanc);
}

.produit-section--accompagner .produit-section-nature {
  color: rgba(247, 245, 240, 0.55);
}

.produit-section--accompagner .produit-section-intro {
  color: rgba(247, 245, 240, 0.8);
}

/* Démonstrations sur fond sombre — nom du projet en avant */
.produit-section--accompagner .produit-demo {
  display: flex;
  flex-direction: column-reverse;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.produit-section--accompagner .produit-demo:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.produit-section--accompagner .produit-demo-type {
  color: rgba(247, 245, 240, 0.42);
}

.produit-section--accompagner .produit-demo-nom {
  color: var(--blanc);
  font-size: 0.88rem;
}

.produit-section--accompagner .produit-demo-question {
  font-size: clamp(0.88rem, 1.25vw, 1rem);
  color: rgba(247, 245, 240, 0.62);
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.produit-section--accompagner .produit-demo:hover .produit-demo-nom {
  color: var(--vert-vif);
}

.produit-section--accompagner .produit-demo:hover .produit-demo-question {
  color: rgba(247, 245, 240, 0.9);
}

.produit-section--accompagner .placeholder-label {
  color: rgba(255, 255, 255, 0.2);
}

/* ─── CONTINUER (Relier) : gris clair, photo intime, fil de réseau ─── */
.produit-section--relier {
  background-color: var(--gris-tres-clair);
  border-top: 3px solid var(--vert-foret);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.produit-section--relier .produit-section-eyebrow {
  color: var(--vert-foret);
}

.produit-section--relier .produit-section-verbe {
  color: var(--bleu-nuit);
}

.produit-section--relier .produit-section-intro {
  color: var(--gris);
}

/* En-tête du bloc CONTINUER */
.produit-section-entete {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* 2 colonnes : photo gauche / texte droite */
.produit-section-relier-corps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.produit-section--relier .produit-section-relier-corps .produit-section-photo {
  height: clamp(300px, 44vw, 540px);
  background-color: #C8C3BA;
  max-width: none;
  margin: 0;
  border: none;
  overflow: hidden;
}

.produit-section--relier .produit-section-relier-corps .produit-section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.produit-section-relier-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.produit-section-relier-texte .produit-section-intro {
  font-size: clamp(1rem, 1.55vw, 1.15rem);
  color: var(--anthracite);
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 0;
}

/* Fil de continuité */
.produit-section--relier .produit-demo {
  border-left: 2px solid rgba(47, 125, 93, 0.3);
  border-bottom: 1px solid rgba(47, 125, 93, 0.15);
  border-top: none;
  padding-left: 1.25rem;
  padding-right: 0.5rem;
  margin-bottom: 2px;
}

.produit-section--relier .produit-demo:first-child {
  border-top: 1px solid rgba(47, 125, 93, 0.15);
}

.produit-section--relier .produit-demo:hover {
  padding-left: 1.75rem;
  border-left-color: var(--vert-foret);
}

.produit-section--relier .produit-demo-question {
  color: var(--vert-foret);
}

.produit-section--relier .produit-demo:hover .produit-demo-question {
  color: var(--bleu-nuit);
}

.produit-section--relier .produit-demo-nom {
  color: var(--vert-foret);
}

.produit-section--relier .produit-demo:hover .produit-demo-nom {
  color: var(--bleu-nuit);
}

/* ─── Liens de sortie (tous blocs) ─── */
.produit-section-sortie {
  display: inline-block;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bleu-nuit);
  border-bottom: 1.5px solid rgba(16, 72, 98, 0.35);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}

.produit-section-sortie:hover {
  color: var(--vert-foret);
  border-color: var(--vert-foret);
}

/* AGIR — fond sombre */
.produit-section--accompagner .produit-section-sortie {
  color: var(--vert-vif);
  border-color: rgba(148, 193, 31, 0.4);
}

.produit-section--accompagner .produit-section-sortie:hover {
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.6);
}

/* RELIER */
.produit-section--relier .produit-section-sortie {
  color: var(--vert-foret);
  border-color: rgba(47, 125, 93, 0.4);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.produit-section--relier .produit-section-sortie:hover {
  color: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
}

/* ─── Responsive produit-section ─── */
@media (max-width: 960px) {
  .produit-section--accompagner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .produit-section--accompagner > .produit-section-photo {
    height: clamp(240px, 50vw, 380px);
  }

  .produit-section--accompagner > .produit-section-contenu {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  }

  .produit-section-relier-corps {
    grid-template-columns: 1fr;
  }

  .produit-section--relier .produit-section-relier-corps .produit-section-photo {
    height: clamp(240px, 50vw, 380px);
  }
}

@media (max-width: 640px) {
  .produit-section--former .produit-section-photo {
    height: clamp(200px, 55vw, 300px);
  }
}

/* ============================================================
   TRAJECTOIRES — DÉSIRS DU VISITEUR
   ============================================================ */

.trajectoires {
  background-color: var(--bleu-nuit);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.trajectoires-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.2;
  color: var(--blanc);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 640px;
}

.trajectoires-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trajectoire-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.trajectoire-lien {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 0;
  text-decoration: none;
  transition: padding-left var(--transition);
}

.trajectoire-lien:hover {
  padding-left: 0.75rem;
}

.trajectoire-texte {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(247, 245, 240, 0.82);
  line-height: 1.3;
  transition: color var(--transition);
}

.trajectoire-lien:hover .trajectoire-texte {
  color: var(--blanc);
}

.trajectoire-dest {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert-vif);
  white-space: nowrap;
  transition: letter-spacing var(--transition);
}

.trajectoire-lien:hover .trajectoire-dest {
  letter-spacing: 0.09em;
}

@media (max-width: 640px) {
  .trajectoire-lien {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.2rem 0;
  }

  .trajectoire-dest {
    font-size: 0.72rem;
  }
}

/* Trajectoires — version cartes (2×2) */
.trajectoires-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.07);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.trajectoire-carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background-color: var(--bleu-nuit);
  min-height: 180px;
  transition: background-color var(--transition);
}

.trajectoire-carte:hover {
  background-color: #0d3b51;
}

.trajectoire-carte-texte {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  color: rgba(247, 245, 240, 0.88);
  flex: 1;
  margin-bottom: 1.5rem;
  transition: color var(--transition);
}

.trajectoire-carte:hover .trajectoire-carte-texte {
  color: var(--blanc);
}

.trajectoire-carte-dest {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

@media (max-width: 600px) {
  .trajectoires-grille {
    grid-template-columns: 1fr;
  }

  .trajectoire-carte {
    min-height: auto;
  }
}

/* ============================================================
   PAGE COMPRENDRE — EN-TÊTE
   ============================================================ */

.comprendre-header {
  background-color: var(--bleu-nuit);
  padding: clamp(4rem, 8vw, 7rem) 0 0;
  color: var(--blanc);
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--vert-vif);
}
/* Texture diagonal identique aux autres headers */
.comprendre-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-55deg, transparent, transparent 40px, rgba(148,193,31,0.035) 40px, rgba(148,193,31,0.035) 41px);
  z-index: 0;
}
/* Vague organique en bas */
.comprendre-header::after {
  content: '';
  display: block;
  height: clamp(3rem, 5vw, 4.5rem);
  background: var(--blanc);
  border-radius: 50% 50% 0 0 / clamp(2rem,3vw,3rem) clamp(2rem,3vw,3rem) 0 0;
  transform: scaleX(1.06);
}
.comprendre-header .container {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.comprendre-surtitre {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 1.25rem;
}

.comprendre-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.1;
  color: var(--blanc);
  max-width: 760px;
  margin-bottom: 1.75rem;
}

/* Bloc intro multi-paragraphes */
.comprendre-intro-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 680px;
}

.comprendre-intro {
  font-size: clamp(1rem, 1.5vw, 1.05rem);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(247, 245, 240, 0.78);
}

.comprendre-intro-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: rgba(247, 245, 240, 0.55);
  line-height: 1.7;
  margin-top: 0.4rem;
}

/* ============================================================
   PAGE COMPRENDRE — 3 UNIVERS
   ============================================================ */

.comprendre-univers {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

/* En-tête de chaque univers */
.comprendre-univers-entete {
  max-width: 680px;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.comprendre-univers-num {
  margin-bottom: 1rem;
}

.comprendre-univers-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--anthracite);
  margin-bottom: 1rem;
}

.comprendre-univers-intro {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.85;
  color: var(--gris);
  font-weight: 300;
}

/* Placeholder photo */
.comprendre-univers-photo {
  width: 100%;
  height: clamp(220px, 32vw, 420px);
  background-color: #E4E0D8;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

.comprendre-univers-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Univers 01 — Le monde qui change ─── */
.comprendre-univers--monde {
  background-color: var(--blanc);
  border-top: 2px solid var(--vert-vif);
}

.comprendre-univers--monde .comprendre-univers-num {
  color: var(--vert-vif);
}

.comprendre-univers--monde .comprendre-univers-titre {
  color: var(--anthracite);
}

/* ─── Univers 02 — Apprendre autrement ─── */
.comprendre-univers--apprendre {
  background-color: var(--gris-tres-clair);
  border-top: 2px solid var(--bleu-nuit);
}

.comprendre-univers--apprendre .comprendre-univers-num {
  color: var(--bleu-nuit);
}

.comprendre-univers--apprendre .comprendre-univers-titre {
  color: var(--bleu-nuit);
}

.comprendre-univers--apprendre .comprendre-univers-photo {
  background-color: #CCC8C0;
}

.comprendre-univers--apprendre .comprendre-item {
  background-color: var(--blanc);
}

/* ─── Univers 03 — Agir dans les transformations ─── */
.comprendre-univers--agir {
  background-color: var(--blanc);
  border-top: 2px solid var(--vert-foret);
}

.comprendre-univers--agir .comprendre-univers-num {
  color: var(--vert-foret);
}

.comprendre-univers--agir .comprendre-univers-titre {
  color: var(--vert-foret);
}

/* Carte de convergence — traitement distinctif */
.comprendre-item--convergence {
  background-color: rgba(47, 125, 93, 0.06);
  border-color: rgba(47, 125, 93, 0.35);
}

.comprendre-item--convergence .comprendre-item-type {
  color: var(--vert-foret);
}

.comprendre-item--convergence .comprendre-item-titre {
  color: var(--vert-foret);
}

.comprendre-item--convergence .comprendre-item-desc {
  color: var(--vert-foret);
  opacity: 0.85;
}

.comprendre-item--convergence:hover {
  border-color: var(--vert-foret) !important;
  box-shadow: 0 4px 18px rgba(47, 125, 93, 0.12) !important;
}

/* ─── Grille de cartes (commune aux 3 univers) ─── */
.comprendre-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.comprendre-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 2rem;
  background-color: var(--blanc);
  border: 1.5px solid var(--gris-clair);
  border-radius: var(--rayon);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Barre d'accent en haut — identifie le type de question */
.comprendre-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--vert-vif);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.comprendre-item:hover:not(.comprendre-item--bientot)::before {
  transform: scaleX(1);
}

.comprendre-item:hover:not(.comprendre-item--bientot):not(.comprendre-item--convergence) {
  border-color: var(--bleu-nuit);
  box-shadow: 0 4px 18px rgba(16, 72, 98, 0.09);
  transform: translateY(-2px);
}

.comprendre-item--bientot {
  opacity: 0.6;
  cursor: default;
}

/* Item "Question racine" — légèrement plus présent */
.comprendre-item:has(.comprendre-item-type:first-child) {
  /* sera différencié via le CSS spécifique ci-dessous */
}

.comprendre-item-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--vert-foret);
  padding: 0.2rem 0.5rem;
  background-color: rgba(47,125,93,0.08);
  border: 1px solid rgba(47,125,93,0.2);
  border-radius: 2px;
  width: fit-content;
  margin-bottom: 0.25rem;
}

/* Variantes de type par label */
.comprendre-item-type-racine,
.comprendre-item-type:is([class*="racine"]) {
  color: var(--bleu-nuit);
  background-color: rgba(16,72,98,0.07);
  border-color: rgba(16,72,98,0.18);
}

.comprendre-item-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.3;
  color: var(--bleu-nuit);
  transition: color var(--transition);
}

.comprendre-item:hover:not(.comprendre-item--bientot) .comprendre-item-titre {
  color: var(--anthracite);
}

.comprendre-item-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gris);
  margin-top: 0.4rem;
  font-weight: 300;
}

/* Flèche de circulation — apparaît au hover */
.comprendre-item::after {
  content: '→';
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  font-size: 0.9rem;
  color: var(--bleu-nuit);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.comprendre-item:hover:not(.comprendre-item--bientot)::after {
  opacity: 0.6;
  transform: translateX(0);
}

.comprendre-item-soon {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin-top: 0.5rem;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .comprendre-grille {
    grid-template-columns: 1fr;
  }

  .comprendre-univers-photo {
    height: clamp(180px, 45vw, 280px);
  }
}

@media (max-width: 640px) {
  .comprendre-item {
    padding: 1.4rem 1.5rem;
  }
}

/* ============================================================
   CONTENUS PILIERS — EN-TÊTE
   ============================================================ */

.pilier-header {
  background-color: var(--bleu-nuit);
  padding: clamp(4rem, 8vw, 7rem) 0 0;
  color: var(--blanc);
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--vert-vif);
}

/* Texture diagonale subtile identique à formation-header */
.pilier-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 40px,
      rgba(148,193,31,0.035) 40px,
      rgba(148,193,31,0.035) 41px
    );
  z-index: 0;
}

/* Vague organique en bas */
.pilier-header::after {
  content: '';
  display: block;
  height: clamp(3rem, 5vw, 4.5rem);
  background: var(--blanc);
  border-radius: 50% 50% 0 0 / clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem) 0 0;
  transform: scaleX(1.06);
}

/* Le contenu à l'intérieur passe devant la texture */
.pilier-header > .container,
.pilier-header > div {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pilier-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.pilier-retour {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(247,245,240,0.6);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.pilier-retour:hover {
  color: var(--blanc);
  border-color: rgba(247,245,240,0.35);
}

.pilier-type {
  /* V2 : pas de badge. Petites caps espacées, couleur terracotta.
     Signal éditorial, pas badge pédagogique. */
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
}
/* Pas de pseudo-element */
.pilier-type::before {
  display: none;
  content: '';
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--vert-vif);
  flex-shrink: 0;
}

.pilier-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.1;
  color: var(--blanc);
  max-width: 840px;
  margin-bottom: 1.5rem;
}

.pilier-chapeau {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(247,245,240,0.78);
  max-width: 720px;
}

/* ============================================================
   CONTENUS PILIERS — CORPS
   ============================================================ */

.pilier-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.pilier-section--large {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.pilier-container {
  /* Utilise le container standard — cohérence avec toutes les autres sections */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
}

.pilier-corps {
  /* Colonne de lecture centrée — marges égales gauche et droite */
  max-width: 720px;
  margin: 0 auto;
}

.pilier-corps > p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--anthracite);
  margin-bottom: 1.5rem;
}

/* Liens inline dans le corps d'un pilier */
.pilier-lien {
  color: var(--bleu-nuit);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(16, 72, 98, 0.3);
  padding-bottom: 1px;
  transition: border-color var(--transition), color var(--transition);
}

.pilier-lien:hover {
  color: var(--vert-foret);
  border-color: var(--vert-foret);
}

/* ---- Ouverture ---- */
.pilier-ouverture {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--gris-clair);
}

.pilier-ouverture p {
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--gris);
  margin-bottom: 1.25rem;
}
.pilier-ouverture p:last-child { margin-bottom: 0; }

.pilier-ouverture strong {
  color: var(--anthracite);
  font-weight: 600;
}

/* ---- Titres H2 internes ---- */
.pilier-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.2;
  color: var(--bleu-nuit);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1.25rem;
}

/* ---- Citation ---- */
/* ---- Bloc déplacement de regard ---- */
.pilier-deplacement {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: 1.5rem 2rem;
  background-color: rgba(16, 72, 98, 0.04);
  border-left: 3px solid var(--bleu-nuit);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pilier-deplacement-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.25rem;
}

.pilier-deplacement-de {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--gris);
}

.pilier-deplacement-vers {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--bleu-nuit);
  font-weight: 500;
}

/* ---- Citation ---- */
.pilier-citation {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--bleu-nuit);
  border-left: 3px solid var(--vert-vif);
  padding: 1.25rem 0 1.25rem 2rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

/* ---- Liste pilier ---- */
.pilier-liste {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pilier-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--anthracite);
}

.pilier-liste li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--vert-vif);
  margin-top: 0.65rem;
}

/* ---- Concept central ---- */
.pilier-concept {
  background-color: var(--bleu-nuit);
  color: var(--blanc);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 4px;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.pilier-concept-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.2;
  /* Blanc cassé — lisible sur fond bleu-nuit */
  color: var(--blanc);
  margin-bottom: 1.25rem;
}

.pilier-concept-def {
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.85;
  color: rgba(247,245,240,0.92);
  margin-bottom: 1.25rem;
}

.pilier-concept p {
  font-size: 0.95rem;
  color: rgba(247,245,240,0.72);
  line-height: 1.75;
}

/* ---- Implications ---- */
.pilier-implications {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.pilier-impl-item {
  padding: 1.75rem 2rem;
  border-left: 3px solid var(--vert-foret);
  background-color: var(--gris-tres-clair);
}

.pilier-impl-titre {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vert-foret);
  margin-bottom: 0.75rem;
}

.pilier-impl-item p {
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--gris);
  margin-bottom: 0;
}

/* ---- Actions IEC ---- */
.pilier-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.pilier-action {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--blanc);
  border: 1.5px solid var(--gris-clair);
  border-radius: 4px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pilier-action:hover {
  border-color: var(--bleu-nuit);
  box-shadow: 0 4px 18px rgba(16,72,98,0.09);
}

.pilier-action-type {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.pilier-action-nom {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--bleu-nuit);
}

.pilier-action-desc {
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--gris);
  margin-top: 0.2rem;
}

/* ============================================================
   CONTENUS PILIERS — REBONDS
   ============================================================ */

.pilier-rebonds {
  background-color: var(--gris-tres-clair);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--gris-clair);
}

.pilier-rebonds-intro {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 2rem;
  text-align: center;
}

.pilier-rebonds-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.rebond-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--blanc);
  border: 1.5px solid transparent;
  border-radius: 4px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rebond-item:hover {
  border-color: var(--vert-foret);
  box-shadow: 0 4px 16px rgba(47,125,93,0.09);
}

.rebond-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-foret);
  padding: 0.18rem 0.5rem;
  background-color: rgba(47,125,93,0.08);
  border: 1px solid rgba(47,125,93,0.2);
  border-radius: 2px;
  width: fit-content;
}

/* Variantes de type dans les rebonds */
.rebond-type--pilier { color: var(--bleu-nuit); background-color: rgba(16,72,98,0.06); border-color: rgba(16,72,98,0.15); }
.rebond-type--formation { color: var(--anthracite); background-color: rgba(29,29,27,0.05); border-color: rgba(29,29,27,0.12); }
.rebond-type--ressource { color: #2a6e7f; background-color: var(--aqua-pale); border-color: rgba(94,168,188,0.35); }
.rebond-type--evenement { color: var(--teal); background-color: rgba(25,106,126,0.07); border-color: rgba(25,106,126,0.2); }
.rebond-type--recit { color: var(--ocre); background-color: var(--ocre-pale); border-color: rgba(200,144,106,0.3); }

.rebond-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--bleu-nuit);
}

.rebond-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gris);
}

/* ============================================================
   CONTENUS PILIERS — RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .pilier-actions {
    grid-template-columns: 1fr;
  }

  .pilier-rebonds-grille {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pilier-container {
    padding: 0 1rem;
  }

  .pilier-citation {
    padding-left: 1.25rem;
  }

  .pilier-impl-item {
    padding: 1.25rem 1.25rem;
  }

  .pilier-action,
  .rebond-item {
    padding: 1.25rem;
  }
}

/* =============================================================
   COMPRENDRE — CTA DE SORTIE
   ============================================================= */

.comprendre-cta {
  background-color: var(--bleu-nuit);
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.comprendre-cta-chapeau {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 1.25rem;
}

.comprendre-cta-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.25;
  color: var(--blanc);
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.comprendre-cta-chemins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.comprendre-cta-chemin {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}

.comprendre-cta-chemin:hover {
  border-color: var(--vert-vif);
  background-color: rgba(148, 193, 31, 0.06);
}

.comprendre-cta-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.comprendre-cta-dest {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--blanc);
  line-height: 1.2;
}

.comprendre-cta-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  margin-top: 0.4rem;
}

@media (max-width: 640px) {
  .comprendre-cta-chemins {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   SOUS-PAGES FORMATIONS — COMPOSANTS PARTAGÉS
   ============================================================= */

/* ─── Header sous-page formation ─── */
.formation-header {
  background-color: var(--bleu-nuit);
  padding: clamp(3rem, 6vw, 5rem) 0 0;
  position: relative;
  overflow: hidden;
  /* Accent top — identité de section (surcharge par modificateur) */
  border-top: 3px solid var(--vert-vif);
}

/* Vague organique en bas du header — fond blanc du corps de page */
.formation-header::after {
  content: '';
  display: block;
  height: clamp(3rem, 5vw, 4.5rem);
  background: var(--blanc);
  border-radius: 50% 50% 0 0 / clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem) 0 0;
  transform: scaleX(1.06);
}

/* Texture légère — fond du header légèrement strié */
.formation-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 40px,
      rgba(148,193,31,0.035) 40px,
      rgba(148,193,31,0.035) 41px
    );
  z-index: 0;
}

.formation-header .container {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ─── Modificateurs d'identité par section ─── */
/* Comprendre → accent vert-vif (épistémique) */
.formation-header--comprendre {
  border-top-color: var(--vert-vif);
}
/* Ressources → accent ocre (capitalisation) */
.formation-header--ressources {
  border-top-color: var(--ocre);
  background: linear-gradient(165deg, var(--bleu-nuit) 0%, var(--encre) 100%);
}
/* Academia → accent aqua (continuité) */
.formation-header--academia {
  border-top-color: var(--aqua);
  background: linear-gradient(165deg, var(--bleu-nuit) 0%, #0A3D56 100%);
}
/* Événements → accent vert-foret */
.formation-header--evenements {
  border-top-color: var(--vert-foret);
  background: linear-gradient(165deg, var(--bleu-nuit) 0%, #1A4A38 40%, var(--encre) 100%);
}
/* Alumni → accent blanc perlé */
.formation-header--alumni {
  border-top-color: var(--aqua-pale);
}
/* Accompagnement → accent teal */
.formation-header--accompagnement {
  border-top-color: var(--teal);
}
/* Institut → accent argile */
.formation-header--institut {
  border-top-color: var(--argile);
  background: linear-gradient(165deg, var(--bleu-nuit) 0%, var(--encre) 100%);
}

.formation-header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.formation-header-retour {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(247, 245, 240, 0.5);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color var(--transition);
}

.formation-header-retour:hover { color: var(--blanc); }

.formation-header-retour::before { content: "← "; }

.formation-header-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(148, 193, 31, 0.4);
  border-radius: 2px;
}

.formation-header-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.12;
  color: var(--blanc);
  margin-bottom: 1.25rem;
}

.formation-header-chapeau {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: rgba(247, 245, 240, 0.75);
  max-width: 680px;
  font-weight: 300;
  margin-bottom: 2rem;
}

.formation-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background-color: rgba(148, 193, 31, 0.15);
  border: 1.5px solid var(--vert-vif);
  border-radius: 2px;
}

.formation-header-badge-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.formation-header-badge-date {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blanc);
}

.formation-header-badge-deadline {
  font-size: 0.75rem;
  color: rgba(247, 245, 240, 0.65);
  font-weight: 300;
}

/* ─── Chiffres clés ─── */
.formation-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--gris-clair);
  border: 1px solid var(--gris-clair);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.formation-chiffre {
  background-color: var(--blanc);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.formation-chiffre-valeur {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1;
}

.formation-chiffre-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris);
}

.formation-chiffre-detail {
  font-size: 0.82rem;
  color: var(--gris);
  font-weight: 300;
  margin-top: 0.15rem;
}

/* ─── Encart info ─── */
.formation-encart {
  background-color: rgba(16, 72, 98, 0.05);
  border-left: 3px solid var(--bleu-nuit);
  padding: 1.5rem 2rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.formation-encart--alerte {
  background-color: rgba(148, 193, 31, 0.08);
  border-color: var(--vert-vif);
}

.formation-encart-titre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bleu-nuit);
  margin-bottom: 0.75rem;
}

.formation-encart--alerte .formation-encart-titre {
  color: var(--vert-foret);
}

/* ─── Orientations (alternance) ─── */
.formation-orientations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.formation-orientation {
  padding: 1.75rem 2rem;
  background-color: var(--blanc);
  border: 1.5px solid var(--gris-clair);
  border-radius: 4px;
}

.formation-orientation-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.5rem;
}

.formation-orientation-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--bleu-nuit);
  margin-bottom: 0.6rem;
}

.formation-orientation-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gris);
  font-weight: 300;
}

/* ─── Tarifs ─── */
.formation-tarifs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--gris-clair);
  border: 1px solid var(--gris-clair);
  margin: 1.5rem 0;
}

.formation-tarif {
  background-color: var(--blanc);
  padding: 1.5rem;
}

.formation-tarif-nom {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.4rem;
}

.formation-tarif-prix {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--bleu-nuit);
  font-weight: 400;
}

.formation-tarif-detail {
  font-size: 0.78rem;
  color: var(--gris);
  font-weight: 300;
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* ─── Section candidature ─── */
.formation-candidature {
  background-color: var(--gris-tres-clair);
  border-top: 2px solid var(--vert-vif);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.formation-candidature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

.formation-candidature-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--bleu-nuit);
  margin-bottom: 1.25rem;
}

.formation-candidature-texte {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--anthracite);
  font-weight: 300;
  margin-bottom: 1.25rem;
}

.formation-candidature-contact {
  font-size: 0.88rem;
  color: var(--gris);
  line-height: 1.7;
  font-weight: 300;
}

.formation-candidature-contact a {
  color: var(--bleu-nuit);
  font-weight: 500;
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .formation-chiffres { grid-template-columns: repeat(2, 1fr); }
  .formation-orientations { grid-template-columns: 1fr; }
  .formation-tarifs { grid-template-columns: 1fr; }
  .formation-candidature-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .formation-chiffres { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   PAGE SE FORMER — /formations
   ============================================================= */

/* ─── Header ─── */
.formations-header {
  background-color: var(--bleu-nuit);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}

.formations-eyebrow {
  color: var(--vert-vif);
  margin-bottom: 1.5rem;
}

.formations-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  color: var(--blanc);
  max-width: 800px;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.formations-chapeau {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: rgba(247, 245, 240, 0.75);
  max-width: 640px;
  font-weight: 300;
  margin-bottom: clamp(2rem, 3vw, 2.5rem);
}

.formations-rentrees {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.formations-rentre {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem;
  background-color: rgba(148, 193, 31, 0.12);
  border: 1px solid rgba(148, 193, 31, 0.3);
  border-radius: 2px;
  width: fit-content;
}

.formations-rentre-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.formations-rentre-date {
  font-size: 0.85rem;
  color: rgba(247, 245, 240, 0.85);
  font-weight: 300;
}

.formations-rentre-date strong {
  color: var(--vert-vif);
  font-weight: 600;
}

/* ─── Déplacement ─── */
.formations-deplacement-section {
  background-color: var(--gris-tres-clair);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.formations-deplacement {
  max-width: 760px;
  padding: 1.5rem 2rem;
  background-color: var(--blanc);
  border-left: 3px solid var(--bleu-nuit);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.formations-deplacement-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.15rem;
}

.formations-deplacement-de {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--gris);
}

.formations-deplacement-vers {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--bleu-nuit);
  font-weight: 500;
}

/* ─── Argument central ─── */
.formations-argument {
  background-color: var(--blanc);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--gris-clair);
}

.formations-argument-inner {
  display: grid;
  grid-template-columns: 1fr 42%;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.formations-argument-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--bleu-nuit);
  line-height: 1.25;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.formations-argument-corps {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--anthracite);
  margin-bottom: 1.25rem;
  font-weight: 300;
}

.formations-argument-corps--accent {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  padding-left: 1.25rem;
  border-left: 2px solid var(--vert-vif);
  margin-top: 0.5rem;
}

.formations-argument-lien {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--bleu-nuit);
  border-bottom: 1.5px solid rgba(16, 72, 98, 0.35);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.formations-argument-lien:hover {
  color: var(--vert-foret);
  border-color: var(--vert-foret);
}

.formations-argument-visuel {
  height: clamp(320px, 42vw, 540px);
  overflow: hidden;
}

.formations-argument-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── 5 Chemins ─── */
.formations-chemins-section {
  background-color: var(--gris-tres-clair);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.formations-chemins-eyebrow {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.formations-chemins {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.formation-chemin {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2rem, 3.5vw, 2.5rem) 0;
  border-top: 1.5px solid var(--gris-clair);
  text-decoration: none;
  transition: background-color var(--transition);
  align-items: start;
}

.formation-chemin:last-child {
  border-bottom: 1.5px solid var(--gris-clair);
}

.formation-chemin:hover {
  background-color: rgba(16, 72, 98, 0.03);
}

.formation-chemin-numero {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 400;
  color: var(--gris-clair);
  line-height: 1;
  padding-top: 0.4rem;
}

.formation-chemin-corps {
  display: flex;
  flex-direction: column;
}

.formation-chemin-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.5rem;
}

.formation-chemin-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--bleu-nuit);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  transition: color var(--transition);
}

.formation-chemin:hover .formation-chemin-titre {
  color: var(--anthracite);
}

.formation-chemin-accroche {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--gris);
  margin-bottom: 0.85rem;
  font-weight: 400;
}

.formation-chemin-desc {
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--anthracite);
  font-weight: 300;
  max-width: 700px;
  margin-bottom: 1.25rem;
}

.formation-chemin-pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.formation-chemin-public {
  font-size: 0.75rem;
  color: var(--gris);
  font-style: italic;
  font-weight: 300;
}

.formation-chemin-lien {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bleu-nuit);
  border-bottom: 1.5px solid rgba(16, 72, 98, 0.3);
  padding-bottom: 1px;
  flex-shrink: 0;
  transition: color var(--transition), border-color var(--transition);
}

.formation-chemin:hover .formation-chemin-lien {
  color: var(--vert-foret);
  border-color: var(--vert-foret);
}

/* ─── Academia ─── */
.formations-academia {
  background-color: var(--bleu-nuit);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.formations-academia-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.formations-academia-chapeau {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.6rem;
}

.formations-academia-corps {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(247, 245, 240, 0.75);
  font-weight: 300;
  max-width: 580px;
}

.formations-academia-lien {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid rgba(148, 193, 31, 0.5);
  color: var(--vert-vif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.formations-academia-lien:hover {
  background-color: rgba(148, 193, 31, 0.12);
  border-color: var(--vert-vif);
}

/* ─── CTA ─── */
.formations-cta {
  background-color: var(--blanc);
  border-top: 1px solid var(--gris-clair);
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.formations-cta-eyebrow {
  margin-bottom: 1.25rem;
}

.formations-cta-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--bleu-nuit);
  line-height: 1.25;
  max-width: 600px;
  margin-bottom: 1rem;
}

.formations-cta-texte {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gris);
  font-weight: 300;
  max-width: 560px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .formations-argument-inner {
    grid-template-columns: 1fr;
  }
  .formations-argument-visuel {
    height: clamp(220px, 50vw, 360px);
    order: -1;
  }
}

@media (max-width: 640px) {
  .formation-chemin {
    grid-template-columns: 44px 1fr;
    column-gap: 1rem;
  }
  .formation-chemin-pied { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .formations-academia-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   L'INSTITUT — Carousel équipe
   ============================================================= */

.equipe-carousel-wrap {
  position: relative;
  overflow: hidden;
}

.equipe-carousel-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.equipe-carousel-card {
  flex-shrink: 0;
  width: calc(25% - 0.95rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.75rem 1rem 1.5rem;
  background-color: var(--blanc);
  border: 1.5px solid var(--gris-clair);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}

.equipe-carousel-card:hover {
  border-color: var(--bleu-nuit);
  transform: translateY(-2px);
}

.equipe-carousel-avatar-c {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(16, 72, 98, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  flex-shrink: 0;
}

.equipe-carousel-avatar-c img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.equipe-carousel-nom {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.98rem;
  color: var(--bleu-nuit);
  line-height: 1.25;
}

.equipe-carousel-role {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vert-vif);
  line-height: 1.4;
}

.equipe-carousel-lien {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gris);
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity var(--transition);
}

.equipe-carousel-card:hover .equipe-carousel-lien {
  opacity: 1;
}

.equipe-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.75rem;
}

.equipe-carousel-dots {
  display: flex;
  gap: 0.4rem;
}

.equipe-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--gris-clair);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition), transform var(--transition);
}

.equipe-carousel-dot.active {
  background-color: var(--bleu-nuit);
  transform: scale(1.3);
}

.equipe-carousel-btn {
  background: none;
  border: 1.5px solid var(--gris-clair);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bleu-nuit);
  font-size: 1rem;
  transition: border-color var(--transition), background-color var(--transition);
}

.equipe-carousel-btn:hover {
  border-color: var(--bleu-nuit);
  background-color: var(--bleu-nuit);
  color: var(--blanc);
}

@media (max-width: 960px) {
  .equipe-carousel-card { width: calc(33.33% - 0.84rem); }
}

@media (max-width: 640px) {
  .equipe-carousel-card { width: calc(50% - 0.625rem); }
}

/* =============================================================
   L'INSTITUT — Équipe (page dédiée)
   ============================================================= */

.equipe-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.equipe-membre {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.equipe-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--gris-tres-clair);
  overflow: hidden;
  flex-shrink: 0;
}

.equipe-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipe-avatar-initiales {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  background-color: rgba(16, 72, 98, 0.08);
}

.equipe-info {}

.equipe-nom {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--bleu-nuit);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.equipe-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.6rem;
}

.equipe-bio {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--gris);
  font-weight: 300;
}

.equipe-contact {
  font-size: 0.78rem;
  color: var(--gris);
  margin-top: 0.4rem;
}

.equipe-contact a {
  color: var(--bleu-nuit);
  text-decoration: none;
  border-bottom: 1px solid rgba(16,72,98,0.2);
  transition: border-color var(--transition);
}
.equipe-contact a:hover { border-color: var(--bleu-nuit); }

.equipe-separateur {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--gris-clair);
  margin: 0.5rem 0;
}

/* =============================================================
   L'INSTITUT — Histoire / Frise chronologique
   ============================================================= */

.frise {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.frise::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--vert-vif), var(--bleu-nuit) 60%, var(--vert-foret));
}

.frise-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

.frise-item::before {
  content: "";
  position: absolute;
  left: 112px;
  top: 0.5rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--blanc);
  border: 3px solid var(--vert-vif);
  z-index: 1;
}

.frise-item--majeur::before {
  width: 22px;
  height: 22px;
  left: 110px;
  background-color: var(--vert-vif);
  border-color: var(--vert-vif);
}

.frise-annee {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--bleu-nuit);
  line-height: 1;
  text-align: right;
  padding-top: 0.15rem;
}

.frise-annee-approx {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-clair);
  display: block;
  margin-top: 0.2rem;
}

.frise-contenu {
  padding-top: 0.15rem;
}

.frise-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--anthracite);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.frise-texte {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--gris);
  font-weight: 300;
}

.frise-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  margin-bottom: 0.5rem;
}

.frise-tag--formation { background: rgba(148,193,31,0.15); color: var(--vert-foret); }
.frise-tag--international { background: rgba(16,72,98,0.1); color: var(--bleu-nuit); }
.frise-tag--reseau { background: rgba(47,125,93,0.12); color: var(--vert-foret); }
.frise-tag--fondation { background: var(--vert-vif); color: var(--anthracite); }

@media (max-width: 640px) {
  .equipe-grille { grid-template-columns: 1fr; }
  .frise::before { left: 80px; }
  .frise-item { grid-template-columns: 80px 1fr; gap: 1.5rem; }
  .frise-item::before { left: 72px; }
  .frise-item--majeur::before { left: 70px; }
  .frise-annee { font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════
   ACTEURS EN MOUVEMENT — Section homepage étape 5
═══════════════════════════════════════════════════════ */

.mouvement {
  background-color: var(--blanc);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--gris-clair);
}

.mouvement-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--bleu-nuit);
  margin: 0.5rem 0 3rem;
  max-width: 600px;
}

.mouvement-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mouvement-carte {
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mouvement-carte--placeholder {
  border: 2px dashed var(--gris-clair);
  background-color: transparent;
  opacity: 0.75;
}

.mouvement-carte-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-foret);
}

.mouvement-carte--placeholder .mouvement-carte-type {
  color: var(--gris);
}

.mouvement-carte-titre {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.4;
  margin: 0;
}

.mouvement-carte-texte {
  font-size: 0.875rem;
  color: var(--gris);
  line-height: 1.6;
  flex: 1;
}

.mouvement-carte-lien {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  text-decoration: none;
  margin-top: 0.5rem;
}

.mouvement-carte-lien:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .mouvement-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mouvement-grille { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   TRAJECTOIRES — 5 personas
═══════════════════════════════════════════════════════ */

.trajectoires-grille--5 {
  grid-template-columns: repeat(5, 1fr);
}

.trajectoire-carte-persona {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.4rem;
}

@media (max-width: 1100px) {
  .trajectoires-grille--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .trajectoires-grille--5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .trajectoires-grille--5 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   ACADEMIA — Double entrée alumni / nouveaux
═══════════════════════════════════════════════════════ */

.academia-entrees {
  background-color: var(--gris-tres-clair);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--gris-clair);
}

.academia-entrees-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.academia-entree {
  padding: 2.5rem;
  background-color: var(--blanc);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.academia-entree--alumni {
  border-top: 4px solid var(--bleu-nuit);
}

.academia-entree--nouveau {
  border-top: 4px solid var(--vert-vif);
}

.academia-entree-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris);
}

.academia-entree-titre {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  margin: 0;
}

.academia-entree-texte {
  font-size: 0.9rem;
  color: var(--gris);
  line-height: 1.65;
  flex: 1;
}

.academia-entree-lien {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  text-decoration: none;
  margin-top: 0.5rem;
}

.academia-entree-lien:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .academia-entrees-grille { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   TÉMOIGNAGES — Pages formations
═══════════════════════════════════════════════════════ */

.temoignages-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.temoignage {
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  padding: 2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.temoignage--placeholder {
  border: 2px dashed var(--gris-clair);
  background-color: transparent;
  opacity: 0.7;
}

.temoignage-texte {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bleu-nuit);
  flex: 1;
  font-style: italic;
}

.temoignage-auteur {
  font-size: 0.8rem;
  color: var(--gris);
}

.temoignage-auteur strong {
  display: block;
  color: var(--anthracite);
  font-weight: 600;
  margin-bottom: 0.1rem;
}

@media (max-width: 900px) {
  .temoignages-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .temoignages-grille { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PORTRAITS ALUMNI — Dans les contenus piliers
═══════════════════════════════════════════════════════ */

.portrait-alumni {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  align-items: start;
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  padding: 2rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.portrait-alumni--placeholder {
  border: 2px dashed var(--gris-clair);
  background-color: transparent;
  opacity: 0.75;
}

.portrait-alumni-photo { flex-shrink: 0; }

.portrait-placeholder-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--gris-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--gris);
  text-align: center;
  padding: 0.5rem;
}

.portrait-alumni-corps {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.portrait-alumni-citation {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--bleu-nuit);
  margin: 0;
}

.portrait-alumni-identite {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.portrait-alumni-nom {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--anthracite);
}

.portrait-alumni-fonction,
.portrait-alumni-formation {
  font-size: 0.78rem;
  color: var(--gris);
}

.portrait-alumni-lien {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  text-decoration: none;
}

.portrait-alumni-lien:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .portrait-alumni { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   RÉCITS DE TERRAIN — Collection pages
═══════════════════════════════════════════════════════ */

.recits-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.recit-carte {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.recit-carte:hover { background-color: #e5e1da; }

.recit-carte-type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-foret);
}

.recit-carte-titre {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.4;
  margin: 0;
}

.recit-carte-texte {
  font-size: 0.85rem;
  color: var(--gris);
  line-height: 1.6;
  flex: 1;
}

.recit-carte-lien {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bleu-nuit);
}

.recit-header { padding-bottom: 0; }

.recit-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-clair);
}

.recit-meta-item {
  font-size: 0.78rem;
  color: var(--gris);
}

.recit-placeholder-notice {
  background-color: rgba(148, 193, 31, 0.1);
  border: 1px solid var(--vert-vif);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: 0.82rem;
  color: var(--vert-foret);
  margin-bottom: 2.5rem;
}

@media (max-width: 900px) {
  .recits-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .recits-grille { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   ACADEMIA — Communes + Et ensuite
═══════════════════════════════════════════════════════ */

.academia-communes {
  background-color: var(--bleu-nuit);
  padding: clamp(3rem, 5vw, 4rem) 0;
}

.academia-communes-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.academia-communes-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-vif);
  margin-bottom: 0.5rem;
}

.academia-communes-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--blanc);
  margin: 0 0 1rem;
  max-width: 520px;
}

.academia-communes-texte {
  font-size: 0.9rem;
  color: rgba(247,245,240,0.75);
  line-height: 1.65;
  max-width: 520px;
}

.academia-communes-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.academia-communes-cta .pilier-lien {
  color: rgba(247,245,240,0.7);
}

.academia-ensuite {
  background-color: var(--gris-tres-clair);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--gris-clair);
}

.academia-ensuite-inner {
  max-width: 800px;
}

.academia-ensuite-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--bleu-nuit);
  margin-bottom: 1rem;
}

.academia-ensuite-texte {
  font-size: 0.95rem;
  color: var(--gris);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.academia-ensuite-chemins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.academia-ensuite-chemin {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem;
  background-color: var(--blanc);
  border: 1.5px solid var(--gris-clair);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.academia-ensuite-chemin:hover {
  border-color: var(--bleu-nuit);
}

.academia-ensuite-chemin-type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-foret);
}

.academia-ensuite-chemin-nom {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--bleu-nuit);
}

.academia-ensuite-chemin-desc {
  font-size: 0.8rem;
  color: var(--gris);
}

@media (max-width: 600px) {
  .academia-ensuite-chemins { grid-template-columns: 1fr; }
  .academia-communes-inner { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════
   TEXTE INVENTÉ — Marqueur visuel placeholder
═══════════════════════════════════════════════════════ */

.invente-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: #fff3cd;
  border: 1px solid #f0c040;
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a6800;
  margin-bottom: 0.75rem;
}

.section-inventee {
  border: 2px dashed #f0c040;
  border-radius: 6px;
  padding: 1.5rem;
  background-color: #fffdf0;
  margin: 1.5rem 0;
}

/* ═══════════════════════════════════════════════════════
   VIDÉO / WEBINAIRE — Cards ressources
═══════════════════════════════════════════════════════ */

.video-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.video-carte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  overflow: hidden;
}

.video-carte-vignette {
  aspect-ratio: 16/9;
  background-color: var(--bleu-nuit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,0.3);
}

.video-carte-corps {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.video-carte-type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-foret);
}

.video-carte-titre {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.4;
}

.video-carte-meta {
  font-size: 0.75rem;
  color: var(--gris);
}

.video-carte-lien {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
}

@media (max-width: 900px) { .video-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .video-grille { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   PUBLICATION — Cards ressources
═══════════════════════════════════════════════════════ */

.publications-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

.publication-carte {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  text-decoration: none;
  align-items: flex-start;
  transition: background-color 0.15s ease;
}

.publication-carte:hover { background-color: #e5e1da; }

.publication-icone {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}

.publication-corps { flex: 1; }

.publication-type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-foret);
  margin-bottom: 0.3rem;
}

.publication-titre {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.publication-desc {
  font-size: 0.8rem;
  color: var(--gris);
  line-height: 1.5;
}

.publication-meta {
  font-size: 0.72rem;
  color: var(--gris);
  margin-top: 0.4rem;
}

@media (max-width: 700px) { .publications-grille { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   BLOCS "VOUS ÊTES..." — Personnalisation par profil
═══════════════════════════════════════════════════════ */

.vous-etes {
  background-color: var(--bleu-nuit);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.vous-etes-titre {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  color: rgba(247,245,240,0.6);
  margin-bottom: 2rem;
  letter-spacing: 0.01em;
}

.vous-etes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.vous-etes-profil {
  background-color: var(--bleu-nuit);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.vous-etes-profil:hover {
  background-color: rgba(255,255,255,0.06);
}

.vous-etes-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.vous-etes-chemin {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--blanc);
  line-height: 1.45;
  flex: 1;
}

.vous-etes-cta {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(247,245,240,0.5);
  margin-top: 0.5rem;
  transition: color 0.15s ease;
}

.vous-etes-profil:hover .vous-etes-cta {
  color: var(--vert-vif);
}

@media (max-width: 700px) {
  .vous-etes-grille { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   ÉVÉNEMENTS — Page et composants
═══════════════════════════════════════════════════════ */

.evenements-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

.evenement-carte {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2rem;
  padding: 1.75rem 2rem;
  background-color: var(--gris-tres-clair);
  border-radius: 4px;
  text-decoration: none;
  align-items: start;
  transition: background-color 0.15s ease;
  border-left: 3px solid transparent;
}

.evenement-carte:hover {
  background-color: #e5e1da;
  border-left-color: var(--vert-vif);
}

.evenement-carte--passe {
  opacity: 0.65;
}

.evenement-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.evenement-date-jour {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1;
}

.evenement-date-mois {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.evenement-date-annee {
  font-size: 0.68rem;
  color: var(--gris);
}

.evenement-corps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.evenement-type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-foret);
}

.evenement-titre {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.4;
}

.evenement-desc {
  font-size: 0.85rem;
  color: var(--gris);
  line-height: 1.55;
}

.evenement-meta {
  font-size: 0.75rem;
  color: var(--gris);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.evenement-lien {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  .evenement-carte { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Ressources — fil thématique */
.ressources-themes {
  background-color: var(--bleu-nuit);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.ressources-themes-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 2.5rem;
}

.ressources-themes-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ressources-theme {
  background-color: rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.ressources-theme:hover { background-color: rgba(255,255,255,0.12); }

.ressources-theme-icone {
  font-size: 1.5rem;
  line-height: 1;
}

.ressources-theme-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.ressources-theme-question {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--blanc);
  line-height: 1.4;
}

.ressources-theme-desc {
  font-size: 0.82rem;
  color: rgba(247,245,240,0.65);
  line-height: 1.55;
  flex: 1;
}

.ressources-theme-liens {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.ressources-theme-lien {
  font-size: 0.75rem;
  color: rgba(247,245,240,0.7);
  text-decoration: none;
}

.ressources-theme-lien:hover { color: var(--vert-vif); }

@media (max-width: 900px) { .ressources-themes-grille { grid-template-columns: 1fr 1fr; } }


/* ============================================================
   DIRECTION ARTISTIQUE V2 — "Le vivant dans les interstices"
   Implémentation : 2 juin 2026
   ============================================================ */


/* ─────────────────────────────────────────────────────────
   SYSTÈME DE BADGES ÉDITORIAUX
   8 types d'objets éditoriaux avec identité visuelle propre
   ───────────────────────────────────────────────────────── */

.objet-editorial-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 2px;
  line-height: 1;
  white-space: nowrap;
}

.objet-editorial-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Contenu pilier — bleu nuit / vert vif ── */
.badge--pilier {
  background-color: rgba(16,72,98,0.08);
  color: var(--bleu-nuit);
  border: 1px solid rgba(16,72,98,0.18);
}
.badge--pilier::before { background-color: var(--vert-vif); opacity: 1; }

/* ── Récit de terrain — ocre ── */
.badge--recit {
  background-color: var(--ocre-pale);
  color: var(--ocre);
  border: 1px solid rgba(200,144,106,0.3);
}

/* ── Carnet pédagogique — argile ── */
.badge--carnet {
  background-color: rgba(142,122,106,0.1);
  color: var(--argile);
  border: 1px solid rgba(142,122,106,0.25);
}

/* ── Expérimentation — vert vif ── */
.badge--experimentation {
  background-color: rgba(148,193,31,0.1);
  color: #5a7a0a;
  border: 1px solid rgba(148,193,31,0.35);
}

/* ── Voix du réseau — vert forêt ── */
.badge--voix {
  background-color: rgba(47,125,93,0.1);
  color: var(--vert-foret);
  border: 1px solid rgba(47,125,93,0.25);
}

/* ── Événement — bleu vert ── */
.badge--evenement {
  background-color: rgba(30,106,126,0.1);
  color: var(--teal);
  border: 1px solid rgba(30,106,126,0.25);
}

/* ── Ressource / Outil — aqua ── */
.badge--ressource {
  background-color: var(--aqua-pale);
  color: #2a6e7f;
  border: 1px solid rgba(94,168,188,0.35);
}

/* ── Formation ── */
.badge--formation {
  background-color: rgba(29,29,27,0.06);
  color: var(--anthracite);
  border: 1px solid rgba(29,29,27,0.12);
}

/* ── Academia ── */
.badge--academia {
  background-color: var(--aqua-pale);
  color: var(--teal);
  border: 1px solid var(--aqua);
}


/* ─────────────────────────────────────────────────────────
   QUESTION FONDATRICE
   Composant d'en-tête pour les pages "Comprendre"
   Remplace le simple H1 par un dispositif éditorial
   ───────────────────────────────────────────────────────── */

.question-fondatrice-header {
  padding: clamp(3.5rem, 7vw, 6rem) 0 0;
  background-color: var(--bleu-nuit);
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--vert-vif);
}

.question-fondatrice-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 40px,
      rgba(148,193,31,0.035) 40px,
      rgba(148,193,31,0.035) 41px
    );
  z-index: 0;
}

.question-fondatrice-header::after {
  content: '';
  display: block;
  height: clamp(3rem, 5vw, 4.5rem);
  background: var(--blanc);
  border-radius: 50% 50% 0 0 / clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem) 0 0;
  transform: scaleX(1.06);
}

.question-fondatrice-header .container {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.question-fondatrice-surtitres {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.question-fondatrice-retour {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(247,245,240,0.45);
  transition: color var(--transition);
}
.question-fondatrice-retour:hover { color: rgba(247,245,240,0.85); }
.question-fondatrice-retour::before { content: "← "; }

.question-fondatrice-sep {
  color: rgba(247,245,240,0.2);
  font-size: 0.7rem;
}

.question-fondatrice-type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(148,193,31,0.35);
  border-radius: 2px;
}

/* Le grand point d'interrogation décoratif */
.question-fondatrice-marque {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: rgba(148,193,31,0.18);
  font-weight: 400;
  font-style: italic;
  position: absolute;
  right: clamp(2rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.question-fondatrice-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  line-height: 1.18;
  color: var(--blanc);
  max-width: 760px;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.question-fondatrice-chapeau {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.75;
  color: rgba(247,245,240,0.72);
  max-width: 640px;
  font-weight: 300;
  font-style: italic;
  font-family: var(--font-serif);
}


/* ─────────────────────────────────────────────────────────
   VOIX DU RÉSEAU
   Composant citation avec identité de la personne
   Utilisé dans piliers, récits, academia
   ───────────────────────────────────────────────────────── */

.voix-reseau-bloc {
  background-color: var(--sable);
  border-left: 3px solid var(--vert-foret);
  padding: 2rem 2rem 2rem 2.25rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
}

.voix-reseau-type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-foret);
  margin-bottom: 1rem;
}

.voix-reseau-citation {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--bleu-nuit);
  font-style: italic;
  margin-bottom: 1.25rem;
}

.voix-reseau-citation::before { content: '\201C'; }
.voix-reseau-citation::after  { content: '\201D'; }

.voix-reseau-identite {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.voix-reseau-photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--gris-clair);
  flex-shrink: 0;
  overflow: hidden;
}

.voix-reseau-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voix-reseau-nom {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--anthracite);
}

.voix-reseau-contexte {
  font-size: 0.75rem;
  color: var(--gris);
  font-weight: 300;
}

/* Variante foncée — sur fond bleu-nuit */
.voix-reseau-bloc--sombre {
  background-color: rgba(255,255,255,0.06);
  border-left-color: var(--vert-vif);
}
.voix-reseau-bloc--sombre .voix-reseau-type { color: var(--vert-vif); }
.voix-reseau-bloc--sombre .voix-reseau-citation { color: var(--blanc); }
.voix-reseau-bloc--sombre .voix-reseau-nom { color: var(--blanc); }
.voix-reseau-bloc--sombre .voix-reseau-contexte { color: rgba(247,245,240,0.55); }


/* ─────────────────────────────────────────────────────────
   FRAGMENT RÉEL
   Petite carte documentaire — note de terrain, fait, chiffre
   Inspiré des carnets de travail IEC
   ───────────────────────────────────────────────────────── */

.fragments-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.fragment-reel {
  background-color: var(--blanc-pur);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  /* Légère ombre douce — profondeur documentaire */
  box-shadow: 0 1px 3px rgba(16,72,98,0.06), 0 4px 12px rgba(16,72,98,0.04);
  transition: box-shadow var(--transition-lente), transform var(--transition-lente);
}

.fragment-reel:hover {
  box-shadow: 0 2px 8px rgba(16,72,98,0.1), 0 8px 24px rgba(16,72,98,0.06);
  transform: translateY(-2px);
}

/* Bande couleur en haut — type du fragment */
.fragment-reel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--vert-vif);
  border-radius: var(--rayon) var(--rayon) 0 0;
}

.fragment-reel--ocre::before { background-color: var(--ocre); }
.fragment-reel--aqua::before { background-color: var(--aqua); }
.fragment-reel--foret::before { background-color: var(--vert-foret); }
.fragment-reel--argile::before { background-color: var(--argile); }

.fragment-type {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.fragment-reel--ocre .fragment-type { color: var(--ocre); }
.fragment-reel--aqua .fragment-type { color: var(--aqua); }
.fragment-reel--foret .fragment-type { color: var(--vert-foret); }

.fragment-contenu {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bleu-nuit);
  font-weight: 400;
}

.fragment-source {
  font-size: 0.68rem;
  color: var(--gris);
  font-weight: 300;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gris-tres-clair);
}


/* ─────────────────────────────────────────────────────────
   LIGNE VIVANTE
   Séparateur organique entre grandes sections
   Remplace les <hr> brutaux
   ───────────────────────────────────────────────────────── */

.ligne-vivante {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: clamp(3rem, 6vw, 5rem) 0;
  color: var(--gris-clair);
}

.ligne-vivante::before,
.ligne-vivante::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gris-clair), transparent);
}

.ligne-vivante-motif {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--gris-clair);
  text-transform: uppercase;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────
   SECTION TINTÉE — COMPRENDRE
   Fonds légèrement tintés pour les sections alternées piliers
   Plus vivants que le gris neutre actuel
   ───────────────────────────────────────────────────────── */

.section-tinte--vert {
  background-color: #F1F7EA; /* vert pâle très doux */
}

.section-tinte--ocre {
  background-color: var(--ocre-pale);
}

.section-tinte--aqua {
  background-color: var(--aqua-pale);
}

.section-tinte--sable {
  background-color: var(--sable);
}


/* ─────────────────────────────────────────────────────────
   TRAJECTOIRE V2
   Carte persona enrichie — plus caractérisée, moins générique
   ───────────────────────────────────────────────────────── */

.trajectoires-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background-color: var(--gris-clair);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.trajectoire-v2 {
  background-color: var(--blanc);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  transition: background-color var(--transition), transform var(--transition);
  position: relative;
}

.trajectoire-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: background-color var(--transition);
}

.trajectoire-v2:hover {
  background-color: var(--sable);
}

.trajectoire-v2:hover::before {
  background-color: var(--vert-vif);
}

.trajectoire-v2-icone {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.trajectoire-v2-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.trajectoire-v2-titre {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.35;
}

.trajectoire-v2-texte {
  font-size: 0.8rem;
  color: var(--gris);
  line-height: 1.55;
  flex: 1;
}

.trajectoire-v2-cta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--vert-foret);
  margin-top: 0.5rem;
}

.trajectoire-v2:hover .trajectoire-v2-cta {
  color: var(--bleu-nuit);
}

@media (max-width: 640px) {
  .trajectoires-v2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .trajectoires-v2 { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────
   CARNET CARD
   Carte pour les objets de type carnet pédagogique
   ───────────────────────────────────────────────────────── */

.carnets-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.carnet-card {
  display: flex;
  flex-direction: column;
  background-color: var(--blanc-pur);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--transition-lente), transform var(--transition-lente);
}

.carnet-card:hover {
  box-shadow: 0 4px 16px rgba(16,72,98,0.1);
  transform: translateY(-2px);
}

.carnet-card-couverture {
  height: 140px;
  background-color: var(--sable);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Motif de fond sur la couverture — lignes horizontales légères */
.carnet-card-couverture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 20px,
    rgba(16,72,98,0.04) 20px,
    rgba(16,72,98,0.04) 21px
  );
}

.carnet-card-couverture-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--argile);
  position: relative;
  z-index: 1;
}

.carnet-card-corps {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.carnet-card-titre {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--bleu-nuit);
  line-height: 1.4;
}

.carnet-card-desc {
  font-size: 0.78rem;
  color: var(--gris);
  line-height: 1.55;
  flex: 1;
}

.carnet-card-meta {
  font-size: 0.65rem;
  color: var(--gris-clair);
  margin-top: 0.75rem;
}

.carnet-card-lien {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ocre);
  padding-top: 0.75rem;
  border-top: 1px solid var(--gris-tres-clair);
  margin-top: 0.5rem;
}


/* ─────────────────────────────────────────────────────────
   REFINEMENTS TYPOGRAPHIQUES GLOBAUX
   ───────────────────────────────────────────────────────── */

/* Chapeau de page — corps légèrement plus lisible */
.pilier-chapeau,
.formation-header-chapeau {
  letter-spacing: 0.005em;
}

/* Léger indent sur les listes — respiration */
.pilier-liste li {
  padding-left: 0.25rem;
}

/* H2 dans le corps — marque de ponctuation décorative */
.pilier-h2 {
  position: relative;
}

/* Espace supérieur plus aéré autour des H2 */
.pilier-corps .pilier-h2 {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 1.25rem;
}

/* Block concept — DA V2 : suppression de la surcharge qui écrasait le fond bleu */
/* La règle principale .pilier-concept est à la ligne ~3174 */

/* Bloc encart — légère touche organique */
.formation-encart {
  border-radius: 0 var(--rayon) var(--rayon) 0;
  border-left: 3px solid var(--bleu-nuit);
}


/* ─────────────────────────────────────────────────────────
   REBONDS — RAFFINEMENTS
   Plus de profondeur, identité éditoriale par type
   ───────────────────────────────────────────────────────── */

.rebond-item {
  border-radius: var(--rayon);
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
}

.rebond-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16,72,98,0.08);
}

/* Indicateur de type en barre supérieure */
.rebond-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--vert-vif);
  border-radius: var(--rayon) var(--rayon) 0 0;
  opacity: 0;
  transition: opacity var(--transition);
}

.rebond-item:hover::before {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────
   SECTION COMPRENDRE — HEADER ORGANIQUE SPÉCIFIQUE
   ───────────────────────────────────────────────────────── */

/* Les pages comprendre gardent leur formation-header mais avec
   le modificateur --comprendre déjà défini */

/* Overrides spécifiques quand formation-header est suivi d'un
   fond gris-tres-clair ou sable — la vague adopte cette couleur */
.formation-header--sable-suivant::after {
  background: var(--sable);
}

.formation-header--gris-suivant::after {
  background: var(--gris-tres-clair);
}


/* ─────────────────────────────────────────────────────────
   ACADEMIA — UNIVERS VISUEL PROPRE
   ───────────────────────────────────────────────────────── */

/* Le header Academia a déjà .formation-header--academia (gradient différent) */
/* Ajout : les sections principales Academia utilisent un fond aqua pâle */

.academia-entrees {
  background-color: var(--aqua-pale);
}

/* Carte Academia — raffinement */
.academia-entree--alumni,
.academia-entree--nouveau {
  border-radius: var(--rayon);
  transition: box-shadow var(--transition-lente), transform var(--transition-lente);
}

.academia-entree--alumni:hover,
.academia-entree--nouveau:hover {
  box-shadow: 0 4px 20px rgba(16,72,98,0.12);
  transform: translateY(-3px);
}


/* ─────────────────────────────────────────────────────────
   HOMEPAGE — AMÉLIORATION ACTEURS EN MOUVEMENT
   ───────────────────────────────────────────────────────── */

.mouvement {
  background-color: var(--sable);
}

.mouvement-carte {
  border-radius: var(--rayon);
  border-bottom: 3px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.mouvement-carte:hover {
  border-bottom-color: var(--vert-foret);
  box-shadow: 0 4px 16px rgba(16,72,98,0.09);
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────────────
   NAV — LÉGÈRE TEXTURE
   ───────────────────────────────────────────────────────── */

.site-header {
  /* Fond légèrement plus chaud que blanc pur */
  background-color: var(--blanc);
  /* Ombre plus organique */
  box-shadow: 0 1px 0 var(--gris-clair), 0 2px 8px rgba(16,72,98,0.04);
  border-bottom: none;
}


/* ─────────────────────────────────────────────────────────
   FOOTER — AMÉLIORATIONS
   ───────────────────────────────────────────────────────── */

/* Le footer garde son fond bleu-nuit mais avec un trait de vie en haut */
.site-footer {
  border-top: 3px solid var(--vert-foret);
}


/* ─────────────────────────────────────────────────────────
   ACCESSIBILITÉ & MICRO-INTERACTIONS
   ───────────────────────────────────────────────────────── */

/* Focus visible — plus organique */
:focus-visible {
  outline: 2px solid var(--vert-vif);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scroll comportement doux déjà sur html, assurer */
html { scroll-behavior: smooth; }

/* Transition d'apparition subtile sur les sections au scroll
   (natif, sans JS — uniquement via la propriété animation-timeline
   si le navigateur la supporte) */
@supports (animation-timeline: scroll()) {
  .pilier-section {
    animation: fadein-subtle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  @keyframes fadein-subtle {
    from { opacity: 0.7; transform: translateY(8px); }
    to   { opacity: 1;   transform: translateY(0); }
  }
}


/* ─────────────────────────────────────────────────────────
   RESPONSIVE — AJUSTEMENTS DA V2
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Vague réduite sur mobile */
  .formation-header::after,
  .question-fondatrice-header::after {
    height: 2rem;
  }

  /* Fragment grid en 1 colonne */
  .fragments-grille {
    grid-template-columns: 1fr;
  }

  /* Trajectorires V2 en 1 col sur très petit */
  .trajectoires-v2 {
    grid-template-columns: 1fr 1fr;
  }

  /* Carnet grid — 1 col */
  .carnets-grille {
    grid-template-columns: 1fr;
  }

  /* Voix réseau — légèrement moins de padding */
  .voix-reseau-bloc {
    padding: 1.5rem;
  }

  /* Mark décoratif question fondatrice — caché sur mobile */
  .question-fondatrice-marque {
    display: none;
  }
}

@media (max-width: 480px) {
  .trajectoires-v2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) { .ressources-themes-grille { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────
   IEC-ACTIONS — Former / Accompagner / Relier V2
   Trois colonnes texte pur, sans cartes ni démos
   ───────────────────────────────────────────────────── */

.iec-actions {
  background-color: var(--blanc);
  padding: clamp(5rem, 9vw, 8rem) 0;
  border-top: 1px solid var(--gris-clair);
}

.iec-actions-eyebrow {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

.iec-actions-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--gris-clair);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.iec-action-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.iec-action-verbe {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.1;
  color: var(--anthracite);
  letter-spacing: -0.01em;
}

.iec-action-texte {
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: var(--gris);
  font-weight: 300;
  flex: 1;
}

.iec-action-lien {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--anthracite);
  border-bottom: 1px solid var(--gris-clair);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
  width: fit-content;
  margin-top: 0.5rem;
}

.iec-action-lien:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .iec-actions-grille {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ─── Accent éditorial — eyebrow Comprendre index ─── */
.comprendre-item-type {
  /* V2 : petites caps terracotta, sans badge */
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0.3rem;
  width: auto;
}


/* ═══════════════════════════════════════════════════════════
   PRODUIT V2 — Layout deux colonnes avec items numérotés
   Structure : gauche (titre+photo) / droite (01—TYPE + nom)
   ══════════════════════════════════════════════════════════ */

.produit-v2 {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background-color: var(--blanc);
}

.produit-v2-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

/* ── Colonne gauche ── */
.produit-v2-gauche {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.produit-v2-eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vert-foret);
}

.produit-v2-titre {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--anthracite);
}

.produit-v2-intro {
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.75;
  color: var(--gris);
  font-weight: 300;
  max-width: 400px;
}

.produit-v2-photo {
  margin-top: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.produit-v2-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Colonne droite — items ── */
.produit-v2-droite {
  border-top: 1px solid var(--gris-clair);
}

.produit-v2-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--gris-clair);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.produit-v2-item:hover .produit-v2-item-nom {
  color: var(--vert-foret);
}

/* Numéro + type */
.produit-v2-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.3rem;
}

.produit-v2-item-num {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--gris);
  letter-spacing: 0.04em;
}

.produit-v2-item-type {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vert-foret);
  line-height: 1.4;
}

/* Corps de l'item */
.produit-v2-item-corps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.produit-v2-item-nom {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--anthracite);
  transition: color 0.15s ease;
}

.produit-v2-item-question {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gris);
  font-weight: 300;
}

.produit-v2-item-lien {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--vert-foret);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
  margin-top: 0.25rem;
}

.produit-v2-item:hover .produit-v2-item-lien {
  text-decoration-color: var(--vert-foret);
}

/* ── Variante sombre — Accompagner ── */
.produit-v2--accompagner {
  background-color: var(--bleu-nuit);
}

.produit-v2--accompagner .produit-v2-eyebrow {
  color: var(--vert-vif);
}

.produit-v2--accompagner .produit-v2-titre {
  color: var(--blanc);
}

.produit-v2--accompagner .produit-v2-intro {
  color: rgba(247,245,240,0.65);
}

.produit-v2--accompagner .produit-v2-droite {
  border-top-color: rgba(255,255,255,0.12);
}

.produit-v2--accompagner .produit-v2-item {
  border-bottom-color: rgba(255,255,255,0.12);
}

.produit-v2--accompagner .produit-v2-item-num {
  color: rgba(247,245,240,0.35);
}

.produit-v2--accompagner .produit-v2-item-type {
  color: var(--vert-vif);
}

.produit-v2--accompagner .produit-v2-item-nom {
  color: var(--blanc);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.produit-v2--accompagner .produit-v2-item:hover .produit-v2-item-nom {
  color: var(--vert-vif);
}

.produit-v2--accompagner .produit-v2-item-question {
  color: rgba(247,245,240,0.55);
}

.produit-v2--accompagner .produit-v2-item-lien {
  color: var(--vert-vif);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .produit-v2-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .produit-v2-gauche {
    position: static;
  }
  .produit-v2-item {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .produit-v2-item-meta {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   TEST MINIMAL — Homepage uniquement
   Appliquer via classe .page-home sur <body>
   À supprimer ou propager après validation
   ══════════════════════════════════════════════════════════ */

/* ── 1. Fond body : supprimer la texture pointillée ── */
.page-home body,
body.page-home {
  background-image: none;
}

/* ── 2. Hero : angles francs, pas de gradient overlay ── */
body.page-home .hero-image-col {
  border-radius: 0;
  margin: 0;
}

body.page-home .hero-image-col::before {
  display: none;
}

/* ── 3. Stat overlay : 1px border au lieu de shadow ── */
body.page-home .hero-stat-overlay {
  box-shadow: none;
  border: 1px solid var(--gris-clair);
  border-radius: 0;
}

/* ── 4. Supprimer le ken burns ── */
body.page-home .hero-image-col img {
  animation: none;
}

/* ── 5. Questions piliers : bord supérieur ligne fine ── */
body.page-home .questions-piliers {
  border-top: 1px solid var(--anthracite);
}

/* ── 6. Rebonds : supprimer shadows et translateY ── */
body.page-home .rebond-item {
  box-shadow: none !important;
  transform: none !important;
}
body.page-home .rebond-item:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--anthracite);
}

/* ── 7. Former/Accompagner/Relier : photo sans arrondi ── */
body.page-home .produit-v2-photo {
  border-radius: 0;
}

/* ── 8. Items produit V2 : hover sans translateY ── */
body.page-home .produit-v2-item:hover {
  background-color: transparent;
}

/* ── 9. Trajectoires V2 : hover sans translateY ── */
body.page-home .trajectoire-v2:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gris-clair);
}

/* ── 10. Mouvement cartes : supprimer hover translateY ── */
body.page-home .mouvement-carte:hover {
  transform: none;
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════
   MARKDOWN BODY — Éléments natifs dans .pilier-corps
   Applique les styles IEC aux h2/h3/ul/li/blockquote générés
   par le rendu markdown (layouts pilier + formation_longue)
   ══════════════════════════════════════════════════════════ */

/* H2 markdown → même style que .pilier-h2 */
.pilier-corps h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bleu-nuit);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 1.25rem;
}

/* H3 markdown → même style que .pilier-impl-titre */
.pilier-corps h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--anthracite);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* UL markdown → même style que .pilier-liste */
.pilier-corps ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.pilier-corps ul li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--anthracite);
  padding-left: 1.25rem;
  position: relative;
}

.pilier-corps ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--vert-vif);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Blockquote markdown → même style que .pilier-citation */
.pilier-corps blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--bleu-nuit);
  border-left: 3px solid var(--vert-vif);
  padding-left: 1.5rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.pilier-corps blockquote p {
  margin: 0;
  color: var(--bleu-nuit);
}

/* Strong markdown dans le corps */
.pilier-corps strong {
  font-weight: 600;
  color: var(--anthracite);
}

/* ─── Formation encarts depuis frontmatter ─── */
/* Rendus par le layout formation_longue.njk */
.formation-encart--md {
  background-color: var(--gris-tres-clair);
  border-left: 3px solid var(--bleu-nuit);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: 1.5rem 0;
}

.formation-encart--md-titre {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bleu-nuit);
  margin-bottom: 0.75rem;
}

.formation-encart--md p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gris);
  margin-bottom: 0.5rem;
}

.formation-encart--md p:last-child { margin-bottom: 0; }