/* ═══════════════════════════════════════════════════════════
   PAGES MISSIONS — complément de styles.css (tokens, dock, footer).
   Pages en défilement NATIF : le contenu est lisible sans JavaScript
   (SEO) ; mission.js ajoute les effets par-dessus.
   ═══════════════════════════════════════════════════════════ */

body.mission-page { overflow-x: hidden; }
.m-wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.m-narrow { width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; }

/* ─── en-tête ─── */
.m-hero {
  position: relative;
  min-height: 64vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 150px 0 9vh;
  overflow: hidden;
}
.m-bigsigle {
  position: absolute; top: 14vh; left: var(--gutter);
  font-size: 42vw; line-height: 0.8; font-weight: 500;
  letter-spacing: -0.06em; white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.055);
  pointer-events: none; user-select: none;
  will-change: transform;
}
.m-crumbs { position: relative; color: var(--ash); margin-bottom: 5vh; }
.m-crumbs a { color: var(--ink); }
.m-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.m-kicker { position: relative; color: var(--lime); margin-bottom: 18px; }
.m-title {
  position: relative;
  font-size: clamp(34px, 5vw, 80px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 400;
  text-wrap: balance;
}
.m-title .mw-l { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.m-title .mw-i { display: inline-block; }
.m-head { position: relative; }

/* ─── photo à gauche, deux paragraphes à droite, centrés sur la photo ─── */
.m-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(28px, 5vw, 84px);
  padding: 0 0 14vh;
}
.m-visual { margin: 0; }
.m-visual-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--radius);
}
.m-visual-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; will-change: transform; }
.m-intro-text p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.m-intro-text p + p { margin-top: 1.2em; }
@media (max-width: 900px) {
  .m-intro { grid-template-columns: 1fr; gap: 5vh; padding-bottom: 10vh; }
}

/* ─── pour qui / ce que je livre ─── */
.m-lists {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6vw;
  padding: 12vh 0 16vh;
  border-top: 1px solid var(--ink-faint);
}
.m-lists h2 { font-size: var(--t-heading); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 5vh; }
.m-list { counter-reset: it; }
.m-list li {
  counter-increment: it;
  display: grid; grid-template-columns: 3.2em 1fr; gap: 12px;
  padding: 22px 0;
  border-top: 1px solid var(--ink-faint);
  font-size: 19px; line-height: 1.45;
}
.m-list li::before {
  content: counter(it, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  color: var(--lime); padding-top: 5px;
}

/* ─── secteurs : bandeau défilant sur l'accent ─── */
.m-sectors {
  background: var(--lime); color: var(--lime-ink);
  padding: 7vh 0; overflow: hidden;
}
.m-sectors .m-label { color: var(--lime-ink); opacity: 0.75; margin-bottom: 3vh; }
.m-marquee { display: flex; width: max-content; }
.m-marquee-track {
  display: flex; flex-shrink: 0;
  font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.03em; line-height: 1.1;
  white-space: nowrap;
  animation: m-marquee 48s linear infinite;
}
.m-marquee-track span { padding-right: 0.5em; }
.m-marquee-track span::after { content: '·'; padding-left: 0.5em; opacity: 0.5; }
@keyframes m-marquee { to { transform: translateX(-100%); } }

/* ─── appel à l'action ─── */
.m-cta { padding: 18vh 0 14vh; text-align: center; }
.m-cta .m-label { color: var(--ash); margin-bottom: 4vh; }
.m-cta-link {
  position: relative; display: inline-block;
  font-size: clamp(34px, 5.4vw, 84px); letter-spacing: -0.035em; line-height: 1.1;
  padding: 0.22em 0.5em;
}
.m-cta-link .cta-oval path { stroke: var(--ink); }

/* ─── les autres missions ─── */
.m-others { padding: 0 0 14vh; }
.m-others .m-label { color: var(--ash); margin-bottom: 4vh; }
.m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 36px); }
.m-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink); color: #ffffff;
  aspect-ratio: 4 / 3;
}
.m-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; transform: scale(1.06);
  transition: transform 1.2s var(--ease-out), opacity .6s;
  border-radius: 0;
}
.m-card:hover img { transform: scale(1); opacity: 0.35; }
.m-card-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px, 2.6vw, 40px);
}
.m-card-sigle { font-size: clamp(64px, 9vw, 150px); line-height: 0.85; letter-spacing: -0.05em; }
.m-card-title { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; max-width: 18em; }
.m-card-go { display: inline-block; margin-top: 10px; transition: transform .5s var(--ease-out); }
.m-card:hover .m-card-go { transform: translateX(8px); }

/* ─── footer : menu des missions (aussi sur l'accueil) ─── */
.footer-missions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  margin-top: 28px;
}
.footer-missions a { color: var(--ink); position: relative; }
.footer-missions a[aria-current] { color: var(--lime); }
.footer-missions a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── footer : liens légaux (toutes les pages) ─── */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 7vh; color: var(--ash); }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ─── pages légales ─── */
.lg-page { padding: 170px 0 14vh; }
.lg-page h1 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.035em; line-height: 1; margin-bottom: 7vh; }
.lg-page h2 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.015em; margin: 6vh 0 2vh; }
.lg-page p, .lg-page li { font-size: 18px; line-height: 1.6; }
.lg-page p + p { margin-top: 0.8em; }
.lg-page ul { margin-top: 1.2em; }
.lg-page li { padding: 12px 0; border-top: 1px solid var(--ink-faint); }
.lg-page a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.lg-list { border-top: 1px solid var(--ink-faint); }
.lg-list div { display: grid; grid-template-columns: minmax(140px, 0.4fr) 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ink-faint); }
.lg-list dt { color: var(--ash); font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; padding-top: 4px; }
.lg-list dd { font-size: 18px; }
@media (max-width: 600px) { .lg-list div { grid-template-columns: 1fr; gap: 4px; } }

/* ─── lien « en savoir plus » des étapes (accueil) ─── */
.pstep-link {
  display: inline-block; margin-top: 18px;
  color: var(--ink); border-bottom: 1px solid var(--lime); padding-bottom: 3px;
}
.pstep-link:hover { color: var(--lime); }

/* ─── apparitions (mission.js) ─── */
.js .m-rise { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .m-rise.in { opacity: 1; transform: none; }
.js .m-title .mw-i { transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
.js.is-ready .m-title .mw-i { transform: none; }
.js .m-list li { opacity: 0; transform: translateX(-18px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .m-list.in li { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .m-hero { min-height: 52vh; padding-top: 120px; }
  .m-bigsigle { font-size: 64vw; top: 16vh; }
  .m-lists { grid-template-columns: 1fr; gap: 10vh; }
  .m-list li { font-size: 17px; padding: 18px 0; }
  .m-cards { grid-template-columns: 1fr; }
  .m-card { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .m-marquee-track { animation: none; }
  .js .m-rise, .js .m-list li, .js .m-title .mw-i { opacity: 1; transform: none; transition: none; }
}

/* ═══════════ ACCUEIL · TOUTES LES RÉFÉRENCES ═══════════ */
.card[data-full] { cursor: zoom-in; }
.card[data-full]:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.refs-all { position: relative; z-index: 1; margin-top: 22vh; }
.refs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--ink); margin-bottom: 5vh; }
.refs-intro { max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--ash); }
.refs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5vh clamp(16px, 2vw, 32px); }
.ref-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ref-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.ref-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--ink-faint); }
.ref-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1s var(--ease-out); }
.ref-btn:hover .ref-img img { transform: scale(1.05); }
.ref-title { font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; margin-top: 14px; }
.ref-meta { color: var(--ash); margin-top: 6px; }
@media (max-width: 1100px) { .refs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .refs-grid { grid-template-columns: repeat(2, 1fr); } .refs-all { margin-top: 12vh; } .ref-title { font-size: 16px; } }

/* ═══════════ VISIONNEUSE (lightbox.js) ═══════════ */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  padding: 64px 12px 56px;
  background: rgba(20, 24, 32, 0.94);
  color: #ffffff;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.lb.is-open { opacity: 1; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; height: 100%; }
.lb-img {
  max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; border-radius: var(--radius);
  transform: scale(.97); transition: transform .45s var(--ease-out), opacity .25s;
}
.lb.is-open .lb-img { transform: none; }
.lb.is-loading .lb-img { opacity: .35; }
.lb-cap { margin-top: 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; max-width: 60em; }
.lb-title { font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.01em; }
.lb-meta { opacity: .7; }
.lb-close, .lb-nav {
  width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: transparent; color: #ffffff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .25s, border-color .25s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .12); border-color: #ffffff; }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.lb-nav { justify-self: center; }
.lb-close { position: absolute; top: 12px; right: 16px; font-size: 28px; }
.lb-count { position: absolute; top: 28px; left: 24px; opacity: .7; }
@media (max-width: 700px) {
  .lb { grid-template-columns: 1fr; padding: 64px 10px 88px; }
  .lb-nav { position: absolute; bottom: 20px; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
}

/* ═══════════ TEXTES AFFICHÉS DIRECTEMENT (aucune apparition au scroll) ═══════════ */
.lb[hidden] { display: none; }   /* sinon le calque fermé bloque tous les clics */
.reveal, .reveal.in-view { opacity: 1 !important; transform: none !important; transition: none !important; }
.footer-name .chi { transform: none !important; transition: none !important; }
.js .m-rise, .js .m-list li, .js .m-title .mw-i { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ═══════════ TEXTE JUSTIFIÉ (tout le site) ═══════════ */
.m-intro-text p, .m-list li, .lg-page p, .lg-page li,
.ab-p, .pstep p, .refs-intro {
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
}

/* ═══════════ GRANDS ÉCRANS : tout grandit avec la fenêtre ═══════════
   Les tailles du site sont plafonnées pour un écran d'ordinateur
   portable. Au-delà de 1600 px de large (grand moniteur, zoom arrière),
   un coefficient --k agrandit photos, titres, menu et textes, pour garder
   les mêmes proportions qu'à 1440 px. Sans effet en dessous. */
@media (min-width: 1600px) { :root { --k: 1.1; } }
@media (min-width: 1900px) { :root { --k: 1.25; } }
@media (min-width: 2200px) { :root { --k: 1.45; } }
@media (min-width: 2500px) { :root { --k: 1.65; } }
@media (min-width: 2800px) { :root { --k: 1.85; } }
@media (min-width: 3200px) { :root { --k: 2.1; } }
@media (min-width: 3600px) { :root { --k: 2.35; } }
@media (min-width: 1600px) {
  :root { --t-heading: clamp(34px, 4.6vw, calc(57px * var(--k))); }
  body { font-size: calc(19px * var(--k)); }
  .fl { width: calc(var(--w) * var(--k)); }
  .mono { font-size: calc(12px * var(--k)); }
  .dock { padding: calc(8px * var(--k)) calc(8px * var(--k)) calc(8px * var(--k)) calc(18px * var(--k)); top: calc(14px * var(--k)); }
  .dock-wordmark { font-size: calc(19px * var(--k)); }
  .dock-link { padding: calc(9px * var(--k)) calc(10px * var(--k)); }
  .dock-cta { padding: calc(10px * var(--k)) calc(14px * var(--k)); }
  .ab-left { width: min(calc(31vw), calc(56vh)); }
  .ab-right { max-width: calc(580px * var(--k)); }
  .ab-p { font-size: calc(21px * var(--k)); }
  .ab-num { font-size: calc(58px * var(--k)); }
  .pstep p { font-size: calc(19px * var(--k)); }
  .psteps { width: min(calc(560px * var(--k)), 42vw); }
  .ref-title, .card figcaption { font-size: calc(19px * var(--k)); }
  .footer-mail { font-size: var(--t-heading); }
  .m-wrap { width: min(calc(1120px * var(--k)), 100% - 2 * var(--gutter)); }
  .m-narrow { width: min(calc(760px * var(--k)), 100% - 2 * var(--gutter)); }
  .m-intro-text p { font-size: calc(22px * var(--k)); }
  .m-list li, .lg-page p, .lg-page li { font-size: calc(19px * var(--k)); }
  .m-title { font-size: clamp(34px, 5vw, calc(80px * var(--k))); }
}

/* ═══════════ SCÈNE FINALE : une phrase par ligne, à toutes les largeurs ═══════════
   Les phrases étaient dans un même paragraphe et se recollaient ou se
   coupaient selon la largeur de la fenêtre (plafond fixe de 940 px alors
   que la police grandit). Chaque phrase est maintenant sa propre ligne ;
   sur écran étroit elle se coupe en deux lignes équilibrées. */
.final-text { max-width: none; width: 100%; }
.final-text br { display: none; }
.final-text .fs { display: block; text-wrap: balance; }