/* ═══════════════════════════════════════════════════════════════════════════
   SYSTÈME MÉTRO PARISIEN — la ligne de Noé
   Plan de ligne vivant · plaques de station · signalétique · moquette · ticket
   Palette métro ligne 6 : blanc cassé #e7e6e3 · encre #121414 · vert-cyan #5cb8ae
   ═══════════════════════════════════════════════════════════════════════════ */

/* la barre de progression du haut fait doublon avec le plan de ligne → off */
#progress { display: none; }

/* ── PLAN DE LIGNE FIXE (gauche) avec position en direct ────────────────── */
#line-map { position: fixed; left: clamp(10px, 1.6vw, 26px); top: 0; bottom: 0; width: 44px;
  z-index: 300; display: none; opacity: 1; transition: opacity .45s ease; }
@media (min-width: 1040px) { #line-map { display: block; } }
body.metro-on #line-map { opacity: 0; pointer-events: none; }

.lm-rail { position: absolute; left: 22px; top: 15vh; bottom: 13vh; width: 3px;
  transform: translateX(-50%); background: var(--line); border-radius: 3px; }
.lm-rail-fill { position: absolute; left: 22px; top: 15vh; width: 3px; height: 0;
  transform: translateX(-50%); background: var(--blue); border-radius: 3px; z-index: 1; }
.lm-train { position: absolute; left: 22px; top: 15vh; width: 13px; height: 13px; border-radius: 50%;
  background: var(--blue); transform: translate(-50%, -50%); z-index: 4;
  box-shadow: 0 0 0 5px rgba(92, 184, 174, 0.16), 0 2px 6px rgba(0,0,0,.25); }

.lm-stop { position: absolute; left: 22px; top: 0; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--blue); z-index: 2; cursor: pointer;
  transition: background .3s var(--ease-expo), transform .3s var(--ease-expo); }
.lm-stop.passed { background: var(--blue); }
.lm-stop.active { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }
.lm-label { position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--f-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.6rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; opacity: 0;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.lm-stop:hover .lm-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lm-train, .lm-stop { transition: none; } }

/* ── PLAQUE DE STATION (en-têtes de section) ────────────────────────────── */
.station { display: inline-flex; align-items: center; gap: 0.7rem; }
.stbullet { display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--f-label); font-weight: 700;
  font-size: clamp(0.82rem, 1vw, 0.98rem); line-height: 1; flex-shrink: 0; }
.stname { font-family: var(--f-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink); font-size: clamp(0.74rem, 0.9vw, 0.86rem); }

/* filet de correspondance sous la plaque (rappel signalétique quai) */
.section-head { position: relative; }

/* ── SIGNALÉTIQUE « DIRECTION » (grand CTA contact) ─────────────────────── */
.direction { display: inline-flex; align-items: center; gap: clamp(0.8rem,2vw,1.4rem);
  border: 2px solid var(--ink); border-radius: 4px; padding: clamp(0.7rem,2vh,1.1rem) clamp(1rem,2.5vw,1.6rem);
  background: var(--paper); }
.direction .dir-arrow { font-size: 1.4em; line-height: 1; color: var(--blue); }
.direction .dir-word { font-family: var(--f-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: clamp(0.66rem,0.8vw,0.76rem); color: var(--gray); }
.direction .dir-name { font-family: var(--f-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: clamp(0.82rem,1.1vw,1rem); color: var(--ink); }
.direction { margin: clamp(1.6rem,4vh,2.6rem) 0 clamp(0.6rem,1.5vh,1rem); }

/* ── MOQUETTE (motif siège métro) — accent discret ──────────────────────── */
.moquette { position: relative; }
.moquette::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image:
    repeating-linear-gradient(45deg,  var(--blue) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, var(--blue) 0 2px, transparent 2px 14px);
  background-size: 20px 20px;
}
.moquette > * { position: relative; z-index: 1; }

/* décale légèrement le contenu pour ne pas passer sous le plan de ligne */
@media (min-width: 1040px) {
  #folio, .section, .hero { padding-left: max(var(--pad), 62px); }
}

/* ═══ Section Contact · fond shader "Mesh drift" (final immersif) ═══════════ */
#alternance.section--shader { position: relative; overflow: hidden;
  background: #e7e6e3; color: #121414; border-top-color: rgba(18,20,20,0.12); }
#alternance .shader-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#alternance::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 38%, rgba(231,230,227,0.30), rgba(231,230,227,0.72) 100%); }
#alternance > *:not(.shader-bg) { position: relative; z-index: 2; }
/* textes en clair */
#alternance .kicker { color: #3a8f84; }
#alternance .kicker .dot { background: #5cb8ae; }
#alternance .section-title { color: #121414; }
#alternance .section-index { color: rgba(92,184,174,0.22); }
#alternance .manifesto { color: #121414; }
#alternance .manifesto .fl { color: #5cb8ae; }
#alternance .section-intro { color: rgba(18,20,20,0.82); }
#alternance .a-v { color: #121414; }
#alternance .a-l { color: rgba(58,143,132,0.92); }
/* panneau Direction */
#alternance .direction { background: rgba(18,20,20,0.03); border-color: rgba(92,184,174,0.5); }
#alternance .direction .dir-word { color: rgba(92,184,174,0.75); }
#alternance .direction .dir-name { color: #121414; }
#alternance .direction .dir-arrow { color: #5cb8ae; }
/* CTA géant */
#alternance .cta-huge { color: #121414; }
#alternance .cta-huge .arrow { color: #5cb8ae; }
/* boutons */
#alternance .btn { border-color: rgba(92,184,174,0.55); color: #121414; background: transparent; }
#alternance .btn:hover { background: rgba(92,184,174,0.14); }
#alternance .btn--solid { background: #5cb8ae; color: #121414; border-color: #5cb8ae; }
#alternance .btn--solid:hover { background: #ffffff; border-color: #ffffff; }
/* footer */
#alternance .footer-line { border-top-color: rgba(92,184,174,0.20); }
#alternance .footer-line .mono { color: rgba(18,20,20,0.72); }