/* MAD & Company — site vitrine
   Valeurs reprises du prototype validé (maquette 1440 × 900, mobile 390 × 844),
   rendues fluides entre les deux. Ne pas modifier la charte ici. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Charte */
  --ink: #111111;
  --paper: #FFFFFF;
  --sable: #E6E3DF;
  --sable-2: #F2F0ED;
  --bronze: #9A5A2C;
  --cuivre: #C08A45;
  --or: #D9B56A;
  --text-2: #3A3633;
  --text-3: #6B6661;
  --line: #D9D6D2;
  --line-2: #BDB8B2;
  --line-dark: #2A2623;
  --envol-gradient: linear-gradient(38.7deg, #9A5A2C 0%, #C08A45 55%, #D9B56A 100%); /* charte : 51,3° */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(22px, 4.45vw, 64px);
  --header-h: 76px;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.page-sub { background: var(--paper); }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], .site-nav__list, .menu-mobile__list, .metiers__nav ul, .site-footer__cities, .work-detail__markets { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
[data-theme="light"] :focus-visible { outline-color: var(--bronze); }
main:focus { outline: none; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* L'esperluette d'Archivo ressemble à un « B » inversé : tout « & » visible est
   composé dans une linéale classique. */
.amp { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: inherit; }
.br-lg { display: none; }
@media (min-width: 768px) { .br-lg { display: inline; } }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 12px 18px; font-weight: 600;
  transform: translateY(-160%); transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: none; }

/* ─── Typo ──────────────────────────────────────────────────────────────── */
.display {
  font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance;
}
.display--xl { font-size: clamp(3.4rem, 10.83vw, 9.75rem); line-height: .86; }
.display--l { font-size: clamp(2.6rem, 7.22vw, 6.5rem); line-height: .9; letter-spacing: -.01em; }
.display--m { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: .9; letter-spacing: -.01em; }
.eyebrow { font-size: 15px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.eyebrow--bronze { color: var(--bronze); }
.eyebrow--or { color: var(--or); }
.lead { font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 30em; }
[data-theme="dark"] .lead { color: rgba(255, 255, 255, .78); }

/* ─── Boutons & liens ───────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-weight: 600; font-size: 17px; line-height: 1.2;
  padding: 18px 28px; text-align: center; border: 0; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn--lg { padding: 20px 32px; }
.btn--xl { font-size: clamp(17px, 1.53vw, 22px); padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2.8vw, 40px); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--or); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--bronze); color: var(--paper); }

.link-underline {
  display: inline-block; font-size: 15px; padding: 6px 0 4px;
  border-bottom: 1px solid currentColor; transition: color 200ms ease, border-color 200ms ease;
}
.link-underline:hover { color: var(--bronze); }
[data-theme="dark"] .link-underline:hover { color: var(--or); }
.link-underline--strong { font-size: 20px; font-weight: 500; border-bottom-width: 2px; padding-bottom: 6px; }
.link-underline--soft { font-size: 17px; color: var(--text-2); border-bottom-color: var(--line-2); }

.tag { display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 4px 8px; }
.tag--demo { background: var(--or); color: var(--ink); }

/* ─── Header ────────────────────────────────────────────────────────────── */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; }
.site-header__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--gutter); min-height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.site-header[data-theme="dark"] .site-header__bar { background: rgba(17, 17, 17, .94); border-color: var(--line-dark); color: var(--paper); }
.site-header[data-theme="light"] .site-header__bar { background: rgba(255, 255, 255, .97); border-color: var(--line); color: var(--ink); }
.site-header[data-at-top="true"][data-theme="dark"]:not(.is-menu-open) .site-header__bar { background: transparent; border-color: transparent; }
.site-header__logo { display: block; flex-shrink: 0; }
.logo { height: 28px; width: auto; }
.site-header[data-theme="dark"] .logo--on-light,
.site-header[data-theme="light"] .logo--on-dark { display: none; }

.site-nav__list { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); margin: 0; font-size: 15px; letter-spacing: .04em; }
.site-nav__list a { display: inline-block; padding: 8px 0; transition: color 200ms ease; }
.site-nav__list a:hover { color: var(--or); }
.site-header[data-theme="light"] .site-nav__list a:hover { color: var(--bronze); }
.site-nav__list a[aria-current="page"] { box-shadow: inset 0 -1px 0 currentColor; }
.site-nav__cta a { padding: 12px 22px; font-weight: 600; transition: background-color 200ms ease, color 200ms ease; }
.site-header[data-theme="dark"] .site-nav__cta a { background: var(--paper); color: var(--ink); }
.site-header[data-theme="light"] .site-nav__cta a { background: var(--ink); color: var(--paper); }
.site-header .site-nav__cta a:hover { background: var(--or); color: var(--ink); }

/* Sélecteur de langue FR / EN (la langue en cours en plein, l'autre en lien). */
.site-nav { margin-left: auto; }
.lang-switch { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.lang-switch > * + *::before { content: '/'; margin-right: 6px; opacity: .35; }
.lang-switch__alt { padding: 8px 2px; opacity: .55; transition: opacity 200ms ease; }
.lang-switch__alt:hover, .lang-switch__alt:focus-visible { opacity: 1; }
@media (max-width: 1023px) { .js .lang-switch { margin-left: auto; } }

.menu-toggle {
  display: none; width: 48px; height: 48px; margin-right: -12px;
  align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-toggle__bars { display: flex; flex-direction: column; gap: 6px; width: 24px; }
.menu-toggle__bars span { height: 2px; background: currentColor; }
.menu-toggle__close { display: none; font-size: 15px; font-weight: 600; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }

.menu-mobile {
  position: fixed; inset: 0; z-index: 1; overflow-y: auto;
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.menu-mobile[hidden] { display: none; }
.site-header[data-theme="dark"] .menu-mobile { background: var(--ink); color: var(--paper); }
.site-header[data-theme="light"] .menu-mobile { background: var(--paper); color: var(--ink); }
.menu-mobile__list { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-mobile__list a { display: block; padding: 10px 0; font-size: clamp(2rem, 10vw, 2.625rem); line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; }
.menu-mobile__foot { display: flex; flex-direction: column; gap: 16px; }
.site-header[data-theme="dark"] .menu-mobile__cta { background: var(--paper); color: var(--ink); }
.site-header[data-theme="light"] .menu-mobile__cta { background: var(--ink); color: var(--paper); }
.menu-mobile__cities { font-size: 14px; opacity: .7; }

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
  .site-header__bar { padding-top: 10px; padding-bottom: 10px; }
  .logo { height: 20px; }
  .js .site-nav { display: none; }
  .js .menu-toggle { display: inline-flex; }
  /* Sans JS : la navigation reste accessible, en ligne sous le logo. */
  .no-js .site-header__bar { flex-wrap: wrap; }
  .no-js .site-nav__list { flex-wrap: wrap; gap: 4px 18px; }
}
@media (max-width: 767px) { .logo { height: 18px; } }

/* Bandeau d'aperçu (build --preview uniquement) */
.preview-banner {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60;
  max-width: calc(100% - 24px); padding: 8px 14px; font-size: 13px; line-height: 1.35;
  background: var(--or); color: var(--ink); font-weight: 600; text-align: center;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; height: var(--vh); min-height: 620px; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero__photo { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.45) 55%, rgba(17,17,17,.2) 100%); }
/* Tailles calées sur le prototype : le viewBox master est serré (sans marge), d'où ≈ 0,9 × les anciennes valeurs. */
.hero__envol { position: absolute; right: -8.3vw; bottom: -26%; height: 98%; }
.hero__envol-img { height: 100%; width: auto; opacity: .78; } /* les immeubles transparaissent */
html[data-hero-envol="parallax"] .hero__envol-img { will-change: transform; }
/* Beat A — intro : la silhouette pleine entre sur l'axe de vol (+14°) et se
   pose, une fois par session. Sans JS, déjà vue ou en mouvement réduit :
   état final direct. JS retire ensuite les classes d'animation. */
html.js:not(.envol-intro-seen) .hero__envol { opacity: 0; transform: translate3d(-40px, 10px, 0) scale(.96); }
html.js:not(.envol-intro-seen) .hero__envol.is-intro {
  opacity: 1; transform: none;
  transition: opacity 800ms var(--ease), transform 1050ms var(--ease);
}
.hero__content { position: absolute; left: 0; right: 0; bottom: clamp(40px, 10.7vh, 96px); display: flex; flex-direction: column; gap: clamp(28px, 4.9vh, 44px); }
.hero__row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hero__baseline { font-size: 17px; line-height: 1.45; max-width: 360px; }
@media (max-width: 767px) {
  .hero__photo { top: 0; height: 100%; object-position: 50% center; } /* tour centrale du hero */
  .hero__shade { background: linear-gradient(0deg, rgba(17,17,17,.92) 0%, rgba(17,17,17,.4) 55%, rgba(17,17,17,.3) 100%); }
  .hero__envol { right: -21vw; top: 135px; bottom: auto; height: min(378px, 45vh); }
  .hero__title { font-size: clamp(3rem, 15.4vw, 4.5rem); }
  .hero__row { flex-direction: column-reverse; align-items: stretch; gap: 20px; }
  .hero__row .btn { width: 100%; }
}

/* ─── Réseau ────────────────────────────────────────────────────────────── */
.reseau { position: relative; background: var(--paper); padding: clamp(88px, 7.8vw, 112px) 0 clamp(72px, 6.7vw, 96px); overflow: hidden; }
.reseau__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; }
.reseau__head .lead { max-width: 420px; }
.reseau__title { display: flex; flex-direction: column; gap: 20px; }
.markets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(40px, 4.4vw, 64px); }
.markets__list { margin: 0; border-top: 1px solid var(--ink); }
.markets__list > li { border-bottom: 1px solid var(--line); }
.market {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.market__country { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.1; transition: color 250ms ease; }
.market__city { font-size: 15px; color: var(--text-3); letter-spacing: .04em; white-space: nowrap; }
.market__seat { margin-left: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); }
.market.is-active .market__country { color: var(--bronze); }
.market.is-active .market__city { color: var(--ink); }

/* Carte : pays Natural Earth simplifiés. Fond pâle sans frontières ; les 9
   marchés en gris, même poids. Un seul pays actif : le contour se trace, la
   surface se remplit en cuivre, puis L'Envol se pose sur la ville. */
.markets-map { position: relative; margin: 0; width: 100%; max-width: 600px; justify-self: end; }
.markets-map__svg { display: block; width: 100%; height: auto; }
.markets-map__land { fill: var(--sable-2); }
.market-country { cursor: pointer; }
.market-country__shape { fill: var(--line-2); fill-opacity: .6; }
/* Actif : le dégradé de la charte (cuivre → or) remplit le pays. Aucun contour. */
.market-country__fill { opacity: 0; transition: opacity 480ms var(--ease); }
.market-country.is-active .market-country__fill { opacity: 1; }
.market-pin { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
/* Pin = silhouette master (img/envol-mask.svg, viewBox 0 0 160.71 200) en noir plein, scale seul. */
.market-pin__envol {
  display: block; height: 17px; aspect-ratio: 160.71 / 200; background: var(--ink);
  -webkit-mask: url('img/envol-mask.svg') center / contain no-repeat; mask: url('img/envol-mask.svg') center / contain no-repeat;
  transform: scale(0); transition: transform 450ms var(--ease);
}
.market-pin.is-active .market-pin__envol { transition-delay: 380ms; /* fin du remplissage */
}
.market-pin--seat .market-pin__envol { height: 20px; }
.market-pin__label {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); visibility: hidden;
  white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.market-pin--left .market-pin__label { left: auto; right: calc(100% + 6px); }
.market-pin.is-active .market-pin__envol { transform: scale(1); }
.market-pin.is-active .market-pin__label { visibility: visible; }

@media (max-width: 1023px) {
  .markets { grid-template-columns: 1fr; }
  .markets-map { order: -1; max-width: 360px; justify-self: start; }
  .market { padding: 12px 0; }
}

/* ─── Métiers ───────────────────────────────────────────────────────────── */
.metiers { position: relative; height: calc(var(--vh) * var(--count)); background: var(--ink); color: var(--paper); }
.metiers__anchor { position: absolute; left: 0; top: calc(var(--vh) * var(--i)); width: 1px; height: 1px; }
.metiers__sticky { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.scene.is-active { opacity: 1; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1400ms var(--ease); }
.scene.is-active .scene__img { transform: scale(1); }
.scene__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17,17,17,.9) 0%, rgba(17,17,17,.35) 45%, rgba(17,17,17,.15) 100%); }
.scene__body { position: absolute; left: 0; bottom: 96px; display: flex; flex-direction: column; gap: 20px; max-width: min(960px, 66vw); box-sizing: content-box; }
.scene__num { font-size: 18px; color: var(--or); font-weight: 600; letter-spacing: .1em; }
.scene__title { font-size: clamp(3.4rem, 10.28vw, 9.25rem); line-height: .88; font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; hyphens: manual; }
.scene__desc { font-size: clamp(17px, 1.67vw, 24px); line-height: 1.4; }

.metiers__top { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 42px); display: flex; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; }
.metiers__top .eyebrow { color: var(--paper); }
.metiers__count { font-size: 15px; color: var(--or); font-weight: 600; }
.metiers__skip { margin-left: auto; color: var(--paper); }

.metiers__nav { position: absolute; right: var(--gutter); bottom: 88px; }
.metiers__nav ul { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.metiers__nav a {
  display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 18px;
  color: rgba(255, 255, 255, .6); transition: color 300ms ease;
}
.metiers__nav a:hover, .metiers__nav a[aria-current="step"] { color: var(--paper); }
.metiers__nav a[aria-current="step"] { font-weight: 600; }
.metiers__nav-n { font-size: 13px; letter-spacing: .08em; }
/* Repère du métier actif : un simple trait or (L'Envol est réservé aux 3 beats). */
.metiers__nav-mark { width: 26px; height: 2px; background: var(--or); opacity: 0; transform: scaleX(.4); transform-origin: right center; transition: opacity 400ms ease, transform 500ms var(--ease); }
.metiers__nav a[aria-current="step"] .metiers__nav-mark { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .scene__body { max-width: none; right: 0; bottom: 104px; gap: 14px; }
  .scene__title { font-size: clamp(2.6rem, 15.9vw, 5.5rem); }
  .metiers__top { top: calc(var(--header-h) + 20px); }
  /* La liste devient la barre de progression segmentée (maquette 2c). */
  .metiers__nav { left: var(--gutter); right: var(--gutter); bottom: 36px; }
  .metiers__nav ul { flex-direction: row; gap: 6px; }
  .metiers__nav li { flex: 1; }
  .metiers__nav a { display: block; padding: 21px 0; position: relative; }
  .metiers__nav a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255, 255, 255, .3); transition: background-color 300ms ease; }
  .metiers__nav a.is-done::after, .metiers__nav a[aria-current="step"]::after { background: var(--or); }
  .metiers__nav-n, .metiers__nav-mark { display: none; }
  .metiers__nav-t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) {
  .metiers__top { flex-direction: column; gap: 6px; }
  .metiers__skip { position: absolute; right: var(--gutter); top: -6px; }
  .metiers__top .eyebrow { font-size: 13px; max-width: 55%; }
}

/* ─── Manifeste : L'Envol en pochoir ────────────────────────────────────── */
.manifeste { position: relative; min-height: calc(var(--vh) * 1.11); overflow: hidden; background: var(--ink); color: var(--paper); display: flex; align-items: center; }
.manifeste__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 32px; max-width: calc(720px + 2 * var(--gutter)); padding-top: 120px; padding-bottom: 120px; }
.manifeste__stage { position: absolute; inset: 0; pointer-events: none; }

/* Beat B — pochoir « Votre envol » : la silhouette pleine de L'Envol
   (img/envol-mask.svg, seul asset de masque, mask-size contain, jamais
   étirée) découpe la photo. À l'entrée de la section (desktop, piloté par
   JS, une fois), L'Envol vole du bas-gauche jusqu'à sa place en révélant
   la photo, qui reste immobile (contre-translation) ; ensuite la photo
   défile doucement à l'intérieur au scroll. */
.manifeste__pochoir {
  position: absolute; right: -28.3vw; top: calc(4.1vw - 60px); width: 71vw; aspect-ratio: 160.71 / 200;
  -webkit-mask: url('img/envol-mask.svg') center / contain no-repeat;
  mask: url('img/envol-mask.svg') center / contain no-repeat;
}
/* Cadrage validé (visage dans la diagonale de L'Envol posé), étendu vers la
   gauche à la même échelle (photo 2000 × 2100) : pendant le vol, L'Envol a
   de la photo à révéler. */
.manifeste__pochoir-img { position: absolute; left: -48.9%; top: -15%; width: 154%; height: 130%; max-width: none; object-fit: cover; object-position: 100% center; }
html.js .manifeste__pochoir, html.js .manifeste__pochoir-img { will-change: transform; }
/* Mode signature (MAD_ENVOL_MODE=signature) : Envol dégradé flottant. */
.manifeste__signature { position: absolute; right: -22vw; top: 60px; height: 155%; width: auto; max-width: none; will-change: transform; }
/* Navigateur sans mask-image : la découpe devient l'Envol plein, sans photo. */
@supports not ((mask-image: url('x.svg')) or (-webkit-mask-image: url('x.svg'))) {
  .manifeste__pochoir { background: url('img/envol.svg') center / contain no-repeat; }
  .manifeste__pochoir-img { display: none; }
}

@media (max-width: 767px) {
  .manifeste { flex-direction: column; align-items: stretch; min-height: 0; }
  .manifeste__text { order: 1; padding-top: 112px; padding-bottom: 0; gap: 20px; }
  .manifeste__text .display { font-size: clamp(2.4rem, 11.3vw, 3.5rem); }
  /* Pochoir réduit, coupé par le bord droit, sous le titre. */
  .manifeste__stage { position: relative; order: 2; height: 96vw; margin-top: 16px; }
  .manifeste__pochoir { right: -27vw; top: 5vw; width: 88vw; }
  .manifeste__pochoir-img { left: -5%; top: -15%; width: 110%; height: 130%; }
  .manifeste__signature { right: -40vw; top: 0; height: 120vw; }
}

/* ─── Beat C — aperture du wipe d'entrée de #travaux ────────────────────
   Plein cadre sombre percé d'un trou en forme d'Envol qui s'ouvre.
   Décoratif : pointer-events none, sous l'en-tête → CTA et nav cliquables. */
.envol-aperture { position: fixed; inset: 0; z-index: 40; pointer-events: none; visibility: hidden; }
.envol-aperture.is-playing { visibility: visible; }
.envol-aperture__svg { display: block; width: 100%; height: 100%; }
.envol-aperture__fill { fill: var(--ink); }
.envol-aperture__hole { transform: translate(50vw, 46vh) scale(2.4) translate(40px, -10px); }

/* ─── Travaux ───────────────────────────────────────────────────────────── */
.travaux { background: var(--sable); padding: clamp(88px, 8.9vw, 128px) 0; }
.section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(40px, 4.4vw, 64px); }
.section-head .lead { max-width: 34em; }
.section-head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.section-head--row > div { display: flex; flex-direction: column; gap: 20px; }

.travaux__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; margin: 0; }
@media (max-width: 1099px) { .travaux__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .travaux__grid { grid-template-columns: 1fr; gap: 36px; } }

.work { display: flex; flex-direction: column; gap: 6px; }
.work__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); margin-bottom: 12px; }
.work__img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--img-x, 0px), 0, 0) scale(calc(var(--img-s, 1) * var(--img-h, 1))); transition: transform 900ms var(--ease); }
.work:hover .work__img, .work:focus-visible .work__img { --img-h: 1.04; }
/* Survol / tap / focus, identique sur toutes les cartes : voile sombre et
   découpe de L'Envol (path master img/envol-mask.svg) qui laisse la photo claire
   à l'intérieur ; la découpe se pose par un scale seul. Au repos : photo nue.
   Tap : effet pendant l'appui (:active), jamais collé après. */
html[data-card-hover="mask"] .work__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(17, 17, 17, .62); opacity: 0;
  -webkit-mask-image: url('img/envol-mask.svg'), linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%, 0 0; -webkit-mask-size: auto 104%, 100% 100%;
  -webkit-mask-composite: xor;
  mask-image: url('img/envol-mask.svg'), linear-gradient(#000 0 0);
  mask-repeat: no-repeat; mask-position: 50% 50%, 0 0; mask-size: auto 104%, 100% 100%;
  mask-composite: exclude;
  transition: opacity 300ms ease, -webkit-mask-size 600ms var(--ease), mask-size 600ms var(--ease);
}
html[data-card-hover="mask"] .work:focus-visible .work__media::after,
html[data-card-hover="mask"] .work:active .work__media::after { opacity: 1; -webkit-mask-size: auto 90%, 100% 100%; mask-size: auto 90%, 100% 100%; }
@media (hover: hover) and (pointer: fine) {
  html[data-card-hover="mask"] .work:hover .work__media::after { opacity: 1; -webkit-mask-size: auto 90%, 100% 100%; mask-size: auto 90%, 100% 100%; }
}
.work__media .tag { position: absolute; left: 12px; top: 12px; }
/* Crédit photo : toujours présent, discret, en bas à droite de l'image. */
.photo-credit {
  position: absolute; right: 8px; bottom: 6px; z-index: 2; max-width: calc(100% - 16px);
  font-size: 11px; line-height: 1.2; letter-spacing: .02em; color: rgba(255, 255, 255, .82);
  text-shadow: 0 0 3px rgba(17, 17, 17, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
a.photo-credit { pointer-events: auto; text-decoration: none; }
a.photo-credit:hover { color: #fff; text-decoration: underline; }
.photo-credit--hero { right: var(--gutter); bottom: 14px; z-index: 3; }
.photo-credit--section { right: var(--gutter); bottom: 14px; z-index: 3; }
.scene > .photo-credit { right: var(--gutter); bottom: 14px; }
.work__logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper); font-size: 28px; font-weight: 600; text-transform: uppercase; text-align: center; }
.work__brand { font-size: 22px; font-weight: 600; text-transform: uppercase; line-height: 1.1; letter-spacing: -.005em; }
.work__metier { font-size: 15px; color: var(--text-3); }
/* CTA identique sur toutes les cartes, toujours visible (pas d'état caché au survol). */
.work__more { font-size: 15px; font-weight: 600; color: var(--bronze); margin-top: 6px; transition: color 200ms ease; }
.work:hover .work__more, .work:focus-visible .work__more { color: var(--ink); }

.empty { border-top: 1px solid var(--ink); padding-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.empty__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; text-transform: uppercase; line-height: 1; }
.empty__text { color: var(--text-3); }

/* Page d'un cas */
.case { overflow-x: clip; background: var(--paper); padding-top: calc(var(--header-h) + clamp(40px, 5vw, 80px)); padding-bottom: clamp(56px, 6vw, 96px); }
.case__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 960px; }
.case__head .article__back { margin-bottom: 24px; }
.case__title { font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: .9; font-weight: 600; text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
.case__markets { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.case__media { position: relative; margin: clamp(32px, 4vw, 56px) 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.case__media .work__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Vidéo en tête du cas : même cadre 16:9 que la photo principale. */
.case__media video, .case__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: var(--ink); }
.case__media--video video { object-fit: contain; }
/* Habillage pleine largeur d'écran autour d'une vidéo moins large que la page. */
.case__stage { position: relative; width: 100vw; margin: clamp(32px, 4vw, 56px) 0 0 calc(50% - 50vw); padding: clamp(28px, 5vw, 72px) var(--gutter); overflow: hidden; background: var(--ink); isolation: isolate; }
.case__stage::before { content: ''; position: absolute; inset: -80px; z-index: -2; background: var(--stage, none) center / cover no-repeat; filter: blur(56px) saturate(1.3); transform: scale(1.15); }
.case__stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 17, .45), rgba(17, 17, 17, .6)); }
.case__stage > figure { margin-top: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.case__stage .case__subs { color: var(--paper); }
.fx .case__stage .case__media, .fx .case__stage .case__video { --fx-cover: transparent; }
.case__extras > .case__stage { margin-top: 0; }
/* Sous-titres affichés sous la vidéo (et non par-dessus). */
.case__subs { margin: 12px auto 0; max-width: 60em; min-height: 3em; text-align: center; font-size: 17px; line-height: 1.45; color: var(--text-2); white-space: pre-line; }
.case__media.case__video--embed .case__video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.case__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); padding-top: 32px; border-top: 1px solid var(--ink); }
.case__block p { font-size: 18px; line-height: 1.6; color: var(--text-2); }
.case__block p + p { margin-top: .8em; }
.case__block p:first-of-type strong, .case__block strong { color: var(--ink); font-weight: 600; }
.case__label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bronze); margin-bottom: 14px; }
/* Compléments du cas : vidéo 16:9 puis galerie (1 : pleine largeur ; 2 : deux
   colonnes ; 3 : une grande + deux). */
.case__extras { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); margin-top: clamp(48px, 5vw, 80px); }
.case__video { position: relative; margin: 0 auto; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.case__video video, .case__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ink); }
.case__video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.case__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; border: 0; background: transparent; color: var(--paper); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.case__play-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(217, 181, 106, .9); display: grid; place-items: center; transition: transform 400ms var(--ease); }
.case__play-icon::before { content: ''; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--ink); }
.case__play:hover .case__play-icon, .case__play:focus-visible .case__play-icon { transform: scale(1.08); }
.case__gallery { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.case__row { display: flex; gap: clamp(16px, 2vw, 24px); width: 100%; margin: 0 auto; }
/* Format d'origine conservé : largeur proportionnelle au rapport largeur / hauteur. */
.case__shot { position: relative; margin: 0; flex: var(--r, 1.333) 1 0; min-width: 0; aspect-ratio: var(--r, 4 / 3); overflow: hidden; background: var(--ink); }
.case__shot .work__img { position: absolute; inset: 0; }
@media (max-width: 767px) { .case__row { flex-direction: column; max-width: none !important; } .case__shot { flex: none; width: 100%; } }
.work-detail__markets { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.work-detail__markets li { border: 1px solid var(--ink); padding: 5px 12px; font-size: 14px; font-weight: 500; }
.case__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); }
.case__next { font-size: 17px; font-weight: 600; }
@media (max-width: 767px) {
  .case__body { grid-template-columns: 1fr; }
  .case__media { aspect-ratio: 4 / 3; }
}

/* ─── Carnet d'envol ────────────────────────────────────────────────────── */
.carnet { background: var(--ink); color: var(--paper); padding: clamp(88px, 8.9vw, 128px) 0; }
.carnet .display { color: var(--paper); }
.carnet .link-underline { color: var(--paper); }
.posts { margin: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.posts > li { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.post {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 40px; grid-template-areas: "meta title arrow" "meta excerpt arrow";
  gap: 8px 32px; padding: 32px 0; align-items: baseline;
}
.post__meta { grid-area: meta; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--or); font-weight: 600; }
.post__title { grid-area: title; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; transition: color 200ms ease; }
.post__excerpt { grid-area: excerpt; font-size: 17px; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post__arrow { grid-area: arrow; font-size: 28px; justify-self: end; transition: transform 300ms var(--ease); }
.post:hover .post__title { color: var(--or); }
.post:hover .post__arrow { transform: translateX(6px); }
.posts--light { border-top-color: var(--ink); margin-top: clamp(40px, 4.4vw, 64px); }
.posts--light > li { border-bottom-color: var(--line-2); }
.posts--light .post__meta { color: var(--bronze); }
.posts--light .post__excerpt { color: var(--text-3); }
.posts--light .post:hover .post__title { color: var(--bronze); }
@media (max-width: 767px) {
  .post { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "meta arrow" "title arrow" "excerpt arrow"; padding: 24px 0; gap: 8px 12px; }
  .post__excerpt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .post__arrow { align-self: center; font-size: 22px; }
}

/* ─── Contact ───────────────────────────────────────────────────────────── */
.contact { background: var(--paper); padding: clamp(112px, 8.9vw, 128px) 0 clamp(64px, 7.8vw, 112px); }
.contact__title-row { display: flex; align-items: flex-end; gap: clamp(16px, 2.2vw, 32px); margin-bottom: clamp(36px, 3.9vw, 56px); }
.contact__envol { height: clamp(50px, 7.5vw, 108px); width: auto; margin-bottom: clamp(6px, 1vw, 14px); flex-shrink: 0; }
/* Settle optionnel (MAD_CONTACT_SETTLE=true), hors des 3 motifs par défaut. */
.contact__envol[data-settle] { opacity: 0; transform: translate3d(-7px, 7px, 0); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.contact__envol[data-settle].is-settled, .no-js .contact__envol[data-settle] { opacity: 1; transform: none; }
.contact__actions { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.contact__secondary { display: flex; gap: 20px 40px; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 767px) {
  .contact__title-row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .contact__title-row .display { font-size: clamp(3rem, 15.9vw, 4.5rem); }
  .contact__actions { align-items: stretch; gap: 22px; }
  .contact__email { display: none; }
  .contact__secondary { flex-direction: column; align-items: flex-start; gap: 18px; }
  .link-underline--strong { font-size: 18px; }
}

/* Logos partenaires : noir sur blanc, cases égales. grayscale + brightness + contrast
   = seuil (toute couleur → noir, blanc → blanc), multiply = le blanc se fond dans le
   fond de page. Marche avec un fond transparent ou blanc (SVG, PNG, WebP, JPG). */
.partners { margin-top: clamp(64px, 7vw, 112px); padding-top: 32px; border-top: 1px solid var(--line); }
.partners .eyebrow { color: var(--text-3); margin-bottom: clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 12px; }
.partners__grid { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px); align-items: center; }
.partners__item, .partners__item > a { display: flex; align-items: center; justify-content: center; }
.partner-logo {
  position: relative; display: block; max-width: 100%;
  /* Taille « poids visuel égal » calculée au build (--lw × --lh px). */
  width: calc(var(--lw, 195) * 1px); height: calc(var(--lh, 73) * 1px);
}
.partner-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 300ms ease, filter 300ms ease; }
/* Au repos : gris moyen (encre sombre à 42 %). Au survol : couleurs d'origine,
   le fond blanc éventuel se fond dans la page (multiply). */
.partner-logo__mono { opacity: .42; }
.partner-logo__color { opacity: 0; mix-blend-mode: multiply; }
.partners__item:hover .partner-logo__mono, .partners__item > a:focus-visible .partner-logo__mono { opacity: 0; }
.partners__item:hover .partner-logo__color, .partners__item > a:focus-visible .partner-logo__color { opacity: 1; }
/* SVG (ou logo non préparé) : gris par filtre, retiré au survol. */
.partner-logo--filter .partner-logo__img { filter: grayscale(1) brightness(.6) contrast(12); mix-blend-mode: multiply; opacity: .42; }
.partners__item:hover .partner-logo--filter .partner-logo__img, .partners__item > a:focus-visible .partner-logo--filter .partner-logo__img { filter: none; opacity: 1; }
@media (max-width: 1023px) { .partners__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .partner-logo { width: calc(var(--lw, 195) * .62px); height: calc(var(--lh, 73) * .62px); } }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--paper); padding-bottom: 48px; }
.site-footer__row { display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; }
.site-footer__row::before { content: ''; flex-basis: 100%; height: 1px; background: var(--ink); margin-bottom: 10px; }
.site-footer__cities { display: flex; gap: 10px 40px; margin: 0; font-size: 18px; font-weight: 600; text-transform: uppercase; flex-wrap: wrap; }
.site-footer__meta { margin-left: auto; display: flex; gap: 8px 32px; font-size: 15px; color: var(--text-3); flex-wrap: wrap; }
@media (max-width: 767px) {
  .site-footer__cities { display: grid; grid-template-columns: 1fr 1fr; font-size: 16px; width: 100%; }
}

/* ─── Pages internes ────────────────────────────────────────────────────── */
.page-intro, .article, .work-page { background: var(--paper); padding-top: calc(var(--header-h) + clamp(48px, 6vw, 96px)); padding-bottom: clamp(48px, 6vw, 96px); }
.page-intro .wrap { display: flex; flex-direction: column; gap: 20px; }
.not-found__actions { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: 12px; }
.work-page .article__back { margin-bottom: 40px; }
.article__wrap { max-width: calc(820px + 2 * var(--gutter)); margin: 0 auto; }
.article__back { margin-bottom: 40px; }
.article__meta { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin-bottom: 16px; }
.article__title { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .95; font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 28px; }
.article__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--text-2); margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.prose { font-size: 18px; line-height: 1.7; color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { color: var(--ink); font-weight: 600; line-height: 1.15; margin-top: 1.8em; }
.prose h2 { font-size: 28px; text-transform: uppercase; letter-spacing: -.005em; }
.prose h3 { font-size: 22px; }
.prose a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { border-left: 3px solid var(--or); padding-left: 20px; font-size: 22px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.prose strong { color: var(--ink); }
.article__cta { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; }
.article__cta-title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 600; text-transform: uppercase; line-height: 1; }
.page-sub .contact { border-top: 1px solid var(--line); }


/* ─── Animations (html.fx : JS actif, mouvement non réduit) ───────────────
   Signature MAD : tout décolle sur l'axe de vol de la charte (+14°).
   Titres : chaque mot décolle hors de son masque. Photos : L'Envol perce
   d'abord la page, puis s'ouvre et libère l'image. Travaux : les colonnes
   volent à des vitesses différentes. Curseur des cartes : petit disque doré translucide.
   Sans JS ou en mouvement réduit : tout est visible. */
:root { --expo: cubic-bezier(.19, 1, .22, 1); }

/* Titres : décollage mot à mot (depuis le bas-gauche, vers le haut-droite) */
.fx main .display:not(.fx-split) { opacity: 0; }
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .04em .1em; margin: -.12em -.04em -.1em; }
.fx-w__i { display: inline-block; transform-origin: 0 100%; transform: translate3d(-.28em, 112%, 0) rotate(8deg); transition: transform 1150ms var(--expo); transition-delay: calc(var(--wi, 0) * 60ms); }
.fx .is-in .fx-w__i { transform: none; }

/* Blocs : montée douce sur l'axe, en cascade dans un même groupe */
.fx [data-fx-up] { opacity: 0; transform: translate3d(-8px, 32px, 0); transition: opacity 900ms var(--ease), transform 1100ms var(--expo); transition-delay: calc(var(--fi, 0) * 80ms); }
.fx [data-fx-up].is-in { opacity: 1; transform: none; }

/* Photos : un voile couleur de page percé de L'Envol ; la silhouette grandit
   jusqu'à traverser le cadre, puis le voile s'efface. */
.fx [data-fx-img]::before {
  content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none; background: var(--fx-cover, var(--sable));
  -webkit-mask-image: url('img/envol-mask.svg'), linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask-image: url('img/envol-mask.svg'), linear-gradient(#000 0 0); mask-composite: exclude;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 46% 58%, 0 0; mask-position: 46% 58%, 0 0;
  -webkit-mask-size: auto 0%, 100% 100%; mask-size: auto 0%, 100% 100%;
  transition: -webkit-mask-size 1200ms cubic-bezier(.7, 0, .2, 1), mask-size 1200ms cubic-bezier(.7, 0, .2, 1), opacity 650ms ease 1000ms;
  transition-delay: calc(var(--fi, 0) * 120ms), calc(var(--fi, 0) * 120ms), calc(1000ms + var(--fi, 0) * 120ms);
}
.fx [data-fx-img].is-in::before { -webkit-mask-size: auto 170%, 100% 100%; mask-size: auto 170%, 100% 100%; opacity: 0; }
.fx [data-fx-img].is-done::before { display: none; }
.fx [data-fx-img] .work__img { --img-s: 1.22; transition: transform 1900ms var(--expo); transition-delay: calc(var(--fi, 0) * 120ms); }
.fx [data-fx-img].is-in .work__img { --img-s: 1; }
.fx [data-fx-img].is-done .work__img { transition: transform 900ms var(--ease); transition-delay: 0ms; }
.fx .case__media, .fx .case__shot { --fx-cover: var(--paper); }

/* Travaux : colonnes en vol (translation posée par le script sur chaque carte) */
.fx .travaux__grid > li { will-change: transform; }

/* Curseur des cartes (souris) : petit disque doré uni et translucide.
   L'Envol reste dans le voile. */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; will-change: transform; }
.fx-cursor__halo { display: block; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; border-radius: 50%; background: rgba(217, 181, 106, .6);
  transform: scale(0); opacity: 0; transition: transform 450ms var(--expo), opacity 250ms ease; }
.fx-cursor.is-on .fx-cursor__halo { transform: scale(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .fx .travaux .work { cursor: none; } }

/* ─── Mouvement réduit : tout à sa place, pas de parallax, métiers empilés ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .hero__envol, html.js:not(.envol-intro-seen) .hero__envol, .contact__envol[data-settle] { opacity: 1 !important; transform: none !important; }
  .market-country__fill, .market-pin__envol { transition: none !important; }
  .hero__photo, .hero__envol-img, .manifeste__pochoir, .manifeste__pochoir-img, .manifeste__signature { transform: none !important; will-change: auto !important; }
  .envol-aperture { display: none !important; }
  /* Survol des cartes : état simple, sans masque animé. */
  .work:hover .work__img, .work:focus-visible .work__img { --img-h: 1; }
  .work__img { --img-x: 0px !important; --img-s: 1 !important; }
  .fx main .display, .fx [data-fx-up], .fx .fx-w__i { opacity: 1 !important; transform: none !important; }
  .fx [data-fx-img]::before { display: none !important; }
  .fx .travaux__grid > li { transform: none !important; }
  .fx-cursor { display: none !important; }
  html[data-card-hover="mask"] .work__media::after { display: none; } /* photo nue, pas d'Envol au survol */
  .metiers { height: auto; }
  .metiers__sticky { position: static; height: auto; overflow: visible; }
  .scene { position: relative; height: var(--vh); opacity: 1; }
  .scene__img { transform: none; }
  .metiers__top { position: absolute; top: calc(var(--header-h) + 42px); z-index: 2; }
  .metiers__count, .metiers__nav { display: none; }
}