/* MajorWorks - home V3, portage de l'artboard Paper « Home V3 • Light » (32O-0, 1440) */

@font-face {
  font-family: "Serrif VF";
  src: url("../assets/SerrifCompressed-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 25% 151%;
  font-display: swap;
}
/* même fichier, figé en largeur 50 : pour le texte du drapeau (canvas de flag.js), où Safari peut ignorer le mot-clé ultra-condensed */
@font-face {
  font-family: "Serrif Flag";
  src: url("../assets/SerrifCompressed-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50%;
}

:root {
  /* 1 px de la maquette 1440, mis à l'échelle de la fenêtre */
  --u: min(calc(100vw / 1440), 1.25px);
  --hu: var(--u); /* unité du hero (flag.js) : plus grande en mobile */
  --sans: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Serrif VF", Times, serif;
}

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

/* iPhone : la page s'étend sous l'heure et la batterie (viewport-fit=cover) ; ce bandeau fixe couvre cette zone
   (--safe) à la couleur du fond de la page, et la nav et la barre des cases descendent d'autant. Ailleurs, --safe = 0 */
:root { --safe: env(safe-area-inset-top, 0px); }
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--safe); background: var(--top, #fff); pointer-events: none; }
body:has(.ab), .fn-page, body.info-open, .menu-open body { --top: #000; }
/* Safari iOS 26 teinte la zone de l'heure d'après le fond de la page : About et AI (dégradé qui part du noir) sur fond noir */
body:has(.ab) { background: #000; }
body {
  background: #fff;
  color: #000;
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Lenis (scroll doux) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "wdth" 50;
  font-stretch: 50%;
  letter-spacing: -0.025em;
  line-height: 94%;
}

.logo { display: block; width: calc(189 * var(--u)); height: auto; }
.logo--white { filter: invert(1); }

/* ---------- 01 Hero : seul le drapeau bouge ---------- */

/* le hero reste collé en haut 80vh, le recul dure 120vh (CFG.intro de flag.js) : sur les derniers 40vh
   la page commence à remonter pendant que le recul finit, sans cassure entre les deux mouvements */
.hero-pin { height: calc(926 * var(--hu) + 185vh); } /* hauteur du hero + 80vh (CFG.pin) */
.hero {
  position: sticky;
  top: 0;
  /* le recul finit avec le milieu du mât (362 u, CFG.poleMid) au centre de l'écran, alors que la page a déjà
     remonté de 40vh (CFG.intro - CFG.pin), puis le dessin est lâché en douceur (+ 15vh, CFG.release / 2) :
     il reste décalé de 105vh - 362 u, la hauteur suit pour garder le pied du monogramme (1288 - 362 = 926) */
  height: calc(926 * var(--hu) + 105vh);
  overflow: hidden;
  color: #000;
  background: #fff; /* hero light (choisi le 15/10) : fond blanc, monogramme et mât noirs, drapeau noir à texte blanc */
}
/* monogramme : flag.js leur applique le recul (translate + scale depuis le coin haut gauche).
   Cachés jusqu'à la première image, sinon on verrait le plan final avant le drapeau plein écran */
.hero-art { position: absolute; inset: 0; transform-origin: 0 0; visibility: hidden; }
.monument {
  position: absolute;
  left: calc(50% - 27 * var(--hu)); /* fente entre M et W centrée sous le mât */
  top: calc(489.215 * var(--hu)); /* calé sur le haut : il suit le mât quel que soit l'écran */
  translate: -50%;
  width: calc(1507 * var(--hu));
  height: auto;
  color: #000;
}
/* toile du drapeau : tout le hero (le mât descend sous le premier écran), flag.js y place le tissu et le mât */
.flag {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.nav {
  position: fixed;
  color: #fff;
  mix-blend-mode: difference;
  top: calc(34 * var(--u) + var(--safe));
  left: calc(64 * var(--u));
  right: calc(64 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 70;
}
.nav nav { display: flex; align-items: center; gap: calc(36 * var(--u)); font-size: 16px; line-height: 20px; }
/* « Let's talk » (Paper 4NJ-0) : texte en cartouche + carré au + fin. Couleurs inversées car la nav est en mode différence */
.nav-cta { display: flex; align-items: stretch; }
.nav-cta > span:first-child { display: flex; align-items: center; padding: 2px 4px; background: #fff; color: #000; }
.nav-cta .plus { width: 22px; }
.nav-cta .plus::before { left: 5px; top: 11.5px; width: 12px; height: 1px; }
.nav-cta .plus::after { left: 10.5px; top: 6px; width: 1px; height: 12px; }
/* au survol du bouton, le coin haut droit de la page s'assombrit un peu : on sent le funnel sur fond noir qui arrive */
body::before {
  content: ""; position: fixed; top: 0; right: 0; z-index: 75; width: 70vw; height: 70vh; pointer-events: none; /* au-dessus de la nav : en dessous, le mode différence la rendait illisible */
  background: radial-gradient(farthest-side at 100% 0, #00000080, #0000 100%);
  opacity: 0; transition: opacity .6s;
}
@media (hover: hover) { body:has(.nav-cta:hover, .nav-cta:focus-visible)::before { opacity: 1; } }
html.no-shade body::before, html.no-shade .nav-cta--solid { opacity: 0 !important; } /* retour d'un case : le curseur est resté sur « Let's talk » */
.nav-cta--solid { position: fixed; z-index: 80; pointer-events: none; opacity: 0; font-size: 16px; line-height: 20px; }
.nav-cta--solid.on { opacity: 1; }
.nav-cta--solid > span:first-child { background: #000; color: #fff; }
.nav-cta--solid .plus { background: #000; }
.nav-cta--solid .plus::before, .nav-cta--solid .plus::after { background: #fff; }
.nav-mention {
  position: absolute;
  left: 50%;
  translate: -50%;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
}


/* ---------- 02 Manifeste + cases ---------- */

.mx {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(200 * var(--u)); /* Paper 49H-0 : 200 entre l'intro, la grande phrase et la bande */
  /* 200 sous le monogramme : il dépasse de ~10 px du bas du hero */
  padding: calc(210 * var(--u)) calc(64 * var(--u)) calc(200 * var(--u));
}
.mx-block { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.mx-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--u));
  font-family: var(--serif);
  font-variation-settings: "wdth" 50;
  font-stretch: 50%;
  font-size: calc(88 * var(--u));
  letter-spacing: -0.025em;
  line-height: 94%;
  white-space: pre;
}

/* ponctuation après une vignette (« brand [Tour Eiffel]. ») : 12 de la vignette, et ces lignes en écart de 20 (Paper FMP-1, 21/10) */
.mx-line:has(.mx-punct) { gap: calc(20 * var(--u)); }
.mx-punct { margin-left: calc(-8 * var(--u)); }

/* intro au-dessus de la grande phrase : Helvetica 28/34, plus calme (Paper 49H-0) */
.mx-intro { gap: 0; } /* l'interligne seul, sans l'écart entre les lignes de la grande phrase */
.mx-intro .mx-line { gap: 0; font-family: var(--sans); font-variation-settings: normal; font-stretch: normal; font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: -0.03em; }
/* carte qui suit le curseur au survol de « founders and leaders » (main.js, initLogoCursor) */
.mx-logos { color: #00000066; cursor: default; transition: color .3s; } /* gris clair : signale l'interaction au survol */
.mx-logos:hover { color: #000; }
.logo-cursor { position: fixed; left: 0; top: 0; z-index: 80; display: grid; place-items: center; width: calc(148 * var(--u)); height: calc(100 * var(--u)); background: #000; pointer-events: none; opacity: 0; scale: .9; transition: opacity .25s, scale .25s; }
.logo-cursor.on { opacity: 1; scale: 1; }
.logo-cursor img { width: 70%; height: 40%; object-fit: contain; } /* même format que les vignettes .thumb du manifeste */
/* bande de visuels sous le manifeste : hauteurs variées alignées en bas pour le rythme, défilement continu,
   qui s'arrête en douceur au survol (le bouton s'inverse) ; le bouton reste fixe au centre, toute la bande mène à Work */
.mx > .mx-cta { display: none; } /* plus fort que .btn (display: flex, déclaré plus bas) */
.mx-reel { display: block; position: relative; align-self: stretch; margin: 0 calc(-64 * var(--u)) calc(-200 * var(--u)); overflow: hidden; }
.mx-reel-track { display: flex; align-items: flex-end; gap: 16px; width: max-content; padding-right: 16px; } /* défilement piloté par main.js (initReel), pour l'inertie au survol */
.mx-reel-track > span { display: contents; }
.mx-reel img { flex: none; width: calc(230 * var(--u)); object-fit: cover; display: block; }
.mx-reel:hover .btn > .sweep { clip-path: inset(0); }
.mx-reel .btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.btn.btn--dark > span:first-child { background: #000; color: #fff; }
.btn.btn--dark.sweep > span:first-child, .btn.btn--dark.sweep .plus { background: #fff; color: #000; }
.btn.btn--dark.sweep .plus::before, .btn.btn--dark.sweep .plus::after { background: #000; }
/* écriture lettre par lettre au fil du scroll : main.js pose --p (0..1) sur chaque lettre et chaque vignette */
.ch { opacity: var(--p, 0); }

/* vignette d'un case dans la ligne : arrive après le texte qui la précède */
.thumb {
  position: relative;
  flex-shrink: 0;
  width: calc(148 * var(--u));
  height: calc(100 * var(--u));
  overflow: hidden;
  background: #e6e6e6;
  cursor: pointer;
  /* la vignette se déploie de gauche à droite, à pleine hauteur. ponytail: découpe plutôt que vraie largeur,
     sinon la ligne centrée se décalerait pendant l'apparition */
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
}
.thumb--wide { width: calc(181 * var(--u)); height: calc(101 * var(--u)); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .thumb-logo { position: absolute; inset: 0; margin: auto; width: 64%; height: auto; filter: brightness(0) invert(1); } /* logo client en blanc sur la vidéo */
.thumb--ph {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(10 * var(--u));
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
  color: #6b6b6b;
}
.thumb--ph i { font-style: normal; }

/* carte ouverte au survol : posée en absolu dans la section, elle grandit depuis la vignette (main.js) */
.case.pop {
  position: absolute;
  z-index: 5;
  width: calc(600 * var(--u));
  height: calc(600 * var(--u));
  display: none;
}
.pop.open, .pop.closing { display: flex; }
.pop.closing { pointer-events: none; }
/* textes et frise : arrivent une fois la carte à sa taille */
.pop .case-head, .pop .case-timeline { opacity: 0; transition: opacity .25s; }
.pop.ready .case-head, .pop.ready .case-timeline { opacity: 1; transition-delay: .05s; }
/* voile sombre de la carte : arrive en douceur pendant que la vignette grandit, repart à la fermeture
   (la vignette n'en a pas, sinon il tombe d'un coup) */
.pop.open .case-media::after { animation: shade-in .9s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes shade-in { from { opacity: 0; } }
.pop.closing .case-media::after { opacity: 0; transition: opacity .35s; }

/* ---------- Carte de case (composant repris de la V2) ---------- */

.case {
  position: relative;
  padding: calc(40 * var(--u));
  flex-direction: column;
  gap: 16px;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
}

/* pile de visuels : un seul visible à la fois */
.case-media { position: absolute; inset: 0; background: #1a1a1a; isolation: isolate; }
.case-media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .15s;
}
.case-media > .on { opacity: 1; }
.case-media::after { content: ""; position: absolute; inset: 0; background: #00000038; }
/* curseur sur « Explore » : le coin bas droit de la carte s'assombrit */
.case-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(farthest-corner at 100% 100%, #000000b3, #0000 60%);
  opacity: 0; transition: opacity .4s;
}
.case.explore .case-media::before { opacity: 1; }

/* visuel à venir */
.ph {
  display: grid;
  place-items: center;
  background: #2a2a2a;
  color: #ffffff80;
  font-size: 15px;
}

.case-head {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start; /* textes calés en haut (Paper 3VT-0) */
  gap: 16px;
}
.case-head h2 { flex: 1; font-size: calc(60 * var(--u)); line-height: 90%; }
.case-head p {
  flex: 1;
  min-height: calc(58 * var(--u)); /* centré sur la hauteur du titre, comme dans Paper */
  display: grid; /* pas flex : chaque bout de ligne autour du <br> deviendrait un élément côte à côte */
  align-content: center;
  font-size: calc(16 * var(--u));
  line-height: 110%;
  text-align: right;
}

/* frise : un trait par visuel, le visuel affiché devient un carré blanc */
.case-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 24px;
}
@media (hover: hover) {
  /* moitié haute : traits tassés ; moitié basse (.tall) : traits à pleine hauteur. Le + garde toujours sa taille */
  .tick, .case-timeline .plus { opacity: 0; transition: opacity .3s calc(var(--i) * 45ms); }
  .case:hover .tick, .case:hover .case-timeline .plus { opacity: 1; }
  .tick { transform: scaleY(.33); transform-origin: bottom; transition: opacity .3s calc(var(--i) * 45ms), transform .3s calc(var(--i) * 45ms); }
  .case.tall .tick { transform: none; }
}
.tick { width: 24px; height: 24px; flex-shrink: 0; }
.tick::before {
  content: "";
  display: block;
  width: 2px;
  height: 24px;
  background: #fff;
  transition: width .2s;
}
.tick.on::before { width: 24px; }

/* carré noir à croix blanche */
.plus { position: relative; width: 24px; height: 24px; flex-shrink: 0; background: #000; }
.plus::before,
.plus::after { content: ""; position: absolute; background: #fff; }
.plus::before { left: 6px; top: 11.5px; width: 12px; height: 1px; } /* traits fins de 1 px partout, comme la nav */
.plus::after { left: 11.5px; top: 6px; width: 1px; height: 12px; }
/* + choisi au curseur (.on), « Explore » sort du carré vers la gauche */
.plus > span {
  position: absolute; right: 100%; top: 0; height: 24px; padding: 0 4px 0 8px;
  display: flex; align-items: center; background: #000; color: #fff; font-size: 14px; white-space: nowrap;
  clip-path: inset(0 0 0 100%); transition: clip-path .35s cubic-bezier(.7,0,.2,1);
}
.plus.on > span { clip-path: inset(0); }
.plus--light { background: #fff; }
.plus--light::before,
.plus--light::after { background: #000; }

/* ---------- 03 Fin de page : manifeste, logos, contact, pied de page ---------- */

.end { padding: 16px; }
.end-card {
  display: flex;
  flex-direction: column;
  gap: calc(200 * var(--u));
  padding: calc(200 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
  color: #fff;
  background: linear-gradient(in oklab 180deg, oklab(0% 0 0) 0%, oklab(17.1% -0.017 -0.029) 17.48%,
    oklab(26.2% -.0004 -0.038) 37.95%, oklab(50.6% -0.020 -0.040) 60.52%, oklab(100% 0 0) 100%);
}
.end-claim { display: flex; flex-direction: column; align-items: center; gap: 40px; } /* le MW au-dessus, les deux phrases centrées dessous (Paper, 19/10) */
.end-claim p { font-size: calc(104 * var(--u)); text-align: center; }
.end-claim p > span { display: block; } /* une phrase par ligne, chacune apparaît avec son décalage (main.js initReveal) */
.mw { display: block; flex-shrink: 0; width: 68px; height: auto; }

.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.logos span { height: calc(180 * var(--u)); display: grid; place-items: center; border: 1px solid #ffffff24; } /* contour discret */
/* même hauteur pour tous, plafonnée en largeur pour les logos très larges */
.logos img { height: calc(36 * var(--u)); max-width: 60%; object-fit: contain; transition: opacity .4s; }
.logos img[src*="ubisoft"] { height: calc(64 * var(--u)); } /* logos hauts : plus grands pour le même poids */
.logos img[src*="tour-eiffel"] { height: calc(100 * var(--u)); } /* carré, avec un texte fin sous la tour : plus grand pour rester lisible */
.logos img[src*="gpa"] { height: calc(28 * var(--u)); }
.logos img.out { opacity: 0; }

.contact-top { display: flex; flex-direction: column; align-items: center; gap: 46px; }
.contact-title { font-size: calc(120 * var(--u)); text-align: center; }
.btn { display: flex; }
.btn > span:first-child { display: flex; align-items: center; padding: 0 4px; background-color: #fff; color: #000; font-size: 20px; line-height: 110%; }
.btn { position: relative; overflow: hidden; }
/* bouton sans + (« Widilo · Coming soon ») : même hauteur que les autres */
.btn:not(:has(> .plus)) > span:first-child { min-height: 24px; }

/* ---------- Survol de tous les CTA du site : une copie du bouton aux couleurs inversées arrive par la gauche
   en balayage (main.js, initSweeps). Couleurs exactes, sans mode différence. ---------- */
.sweep {
  position: absolute !important; inset: 0 !important; margin: 0 !important; translate: none !important; opacity: 1 !important;
  pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1);
}
:hover > .sweep, :focus-visible > .sweep, .on > .sweep { clip-path: inset(0); }
/* boutons blancs (footer, noms des projets de Work) : passent en noir */
.btn.sweep > span:first-child { background: #000; color: #fff; }
.btn.sweep .plus { background: #000; }
.btn.sweep .plus::before, .btn.sweep .plus::after { background: #fff; }
/* « Fermer » d'un case (version claire des boutons du funnel) : gris clair, texte et croix noirs ; passe en noir au survol */
.cs-bar .back.cs-close { position: relative; gap: 0; align-items: stretch; }
.cs-close > span:first-child { display: flex; align-items: center; padding: 2px 4px; background: #ebebeb; color: #000; }
.cs-close .close { background: #ebebeb; }
.cs-close .close::before, .cs-close .close::after { background: #000; }
.cs-close.sweep > span:first-child, .cs-close.sweep .close { background: #000; color: #fff; }
.cs-close.sweep .close::before, .cs-close.sweep .close::after { background: #fff; }
/* boutons gris foncé (funnel) et « Let's talk » de la nav au survol : passent en blanc */
.fn-next.sweep > span:first-child, .fn-close.sweep > span:first-child, .nav-cta--solid.sweep > span:first-child { background: #fff; color: #000; }
.fn-next.sweep .plus, .fn-close.sweep .close, .nav-cta--solid.sweep .plus { background: #fff; }
.fn-next.sweep .plus::before, .fn-next.sweep .plus::after, .fn-close.sweep .close::before, .fn-close.sweep .close::after,
.nav-cta--solid.sweep .plus::before, .nav-cta--solid.sweep .plus::after { background: #000; }
/* le bas de la carte est blanc : pied de page en noir */
.footer-row { display: flex; align-items: center; justify-content: space-between; font-size: 15px; line-height: 20px; color: #000; }
.footer-row > * { flex: 1; }
.footer-row nav { display: flex; justify-content: center; gap: 32px; }
.footer-end { display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.dim { opacity: .5; }

/* apparition (main.js) : fondu + légère montée, délai --d pour la cascade. Sans .in, l'élément garde
   sa propre opacité une fois arrivé */
[data-reveal] {
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
[data-reveal]:not(.in) { opacity: 0; translate: 0 28px; }
/* tous les MW du site montent depuis le bas de leur cadre, comme cachés derrière un carré (main.js, initMW) :
   c'est le tracé qui bouge, le SVG reste en place et coupe ce qui dépasse (--h = hauteur de sa viewBox) */
.end-claim .mw[data-reveal] { opacity: 1; translate: none; }
.mw-rise path { transition: translate 2s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .5s); }
.mw-rise:not(.in) path { translate: 0 var(--h); }
@media (prefers-reduced-motion: reduce) { [data-reveal]:not(.in) { opacity: 1; translate: none; } .mw-rise path { translate: none; } }

/* ---------- Page Work : titre qui mélange ses lettres, mosaïque de visuels étiquetés (main.js, initWork) ---------- */

.wk { padding: calc(104 * var(--u)) 16px 16px; background: #fff; } /* fond propre : le body passe au noir en bas de page (at-end) */
.wk-title { padding-bottom: 24px; font-size: calc(160 * var(--u)); line-height: 86%; letter-spacing: -0.03em; text-align: center; }
.wk-title button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wk-title span { display: inline-block; }
/* au survol, les lettres tremblent comme si elles se préparaient à bouger (transform : la glissade du clic utilise translate) */
.wk-title button:hover span { animation: wk-shake .28s linear infinite; }
.wk-title button:hover span:nth-child(2) { animation-delay: -.07s; }
.wk-title button:hover span:nth-child(3) { animation-delay: -.14s; }
.wk-title button:hover span:nth-child(4) { animation-delay: -.21s; }
/* --amp (main.js) : la lettre sous la souris tremble le plus, la plus éloignée le moins */
@keyframes wk-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(calc(-1.5px * var(--amp, 1)), calc(1px * var(--amp, 1))) rotate(calc(-1deg * var(--amp, 1))); }
  50% { transform: translate(calc(1px * var(--amp, 1)), calc(-1.5px * var(--amp, 1))) rotate(calc(.8deg * var(--amp, 1))); }
  75% { transform: translate(calc(1.5px * var(--amp, 1)), calc(.5px * var(--amp, 1))) rotate(calc(-.5deg * var(--amp, 1))); }
}
@media (prefers-reduced-motion: reduce) { .wk-title button:hover span { animation: none; } }
.wk-grid { display: flex; gap: 16px; }
.wk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wk-tile { position: relative; display: block; overflow: hidden; background: #eee; }
.wk-tile:last-child { flex-grow: 1; } /* le dernier visuel de chaque colonne comble les quelques px d'écart */
.wk-tile img, .wk-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* vidéos : le navigateur laisse un fil noir sur un bord qui tombe entre deux pixels ; elles débordent d'1 px, coupé */
.wk-tile video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.cs-gallery > video, .cs-pair > video { margin: -1px; width: calc(100% + 2px); clip-path: inset(1px); }
/* nom du projet caché au-dessus du visuel ; il descend en blanc au survol du visuel, et passe sur noir au survol du nom (balayage de .btn) */
.wk-tile .btn { position: absolute; top: 0; left: 0; translate: 0 -100%; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.wk-tile:hover .btn, .wk-tile:focus-visible .btn { translate: 0 0; }

/* ---------- Funnel de contact : fond noir, une question par écran (main.js, initFunnel) ---------- */

.fn-page { background: #000; color: #fff; }

/* sortie du funnel : cartouche + carré à la croix, comme « Let's talk » ; gris foncé, blanc au survol.
   Sur le fond noir, le mode différence de la nav rend ces couleurs telles quelles */
.fn-close { position: relative; display: flex; align-items: stretch; }
.fn-close > span:first-child { display: flex; align-items: center; padding: 2px 4px; background: #2b2b2b; color: #fff; }
.fn-close .close { width: 22px; height: auto; background: #2b2b2b; }
.fn-close .close::before, .fn-close .close::after { left: 10.5px; top: calc(50% - 6px); width: 1px; height: 12px; background: #fff; } /* centrée, même quand la phrase passe sur 2 lignes */
.fn { min-height: 100vh; min-height: 100svh; padding: calc(150 * var(--u)) calc(64 * var(--u)) calc(64 * var(--u)); display: grid; }
.fn-progress { position: fixed; left: calc(64 * var(--u)); right: calc(64 * var(--u)); bottom: calc(40 * var(--u)); display: flex; align-items: center; gap: 16px; font-size: 14px; color: #ffffff80; font-variant-numeric: tabular-nums; z-index: 5; }
.fn-progress i { flex: 1; height: 1px; background: #ffffff26; position: relative; }
.fn-progress i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; scale: var(--p, 0) 1; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.fn-step { grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: calc(1000 * var(--u)); }
.fn-step:not(.on) { visibility: hidden; opacity: 0; translate: 0 24px; pointer-events: none; }
.fn-step.on { transition: opacity .5s .1s, translate .7s .1s cubic-bezier(.2, .7, .2, 1); }
.fn-q { font-size: calc(96 * var(--u)); line-height: 94%; }
.fn-hint { max-width: 520px; font-size: 18px; line-height: 1.4; color: #ffffffa6; }
.fn-opts { display: flex; flex-direction: column; gap: 8px; width: min(100%, 560px); }
.fn-opts button {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; text-align: left;
  font: inherit; font-size: 20px; color: #fff; background: none; border: 1px solid #ffffff40; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.fn-opts button b { width: 24px; height: 24px; display: grid; place-items: center; flex-shrink: 0; font-weight: 400; font-size: 13px; border: 1px solid #ffffff59; }
.fn-opts button:hover { border-color: #fff; }
.fn-opts button.picked { background: #fff; color: #000; border-color: #fff; }
.fn-opts button.picked b { border-color: #000; }
.fn-fields { display: flex; flex-direction: column; gap: 24px; width: min(100%, 560px); }
.fn-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #ffffff80; }
.fn input, .fn textarea {
  width: min(100%, 720px); padding: 8px 0; font: inherit; font-size: 24px; color: #fff; background: none;
  border: 0; border-bottom: 1px solid #ffffff59; border-radius: 0; outline: none; resize: none;
}
.fn input:focus, .fn textarea:focus { border-color: #fff; }
.fn .invalid { border-color: #ff6b5e; }
.fn textarea::placeholder { color: #ffffff4d; }
/* boutons du funnel : même cartouche que la sortie, gris foncé, blancs au survol (.sweep) */
.fn-next { position: relative; display: flex; font: inherit; font-size: 20px; line-height: 110%; border: 0; padding: 0; background: none; cursor: pointer; }
.fn-next > span:first-child { display: flex; align-items: center; padding: 0 6px; background: #2b2b2b; color: #fff; }
.fn-next .plus { background: #2b2b2b; }
.fn-next .plus::before, .fn-next .plus::after { background: #fff; }
.fn-back { position: fixed; left: calc(64 * var(--u)); bottom: calc(64 * var(--u) + 24px); font: inherit; font-size: 14px; color: #ffffff80; background: none; border: 0; padding: 0; cursor: pointer; z-index: 5; }
.fn-back:hover { color: #fff; }
.fn-back[hidden] { display: none; }

/* ---------- Who we are (Paper 1QO-1) : la page entière sur le dégradé du hero, du noir en haut au blanc en bas ---------- */

.ab {
  color: #fff;
  background: linear-gradient(in oklab 180deg, oklab(0% 0 0) 0%, oklab(17.1% -0.017 -0.029) 27.84%,
    oklab(26.2% -.0004 -0.038) 55.68%, oklab(50.6% -0.020 -0.040) 80.6%, oklab(100% 0 0) 100%);
}
.ab > section { padding: 0 calc(64 * var(--u)) calc(240 * var(--u)); }
.ab h3 { font-weight: 400; }
.ab .display { letter-spacing: -0.025em; }
.ab-text { font-size: 18px; line-height: 27px; opacity: .7; }
.ab-cols { display: flex; gap: calc(64 * var(--u)); align-items: flex-start; }
.ab-cols > * { flex: 1; min-width: 0; }

.ab-intro { padding-top: calc(191 * var(--u)) !important; display: flex; flex-direction: column; align-items: center; }
.ab-intro .mw { margin-bottom: calc(48 * var(--u)); }
.ab-intro h1 { font-size: calc(120 * var(--u)); line-height: 100%; text-align: center; margin-bottom: calc(200 * var(--u)); }
.ab-intro .ab-cols { align-self: stretch; }
.ab-lead { font-size: calc(32 * var(--u)); line-height: 116%; }
.ab-intro .ab-text { font-size: calc(21 * var(--u)); line-height: 1.43; opacity: 1; }

.ab-how h2, .ab-convictions h2 { font-size: calc(88 * var(--u)); line-height: 94%; }
.ab-steps { list-style: none; border-bottom: 1px solid #ffffff33; }
.ab-steps li { display: flex; padding: 32px 0; border-top: 1px solid #ffffff33; }
.ab-num { flex-shrink: 0; width: 120px; font-size: 15px; line-height: 18px; }
.ab-steps h3 { margin-bottom: 32px; font-size: calc(40 * var(--u)); line-height: 1.1; letter-spacing: -0.03em; }
.ab-steps p { font-size: 18px; line-height: 27px; opacity: .7; }

.ab-convictions .ab-head { align-items: flex-end; margin-bottom: calc(96 * var(--u)); }
.ab-convictions .ab-text { opacity: 1; }
.ab-pillars { display: flex; gap: calc(64 * var(--u)); }
.ab-pillars > div { flex: 1; padding-top: 24px; border-top: 1px solid #444; }
.ab-pillars h3 { margin-bottom: 16px; font-size: calc(32 * var(--u)); line-height: 1.125; letter-spacing: -0.03em; }
.ab-pillars p { font-size: 17px; line-height: 25px; }

.ab-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(64 * var(--u)); margin-bottom: calc(64 * var(--u)); }
.ab-head--split > * { flex: 1; }
.ab-head--split h2 { font-size: calc(96 * var(--u)); line-height: 100%; }
.ab-head--split p { font-size: 18px; line-height: 27px; }
.ab-list { list-style: none; }
.ab-list li { display: flex; align-items: center; gap: calc(64 * var(--u)); padding: 24px 0; border-top: 1px solid #ffffff33; }
.ab-list h3 { flex: 1; font-size: calc(40 * var(--u)); line-height: 1.1; letter-spacing: -0.03em; }
.ab-list p { flex: 1; font-size: 17px; line-height: 25px; }

.ab-team { padding-bottom: calc(200 * var(--u)) !important; }
.ab-photo { display: block; width: 100%; height: auto; aspect-ratio: 1536 / 1024; margin-bottom: 40px; background: #eee; } /* image entière, sans recadrage */
.ab-bios { display: flex; gap: calc(64 * var(--u)); }
.ab-bios > div { flex: 1; }
.ab-bios h3 { margin-bottom: 8px; font-size: calc(36 * var(--u)); line-height: 100%; letter-spacing: -0.02em; }
.ab-role { margin-bottom: 8px; font-size: 15px; line-height: 20px; color: #ffffffb3; }
.ab-bios p:last-child { width: 80%; font-size: 15px; line-height: 22px; }

.ab-end { display: flex; flex-direction: column; gap: calc(200 * var(--u)); padding: 0 calc(56 * var(--u)) calc(56 * var(--u)); }
/* ---------- AI (ai.html) : la page About (même dégradé, classes .ab), plus quelques blocs à elle ---------- */
.ai-btn { margin-top: 32px; }
.ai .ab-pillars > div::before { background: #ffffff33; } /* filets comme ceux des listes de la page (About garde son gris #444) */
.ai-shift { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(80 * var(--u)) !important; padding-bottom: calc(320 * var(--u)) !important; }
.ai-shift h2 { font-size: calc(220 * var(--u)); line-height: 88%; margin-bottom: calc(64 * var(--u)); } /* le moment fort de la page */
.ai-shift .ab-text { max-width: 560px; font-size: calc(21 * var(--u)); line-height: 1.43; opacity: 1; }
.ab-convictions + .ab-convictions .ab-head { margin-bottom: calc(64 * var(--u)); }
@media (max-width: 760px) {
  .ai-shift { padding-top: 40px !important; padding-bottom: 160px !important; }
  .ai-shift h2 { font-size: 88px; margin-bottom: 32px; }
  .ai-shift .ab-text { font-size: 17px; line-height: 25px; }
}
.wk-end { padding-top: calc(200 * var(--u)); background: #fff; } /* Work : footer court sur fond blanc (Paper 4OJ-0) */
/* CTA light sur fond blanc : gris clair de « Fermer » des cases, passe en noir au survol */
.btn--grey > span:first-child, .plus--grey { background: #ebebeb; }
.plus--grey::before, .plus--grey::after { background: #000; }

/* ---- animations au fil du scroll (main.js, initAbout) ---- */
.ab .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ab .ln > span { display: block; translate: 0 110%; transition: translate 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + var(--i) * 90ms); }
.ab .in .ln > span, .ab .in.ln > span { translate: 0 0; }
.ab [data-ab]:is(.ab-lead, .ab-text, p) { opacity: 0; translate: 0 24px; transition: opacity 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate 1.2s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.ab [data-ab].in:is(.ab-lead, .ab-text, p) { opacity: 1; translate: none; }
.ab-intro .ab-text[data-ab].in { opacity: 1; }
/* traits : dessinés de gauche à droite (un pseudo-élément remplace la bordure), le contenu suit */
.ab-steps li, .ab-pillars > div, .ab-list li { position: relative; border-top: 0 !important; }
.ab-steps li::before, .ab-pillars > div::before, .ab-list li::before, .ab-steps::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #ffffff33;
  transform-origin: left; scale: 0 1; transition: scale 1.4s cubic-bezier(.65, 0, .25, 1) var(--d, 0s);
}
.ab-pillars > div::before { background: #444; }
.ab-steps { position: relative; border-bottom: 0 !important; }
.ab-steps::after { top: auto; bottom: 0; transition-delay: .6s; }
.ab [data-ab].in::before, .ab-steps.in::after { scale: 1 1; }
.ab-steps li > *, .ab-pillars > div > *, .ab-list li > *, .ab-bios > div > * {
  opacity: 0; translate: 0 16px;
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .25s), translate 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .25s);
}
.ab .in > * { opacity: 1; translate: none; }
/* photo : se découvre de bas en haut */
.ab-photo[data-ab] { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.65, 0, .25, 1); }
.ab-photo[data-ab].in { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) {
  .ab .ln > span, .ab [data-ab], .ab [data-ab] > *, .ab-steps li > *, .ab-pillars > div > *, .ab-list li > *, .ab-bios > div > * { translate: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .ab-steps li::before, .ab-pillars > div::before, .ab-list li::before, .ab-steps::after { scale: 1 1; }
}

/* Who we are en mobile : une colonne, tout ferré à gauche, tailles en px (les tailles en u deviennent illisibles) */
@media (max-width: 760px) {
  .ab > section { padding: 0 16px 120px; }
  .ab-cols, .ab-pillars, .ab-bios, .ab-head--split, .ab-list li { flex-direction: column; align-items: stretch; gap: 24px; }
  .ab-intro { padding-top: 120px !important; }
  .ab-intro .mw { margin-bottom: 32px; }
  .ab-intro h1 { font-size: 56px; margin-bottom: 80px; }
  .ab-lead { font-size: 24px; }
  .ab-intro .ab-text { font-size: 17px; line-height: 25px; }
  .ab-how h2, .ab-convictions h2, .ab-head--split h2 { font-size: 52px; text-align: left; }
  .ab-how { gap: 48px; }
  .ab-num { width: 40px; }
  .ab-steps h3 { margin-bottom: 16px; font-size: 28px; }
  .ab-steps p, .ab-head--split p, .ab-text { font-size: 16px; line-height: 24px; }
  .ab-convictions .ab-head { align-items: stretch; margin-bottom: 56px; }
  .ab-pillars { gap: 40px; }
  .ab-pillars h3 { font-size: 26px; }
  .ab-pillars p, .ab-list p { font-size: 16px; line-height: 24px; }
  .ab-head--split { gap: 16px; margin-bottom: 40px; }
  .ab-list li { gap: 8px; }
  .ab-list h3 { font-size: 28px; }
  .ab-team { padding-bottom: 120px !important; }
  .ab-bios { gap: 32px; }
  .ab-bios h3 { font-size: 32px; }
}

/* ---------- Mentions légales (legals.html) : titre comme Work, rubriques en lignes comme les expertises de Who we are ---------- */
.lg { padding: calc(200 * var(--u)) calc(64 * var(--u)) 0; }
.lg-title { margin-bottom: calc(120 * var(--u)); font-size: calc(160 * var(--u)); line-height: 86%; letter-spacing: -0.03em; text-align: center; }
.lg-list > div { display: flex; gap: calc(64 * var(--u)); padding: 24px 0; border-top: 1px solid #00000024; }
.lg-list > div:last-child { border-bottom: 1px solid #00000024; }
.lg-list dt { flex: 1; font-size: calc(40 * var(--u)); line-height: 1.1; letter-spacing: -0.03em; }
.lg-list dd { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 25px; color: #000000b3; }
.lg-list a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bandeau du diagnostic en bas de la home (Paper « diag-card ») : noir, pleine largeur, titre, texte et CTA centrés ---------- */
.diag-band { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: calc(64 * var(--u)) calc(40 * var(--u)); background: #000; color: #fff; text-align: center; } /* tout centré et empilé (Paper FJ1-0, 19/10) */
/* Safari iPhone : élément fixe en bas, noir quand le bandeau est à l'écran (main.js initEndTint) pour que la barre d'outils
   passe au noir ; le fond de html noir couvre aussi le rebond en bas de page (le body reste blanc) */
html:has(.diag-band) { background: #000; }
/* Safari iOS 26 teinte sa barre flottante d'après le fond de la page : il passe au noir, en fondu, quand le bandeau couvre le bas de l'écran */
html:has(.diag-band) body { transition: background-color .8s; }
html.at-end body { background: #000; }
.diag-band-title { font-size: calc(72 * var(--u)); line-height: 100%; letter-spacing: -0.03em; }
.diag-band-side { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.diag-band-text { max-width: 608px; font-size: 20px; line-height: 28px; color: #ffffffb3; }
.diag-band-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 15px; line-height: 20px; color: #ffffff80; }
.diag-band .btn.sweep > span:first-child, .diag-band .btn.sweep .plus { background: #2b2b2b; } /* survol : gris foncé du funnel, le noir se perdrait sur le fond */
@media (max-width: 760px) {
  .diag-band { gap: 24px; padding: 40px 16px; }
  .diag-band-title { font-size: 44px; }
  .diag-band-text { font-size: 17px; line-height: 25px; }
}

/* ---------- Home mobile : bandeau de cases (main.js initBand) ---------- */
.band, .br-m { display: none; }
@media (max-width: 760px) {
  .br-m { display: inline; }
  .mx-block .thumb { display: none; }
  .mx-block .thumb + .w::before { content: " "; } /* l'espace que tenait la vignette entre deux mots */
  .mx-block .thumb + .mx-punct::before { content: none; } /* ponctuation collée au mot : l'espace passe après elle */
  .mx-block .mx-punct + .w::before { content: " "; }
  .band { display: flex; flex-direction: column; gap: 8px; align-self: stretch; position: relative; z-index: 2; margin: -136px -16px 0; overflow: hidden; } /* chevauche le pied du monogramme */
  .band-track { display: flex; gap: 8px; width: max-content; padding-right: 8px; } /* défilement et glissé au doigt : main.js (initBand) */
  .band { touch-action: none; user-select: none; -webkit-user-select: none; } /* le doigt y passe toujours par Lenis (index.html, main.js initBand) */
  .band img { -webkit-user-drag: none; }
  .band-card { opacity: 0; transition: opacity .9s calc(var(--i) * 90ms); }
  .band.in .band-card { opacity: 1; }
  .band-card { position: relative; flex: none; width: 168px; aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
  .band-card :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .band-card .btn { position: absolute; left: 0; top: 0; }
  .band-card .btn > span:first-child { font-size: 14px; }
}

/* ---------- Menu burger (main.js initMenu) : dès 1000 px, avant que les liens de la nav touchent la mention centrale
   (« Design agency » touche « Work » vers 835 px avec Work, About, Diagnostic) ---------- */
.nav-burger, .menu { display: none; }
@media (max-width: 1000px) {
  .nav nav > a:not(.nav-cta, .fn-close) { display: none; }
  /* même dessin que le burger « Infos » des cases : 3 traits, le dernier plus court ; ouvert, il devient une croix */
  .nav-burger { position: relative; display: block; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .nav-burger i { position: absolute; left: 3px; width: 18px; height: 2px; background: currentColor; transition: .4s cubic-bezier(.7, 0, .2, 1); }
  .nav-burger i:nth-child(1) { top: 5px; }
  .nav-burger i:nth-child(2) { top: 11px; }
  .nav-burger i:nth-child(3) { top: 17px; width: 12px; }
  .menu-open .nav-burger i:nth-child(1) { top: 11px; rotate: 45deg; }
  .menu-open .nav-burger i:nth-child(2) { opacity: 0; }
  .menu-open .nav-burger i:nth-child(3) { top: 11px; width: 18px; rotate: -45deg; }
  .menu {
    position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; justify-content: flex-end; gap: 48px;
    padding: 0 max(16px, calc(64 * var(--u))) 24px; background: #000; color: #fff; visibility: hidden; /* aligné sur le logo */
    -webkit-mask: linear-gradient(225deg, #000 33%, #0000 66%) 0 100% / 300% 300% no-repeat;
    mask: linear-gradient(225deg, #000 33%, #0000 66%) 0 100% / 300% 300% no-repeat;
    transition: -webkit-mask-position .5s cubic-bezier(.45, 0, .25, 1), mask-position .5s cubic-bezier(.45, 0, .25, 1), visibility 0s .5s;
  }
  .menu-open .menu { visibility: visible; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition-delay: 0s; }
  .menu nav { display: flex; flex-direction: column; }
  .menu nav a {
    font-family: var(--serif); font-size: 72px; line-height: 94%; letter-spacing: -0.025em; font-stretch: 50%; font-variation-settings: "wdth" 50;
    opacity: 0; translate: 0 24px; transition: opacity .3s, translate .3s;
  }
  .menu-open .menu nav a { opacity: 1; translate: none; transition: opacity .8s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--i) * 90ms), translate 1s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i) * 90ms); }
  .menu nav a[aria-current] { opacity: .35; }
  .menu-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: 15px; line-height: 20px; opacity: 0; transition: opacity .3s; }
  .menu-foot div { display: flex; flex-direction: column; }
  .menu-open .menu-foot { opacity: 1; transition: opacity .8s .4s; }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  /* hero mobile : drapeau et mât à l'échelle d'un écran de 700 px, monogramme agrandi sans déformation (50vh de haut,
     il déborde sur les côtés) pour que le drapeau arrive haut. flag.js centre l'ensemble ; la hauteur garde le pied du monogramme */
  :root { --hu: calc(100vw / 700); }
  .monument { --w: calc(50vh * 1507 / 808.639); width: var(--w); left: calc(50% - var(--w) * 27 / 1507); }
  .hero { height: calc(97 * var(--hu) + 130vh); }
  .hero-pin { height: calc(97 * var(--hu) + 210vh); }
}

@media (max-width: 760px) {
  .nav { left: 16px; right: 16px; }
  .nav-mention { display: none; }
  .nav .logo { width: 150px; }
  .nav nav { gap: 14px; font-size: 13px; white-space: nowrap; }
  .nav .nav-cta { font-size: 16px; } /* même taille que sa copie au survol (.nav-cta--solid), 16 px partout */
  /* sortie du funnel : la phrase passe sur 2 lignes si elle ne tient pas à côté du logo */
  .fn-close { max-width: calc(100vw - 32px - 150px - 16px); white-space: normal; }
  .fn-close > span:first-child { padding: 3px 6px; line-height: 16px; }
  /* manifeste mobile : chaque bloc devient un seul paragraphe centré, les vignettes prises dans le texte comme des mots */
  .mx { gap: 72px; padding: 64px 16px 72px; } /* 72 sous le bouton (Paper I5Q-1, 21/10) */
  .mx-block { display: block; text-align: center; font-family: var(--serif); font-variation-settings: "wdth" 50; font-stretch: 50%; letter-spacing: -0.025em; font-size: 40px; line-height: 104%; } /* même police que les lignes : sinon l'espace entre deux lignes est trop large */
  .mx-line { display: inline; white-space: normal; font-size: inherit; line-height: inherit; }
  .mx-punct { margin-left: 0; }
  .mx-reel { display: none; }
  .mx > .mx-cta { display: flex; } /* 72 sous le manifeste, l'écart de .mx (Paper I5Q-1, 21/10) */
  .mx-cta { opacity: 0; transition: opacity .8s .3s; } /* en fondu, un peu après la dernière lettre du manifeste */
  .mx.written .mx-cta { opacity: 1; }
  .mx-intro .mx-line { font: inherit; letter-spacing: inherit; }
  .mx-block.mx-intro { font-family: var(--sans); font-variation-settings: normal; font-stretch: normal; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; width: 84%; margin-inline: auto; } /* bloc resserré (Paper, 19/10) */
  .thumb, .thumb--wide { display: inline-block; vertical-align: -0.12em; width: 1.5em; height: 1em; margin: 0 .12em; }
  .pop { display: none !important; }
  .end-claim { gap: 32px; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .logos span { height: 90px; }
  .logos img { height: 22px; }
  .logos img[src*="ubisoft"] { height: 40px; }
  .logos img[src*="tour-eiffel"] { height: 60px; }
  .logos img[src*="gpa"] { height: 17px; }
  .wk-tile .btn > span:first-child { font-size: 14px; }
  /* CTA en 20 px agrandis (Paper AUB-0, 21/10) : 6 px autour du texte, carré du + en 26 px. Pas les noms des projets (14 px) */
  .btn:not(.wk-tile .btn, .band-card .btn) > span:first-child { padding: 0 6px; }
  :is(.btn:not(.wk-tile .btn, .band-card .btn), .fn-next) .plus { width: 26px; height: 26px; }
  :is(.btn:not(.wk-tile .btn, .band-card .btn), .fn-next) .plus::before { left: 7px; top: 12.5px; }
  :is(.btn:not(.wk-tile .btn, .band-card .btn), .fn-next) .plus::after { left: 12.5px; top: 7px; }
  .contact-title { font-size: 52px; }
  /* fin de page mobile : carte resserrée, marges de 16 px comme la nav */
  .end { padding: 4px; }
  .end-card { gap: 96px; padding: 96px 16px 24px; }
  .end-claim p { font-size: 48px; }
  .logos { gap: 8px; }
  .contact-top { gap: 32px; }
  /* pied de page : réseaux sur toute la largeur, puis logo et MW aux deux bords, © en dessous */
  .footer-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px 0; }
  .footer-row > * { flex: none; }
  .footer-row nav { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; gap: 0; }
  .footer-row > :first-child { grid-column: 1; grid-row: 2; }
  .footer-end { display: contents; }
  .footer-row .logo { width: 120px; }
  .footer-row .mw { grid-column: 2; grid-row: 2; width: 48px; }
  .footer-row .dim, .footer-end > a { grid-column: 1; grid-row: 3; margin-top: -28px; font-size: 13px; }
  .footer-end > a { grid-column: 2; justify-self: end; }
  .ab-end { gap: 120px; padding: 0 16px 24px; }
  .lg { padding: 120px 16px 0; }
  .lg-title { margin-bottom: 56px; font-size: 72px; }
  .lg-list > div { flex-direction: column; gap: 12px; }
  .lg-list dt { font-size: 28px; }
  .lg-list dd { font-size: 16px; line-height: 24px; }
  /* Work : titre à l'échelle de l'écran, comme en desktop */
  .wk { padding: calc(72px + var(--safe)) 4px 4px; } /* marges du cadre du footer (4px) */
  .wk-grid, .wk-col { gap: 4px; } /* même marge partout : bords, centre et entre les images */
  .wk-title { font-size: 120px; padding-bottom: 16px; }
  /* funnel : questions lisibles, marges de 16 px, progression et retour en bas */
  .fn { padding: calc(96px + var(--safe)) 16px 104px; }
  .fn-q { font-size: 48px; }
  .fn-hint { font-size: 16px; }
  .fn-progress { left: 16px; right: 16px; bottom: 24px; }
  .fn-back { left: 16px; bottom: 56px; }
  .wk-end { padding-top: 120px; }
}

/* ---------- Arrivée sur la home : un voile blanc se retire en balayage diagonal depuis le coin haut gauche,
   même geste que le panneau « Infos » d'un case (masque 3x plus grand que l'écran, bord en fondu très large).
   Il part quand le drapeau est prêt (html.ready, posé par flag.js) ; main.js le retire du DOM à la fin. ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 85; /* au-dessus de la nav : le balayage l'efface et la redécouvre avec le reste */
  background: #fff;
  pointer-events: none;
  -webkit-mask: linear-gradient(135deg, #0000 33%, #000 66%) 100% 100% / 300% 300% no-repeat;
  mask: linear-gradient(135deg, #0000 33%, #000 66%) 100% 100% / 300% 300% no-repeat;
}
.ready .veil { animation: veil-out .9s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes veil-out { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* About et AI (pages sur fond noir) : voile noir à l'arrivée, et au départ vers elles (pas d'éclair blanc entre les deux) */
.veil.veil--night { background: #000; }
/* départ vers une autre page : le même balayage, qui recouvre cette fois depuis le coin haut gauche */
.veil--in {
  -webkit-mask-image: linear-gradient(135deg, #000 33%, #0000 66%);
  mask-image: linear-gradient(135deg, #000 33%, #0000 66%);
  animation: veil-in .5s cubic-bezier(.45, 0, .25, 1) forwards;
}
@keyframes veil-in { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* vers le funnel et à son arrivée : balayage noir plus court, qui part du coin haut droit (côté « Let's talk ») */
.veil.veil--dark {
  background: #000;
  -webkit-mask-image: linear-gradient(225deg, #0000 33%, #000 66%); mask-image: linear-gradient(225deg, #0000 33%, #000 66%);
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
}
.ready .veil--dark { animation: veil-out-right .6s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes veil-out-right { to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.veil--in.veil--dark {
  -webkit-mask-image: linear-gradient(225deg, #000 33%, #0000 66%); mask-image: linear-gradient(225deg, #000 33%, #0000 66%);
  animation: veil-in-right .4s cubic-bezier(.45, 0, .25, 1) forwards;
}
@keyframes veil-in-right { to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.nav-logo .reg, .nav-loader .reg { transform-box: fill-box; transform-origin: center; }
/* avant main.js, à l'arrivée par le balayage : la nav (ou le logo seul) au-dessus du voile, comme la copie que pose loader() */
.nav-up .nav, .logo-up .nav { z-index: 96; }
.logo-up .nav > :not(.nav-logo) { visibility: hidden; }
.nav-loader { position: fixed; z-index: 95; pointer-events: none; color: #fff; mix-blend-mode: difference; }
.nav nav a { transition: opacity .4s; }
.nav nav a[aria-current] { opacity: .35; } /* page en cours : en gris clair (sur fond sombre, gris foncé) */
.reg.spin { animation: reg-flip .5s linear infinite; } /* le ® tourne comme une pièce pendant le chargement (main.js) */
@keyframes reg-flip { 0% { transform: scaleX(1); } 25% { transform: scaleX(0); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ---------- Case study (repris de la V2) ---------- */

/* ---------- Entrée dans un case : la carte zoome jusqu'au hero de la page du case (main.js) ---------- */

.zoom-layer { position: fixed; z-index: 100; overflow: hidden; }
.zoom-bg { inset: 0; z-index: 99; background: #fff; } /* le fond du case arrive en fondu pendant le zoom */
.zoom-layer > * { display: block; width: 100%; height: 100%; object-fit: cover; }
/* calque sombre de la carte : s'efface pendant le zoom (main.js) */
.zoom-layer::after { content: ""; position: absolute; inset: 0; background: #00000038; }
.zoom-layer.zoom-bg::after { content: none; }
/* fermeture : la page du case glisse vers le bas et découvre la home (main.js) */
.cs-sheet { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #fff; }
.cs-sheet * { animation: none !important; } /* sinon les fondus d'arrivée rejouent */

/* ---------- Page d'un case : galerie seule sur fond blanc, les infos texte s'ouvrent via « Infos » ---------- */

.cs-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(16px + var(--safe)) 16px 16px;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 20px;
}
.cs-bar > * { flex: 1; display: flex; align-items: center; gap: 12px; }
.cs-bar > :nth-child(2) { justify-content: center; }
.cs-bar > :last-child { justify-content: flex-end; }
/* une fois le visuel en place : barre et reste de la galerie arrivent en fondu */
.cs-bar > *, .cs-gallery > :not(:first-child) { animation: cs-in .6s both; }
/* ouvert depuis la home : pas de fondu, le voile balaie les textes (main.js, openCase) ; le 1er visuel passe devant le voile */
.cs-swept .cs-bar > *, .cs-swept .cs-gallery > *, .cs-swept .cs-title { animation: none; }
.cs-swept .cs-gallery > :first-child { position: relative; z-index: 86; }
@keyframes cs-in { from { opacity: 0; } }
.cs-infos, .cs-bar .back { display: flex; align-items: center; gap: 12px; }
.cs-infos { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.burger { position: relative; width: 18px; height: 14px; }
.burger i { position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: currentColor; transform-origin: 0 50%; transition: .4s .3s cubic-bezier(.7, 0, .2, 1); }
.burger i:nth-child(2) { top: 6px; }
.burger i:nth-child(3) { top: 12px; width: 12px; }
/* dans la popup, le burger devient une flèche de retour vers la galerie */
.info-open .cs-panel .burger i:nth-child(1) { top: 6px; left: 1px; width: 9px; rotate: -45deg; }
.info-open .cs-panel .burger i:nth-child(3) { top: 6px; left: 1px; width: 9px; rotate: 45deg; }
.close { position: relative; width: 24px; height: 24px; background: currentColor; }
.close::before, .close::after { content: ""; position: absolute; left: 11.5px; top: 6px; width: 1px; height: 12px; background: #fff; rotate: 45deg; }
.close::after { rotate: -45deg; }

/* « Infos » : popup noire qui balaie la page en diagonale depuis le coin haut gauche (light vers dark),
   avec un bord en fondu très large.
   Elle porte sa propre copie de la barre, en blanc sur noir (main.js). La page garde son ascenseur. */
.cs-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 16px 16px;
  /* fond (Paper QI-1) : le dégradé du hero, du noir en haut au blanc en bas de l'écran */
  background: linear-gradient(in oklab 180deg, oklab(0% 0 0) 0%, oklab(17.1% -0.017 -0.029) 17.48%,
    oklab(26.2% -.0004 -0.038) 37.95%, oklab(50.6% -0.020 -0.040) 60.52%, oklab(100% 0 0) 100%);
  color: #fff;
  /* masque 3x plus grand que l'écran, en diagonale : noir en haut à gauche, fondu très large, transparent ensuite */
  -webkit-mask: linear-gradient(135deg, #000 33%, #0000 66%) 100% 100% / 300% 300% no-repeat;
  mask: linear-gradient(135deg, #000 33%, #0000 66%) 100% 100% / 300% 300% no-repeat;
  visibility: hidden;
  transition: -webkit-mask-position 1.1s cubic-bezier(.45, 0, .25, 1), mask-position 1.1s cubic-bezier(.45, 0, .25, 1), visibility 0s 1.1s;
}
.info-open .cs-panel {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  visibility: visible;
  transition: -webkit-mask-position 1.1s cubic-bezier(.45, 0, .25, 1), mask-position 1.1s cubic-bezier(.45, 0, .25, 1);
}
.cs-panel .cs-bar { margin: 0 -16px calc(100 * var(--u)); background: none; color: #fff; }
.cs-panel .cs-bar > * { animation: none; }
.cs-panel .cs-infos { opacity: .5; transition: opacity .3s; }
.cs-panel .cs-infos:hover { opacity: 1; }
.cs-panel div > .back { visibility: hidden; } /* « Fermer » (pas le logo) : sur les infos, on revient par « Gallery » */
.cs-panel .close::before, .cs-panel .close::after { background: #000; }
.cs-panel-top { display: flex; }
.cs-panel-top > * { flex: 1; }
.cs-panel h2 { flex: none; width: 45%; margin-right: 5%; font-size: calc(88 * var(--u)); line-height: 94%; letter-spacing: -0.025em; } /* Paper QI-1 : Serrif 88, en minuscules */
.cs-panel .lead { width: 74%; font-size: calc(26 * var(--u)); line-height: 1.35; }
.cs-panel .more { width: 74%; margin-top: 24px; font-size: calc(21 * var(--u)); line-height: 1.43; }
.cs-panel .credits { width: 74%; margin-top: 48px; font-size: 15px; line-height: 20px; } /* crédits des projets repris de Clint (Behance) */
.cs-panel .credits span { display: block; margin-bottom: 8px; opacity: .55; text-transform: uppercase; letter-spacing: .08em; }
.cs-kpis { display: flex; margin-top: calc(148 * var(--u)); }
.cs-kpis > * { flex: 1; padding-right: 32px; font-size: 15px; line-height: 20px; }
.cs-kpis > :last-child { padding-right: 0; }
.cs-kpis strong { display: block; margin-bottom: 12px; font-family: var(--serif); font-weight: 400; font-variation-settings: "wdth" 50; font-stretch: 50%; font-size: calc(88 * var(--u)); line-height: 94%; letter-spacing: -0.025em; } /* chiffres en Serrif comme les titres (Paper QI-1) */

/* rythme : plein 16:9, paire 4:5, plein, paire, vidéo */
.cs-title { padding: 0 16px 16px; font-size: calc(88 * var(--u)); animation: cs-in .6s both; }
.cs-title h1 { font-size: inherit; }
.cs-title p { opacity: .3; }
.cs-gallery { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.cs-gallery > * { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cs-pair { display: flex; gap: 16px; aspect-ratio: auto !important; }
.cs-pair > * { flex: 1; min-width: 0; aspect-ratio: 696 / 880; object-fit: cover; }
.cs-pair--square > * { aspect-ratio: 696 / 646; }
.cs-gallery iframe { border: 0; background: #000; } /* films intégrés (Vimeo, avec le son) */
/* « Next case » entre la fin d'un case et le suivant (main.js, initNextCase) : le filet se remplit pendant le blocage */
.cs-next { position: relative; padding-top: calc(160 * var(--u) + 64px); }
/* case suivant posé à la suite : le dégradé du footer, inversé (blanc en haut, dans la continuité de la page, noir
   sous l'intitulé, le titre et le sous-titre, en blanc), déjà là quand il arrive ; quand il remonte (.leaving),
   le dégradé s'efface et les textes repassent au noir */
.cs-next::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hh, 0); pointer-events: none;
  /* le dégradé jusqu'au bas du sous-titre (--tb), puis noir sous la première image */
  background: linear-gradient(in oklab 0deg, oklab(0% 0 0) 0%, oklab(17.1% -0.017 -0.029) 17.48%, oklab(26.2% -.0004 -0.038) 37.95%, oklab(50.6% -0.020 -0.040) 60.52%, oklab(100% 0 0) 100%) top / 100% var(--tb, 100%) no-repeat, #000;
  transition: opacity 1.2s cubic-bezier(.45, 0, .25, 1);
}
.cs-next > * { position: relative; }
.cs-next .cs-next-head, .cs-next .cs-title { color: #fff; transition: color 1.2s cubic-bezier(.45, 0, .25, 1); }
.cs-next .cs-title p { opacity: .55; transition: opacity 1.2s cubic-bezier(.45, 0, .25, 1); }
.cs-next .cs-next-head i { background: #ffffff40; }
.cs-next .cs-next-head i::after { background: #fff; }
.cs-next.leaving::before { opacity: 0; }
.cs-next.leaving .cs-next-head, .cs-next.leaving .cs-title { color: #000; }
.cs-next.leaving .cs-title p { opacity: .3; }
.cs-next-head { display: flex; align-items: center; gap: 16px; padding: 0 16px 24px; font-size: 15px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; }
.cs-next-head i { position: relative; flex: 1; height: 1px; background: #00000024; }
.cs-next-head i::after { content: ""; position: absolute; inset: 0; background: #000; transform-origin: left; scale: var(--p, 0) 1; transition: scale .25s cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 760px) {
  /* mêmes marges que Work en mobile : 4 px partout, bords et entre les images */
  .cs-gallery { gap: 4px; padding: 0 4px 4px; }
  .cs-pair { flex-direction: column; gap: 4px; }
  .cs-panel .cs-bar { margin-bottom: 40px; }
  .cs-panel-top, .cs-kpis { flex-direction: column; gap: 32px; }
  .cs-panel h2, .cs-panel .lead, .cs-panel .more { width: 100%; margin: 0; }
  .cs-panel .more { margin-top: 24px; }
  .cs-panel h2 { font-size: 44px; }
  .cs-panel .lead { font-size: 20px; }
  .cs-panel .more { font-size: 17px; }
  .cs-kpis { margin-top: 64px; }
  .cs-kpis strong { font-size: 64px; }
  .cs-title { font-size: 44px; }
  .cs-title br { display: none; } /* le retour à la ligne de la carte desktop coupe mal sur téléphone */
  /* le texte défile sur le dégradé fixé à l'écran : on l'arrête au bleu gris, sans le blanc du bas, pour que le blanc reste lisible partout */
  .cs-panel { background: linear-gradient(in oklab 180deg, oklab(0% 0 0) 0%, oklab(17.1% -0.017 -0.029) 25%, oklab(26.2% -.0004 -0.038) 55%, oklab(40% -0.015 -0.040) 100%); }
}
.cs-gallery .ph, .zoom-layer .ph { display: grid; }