/* ============================================================
   Félix Perrier — portfolio
   Direction : dossier technique / atelier. Porcelaine bleutée,
   bleu poudré (portrait), encre bleu-gris, accent laiton.
   ============================================================ */

:root {
  --paper: #f4f7f9;
  --paper-2: #eaf0f4;
  --card: #fdfefe;
  --ink: #1f2e38;
  --ink-soft: #546875;
  --blue: #a9c6d9;
  --blue-tint: #dce8f0;
  --blue-deep: #38607c;
  --brass: #8a683a;
  --line: #c9d6de;
  --ok: #3f6650;

  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --maxw: 1140px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31, 46, 56, 0.05), 0 12px 32px -16px rgba(31, 46, 56, 0.18);
  --shadow-lift: 0 2px 4px rgba(31, 46, 56, 0.06), 0 24px 48px -20px rgba(31, 46, 56, 0.28);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--blue-deep); }

::selection { background: var(--blue); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--paper);
  background: var(--blue-deep);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  transition: color 0.2s, background-color 0.2s;
}

.nav-link:hover { color: var(--ink); background: var(--blue-tint); }

.nav-link.is-active { color: var(--ink); background: var(--blue-tint); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.status-pill:hover { background: color-mix(in srgb, var(--ok) 16%, transparent); }

.status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background:
    linear-gradient(to bottom, transparent, var(--paper) 92%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue-deep) 7%, transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue-deep) 7%, transparent) 0 1px, transparent 1px 56px),
    var(--paper);
}

.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6.5rem) clamp(1.25rem, 4vw, 3rem) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy, .hero-portrait { min-width: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}

.eyebrow-num {
  color: var(--brass);
  font-weight: 500;
  white-space: nowrap;
}

.eyebrow-label {
  flex: 1;
  min-width: 0;
}

.eyebrow-num::after {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--brass);
  vertical-align: middle;
  margin-left: 0.75rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--blue-deep);
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 2.2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 3rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.18s, box-shadow 0.18s, background-color 0.18s, border-color 0.18s;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--blue-deep) 88%, black);
  box-shadow: var(--shadow-lift);
}

.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--card) 65%, transparent);
}

.btn-ghost:hover { border-color: var(--blue-deep); }

.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}

.hero-stats dt {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}

.hero-stats dd {
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 13em;
}

/* Portrait annoté façon plan coté */

.hero-portrait { position: relative; }

.portrait-frame {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.portrait-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.measure {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--brass);
}

.measure i {
  flex: 1;
  height: 1px;
  background: var(--brass);
  position: relative;
}

.measure i::before,
.measure i::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 1px;
  height: 8px;
  background: var(--brass);
}

.measure i::before { left: 0; }
.measure i::after { right: 0; display: none; }

.measure-top {
  top: -1.6rem;
  left: 0;
  right: 0;
}

.measure-top i:first-of-type::after { display: none; }
.measure-top i:last-of-type::after { display: block; }

.measure-right {
  top: 0;
  bottom: 0;
  right: -1.7rem;
  flex-direction: column;
}

.measure-right b { writing-mode: vertical-rl; }

.measure-right i {
  width: 1px;
  height: auto;
  align-self: center;
}

.measure-right i::before,
.measure-right i::after {
  top: auto;
  left: -3.5px;
  width: 8px;
  height: 1px;
}

.measure-right i:first-of-type::before { top: 0; }
.measure-right i:last-of-type::after { bottom: 0; display: block; }

.measure b { font-weight: 500; }

.cartouche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

.cartouche span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink);
}

.cartouche span + span { border-left: 1px solid var(--line); }

.cartouche b {
  font-weight: 400;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.scroll-hint {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Sections ---------- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 6.5rem) clamp(1.25rem, 4vw, 3rem);
}

.section-panel {
  max-width: none;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-panel > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.section-head { margin-bottom: clamp(2.5rem, 5vh, 3.75rem); }

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 1rem;
  max-width: 18em;
}

.section-lede {
  color: var(--ink-soft);
  max-width: 38em;
  font-size: 1.05rem;
}

/* ---------- Timeline ---------- */

.timeline {
  position: relative;
  list-style: none;
  margin-left: 0.5rem;
  display: grid;
  gap: 2.4rem;
}

/* Rail vertical + barre de progression qui se trace au scroll (scaleY via GSAP). */
.timeline-track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.timeline-bar {
  display: block;
  position: absolute;
  inset: 0;
  width: 1px;
  background: var(--brass);
  transform-origin: top center;
}

/* Fallback (GSAP absent ou reduced-motion) : barre pleine. */
html:not(.gsap) .timeline-bar { transform: none; }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  padding-left: 2rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--brass);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Point allumé quand le fil l'atteint (classe .lit posée par GSAP). */
.timeline-item.lit::before {
  background: var(--brass);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 18%, transparent);
}

/* Fallback : tous les points allumés. */
html:not(.gsap) .timeline-item::before { background: var(--brass); }

.timeline-year {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brass);
  padding-top: 0.3rem;
}

.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.timeline-item p {
  color: var(--ink-soft);
  max-width: 44em;
}

/* ---------- Photographie personnelle (fin de Parcours) ---------- */

.perso-photo {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--line);
  /* Section basse, souvent hors-écran au chargement : différée. */
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

.perso-photo-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.perso-photo-shots .shot {
  aspect-ratio: 3 / 4;
}

.perso-photo-shots .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perso-photo-cap {
  margin-top: 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.perso-photo-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}

@media (max-width: 640px) {
  .perso-photo-shots { grid-template-columns: 1fr 1fr; }
  .perso-photo-shots .shot:last-child { display: none; }
}

/* ---------- Atelier ---------- */

.bench-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  /* Bloc hors-écran au chargement : layout/paint différés (perf #3). */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.bench {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
}

.bench h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.bench-ref {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border: 1px solid color-mix(in srgb, var(--blue-deep) 25%, transparent);
  border-radius: 7px;
  padding: 0.15rem 0.5rem;
}

.bench ul { list-style: none; display: grid; gap: 0.45rem; }

.bench li {
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  position: relative;
}

.bench li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--blue);
  transform: rotate(45deg);
}

.ai-note {
  margin-top: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow);
}

.ai-note-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.4rem;
}

.ai-note p:last-child { color: var(--ink-soft); max-width: 60em; }

.ai-note strong { color: var(--ink); }

.certs {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.certs span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  background: color-mix(in srgb, var(--card) 55%, transparent);
}

/* ---------- Missions ---------- */

.missions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.mission {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  /* Correctif perf #3 : le hors-écran n'est ni layouté ni peint tant qu'il
     n'approche pas du viewport. contain-intrinsic-size réserve une hauteur
     estimée pour que la scrollbar reste stable et que les ScrollTriggers
     (reveal "top 85%") se déclenchent au bon moment. */
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.mission:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.mission-media {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 21 / 9;
}

.mission-media-video { aspect-ratio: 16 / 9; }

/* ---------- Minia vidéo PORTRAIT — reel entièrement lisible ---------- */
/* Cadre au ratio réel du reel (9:16), hauteur bornée pour tenir dans la carte.
   Remplace l'ancien height:480px + cover qui rognait le texte incrusté. */
.mission-media.is-vertical {
  aspect-ratio: 9 / 16;
  height: auto;
  max-height: none;
  width: min(100%, 320px);        /* colonne portrait centrée dans la carte */
  margin-inline: auto;
  background: var(--ink);
  display: block;
}

.video-thumb-portrait {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Fond : l'image en cover + flou → comble les côtés sans bande morte. */
.video-thumb-portrait .video-thumb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.1) brightness(0.72);
  transform: scale(1.15);         /* mange les bords flous */
  transition: none;
}

/* Premier plan : l'image ENTIÈRE, non rognée (texte du reel lisible). */
.video-thumb-portrait .video-thumb-fg {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* rien n'est coupé */
  transition: transform 0.4s;
}

.mission:hover .video-thumb-portrait .video-thumb-fg { transform: scale(1.03); }

/* Timecode mono en bas — cohérent avec les minias paysage + ADN technique. */
.video-thumb-tc {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
}

/* Placeholder vidéo honnête (REF 008 — fichier non livré). */
.video-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--blue-deep) 5%, transparent) 10px 20px),
    var(--blue-tint);
}

.video-placeholder-badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border: 1px solid color-mix(in srgb, var(--blue-deep) 30%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.video-placeholder-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blue-deep);
}

/* Fiche design : 4 visuels en 2×2. */
.mission-media-quad {
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  aspect-ratio: 1 / 1;
}

.shot {
  position: relative;
  overflow: hidden;
  background: var(--blue-tint);
  /* Empêche l'auto-min-size de la grille/flex de s'étendre à la taille
     intrinsèque de l'image quand elle arrive (lazy) → zéro reflow / CLS. */
  min-width: 0;
  min-height: 0;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.mission:hover .shot img { transform: scale(1.04); }

.shot.is-empty img { display: none; }

.shot.is-empty::after {
  content: "à venir — " attr(data-file);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--blue-deep);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--blue-deep) 5%, transparent) 10px 20px),
    var(--blue-tint);
  border: 1px dashed color-mix(in srgb, var(--blue-deep) 35%, transparent);
  margin: 6px;
  border-radius: 8px;
}

.video-slot {
  position: relative;
  background: var(--blue-tint);
}

.video-slot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-slot.is-empty video { display: none; }

.video-slot.is-empty::after {
  content: "vidéo à venir — " attr(data-file);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--blue-deep);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--blue-deep) 5%, transparent) 10px 20px),
    var(--blue-tint);
  border: 1px dashed color-mix(in srgb, var(--blue-deep) 35%, transparent);
  margin: 6px;
  border-radius: 8px;
}

.mission-body {
  padding: 1.5rem 1.6rem 1.25rem;
  flex: 1;
}

.mission-ref {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--brass);
  margin-bottom: 0.6rem;
}

.mission-body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.65rem;
}

/* ---------- Fiche allégée : phrase courte + 2 métas ---------- */

.mission-line {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.mission-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.mission-meta > div {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.mission-meta dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  flex-shrink: 0;
  min-width: 4.6rem;
}

.mission-meta dd {
  font-size: 0.86rem;
  color: var(--ink);
  min-width: 0;
}

.mission-meta .badge { align-self: center; }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
}

.badge-prod { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge-cours { color: var(--blue-deep); background: var(--blue-tint); }
/* Ton laiton foncé réservé au badge pour atteindre le contraste AA (4.5:1).
   #7a5a30 sur le fond composité (~rgb(229,229,225)) = 4.99:1, contre 4.03:1
   avec --brass (#8a683a). Le --brass décoratif reste inchangé ailleurs. */
.badge-livre { color: #7a5a30; background: color-mix(in srgb, var(--brass) 14%, transparent); }

/* ---------- Contact ---------- */

.section-contact {
  text-align: left;
  /* Dernière section, toujours hors-écran au chargement (perf #3). */
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
  /* Section finale courte : sans hauteur mini, la page se termine avant que
     l'ancre #contact puisse remonter sous la topbar (le fond de page est
     atteint alors que l'eyebrow est encore ~250 px trop bas). On garantit
     l'espace de scroll pour un atterrissage propre à 88 px. Le padding de
     .section garde le contenu aligné en haut ; l'espace ajouté est en bas. */
  min-height: calc(100svh - 88px);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.contact-meta {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
}

.footer a { color: var(--blue-deep); }

/* ---------- Marquee outils (entre Atelier et Missions) ---------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  padding: 0.7rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}

.marquee { position: relative; }

/* Pause au survol souris ET au focus clavier (belt-and-suspenders WCAG 2.2.2). */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* Pause explicite pilotée par le bouton (état persistant, opérable clavier). */
.marquee.is-paused .marquee-track { animation-play-state: paused !important; }

.marquee-toggle {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.marquee-toggle:hover { color: var(--ink); border-color: var(--brass); }
.marquee-toggle:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

/* Icône pause (deux barres) par défaut ; bascule en triangle "lecture" quand pausé. */
.marquee-toggle-icon {
  display: block;
  width: 0.5rem;
  height: 0.6rem;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.marquee.is-paused .marquee-toggle-icon {
  width: 0;
  height: 0;
  border-left: 0.55rem solid currentColor;
  border-right: 0;
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
}

.marquee-list {
  display: flex;
  align-items: center;
  list-style: none;
  flex-shrink: 0;
}

.marquee-list li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 0 1.6rem;
  position: relative;
}

.marquee-list li::after {
  content: "◆";
  position: absolute;
  right: -0.35rem;
  color: var(--brass);
  font-size: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Miniature vidéo cliquable (feed → modale) ---------- */

.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--blue-tint);
  cursor: pointer;
  overflow: hidden;
}

.video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

/* La miniature verticale remplit le cadre (cover) : le format « reels » complet
   reste visible dans la modale au clic ; ici on privilégie un feed net. */
.mission:hover .video-thumb img { transform: scale(1.04); }

.video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px -6px rgba(31, 46, 56, 0.6);
  transition: background-color 0.2s, transform 0.2s;
}

.video-thumb-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.video-thumb:hover .video-thumb-play {
  background: var(--blue-deep);
  transform: translate(-50%, -50%) scale(1.07);
}

.video-thumb:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .video-thumb img, .video-thumb-play { transition: none; }
}

/* ---------- CTA fiche + modale détail ---------- */

.mission-cta {
  margin-top: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border: 1px solid color-mix(in srgb, var(--blue-deep) 22%, transparent);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.mission-cta:hover { background: color-mix(in srgb, var(--blue-deep) 16%, var(--blue-tint)); transform: translateY(-1px); }
.mission-cta:active { transform: translateY(0); }

.mission-media.is-clickable { cursor: pointer; }

.pm[hidden] { display: none; }

.pm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.pm.is-open { opacity: 1; }

.pm-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 58%, transparent);
}

.pm-dialog {
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  transform: translateY(12px) scale(0.99);
  transition: transform 0.22s ease;
}

.pm.is-open .pm-dialog { transform: none; }

.pm-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 3vw, 1.75rem);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.pm-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.pm-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pm-close:hover { background: var(--blue-tint); }

.pm-body { padding: clamp(1.1rem, 3vw, 1.75rem); }

.pm-intro {
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 1.75rem;
}

/* Cartouche « dossier technique » dans la modale (dt/dd, langage cotes/REF). */
.pm-cartouche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pm-cartouche > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.pm-cartouche dt {
  flex: 0 0 auto;
  min-width: 5.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pm-cartouche dd {
  min-width: 0;
  font-size: 0.9rem;
  color: var(--ink);
}

/* Placeholder honnête (vidéo non livrée, ex. REF 008 pub MMAD). */
.pm-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 220px;
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--line) 40%, transparent) 0 1px, transparent 1px 12px),
    var(--blue-tint);
  border: 1px dashed color-mix(in srgb, var(--blue-deep) 30%, var(--line));
  border-radius: 12px;
}

.pm-placeholder-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  padding: 0.25rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--blue-deep) 35%, var(--line));
  border-radius: 999px;
}

.pm-section + .pm-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.pm-section-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.pm-video {
  display: flex;
  justify-content: center;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.15rem;
}

.pm-video video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 68vh;
}

.pm-gallery {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.pm-shot {
  flex: 0 0 auto;
  width: clamp(150px, 40vw, 210px);
  scroll-snap-align: start;
}

.pm-shot img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--blue-tint);
}

.pm-shot figcaption {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
}

body.pm-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pm, .pm-dialog { transition: none; }
  .pm-dialog { transform: none; }
}

/* ---------- Reveal ---------- */

/* Fallback IntersectionObserver (GSAP absent) : masqué uniquement si le JS tourne
   (html.js posé par le script inline du head), et PAS si GSAP prend la main (html.gsap).
   Sans JS, tout le contenu reste visible. */
html.js:not(.gsap) .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js:not(.gsap) .reveal.in {
  opacity: 1;
  transform: none;
}

/* Quand GSAP est actif, l'état caché des reveals est posé par CSS (et non plus
   par un gsap.set() sur les 17 éléments au chargement, qui forçait le layout des
   éléments hors-écran et pénalisait le TBT). L'IntersectionObserver anime ensuite
   chaque élément avec gsap.fromTo() à son entrée. On ne masque QUE hors
   reduced-motion, et le hero se dé-masque tout seul (sa timeline retire .reveal).
   Filet de sécurité : si l'observer ne tire jamais, le contenu reste accessible
   (voir .reveal.is-shown ci-dessous, posé dès qu'un élément est révélé). */
@media (prefers-reduced-motion: no-preference) {
  html.gsap .reveal { opacity: 0; }
  html.gsap .reveal.is-shown { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js:not(.gsap) .reveal { opacity: 1; transform: none; transition: none; }
  .status-pill .dot { animation: none; }
  .btn, .mission, .shot img { transition: none; }
  .marquee-track { animation: none !important; }
  /* Animation figée : le bouton pause/lecture n'a plus d'objet. */
  .marquee-toggle { display: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .missions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }

  .hero-portrait {
    order: -1;
    max-width: 340px;
    padding-right: 1.9rem;
  }

  .bench-grid { grid-template-columns: 1fr; }

  .status-pill { display: none; }

  .nav-toggle { display: flex; margin-left: auto; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 0.75rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    margin-left: 0;
  }

  .nav.is-open { display: flex; }

  .nav-link { padding: 0.7rem 0.85rem; font-size: 1rem; }
}

@media (max-width: 640px) {
  .hero h1 br { display: none; }

  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding-left: 1.5rem;
  }

  .hero-stats { gap: 1.25rem 2rem; }

  .mission-media { aspect-ratio: 16 / 9; grid-auto-flow: row; grid-template-columns: 1fr; }

  /* Une seule vignette en mobile pour les galeries en bande (pas le quad 2×2,
     pas les médias vidéo qui n'ont qu'un enfant). */
  .mission-media:not(.mission-media-quad):not(.mission-media-video) .shot:nth-child(n + 2) { display: none; }

  .mission-meta dt { min-width: 4rem; }

  .mission-body { padding: 1.25rem 1.1rem 1rem; }
}

/* ============================================================
   POSTES v3 — sommaire, bandeaux d'univers, SVG line-art cotés.
   Ambiance par poste via --poste-accent (posée en inline sur
   .poste-card et .poste). Teintes prises dans la palette existante.
   ============================================================ */

:root {
  /* Vert-atelier pour le poste Établi : dérivé de --ok, reste dans la famille. */
  --atelier: #34564a;
  /* Accent d'ambiance piloté par JS ; valeur de repli = bleu-deep. */
  --poste-accent: #38607c;
}

/* Accent statique par poste (fallback + reduced-motion) ; le JS interpole
   entre ces mêmes valeurs au scroll (spec-animations §4). */
#poste-ordinateur { --poste-accent: var(--blue-deep); }
#poste-camera { --poste-accent: var(--brass); }
#poste-etabli { --poste-accent: var(--atelier); }

/* ---------- SOMMAIRE « les postes » ---------- */

.postes-index .section-head { margin-bottom: clamp(2rem, 4vh, 3rem); }

.poste-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.poste-card { min-width: 0; }

.poste-link {
  --edge: color-mix(in srgb, var(--poste-accent) 30%, var(--line));
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.5rem 1.35rem;
  text-decoration: none;
  color: var(--ink);
  background:
    linear-gradient(color-mix(in srgb, var(--poste-accent) 4%, var(--card)), var(--card)),
    var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s, border-color 0.28s;
}

/* grille de fond « plan » ténue, teintée par le poste */
.poste-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--poste-accent) 6%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--poste-accent) 6%, transparent) 0 1px, transparent 1px 26px);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.28s;
}

.poste-link:hover,
.poste-link:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--poste-accent);
  outline: none;
}

.poste-link:hover::before { opacity: 0.9; }

.poste-link:focus-visible {
  box-shadow: var(--shadow-lift), 0 0 0 3px color-mix(in srgb, var(--poste-accent) 35%, transparent);
}

.poste-card-num {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--poste-accent);
}

.poste-card-num::after {
  content: "";
  display: inline-block;
  width: 1.8rem; height: 1px;
  margin-left: 0.7rem;
  vertical-align: middle;
  background: var(--poste-accent);
}

.poste-card-svg {
  position: relative;
  color: var(--poste-accent);       /* currentColor du SVG */
  margin: 0.9rem 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poste-card-svg svg {
  width: 100%;
  height: auto;
  max-height: 190px;
}

.poste-card-foot { position: relative; margin-top: auto; }

.poste-card-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.poste-card-tag {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.poste-card-count {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.poste-card-count span {
  color: var(--poste-accent);
  font-weight: 500;
}

.poste-card-go {
  position: relative;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--poste-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.25s;
}

.poste-link:hover .poste-card-go,
.poste-link:focus-visible .poste-card-go {
  opacity: 1;
  transform: none;
}

/* ---------- BANDEAU DE POSTE (header d'univers) ---------- */

.poste {
  position: relative;
  max-width: none;
  padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(4rem, 9vh, 6.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
}

/* Le corps du poste (grille de fiches) reste différé ; le bandeau NON
   (piège content-visibility × getTotalLength, spec-animations §0.1/§1.4). */
.poste .missions-grid,
.poste .subposte {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.poste > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
}

/* Fond « wash » léger qui suit l'accent (couleur seulement → aucun layout). */
.poste::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 50% 0%,
    color-mix(in srgb, var(--poste-accent) 5%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.poste-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vh, 3.75rem);
}

/* Numéro de poste géant, en filigrane derrière le SVG */
.poste-mark {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 4vw, 3rem);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: clamp(9rem, 22vw, 17rem);
  font-weight: 400;
  line-height: 0.8;
  color: color-mix(in srgb, var(--poste-accent) 9%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Masqué au repos seulement si le JS tourne (le module reveal l'anime). */
html.js .poste-header:not(.is-shown) .poste-mark { opacity: 0; }

.poste-figure {
  position: relative;
  z-index: 1;
  color: var(--poste-accent);       /* currentColor du SVG */
  order: 2;
}

.poste-figure svg {
  width: 100%;
  height: auto;
  max-height: 300px;
}

.poste-intro { position: relative; z-index: 1; order: 1; min-width: 0; }

.poste-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0.2rem 0 0.9rem;
}

.poste-intro .eyebrow { margin-bottom: 0.9rem; }
.poste-intro .eyebrow-num { color: var(--poste-accent); }
.poste-intro .eyebrow-num::after { background: var(--poste-accent); }
.poste-eyebrow { color: var(--poste-accent); }

.poste-lede {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 1.6rem;
}

.poste-tooling {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}

.poste-tooling-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--poste-accent);
  margin-bottom: 0.7rem;
}

.poste-tooling ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
}

.poste-tooling li {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--poste-accent) 22%, var(--line));
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  background: color-mix(in srgb, var(--poste-accent) 4%, var(--card));
}

.poste .missions-grid { margin-top: 0; }

/* ---------- SOUS-POSTES (Photo / Vidéo dans la Caméra) ---------- */

.subposte + .subposte { margin-top: clamp(2.75rem, 6vh, 4rem); }

.subposte-head {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.subposte-num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--poste-accent);
  flex-shrink: 0;
}

.subposte-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.subposte-lede {
  flex: 1 1 20rem;
  min-width: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.subposte-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
}

/* ---------- SVG postes : traits fins, tracé animable ---------- */

.poste-svg { display: block; }
.poste-svg-dims { opacity: 0.7; }

/* Épaisseur de trait stable si le SVG est mis à l'échelle. */
[data-draw] .draw { vector-effect: non-scaling-stroke; }

/* Hook tracé au scroll (le spec animations pilote --l via getTotalLength).
   Fallback : sans JS/GSAP, tout est visible (aucun dashoffset appliqué ici). */
html.gsap .poste-svg .draw {
  stroke-dasharray: var(--l, none);
  stroke-dashoffset: var(--l, 0);
}

/* ---------- Micro-anims hover des objets (desktop, pointer:fine) ---------- */

@media (hover: hover) and (pointer: fine) {
  /* Caméra : l'iris se resserre */
  #cam-shutter, #cam-shutter-b { transform-origin: 290px 135px; transition: transform 0.35s ease; }
  .poste-link:hover #cam-shutter,
  .poste-figure:hover #cam-shutter-b { transform: scale(0.82); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }

  /* Étau : le mors mobile se resserre, la poignée tourne */
  #vice-jaw, #vice-jaw-b { transform-origin: center; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
  .poste-link:hover #vice-jaw,
  .poste-figure:hover #vice-jaw-b { transform: translateX(10px); }
  #vice-handle, #vice-handle-b { transform-origin: 18px 128px; transition: transform 0.5s ease; }
  .poste-link:hover #vice-handle,
  .poste-figure:hover #vice-handle-b { transform: rotate(-28deg); }

  /* Ordinateur : le caret clignote */
  #pc-caret, #pc-caret-b { transition: opacity 0.2s; }
  .poste-link:hover #pc-caret,
  .poste-figure:hover #pc-caret-b { animation: pc-blink 0.9s steps(1) infinite; }
}

@keyframes pc-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* ---------- Responsive postes ---------- */

@media (max-width: 900px) {
  .poste-cards { grid-template-columns: 1fr; }
  .poste-card-svg svg { max-height: 210px; }

  .poste-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .poste-figure { order: 1; max-width: 420px; }
  .poste-intro { order: 2; }
  .poste-mark {
    top: clamp(1rem, 4vw, 2rem);
    right: clamp(1rem, 5vw, 2rem);
    transform: none;
    font-size: clamp(6rem, 24vw, 10rem);
  }
}

@media (max-width: 640px) {
  .poste-card-svg svg { max-height: 170px; }
  .poste-figure svg { max-height: 230px; }
  .subposte-head { gap: 0.4rem 1rem; }
  .subposte-count { flex-basis: 100%; }
  .poste-tooling li { font-size: 0.72rem; padding: 0.28rem 0.7rem; }
}

/* ============================================================
   ANIMATIONS v3 — hooks CSS (le JS est posé par l'agent app.js).
   ============================================================ */

/* ---------- Bandeau : machine à écrire mono (spec-animations §2) ---------- */

.poste-typed {
  position: relative;
  display: inline-block;
  white-space: pre;
}
.poste-typed .tw-ghost { visibility: hidden; }
.poste-typed .tw-live { position: absolute; left: 0; top: 0; }
.poste-typed.is-typing .tw-live::after {
  content: "▌";
  color: var(--poste-accent, var(--brass));
  animation: tw-caret 0.9s steps(1) infinite;
}
@keyframes tw-caret { 50% { opacity: 0; } }
/* Sans JS, le texte statique reste visible tel quel. */
html:not(.js) .poste-typed .tw-ghost { visibility: visible; }

/* ---------- Stagger des fiches (spec-animations §3) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.gsap .mission:not(.is-shown) { opacity: 0; }
  html.gsap .mission.is-shown { opacity: 1; }
}
html.js:not(.gsap) .mission {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
html.js:not(.gsap) .mission.in,
html.js:not(.gsap) .mission.is-shown { opacity: 1; transform: none; }

/* ---------- Réticule « instrument » (spec-animations §5) ---------- */

.reticle {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}
.reticle.is-visible { opacity: 1; }

.reticle-h, .reticle-v {
  position: absolute;
  background: color-mix(in srgb, var(--poste-accent, var(--blue-deep)) 55%, transparent);
}
.reticle-h { left: -14px; top: 0; width: 28px; height: 1px; }
.reticle-v { top: -14px; left: 0; width: 1px; height: 28px; }
.reticle-dot {
  position: absolute; top: -2px; left: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  border: 1px solid var(--poste-accent, var(--blue-deep));
  transition: transform 0.18s ease;
}
.reticle-coord {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--poste-accent, var(--blue-deep)) 75%, transparent);
  white-space: nowrap;
}
.reticle.is-big .reticle-h { left: -20px; width: 40px; }
.reticle.is-big .reticle-v { top: -20px; height: 40px; }
.reticle.is-big .reticle-dot { transform: scale(2.4); }

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .reticle { display: none !important; }
}

/* ---------- Hover objets sommaire + CTA + timecode (spec-animations §6) ---------- */

.obj svg { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); transform-origin: center; }
.obj.is-hover svg { transform: translateY(-4px) scale(1.02); }

/* Timecode « REC » au hover des minias paysage (celles sans .video-thumb-tc statique). */
.video-thumb:not(.video-thumb-portrait)::before {
  content: "REC ● 00:00";
  position: absolute;
  top: 0.55rem; left: 0.6rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.video-thumb:not(.video-thumb-portrait):hover::before,
.video-thumb:not(.video-thumb-portrait):focus-visible::before { opacity: 0.9; }

/* CTA fiche : flèche qui avance au hover (le libellé ne contient plus la flèche). */
.mission-cta::after {
  content: "→";
  display: inline-block;
  transition: transform 0.2s ease;
}
.mission-cta:hover::after { transform: translateX(4px); }

/* ---------- Déclencheur photo : flash de cadre (spec-animations §7) ---------- */

[data-shutter] { position: relative; }

.shutter-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--paper);
  opacity: 0;
}
.shutter-flash.is-firing { animation: shutter-fire 0.12s ease-out 1; }
@keyframes shutter-fire {
  0%   { opacity: 0; }
  35%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ---------- Reduced-motion : tout figé, objets/cotes visibles ---------- */

@media (prefers-reduced-motion: reduce) {
  html.gsap .mission { opacity: 1 !important; }
  html.gsap .poste-header .poste-mark { opacity: 1 !important; }
  html.gsap .poste-svg .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .poste-link, .poste-card-go { transition: none; }
  #cam-shutter, #cam-shutter-b, #vice-jaw, #vice-jaw-b,
  #vice-handle, #vice-handle-b, #pc-caret, #pc-caret-b {
    transition: none; animation: none; transform: none;
  }
  .obj svg { transition: none; }
  .poste-typed.is-typing .tw-live::after { display: none; }
  .video-thumb::before, .mission-cta::after { transition: none; }
  .shutter-flash { display: none !important; }
  .video-thumb-portrait .video-thumb-fg { transition: none; }
}

@media (max-width: 640px) {
  .mission-media.is-vertical { width: min(100%, 260px); }
}