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

/* Transitions de page natives. Seule la racine bascule : le rail, le compteur et le
   curseur sont en mix-blend-mode, un élément nommé sortirait de son contexte de fusion. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration:.6s; animation-timing-function:cubic-bezier(.62,.04,.16,1); }
.vt-out #cursor,
.vt-out #focus { opacity:0 !important; }

/* Encres, rythme, polices */
:root { --bg:#f2f0ec; --bg-2:#eae7e1; --panel:#e9e6e0; --panel-2:#e1ddd5; --line:#d6d2ca; --line-2:#bdb8ae; --ink:#0a0a0a; --dim:#5f5c58; --dim-2:#3c3a37; --pure:#0a0a0a; --anti:#f2f0ec; --display:"Space Grotesk", system-ui, sans-serif; --display-w:700; --display-ls:-2.5px; --display-lh:.94; --ds:1; --f-titre:var(--display); --ease:cubic-bezier(.62,.04,.16,1); --ghost-bg:transparent; --ghost-ink:var(--ink); --ghost-pad:7px 0; --ghost-line:1px; --ghost-gap:22px; }
:root { --maxw:1180px; --gut:clamp(18px,5vw,58px); }
:root { --f-sous:"Space Grotesk", system-ui, sans-serif; --f-texte:"Space Grotesk", system-ui, sans-serif; }

/* Base. overflow-x:clip après hidden : clip rogne sans créer de conteneur de défilement,
   ce dont les navigateurs de téléphone se servent pour replier leur barre. */
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--bg); -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body { font-family:var(--f-texte); background:var(--bg); color:var(--ink); line-height:1.65; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; cursor:none; }
a { color:inherit; text-decoration:none; }
a,
a:link,
label,
summary,
select,
input,
textarea,
[role="button"],
[data-hov],
[data-cursor] { cursor:none; }
img { max-width:100%; display:block; }
button { appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0; padding:0; color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit; cursor:none; }
:focus-visible { outline:2px solid var(--pure); outline-offset:3px; }
nav#nav :focus-visible,
#rail :focus-visible { outline-color:#fff; }
html { color-scheme:light; scrollbar-width:thin; scrollbar-color:var(--line-2) var(--bg); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line-2); border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--dim); }
::selection { background:var(--pure); color:var(--anti); }

/* Texture du papier */
.tex { position:fixed; inset:0; z-index:1; pointer-events:none; }
.tex .grain { position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tex .grain { opacity:.032; mix-blend-mode:multiply; }
.tex .weave { position:absolute; inset:0; }
.tex .weave { opacity:1; --content:min(var(--maxw), 100% - 2 * var(--gut)); background-image:linear-gradient(to right, rgba(10,10,10,.045) 0 1px, transparent 1px); background-size:calc(var(--content) / 12) 100%; background-position:center top; background-repeat:repeat-x; }

/* Le cadre de l'écran. Tout ce qui est fixe se tient à l'intérieur. */
:root { --cad-t:10px; --cad-r:10px; --cad-b:10px; --cad-l:10px; }
html::before,
html::after,
body::before,
body::after { content:""; position:fixed; z-index:205; pointer-events:none; background:#fff; mix-blend-mode:difference; opacity:.6; }
html::before,
html::after { left:var(--cad-l); right:var(--cad-r); height:12px; }
html::before { top:var(--cad-t); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0zM1 1v2h2V1zM5 5h1v1H5z'/%3E%3C/svg%3E") left top / 12px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 0h4v4H2zM3 1v2h2V1zM0 5h1v1H0z'/%3E%3C/svg%3E") right top / 12px 12px no-repeat, linear-gradient(#000,#000) left 10px top 6px / calc(100% - 20px) 2px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0zM1 1v2h2V1zM5 5h1v1H5z'/%3E%3C/svg%3E") left top / 12px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 0h4v4H2zM3 1v2h2V1zM0 5h1v1H0z'/%3E%3C/svg%3E") right top / 12px 12px no-repeat, linear-gradient(#000,#000) left 10px top 6px / calc(100% - 20px) 2px no-repeat; }
html::after { bottom:var(--cad-b); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 2h4v4H0zM1 3v2h2V3zM5 0h1v1H5z'/%3E%3C/svg%3E") left bottom / 12px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 2h4v4H2zM3 3v2h2V3zM0 0h1v1H0z'/%3E%3C/svg%3E") right bottom / 12px 12px no-repeat, linear-gradient(#000,#000) left 10px top 4px / calc(100% - 20px) 2px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 2h4v4H0zM1 3v2h2V3zM5 0h1v1H5z'/%3E%3C/svg%3E") left bottom / 12px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 2h4v4H2zM3 3v2h2V3zM0 0h1v1H0z'/%3E%3C/svg%3E") right bottom / 12px 12px no-repeat, linear-gradient(#000,#000) left 10px top 4px / calc(100% - 20px) 2px no-repeat; }
body::before,
body::after { top:calc(var(--cad-t) + 10px); bottom:calc(var(--cad-b) + 10px); width:2px; }
body::before { left:calc(var(--cad-l) + 6px); }
body::after { right:calc(var(--cad-r) + 6px); }

/* Curseur : un réticule, une boîte de cadrage (#focus, plus bas) */
#cursor { position:fixed; top:0; left:0; width:13px; height:13px; background:var(--pure); z-index:9999; pointer-events:none; mix-blend-mode:difference; transition:width .16s var(--ease), height .16s var(--ease), opacity .2s; }
#cursor { background:#fff; }
#cursor.big,
#cursor.big { width:38px; height:38px; background:none; box-shadow:inset 0 0 0 1px #fff; }
#cursor.aim { width:30px; height:30px; background:none; }
#cursor.aim::before,
#cursor.aim::after { content:""; position:absolute; top:50%; left:50%; background:#fff; }
#cursor.aim::before { width:30px; height:1px; transform:translate(-50%,-50%); }
#cursor.aim::after { width:1px; height:30px; transform:translate(-50%,-50%); }
#cursor.aim.big::before,
#cursor.aim.big::after { display:none; }
#cursor .lab { position:absolute; left:50%; top:calc(100% + 12px); transform:translateX(-50%); font-family:var(--f-sous); font-size:10px; letter-spacing:2px; white-space:nowrap; color:#fff; opacity:0; transition:opacity .2s; text-transform:uppercase; }
#cursor.has-lab .lab { opacity:1; }
@media (hover:none) {
  body { cursor:auto; }
  #cursor { display:none; }
}

/* Amorce : le nom, un filet, et la page qui s'ouvre */
#leader { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; }
#leader::before,
#leader::after { content:""; position:absolute; left:0; right:0; height:calc(50% + 1px); background:var(--bg); transition:transform .8s cubic-bezier(.76,0,.24,1); }
#leader::before { top:0; }
#leader::after { bottom:0; }
#leader.open { pointer-events:none; }
#leader.open::before { transform:translateY(-100%); }
#leader.open::after { transform:translateY(100%); }
html.sans-amorce #leader { display:none; }
.lead-mark { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; transition:opacity .3s ease; }
#leader.open .lead-mark { opacity:0; }
.lead-w { padding-left:.42em; font-family:var(--f-titre); font-size:clamp(13px,1.9vw,19px); letter-spacing:.42em; color:var(--ink); white-space:nowrap; }
.lead-c { display:inline-block; opacity:0; transform:translateY(.7em); animation:leadIn .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i) * 32ms); }
@keyframes leadIn {to { opacity:1; transform:none; }}
.lead-line { position:relative; width:min(260px,56vw); height:1px; background:var(--line); transition:width .55s cubic-bezier(.76,0,.24,1); }
.lead-line i { position:absolute; inset:0; background:var(--ink); transform:scaleX(var(--p, 0)); transform-origin:left; transition:transform .4s ease-out; }
#leader.full .lead-line { width:100vw; }

/* Barre du haut. Le bandeau de nav#nav::before n'apparaît qu'une fois décollé du haut. */
nav#nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; gap:10px; padding:28px var(--gut) 16px; color:var(--nav-ink); --nav-ink:var(--ink); --nav-dim:var(--dim); --nav-line:var(--line-2); --nav-bg:var(--bg); }
nav#nav::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--bg); border-bottom:1px solid var(--line); opacity:0; transform:translateY(-101%); transition:opacity .32s var(--ease), transform .42s var(--ease); }
html.lifted nav#nav::before { opacity:1; transform:none; }
nav#nav .brand { display:flex; align-items:center; gap:26px; font-size:11.5px; letter-spacing:2.6px; text-transform:uppercase; white-space:nowrap; }
nav#nav .brand .mark { width:14px; height:14px; background:var(--nav-ink); animation:spin 6s steps(4) infinite; }
nav#nav .brand-n { padding:6px 6.4px 6px 9px; background:var(--nav-ink); color:var(--nav-bg); }
@keyframes spin {to { transform:rotate(360deg); }}
nav#nav .tool-btn.lang { margin-left:auto; }
nav#nav .tool-btn { font-family:var(--f-sous); font-size:11.5px; padding:8px 12px; box-shadow:inset 0 0 0 1px var(--nav-line); color:var(--nav-dim); transition:color .22s, box-shadow .22s; }
nav#nav .tool-btn:hover,
nav#nav .tool-btn.on { color:var(--nav-ink); box-shadow:inset 0 0 0 1px var(--nav-ink); }
nav#nav .lang b { color:var(--nav-ink); }
nav#nav :focus-visible { outline-color:var(--nav-ink); }

/* Progression et rail d'index */
#prog { position:fixed; top:0; left:0; height:2px; width:100%; background:#fff; z-index:210; mix-blend-mode:difference; pointer-events:none; transform:scaleX(0); transform-origin:0 50%; }
#rail { position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:180; display:flex; flex-direction:column; gap:12px; mix-blend-mode:difference; }
#rail a { display:flex; align-items:center; justify-content:flex-end; gap:8px; font-family:var(--f-sous); font-size:10px; letter-spacing:1px; color:rgba(255,255,255,.42); transition:color .3s; }
#rail a i { display:block; width:16px; height:1px; background:currentColor; transition:width .35s var(--ease); }
#rail a.on { color:#fff; }
#rail a.on i { width:30px; }
#rail a span { opacity:0; transition:opacity .3s; }
#rail a:hover span,
#rail a.on span { opacity:1; }

/* Mise en page */
.wrap { max-width:var(--maxw); margin:0 auto; }
.sec { position:relative; z-index:2; padding:clamp(76px,13vh,150px) var(--gut); }
.sec--tight { padding-top:0; }
.hero { position:relative; z-index:2; min-height:88vh; min-height:88svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(118px,17vh,190px) var(--gut) clamp(50px,8vh,80px); overflow:hidden; }
.hero > .wrap { width:100%; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-sous); font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink); margin-bottom:16px; }
.eyebrow i { width:8px; height:8px; background:var(--pure); display:block; }
.display { font-family:var(--f-titre); font-weight:var(--display-w); letter-spacing:var(--display-ls); line-height:var(--display-lh); font-size:calc(clamp(30px,6.4vw,80px) * var(--ds)); }
.display--xl { font-size:calc(clamp(34px,10vw,142px) * var(--ds)); }
.display--sm { font-size:calc(clamp(22px,3.6vw,42px) * var(--ds)); }
.display--sm { letter-spacing:-1.2px; }
.lead { color:var(--dim); font-size:clamp(15px,2vw,19px); max-width:600px; margin-top:18px; }
.body { font-size:clamp(15.5px,1.7vw,18px); line-height:1.9; }
.body p + p { margin-top:15px; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:42px; flex-wrap:wrap; }
.sec-head .idx { font-family:var(--f-sous); font-size:11px; letter-spacing:3px; color:var(--dim); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; }

/* Boutons */
.btn { display:inline-flex; align-items:center; gap:10px; width:max-content; font-family:var(--f-sous); font-size:13.5px; letter-spacing:.5px; padding:14px 24px; transition:transform .14s var(--ease), gap .3s var(--ease); }
.btn--solid { background:var(--pure); color:var(--anti); }
.btn--line { box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); }
.btn--line:hover { box-shadow:inset 0 0 0 1px var(--pure); }
.btn:hover { gap:16px; }
.btn--ghost { padding:var(--ghost-pad); background:var(--ghost-bg); color:var(--ghost-ink); border-bottom:var(--ghost-line) solid var(--pure); }
.btn--ghost:hover { gap:var(--ghost-gap); }
.backlink { display:flex; width:max-content; align-items:center; gap:8px; font-family:var(--f-sous); font-size:12.5px; color:var(--dim); margin-bottom:24px; transition:color .25s, gap .25s; }
.backlink:hover { color:var(--ink); gap:14px; }

/* Révélations */
.rev { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rev.in { opacity:1; transform:none; }
.wd { display:inline-block; white-space:nowrap; }
.ch { display:inline-block; overflow:hidden; vertical-align:bottom; padding:.16em 0 .1em; margin:-.16em 0 -.1em; }
.ch > i { display:inline-block; font-style:normal; transform:translateY(115%); transition:transform .7s var(--ease); }
.ch.in > i { transform:none; }
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rev,
  .ch > i { opacity:1 !important; transform:none !important; clip-path:none !important; }
}
.tag { font-family:var(--f-sous); font-size:10.5px; letter-spacing:1.5px; padding:4px 9px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--dim); }
.mesh { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; }
.mesh > div { box-shadow:0 0 0 1px var(--line); }
.mesh > div { background:var(--bg); padding:28px 24px; min-height:180px; display:flex; flex-direction:column; gap:11px; transition:background .3s var(--ease); }
.mesh > div > p:last-child { margin-top:auto; }
.mesh > div:hover { background:var(--panel); }
.mesh .fi { font-size:24px; color:var(--ink); }
.mesh b { font-size:17px; }
.mesh p { color:var(--dim); font-size:13.5px; }
.figbox { position:relative; aspect-ratio:16/11; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; display:grid; place-items:center; }
.figbox canvas { position:absolute; inset:0; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); }
.stats > div { background:var(--bg); padding:30px 20px; text-align:center; }
.stats b { display:block; font-family:var(--f-titre); font-weight:var(--display-w); letter-spacing:var(--display-ls); font-size:calc(clamp(24px,4.4vw,40px) * var(--ds)); }
.stats b { letter-spacing:-1.5px; }
.stats span { font-family:var(--f-sous); font-size:11px; letter-spacing:1.5px; color:var(--dim); }

/* Étiquettes, bandeau défilant, chronologie */
.chips { display:flex; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap; margin-top:22px; }
.chips span { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-sous); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--dim); }
.chips span::before { content:""; width:5px; height:5px; flex:none; background:var(--dim-2); }
.chips i { font-style:normal; color:var(--line-2); letter-spacing:1.5px; }
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:16px 0; position:relative; z-index:2; }
.marquee .row-m { display:flex; gap:36px; width:max-content; will-change:transform; }
.marquee .row-m span { font-family:var(--f-titre); font-size:14px; color:var(--dim); display:flex; align-items:center; gap:36px; white-space:nowrap; }
.marquee .row-m span::after { content:"◆"; color:var(--ink); font-size:11px; }
.marquee .row-m span { font-weight:700; font-size:22px; letter-spacing:-.8px; }
.timeline { border-left:1px solid var(--line); margin-left:7px; padding-left:30px; display:grid; gap:34px; }
.tl { position:relative; }
.tl::before { content:""; position:absolute; left:-37px; top:6px; width:13px; height:13px; background:var(--pure); transform:scale(0); transition:transform .5s var(--ease); }
.tl.in::before { transform:scale(1); }
.tl .yr { font-family:var(--f-sous); font-size:12px; letter-spacing:3px; color:var(--dim); }
.tl b { display:block; font-size:18px; margin-top:6px; }
.tl p { color:var(--dim); font-size:14.5px; margin-top:3px; }

/* La filmographie */
.reel { position:relative; }
.reel-yr { display:grid; grid-template-columns:clamp(96px,13vw,190px) 1fr; gap:clamp(20px,4vw,54px); padding:clamp(34px,5vw,60px) 0; }
.reel-yr:first-child { padding-top:0; }
.reel-mark { position:sticky; top:clamp(96px,15vh,132px); align-self:start; text-align:right; }
.reel-n { display:block; font-family:var(--f-titre); font-weight:700; font-size:clamp(34px,5.4vw,78px); letter-spacing:-3px; line-height:.88; color:transparent; -webkit-text-stroke:1px var(--line-2); transition:color .7s var(--ease), -webkit-text-stroke-color .7s var(--ease); }
.reel-yr.here .reel-n { color:var(--ink); -webkit-text-stroke-color:transparent; }
.reel-c { display:block; margin-top:10px; font-family:var(--f-sous); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim); }
.reel-films { --reel-pad:clamp(22px,3.5vw,50px); position:relative; border-left:1px solid var(--line); padding-left:var(--reel-pad); display:grid; gap:clamp(30px,4.5vw,64px); }
.fc { position:relative; display:grid; grid-template-columns:minmax(0,44%) 1fr; gap:clamp(18px,2.8vw,40px); align-items:center; color:inherit; }
.fc::before { content:""; position:absolute; left:calc(var(--reel-pad) * -1 - 5px); top:calc(50% - 5px); width:11px; height:11px; background:var(--pure); transform:scale(0); transition:transform .55s var(--ease); }
.fc.in::before,
.rev.in .fc::before { transform:scale(1); }
.fc-vis { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; }
.fc--portrait { grid-template-columns:minmax(0,31%) 1fr; }
.fc--square { grid-template-columns:minmax(0,38%) 1fr; }
.fc-vis img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06); transition:transform 1.1s var(--ease), filter .5s var(--ease); }
a.fc:hover .fc-vis img { transform:scale(1.055); }
@media (hover:hover) {
  .fc:hover .fc-vis img { filter:grayscale(0) contrast(1); }
}
.fc-vis.empty::before,
.fc-vis.empty::after { content:""; position:absolute; width:14px; height:14px; border:1px solid var(--line-2); }
.fc-vis.empty::before { left:12px; top:12px; border-right:0; border-bottom:0; }
.fc-vis.empty::after { right:12px; bottom:12px; border-left:0; border-top:0; }
.fc-vis .ghost { display:none; }
.fc-fmt { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--f-sous); font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--dim); }
.fc-fmt .sep { font-style:normal; color:var(--line-2); }
.fc-t { font-family:var(--f-titre); font-weight:700; letter-spacing:-1.5px; font-size:clamp(21px,3vw,38px); line-height:1.04; margin-top:11px; }
.fc-t::after { content:""; display:block; height:1px; background:var(--pure); margin-top:9px; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
a.fc:hover .fc-t::after { transform:scaleX(1); }
.fc-r { margin-top:13px; font-size:15px; }
.fc-p { margin-top:5px; font-family:var(--f-sous); font-size:12.5px; color:var(--dim); }
.fc-go { display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--f-sous); font-size:11.5px; letter-spacing:2px; color:var(--dim); transition:gap .35s var(--ease), color .35s; }
a.fc:hover .fc-go { gap:14px; color:var(--ink); }

/* La planche des projets freelance */
.sheet { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:0; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); }
.cs-f { position:relative; display:block; padding:26px 16px 20px; color:inherit; box-shadow:inset 0 0 0 1px var(--line); transition:background .4s var(--ease); }
.cs-f:hover { background:var(--panel-2); }
.cs-f::before,
.cs-f::after { content:""; position:absolute; left:0; right:0; height:9px; background-image:repeating-linear-gradient(to right, var(--line-2) 0 7px, transparent 7px 15px); opacity:.75; }
.cs-f::before { top:7px; }
.cs-f::after { bottom:7px; }
.cs-edge { position:absolute; top:19px; left:16px; font-family:var(--f-sous); font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim-2); }
.cs-n { position:absolute; top:17px; right:16px; font-family:var(--f-sous); font-size:10px; letter-spacing:1px; color:var(--dim); }
.cs-img { display:block; position:relative; margin-top:16px; aspect-ratio:3/2; overflow:hidden; background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; }
.cs-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06); transition:transform 1s var(--ease), filter .5s var(--ease); }
.cs-f:hover .cs-img img { transform:scale(1.05); }
@media (hover:hover) {
  .cs-f:hover .cs-img img { filter:grayscale(0) contrast(1); }
}
.poster { display:grid; justify-items:center; align-content:center; gap:9px; padding:14px; text-align:center; color:var(--line-2); }
.poster-i { width:32px; height:22px; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:square; }
.poster b { font-family:var(--f-sous); font-weight:400; font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--dim-2); }
.poster i { font-style:normal; font-family:var(--f-sous); font-size:9px; letter-spacing:2px; color:var(--line-2); }
.cs-meta { display:block; margin-top:13px; }
.cs-meta b { display:block; font-family:var(--f-titre); font-weight:700; font-size:16px; letter-spacing:-.5px; line-height:1.15; }
.cs-meta i { display:block; font-style:normal; margin-top:3px; font-size:12.5px; color:var(--dim); }
.cs-meta .cs-cli { font-family:var(--f-sous); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.cs-mark { position:absolute; inset:10px 8px; width:calc(100% - 16px); height:calc(100% - 20px); fill:none; stroke:var(--pure); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; transform:rotate(-1.4deg); pointer-events:none; transition:stroke-dashoffset .75s var(--ease), opacity .25s; }
.cs-f:hover .cs-mark { opacity:.85; stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce) {
  .cs-mark { transition:opacity .2s; }
  .cs-f:hover .cs-mark { stroke-dashoffset:0; }
}

.cat-intro { color:var(--dim); font-size:14.5px; max-width:560px; margin-bottom:26px; }

/* Pied de page */
footer { position:relative; z-index:2; padding:70px var(--gut) 46px; border-top:1px solid var(--line); margin-top:30px; }
.foot { max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:center; }
.foot .big { font-family:var(--f-titre); font-weight:var(--display-w); letter-spacing:var(--display-ls); line-height:1.4; font-size:calc(clamp(22px,4.6vw,44px) * var(--ds)); }
.socials { display:flex; gap:9px; flex-wrap:wrap; }
.socials a { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-sous); font-size:12.5px; padding:11px 16px; box-shadow:inset 0 0 0 1px var(--line); color:var(--dim); transition:color .25s, box-shadow .25s; }
.socials a:hover { color:var(--ink); box-shadow:inset 0 0 0 1px var(--pure); }
.i { width:1em; height:1em; display:block; flex:none; fill:currentColor; pointer-events:none; }
.socials .i { font-size:15px; opacity:.85; transition:opacity .25s; }
.socials a:hover .i { opacity:1; }
.btn .i { font-size:15px; }
.copyright { max-width:var(--maxw); margin:38px auto 0; font-family:var(--f-sous); font-size:11.5px; color:var(--dim); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* La boîte de cadrage et le compteur */
#focus { position:fixed; left:0; top:0; z-index:9997; pointer-events:none; mix-blend-mode:difference; opacity:0; }
#focus.on { opacity:1; }
#focus i { position:absolute; width:9px; height:9px; border:1px solid #fff; }
#focus i:nth-child(1) { left:0;  top:0;    border-right:0; border-bottom:0; }
#focus i:nth-child(2) { right:0; top:0;    border-left:0;  border-bottom:0; }
#focus i:nth-child(3) { left:0;  bottom:0; border-right:0; border-top:0; }
#focus i:nth-child(4) { right:0; bottom:0; border-left:0;  border-top:0; }
#focus { transition:opacity .3s, transform .42s cubic-bezier(.62,.04,.16,1), width .42s cubic-bezier(.62,.04,.16,1), height .42s cubic-bezier(.62,.04,.16,1); }
@media (hover:none) {
  #focus { display:none; }
}
#hud { position:fixed; right:32px; bottom:32px; z-index:180; mix-blend-mode:difference; font-family:var(--f-sous); font-size:10.5px; letter-spacing:2px; color:rgba(255,255,255,.5); pointer-events:none; }
[data-rev="focus"] { opacity:0; filter:blur(10px); transform:translateY(16px) scale(1.012); transition:opacity .9s var(--ease), filter 1.15s var(--ease), transform 1.15s var(--ease); }
[data-rev="focus"].in { opacity:1; filter:blur(0); transform:none; }
[data-rev="dither"] { opacity:1; transform:none; position:relative; }
[data-rev="dither"]::after { content:""; position:absolute; inset:0; z-index:6; background:var(--bg); transform-origin:right; transition:transform .6s steps(9); }
[data-rev="dither"].in::after { transform:scaleX(0); }
[data-rev="iris"] { opacity:1; transform:none; position:relative; }
[data-rev="iris"]::after { content:""; position:absolute; inset:0; z-index:6; background:var(--bg); transform-origin:top; transition:transform 1s var(--ease); }
[data-rev="iris"].in::after { transform:scaleY(0); }
[data-rev="iris"] canvas { transform:scale(1.12); transition:transform 1.5s var(--ease); }
[data-rev="iris"].in canvas { transform:none; }
.btn--line { position:relative; overflow:hidden; z-index:0; }
.btn--line::before { content:""; position:absolute; inset:0; background:var(--pure); transform:scaleX(0); transform-origin:left; z-index:-1; }
.btn--line::before { transition:transform .6s var(--ease); }
.btn--line:hover::before { transform:scaleX(1); }
.btn--line:hover { color:var(--anti); }
.timeline { position:relative; }
.timeline::after { content:""; position:absolute; left:-1px; top:0; width:1px; height:var(--tl,0%); background:var(--pure); transition:height .12s linear; }
[data-enter] { opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-enter].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  [data-rev="focus"],
  [data-rev="dither"],
  [data-rev="iris"],
  [data-enter] { opacity:1 !important; filter:none !important; transform:none !important; clip-path:none !important; }
}

/* Écrans étroits */
@media (max-width:1240px) {
  #rail { display:none; }
}
@media (max-width:1100px) {
  #hud { display:none; }
}
@media (max-width:820px) {
  :root { --cad-t:calc(4px + env(safe-area-inset-top)); --cad-r:calc(4px + env(safe-area-inset-right)); --cad-b:calc(4px + env(safe-area-inset-bottom)); --cad-l:calc(4px + env(safe-area-inset-left)); }
  nav#nav .brand { margin-right:auto; gap:9px; letter-spacing:1.5px; }
  nav#nav .brand-n { padding:0; background:none; color:var(--nav-ink); }
  nav#nav { padding:calc(24px + env(safe-area-inset-top)) var(--gut) 13px; }
  .tex { display:none; }
  #prog { mix-blend-mode:normal; background:var(--pure); opacity:.85; }
  html { scroll-behavior:auto; }
  nav#nav .tool-btn { min-height:42px; padding:8px 12px; }
  .hero:not(.hero--cover) > .wrap { text-align:center; }
  .hero:not(.hero--cover) .eyebrow,
  .hero:not(.hero--cover) .chips,
  .hero:not(.hero--cover) > .wrap > div { justify-content:center; }
  .hero:not(.hero--cover) .backlink,
  .hero:not(.hero--cover) .btn { margin-left:auto; margin-right:auto; }
  .hero:not(.hero--cover) .lead,
  .hero:not(.hero--cover) .body,
  .hero:not(.hero--cover) .sec-sub { margin-left:auto; margin-right:auto; }
  .hero:not(.hero--cover) > .wrap img { margin-left:auto; margin-right:auto; }
  .hero { min-height:min(78svh, 640px); padding:calc(clamp(92px,13svh,128px) + env(safe-area-inset-top)) var(--gut) clamp(36px,6svh,56px); }
  .backlink { padding:12px 0; margin:-12px 0 20px; }
  .sec { padding:clamp(58px,9vh,96px) var(--gut); }
  .sec--tight { padding-top:0; }
  .sec-head { margin-bottom:30px; }
  .sec-head .idx { display:none; }
  .split { grid-template-columns:1fr; }
  .lead { font-size:16px; line-height:1.7; }
  .body { font-size:16px; }
  .mesh p,
  .tl p { font-size:14.5px; }
  .hero:not(.hero--cover) .display { text-wrap:balance; }
  .lead,
  .body p,
  .mesh p { text-wrap:pretty; }
  .stats { grid-template-columns:1fr 1fr; }
  .stats > div { padding:24px 14px; }
  .stats > div:last-child:nth-child(odd) { grid-column:1 / -1; }
  .mesh > div { min-height:0; padding:20px 18px; }
  .sheet { grid-template-columns:1fr 1fr; }
  .cs-f { padding:22px 12px 16px; }
  .cs-edge { display:none; }
  .cs-meta b { font-size:13.5px; }
  .timeline { margin-left:0; padding-left:24px; }
  .tl::before { left:-30px; width:11px; height:11px; }
  .btn--ghost { --ghost-pad:15px 22px; --ghost-line:0; box-shadow:inset 0 0 0 1px var(--pure); justify-content:center; }
  .reel-yr { grid-template-columns:1fr; gap:14px; padding:26px 0; }
  .reel-mark { position:sticky; top:calc(79px + env(safe-area-inset-top)); z-index:5; text-align:left; display:flex; align-items:baseline; gap:14px; background:var(--bg); padding:10px 0 8px; border-bottom:1px solid var(--line); }
  .reel-n { font-size:clamp(30px,9vw,44px); }
  .reel-c { margin-top:0; }
  .fc { grid-template-columns:1fr; gap:16px; }
  .fc::before { top:-5px; }
  .fc-t { font-size:clamp(19px,5.6vw,26px); }
  .fc--portrait .fc-vis { width:min(62%, 230px); }
  .fc--square .fc-vis { width:min(72%, 260px); }
  footer { padding:52px var(--gut) 40px; }
  .foot { flex-direction:column; align-items:center; text-align:center; gap:26px; }
  .socials { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .socials a { padding:14px; justify-content:center; }
  .socials a:last-child:nth-child(odd) { grid-column:1 / -1; }
  .copyright { margin-top:30px; flex-direction:column; align-items:center; text-align:center; gap:6px; }
}
@media (max-width:560px) {
  .display--xl { font-size:calc(clamp(30px,8.6vw,60px) * var(--ds)); }
  .display { letter-spacing:-1.4px; }
  .display--sm { font-size:calc(clamp(20px,5.4vw,30px) * var(--ds)); }
  nav#nav { gap:6px; padding:calc(24px + env(safe-area-inset-top)) var(--gut) 13px; }
  nav#nav .tool-btn { white-space:nowrap; }
  nav#nav .brand { gap:7px; min-width:0; overflow:hidden; }
  nav#nav .brand .mark { width:11px; height:11px; }
  nav#nav .tool-btn { font-size:10px; padding:7px 9px; min-height:42px; }
  .marquee { padding:13px 0; }
  .marquee .row-m { gap:24px; }
  .marquee .row-m span { font-size:11px; gap:24px; }
  .marquee .row-m span { font-size:17px; letter-spacing:-.5px; }
  .fc-fmt,
  .reel-c { font-size:12px; letter-spacing:2px; }
  .fc-p,
  .fc-go { font-size:13px; }
  .cs-n { font-size:11px; }
  .stats span { font-size:11.5px; letter-spacing:1px; }
  .stats b { font-size:calc(clamp(20px,7vw,28px) * var(--ds)); }
  .tag { font-size:11px; }
}

/* Au doigt : pas d'état de survol collant, un retour au toucher */
@media (hover:none) {
  .btn:hover { gap:10px; }
  .btn--line:hover { color:var(--ink); }
  .btn--line:hover::before { transform:scaleX(0); }
  .socials a:hover { color:var(--dim); box-shadow:inset 0 0 0 1px var(--line); }
  .step:hover { background:var(--bg); }
  .mesh > div:hover { background:var(--bg); }
  .cs-f:hover { background:transparent; }
  a.fc:hover .fc-vis img { transform:none; }
  a.fc:hover .fc-t::after { transform:scaleX(0); }
  a.fc:hover .fc-go { gap:7px; color:var(--dim); }
  .cs-f:hover .cs-img img { transform:none; }
  .cs-f:hover .cs-mark { opacity:0; }
  a.cs-f .cs-mark { opacity:.4; stroke-dashoffset:0; }
  .btn:active { transform:scale(.97); transition-duration:.08s; }
  .btn--line:active::before { transform:scaleX(1); transition-duration:.08s; }
  .btn--line:active { color:var(--anti); }
  .btn--ghost:active { transform:none; opacity:.55; }
  .step:active { background:var(--panel); }
  .cs-f:active { background:var(--panel-2); }
  .socials a:active,
  nav#nav .tool-btn:active { color:var(--ink); transition-duration:.08s; }
  a.fc:active .fc-vis img { filter:grayscale(0) contrast(1); }
  a.cs-f:active .cs-img img { filter:grayscale(0) contrast(1); }
}

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:clamp(14px,1.7vw,26px); }
@media (max-width:820px) { .grid { grid-template-columns:1fr 1fr; gap:9px; } }

/* Au doigt, le body défile et non le document : voir le début de js/site.js */
@media (pointer:coarse) {
  html { height:100%; overflow:hidden; }
  body { height:100%; overflow:hidden auto; overscroll-behavior:contain; scroll-behavior:inherit; }
}