/* ============================================
   HOME.CSS — Page d'accueil v2 (thème clair)
   ============================================ */

/* ---------- Hero ---------- */
main {
  --home-surface: #F8F7F3;
  background: var(--home-surface);
}

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(74px + var(--space-xl)) 0 calc(var(--space-2xl) + 7.25rem);
  overflow: hidden;
}

/* ---------- Raccords organiques entre les sections ---------- */
.flow-wave {
  --flow-color: var(--home-surface);
  --flow-rgb: 248, 247, 243;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: -2px;
  height: clamp(82px, 9vw, 126px);
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
}

.flow-wave::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--flow-rgb), 0) 0%,
    rgba(var(--flow-rgb), 0.10) 36%,
    rgba(var(--flow-rgb), 0.55) 70%,
    rgba(var(--flow-rgb), 0.92) 90%,
    var(--flow-color) 100%);
}

.flow-wave svg {
  position: absolute;
  inset: 0 auto 0 -6%;
  width: 112%;
  height: 100%;
  z-index: 1;
  filter: none;
  transform-origin: 50% 100%;
  will-change: transform;
}

.flow-wave__main { fill: var(--flow-color); opacity: 1; }
.flow-wave__glow,
.flow-wave__accent {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.flow-wave__glow {
  stroke: var(--color-bleu);
  stroke-width: 34;
}
.flow-wave__accent {
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1.25;
}
.flow-wave--deep .flow-wave__glow { stroke: var(--color-bleu); }
.flow-wave--deep .flow-wave__accent { stroke: rgba(255, 255, 255, 0.20); }
.flow-wave--navy {
  --flow-color: var(--home-surface);
  --flow-rgb: 248, 247, 243;
  color: var(--flow-color);
}
.flow-wave--deep {
  --flow-color: var(--color-fond-bleu-fonce);
  --flow-rgb: 31, 47, 99;
  color: var(--flow-color);
}
.flow-wave--white {
  --flow-color: var(--home-surface);
  --flow-rgb: 248, 247, 243;
  color: var(--flow-color);
}
.flow-wave--soft {
  --flow-color: var(--home-surface);
  --flow-rgb: 248, 247, 243;
  color: var(--flow-color);
}
.flow-wave--warm {
  --flow-color: var(--home-surface);
  --flow-rgb: 248, 247, 243;
  color: var(--flow-color);
}
.flow-wave--blend {
  --flow-color: var(--home-surface);
  --flow-rgb: 248, 247, 243;
  color: var(--flow-color);
}
.flow-wave--blend .flow-wave__glow {
  stroke: rgba(31, 47, 99, 0.10);
  stroke-width: 22;
}
.flow-wave--blend .flow-wave__accent {
  stroke: rgba(200, 145, 47, 0.42);
}
.flow-wave--reverse { transform: scaleX(-1); }

.flow-ribbon {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: -2px;
  height: clamp(118px, 11vw, 168px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

.flow-ribbon svg {
  position: absolute;
  inset: 0 auto 0 -6%;
  width: 112%;
  height: 100%;
  filter: drop-shadow(0 8px 16px rgba(31, 47, 99, 0.12));
}

.flow-ribbon__main { fill: var(--color-bleu); }
.flow-ribbon__edge,
.flow-ribbon__accent {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.flow-ribbon__edge { stroke: rgba(21, 35, 77, 0.82); stroke-width: 2; }
.flow-ribbon__edge--bottom { stroke: rgba(21, 35, 77, 0.66); }
.flow-ribbon__accent { stroke: rgba(255, 255, 255, 0.24); stroke-width: 1.6; }
.flow-ribbon--reverse { transform: scaleX(-1); }

.valeurs,
.parcours,
.home-accompagnement,
.home-steps,
.home-resources,
.home-cta {
  position: relative;
  overflow: hidden;
}

.valeurs,
.parcours,
.home-accompagnement,
.home-steps,
.home-resources {
  padding-bottom: calc(var(--space-2xl) * 1.2 + 4.5rem);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(rgba(31, 47, 99, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 47, 99, 0.045) 1px, transparent 1px);
  background-size: 110px 110px;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, rgba(0, 0, 0, 0.75) 45%, transparent 78%);
  opacity: 0.7;
  z-index: 0;
}

.hero::after {
  background:
    radial-gradient(circle at 20% 28%, rgba(233, 181, 77, 0.22) 0 2px, transparent 2.5px),
    radial-gradient(circle at 74% 24%, rgba(31, 47, 99, 0.15) 0 1.5px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(233, 181, 77, 0.16) 0 2px, transparent 2.5px);
  background-size: 220px 220px, 180px 180px, 240px 240px;
  opacity: 0.55;
  z-index: 0;
}

.hero__fond {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% -10%, rgba(233, 181, 77, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 88% 20%, rgba(31, 47, 99, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 8% 30%, rgba(233, 181, 77, 0.10) 0%, transparent 55%),
    var(--home-surface);
  pointer-events: none;
}

.hero__fond::before,
.hero__fond::after {
  content: '';
  position: absolute;
  inset: auto;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.hero__fond::before {
  width: min(44vw, 540px);
  height: min(44vw, 540px);
  top: 10%;
  left: -8%;
  background: radial-gradient(circle, rgba(233, 181, 77, 0.20) 0%, rgba(233, 181, 77, 0) 68%);
}

.hero__fond::after {
  width: min(36vw, 420px);
  height: min(36vw, 420px);
  right: -4%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(31, 47, 99, 0.12) 0%, rgba(31, 47, 99, 0) 70%);
}

.hero__fond .hero__mesh {
  position: absolute;
  inset: -10%;
}

.hero .conteneur { position: relative; z-index: 1; }

.hero__spotlight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 35%), rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 35%), rgba(233, 181, 77, 0.16) 0%, rgba(233, 181, 77, 0) 44%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.hero__spotlight::before {
  content: '';
  position: absolute;
  inset: 12% 10% auto;
  height: 58%;
  background:
    radial-gradient(circle at 30% 36%, rgba(233, 181, 77, 0.2), transparent 32%),
    radial-gradient(circle at 68% 32%, rgba(61, 85, 168, 0.16), transparent 34%),
    radial-gradient(circle at 50% 70%, rgba(200, 128, 47, 0.12), transparent 38%);
  filter: blur(34px);
  opacity: 0.95;
}

.hero__lignes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__lignes span {
  position: absolute;
  top: 8%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 145, 47, 0.28), transparent);
  opacity: 0.55;
}

.hero__lignes span:nth-child(1) { left: 16%; }
.hero__lignes span:nth-child(2) { left: 50%; }
.hero__lignes span:nth-child(3) { right: 18%; }

.hero__orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(200, 145, 47, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.hero__orbit--one {
  width: min(84vw, 980px);
  height: min(84vw, 980px);
  left: 50%;
  top: -26%;
  transform: translateX(-50%);
}

.hero__orbit--two {
  width: min(54vw, 620px);
  height: min(54vw, 620px);
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
}

.hero__forme {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__forme--anneau {
  width: 190px;
  height: 190px;
  border: 1.5px solid var(--color-bordure-or);
  top: 18%;
  left: 6%;
}
.hero__forme--point {
  width: 14px;
  height: 14px;
  background: var(--color-or-clair);
  top: 30%;
  right: 12%;
  box-shadow: 0 0 24px rgba(233, 181, 77, 0.8);
}
.hero__forme--anneau-bleu {
  width: 90px;
  height: 90px;
  border: 1.5px solid var(--color-bleu-pale);
  bottom: 20%;
  right: 7%;
}
@media (max-width: 767px) {
  .hero__forme { display: none; }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.2rem;
  border: 1px solid var(--color-bordure-or);
  border-radius: 100px;
  background: rgba(233, 181, 77, 0.1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-or-sombre);
  margin-bottom: var(--space-md);
}
.hero__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-or);
  box-shadow: 0 0 10px rgba(200, 145, 47, 0.9);
}

.hero h1 {
  max-width: 850px;
  margin: 0 auto var(--space-md);
}

.hero__sous-titre {
  max-width: 590px;
  margin: 0 auto var(--space-lg);
  font-size: var(--text-lg);
  color: var(--color-texte-doux);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
@media (min-width: 600px) {
  .hero__actions { flex-direction: row; }
}

.hero__scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 980px;
  margin: 0 auto var(--space-xl);
  perspective: 1400px;
}

@media (min-width: 900px) {
  .hero__scene {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }
}

.hero__scene-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --offset-y: 0px;
  position: relative;
  overflow: hidden;
  padding: 1.2rem 1.25rem;
  border-radius: 22px;
  border: 1px solid rgba(200, 145, 47, 0.18);
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FCFCFA 100%);
  box-shadow: 0 20px 60px rgba(31, 47, 99, 0.10);
  text-align: left;
  transform:
    perspective(1400px)
    translateY(calc(var(--offset-y) + var(--lift)))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateZ(0);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  transform-style: preserve-3d;
  animation: hero-carte-flotte 4.8s ease-in-out infinite;
}

.hero__scene-card:nth-child(2) { animation-delay: -1.7s; animation-duration: 5.3s; }
.hero__scene-card:nth-child(3) { animation-delay: -3.1s; animation-duration: 4.5s; }

@keyframes hero-carte-flotte {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.hero__scene-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.72) 30%, transparent 54%);
  transform: translateX(-135%);
}

.hero__scene-card--left { --offset-y: 12px; }
.hero__scene-card--center {
  background:
    linear-gradient(160deg, var(--color-bleu) 0%, var(--color-bleu) 100%);
  border-color: rgba(233, 181, 77, 0.34);
  box-shadow: 0 30px 90px rgba(31, 47, 99, 0.16);
}
.hero__scene-card--center strong,
.hero__scene-card--center .hero__scene-kicker {
  color: var(--color-blanc);
}
.hero__scene-card--center .hero__scene-kicker {
  color: var(--color-or-clair);
}
.hero__scene-card--right { --offset-y: 18px; }

.hero__scene-kicker {
  display: block;
  margin-bottom: 0.55rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-or-sombre);
}

.hero__scene-card strong {
  display: block;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-bleu);
}

.hero__scene-card--center strong {
  color: var(--color-blanc);
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.12);
}

.js-tilt:hover {
  border-color: rgba(233, 181, 77, 0.45);
  box-shadow: 0 28px 80px rgba(31, 47, 99, 0.14);
  animation-play-state: paused;
}

.hero__chiffres-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-bordure);
  max-width: 760px;
  margin: 0 auto;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 120px;
}
.hero__stat-nombre {
  font-family: var(--font-titre);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-bleu);
}
.hero__stat-label {
  font-size: var(--text-xs);
  color: var(--color-texte-tres-doux);
  letter-spacing: 0.04em;
}

.hero__scroll {
  position: absolute;
  bottom: calc(clamp(118px, 11vw, 168px) + 1.25rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-texte-tres-doux);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}
.hero__scroll::after {
  content: '';
  width: 2px;
  height: 34px;
  background: linear-gradient(180deg, var(--color-or), transparent);
  animation: scroll-goutte 2.2s ease-in-out infinite;
}
@keyframes scroll-goutte {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Bandeau valeurs ---------- */
.valeurs {
  background: transparent;
  color: var(--color-texte);
  position: relative;
  overflow: hidden;
}
.valeurs.section--grande {
  padding-top: clamp(2.75rem, 4.5vw, 4.25rem);
}
.valeurs .en-tete-section {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.valeurs::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 8% 62%, rgba(61, 85, 168, 0.07) 0%, transparent 66%),
    radial-gradient(ellipse 55% 80% at 85% 48%, rgba(233, 181, 77, 0.09) 0%, transparent 64%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
}
.valeurs::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(31, 47, 99, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 47, 99, 0.025) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 18%, transparent 100%);
  pointer-events: none;
}
.valeurs .conteneur { position: relative; z-index: 1; }
.valeurs h2 { color: var(--color-bleu); }
.valeurs .surtitre { color: var(--color-or-sombre); }
.valeurs__slogan {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: rgba(31, 47, 99, 0.14);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.scroll-highlight__letter {
  color: rgba(31, 47, 99, 0.13);
  text-shadow: 0 0 0 rgba(200, 145, 47, 0);
  transition: color 120ms linear, text-shadow 160ms ease, opacity 120ms linear;
}

.scroll-highlight__letter.is-lit {
  color: var(--color-or-sombre);
  text-shadow: 0 0 16px rgba(233, 181, 77, 0.32);
}
.valeurs__texte {
  text-align: center;
  color: var(--color-texte-doux);
  max-width: 640px;
  margin: var(--space-md) auto 0;
}

/* ---------- Parcours (4 formations) ---------- */
.parcours { position: relative; }
.parcours {
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(31, 47, 99, 0.025) 0%, rgba(248, 247, 243, 0) 16%),
    transparent;
}

.parcours.section--grande { padding-top: clamp(2.75rem, 5vw, 4.75rem); }
.parcours.aurore::before {
  inset: -4rem -10% auto;
  height: 25rem;
  background:
    radial-gradient(ellipse 55% 54% at 48% 0%, rgba(233, 181, 77, 0.13) 0%, transparent 68%),
    radial-gradient(ellipse 36% 44% at 82% 6%, rgba(61, 85, 168, 0.055) 0%, transparent 66%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.75) 52%, transparent 100%);
}
.parcours::after {
  content: '';
  position: absolute;
  inset: auto 8% -16% 8%;
  height: 34%;
  background:
    radial-gradient(ellipse at center, rgba(233, 181, 77, 0.14), transparent 66%);
  filter: none;
  pointer-events: none;
  z-index: 0;
}
.formation-showcase {
  position: relative;
  z-index: 1;
}

.formation-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgba(31, 47, 99, 0.16);
}

.formation-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 78px;
  padding: 0.9rem 2.2rem 0.9rem 0;
  border: 0;
  background: transparent;
  color: var(--color-bleu);
  text-align: left;
  opacity: 0.64;
  transition: color 220ms ease, opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.formation-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 1.4rem;
  bottom: -1px;
  height: 3px;
  background: var(--color-or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.formation-tab:hover { opacity: 0.86; }

.formation-tab.is-active {
  color: var(--color-bleu);
  opacity: 1;
}

.formation-tab.is-active::after { transform: scaleX(1); }

.formation-tab:focus-visible {
  outline: 3px solid rgba(233, 181, 77, 0.55);
  outline-offset: -3px;
}

.formation-tab__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(31, 47, 99, 0.20);
  border-radius: 50%;
  background: transparent;
  color: var(--color-bleu);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.formation-tab__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formation-tab.is-active .formation-tab__icon {
  border-color: var(--color-bleu);
  background: var(--color-bleu);
  color: var(--color-or-clair);
}

.formation-tab__text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.formation-tab__text strong {
  font-family: var(--font-titre);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
}

.formation-tab__text small {
  color: var(--color-texte-tres-doux);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.formation-tab.is-active .formation-tab__text small { color: var(--color-or-sombre); }

.formation-tab__index {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  font-family: var(--font-titre);
  font-size: 0.68rem;
  color: rgba(31, 47, 99, 0.28);
}

.formation-tab.is-active .formation-tab__index { color: var(--color-or-sombre); }

.formation-showcase__stage {
  position: relative;
  border: 1px solid rgba(31, 47, 99, 0.10);
  border-radius: 36px 12px 64px 12px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(31, 47, 99, 0.09);
  overflow: hidden;
}

.formation-panel {
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5.5rem);
  padding: clamp(1.8rem, 4.5vw, 4.25rem);
  background: #FFFFFF;
}

.formation-panel::before {
  content: 'ENSPE / FORMATION';
  position: absolute;
  top: 1.4rem;
  left: clamp(1.8rem, 4.5vw, 4.25rem);
  color: rgba(31, 47, 99, 0.28);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.18em;
}

.formation-panel[hidden] { display: none; }

.formation-panel.is-entering { animation: formation-panel-entree 360ms ease-out both; }

.formation-panel__contenu {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.formation-panel__badge {
  display: inline-flex;
  padding: 0 0 0.55rem;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-or);
  color: var(--color-or-sombre);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.formation-panel h3 {
  max-width: 640px;
  margin-bottom: var(--space-sm);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
}

.formation-panel__contenu > p {
  margin-bottom: var(--space-md);
  color: var(--color-texte-doux);
  font-size: var(--text-base);
}

.formation-panel__chapitres {
  width: 100%;
  margin: 0 0 var(--space-md);
  border-top: 1px solid rgba(31, 47, 99, 0.11);
}

.formation-panel__chapitres li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.4rem;
  padding: 0.58rem 0;
  border-bottom: 1px solid rgba(31, 47, 99, 0.11);
  color: var(--color-bleu);
  font-size: var(--text-xs);
  font-weight: 650;
}

.formation-panel__chapitres span {
  color: var(--color-or-sombre);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.formation-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin-bottom: var(--space-lg);
  color: var(--color-texte-tres-doux);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.formation-panel__meta span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--color-or);
  box-shadow: 0 0 10px rgba(233, 181, 77, 0.45);
}

.formation-scene {
  --scene-x: 0px;
  --scene-x-small: 0px;
  --scene-x-reverse: 0px;
  --scene-x-small-reverse: 0px;
  --scene-x-wide: 0px;
  --scene-x-wide-reverse: 0px;
  --scene-y: 0px;
  --scene-y-small: 0px;
  --scene-y-reverse: 0px;
  --scene-y-small-reverse: 0px;
  --scene-y-wide: 0px;
  --scene-y-wide-reverse: 0px;
  --scene-rotate: 0deg;
  --scene-rotate-small: 0deg;
  --scene-rotate-reverse: 0deg;
  --scene-orbit: 0deg;
  --scene-orbit-reverse: 0deg;
  --scene-dash: 0px;
  --scene-progress-percent: 50%;
  --scene-progress-reverse-percent: 0%;
  --scene-progress-value: 1;
  --scene-scale: 1;
  --scene-note-scale: 1;
  --scene-step-1: 1;
  --scene-step-2: 1;
  --scene-step-3: 1;
  --scene-step-4: 1;
  --scene-step-opacity-1: 1;
  --scene-step-opacity-2: 1;
  --scene-step-opacity-3: 1;
  --scene-step-opacity-4: 1;
  --scene-step-scale-1: 1;
  --scene-step-scale-2: 1;
  --scene-step-scale-3: 1;
  --scene-step-scale-4: 1;
  position: relative;
  align-self: stretch;
  min-height: 420px;
  overflow: hidden;
  border-radius: 12px 72px 12px 72px;
  background:
    radial-gradient(circle at 18% 18%, rgba(233, 181, 77, 0.22), transparent 26%),
    radial-gradient(circle at 82% 80%, rgba(233, 181, 77, 0.12), transparent 28%),
    var(--color-bleu);
  color: var(--color-blanc);
  isolation: isolate;
}

.formation-scene__caption {
  position: absolute;
  z-index: 4;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.35rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.formation-scene__caption strong { color: var(--color-or-clair); font-weight: 650; }

/* 01 · Le plan d'architecture */
.formation-scene--plan::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  background-position: var(--scene-x-wide) var(--scene-y-wide);
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
  will-change: background-position;
}

.scene-plan__header {
  position: absolute;
  z-index: 3;
  top: 1.4rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scene-plan__header strong { color: var(--color-or-clair); }
.scene-roadmap {
  position: absolute;
  z-index: 2;
  inset: 4.8rem 1.5rem 3.8rem;
}
.scene-roadmap::before,
.scene-roadmap__rail {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  border-radius: 99px;
}
.scene-roadmap::before { background: rgba(255, 255, 255, 0.15); }
.scene-roadmap__rail {
  background: linear-gradient(180deg, var(--color-or-clair), rgba(233, 181, 77, 0.38));
  scale: 1 var(--scene-progress-value);
  transform-origin: center top;
  box-shadow: 0 0 18px rgba(233, 181, 77, 0.36);
  will-change: scale;
}
.scene-roadmap__marker {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: var(--scene-progress-percent);
  width: 16px;
  height: 16px;
  translate: -50% -50%;
  border: 3px solid var(--color-bleu);
  border-radius: 50%;
  background: var(--color-or-clair);
  box-shadow: 0 0 0 5px rgba(233, 181, 77, 0.12), 0 0 22px rgba(233, 181, 77, 0.72);
  will-change: top;
}
.scene-roadmap__step {
  position: absolute;
  width: calc(50% - 2rem);
  min-height: 64px;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-content: center;
  column-gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 14px 34px rgba(8, 16, 43, 0.16);
  color: #fff;
  backdrop-filter: blur(7px);
  will-change: opacity, scale, translate;
}
.scene-roadmap__step::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
}
.scene-roadmap__step:nth-of-type(odd) { left: 0; translate: 0 var(--scene-y-small); }
.scene-roadmap__step:nth-of-type(odd)::after { right: -2rem; }
.scene-roadmap__step:nth-of-type(even) { right: 0; translate: 0 var(--scene-y-small-reverse); }
.scene-roadmap__step:nth-of-type(even)::after { left: -2rem; }
.scene-roadmap__step small {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--color-or-clair);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.scene-roadmap__step strong { font-family: var(--font-titre); font-size: 0.88rem; line-height: 1.15; }
.scene-roadmap__step span { color: rgba(255, 255, 255, 0.62); font-size: 0.6rem; line-height: 1.35; }
.scene-roadmap__step--1 { top: 0; opacity: var(--scene-step-opacity-1); scale: var(--scene-step-scale-1); }
.scene-roadmap__step--2 { top: 29%; opacity: var(--scene-step-opacity-2); scale: var(--scene-step-scale-2); }
.scene-roadmap__step--3 { top: 58%; opacity: var(--scene-step-opacity-3); scale: var(--scene-step-scale-3); }
.scene-roadmap__step--4 { bottom: 0; opacity: var(--scene-step-opacity-4); scale: var(--scene-step-scale-4); }
.scene-plan__canvas { position: absolute; inset: 18% 10% 18%; border: 1px solid rgba(255, 255, 255, 0.3); }
.scene-plan__canvas {
  translate: var(--scene-x-wide) var(--scene-y-wide-reverse);
  rotate: var(--scene-rotate-small);
  will-change: translate, rotate;
}
.scene-plan__canvas::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 5%;
  top: 22%;
  width: min(46%, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 40deg, transparent 0 60%, rgba(233, 181, 77, 0.28) 76%, transparent 92%);
  mask-image: radial-gradient(circle, transparent 0 43%, #000 44% 46%, transparent 47% 64%, #000 65% 66%, transparent 67%);
  rotate: var(--scene-orbit);
  scale: var(--scene-scale);
  filter: drop-shadow(0 0 14px rgba(233, 181, 77, 0.22));
  will-change: rotate, scale;
}
.scene-plan__canvas::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: -8%;
  bottom: -8%;
  left: var(--scene-progress-percent);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(233, 181, 77, 0.86) 25% 75%, transparent);
  box-shadow: 0 0 10px rgba(233, 181, 77, 0.62), 0 0 32px rgba(233, 181, 77, 0.28);
  opacity: 0.8;
  will-change: left;
}
.scene-plan__line { position: absolute; background: rgba(255, 255, 255, 0.28); }
.scene-plan__line--h1 { top: 38%; left: 0; width: 68%; height: 1px; }
.scene-plan__line--h2 { top: 70%; left: 28%; right: 0; height: 1px; }
.scene-plan__line--v1 { top: 0; bottom: 30%; left: 28%; width: 1px; }
.scene-plan__line--v2 { top: 38%; bottom: 0; left: 68%; width: 1px; }
.scene-plan__room { position: absolute; color: rgba(255,255,255,.72); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.scene-plan__room--vision { top: 13%; left: 6%; }
.scene-plan__room--cadre { top: 13%; left: 38%; }
.scene-plan__room--equipe { top: 51%; left: 8%; }
.scene-plan__room--budget { top: 78%; left: 76%; }
.scene-plan__route { position: absolute; left: 12%; top: 58%; width: 69%; height: 1px; background: var(--color-or-clair); transform: rotate(-20deg); transform-origin: left; }
.scene-plan__route {
  clip-path: inset(0 var(--scene-progress-reverse-percent) 0 0);
  box-shadow: 0 0 12px rgba(233, 181, 77, 0.58);
  will-change: clip-path, translate;
}
.scene-plan__point { position: absolute; z-index: 2; width: 11px; height: 11px; border: 2px solid var(--color-or-clair); border-radius: 50%; background: var(--color-bleu); }
.scene-plan__point--start { left: 10%; top: 56%; }
.scene-plan__point--end { right: 13%; top: 31%; background: var(--color-or-clair); }
.scene-plan__line--h1 { translate: var(--scene-x) var(--scene-y-small); }
.scene-plan__line--h2 { translate: var(--scene-x-reverse) var(--scene-y-small-reverse); }
.scene-plan__line--v1 { translate: var(--scene-x-small-reverse) var(--scene-y); }
.scene-plan__line--v2 { translate: var(--scene-x-small) var(--scene-y-reverse); }
.scene-plan__point--start { translate: var(--scene-x-reverse) var(--scene-y-small); }
.scene-plan__point--end { translate: var(--scene-x) var(--scene-y-small-reverse); }
.scene-plan__route { translate: var(--scene-x-small-reverse) var(--scene-y-small); }
.scene-plan__room {
  padding: 0.2rem 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.025);
}
.scene-plan__room--vision,
.scene-plan__room--budget { translate: var(--scene-x-wide-reverse) var(--scene-y-small); }
.scene-plan__room--cadre,
.scene-plan__room--equipe { translate: var(--scene-x-wide) var(--scene-y-small-reverse); }
.scene-plan__point { scale: var(--scene-scale); box-shadow: 0 0 0 5px rgba(233, 181, 77, 0.08), 0 0 18px rgba(233, 181, 77, 0.52); }

/* 02 · La boussole de direction */
.formation-panel--2 { grid-template-columns: minmax(420px, 1.08fr) minmax(0, 0.92fr); }
.formation-panel--2 .formation-panel__contenu { order: 2; }
.formation-panel--2 .formation-scene { order: 1; border-radius: 72px 12px 72px 12px; }
.formation-scene--boussole { background: radial-gradient(circle at center, rgba(233,181,77,.17), transparent 35%), var(--color-bleu); }
.scene-boussole__orbite,
.scene-boussole__axe,
.scene-boussole__coeur,
.scene-boussole__repere { position: absolute; }
.scene-boussole__orbite { left: 50%; top: 46%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transform: translate(-50%, -50%); }
.scene-boussole__orbite--outer { width: min(78%, 340px); aspect-ratio: 1; border-color: rgba(233,181,77,.38); }
.scene-boussole__orbite--inner { width: min(48%, 205px); aspect-ratio: 1; }
.scene-boussole__orbite--outer { rotate: var(--scene-orbit); }
.scene-boussole__orbite--inner { rotate: var(--scene-orbit-reverse); border-style: dashed; }
.scene-boussole__orbite::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-or-clair);
  box-shadow: 0 0 16px rgba(233, 181, 77, 0.72);
}
.scene-boussole__axe { left: 50%; top: 46%; background: rgba(255,255,255,.13); transform: translate(-50%, -50%); }
.scene-boussole__axe--h { width: 82%; height: 1px; }
.scene-boussole__axe--v { width: 1px; height: 76%; }
.scene-boussole__coeur {
  left: 50%; top: 46%; display: grid; place-items: center; width: 132px; height: 132px;
  border-radius: 50%; background: var(--color-or); color: var(--color-bleu); font-family: var(--font-titre);
  font-size: 1.2rem; transform: translate(-50%, -50%); box-shadow: 0 22px 50px rgba(8,16,43,.3);
}
.scene-boussole__coeur small { display: block; margin-top: -2.6rem; font-family: var(--font-corps); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.scene-boussole__repere { color: rgba(255,255,255,.7); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.scene-boussole__repere--n { top: 8%; left: 50%; transform: translateX(-50%); }
.scene-boussole__repere--e { right: 5%; top: 44%; }
.scene-boussole__repere--s { bottom: 16%; left: 50%; transform: translateX(-50%); }
.scene-boussole__repere--o { left: 4%; top: 44%; }
.scene-boussole__coeur { translate: 0 var(--scene-y-small); }
.scene-boussole__axe--h { translate: var(--scene-x-small) 0; }
.scene-boussole__axe--v { translate: 0 var(--scene-y-small-reverse); }
.scene-boussole__repere--e,
.scene-boussole__repere--s { translate: var(--scene-x-small) var(--scene-y-small); }
.scene-boussole__repere--n,
.scene-boussole__repere--o { translate: var(--scene-x-small-reverse) var(--scene-y-small-reverse); }

/* 02 · Le tableau de pilotage */
.scene-dashboard__header,
.scene-network__header {
  position: absolute;
  z-index: 4;
  top: 1.4rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scene-dashboard__header strong,
.scene-network__header strong { color: var(--color-or-clair); font-weight: 700; }
.scene-dashboard {
  position: absolute;
  z-index: 2;
  inset: 4.7rem 1.5rem 3.8rem;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.scene-dashboard__item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) minmax(52px, 72px);
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 14px 32px rgba(8, 16, 43, 0.13);
  backdrop-filter: blur(7px);
  will-change: opacity, scale, translate;
}
.scene-dashboard__item small {
  position: relative;
  z-index: 1;
  color: var(--color-or-clair);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.scene-dashboard__item div { position: relative; z-index: 1; min-width: 0; }
.scene-dashboard__item strong { display: block; color: #fff; font-family: var(--font-titre); font-size: 0.9rem; line-height: 1.15; }
.scene-dashboard__item span { display: block; margin-top: 0.12rem; color: rgba(255, 255, 255, 0.62); font-size: 0.6rem; line-height: 1.3; }
.scene-dashboard__item i {
  position: relative;
  z-index: 1;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
}
.scene-dashboard__item i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-or-clair), #fff3c4);
  box-shadow: 0 0 14px rgba(233, 181, 77, 0.58);
  transform-origin: left center;
}
.scene-dashboard__item--1 { opacity: var(--scene-step-opacity-1); scale: var(--scene-step-scale-1); translate: var(--scene-x-small) 0; }
.scene-dashboard__item--2 { opacity: var(--scene-step-opacity-2); scale: var(--scene-step-scale-2); translate: var(--scene-x-small-reverse) 0; }
.scene-dashboard__item--3 { opacity: var(--scene-step-opacity-3); scale: var(--scene-step-scale-3); translate: var(--scene-x-small) 0; }
.scene-dashboard__item--4 { opacity: var(--scene-step-opacity-4); scale: var(--scene-step-scale-4); translate: var(--scene-x-small-reverse) 0; }
.scene-dashboard__item--1 i::after { scale: var(--scene-step-1) 1; }
.scene-dashboard__item--2 i::after { scale: var(--scene-step-2) 1; }
.scene-dashboard__item--3 i::after { scale: var(--scene-step-3) 1; }
.scene-dashboard__item--4 i::after { scale: var(--scene-step-4) 1; }

/* 03 · L'atelier pédagogique */
.formation-panel--3 { grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr); }
.formation-scene--atelier { background: linear-gradient(135deg, #e9edf6, #f8f7f3); color: var(--color-bleu); }
.formation-scene--atelier::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -15%;
  bottom: -24%;
  width: min(78%, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(31, 47, 99, 0.10);
  border-radius: 50%;
  box-shadow: inset 0 0 0 28px rgba(255, 255, 255, 0.18), inset 0 0 0 30px rgba(200, 145, 47, 0.08);
  translate: var(--scene-x-wide-reverse) var(--scene-y-wide);
  rotate: var(--scene-orbit-reverse);
  scale: var(--scene-scale);
  will-change: translate, rotate, scale;
}
.formation-scene--atelier::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -35% -20%;
  background: linear-gradient(112deg, transparent 39%, rgba(255, 255, 255, 0.62) 49%, rgba(233, 181, 77, 0.13) 51%, transparent 61%);
  translate: var(--scene-x-wide) var(--scene-y-wide-reverse);
  rotate: var(--scene-rotate-small);
  pointer-events: none;
  will-change: translate, rotate;
}
.scene-atelier__rail { position: absolute; left: 1.2rem; top: 2rem; bottom: 4.6rem; display: flex; flex-direction: column; justify-content: space-between; color: rgba(31,47,99,.3); font-size: .6rem; }
.scene-atelier__feuille { position: absolute; z-index: 1; border: 1px solid rgba(31,47,99,.12); background: #fff; box-shadow: 0 20px 45px rgba(31,47,99,.1); }
.scene-atelier__feuille--back { inset: 12% 9% 17% 18%; transform: rotate(4deg); background: var(--color-or-clair); opacity: .6; }
.scene-atelier__feuille--main { z-index: 2; inset: 9% 14% 19% 13%; padding: clamp(1.4rem, 3vw, 2.5rem); transform: rotate(-2deg); }
.scene-atelier__label { display: block; margin-bottom: 1.4rem; color: var(--color-or-sombre); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.scene-atelier__feuille strong { display: block; margin-bottom: 1.8rem; font-family: var(--font-titre); font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.05; }
.scene-atelier__trait { display: block; height: 1px; margin: .75rem 0; background: rgba(31,47,99,.14); }
.scene-atelier__trait--1 { width: 90%; }
.scene-atelier__trait--2 { width: 72%; }
.scene-atelier__trait--3 { width: 82%; }
.scene-atelier__progression { position: absolute; left: 2.5rem; right: 2.5rem; bottom: 2rem; display: flex; gap: .45rem; }
.scene-atelier__progression i { flex: 1; height: 4px; background: var(--color-bleu-pale); }
.scene-atelier__progression i:nth-child(-n+3) { background: var(--color-or); }
.scene-atelier__note { position: absolute; z-index: 3; right: 4%; top: 17%; padding: .9rem; border-radius: 50%; background: var(--color-bleu); color: #fff; font-family: var(--font-titre); font-size: .72rem; text-align: center; transform: rotate(8deg); box-shadow: 0 14px 30px rgba(31,47,99,.2); }
.scene-atelier__feuille--back { translate: var(--scene-x-wide-reverse) var(--scene-y-wide); rotate: var(--scene-rotate-reverse); }
.scene-atelier__feuille--main { translate: var(--scene-x-wide) var(--scene-y-wide-reverse); rotate: var(--scene-rotate-small); }
.scene-atelier__rail { translate: 0 var(--scene-y-small); }
.scene-atelier__note { translate: var(--scene-x-wide) var(--scene-y-wide-reverse); rotate: var(--scene-rotate); scale: var(--scene-note-scale); }
.scene-atelier__trait,
.scene-atelier__progression i { transform-origin: left center; will-change: scale; }
.scene-atelier__trait--1 { scale: var(--scene-step-1) 1; }
.scene-atelier__trait--2 { scale: var(--scene-step-2) 1; }
.scene-atelier__trait--3 { scale: var(--scene-step-3) 1; }
.scene-atelier__progression i:nth-child(1) { scale: var(--scene-step-1) 1; }
.scene-atelier__progression i:nth-child(2) { scale: var(--scene-step-2) 1; }
.scene-atelier__progression i:nth-child(3) { scale: var(--scene-step-3) 1; }
.scene-atelier__progression i:nth-child(4) { scale: var(--scene-step-4) 1; }
.formation-scene--atelier .formation-scene__caption { color: rgba(31,47,99,.5); }
.formation-scene--atelier .formation-scene__caption strong { color: var(--color-or-sombre); }

/* 04 · La cartographie relationnelle */
.formation-scene--liens { background: radial-gradient(circle at 50% 46%, rgba(233,181,77,.2), transparent 24%), var(--color-bleu); }
.scene-liens__traces { position: absolute; inset: 8% 5% 14%; width: 90%; height: 78%; overflow: visible; }
.scene-liens__traces path { fill: none; stroke: rgba(233,181,77,.55); stroke-width: 1.5; stroke-dasharray: 5 7; }
.scene-liens__coeur {
  position: absolute;
  z-index: 2; left: 50%; top: 46%; display: grid; place-items: center; width: 150px; height: 150px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  font-family: var(--font-titre); font-size: 1rem; transform: translate(-50%,-50%); box-shadow: inset 0 0 0 12px rgba(255,255,255,.025);
}
.scene-liens__coeur small { display: block; margin-top: -3rem; color: var(--color-or-clair); font-family: var(--font-corps); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.scene-liens__personne { position: absolute; z-index: 3; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(233,181,77,.48); border-radius: 50%; background: var(--color-bleu); color: rgba(255,255,255,.78); font-size: .62rem; }
.scene-liens__personne--1 { left: 8%; top: 10%; }
.scene-liens__personne--2 { right: 7%; top: 13%; }
.scene-liens__personne--3 { left: 6%; bottom: 19%; }
.scene-liens__personne--4 { right: 7%; bottom: 22%; }
.scene-liens__traces {
  translate: var(--scene-x-small) var(--scene-y-small-reverse);
  rotate: var(--scene-rotate-small);
  will-change: translate, rotate;
}
.scene-liens__traces path { stroke-dashoffset: var(--scene-dash); }
.scene-liens__personne--1 { translate: var(--scene-x-reverse) var(--scene-y); }
.scene-liens__personne--2 { translate: var(--scene-x) var(--scene-y-small); }
.scene-liens__personne--3 { translate: var(--scene-x-small-reverse) var(--scene-y-reverse); }
.scene-liens__personne--4 { translate: var(--scene-x-small) var(--scene-y-small-reverse); }
.scene-liens__coeur { translate: 0 var(--scene-y-small); rotate: var(--scene-rotate-reverse); }

/* 04 · Le réseau d'accompagnement */
.scene-network {
  position: absolute;
  z-index: 2;
  inset: 4.7rem 1.5rem 3.8rem;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  gap: 2.4rem;
}
.scene-network__center {
  position: relative;
  z-index: 3;
  justify-self: center;
  width: min(100%, 148px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  padding: 1rem;
  border: 1px solid rgba(233, 181, 77, 0.50);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055) 64%);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.025), 0 22px 46px rgba(8, 16, 43, 0.20);
  text-align: center;
  translate: 0 var(--scene-y-small);
  scale: var(--scene-scale);
  will-change: translate, scale;
}
.scene-network__center::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 2.4rem;
  height: 1px;
  background: rgba(233, 181, 77, 0.42);
}
.scene-network__center small { color: var(--color-or-clair); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; }
.scene-network__center strong { display: block; margin: 0.2rem 0; color: #fff; font-family: var(--font-titre); font-size: 1.22rem; }
.scene-network__center span { color: rgba(255, 255, 255, 0.63); font-size: 0.58rem; line-height: 1.3; }
.scene-network__rail {
  position: absolute;
  z-index: 1;
  top: 8%;
  bottom: 8%;
  left: calc(38% + 1.2rem);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(233, 181, 77, 0.44) 15% 85%, transparent);
}
.scene-network__pulse {
  position: absolute;
  z-index: 4;
  left: calc(38% + 1.2rem);
  top: var(--scene-progress-percent);
  width: 12px;
  height: 12px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--color-or-clair);
  box-shadow: 0 0 0 5px rgba(233, 181, 77, 0.10), 0 0 20px rgba(233, 181, 77, 0.72);
  will-change: top;
}
.scene-network__actions {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  align-self: stretch;
}
.scene-network__action {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.52rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 28px rgba(8, 16, 43, 0.12);
  backdrop-filter: blur(7px);
  will-change: opacity, scale, translate;
}
.scene-network__action::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 2.4rem;
  height: 1px;
  background: rgba(233, 181, 77, 0.30);
}
.scene-network__action small { color: var(--color-or-clair); font-size: 0.56rem; font-weight: 750; letter-spacing: 0.08em; }
.scene-network__action strong { display: block; color: #fff; font-family: var(--font-titre); font-size: 0.82rem; line-height: 1.1; }
.scene-network__action span { display: block; margin-top: 0.1rem; color: rgba(255, 255, 255, 0.60); font-size: 0.56rem; line-height: 1.3; }
.scene-network__action--1 { opacity: var(--scene-step-opacity-1); scale: var(--scene-step-scale-1); translate: var(--scene-x-small) 0; }
.scene-network__action--2 { opacity: var(--scene-step-opacity-2); scale: var(--scene-step-scale-2); translate: var(--scene-x-small-reverse) 0; }
.scene-network__action--3 { opacity: var(--scene-step-opacity-3); scale: var(--scene-step-scale-3); translate: var(--scene-x-small) 0; }
.scene-network__action--4 { opacity: var(--scene-step-opacity-4); scale: var(--scene-step-scale-4); translate: var(--scene-x-small-reverse) 0; }

.formation-panel.is-entering .formation-panel__contenu { animation: formation-contenu-entree 430ms 40ms cubic-bezier(.22,1,.36,1) both; }
.formation-panel.is-entering .formation-scene--plan .scene-plan__route { animation: formation-trace-entree 600ms 120ms cubic-bezier(.22,1,.36,1) both; }
.formation-panel.is-entering .formation-scene--boussole .scene-boussole__orbite { animation: formation-orbite-entree 520ms 80ms cubic-bezier(.22,1,.36,1) both; }
.formation-panel.is-entering .formation-scene--atelier .scene-atelier__feuille--main { animation: formation-feuille-entree 500ms 70ms cubic-bezier(.22,1,.36,1) both; }
.formation-panel.is-entering .formation-scene--liens .scene-liens__traces path { animation: formation-lien-entree 700ms 80ms ease-out both; }

@keyframes formation-contenu-entree {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes formation-panel-entree {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes formation-trace-entree { from { transform: rotate(-20deg) scaleX(0); } to { transform: rotate(-20deg) scaleX(1); } }
@keyframes formation-orbite-entree { from { opacity: 0; transform: translate(-50%,-50%) scale(.7) rotate(-25deg); } to { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes formation-feuille-entree { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
@keyframes formation-lien-entree { from { stroke-dashoffset: 80px; opacity: 0; } to { stroke-dashoffset: var(--scene-dash); opacity: 1; } }

@media (max-width: 999px) {
  .formation-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formation-tab:nth-child(-n+2) { border-bottom: 1px solid rgba(31,47,99,.11); }
  .formation-panel,
  .formation-panel--2,
  .formation-panel--3 { grid-template-columns: 1fr; }
  .formation-panel--2 .formation-panel__contenu,
  .formation-panel--2 .formation-scene { order: initial; }
  .formation-scene { min-height: 360px; }
}

.formation-dots { display: none; }

@media (max-width: 599px) {
  .formation-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.2rem 0.15rem 0.65rem;
    scrollbar-width: none;
  }
  .formation-tabs::-webkit-scrollbar { display: none; }
  .formation-tab {
    flex: 0 0 215px;
    min-height: 76px;
    padding-right: 1.5rem;
    scroll-snap-align: start;
  }
  .formation-tab::after { right: .8rem; }
  .formation-showcase__stage { border-radius: 24px 10px 40px 10px; }
  .formation-panel { min-height: 0; gap: 1.6rem; padding: 3.5rem 1.25rem 1.25rem; }
  .formation-panel::before { top: 1.25rem; left: 1.25rem; }
  .formation-panel h3 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .formation-scene,
  .formation-panel--2 .formation-scene { min-height: 310px; border-radius: 10px 46px 10px 46px; }
  .formation-scene__caption { font-size: .52rem; }
  .scene-atelier__feuille strong { font-size: 1.45rem; }
  .scene-liens__coeur { width: 118px; height: 118px; }
  .scene-liens__personne { width: 54px; height: 54px; font-size: .52rem; }
  .scene-roadmap { inset: 4.25rem 0.9rem 3rem; }
  .scene-roadmap__step {
    width: calc(50% - 1.4rem);
    min-height: 54px;
    grid-template-columns: 1.2rem 1fr;
    column-gap: 0.25rem;
    padding: 0.45rem 0.5rem;
    border-radius: 11px;
  }
  .scene-roadmap__step::after { width: 1.4rem; }
  .scene-roadmap__step:nth-of-type(odd)::after { right: -1.4rem; }
  .scene-roadmap__step:nth-of-type(even)::after { left: -1.4rem; }
  .scene-roadmap__step strong { font-size: 0.82rem; }
  .scene-roadmap__step span { font-size: 0.58rem; }
  .scene-dashboard__header,
  .scene-network__header { top: 1.2rem; left: 1rem; right: 1rem; font-size: 0.52rem; letter-spacing: 0.08em; }
  .scene-dashboard { inset: 4.1rem 0.9rem 3rem; gap: 0.42rem; }
  .scene-dashboard__item {
    grid-template-columns: 1.2rem minmax(0, 1fr) 42px;
    gap: 0.35rem;
    padding: 0.42rem 0.5rem;
    border-radius: 11px;
  }
  .scene-dashboard__item strong { font-size: 0.78rem; }
  .scene-dashboard__item span { font-size: 0.58rem; }
  .scene-dashboard__item i { height: 3px; }
  .scene-network {
    inset: 4.1rem 0.9rem 3rem;
    grid-template-columns: 34% minmax(0, 1fr);
    gap: 1.5rem;
  }
  .scene-network__center { width: min(100%, 92px); padding: 0.5rem; }
  .scene-network__center::after { width: 1.5rem; }
  .scene-network__center small { font-size: 0.46rem; }
  .scene-network__center strong { font-size: 0.98rem; }
  .scene-network__center span { font-size: 0.5rem; }
  .scene-network__rail,
  .scene-network__pulse { left: calc(34% + 0.75rem); }
  .scene-network__actions { gap: 0.34rem; }
  .scene-network__action {
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.25rem;
    padding: 0.35rem 0.42rem;
    border-radius: 10px;
  }
  .scene-network__action::before { width: 1.5rem; }
  .scene-network__action strong { font-size: 0.74rem; }
  .scene-network__action span { font-size: 0.56rem; }

  /* Points de navigation swipe */
  .formation-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
  }
  .formation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(31, 47, 99, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.28s, transform 0.28s;
    -webkit-tap-highlight-color: transparent;
  }
  .formation-dot.is-active {
    background: var(--color-or);
    transform: scale(1.4);
  }
}

.parcours__lien {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-bleu);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.parcours__lien::after {
  content: '→';
  transition: transform var(--transition);
}
.parcours__lien:hover::after { transform: translateX(4px); }

/* ---------- Accompagnement ---------- */
.home-accompagnement {
  padding-top: calc(var(--space-2xl) + 4rem);
  background:
    linear-gradient(180deg, var(--color-fond-bleu-fonce) 0, var(--color-fond-bleu-fonce) 5rem, transparent 11rem),
    radial-gradient(ellipse 58% 120% at 4% 35%, rgba(61, 85, 168, 0.46) 0%, transparent 64%),
    radial-gradient(ellipse 48% 100% at 94% 70%, rgba(8, 16, 43, 0.30) 0%, transparent 68%),
    var(--color-fond-bleu-fonce);
  color: var(--color-blanc);
}

.home-accompagnement::before {
  content: '';
  position: absolute;
  inset: -32% -8% auto;
  height: 92%;
  border: 1px solid rgba(233, 181, 77, 0.16);
  border-radius: 0 0 50% 50%;
  transform: rotate(-3deg);
  pointer-events: none;
}

.home-accompagnement::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 17% 60%, rgba(233, 181, 77, 0.72) 0 2px, transparent 2.5px),
    radial-gradient(circle at 84% 28%, rgba(255, 255, 255, 0.35) 0 1.5px, transparent 2px);
  background-size: 120px 120px, 120px 120px, 260px 260px, 220px 220px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
}

.accompagnement-bandeau {
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  box-shadow: none;
}

.accompagnement-bandeau::before,
.accompagnement-bandeau::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.accompagnement-bandeau::before {
  width: min(52vw, 520px);
  height: min(26vw, 250px);
  left: -18%;
  bottom: -38%;
  border: 1px solid rgba(233, 181, 77, 0.20);
  border-radius: 50%;
}

.accompagnement-bandeau::after {
  width: min(46vw, 460px);
  height: min(22vw, 220px);
  right: -14%;
  top: -28%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
}

.accompagnement-bandeau > * { position: relative; z-index: 1; }

.accompagnement-bandeau__fil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(233, 181, 77, 0.22), transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.accompagnement-bandeau h2 { color: #FFFFFF; margin-bottom: var(--space-sm); }
.accompagnement-bandeau p {
  color: rgba(255, 255, 255, 0.76);
  max-width: 620px;
  margin: 0 auto var(--space-lg);
}

/* ---------- Étapes ---------- */
.home-steps {
  background: transparent;
  position: relative;
}

.home-steps::before {
  content: '';
  position: absolute;
  inset: 5rem -12% 3rem;
  background:
    radial-gradient(ellipse 46% 38% at 90% 18%, rgba(233, 181, 77, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 52% 50% at 5% 78%, rgba(31, 47, 99, 0.04) 0%, transparent 72%);
  transform: rotate(-4deg);
  pointer-events: none;
}

.home-accompagnement .conteneur,
.home-steps .conteneur,
.home-resources .conteneur,
.home-cta .conteneur { position: relative; z-index: 1; }

.etapes {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-left: 0;
}
.etapes__item {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: 1.2rem 1.2rem 1.2rem 0.4rem;
  border-radius: 18px 42px 18px 42px;
  background: #FFFFFF;
  border: 1px solid rgba(200, 145, 47, 0.14);
  box-shadow: 0 16px 40px rgba(31, 47, 99, 0.06);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.36s ease, border-color 0.28s ease;
}
.etapes__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(233, 181, 77, 0.14), rgba(61, 85, 168, 0.06) 54%, transparent 76%);
  transform: translateX(-105%);
  transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.etapes__item::after {
  content: '↗';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  color: var(--color-or-sombre);
  font-size: 1.15rem;
  opacity: 0;
  transform: translate(-8px, -50%) rotate(-16deg);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.etapes__item > * { position: relative; z-index: 1; }
.etapes__item:nth-child(odd) { border-radius: 42px 18px 42px 18px; }
.etapes__item:hover {
  transform: translateX(8px) translateY(-3px);
  border-color: rgba(200, 145, 47, 0.38);
  box-shadow: 0 25px 58px rgba(31, 47, 99, 0.13);
}
.etapes__item:hover::before { transform: translateX(0); }
.etapes__item:hover::after { opacity: 1; transform: translate(0, -50%) rotate(0); }
.etapes__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-fond);
  border: 1.5px solid var(--color-bordure-or);
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--color-or-sombre);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.etapes__item:hover .etapes__num {
  border-color: var(--color-bleu);
  background: var(--color-bleu);
  color: var(--color-or-clair);
  transform: rotate(-8deg) scale(1.08);
}
.etapes__item h3 { transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.etapes__item:hover h4 { color: var(--color-or-sombre); transform: translateX(3px); }
.etapes__item h3 { margin-bottom: 0.25rem; }
.etapes__item p {
  font-size: var(--text-sm);
  color: var(--color-texte-doux);
}

/* ---------- Témoignages ---------- */
.temoignages .card blockquote p {
  font-family: var(--font-titre);
  font-style: italic;
  color: var(--color-texte);
  font-size: var(--text-lg);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.temoignage__auteur {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
}
.temoignage__initiales {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-bleu-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bleu);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.temoignage__nom {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-bleu);
}
.temoignage__role {
  font-size: var(--text-xs);
  color: var(--color-texte-tres-doux);
}

/* ---------- CTA final ---------- */
.home-resources {
  background: transparent;
  position: relative;
}

.home-resources::before {
  content: '';
  position: absolute;
  inset: 5rem 0 3rem;
  background:
    radial-gradient(ellipse 42% 32% at 14% 20%, rgba(233, 181, 77, 0.10) 0%, transparent 72%),
    radial-gradient(ellipse 42% 38% at 90% 72%, rgba(61, 85, 168, 0.07) 0%, transparent 72%);
  pointer-events: none;
}

.home-resources .card {
  --resource-accent: var(--color-or);
  overflow: hidden;
  border-radius: 30px 62px 30px 30px;
  border-color: rgba(200, 145, 47, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 181, 77, 0.22), transparent 34%),
    linear-gradient(145deg, #fffdf7 0%, #f8f3e7 100%);
  box-shadow: 0 22px 60px rgba(31, 47, 99, 0.09);
}

.home-resources .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 5px;
  border-radius: 0 0 100px 0;
  background: var(--resource-accent);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-resources .card::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -65px;
  bottom: -78px;
  width: 150px;
  height: 150px;
  border: 1px solid color-mix(in srgb, var(--resource-accent) 32%, transparent);
  border-radius: 50%;
}
.home-resources .card > * { position: relative; z-index: 1; }
.home-resources .card:hover::before { width: 76%; }
.home-resources .card .pill {
  align-self: flex-start;
  border-color: color-mix(in srgb, var(--resource-accent) 34%, transparent);
  background: color-mix(in srgb, var(--resource-accent) 13%, white);
}
.home-resources .card:nth-child(2) {
  --resource-accent: #3D55A8;
  border-radius: 62px 30px 30px 30px;
  border-color: rgba(61, 85, 168, 0.22);
  background:
    radial-gradient(circle at 0% 100%, rgba(61, 85, 168, 0.16), transparent 38%),
    linear-gradient(145deg, #f8faff 0%, #e9eefb 100%);
}
.home-resources .card:nth-child(3) {
  --resource-accent: var(--color-or-clair);
  border-radius: 30px 30px 62px 30px;
  border-color: rgba(233, 181, 77, 0.30);
  background:
    radial-gradient(circle at 85% 15%, rgba(61, 85, 168, 0.5), transparent 36%),
    var(--color-bleu);
  color: var(--color-blanc);
}
.home-resources .card:nth-child(3) h3,
.home-resources .card:nth-child(3) p { color: var(--color-blanc); }
.home-resources .card:nth-child(3) p { opacity: 0.72; }
.home-resources .card:nth-child(3) .pill {
  color: var(--color-bleu);
  background: var(--color-or-clair);
}
.home-resources .card:nth-child(3) .parcours__lien { color: var(--color-or-clair); }

.home-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: transparent;
  padding-bottom: calc(var(--space-2xl) * 1.2 + 5rem);
}

.home-cta::before {
  content: '';
  position: absolute;
  inset: 14% 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 145, 47, 0.55), transparent);
}

.home-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(233, 181, 77, 0.14) 0 2px, transparent 2.5px),
    radial-gradient(circle at 80% 24%, rgba(31, 47, 99, 0.12) 0 1.5px, transparent 2px),
    linear-gradient(rgba(31, 47, 99, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 47, 99, 0.04) 1px, transparent 1px);
  background-size: 180px 180px, 200px 200px, 96px 96px, 96px 96px;
  mask-image: radial-gradient(circle at center, black 0%, rgba(0, 0, 0, 0.8) 52%, transparent 82%);
  pointer-events: none;
}
.home-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
@media (min-width: 600px) {
  .home-cta__actions { flex-direction: row; }
}
.home-cta__infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 920px;
  margin: var(--space-xl) auto 0;
  overflow: hidden;
  border: 1px solid rgba(31, 47, 99, 0.10);
  border-radius: 28px 12px 34px 12px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 22px 60px rgba(31, 47, 99, 0.08);
  text-align: left;
}
.home-cta__info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem 1.15rem;
  color: var(--color-bleu);
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-cta__info + .home-cta__info { border-left: 1px solid rgba(31, 47, 99, 0.10); }
a.home-cta__info:hover { background: rgba(233, 181, 77, 0.10); transform: translateY(-2px); }
.home-cta__info-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bleu);
  color: var(--color-or-clair);
}
.home-cta__info-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-cta__info span:last-child { display: flex; min-width: 0; flex-direction: column; }
.home-cta__info small {
  margin-bottom: 0.1rem;
  color: var(--color-or-sombre);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-cta__info strong { overflow-wrap: anywhere; font-size: var(--text-xs); }

@media (max-width: 767px) {
  .home-cta__infos { grid-template-columns: 1fr; border-radius: 24px 10px 30px 10px; }
  .home-cta__info + .home-cta__info { border-top: 1px solid rgba(31, 47, 99, 0.10); border-left: 0; }
}

@media (max-width: 899px) {
  .hero__scene-card,
  .hero__scene-card--left,
  .hero__scene-card--right,
  .parcours__carte:nth-child(2n) { --offset-y: 0px; }
}

/* ---------- Lueurs ambiantes alternées ---------- */
.lueur-fond {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55%;
  pointer-events: none;
  z-index: 0;
}
.lueur-fond--gauche {
  left: 0;
  background: radial-gradient(ellipse 90% 55% at -15% 50%, rgba(200, 145, 47, 0.10) 0%, transparent 70%);
}
.lueur-fond--droite {
  right: 0;
  left: auto;
  background: radial-gradient(ellipse 90% 55% at 115% 50%, rgba(200, 145, 47, 0.10) 0%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .lueur-fond {
    animation: lueur-respire 8s ease-in-out infinite alternate;
  }
}
@keyframes lueur-respire {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
@media (max-width: 767px) {
  .lueur-fond { display: none; }
}

@media (max-width: 767px) {
  .hero__orbits,
  .hero__lignes { display: none; }
  .hero__spotlight { opacity: 0.55; }
  .hero::before,
  .hero::after { opacity: 0.35; }
  .flow-wave { height: 64px; }
  .flow-ribbon { height: clamp(104px, 17vw, 124px); }
  .hero { padding-bottom: calc(var(--space-2xl) + 3rem); }
  .hero__scroll { display: none; }
  .valeurs,
  .parcours,
  .home-accompagnement,
  .home-steps,
  .home-resources { padding-bottom: calc(var(--space-2xl) + 2.75rem); }
  .parcours.section--grande { padding-top: 0.75rem; }
  .home-accompagnement { padding-top: calc(var(--space-xl) + 4rem); }
  .accompagnement-bandeau { padding-inline: 0; }
  .etapes__item::after { display: none; }
}