/* =========================================================
   EMMA MORALES — Mannequin × Développeuse
   Deux mondes : papier / Bodoni (mannequin), nuit / Archivo (dev)
   ========================================================= */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face{
  font-family:"Bodoni Moda"; font-style:normal; font-display:swap; font-weight:400 900;
  src:url("../fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bodoni Moda"; font-style:normal; font-display:swap; font-weight:400 900;
  src:url("../fonts/bodoni-moda-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Bodoni Moda"; font-style:italic; font-display:swap; font-weight:400 900;
  src:url("../fonts/bodoni-moda-latin-standard-italic.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bodoni Moda"; font-style:italic; font-display:swap; font-weight:400 900;
  src:url("../fonts/bodoni-moda-latin-ext-standard-italic.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap; font-weight:100 900; font-stretch:62% 125%;
  src:url("../fonts/archivo-latin-standard-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap; font-weight:100 900; font-stretch:62% 125%;
  src:url("../fonts/archivo-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-display:swap; font-weight:400;
  src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root{
  /* Monde clair */
  --paper:#EFEBE4;
  --paper-2:#E3DDD2;
  --ink:#141210;
  --stone:#6B655D;
  --line-l:rgba(20,18,16,.2);
  /* Monde sombre */
  --night:#0B0B0B;
  --night-2:#161616;
  --bone:#ECE7DD;
  --ash:#958F86;
  --line-d:rgba(236,231,221,.14);
  --signal:#5A68FF;

  --serif:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --g:clamp(1.15rem, 3.2vw, 3.5rem);     /* marge latérale */
  --gap:clamp(.75rem, 1.6vw, 1.75rem);   /* gouttière de grille */
  --nav-h:64px;

  --ease:cubic-bezier(.22,.8,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(15px, .9rem + .15vw, 17px);
  line-height:1.5;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.p-home,.p-model{ background:var(--paper); color:var(--ink); }
.p-dev{ background:var(--night); color:var(--bone); }

img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
p,h1,h2,h3,dl,dd,ol,figure{ margin:0; }
ol{ list-style:none; padding:0; }

::selection{ background:var(--ink); color:var(--paper); }
.p-dev ::selection{ background:var(--bone); color:var(--night); }

:focus-visible{ outline:1px solid currentColor; outline-offset:4px; }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; left:var(--g); top:.75rem; z-index:400;
  padding:.6rem .9rem; background:var(--ink); color:var(--paper);
  font-size:.8125rem; text-decoration:none; transform:translateY(-200%);
}
.skip:focus{ transform:none; }

.arw{ width:1.6em; height:.75em; flex:none; fill:none; stroke:currentColor; stroke-width:1.1; overflow:visible; }

/* Texte masqué (comportement 1 : TEXT REVEAL) */
.reveal{ display:block; overflow:hidden; padding:0 .12em .12em 0; margin:0 -.12em -.12em 0; }
.reveal__in{ display:inline-block; will-change:transform; }

/* Image dans son cadre (comportement 2 : IMAGE PARALLAX) */
.has-motion [data-parallax] > img{ height:114%; position:relative; top:-7%; will-change:transform; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--g);
  font-size:.8125rem; font-weight:500; letter-spacing:.01em;
  color:var(--nav-c, var(--ink));
  transition:color .4s var(--ease), background-color .4s var(--ease);
}
.p-dev .nav{ --nav-c:var(--bone); }
.nav.is-dark{ --nav-c:var(--bone); }
.nav.is-scrolled{ background:rgba(239,235,228,.92); }
.nav.is-scrolled.is-dark{ background:rgba(11,11,11,.9); }
.p-dev .nav.is-scrolled{ background:rgba(11,11,11,.9); }

/* Home : la nav s’inverse toute seule au-dessus des deux mondes */
.nav--blend{ --nav-c:#fff; mix-blend-mode:difference; }

.nav__brand{ justify-self:start; display:inline-flex; align-items:center; width:44px; height:44px; text-decoration:none; font-weight:600; letter-spacing:.02em; overflow:hidden; }
.nav__brand img{ display:block; width:100%; height:100%; object-fit:cover; }
.nav__links{ display:flex; gap:clamp(1.5rem, 3vw, 3rem); }
.nav__links a,.nav__brand{ text-decoration:none; padding:.4rem 0; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--ease); }
.nav__links a:hover,.nav__links a[aria-current="page"],.nav__brand:hover{ background-size:100% 1px; }
.nav__lang{ justify-self:end; display:flex; align-items:center; gap:.4rem; }
.nav__lang button{ padding:.4rem .1rem; opacity:.45; transition:opacity .3s; }
.nav__lang button[aria-pressed="true"],.nav__lang button:hover{ opacity:1; }
.nav__menu{ display:none; justify-self:end; padding:.5rem 0; }

/* Menu mobile */
.menu{
  position:fixed; inset:0; z-index:80;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 2rem) var(--g) 2.5rem;
}
.menu[hidden]{ display:none; }
.menu--dark{ background:var(--night); color:var(--bone); }
.menu__close{ position:absolute; top:0; right:var(--g); height:var(--nav-h); font-size:.8125rem; font-weight:500; }
.menu__links{ display:flex; flex-direction:column; gap:.4rem; border-top:1px solid currentColor; padding-top:1.5rem; }
.menu__l{ text-decoration:none; line-height:.95; font-size:clamp(2.5rem, 13vw, 5rem); }
.menu__l--model{ font-family:var(--serif); font-style:italic; }
.menu__l--dev{ font-weight:800; font-stretch:66%; text-transform:uppercase; }
.menu__l:not(.menu__l--model):not(.menu__l--dev){ font-size:1.25rem; margin-top:1.5rem; }
.menu__l[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em; }
.menu__lang{ display:flex; gap:1.5rem; margin-top:2.5rem; font-size:.875rem; }
.menu__lang button{ opacity:.45; }
.menu__lang button[aria-pressed="true"]{ opacity:1; }

/* Voile de transition entre les univers */
.veil{ position:fixed; inset:0; z-index:300; pointer-events:none; visibility:hidden; background:var(--paper); }
.is-arriving .veil{ visibility:visible; }
.is-arriving.arrive-dev .veil{ background:var(--night); }
.is-arriving.arrive-home .veil{ background:linear-gradient(90deg, var(--paper) 50%, var(--night) 50%); }

/* Tant que les polices ne sont pas prêtes, la scène d’accueil attend (sécurité : 2,5 s) */
.js:not(.is-ready) .duo__stage{ visibility:hidden; }

/* Sans JavaScript : le storytelling devient une simple suite */
html:not(.js) .story{ height:auto; }
html:not(.js) .story__stage{ position:relative; height:auto; }
html:not(.js) .story__ch{ position:relative; opacity:1; transform:none; padding:2rem 0; }
html:not(.js) .story__text{ height:auto; }
html:not(.js) .story__img:first-child{ opacity:1; transform:none; }

/* Lignes de grille techniques (monde dev) */
.grid-lines{ position:absolute; inset:0; display:flex; justify-content:space-evenly; pointer-events:none; }
.grid-lines i{ width:1px; height:100%; background:var(--line-d); }
.grid-lines--fixed{ position:fixed; z-index:0; }

/* =========================================================
   HOME — deux mondes
   ========================================================= */
.duo{ position:relative; height:100svh; }
.has-motion .duo{ height:300svh; }

.duo__stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--paper); }
.duo__light{ position:absolute; inset:0; }

/* Le panneau sombre. Translation et inclinaison s’annulent dans .seam__in,
   ce qui garde le contenu sombre immobile pendant que la frontière bouge. */
.seam{
  position:absolute; top:0; left:0; height:100%; width:150%;
  background:var(--night); color:var(--bone);
  overflow:hidden; transform-origin:0 50%;
  transform:translateX(33.3333%);
  z-index:2;
}
.seam__in{
  position:absolute; top:0; left:0; height:100%; width:66.6667%;
  transform-origin:0 50%; transform:translateX(-50%);
}
.duo__dark{ position:absolute; inset:0; }

/* Le nom : deux couches superposées, serif d’un côté, grotesque de l’autre */
.name{
  position:absolute; left:var(--g); right:var(--g); top:calc(var(--nav-h) + 4vh);
  font-size:var(--name-fs, 15.5vw); line-height:.84;
  transform-origin:50% 0; transform:scale(.44);
  pointer-events:none; z-index:1;
}
.name__h{ display:flex; flex-direction:column; font-size:1em; font-weight:inherit; margin:0; }
.name__l{ display:block; overflow:hidden; }
.name__l--1{ align-self:flex-start; }
.name__l--2{ align-self:flex-end; }
.name__in{ display:inline-block; text-transform:uppercase; white-space:nowrap; }
.name--serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.025em; color:var(--ink); }
.name--sans{ font-family:var(--sans); font-weight:800; font-stretch:80%; letter-spacing:-.01em; color:var(--bone); z-index:3; }

.duo__tag{
  position:absolute; left:var(--g); right:var(--g); bottom:clamp(1.25rem, 4vh, 2.5rem);
  display:flex; justify-content:space-between;
  font-size:.75rem; letter-spacing:.04em; color:var(--stone);
  z-index:1; opacity:0;
}
.duo__hint{
  position:absolute; left:50%; bottom:clamp(1.25rem, 4vh, 2.5rem); transform:translateX(-50%);
  font-size:.75rem; letter-spacing:.04em; color:var(--stone); z-index:1; opacity:0;
}
.duo__hint::after{
  content:""; display:block; width:1px; height:2.5rem; margin:.6rem auto 0;
  background:currentColor; transform-origin:top; animation:hint 2.2s var(--ease) infinite;
}
@keyframes hint{ 0%{transform:scaleY(0)} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }

/* Colonnes qui voyagent (sens opposés) */
.duo__col{ position:absolute; top:0; opacity:0; pointer-events:none; will-change:transform; }
.duo__col--l{ left:6vw; width:19vw; display:flex; flex-direction:column; gap:12vh; }
.duo__ph{ overflow:hidden; aspect-ratio:2/3; background:var(--paper-2); }
.duo__ph img{ width:100%; height:100%; object-fit:cover; }
.duo__ph--b{ width:62%; margin-left:42%; }
.duo__ph--c{ width:80%; }

.duo__col--r{ right:6vw; width:21vw; font-family:var(--mono); font-size:.6875rem; line-height:2.1; color:var(--ash); }
.duo__index li{ display:flex; gap:1.25rem; border-bottom:1px solid var(--line-d); }
.duo__index li span{ color:var(--bone); opacity:.5; }
.duo__index--stack{ margin-top:18vh; }
.duo__sys{ margin-top:18vh; color:var(--bone); }

.duo__cross{
  position:absolute; left:calc(50% - 7.5vw); top:0; width:15vw; aspect-ratio:1290/1687;
  overflow:hidden; z-index:4; opacity:0; pointer-events:none; will-change:transform;
}
.duo__cross img{ width:100%; height:100%; object-fit:cover; }

/* Les deux choix */
.choice{
  position:absolute; top:52%; bottom:0; width:50%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.35rem;
  padding:0 var(--g) clamp(2rem, 7vh, 4.5rem);
  text-decoration:none; z-index:2;
}
.choice--model{ left:0; color:var(--ink); }
.choice--dev{ left:50%; color:var(--bone); }
.choice__idx{ font-size:.75rem; letter-spacing:.04em; opacity:.6; }
.choice__word{ display:block; line-height:.9; transition:transform .8s var(--ease); }
.choice--model .choice__word{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(3rem, 8.4vw, 9.5rem); letter-spacing:-.02em; }
.choice--dev .choice__word{ font-weight:800; font-stretch:66%; text-transform:uppercase; font-size:clamp(2.8rem, 7.6vw, 8.6rem); letter-spacing:-.01em; }
.choice__sub{ font-size:.8125rem; margin-top:.6rem; opacity:.7; }
.choice__go{
  display:inline-flex; align-items:center; gap:.7rem; align-self:flex-start;
  margin-top:1.4rem; padding-bottom:.35rem; font-size:.8125rem; font-weight:600;
  background:linear-gradient(currentColor,currentColor) 0 100%/30% 1px no-repeat;
  transition:background-size .7s var(--ease);
}
.choice__go .arw{ transition:transform .7s var(--ease); }
.choice:hover .choice__word,.choice:focus-visible .choice__word{ transform:translateX(1.2vw); }
.choice:hover .choice__go,.choice:focus-visible .choice__go{ background-size:100% 1px; }
.choice:hover .choice__go .arw,.choice:focus-visible .choice__go .arw{ transform:translateX(.35rem); }
.choice:focus-visible{ outline-offset:-12px; }

/* Contact sous la scène */
.hc{ display:grid; grid-template-columns:1fr 1fr; min-height:62svh; }
.hc__half{ display:flex; flex-direction:column; justify-content:flex-end; gap:.9rem; padding:12vh var(--g) 2.5rem; }
.hc__half--light{ background:var(--paper); color:var(--ink); }
.hc__half--dark{ background:var(--night); color:var(--bone); }
.hc__k{ font-size:.75rem; letter-spacing:.04em; opacity:.65; }
.hc__mail{ text-decoration:none; line-height:1; overflow-wrap:anywhere; }
.hc__mail:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em; }
.hc__mail--serif{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem, 3.4vw, 3.4rem); }
.hc__mail--sans{ font-weight:700; font-stretch:72%; font-size:clamp(1.5rem, 3.1vw, 3.2rem); }
.hc__meta{ margin-top:3rem; font-size:.75rem; opacity:.65; }
.hc__meta a{ text-decoration:none; }
.hc__meta a:hover{ text-decoration:underline; }

/* =========================================================
   MANNEQUIN
   ========================================================= */
.p-model main{ position:relative; }

/* Hero */
.mh{ position:relative; height:100svh; min-height:36rem; overflow:hidden; }
.mh__media{
  position:absolute; right:11vw; top:calc(var(--nav-h) + 5vh); height:72svh;
  aspect-ratio:683/1024; overflow:hidden; z-index:1; background:var(--paper-2);
}
.mh__media img{ width:100%; height:100%; object-fit:cover; }
.mh__copy{ position:absolute; left:var(--g); top:24svh; width:min(27rem, 34vw); z-index:2; }
.mh__idx{ font-family:var(--serif); font-size:.875rem; }
.mh__cats{ font-size:.75rem; letter-spacing:.04em; margin-top:.4rem; color:var(--stone); }
.mh__line{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem, 2.5vw, 2.6rem); line-height:1.12; letter-spacing:-.01em; margin-top:2.25rem; max-width:15ch; }
.mh__base{ margin-top:1.5rem; font-size:.8125rem; color:var(--stone); }
.mh__vert{
  position:absolute; right:calc(var(--g) * .6); top:50%; z-index:2;
  writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg);
  display:flex; gap:2rem; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone);
}
.mh__word{
  position:absolute; left:0; right:0; bottom:0; margin:0; z-index:0;
  font-family:var(--serif); font-style:italic; font-weight:400; line-height:.74; letter-spacing:-.03em;
  white-space:nowrap; padding-left:.5vw;
}
.mh__word-in{ display:inline-block; font-size:var(--fit, 22vw); transform:translateY(-.02em); }

/* Sticky storytelling (comportement 3) */
.story{ position:relative; height:300svh; }
.story__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:7fr 5fr; align-items:center;
}
.story__media{ position:relative; justify-self:center; height:76svh; aspect-ratio:2/3; overflow:hidden; background:var(--paper-2); margin-top:4vh; }
.story__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .9s var(--ease), transform 1.4s var(--ease); }
.story__img.is-active{ opacity:1; transform:none; }
.story__text{ position:relative; height:60svh; padding-right:var(--g); }
.story__ch{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(2rem); transition:opacity .7s var(--ease), transform .9s var(--ease); }
.story__ch.is-active{ opacity:1; transform:none; }
.story__n{ font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--stone); }
.story__t{ font-family:var(--serif); font-weight:400; font-size:clamp(3.2rem, 8vw, 9rem); line-height:.95; letter-spacing:-.03em; margin:.3rem 0 1.4rem; }
.story__d{ font-size:.9375rem; max-width:24ch; color:var(--stone); }
.story__steps{ position:absolute; inset:0; pointer-events:none; }
.story__step{ height:100svh; }

/* Étape : Miss Suisse 2026 */
.ms{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); padding:20vh var(--g) 6vh; align-items:start; }
.ms__h{ grid-column:1 / 11; grid-row:1; margin:0; font-weight:400; position:relative; z-index:0; }
.ms__year{ font-family:var(--serif); font-style:italic; font-size:clamp(6rem, 27vw, 30rem); line-height:.78; letter-spacing:-.05em; }
.ms__name{ font-family:var(--serif); font-size:clamp(2.2rem, 5.6vw, 6.4rem); line-height:.95; letter-spacing:-.02em; margin-top:1.2rem; padding-left:calc(100% / 10); }
.ms__role{ grid-column:2 / 6; grid-row:2; align-self:start; margin-top:2rem; padding-top:.9rem; border-top:1px solid var(--ink); max-width:16rem; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.ms__ph{ grid-column:9 / 13; grid-row:1 / 3; aspect-ratio:683/1024; margin-top:8vh; z-index:1; }

/* Collaboration : Burger King Suisse */
.bk{ padding:22vh var(--g) 10vh; }
.bk__head{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); align-items:end; margin-bottom:9vh; }
.bk__year{ grid-column:1 / 4; grid-row:1; font-family:var(--serif); font-style:italic; font-size:clamp(2.4rem, 5vw, 5rem); line-height:.8; margin-bottom:3vh; }
.bk__meta{ grid-column:10 / 13; grid-row:1; display:flex; flex-direction:column; gap:.25rem; padding-top:.9rem; margin-bottom:3vh; border-top:1px solid var(--ink); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.bk__title{ grid-column:1 / 13; grid-row:2; margin:0; font-family:var(--serif); font-weight:400; line-height:.84; letter-spacing:-.035em; }
.bk__l{ display:block; }
.bk__l--1 .reveal__in{ font-size:var(--fit, 12vw); text-transform:uppercase; white-space:nowrap; }
.bk__l--2{ font-style:italic; font-size:clamp(3rem, 9vw, 10rem); padding-left:calc(100% / 12 * 6); }
.bk__grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); }
.bk__a{ grid-column:1 / 8; grid-row:1 / 3; aspect-ratio:1290/1582; }
.bk__b{ grid-column:9 / 13; grid-row:1; aspect-ratio:1290/1602; margin-top:24vh; }
.bk__cap{ grid-column:9 / 12; grid-row:2; align-self:end; color:var(--stone); max-width:24ch; }
.bk__c{ grid-column:4 / 10; grid-row:3; aspect-ratio:1290/1595; margin-top:20vh; }

/* Book : planches */
.book__head{
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap);
  padding:24vh var(--g) 14vh; align-items:end;
}
.book__title{ grid-column:1 / 9; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(5rem, 22vw, 24rem); line-height:.78; letter-spacing:-.04em; }
.book__note{ grid-column:10 / 13; font-size:.8125rem; color:var(--stone); max-width:26ch; padding-bottom:1.2rem; }

.pl{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); padding:0 var(--g); margin-bottom:24vh; }
.frame{ display:block; position:relative; width:100%; overflow:hidden; background:var(--paper-2); cursor:zoom-in; }
.frame img{ width:100%; height:100%; object-fit:cover; transition:filter .6s var(--ease); }
.frame:hover img{ filter:brightness(1.04); }
.frame:focus-visible{ outline-offset:3px; }

.cap{ display:flex; align-items:baseline; gap:1rem; font-size:.8125rem; }
.cap__n{ font-family:var(--serif); font-style:italic; font-size:clamp(2.4rem, 5vw, 5rem); line-height:.8; }
.cap--light{ color:var(--bone); }

/* 01 */
.pl1__a{ grid-column:2 / 8; aspect-ratio:683/1024; }
.pl1__cap{ grid-column:9 / 12; align-self:end; padding-bottom:6vh; }

/* 02 */
.pl2__a{ grid-column:7 / 12; grid-row:1; aspect-ratio:655/1024; }
.pl2__b{ grid-column:2 / 6; grid-row:1; aspect-ratio:683/1024; margin-top:42vh; }
.pl2__cap{ grid-column:2 / 6; grid-row:1; align-self:start; margin-top:30vh; }

/* 03 : plein écran */
.pl--3{ grid-template-columns:1fr 1fr; column-gap:0; padding:0; height:100svh; background:var(--night); }
.pl3__a,.pl3__b{ height:100%; background:var(--night); }
.pl3__cap{ position:absolute; left:var(--g); bottom:2.5rem; z-index:1; }

/* 04 : triptyque */
.pl4__cap{ grid-column:1 / 13; margin-bottom:5vh; }
.pl4__a{ grid-column:1 / 5; aspect-ratio:2/3; }
.pl4__b{ grid-column:5 / 9; aspect-ratio:2/3; margin-top:16vh; }
.pl4__c{ grid-column:9 / 13; aspect-ratio:2/3; }

/* 05 : mouvement horizontal (comportement 4) */
.hz{ display:block; padding:0; height:100svh; overflow:hidden; }
.hz__track{
  display:flex; align-items:center; gap:4vw; height:100%;
  padding:calc(var(--nav-h) + 2vh) var(--g) 4vh;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.hz__track::-webkit-scrollbar{ display:none; }
.hz.is-pinned .hz__track{ overflow:visible; scroll-snap-type:none; width:max-content; will-change:transform; }
.hz__intro{ flex:none; width:min(34vw, 30rem); align-self:flex-end; padding-bottom:6vh; }
.hz__title{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem, 7vw, 8rem); line-height:.92; letter-spacing:-.03em; margin-top:1.5rem; }
.hz__f{ flex:none; width:auto; scroll-snap-align:center; }
.hz__f--1{ height:78%; aspect-ratio:555/1024; align-self:flex-end; }
.hz__f--2{ height:60%; aspect-ratio:646/1024; align-self:flex-start; }
.hz__f--3{ height:86%; aspect-ratio:656/1024; }
.hz__f--4{ height:56%; aspect-ratio:683/1024; align-self:flex-end; }
.hz__f--5{ height:74%; aspect-ratio:627/1024; align-self:flex-start; margin-right:var(--g); }

/* 06 : grande / petite / typo derrière */
.pl--6{ padding-top:6vh; }
.pl6__word{
  position:absolute; left:calc(100% / 12 * 2.4); right:var(--g); top:12%; z-index:2;
  color:#EFEBE4; mix-blend-mode:difference;
  font-family:var(--serif); font-style:italic; font-weight:400; line-height:.8; letter-spacing:-.04em;
  white-space:nowrap; pointer-events:none;
}
.pl6__word span{ display:inline-block; font-size:var(--fit, 20vw); }
.pl6__a{ grid-column:1 / 7; grid-row:1 / 3; margin-left:calc(var(--g) * -1); width:calc(100% + var(--g)); aspect-ratio:682/1024; z-index:1; }
.pl6__b{ grid-column:10 / 13; grid-row:2; align-self:end; aspect-ratio:540/960; z-index:1; }
.reel{ cursor:default; }
.reel__v{ display:block; width:100%; height:100%; object-fit:cover; }
.reel__toggle{ margin-left:auto; font-size:.75rem; color:var(--stone); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; }
.reel__toggle:hover{ color:var(--ink); }
.pl6__cap{ grid-column:10 / 13; grid-row:3; margin-top:1.5rem; }

/* 07 : image sticky, contenu qui défile */
.pl--7{ align-items:start; }
.pl7__stick{ grid-column:1 / 7; position:sticky; top:calc(var(--nav-h) + 3vh); }
.pl7__a{ aspect-ratio:682/1024; max-height:84svh; width:auto; }
.pl7__flow{ grid-column:8 / 13; padding-top:28vh; padding-bottom:10vh; }
.pl7__line{ font-family:var(--serif); font-size:clamp(1.5rem, 2.6vw, 2.8rem); line-height:1.12; letter-spacing:-.01em; margin-top:2rem; max-width:16ch; }
.pl7__b{ aspect-ratio:1024/683; margin-top:46vh; }
.pl7__cap2{ font-size:.8125rem; margin-top:1rem; color:var(--stone); }

/* Informations */
.spec{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); padding:10vh var(--g) 22vh; }
.spec__title{ grid-column:1 / 13; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(3rem, 9vw, 10rem); line-height:.9; letter-spacing:-.03em; margin-bottom:8vh; }
.spec__list{ grid-column:4 / 13; border-top:1px solid var(--ink); }
.spec__row{ display:grid; grid-template-columns:minmax(8rem, 1fr) 2fr; align-items:baseline; gap:var(--gap); padding:1.35rem 0 1.2rem; border-bottom:1px solid var(--line-l); }
.spec__row dt{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.spec__row dd{ font-family:var(--serif); font-size:clamp(1.5rem, 3.2vw, 3.2rem); line-height:1.05; letter-spacing:-.01em; }
.spec__row dd a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.14em; }
.spec__row dd a:hover{ text-decoration-thickness:2px; }
.spec__size{ font-family:var(--sans); font-size:.8125rem; color:var(--stone); letter-spacing:0; }

/* Contact */
.mc{ background:var(--night); color:var(--bone); padding:22vh var(--g) 2rem; display:flex; flex-direction:column; }
.mc__title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(3.5rem, 15vw, 16rem); line-height:.8; letter-spacing:-.04em; }
.mc__lead{ margin-top:4vh; font-size:.9375rem; color:var(--ash); max-width:34ch; }
.mc__mail{ margin-top:6vh; font-family:var(--serif); font-size:clamp(1.8rem, 6.2vw, 7rem); line-height:1; letter-spacing:-.02em; text-decoration:none; overflow-wrap:anywhere; align-self:flex-start; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; padding-bottom:.08em; transition:background-size .8s var(--ease); }
.mc__mail:hover{ background-size:100% 1px; }
.mc__foot{ display:flex; flex-wrap:wrap; gap:1rem 3rem; justify-content:space-between; margin-top:20vh; padding-top:1.25rem; border-top:1px solid var(--line-d); font-size:.75rem; color:var(--ash); }
.mc__foot a{ color:var(--bone); text-decoration:none; }
.mc__foot a:hover{ text-decoration:underline; }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:var(--night); color:var(--bone); display:grid; place-items:center; }
.lb[hidden]{ display:none; }
.lb__img{ max-width:min(92vw, 1100px); max-height:86svh; width:auto; height:auto; object-fit:contain; }
.lb__zone{ position:absolute; top:0; bottom:0; width:50%; }
.lb__zone--prev{ left:0; cursor:w-resize; }
.lb__zone--next{ right:0; cursor:e-resize; }
.lb__zone:focus-visible{ outline-offset:-8px; }
.lb__count{ position:absolute; left:var(--g); bottom:1.5rem; font-size:.75rem; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.lb__close{ position:absolute; right:var(--g); top:0; height:var(--nav-h); font-size:.8125rem; font-weight:500; z-index:1; }

/* =========================================================
   DÉVELOPPEUSE
   ========================================================= */
.p-dev main{ position:relative; z-index:1; }

/* Hero */
.dh{ position:relative; height:100svh; min-height:36rem; overflow:hidden; }
.dh__top{ position:absolute; left:var(--g); top:30svh; width:min(22rem, 30vw); }
.dh__role{ font-size:clamp(1rem, 1.35vw, 1.3rem); font-weight:500; line-height:1.25; max-width:17ch; }
.dh__cfc{ margin-top:.45rem; font-size:clamp(.875rem, 1vw, 1rem); line-height:1.3; color:var(--bone); opacity:.8; max-width:20ch; }
.dh__base{ margin-top:.6rem; font-size:.8125rem; color:var(--ash); }
.dh__fig{
  position:absolute; left:calc(100% / 6 * 4); top:calc(var(--nav-h) + 9vh);
  width:calc(100% / 6); aspect-ratio:1290/1687; overflow:hidden; background:var(--night-2);
}
.dh__fig img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); }
.dh__statement{
  position:absolute; left:calc(100% / 6 * 2); top:52svh; width:calc(100% / 6 * 2.2);
  font-size:clamp(1.35rem, 2.5vw, 2.6rem); font-weight:400; line-height:1.08; letter-spacing:-.01em;
}
.dh__name{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  font-weight:800; font-stretch:62%; text-transform:uppercase; line-height:.76; letter-spacing:-.005em;
  white-space:nowrap; padding-left:.4vw;
}
.dh__name-in{ display:inline-block; font-size:var(--fit, 16vw); transform:translateY(.07em); }

/* Projets */
.pj{ position:relative; padding:20vh var(--g) 18vh; }
.pj__head{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); align-items:end; margin-bottom:8vh; }
.pj__title{ grid-column:1 / 8; font-weight:800; font-stretch:62%; text-transform:uppercase; font-size:clamp(3.5rem, 13vw, 14rem); line-height:.78; }
.pj__count{ grid-column:8 / 9; font-family:var(--mono); font-size:.6875rem; color:var(--ash); padding-bottom:1rem; }
.pj__lead{ grid-column:10 / 13; font-size:.9375rem; color:var(--ash); max-width:24ch; padding-bottom:.8rem; }

.pj__list{ border-top:1px solid var(--line-d); }
.pj__row{
  position:relative; display:grid;
  grid-template-columns:3.5rem minmax(0,1fr) minmax(12rem, 22rem) 8.5rem;
  column-gap:var(--gap); align-items:center;
  padding:clamp(1.25rem, 3vh, 2.4rem) 0;
  border-bottom:1px solid var(--line-d);
  text-decoration:none; color:var(--bone);
  transition:opacity .5s var(--ease);
}
.pj__n{ font-family:var(--mono); font-size:.6875rem; color:var(--ash); align-self:start; padding-top:.9em; transition:color .4s; }
.pj__name{
  font-weight:700; font-stretch:68%; text-transform:uppercase;
  font-size:clamp(2.6rem, 8vw, 9.5rem); line-height:.84; letter-spacing:-.01em;
  transition:transform .8s var(--ease), font-stretch .8s var(--ease);
}
.pj__name-s{ font-size:.32em; font-weight:500; font-stretch:100%; letter-spacing:0; color:var(--ash); vertical-align:.9em; margin-left:.35em; text-transform:none; }
.pj__meta{ display:flex; flex-direction:column; gap:.45rem; }
.pj__type{ font-size:.875rem; line-height:1.35; }
.pj__stack{ font-family:var(--mono); font-size:.6875rem; color:var(--ash); line-height:1.6; }
.pj__go{ justify-self:end; display:inline-flex; align-items:center; gap:.6rem; font-size:.8125rem; font-weight:500; white-space:nowrap; }
.pj__go .arw{ transition:transform .6s var(--ease); }
.pj__thumb{ display:none; }

@media (hover:hover) and (pointer:fine){
  .pj__list:hover .pj__row:not(:hover){ opacity:.28; }
  .pj__row:hover .pj__name{ transform:translateX(1.6vw); font-stretch:78%; }
  .pj__row:hover .pj__n{ color:var(--signal); }
  .pj__row:hover .pj__go .arw{ transform:translateX(.35rem); }
}

/* Aperçu qui suit la souris */
.pv{ position:fixed; left:0; top:0; z-index:6; width:clamp(16rem, 24vw, 26rem); aspect-ratio:4/3; pointer-events:none; visibility:hidden; }
.pv__in{ width:100%; height:100%; overflow:hidden; background:#000; transform:scale(.85); opacity:0; }
.pv__in img{ width:100%; height:100%; object-fit:contain; padding:9%; }

/* Expérience */
.xp{ padding:2vh var(--g) 14vh; }
.xp__head{ margin-bottom:6vh; }
.xp__title{ font-weight:800; font-stretch:62%; text-transform:uppercase; font-size:clamp(3rem, 9vw, 10rem); line-height:.78; }
.xp__row{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr) minmax(16rem, 26rem);
  column-gap:var(--gap); row-gap:1.6rem; align-items:start;
  padding:clamp(1.6rem, 4vh, 3rem) 0;
  border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
}
.xp__n{ font-family:var(--mono); font-size:.6875rem; color:var(--ash); padding-top:.9em; }
.xp__name{ grid-column:2; margin:0; font-weight:700; font-stretch:68%; text-transform:uppercase; font-size:clamp(2.6rem, 8vw, 9.5rem); line-height:.84; letter-spacing:-.01em; }
.xp__name a{ display:inline-flex; align-items:flex-start; gap:.22em; text-decoration:none; transition:font-stretch .8s var(--ease); }
.xp__name .arw{ width:.3em; height:.15em; margin-top:.18em; stroke-width:1; transition:transform .6s var(--ease); }
.xp__name a:hover,.xp__name a:focus-visible{ font-stretch:78%; }
.xp__name a:hover .arw,.xp__name a:focus-visible .arw{ transform:translate(.06em, -.06em) rotate(-45deg); }
.xp__meta{ grid-column:3; grid-row:1 / span 2; border-top:1px solid var(--line-d); }
.xp__line{ display:grid; grid-template-columns:6rem 1fr; gap:var(--gap); padding:.85rem 0; border-bottom:1px solid var(--line-d); align-items:baseline; }
.xp__line dt{ font-family:var(--mono); font-size:.6875rem; color:var(--ash); }
.xp__line dd{ font-size:.9375rem; }
.xp__lead{ grid-column:2; font-size:.9375rem; color:var(--ash); max-width:46ch; }

/* Stack */
.sk{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); padding:12vh var(--g) 20vh; align-items:start; }
.sk__side{ grid-column:1 / 6; position:sticky; top:calc(var(--nav-h) + 8vh); }
.sk__title{ font-weight:800; font-stretch:62%; text-transform:uppercase; font-size:clamp(4rem, 14vw, 15rem); line-height:.78; }
.sk__note{ margin-top:2rem; font-size:.875rem; color:var(--ash); max-width:22ch; }
.sk__list{ grid-column:7 / 13; border-top:1px solid var(--line-d); }
.sk__row{ display:grid; grid-template-columns:3rem 1fr; row-gap:.8rem; padding:6vh 0 5vh; border-bottom:1px solid var(--line-d); }
.sk__n{ grid-row:1 / 3; font-family:var(--mono); font-size:.6875rem; color:var(--ash); padding-top:.6em; }
.sk__k{ font-weight:600; font-stretch:80%; text-transform:uppercase; font-size:clamp(1.6rem, 3vw, 3.2rem); line-height:.95; }
.sk__v{ font-family:var(--mono); font-size:.75rem; color:var(--ash); }

/* Contact */
.dc{ padding:20vh var(--g) 2rem; display:flex; flex-direction:column; border-top:1px solid var(--line-d); }
.dc__title{ font-weight:800; font-stretch:62%; text-transform:uppercase; font-size:clamp(4rem, 19vw, 21rem); line-height:.76; }
.dc__lead{ margin-top:5vh; font-size:.9375rem; color:var(--ash); }
.dc__mail{ margin-top:2.5vh; align-self:flex-start; font-weight:500; font-stretch:85%; font-size:clamp(1.5rem, 5vw, 5.8rem); line-height:1; letter-spacing:-.02em; text-decoration:none; overflow-wrap:anywhere; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; padding-bottom:.1em; transition:background-size .8s var(--ease); }
.dc__mail:hover{ background-size:100% 1px; }
.dc__foot{ display:flex; flex-wrap:wrap; gap:1rem 3rem; justify-content:space-between; margin-top:20vh; padding-top:1.25rem; border-top:1px solid var(--line-d); font-size:.75rem; color:var(--ash); }
.dc__foot a{ color:var(--bone); text-decoration:none; }
.dc__foot a:hover{ text-decoration:underline; }

/* =========================================================
   RESPONSIVE — mobile : une autre composition, pas un empilement
   ========================================================= */
@media (max-width:860px){
  :root{ --nav-h:56px; }
  .nav__brand{ width:36px; height:36px; }
  .nav{ grid-template-columns:1fr auto; }
  .nav__links,.nav__lang{ display:none; }
  .nav__menu{ display:block; }

  /* HOME : la frontière devient horizontale. Haut clair, bas sombre */
  .has-motion .duo{ height:260svh; }
  .seam{ width:100%; height:150%; transform-origin:50% 0; transform:translateY(33.3333%); }
  .seam__in{ width:100%; height:66.6667%; transform-origin:50% 0; transform:translateY(-50%); }
  .name{ top:calc(var(--nav-h) + 3svh); transform:scale(.62); }
  .choice{ width:100%; left:0; top:auto; height:50%; padding-bottom:2rem; }
  .choice--model{ top:0; bottom:auto; height:50%; justify-content:flex-end; padding-bottom:1.6rem; }
  .choice--dev{ top:50%; left:0; bottom:0; }
  .choice--model .choice__word{ font-size:clamp(3rem, 17vw, 6rem); }
  .choice--dev .choice__word{ font-size:clamp(2.6rem, 15vw, 5.4rem); }
  .choice__go{ margin-top:.9rem; }
  .duo__col--l{ left:var(--g); width:34vw; gap:8vh; }
  .duo__col--r{ right:var(--g); width:44vw; }
  .duo__index--stack,.duo__sys{ margin-top:10vh; }
  .duo__cross{ width:30vw; left:calc(50% - 15vw); }
  .duo__hint{ display:none; }

  .hc{ grid-template-columns:1fr; min-height:0; }
  .hc__half{ padding:10vh var(--g) 2rem; }
  .hc__meta{ margin-top:2rem; }

  /* MANNEQUIN */
  .mh{ min-height:34rem; }
  .mh__media{ right:var(--g); top:calc(var(--nav-h) + 1rem); height:auto; width:62vw; }
  .mh__copy{ top:auto; bottom:calc(19vw + 2.5rem); width:auto; right:var(--g); }
  .mh__line{ font-size:1.5rem; margin-top:1rem; }
  .mh__base{ margin-top:.6rem; }
  .mh__vert{ right:auto; left:calc(var(--g) * .55); top:calc(var(--nav-h) + 1rem); transform:rotate(180deg); }

  .story{ height:300svh; }
  .story__stage{ grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:start; padding-top:calc(var(--nav-h) + 1rem); }
  .story__media{ height:56svh; margin-top:0; }
  .story__text{ height:auto; min-height:28svh; padding:0 var(--g); }
  .story__ch{ justify-content:flex-start; padding-top:1.5rem; }
  .story__t{ font-size:clamp(3rem, 15vw, 5rem); margin:.2rem 0 .8rem; }

  .ms{ padding:14vh var(--g) 4vh; }
  .ms__h{ grid-column:1 / 13; }
  .ms__year{ font-size:31vw; }
  .ms__name{ font-size:clamp(2.2rem, 11vw, 3.6rem); padding-left:0; margin-top:.6rem; }
  .ms__ph{ grid-column:4 / 13; grid-row:2; margin-top:2rem; }
  .ms__role{ grid-column:1 / 10; grid-row:3; margin-top:1.5rem; }

  .bk{ padding:14vh var(--g) 6vh; }
  .bk__head{ margin-bottom:5vh; }
  .bk__year{ grid-column:1 / 7; }
  .bk__meta{ grid-column:1 / 9; grid-row:3; margin:1.6rem 0 0; }
  .bk__l--2{ font-size:clamp(2.6rem, 13vw, 4.4rem); padding-left:calc(100% / 12 * 4); }
  .bk__a{ grid-column:1 / 12; grid-row:1; }
  .bk__b{ grid-column:6 / 13; grid-row:2; margin-top:-10vh; z-index:1; }
  .bk__cap{ grid-column:1 / 6; grid-row:2; align-self:end; }
  .bk__c{ grid-column:2 / 12; grid-row:3; margin-top:8vh; }

  .book__head{ padding:16vh var(--g) 8vh; }
  .book__title{ grid-column:1 / 13; }
  .book__note{ grid-column:1 / 13; margin-top:2rem; }

  .pl{ margin-bottom:14vh; }
  .pl1__a{ grid-column:1 / 11; }
  .pl1__cap{ grid-column:1 / 13; padding:1.5rem 0 0; }

  .pl2__a{ grid-column:4 / 13; grid-row:1; }
  .pl2__b{ grid-column:1 / 7; grid-row:2; margin-top:-14vh; z-index:1; }
  .pl2__cap{ grid-column:8 / 13; grid-row:2; margin-top:2rem; }

  .pl--3{ grid-template-columns:1fr; height:auto; }
  .pl3__a,.pl3__b{ height:auto; aspect-ratio:683/1024; }
  .pl3__cap{ bottom:1.5rem; }

  .pl4__a{ grid-column:1 / 5; }
  .pl4__b{ grid-column:5 / 9; margin-top:8vh; }
  .pl4__c{ grid-column:9 / 13; }

  .hz{ height:auto; }
  .hz__track{ height:78svh; gap:1rem; padding:0 var(--g); }
  .hz__intro{ width:62vw; padding-bottom:2rem; }
  .hz__title{ font-size:3rem; }

  .pl6__word{ color:var(--ink); mix-blend-mode:normal; position:relative; inset:auto; grid-column:1 / 13; grid-row:1; margin-bottom:-.18em; z-index:0; }
  .pl6__a{ grid-column:1 / 10; grid-row:2; }
  .pl6__b{ grid-column:8 / 13; grid-row:3; margin-top:-18vh; }
  .pl6__cap{ grid-column:1 / 8; grid-row:3; align-self:end; margin-top:0; }

  .pl7__stick{ grid-column:1 / 13; position:relative; top:0; }
  .pl7__a{ width:100%; max-height:none; }
  .pl7__flow{ grid-column:1 / 13; padding-top:3rem; }
  .pl7__b{ margin-top:4rem; }

  .spec{ padding:4vh var(--g) 14vh; }
  .spec__list{ grid-column:1 / 13; }
  .spec__row{ grid-template-columns:1fr; gap:.35rem; }

  .mc{ padding-top:16vh; }
  .mc__foot{ margin-top:12vh; flex-direction:column; }

  /* DÉVELOPPEUSE */
  .grid-lines i:nth-child(2n){ display:none; }
  .dh__top{ top:22svh; width:52vw; }
  .dh__fig{ left:auto; right:var(--g); top:calc(var(--nav-h) + 9svh); width:34vw; }
  .dh__statement{ left:var(--g); top:auto; bottom:calc(16vw + 4.5rem); width:78vw; font-size:1.6rem; }

  .pj{ padding:14vh var(--g) 12vh; }
  .pj__head{ margin-bottom:5vh; }
  .pj__title{ grid-column:1 / 11; }
  .pj__count{ grid-column:11 / 13; justify-self:end; }
  .pj__lead{ grid-column:1 / 13; margin-top:1.5rem; }
  .pj__row{ grid-template-columns:2.2rem 1fr; row-gap:1rem; padding:1.8rem 0 2rem; }
  .pj__n{ grid-row:1; padding-top:.4em; }
  .pj__name{ grid-column:2; font-size:clamp(2.4rem, 12.5vw, 5rem); }
  .pj__meta{ grid-column:2; }
  .pj__go{ grid-column:2; justify-self:start; }
  .pj__thumb{ display:block; grid-column:2; grid-row:2; aspect-ratio:16/10; background:var(--bg, #000); overflow:hidden; }
  .pj__thumb img{ width:100%; height:100%; object-fit:contain; padding:8%; }
  .pv{ display:none; }

  .xp{ padding:0 var(--g) 10vh; }
  .xp__head{ margin-bottom:4vh; }
  .xp__row{ grid-template-columns:2.2rem 1fr; }
  .xp__n{ padding-top:.4em; }
  .xp__name{ font-size:clamp(2.4rem, 12.5vw, 5rem); }
  .xp__meta{ grid-column:2; grid-row:2; }
  .xp__lead{ grid-column:2; grid-row:3; }

  .sk{ padding:8vh var(--g) 12vh; }
  .sk__side{ grid-column:1 / 13; position:relative; top:0; margin-bottom:5vh; }
  .sk__list{ grid-column:1 / 13; }
  .sk__row{ padding:2rem 0 1.8rem; }

  .dc{ padding-top:14vh; }
  .dc__foot{ margin-top:12vh; flex-direction:column; }
}

@media (max-width:860px){ .is-arriving.arrive-home .veil{ background:linear-gradient(180deg, var(--paper) 50%, var(--night) 50%); } }
@media (max-width:860px) and (min-height:900px){
  .story__media{ height:52svh; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}