/* ==========================================================================
   Amine — Art Director. Single stylesheet for the whole site.
   Every page links this file; there is no per-page <style> block.

   CHANGING THIS FILE? Bump the ?v= number on every page in the same commit.
   Same for script.js, which had no version at all and shipped stale once.
   Same for any image replaced under its own name — vague.jpg shipped stale
   too, because the file changed while the URL did not.
   The same applies to the favicons: Safari keeps them in its own cache, keyed
   by URL, and will happily show last month's icon forever otherwise.
   The Cloudflare zone caches this file for four hours and overrides any
   _headers rule, so without a new number a returning visitor gets today's
   markup with yesterday's layout. That has already shipped broken twice.
   Sections below follow the order a page is built in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Change a colour here and it changes everywhere.
   -------------------------------------------------------------------------- */
:root{
  --paper: #F7F5F1;                  /* page background */
  --ink: #14150F;                    /* body text */
  --forest: #1F3D33;                 /* accent, used sparingly */
  --dark: #111310;                   /* header + contact panel background */
  --ink-soft: rgba(20,21,15,0.62);   /* secondary text */
  --line: rgba(20,21,15,0.12);       /* hairline borders */

  --font-display: 'Archivo', system-ui, sans-serif;
  /* Une seule famille pour les titres et le texte courant. Inter était
     déclarée ici mais jamais chargée : tout le texte tombait sur la
     police du système, donc sur une autre lettre que le reste. */
  --font-body: 'Archivo', system-ui, sans-serif;

  --gutter: 32px;
  --gutter-mobile: 20px;
  --max-width: 1400px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}

/* Skip link — lets keyboard users jump straight to the content. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--dark); color:#fff;
  padding:12px 18px; font-size:14px;
}
.skip-link:focus{left:0;}

/* Visible focus ring for keyboard navigation. */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
}

.container{max-width:var(--max-width); margin:0 auto; padding:0 var(--gutter);}
@media(max-width:640px){.container{padding:0 var(--gutter-mobile);}}

/* ==========================================================================
   The site. Layout and motion follow the momkai reference; typography and
   sections come from the Claude Design mockup. Still scoped to body.v2 —
   the class is now on every page, and renaming it would touch them all for
   no gain.
   ========================================================================== */

body.v2{
  /* Pure black, sampled from the reference: its body is #000. */
  --v2-bg: #000000;
  /* Pure white and pure black, sampled from the reference. */
  --v2-fg: #FFFFFF;
  --v2-dim: rgba(255,255,255,0.5);
  --v2-line: rgba(255,255,255,0.2);
  --v2-cadre: linear-gradient(140deg,#23241F,#151612);
  --v2-accent: #FF1F1F;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* One radius for the whole site. Every rounded corner reads it. */
  --rayon: 4px;

  background:var(--v2-bg);
  color:var(--v2-fg);
}
body.v2 ::selection{background:var(--v2-accent); color:var(--v2-bg);}

/* --- Chargement. A black screen on which the monogram draws itself, fills in,
       then lifts away to uncover the page — the way bertone.it opens. It is pure
       CSS, so it never waits for a script and never blocks: the page underneath
       is already loading. The first page of a visit plays it whole; a small
       script in the head adds .v2-court to the next ones, which play it faster.
       Reduced motion skips it entirely. --- */
.v2-chargement{
  position:fixed; inset:0; z-index:300; background:#000;
  display:grid; place-items:center; pointer-events:none;
  animation:v2-voile calc(.75s * var(--t,1)) cubic-bezier(.7,0,.2,1) calc(2s * var(--t,1)) forwards;
}
html.v2-court{--t:.45;}
.v2-chargement svg{width:clamp(76px,9vw,132px); height:auto; overflow:visible; display:block;}
.v2-chargement path{
  fill:#fff; fill-opacity:0;
  stroke:#fff; stroke-width:1.4px; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:
    v2-trace calc(1.4s * var(--t,1)) cubic-bezier(.5,0,.2,1) calc(.2s * var(--t,1)) forwards,
    v2-remplit calc(.55s * var(--t,1)) ease calc(1.3s * var(--t,1)) forwards;
}
@keyframes v2-trace{to{stroke-dashoffset:0;}}
@keyframes v2-remplit{to{fill-opacity:1;}}
@keyframes v2-voile{
  from{clip-path:inset(0 0 0 0);}
  to{clip-path:inset(0 0 100% 0); visibility:hidden;}
}
@media (prefers-reduced-motion: reduce){
  .v2-chargement{display:none;}
}
/* Safety net: set by script.js a few seconds after load, whatever the animations did. */
html.pret .v2-chargement{display:none;}
html.pret body.v2 [data-reveal]{opacity:1; transform:none; transition:none;}
html.pret .v2-pap-titre em{animation:none; transform:none;}

/* --- Reveal on scroll. Without JS, or with reduced motion, content is
       simply visible: the class is added by script.js, never required. --- */
body.v2 [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
body.v2 [data-reveal].is-in{opacity:1; transform:none;}
body.v2 [data-reveal-delay="1"]{transition-delay:.12s;}
body.v2 [data-reveal-delay="2"]{transition-delay:.24s;}

/* --- Header: nav, monogram, nav. Fixed, like the reference. --- */
.v2-head{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  /* The links line up with the page's own column (headline, cards, footer) rather
     than hugging the edges of a wide screen. */
  padding:20px max(var(--gutter), calc((100% - var(--max-width)) / 2));
  background:linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0));
}
.v2-nav{display:flex; gap:30px; font-size:13px; letter-spacing:0.02em;}
.v2-nav--right{justify-content:flex-end;}
.v2-nav a{color:var(--v2-dim); transition:color .3s;}
.v2-nav a:hover{color:var(--v2-fg);}
.v2-logo{display:block; color:var(--v2-fg);}
.v2-logo svg{height:22px; width:auto; display:block;}

@media(max-width:720px){
  .v2-head{grid-template-columns:auto 1fr; padding:14px var(--gutter-mobile);}
  .v2-logo{order:-1;}
  .v2-nav--left{display:none;}          /* one-pager: the sections are below */
  .v2-nav--right{gap:18px; font-size:12px;}
}

/* --- Hero --- */
/* The opening: a video across the whole screen, the type set over it at the
   bottom, on the same column as the cards and the footer. The text wrapper
   copies the footer's measure, so its left edge lines up with theirs at every
   width. 100svh, not 100vh, so a phone's collapsing address bar does not push
   the type off the first screen. */
.v2-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:0 var(--gutter) clamp(44px,8vh,92px);
  text-align:left;
}
.v2-hero-fond{position:absolute; inset:0; z-index:-1; background:#000;}
.v2-hero-fond video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left center; display:block;
  /* A touch of zoom, anchored on the left, pushes the right-hand edge of the
     frame out of view: the stock footage shows the designer's profile there,
     and the site is about the work, not a stranger's face. */
  transform:scale(1.12); transform-origin:left center;
}
@media (max-width:820px){
  /* On a phone the crop keeps a narrow slice: aim it at the tablet and pen. */
  .v2-hero-fond video{object-position:58% center;}
}
/* Bande projet — a project shown as one full-height band on the home page,
   after the way bertone.it opens its first project: a gradient that rises from
   black to the project's colour and back, the object cut out and large on one
   side, the words on the other. The colour is the project's own panel colour. */
.v2-bande{
  --bande:#36329F;
  position:relative; overflow:hidden; color:#fff;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(80px,12vh,150px) var(--gutter);
  background:
    radial-gradient(ellipse 60% 55% at 30% 52%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(180deg, #000 0%, #14123a 20%, var(--bande) 55%, #14123a 82%, #000 100%);
}
.v2-bande-inner{
  width:100%; max-width:var(--max-width); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:center; gap:clamp(32px,6vw,110px);
}
.v2-bande-texte .v2-meta{opacity:.94;}
.v2-bande-titre{
  margin:22px 0 0; max-width:17ch;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,3.7vw,58px); line-height:1.06; letter-spacing:-0.02em;
}
.v2-bande-titre em{font-family:var(--font-serif); font-style:italic; font-weight:400;}
.v2-bande-trait{display:block; width:56px; height:2px; margin:30px 0; background:var(--v2-accent);}
.v2-bande-chapo{margin:0; max-width:42ch; font-size:clamp(16px,1.25vw,18px); line-height:1.55; color:rgba(255,255,255,.88);}
.v2-bande-lien{
  display:inline-block; margin-top:38px; padding:16px 28px;
  border:1px solid rgba(255,255,255,.7); border-radius:var(--rayon);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  transition:background .3s ease, color .3s ease;
}
.v2-bande-lien:hover,.v2-bande-lien:focus-visible{background:#fff; color:var(--bande);}
@media(max-width:820px){
  .v2-bande{min-height:0; padding:96px var(--gutter-mobile);}
  .v2-bande-inner{grid-template-columns:1fr; gap:40px;}
}
/* Film variant: the object is a video. It takes the left of the band and
   melts into the gradient on its right, top and bottom edges. */
.v2-bande--film .v2-bande-inner{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.v2-bande--film .v2-bande-texte{grid-column:2;}
.v2-bande-film{
  position:absolute; top:0; bottom:0; left:0; width:62%;
  -webkit-mask-image:linear-gradient(to right,#000 58%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 58%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-composite:intersect;
}
.v2-bande-film video{width:100%; height:100%; object-fit:cover; object-position:42% 40%; display:block;}
/* Mirrored variant: the film on the right, the words on the left. The film is
   flipped so the subject looks towards the text instead of out of the page. */
@media(min-width:821px){
  .v2-bande--droite .v2-bande-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);}
  .v2-bande--droite .v2-bande-texte{grid-column:1; grid-row:1;}
  .v2-bande--droite .v2-bande-film{
    left:auto; right:0;
    -webkit-mask-image:linear-gradient(to left,#000 58%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
    mask-image:linear-gradient(to left,#000 58%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
  }
  .v2-bande--droite .v2-bande-film video{transform:scaleX(-1); object-position:58% 40%;}
}
@media(max-width:820px){
  .v2-bande--film{flex-direction:column; align-items:stretch; padding-top:0;}
  .v2-bande-film{
    position:relative; width:auto; aspect-ratio:4/3; margin:0 calc(var(--gutter-mobile) * -1);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%);
  }
  .v2-bande--film .v2-bande-inner{grid-template-columns:1fr; margin-top:0; padding-top:8px;}
  .v2-bande--film .v2-bande-texte{grid-column:1;}
  /* On a phone the words sit in a plain block of the project colour: the film melts into
     that colour before the text starts, so nothing is ever read over the picture. */
  .v2-bande--film{padding-bottom:56px; background:var(--bande);}
  /* The film only melts at its foot, into the project colour where the words begin;
     no fade at its head, and no colour from the next project. */
  .v2-bande--film .v2-bande-film{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  }
  /* Tighter text block, so it reads as one unit under the film. */
  .v2-bande--film .v2-bande-titre{margin-top:12px;}
  .v2-bande--film .v2-bande-trait{margin:20px 0;}
  .v2-bande--film .v2-bande-chapo{line-height:1.5;}
  .v2-bande--film .v2-bande-lien{margin-top:26px;}
  .v2-bande--film .v2-bande-chapo{color:#fff;}
}

/* --- Page projet à grands panneaux — proposition. A project sheet built the way
       bertone.it builds its GB110 page: one panel after another, each with a single
       idea. Black ground, the project's own blue and red as the only colours, one
       cream band and one cream card for relief. --- */
.v2-fiche{--rouge:#F23246; --bleu:#000091; --creme:#F4F1EA;}
.v2-fiche-colonne{
  width:100%;
  padding-inline:max(var(--gutter), calc((100% - var(--max-width)) / 2));
}
.v2-fiche-h2{
  margin:0 0 clamp(36px,6vh,70px);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,4vw,60px); line-height:1.05; letter-spacing:-0.02em; max-width:22ch;
}
.v2-fiche-h2::before{
  content:""; display:block; width:56px; height:2px; margin-bottom:26px; background:var(--rouge);
}
.v2-fiche-h2 em,.v2-fiche-h1 em,.v2-fiche-carte-titre em{font-family:var(--font-serif); font-style:italic; font-weight:400;}
.v2-fiche-h2--centre{text-align:center; margin-inline:auto; max-width:none;}
.v2-fiche-h2--centre::before{margin-inline:auto;}
.v2-fiche-bloc{padding-block:clamp(90px,14vh,170px) 0; background:#000;}

/* 1. Opening: the film across the whole screen, the title low on the left. */
.v2-fiche-ouv{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,9vh,100px); background:#000;
}
.v2-fiche-ouv-fond{position:absolute; inset:0; z-index:-1;}
.v2-fiche-ouv-fond video{
  width:100%; height:100%; object-fit:cover; object-position:35% 50%; display:block;
  /* Zoomed from the left edge so the surfer moves right, clear of the title. */
  transform:scale(1.22); transform-origin:0 55%;
}
.v2-fiche-ouv-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, #000 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.18) 75%, rgba(0,0,0,.4) 100%);
}
.v2-fiche-ouv-texte .v2-meta{opacity:.94;}
.v2-fiche-h1{
  margin:22px 0 0; max-width:15ch;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px,4.8vw,70px); line-height:1.02; letter-spacing:-0.025em;
}
.v2-fiche-sous{margin:28px 0 0; max-width:46ch; font-size:clamp(16px,1.3vw,19px); line-height:1.55; color:rgba(255,255,255,.88);}
.v2-fiche-ouv .v2-scroll-cue{margin-top:40px; color:rgba(255,255,255,.7);}

/* 2. A story told with two pictures: a wide one and a tall one. */
.v2-fiche-duo{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); column-gap:clamp(20px,3vw,48px); row-gap:22px; align-items:stretch;}
.v2-fiche-duo figure{margin:0;}
.v2-fiche-petit{display:contents;}
.v2-fiche-grand{grid-column:1; grid-row:1;}
.v2-fiche-petit figure{grid-column:2; grid-row:1;}
.v2-fiche-petit .v2-fiche-legende{grid-column:2; grid-row:2;}
.v2-fiche-grand img,.v2-fiche-petit img{display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--rayon);}
.v2-fiche-petit img{aspect-ratio:4/5;}
.v2-fiche-legende{margin:0; max-width:34ch; font-size:14px; line-height:1.55; color:var(--v2-dim);}

/* 3. The idea, in words, then a pale band of pictures to set against the black. */
.v2-fiche-centre{max-width:calc(60ch + var(--gutter) * 2); margin:0 auto; padding-inline:var(--gutter); text-align:center;}
.v2-fiche-texte{margin:0 0 1.2em; font-size:clamp(16px,1.25vw,18px); line-height:1.6; color:rgba(255,255,255,.86);}
.v2-fiche-bande-claire{
  margin-top:clamp(70px,10vh,120px); padding:clamp(20px,3vw,48px);
  background:var(--creme);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px);
}
.v2-fiche-bande-claire img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--rayon);}

/* 4. A gallery that slides sideways, with a counter. */
.v2-fiche-galerie{padding-block:clamp(90px,14vh,170px); background:#000;}
.v2-fiche-piste{
  display:flex; gap:clamp(12px,1.6vw,24px); overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:max(var(--gutter), calc((100% - var(--max-width)) / 2));
  scroll-padding-inline:max(var(--gutter), calc((100% - var(--max-width)) / 2));
}
.v2-fiche-piste::-webkit-scrollbar{display:none;}
.v2-fiche-item{
  flex:none; margin:0; height:clamp(260px,52vh,540px); scroll-snap-align:start;
  border-radius:var(--rayon); overflow:hidden; background:#111;
}
.v2-fiche-item--carre{aspect-ratio:1/1;}
.v2-fiche-item--large{aspect-ratio:3/2;}
.v2-fiche-item img,.v2-fiche-item video{display:block; width:100%; height:100%; object-fit:cover;}
.v2-fiche-compteur{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-top:36px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; color:var(--v2-dim);
}
.v2-fiche-compteur i{display:block; width:clamp(90px,10vw,150px); height:1px; background:rgba(255,255,255,.25);}
.v2-fiche-compteur b{display:block; height:100%; background:var(--rouge); transform-origin:left; transform:scaleX(.33); transition:transform .25s ease;}

/* 5. Figures, set large, over the project's blue and one wide picture. */
.v2-fiche-chiffres{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, #000 0%, #05053f 28%, var(--bleu) 62%, #04042e 100%);
}
.v2-fiche-chiffres-image{position:absolute; top:0; right:0; bottom:0; width:62%; z-index:-1;}
.v2-fiche-chiffres-image img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:96% 50%; opacity:.92;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-composite:intersect;
}
.v2-fiche-chiffres-corps{padding-block:clamp(90px,14vh,170px);}
.v2-fiche-chiffres-liste{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,5vh,56px) clamp(24px,3vw,48px);
  max-width:640px; margin:0; padding:0;
}
.v2-fiche-chiffres-liste dt{
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em;
  font-size:clamp(64px,9vw,132px); line-height:.9;
}
.v2-fiche-chiffres-liste dd{margin:14px 0 0; max-width:24ch; font-size:14px; line-height:1.5; color:rgba(255,255,255,.86);}
.v2-fiche-livrables{margin:clamp(40px,7vh,72px) 0 0; max-width:52ch; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86);}
.v2-fiche-livrables .v2-meta{display:block; margin-bottom:8px; opacity:.94;}

/* 6. The closing card, cream on a full picture, pointing to the next project. */
.v2-fiche-fin{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center;
  min-height:100vh; min-height:100svh; padding:clamp(80px,14vh,160px) var(--gutter); background:#000;
}
.v2-fiche-fin-image{position:absolute; inset:0; z-index:-1;}
.v2-fiche-fin-image img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%;}
.v2-fiche-fin-image::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom,#04042e 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.3) 100%);}
.v2-fiche-carte{
  width:min(760px,100%); padding:clamp(28px,4vw,56px); text-align:center;
  background:var(--creme); color:#0A0A0A; border-radius:var(--rayon);
}
.v2-fiche-carte .v2-meta{opacity:.7;}
.v2-fiche-carte-titre{margin:18px auto 0; max-width:20ch; font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.2vw,44px); line-height:1.1; letter-spacing:-0.02em;}
.v2-fiche-bouton{
  display:inline-block; margin-top:32px; padding:16px 28px;
  border:1px solid #0A0A0A; border-radius:var(--rayon);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#0A0A0A; text-decoration:none; transition:background .3s ease, color .3s ease;
}
.v2-fiche-bouton:hover,.v2-fiche-bouton:focus-visible{background:#0A0A0A; color:var(--creme);}

@media(max-width:820px){
  .v2-fiche-colonne{padding-inline:var(--gutter-mobile);}
  .v2-fiche-duo{grid-template-columns:1fr;}
  .v2-fiche-grand,.v2-fiche-petit figure,.v2-fiche-petit .v2-fiche-legende{grid-column:1; grid-row:auto;}
  .v2-fiche-grand img{aspect-ratio:3/2; height:auto;}
  .v2-fiche-bande-claire{grid-template-columns:1fr; padding:var(--gutter-mobile);}
  .v2-fiche-centre{padding-inline:var(--gutter-mobile);}
  .v2-fiche-piste{padding-inline:var(--gutter-mobile); scroll-padding-inline:var(--gutter-mobile);}
  .v2-fiche-item{height:clamp(220px,40vh,360px);}
  .v2-fiche-chiffres-image{width:100%; bottom:auto; height:300px; opacity:.92;}
  .v2-fiche-chiffres-image img{-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%); mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);}
  .v2-fiche-chiffres-corps{padding-top:330px;}
  .v2-fiche-fin{padding-inline:var(--gutter-mobile);}
}

/* --- Page projet « papier » — proposition 2, dans la manière de elianbo.studio.
       Paper and ink, hairlines, mono captions in brackets, a very large serif title,
       numbered sections whose heading stays pinned, a film with its own bar and
       timecode, an image viewer, and a 3D ring leading to the next project. The
       switch in the header flips the page between paper and black. --- */
body.v2.v2-papier{
  --papier:#F5F3EE; --encre:#111111;
  --v2-bg:var(--papier); --v2-fg:var(--encre);
  --v2-dim:rgba(17,17,17,.6); --v2-line:rgba(17,17,17,.2);
  --pap-marge:clamp(20px,2.4vw,36px);
  transition:background-color .5s ease, color .5s ease;
}
html[data-theme="dark"] body.v2.v2-papier{
  --papier:#0C0C0C; --encre:#F2EFE9;
  --v2-dim:rgba(242,239,233,.62); --v2-line:rgba(242,239,233,.22);
}
body.v2.v2-papier .v2-head{background:linear-gradient(to bottom, var(--papier) 38%, transparent);}
.v2-theme{
  display:inline-flex; align-items:center; gap:10px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--v2-dim); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; transition:color .3s;
}
.v2-theme:hover{color:var(--v2-fg);}
.v2-theme i{position:relative; display:block; width:30px; height:16px; border:1px solid currentColor; border-radius:99px;}
.v2-theme i::after{content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:currentColor; transition:transform .3s ease;}
.v2-theme[aria-pressed="true"] i::after{transform:translateX(14px);}

.v2-pap-ouv{padding:clamp(110px,16vh,170px) var(--pap-marge) 0;}
.v2-pap-etiquette{margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--v2-dim);}
.v2-pap-titre{
  margin:clamp(8px,2vh,24px) 0 clamp(20px,4vh,44px);
  /* The project's name only: Instrument Serif italic, the accent face of the site. */
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(120px,23vw,350px); line-height:.82; letter-spacing:-0.02em;
}
.v2-pap-masque{display:block; overflow:hidden; padding:.07em .12em .1em 0;}
.v2-pap-titre em{
  display:block; font-style:italic; transform:translateY(108%);
  animation:v2-pap-monte 1.3s cubic-bezier(.16,.8,.2,1) calc(2.15s * var(--t,1)) forwards;
}
@keyframes v2-pap-monte{to{transform:none;}}
.v2-pap-metas{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
  margin:0; padding:18px 0; border-block:1px solid var(--v2-line);
}
.v2-pap-metas dt{margin-bottom:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--v2-dim);}
.v2-pap-metas dd{margin:0; max-width:32ch; font-size:13px; line-height:1.45;}
.v2-pap-intro{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:var(--pap-marge); align-items:end;
  padding:clamp(48px,9vh,110px) 0 clamp(64px,12vh,140px);
}
.v2-pap-grand{margin:0; max-width:26ch; font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.2vw,48px); line-height:1.12; letter-spacing:-0.02em;}
.v2-pap-grand em,.v2-anneau-titre.it{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0;}
.v2-pap-petit{margin:0 0 0 auto; max-width:46ch; font-size:13px; line-height:1.6; color:color-mix(in srgb, var(--v2-fg) 76%, transparent);}

.v2-pap-projet{padding:clamp(40px,7vh,80px) var(--pap-marge) 0; border-top:1px solid var(--v2-line); margin-inline:var(--pap-marge); padding-inline:0;}
.v2-pap-tete{
  position:sticky; top:56px; z-index:5;
  display:flex; align-items:baseline; gap:clamp(16px,3vw,48px);
  padding:14px 0 12px; background:var(--v2-bg); border-top:1px solid var(--v2-line);
  transition:background-color .5s ease;
}

/* Pictures: click to enlarge. */
.v2-pap-tuile{margin:0;}
.v2-pap-tuile a{position:relative; display:block; overflow:hidden; border-radius:var(--rayon); cursor:zoom-in;}
/* A second picture laid over the first, dissolving in and out (the metro poster, then the
   same poster framed in a living room). */
.v2-pap-tuile img.v2-pap-calque{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.v2-pap-tuile img,.v2-pap-tuile video{display:block; width:100%; height:auto; transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.v2-pap-tuile a:hover img,.v2-pap-tuile a:focus-visible img,.v2-pap-tuile a:hover video,.v2-pap-tuile a:focus-visible video{transform:scale(1.035);}
.v2-pap-trio{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,32px);
  padding-bottom:clamp(70px,12vh,150px);
}
.v2-pap-grille{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(28px,5vh,56px) clamp(12px,2vw,32px);
  align-items:stretch; padding-bottom:clamp(70px,12vh,150px);
}
/* Two pictures sharing a row are the same height: the row takes the taller one, the other
   fills it (cropped a little at the sides). */
@media(min-width:821px){
  .v2-pap-grille .v2-pap-tuile a{height:100%;}
  .v2-pap-grille .v2-pap-tuile img{height:100%; object-fit:cover;}
}
.v2-pap-duo{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.85vw,48px);
  max-width:var(--max-width); margin-inline:auto;
  padding-bottom:clamp(70px,12vh,150px);
}
.v2-pap-duo .v2-pap-tuile img{aspect-ratio:4/5; object-fit:cover;}
.v2-pap-tuile--4{grid-column:span 4;}
.v2-pap-tuile--6{grid-column:span 6;}
.v2-pap-tuile--8{grid-column:span 8;}
.v2-pap-tuile--12{grid-column:2 / span 10;}

/* Next project: a ring of pictures that turns when dragged. */
.v2-pap-suivant{padding:0 var(--pap-marge) clamp(70px,12vh,130px); overflow:hidden;}
.v2-pap-tete--suivant{justify-content:flex-end;}
.v2-pap-aide{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--v2-dim);}
.v2-anneau{position:relative; height:clamp(340px,56vh,560px); margin-top:clamp(16px,4vh,40px);}
.v2-anneau-lueur{
  position:absolute; left:50%; top:46%; width:min(70vw,900px); height:70%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, var(--lueur, rgba(140,140,140,.4)), transparent 72%);
  filter:blur(18px); opacity:.55; pointer-events:none; transition:background .8s ease;
}
.v2-anneau-scene{position:relative; height:100%; overflow-x:auto;}
.v2-anneau-piste{display:flex; gap:16px; height:100%;}
.v2-anneau-p{position:relative; flex:none; display:block; width:clamp(160px,22vw,260px); height:100%; overflow:hidden; border-radius:var(--rayon);}
.v2-anneau-p img{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none;}
.v2-anneau.est-actif .v2-anneau-scene{position:absolute; inset:0; overflow:visible; perspective:1400px; perspective-origin:50% 40%; touch-action:pan-y; cursor:grab; user-select:none;}
.v2-anneau.est-actif .v2-anneau-scene.glisse{cursor:grabbing;}
.v2-anneau.est-actif .v2-anneau-piste{position:absolute; left:50%; top:50%; display:block; gap:0; transform-style:preserve-3d;}
.v2-anneau.est-actif .v2-anneau-p{position:absolute; left:0; top:0; flex:none;}
.v2-anneau-n{margin:clamp(18px,3vh,32px) 0 0; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--v2-dim);}
.v2-anneau-titre{margin:8px 0 0; text-align:center; font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5.6vw,84px); line-height:1.02; letter-spacing:-0.03em;}
.v2-anneau-meta{margin:14px 0 0; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--v2-dim);}
.v2-anneau-meta a{color:var(--v2-fg); border-bottom:1px solid currentColor;}

/* The viewer. */
.v2-lb{
  position:fixed; inset:0; z-index:400; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:clamp(20px,4vw,56px); background:color-mix(in srgb, var(--v2-bg) 95%, transparent);
  opacity:0; transition:opacity .35s ease;
}
.v2-lb[hidden]{display:none;}
.v2-lb.on{opacity:1;}
.v2-lb figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; min-height:0;}
.v2-lb img{max-width:100%; max-height:calc(100svh - 170px); object-fit:contain; border-radius:var(--rayon);}
.v2-lb figcaption{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--v2-dim);}
.v2-lb button{padding:8px; border:0; background:none; cursor:pointer; color:var(--v2-fg); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;}
.v2-lb-prec,.v2-lb-suiv{font-size:28px !important;}
.v2-lb-x{position:absolute; top:14px; right:18px;}

@media(max-width:820px){
  .v2-pap-metas{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v2-pap-intro{grid-template-columns:1fr; gap:28px;}
  .v2-pap-petit{margin:0;}
  .v2-pap-titre{font-size:clamp(100px,34vw,190px);}
  .v2-pap-tete{top:54px;}
  .v2-pap-trio{grid-template-columns:1fr;}
  .v2-pap-grille{grid-template-columns:1fr;}
  .v2-pap-duo{grid-template-columns:1fr;}
  .v2-pap-tuile--4,.v2-pap-tuile--6,.v2-pap-tuile--8,.v2-pap-tuile--12{grid-column:auto;}
  .v2-theme span{display:none;}
  body.v2-papier .v2-head--case{grid-template-columns:auto 1fr auto; column-gap:14px;}
  body.v2-papier .v2-head--case .v2-logo{justify-self:center;}
  body.v2-papier .v2-head--case .v2-nav,body.v2-papier .v2-head--case .v2-back{white-space:nowrap;}
  body.v2-papier .v2-head--case .v2-nav{gap:12px; align-items:center;}
  .v2-lb{grid-template-columns:minmax(0,1fr); align-content:center;}
  .v2-lb-prec,.v2-lb-suiv{position:absolute; bottom:18px;}
  .v2-lb-prec{left:18px;} .v2-lb-suiv{right:18px;}
}
@media (prefers-reduced-motion: reduce){
  .v2-pap-titre em{animation:none; transform:none;}
  .v2-pap-tuile img{transition:none;}
}

/* A veil darker towards the bottom, where the type sits, ending in pure black
   so the film melts into the page below with no hard edge, and a touch overall
   so the words stay legible whatever the film is showing. */
.v2-hero-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.74) 20%, rgba(0,0,0,.42) 44%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.4) 100%);
}
.v2-hero-texte{position:relative; z-index:1; width:100%; max-width:var(--max-width); margin:0 auto;}
.v2-hero .v2-display{margin:0; max-width:15ch;}
.v2-hero .v2-lede{margin:30px 0 0; color:rgba(255,255,255,.86); max-width:48ch;}
.v2-hero .v2-scroll-cue{margin-top:44px; color:rgba(255,255,255,.7);}
.v2-display{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,7.2vw,104px); line-height:0.98; letter-spacing:-0.025em;
  max-width:16ch; margin:0 auto;
}
.v2-display em{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0;}
.v2-lede{
  margin:34px auto 0; max-width:52ch; color:var(--v2-dim);
  font-size:clamp(14px,1.25vw,17px); line-height:1.62;
}
.v2-scroll-cue{
  margin-top:56px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.22em; color:var(--v2-dim);
}

/* --------------------------------------------------------------------------
   Light case pages, the way the reference does them: the page turns white,
   the type turns black, and the project's own colour carries the accents.
   Everything reads the tokens, so flipping the tokens flips the page — the
   only additions are the empty frames, which need a light grey rather than
   a dark one. Add "clair" to the body to turn a case page over.
   -------------------------------------------------------------------------- */
/* On a light case page the coloured block runs the full width of the screen
   and up behind the menu, so nothing cuts across it. The bar therefore goes
   transparent and stops being fixed — it scrolls away with the block instead
   of ending up as white type on white further down. It redefines the two text
   tokens for itself from the project's own ink — white on the navy, black on
   the light panels, where white would drop to 1.6:1 on the green. Every
   pairing stays above 4.5:1. */
body.v2.clair .v2-head{
  position:absolute; background:none;
  --v2-fg:var(--encre-projet,#FFFFFF);
  /* 94%: below that, the links fall under 4.5:1 on the deepest blue panel.
     Every other panel gains with it. */
  --v2-dim:color-mix(in srgb, var(--encre-projet,#FFFFFF) 94%, transparent);
}
body.v2.clair .v2-case-hero{
  max-width:none; border-radius:0;
  width:100vw; margin:0 calc(50% - 50vw);
  /* The block keeps the full width; its type does not. It lands on the same
     column as the photograph and the paragraphs below. */
  padding:calc(104px + clamp(30px,5vw,72px))
          max(var(--gutter), calc(50vw - (var(--max-width) - var(--gutter) * 2) / 2))
          clamp(30px,5vw,72px);
}

body.v2.clair{
  --v2-bg: #FFFFFF;
  --v2-fg: #000000;
  /* 50% black on white is only 3.95:1, under the threshold for small text;
     58% brings it back to the 5.3:1 the dark side gets. */
  --v2-dim: rgba(0,0,0,0.58);
  --v2-line: rgba(0,0,0,0.2);
  --v2-cadre: linear-gradient(140deg,#F2F2F0,#E5E5E1);
}

/* --- Media blocks. The hero one is scaled by script.js while scrolling. --- */
.v2-media{
  position:relative; display:grid; place-items:center;
  background:var(--v2-cadre);
  border:1px solid var(--v2-line); border-radius:var(--rayon);
}
.v2-media{overflow:hidden;}
/* The image is pinned to the frame's four edges rather than left in the flow.
   In the flow, height:100% of a frame sized by aspect-ratio does not resolve,
   so the image kept its own proportions, hung from the top and overflowed:
   whenever a phone reshaped a frame, you saw the top of the picture instead of
   its centre, and object-position did nothing. */
.v2-media img,
.v2-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
/* The scale is driven by script.js; the origin decides where it grows from. */
.v2-media img[data-scale]{transform:scale(1.09); transform-origin:center;}
/* A horizontal pass across a picture that is wider than its frame: it
   travels one way, then back, so nothing ever has to loop and no seam can
   show. Used where the objects cannot be cut from their background. */
.v2-media img.v2-travelling{
  animation:v2-travelling 22s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes v2-travelling{
  from{transform:scale(1.16) translate3d(5.5%, 0, 0);}
  to  {transform:scale(1.16) translate3d(-5.5%, 0, 0);}
}
@media (prefers-reduced-motion: reduce){
  .v2-media img.v2-travelling{animation:none; transform:none;}
}

/* A portrait photograph in a wide frame. The picture is centred at its own
   proportions and its edges fade out; behind it, the same file enlarged and
   blurred stands in for the missing sides — same colours, same light, nothing
   invented. On a phone the frame takes the photograph's own 4:5 and the
   photograph fills it, so the blur is never seen there. */
.v2-media img.v2-fond-arriere{
  /* The whole picture squeezed into the frame, not a cropped band of it: at
     any height the sides then carry the colours the photograph has at that
     height, so the fade into it does not show a seam. */
  object-fit:fill; filter:blur(30px) saturate(1.1); transform:scale(1.15);
}
.v2-media img.v2-fond-avant{
  position:absolute; inset:0 auto 0 50%;
  width:auto; max-width:none; height:100%;
  transform:translateX(-50%); object-fit:contain;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* A slow camera move on a still photograph: it drifts and closes in by a
   few per cent, then comes back, so the picture breathes instead of sitting
   dead. Nothing inside it moves — for that a photograph is not enough. */
.v2-media img.v2-derive-lente{
  animation:v2-derive-lente 20s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes v2-derive-lente{
  from{transform:scale(1.03) translate3d(-2.2%, 0.9%, 0);}
  to  {transform:scale(1.14) translate3d(2.4%, -1.2%, 0);}
}
@media (prefers-reduced-motion: reduce){
  .v2-media img.v2-derive-lente{animation:none; transform:scale(1.03);}
}

/* A mark that settles onto a photograph and lifts off again, in a loop.
   The photograph never moves; only the mark fades and grows the last few
   per cent into place, as if it were being set down. Its position and size
   are given in per cent of the frame, so it stays on the muzzle at every
   screen size. Still for anyone who asked for less motion. */
.v2-media img.v2-signe{
  position:absolute; inset:auto; left:var(--signe-x); top:var(--signe-y);
  width:var(--signe-l); height:auto; object-fit:contain; z-index:2;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,0.28));
  animation:v2-signe 6.5s ease-in-out infinite;
}
@keyframes v2-signe{
  0%, 16%   {opacity:0; transform:scale(0.84);}
  30%, 72%  {opacity:1; transform:scale(1);}
  88%, 100% {opacity:0; transform:scale(1.05);}
}
@media (prefers-reduced-motion: reduce){ .v2-media img.v2-signe{animation:none; opacity:1; transform:none;} }

/* Two images in one frame, each holding for three seconds and dissolving
   into the other. The second sits over the first and fades in and out; the
   first never moves, so there is no flash between them. Still for anyone who
   asked for less motion: the animation stops and the first image stays. */
.v2-alterne-2{animation:v2-alterne 6.6s ease-in-out infinite;}
@keyframes v2-alterne{
  0%, 42%  {opacity:0;}
  50%, 92% {opacity:1;}
  100%     {opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .v2-alterne-2{animation:none; opacity:0;} }

/* A parade: objects cut from a plain background slide sideways in a loop,
   one after the other. The track holds five identical copies and travels the
   length of one copy, starting already one copy in, so the copy that would
   overhang from the left is always there. Each copy's box is one "pas" wide;
   the image inside is wider and overlaps the next, as the objects did in the
   original photograph. Anyone who asked for less motion gets it standing still. */
.v2-defile{background:var(--defile-fond);}
.v2-defile-piste{
  position:absolute; top:0; left:0;
  display:flex; height:100%; width:max-content;
  transform:translateX(-20%);
  animation:v2-defile 26s linear infinite;
}
.v2-defile-pas{position:relative; flex:none; height:100%; aspect-ratio:var(--defile-pas);}
.v2-media .v2-defile-pas img{
  position:absolute; inset:0 auto auto 0;
  width:var(--defile-deborde); max-width:none; height:100%; object-fit:fill;
}
@keyframes v2-defile{from{transform:translateX(-20%);} to{transform:translateX(-40%);}}
@media (prefers-reduced-motion: reduce){ .v2-defile-piste{animation:none;} }

/* Temporary: each frame on a case page states the file it expects — twice
   its largest displayed size, for sharp screens — so Amine knows what to
   export. Delete the data-format attributes once the real images are in. */
.v2-media[data-format]::after{
  content:attr(data-format);
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  padding:6px 9px; border-radius:var(--rayon);
  background:#000000; color:#FFFFFF;
}
.v2-media-note{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em;
  color:var(--v2-fg); opacity:0.34; text-align:center; padding:0 16px;
}
.v2-media--project{aspect-ratio:4/3;}

/* The whole card grows into place as it travels up the screen, the way the
   opening video does. data-scale on the same node holds the starting value
   for script.js; this rule is what it looks like before the script runs, and
   what it stays at if the script never does. On all five: one card doing it
   alone read as a card that had come out wrong. */
.v2-project--zoom > a{transform:scale(0.9); transform-origin:center top;}

/* --- Statement --- */
.v2-statement{padding:clamp(110px,15vh,190px) var(--gutter); text-align:center;}
.v2-statement-text{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px,3.6vw,50px); line-height:1.18; letter-spacing:-0.02em;
  max-width:22ch; margin:0 auto;
}
.v2-dim{color:var(--v2-dim);}

/* --- Work --- */
.v2-work{padding:clamp(30px,4vw,58px) var(--gutter) clamp(80px,10vh,130px);}
/* Read aloud, never drawn. Amine took the "Missions" label and its rule off
   the page — the cards say what they are. The heading stays because the
   section is named by it and because the outline would otherwise jump from
   h1 straight to the h3 of each card. */
.hors-ecran{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* Same measure as the red contact block and the footer — the section's own
   gutter decides it, so the three line up down the page. The halves stay
   square (the two-to-one ratio), so the height follows the width. */
.v2-project{max-width:var(--max-width); margin-inline:auto; padding-top:26px;}
/* Leur écart entre deux cartes, mesuré sur trois intervalles : 152 px. */
.v2-project + .v2-project{padding-top:0; margin-top:clamp(52px,10.5vw,152px);}
.v2-project a{display:grid; grid-template-columns:1fr 1fr; aspect-ratio:2/1;}
.v2-project--flip a > .v2-project-panel{order:2;}
/* Each panel carries its own ink: black on the light panels, paper on the
   dark ones. Black on the dark green or the navy was unreadable. */
.v2-project-panel{
  background:var(--panel); color:var(--panel-ink,#000000);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(24px,3vw,44px); border-radius:var(--rayon) 0 0 var(--rayon);
}
.v2-project--flip .v2-project-panel{border-radius:0 var(--rayon) var(--rayon) 0;}
.v2-project--flip .v2-media--project{border-radius:var(--rayon) 0 0 var(--rayon);}
.v2-project .v2-media--project{aspect-ratio:auto; border-radius:0 var(--rayon) var(--rayon) 0;}
.v2-meta{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; opacity:0.62;
}
/* Sur un panneau saturé, 62 % d'opacité faisait passer l'étiquette sous le
   seuil de lisibilité, et 85 % ne suffisait plus sur le bleu le plus soutenu.
   Elle reste plus discrète que le titre sans disparaître. */
.v2-project-panel .v2-meta,
.v2-case-hero .v2-meta{opacity:0.94;}
.v2-project-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,2.1vw,31px); line-height:1.2; letter-spacing:-0.015em;
  max-width:20ch;
}
.v2-project-title em{font-family:var(--font-serif); font-style:italic; font-weight:400;}
.v2-arrow{display:inline-block; transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.v2-project a:hover .v2-arrow{transform:translateX(10px);}

@media(max-width:820px){
  .v2-project{width:auto;}
  .v2-project a{grid-template-columns:1fr; aspect-ratio:auto;}
  .v2-project--flip a > .v2-project-panel{order:0;}
  .v2-project-panel,
  .v2-project--flip .v2-project-panel{border-radius:var(--rayon) var(--rayon) 0 0; gap:44px;}
  .v2-project .v2-media--project,
  .v2-project--flip .v2-media--project{aspect-ratio:4/3; border-radius:0 0 var(--rayon) var(--rayon);}
}

/* --- Marquee --- */
.v2-marquee-wrap{
  overflow:hidden; border-top:1px solid var(--v2-line);
  border-bottom:1px solid var(--v2-line); padding:22px 0;
}
.v2-marquee{
  display:flex; width:max-content; animation:v2-slide 34s linear infinite;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--v2-fg); opacity:0.78;
}
.v2-marquee span{padding:0 26px;}
.v2-marquee span::after{content:"—"; margin-left:26px; color:var(--v2-accent);}
@keyframes v2-slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* --- Approach --- */
.v2-approach{
  max-width:var(--max-width); margin:0 auto;
  padding:clamp(90px,12vh,150px) var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px);
}
.v2-approach-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,3.4vw,46px); line-height:1.06; letter-spacing:-0.02em;
}
.v2-approach-item{padding:22px 0; border-top:1px solid var(--v2-line);}
.v2-approach-item h3{
  font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:9px;
}
.v2-approach-item p{color:var(--v2-dim); font-size:14.5px; line-height:1.62; max-width:46ch;}
@media(max-width:820px){.v2-approach{grid-template-columns:1fr; gap:34px;}}

/* --- Contact --- */
.v2-foot{padding:0 var(--gutter) 30px;}
.v2-cta{
  max-width:var(--max-width); margin:0 auto; background:var(--v2-accent);
  color:var(--encre-projet,#FFFFFF); border-radius:var(--rayon); padding:clamp(34px,5vw,72px);
}
/* Tout le bloc en blanc, sur décision d'Amine. Le titre tient largement
   (3,4:1 pour un seuil de 3). L'étiquette, à 11px, passe sous le seuil de
   4,5:1 exigé pour du petit texte : compensée par une opacité pleine. */
.v2-meta--dark{color:inherit; opacity:1;}
.v2-cta-link{
  display:block; margin-top:22px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,5.4vw,74px); line-height:1; letter-spacing:-0.03em;
}
.v2-foot-row{
  max-width:var(--max-width); margin:0 auto; padding-top:30px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--v2-dim);
}

/* --- Motion off: show everything, no transforms, no marquee. --- */
@media (prefers-reduced-motion: reduce){
  body.v2 [data-reveal]{opacity:1; transform:none; transition:none;}
  .v2-project--zoom > a{transform:none;}
  .v2-marquee{animation:none;}
  .v2-arrow{transition:none;}
}

/* --------------------------------------------------------------------------
   V2 — project pages (/v2/projets/). Same shell as the V2 home, a narrative
   case layout inside: the stake, the idea, the execution, the result.
   -------------------------------------------------------------------------- */

.v2-head--case{grid-template-columns:1fr auto 1fr;}
.v2-back{font-size:13px; color:var(--v2-dim); transition:color .3s;}
.v2-back:hover{color:var(--v2-fg);}

.v2-case-hero{
  max-width:var(--max-width); margin:104px auto 0;
  background:var(--panel); color:var(--panel-ink,#000000);
  border-radius:var(--rayon); padding:clamp(30px,5vw,72px);
  display:flex; flex-direction:column; gap:clamp(40px,9vw,120px);
}
.v2-case-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(27px,4.4vw,62px); line-height:1.04; letter-spacing:-0.025em;
  max-width:19ch;
}
.v2-case-title em{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0;}

/* Same column as the running text: the page's measure less its gutter, so
   the photograph's edge falls on the same line as every paragraph. */
.v2-media--case{
  width:calc(100% - var(--gutter) * 2);
  max-width:calc(var(--max-width) - var(--gutter) * 2); margin:22px auto 0;
  aspect-ratio:16/9; transform:scale(0.9); transform-origin:center top;
}

/* One measure for every block of running text on the page. */
.v2-case-lede,
.v2-case-facts,
.v2-case-block,
.v2-case-result,
.v2-case-about,
.v2-case-figure,
.v2-case-pair,
.v2-next{max-width:var(--max-width); margin-left:auto; margin-right:auto; padding:0 var(--gutter);}

.v2-case-lede{padding-top:clamp(70px,10vh,130px);}
.v2-case-lede p{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,2.5vw,34px); line-height:1.26; letter-spacing:-0.015em; max-width:30ch;
}

.v2-case-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  padding-top:56px; padding-bottom:10px;
}
.v2-case-facts p{margin-top:8px; font-size:14.5px; color:var(--v2-dim); line-height:1.55;}

.v2-case-block{display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4vw,70px); padding-top:clamp(64px,9vh,110px);}
.v2-case-step{padding-top:7px;}
.v2-case-h{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,2.7vw,38px); line-height:1.1; letter-spacing:-0.02em; max-width:22ch;
}
.v2-case-p{margin-top:18px; font-size:15.5px; line-height:1.68; color:var(--v2-dim); max-width:60ch;}

.v2-case-figure{padding-top:clamp(56px,8vh,96px);}
.v2-case-figure .v2-media{aspect-ratio:21/9;}
.v2-case-pair{display:grid; grid-template-columns:2fr 1fr; gap:14px; padding-top:clamp(56px,8vh,96px);}
.v2-case-pair .v2-media{aspect-ratio:4/3;}
.v2-case-swatch{background:var(--panel); border-radius:var(--rayon);}

.v2-case-result{padding-top:clamp(70px,10vh,130px);}
/* Sur les pages projet, le bloc « mission suivante » sépare ce texte du
   panneau de contact. La page À propos n'en a pas : sans cela, la phrase
   se colle au bloc orange. */
main > .v2-case-result:last-child{padding-bottom:clamp(70px,10vh,120px);}
.v2-case-result-text{
  margin-top:16px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px,2.9vw,40px); line-height:1.2; letter-spacing:-0.02em; max-width:24ch;
}

.v2-case-about{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,80px);
  padding-top:clamp(70px,10vh,120px);
}
.v2-case-about p{margin-top:12px; font-size:15px; line-height:1.66; color:var(--v2-dim); max-width:46ch;}

.v2-next{
  display:block; padding-top:clamp(70px,10vh,120px); padding-bottom:clamp(50px,7vh,80px);
  border-bottom:1px solid var(--v2-line); margin-bottom:clamp(40px,6vh,70px);
}
.v2-next-title{
  display:block; margin-top:14px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,3.2vw,44px); line-height:1.08; letter-spacing:-0.025em; max-width:24ch;
}
.v2-next-title em{font-family:var(--font-serif); font-style:italic; font-weight:400;}
.v2-next:hover .v2-arrow{transform:translateX(12px);}

.v2-disclaimer{
  max-width:var(--max-width); margin:26px auto 0;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--v2-fg); opacity:0.3;
}

@media(max-width:820px){
  .v2-case-facts{grid-template-columns:1fr; gap:20px;}
  .v2-case-block{grid-template-columns:1fr; gap:14px;}
  .v2-case-pair{grid-template-columns:1fr;}
  .v2-case-swatch{aspect-ratio:16/6;}
  .v2-case-about{grid-template-columns:1fr;}
  .v2-case-hero{margin-top:78px;}
}
/* On a phone the bar keeps three equal-sided columns, so the logo sits on
   the true centre of the screen rather than against "Missions". The links
   close up a little to make the right-hand column fit down to 320px. */
@media(max-width:720px){
  .v2-head--case{grid-template-columns:1fr auto 1fr; column-gap:12px;}
  .v2-head--case .v2-logo{order:0;}
  .v2-head--case .v2-nav{gap:16px;}
}
@media (prefers-reduced-motion: reduce){
  .v2-media--case{transform:none;}
}

.v2-case-quote{
  max-width:var(--max-width); margin:0 auto; padding:clamp(56px,8vh,96px) var(--gutter) 0;
}
.v2-case-quote p{
  border-left:3px solid var(--panel); padding-left:clamp(20px,3vw,44px);
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.6vw,52px); line-height:1.16; max-width:20ch;
}

/* --------------------------------------------------------------------------
   V2 — the monogram draws itself in when the home page opens.
   A slanted band sweeps left to right, following the diagonal the mark is
   built on, so the reveal reads as the logo being drawn rather than faded.
   Home page only, once per load, and never when motion is turned down.
   -------------------------------------------------------------------------- */
@keyframes v2-mark-draw{
  from{clip-path:polygon(-30% 100%, -30% 100%, -10% -20%, -10% -20%); opacity:0;}
  35% {opacity:1;}
  to  {clip-path:polygon(-30% 100%, 130% 100%, 150% -20%, -10% -20%); opacity:1;}
}
@keyframes v2-mark-settle{
  from{transform:scale(0.94);}
  to  {transform:scale(1);}
}
.v2-home .v2-logo svg{
  animation:v2-mark-draw 1500ms linear 220ms both,
            v2-mark-settle 1750ms cubic-bezier(.16,.8,.24,1) 220ms both;
}
@media (prefers-reduced-motion: reduce){
  .v2-home .v2-logo svg{animation:none;}
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.v2-404{
  max-width:var(--max-width); margin:0 auto;
  padding:clamp(150px,26vh,260px) var(--gutter) clamp(90px,14vh,160px);
}
.v2-404 .v2-display{margin:14px 0 0; max-width:14ch; text-align:left;}
.v2-404 .v2-lede{margin:26px 0 0 0; max-width:44ch;}
.v2-404-links{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:40px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
}
.v2-404-links a{color:var(--v2-dim); transition:color .3s;}
.v2-404-links a:hover{color:var(--v2-fg);}

/* Keep the rights notice whole so it never splits mid-sentence, and give it
   its own line on mobile where the footer row would otherwise crowd. */
.rights{white-space:nowrap;}
@media(max-width:640px){.rights{display:block;}}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.v2-about-hero{
  max-width:var(--max-width); margin:0 auto;
  padding:clamp(150px,24vh,250px) var(--gutter) 0; text-align:center;
}
/* Un cran sous le titre d'accueil : la phrase est plus longue, et elle
   n'a pas à crier aussi fort qu'une accroche de page d'ouverture. */
.v2-about-hero .v2-display{max-width:20ch; font-size:clamp(32px,5.9vw,84px);}

/* Deux colonnes bord à bord, comme la référence : les photographies
   débordent les marges du site et occupent toute la largeur de l'écran. */
.v2-about-pair{
  width:100vw; margin-left:calc(50% - 50vw);
  margin-top:clamp(56px,9vh,100px);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.v2-about-shot{aspect-ratio:1/1.08; border-radius:0;}

.v2-about-lede{
  max-width:var(--max-width); margin:0 auto;
  padding:clamp(70px,10vh,130px) var(--gutter) 0;
}
.v2-about-lede p{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,2.5vw,34px); line-height:1.26; letter-spacing:-0.015em; max-width:30ch;
}

@media(max-width:820px){
  .v2-about-pair{grid-template-columns:1fr; gap:10px;}
  .v2-about-shot{aspect-ratio:4/5;}
}

/* --------------------------------------------------------------------------
   Case pages — the media sequence that replaced the running text.
   Full bleed, then a pair, then a contained frame, then a pair: the rhythm
   carries the page down the way the reference does.
   -------------------------------------------------------------------------- */
.v2-case-media{margin-top:clamp(56px,8vh,110px);}

.v2-case-media--full{
  width:100vw; margin-left:calc(50% - 50vw);
}
.v2-case-media--full .v2-media{aspect-ratio:21/9;}

.v2-case-media--pair{
  max-width:var(--max-width); margin-left:auto; margin-right:auto;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.v2-case-media--wide{
  max-width:var(--max-width); margin-left:auto; margin-right:auto;
  padding:0 var(--gutter);
}
.v2-case-shot{aspect-ratio:4/5;}
.v2-case-shot--wide{aspect-ratio:16/9;}

/* The last media block needs room before the next-mission link. */
.v2-case-media:last-of-type{margin-bottom:clamp(20px,4vh,50px);}

@media(max-width:820px){
  .v2-case-media--pair{grid-template-columns:1fr; gap:10px;}
  /* At 21:9 a full-width frame would be a 160px strip on a phone, so it
     squares up — except where the picture is a wide composition that the
     crop would cut through, which keeps its own proportions. */
  .v2-case-media--full .v2-media{aspect-ratio:16/10;}
  .v2-media.v2-fond-flou{aspect-ratio:4/5;}
  .v2-media img.v2-fond-avant{
    inset:0; width:100%; transform:none; object-fit:cover;
    -webkit-mask-image:none; mask-image:none;
  }
  .v2-case-media--full .v2-media--large{aspect-ratio:21/9;}
  /* Pair and wide frames keep the ratio Amine exports at (4:5, 16:9), so a
     phone shows the whole visual rather than a slice of it. They used to
     drop to 4:3, which cut the top and bottom logos off his three-lockup
     visual — and turned the 16:9 frames into 4:3 as a side effect. */
}

/* Two registers close the two runs of images: a pull quote after the first,
   a caption after the second. Both sit on the text measure, so they line up
   with the lead even under an edge-to-edge photograph. */
.v2-case-legende{
  max-width:var(--max-width); margin:clamp(30px,4vh,52px) auto 0;
  padding:0 var(--gutter);
  font-size:14.5px; line-height:1.62; color:var(--v2-dim);
}
.v2-case-quote + .v2-case-serie,
.v2-case-legende + .v2-case-serie{margin-top:clamp(48px,7vh,90px);}

/* On a case page the quote sits between two runs of images, where it reads
   better held to two lines: wider measure, a size down. Scoped to that
   position so the about page keeps its own, taller setting. */
.v2-case-serie + .v2-case-quote p{
  font-size:clamp(19px,2.4vw,34px); line-height:1.24; max-width:44ch;
}

/* --------------------------------------------------------------------------
   A still photograph, kept alive.
   The reference loops actual video in these cards; a photograph cannot do
   that, so it drifts instead — a slow, endless push that never settles.
   Only the card carrying .v2-media--vivante moves, and only if the viewer
   has not asked for less motion.
   -------------------------------------------------------------------------- */
@keyframes v2-derive{
  from{transform:scale(1.06) translate3d(-1.2%, -0.8%, 0);}
  to  {transform:scale(1.18) translate3d(1.4%, 1%, 0);}
}
.v2-media--vivante{overflow:hidden;}
.v2-media--vivante img{
  animation:v2-derive 26s cubic-bezier(.42,0,.58,1) infinite alternate;
  transform-origin:center;
}
/* Once the water is running the drift would fight it, so it stops. The mark
   floating on top keeps its own beat. */
.v2-vagues-actif img{animation:none;}
@media (prefers-reduced-motion: reduce){
  .v2-media--vivante img{animation:none; transform:scale(1.06);}
}

/* The canvas sits over the photograph and takes its place once the water is
   running; the <img> stays in the markup so the page still shows something
   if WebGL is missing or the script never runs. */
.v2-vagues{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; border-radius:inherit;
}
.v2-vagues-actif img{visibility:hidden;}

.v2-media--vivante{position:relative;}

/* The project's mark, large over the water. It draws itself in the way the
   monogram does in the header — a slanted band sweeping across — when the
   card comes into view. Without the script the class never lands and the
   mark is simply there, which is the safe state. */
/* The client's mark sits on the coloured panel, directly above the title.
   Grouped with it so the panel's spacing keeps the two together at the
   bottom rather than drifting apart. */
.v2-panneau-bas{display:flex; flex-direction:column; gap:clamp(22px,3vw,38px); align-items:flex-start;}
/* Every project's mark sits in the same box, whatever its shape: a compact
   symbol fills the height, a wide lockup is held back by the width so it does
   not outweigh the others. Measured: at equal height the LAPSA lockup was
   four times the surf mark's area. */
.v2-marque-panneau{
  width:auto; height:auto; display:block;
  max-height:clamp(58px, 7.2vw, 96px);
  max-width:clamp(140px, 15vw, 215px);
}

/* It surfaces rather than being swept in: uncovered from the bottom while
   it rises the last few pixels into place. The header's diagonal belongs to
   the monogram; this one belongs to the sea. */
.v2-project.is-in .v2-marque-panneau{
  animation:v2-marque-emerge 1400ms cubic-bezier(.19,.72,.23,1) 250ms both;
}
@keyframes v2-marque-emerge{
  from{clip-path:inset(100% 0 0 0); transform:translateY(28px) scale(0.93); opacity:0;}
  40% {opacity:1;}
  to  {clip-path:inset(0 0 0 0); transform:translateY(0) scale(1); opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .v2-project.is-in .v2-marque-panneau{animation:none;}
}

/* --------------------------------------------------------------------------
   Opening a project: the card becomes the page.

   The reference does this with GSAP and a page-transition library. The
   browser does it natively now — name the same two elements on both pages
   and it morphs one into the other across the navigation. No library, no
   script; where the browser does not support it the navigation is simply
   ordinary, which is the safe outcome.
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto;}

/* A name has to be unique in a document and the home page carries five
   cards, so each project owns its own pair, written on the element itself.
   The wildcard below then tunes every one of them at once. */
::view-transition-group(*){
  animation-duration:640ms;
  animation-timing-function:cubic-bezier(.22,.68,.24,1);
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:380ms;
  animation-timing-function:cubic-bezier(.4,0,.3,1);
}

@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none;}
}

/* --------------------------------------------------------------------------
   DORMANT — no card carries .v2-project--survol today. Amine liked this and
   asked to park it: adding that class back to an article turns it on again,
   and nothing else is needed.

   The card opens under the pointer.

   At rest only the photograph is there, centred, with nothing beside it.
   Bring the pointer over and the text banner slides out from behind it while
   the photograph steps aside to make room — the two halves settling into the
   card. Slow enough to be watched: nine tenths of a second.

   Only where there is a real pointer. A touch screen has no hover to give,
   so the card is whole from the start, and so it is for anyone who asked for
   less motion.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  .v2-project--survol a{overflow:hidden;}

  .v2-project--survol .v2-media,
  .v2-project--survol .v2-project-panel{
    transition:transform 900ms cubic-bezier(.16,.84,.26,1),
               opacity 620ms cubic-bezier(.3,.7,.3,1);
  }

  /* The photograph sits centred: half its own width to the right puts its
     middle on the middle of the card. */
  .v2-project--survol .v2-media{transform:translateX(50%); z-index:2;}
  /* The banner waits behind it, one full width to the left. */
  .v2-project--survol .v2-project-panel{transform:translateX(-100%); opacity:0; z-index:1;}

  .v2-project--survol:hover .v2-media,
  .v2-project--survol:focus-within .v2-media{transform:none;}
  .v2-project--survol:hover .v2-project-panel,
  .v2-project--survol:focus-within .v2-project-panel{transform:none; opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .v2-project--survol .v2-media,
  .v2-project--survol .v2-project-panel{transform:none; opacity:1; transition:none;}
}