/* maximilien-alonso.fr
   Palette tirée des photos : marine de la surchemise, pierre du mur, blanc du tee-shirt.
   L'orange, couleur fétiche de Maximilien, porte les sous-titres et les actions. Une seule famille : Bricolage Grotesque (variable). */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("/assets/fonts/bricolage-grotesque-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}

:root{
  --marine:#101d2e;--pierre:#c4bbaa;--calcaire:#e7e3da;--blanc:#f7f6f2;--craie:#f3f1ea;--accent:#f4711f;
  --bg:var(--calcaire);--ink:var(--marine);--btn-h:var(--marine);--btn-hc:var(--accent);
  --pad:clamp(1.25rem,4.4vw,4rem);--max:85rem;--top-h:3.75rem;--dock-h:0px;
  --step:clamp(4.5rem,10vw,9.5rem);
  --ff:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
:root,.sec,.hero,dialog{--ink-2:color-mix(in srgb,var(--ink) 74%,transparent);--line:color-mix(in srgb,var(--ink) 18%,transparent)}
@media (max-width:61.99rem){:root{--dock-h:calc(3.5rem + env(safe-area-inset-bottom,0px))}}

/* ---------- base */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--ff);font-optical-sizing:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 1rem)}
html:has(dialog[open]){overflow:hidden}
body{margin:0;padding-bottom:var(--dock-h);font-size:clamp(1rem,.95rem + .22vw,1.125rem);line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,dl,dd,dt,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
cite{font-style:normal}
::selection{background:var(--accent);color:var(--marine)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 6px var(--marine)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.printonly{display:none}
.skip{position:absolute;left:var(--pad);top:-5rem;z-index:100;padding:.75rem 1rem;background:var(--accent);color:var(--marine);font-weight:650}
.skip:focus{top:.5rem}

/* ---------- typographie */
h1,h2,h3{font-weight:800;font-stretch:75%;line-height:.9;letter-spacing:-.018em;text-wrap:balance}
h2{font-size:clamp(2.6rem,6.6vw,5.5rem)}
h3{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem);font-stretch:85%;font-weight:750;line-height:1.02;letter-spacing:-.012em}
p{max-width:64ch;text-wrap:pretty}
.lede{max-width:36ch;font-size:clamp(1.2rem,1.05rem + .9vw,1.7rem);line-height:1.28;font-weight:500;letter-spacing:-.012em}
.meta{font-size:.9rem;color:var(--ink-2)}
.note{margin-top:1.75rem}

/* ---------- liens, boutons, sous-titres */
.lk{font-weight:600;text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.2em}
.lk:hover{background:var(--accent);color:var(--marine);text-decoration-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3rem;padding:.55em 1.15em;border:1.5px solid var(--accent);background:var(--accent);color:var(--marine);font-weight:650;font-size:1rem;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--btn-h);border-color:var(--btn-h);color:var(--btn-hc)}
.btn--line{background:transparent;border-color:currentColor;color:var(--ink)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--s{min-height:2.5rem;padding:.35em .9em;font-size:.9375rem}
.btn svg{flex:none;width:.72em;height:.86em}
.acts{display:flex;flex-wrap:wrap;gap:.6rem}
.acts--top{margin-top:clamp(1.5rem,3vw,2.25rem)}
.cc{padding:.16em .5em .2em;background:var(--marine);color:#fff;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cc--en{color:var(--accent)}

/* ---------- sections */
.sec{background:var(--bg);color:var(--ink);padding-block:var(--step)}
.sec--flush{padding-top:0}
.sec--tight{padding-block:clamp(2.5rem,6vw,5rem)}
.t-calcaire{--bg:var(--calcaire);--ink:var(--marine)}
.t-blanc{--bg:var(--blanc);--ink:var(--marine)}
.t-pierre{--bg:var(--pierre);--ink:var(--marine)}
.t-accent{--bg:var(--accent);--ink:var(--marine);--ink-2:color-mix(in srgb,var(--marine) 88%,transparent);--line:color-mix(in srgb,var(--marine) 26%,transparent)}
.t-accent .btn:not(.btn--line){background:var(--marine);border-color:var(--marine);color:var(--accent)}
.t-accent .btn:not(.btn--line):hover{background:var(--blanc);border-color:var(--blanc);color:var(--marine)}
.t-marine{--bg:var(--marine);--ink:var(--craie);--btn-h:var(--craie);--btn-hc:var(--marine)}
.wrap{width:min(100% - 2*var(--pad),var(--max));margin-inline:auto}
.head{display:grid;gap:1rem 3rem;margin-bottom:clamp(2rem,5vw,3.75rem)}
.split{display:grid;gap:2.5rem}
.split__side>*+*{margin-top:1.4rem}
.duo{display:grid;gap:3rem}
.duo>div>*+*{margin-top:1.2rem}
.h2--gap{margin-top:clamp(3.5rem,8vw,6.5rem);margin-bottom:clamp(1.25rem,3vw,2rem)}
@media (min-width:62rem){
  .head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
  .split__side{position:sticky;top:calc(var(--top-h) + 2rem)}
  .duo{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,6vw,6rem)}
}

/* ---------- en-tête */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(.6rem,2vw,1.5rem);height:var(--top-h);padding-inline:var(--pad);background:var(--calcaire);color:var(--marine)}
.top.is-stuck{box-shadow:0 1px 0 color-mix(in srgb,var(--marine) 14%,transparent)}
.home .top{position:fixed;left:0;right:0;background:transparent}
.home .top.is-stuck{background:var(--calcaire)}
.top__brand{margin-right:auto;font-weight:750;font-stretch:87%;font-size:1.0625rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.top__nav{display:none;gap:clamp(1rem,1.9vw,1.9rem)}
.top__nav a{position:relative;padding:.4rem 0;font-weight:550;font-size:.9688rem;text-decoration:none;white-space:nowrap}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;scale:0 1;transform-origin:left}
.top__nav a:hover::after,.top__nav a[aria-current]::after{scale:1 1}
.top__lang{display:flex;max-width:none;font-size:.875rem;font-weight:650}
.top__lang a,.top__lang span{padding:.3rem .45rem;text-decoration:none}
.top__lang span{background:var(--marine);color:var(--craie)}
.top__lang a:hover{background:var(--accent)}
.top__cv{display:none}
@media (min-width:62rem){.top__nav{display:flex}.top__cv{display:inline-flex}.top__menu{display:none}}

/* ---------- barre d'accès rapide (mobile) */
.dock{position:fixed;inset:auto 0 0 0;z-index:55;display:grid;grid-template-columns:1.5fr 1fr 1fr;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--marine)}
.dock a{display:flex;align-items:center;justify-content:center;gap:.55em;min-height:3.5rem;color:var(--craie);font-weight:650;font-size:.9688rem;text-decoration:none}
.dock a:first-child{background:var(--accent);color:var(--marine)}
.dock a+a{border-left:1px solid color-mix(in srgb,var(--craie) 20%,transparent)}
@media (min-width:62rem){.dock{display:none}}

/* ---------- hero */
.hero{position:relative;isolation:isolate;overflow:clip;--ink:var(--marine);color:var(--marine);background:linear-gradient(90deg,#c4bbaa 0,#c5bcab 46%,#e2ded4 78%,#e9e6de 100%)}
.hero__stage{position:relative;height:min(100svh - var(--dock-h),172vw);min-height:30rem;overflow:clip}
.hero__h1{font:inherit;letter-spacing:0}
.hero__name{position:absolute;z-index:2;top:calc(var(--top-h) + 1.9rem);left:5vw;font-size:calc(90vw / var(--n1));font-weight:800;font-stretch:75%;line-height:.8;letter-spacing:-.012em;text-transform:uppercase;white-space:nowrap;mix-blend-mode:multiply}
.hero__name>span{display:block}
.hero__name>span+span{font-size:calc(var(--n1) / var(--n2) * 1em)}
.hero__role{position:absolute;z-index:6;top:calc(var(--top-h) + .2rem);left:5vw;right:5vw;font-size:.9688rem;font-weight:600;line-height:1.25}
.hero__photo,.hero__cut{position:absolute;top:calc(var(--top-h) + 1.9rem + 16.4vw);left:3vw;width:112vw;aspect-ratio:2/3}
.hero__photo{z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 13%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 13%);mask-composite:intersect}
.hero__cut{z-index:3;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hero__photo img,.hero__cut img{width:100%;height:100%;object-fit:cover}
.hero__cap{position:absolute;z-index:5;left:50%;bottom:1rem;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 1.5rem);text-align:center;font-size:clamp(1rem,.9rem + .55vw,1.4rem);line-height:1.78}
.hero__cap[hidden]{display:none}
.hero__cta{display:none;position:relative;z-index:6;padding:1.5rem var(--pad) 0}
.hero__opt{display:none}
.hero__facts{position:relative;z-index:6;padding:1.5rem var(--pad) 2.25rem}
.facts{display:grid;gap:.32rem 0;font-size:.9688rem;line-height:1.3}
.facts>div{display:grid;grid-template-columns:7.2em minmax(0,1fr);column-gap:.9rem}
.facts dt{color:var(--ink-2)}
.facts dd{font-weight:650}
@media (min-width:62rem){.hero__cta{display:flex}}
@media (min-width:62rem) and (min-aspect-ratio:11/10){
  .hero{--u:min(1vw,1.62svh);--H:max(34rem,min(100svh,68vw));--L:calc((100vw - 100*var(--u))/2);height:var(--H)}
  .hero__stage{position:absolute;inset:0;height:auto;min-height:0}
  .hero__name{top:calc(6.2*var(--u));left:0;right:0;text-align:center;font-size:calc(14*var(--u))}
  .hero__name>span{display:inline}
  .hero__name>span+span{font-size:1em}
  .hero__photo,.hero__cut{top:calc(3.7*var(--u));left:calc(var(--L) + 59*var(--u));width:calc(48*var(--u));height:calc(72*var(--u));transform:translateX(-42%)}
  .hero__role{top:auto;right:auto;left:calc(var(--L) + var(--pad));bottom:calc(4*var(--u) + 4.6rem);max-width:11.5em;font-size:clamp(1.5rem,2.7*var(--u),2.8rem);font-weight:650;font-stretch:87%;line-height:1;letter-spacing:-.02em}
  .hero__cta{position:absolute;left:calc(var(--L) + var(--pad));bottom:calc(4*var(--u));padding:0;flex-wrap:nowrap}
  .hero__facts{position:absolute;right:calc(var(--L) + var(--pad));top:calc(25*var(--u));width:min(25.5*var(--u),22rem);padding:0;font-size:clamp(.8125rem,1.12*var(--u),.9688rem)}
  .hero__facts>div{grid-template-columns:6.2em minmax(0,1fr)}
  .hero__cap{left:calc(var(--L) + 59*var(--u));bottom:calc(4.5*var(--u));max-width:none;white-space:nowrap;font-size:clamp(.95rem,1.45*var(--u),1.4rem)}
}
@media (min-width:75rem){.hero__opt{display:inline-flex}}

/* ---------- vidéos */
.videos{display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
.video__frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a1320;color:inherit;text-decoration:none}
.video__frame picture,.video__frame img{width:100%;height:100%;object-fit:cover}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__frame:hover img{filter:brightness(1.07)}
.video__play{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:.65em;padding:.8em 1.1em;background:var(--accent);color:var(--marine);font-weight:700;font-size:clamp(.95rem,.9rem + .3vw,1.15rem);line-height:1.1}
.video__play svg{width:.72em;height:.86em}
.video__frame:hover .video__play{background:var(--craie)}
.video figcaption{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.8rem}
.video figcaption span{color:var(--ink-2)}
.reels{display:grid;gap:clamp(3.5rem,8vw,6.5rem)}
.reel>*+*{margin-top:1.4rem}
.reel>.video figcaption{display:none}
@media (min-width:62rem){.videos{grid-template-columns:1.72fr 1fr;align-items:end}}

/* ---------- cartons-titres : vidéos sans vignette, face caméra, images de films */
.video__frame{container-type:inline-size}
.carton{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.5rem;padding:1rem 1rem 3.2rem;text-align:center}
.carton__t{max-width:92%;font-size:calc(var(--s,16)*1cqw);font-weight:800;font-stretch:75%;line-height:.84;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.carton__s{font-size:clamp(.85rem,3.2cqw,1.3rem);font-weight:600}
.carton--accent{background:var(--accent);color:var(--marine)}
.carton--pierre{background:var(--pierre);color:var(--marine)}
.carton--blanc{background:var(--blanc);color:var(--marine)}
.carton--calcaire{background:var(--calcaire);color:var(--marine)}
.carton--accent~.video__play{background:var(--marine);color:var(--accent)}
.videos2{display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
.face{display:grid;gap:1.75rem}
.face__v{display:block;width:100%;max-width:24rem;height:auto;aspect-ratio:720/1070;background:#0a1320}
.face__txt>*+*{margin-top:1.2rem}
.stills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.stills .shot img{aspect-ratio:16/9;object-fit:cover}
.gal-stills{column-gap:clamp(.75rem,2vw,1.75rem)}
.gal-stills>*{break-inside:avoid;margin-bottom:clamp(.75rem,2vw,1.75rem)}
.credit__watch{margin-top:.15rem;font-size:.9688rem}
@media (max-width:47.99rem){.stills .shot__cap{display:none}}
@container (max-width:30rem){.video__play{padding:.95rem;font-size:0;gap:0}.video__play svg{width:.9rem;height:1.05rem}}
@container (max-width:46rem){.video__frame picture~.video__play{padding:.95rem;font-size:0;gap:0}.video__frame picture~.video__play svg{width:.9rem;height:1.05rem}}
@media (min-width:48rem){
  .videos2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .face{grid-template-columns:minmax(0,22rem) minmax(0,1fr);column-gap:clamp(2rem,6vw,6rem);align-items:end}
  .stills{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,1.2vw,1.25rem)}
  .gal-stills{columns:2}
}

/* ---------- crédits */
.credits{border-top:1px solid var(--line)}
.credit{display:grid;grid-template-columns:3.3rem minmax(0,1fr);column-gap:1rem;row-gap:.35rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.credit__year{grid-row:span 2;padding-top:.28rem;color:var(--ink-2);font-size:.9688rem;font-weight:600;font-variant-numeric:tabular-nums}
.credit__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem}
.credit__title{font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem)}
.credit__net{padding:.14em .5em .18em;background:var(--ink);color:var(--bg);font-size:.8125rem;font-weight:650;line-height:1.2;white-space:nowrap}
.credit__role{font-weight:600}
.credit__meta{color:var(--ink-2);font-size:.9688rem}
@media (min-width:48rem){
  .credit{grid-template-columns:4.2rem minmax(0,1.1fr) minmax(0,1fr);column-gap:1.5rem;align-items:baseline}
  .credit__year{grid-row:auto;padding-top:0}
}

/* ---------- fiche */
.fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;border-top:1px solid var(--line)}
.fiche>div{padding:.8rem 0;border-bottom:1px solid var(--line)}
.fiche dt{color:var(--ink-2);font-size:.9rem}
.fiche dd{font-size:clamp(1.2rem,1.05rem + .8vw,1.65rem);font-weight:700;font-stretch:87%;line-height:1.12;letter-spacing:-.01em}

/* ---------- profil (photo en pied) */
.profil__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);grid-template-areas:"head head" "fig fiche" "acts acts";gap:1.75rem 1.25rem}
.profil__head{grid-area:head}
.profil__head>*+*{margin-top:1.2rem}
.profil__fig{grid-area:fig;align-self:start;position:relative}
.profil__fig img{width:100%}
.profil__h{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);width:max-content;max-width:calc(100% - .5rem);font-size:.8125rem;line-height:1.78;text-align:center}
.profil__grid>.fiche,.fiches{grid-area:fiche}
.profil__grid>.fiche{grid-template-columns:1fr;align-self:start}
.profil__acts{grid-area:acts}
.profil--full .profil__grid{grid-template-areas:"head head" "fig fiche"}
.profil--full .profil__fig{position:sticky;top:calc(var(--top-h) + 1rem)}
.fiches h3{margin:1.75rem 0 .7rem}
.fiches h3:first-child{margin-top:0}
.fiches .fiche{grid-template-columns:1fr}
@media (min-width:62rem){
  .profil__grid{grid-template-columns:minmax(0,3.6fr) minmax(0,1.4fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;grid-template-areas:"fig . head" "fig . fiche" "fig . acts";gap:2rem 0}
  .profil__fig{grid-row:1 / -1;justify-self:center}
  .profil__fig img{width:auto;max-width:none;height:min(42rem,78svh)}
  .profil__h{font-size:.9rem}
  .profil__grid>.fiche{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}
  .profil--full .profil__grid{grid-template-rows:auto 1fr;grid-template-areas:"fig . head" "fig . fiche"}
  .profil--full .profil__fig{top:calc(var(--top-h) + 2rem)}
  .fiches .fiche{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}
}

/* ---------- photos */
.shot{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;text-decoration:none}
button.shot{cursor:zoom-in}
.shot picture,.shot img{width:100%}
.shot__cap{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);width:max-content;max-width:calc(100% - 1rem);text-align:center;font-size:clamp(.8125rem,.75rem + .3vw,1rem);line-height:1.78}
.js .shot__cap{visibility:hidden}
.js .shot.anim .shot__cap{transition:visibility 0s linear .8s}
.js .shot.is-in .shot__cap{visibility:visible}
.trio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:.75rem;align-items:end}
.trio>:nth-child(1){grid-column:1 / span 7}
.trio>:nth-child(2){grid-column:8 / span 5;margin-bottom:12vw}
.trio>:nth-child(3){display:none}
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);row-gap:clamp(1.25rem,6vw,6rem);align-items:start}
.gal>*{grid-column:1 / -1}
.gal--ext>:nth-child(even){grid-column:4 / -1}
.gal--ext>:nth-child(3){grid-column:1 / span 9}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.4rem,2vw,2rem)}
.tri .shot img{mix-blend-mode:multiply}
@media (max-width:47.99rem){.tri .shot__cap{display:none}}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8.6rem,1fr);gap:.5rem;overflow-x:auto;padding-bottom:.6rem;scroll-snap-type:x proximity}
.strip figure{position:relative;scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover}
.strip figcaption{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);width:max-content;max-width:calc(100% - .5rem);font-size:.8125rem;text-align:center;line-height:1.78}
.slug{margin-bottom:clamp(1.5rem,3.5vw,2.75rem);font-size:clamp(2.2rem,5.4vw,4.4rem);text-transform:uppercase}
.slug span{display:block;margin-top:.6rem;color:var(--ink-2);font-size:clamp(1rem,.95rem + .4vw,1.3rem);font-weight:600;font-stretch:100%;line-height:1.25;letter-spacing:0;text-transform:none}
@media (min-width:48rem){
  .trio{column-gap:clamp(1rem,2.4vw,2.5rem)}
  .trio>:nth-child(1){grid-column:1 / span 5}
  .trio>:nth-child(2){grid-column:6 / span 4;margin-bottom:clamp(3rem,9vw,8rem)}
  .trio>:nth-child(3){display:block;grid-column:10 / span 3}
  .gal--ext>:nth-child(1){grid-column:1 / span 7}
  .gal--ext>:nth-child(2){grid-column:9 / span 4;margin-top:clamp(4rem,14vw,12rem)}
  .gal--ext>:nth-child(3){grid-column:2 / span 4}
  .gal--ext>:nth-child(4){grid-column:7 / span 6;margin-top:clamp(3rem,8vw,7rem)}
  .gal--ext>:nth-child(5){grid-column:4 / span 6}
}

/* ---------- bandeau, contact, pied de page */
.band>*+*{margin-top:1.5rem}
.band h2{max-width:17ch}
.cta__h{font-size:clamp(3.4rem,14vw,12.5rem);line-height:.8;text-transform:uppercase}
.cta__en{display:block;margin-top:.9em;color:var(--accent);font-size:clamp(1.1rem,1rem + 1vw,1.9rem);font-weight:600;font-stretch:100%;line-height:1.2;letter-spacing:0;text-transform:none}
.cta .lede{margin-top:clamp(1.75rem,4vw,3rem)}
.reach{display:grid;gap:2.75rem 3rem;margin-top:clamp(2rem,5vw,3.5rem)}
.reach__h{margin-bottom:1.2rem;color:var(--accent);font-size:1.0625rem;font-weight:650;font-stretch:100%;line-height:1.2;letter-spacing:0}
.contact{display:grid;gap:1.3rem 3rem}
.contact dt{color:var(--ink-2);font-size:.9rem}
.contact dd a,.contact dd span{font-size:clamp(1.25rem,1rem + 1.5vw,2.05rem);font-weight:700;font-stretch:85%;line-height:1.2;letter-spacing:-.012em;text-decoration:none;overflow-wrap:anywhere}
.contact dd a:hover{background:var(--accent);color:var(--marine)}
@media (min-width:48rem){.reach{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot{padding-block:clamp(3rem,7vw,5.5rem) 2rem;border-top:1px solid var(--line)}
.bill{max-width:none;text-align:center;font-size:clamp(1.15rem,.9rem + 1.5vw,2.1rem);font-weight:500;font-stretch:75%;line-height:1.24;letter-spacing:.012em;text-transform:uppercase;text-wrap:balance}
.bill span{opacity:.78;font-size:.56em;font-weight:400;letter-spacing:.04em}
.bill b{font-weight:500}
.bill a{text-decoration:none}
.bill a:hover{color:var(--accent)}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9rem}
.foot__row p{max-width:none}
.foot__row a+a{margin-left:1.25rem}

/* ---------- en-têtes de page */
.ph{padding-block:clamp(2rem,6vw,5rem) clamp(2.5rem,6vw,5rem)}
.ph__h1{display:grid;gap:clamp(.7rem,1.4vw,1.2rem)}
.mast{margin-left:-.035em;font-size:min(15rem,calc((100vw - 2*var(--pad)) / var(--mw)));line-height:.8;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.mast-sub{font-size:clamp(1.05rem,1rem + .5vw,1.4rem);font-weight:600;font-stretch:100%;line-height:1.25;letter-spacing:-.005em}
.h1-s{max-width:15ch;font-size:clamp(2.7rem,8vw,6.75rem)}
.ph__intro{margin-top:clamp(1.5rem,3vw,2.5rem)}
.ph__meta{margin-top:1.25rem}

/* ---------- filmographie */
.filmo__g{display:grid;gap:1rem;padding-block:clamp(1.75rem,4vw,3rem)}
.filmo__g:first-child{padding-top:0}
.filmo__h{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:.95}
.filmo__p{font-weight:600}
.brief__grid{display:grid;gap:2.25rem;margin-top:clamp(2rem,4vw,3rem)}
.brief h3{margin-bottom:.9rem}
.plain li{padding:.22rem 0}
@media (min-width:62rem){
  .filmo__g{grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(1rem,2.4vw,2.5rem)}
  .filmo__h{position:sticky;top:calc(var(--top-h) + 1.5rem);align-self:start}
  .brief__grid{grid-template-columns:1.2fr 1fr 1.2fr;column-gap:clamp(1.5rem,4vw,4rem)}
}

/* ---------- profil : biographie, compétences */
.bio{display:grid;gap:2.5rem}
.bio__txt>*+*{margin-top:1.2rem}
.bio__txt .lede{max-width:31ch}
.bio__note{padding:1rem 1.1rem;background:var(--accent);font-size:.9688rem}
.skills{margin-top:clamp(1.75rem,4vw,3rem);border-top:1px solid var(--line)}
.skills li{display:grid;gap:.35rem 2rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
@media (min-width:48rem){.skills li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline}}
@media (min-width:62rem){.bio{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(2rem,6vw,6rem);align-items:start}}

/* ---------- liens de fin de page */
.next{border-top:1px solid var(--line)}
.next a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:800;font-stretch:75%;line-height:1;letter-spacing:-.015em;text-decoration:none}
.next a span{color:var(--ink-2);font-size:.9688rem;font-weight:500;font-stretch:100%;line-height:1.3;letter-spacing:0}
.next a:hover{padding-inline:.7rem;background:var(--accent)}
.next a:hover span{color:var(--marine)}

/* ---------- texte courant, formulaire */
.prose>*{max-width:44rem}
.prose h2{margin:2.75rem 0 .9rem;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1}
.prose h2:first-child{margin-top:0}
.prose p+p{margin-top:.8rem}
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.9688rem;font-weight:600}
.field input,.field select,.field textarea,.form__out textarea{width:100%;min-height:3rem;padding:.7rem .8rem;border:1.5px solid var(--marine);border-radius:0;background:#fff;color:var(--marine)}
.form__out{display:grid;gap:.9rem;padding:1.1rem;background:var(--blanc)}
.form__out[hidden]{display:none}

/* ---------- 404 */
.lost{display:grid;min-height:calc(100svh - var(--top-h) - var(--dock-h));background:linear-gradient(90deg,#c4bbaa,#e7e3da);color:var(--marine)}
.lost__txt{align-self:center;padding:clamp(2rem,6vw,5rem) var(--pad)}
.lost__txt>*+*{margin-top:1.75rem}
.lost h1{display:grid;gap:.9rem}
.lost .mast{font-size:min(9rem,calc((100vw - 2*var(--pad)) / var(--mw)))}
.lost__cap{font-size:clamp(1rem,.9rem + .55vw,1.3rem);line-height:1.78}
.lost__fig{position:relative;align-self:end}
.lost__fig img{width:100%;max-height:62svh;object-fit:cover;object-position:50% 30%}
.lost__fig figcaption{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);width:max-content;font-size:.9688rem}
@media (min-width:62rem){
  .lost{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .lost .mast{font-size:min(9rem,calc((52vw - 2*var(--pad)) / var(--mw)))}
  .lost__fig{align-self:stretch}
  .lost__fig picture{height:100%}
  .lost__fig img{height:100%;max-height:none}
}

/* ---------- fenêtres : menu, lecteur, visionneuse */
dialog{max-width:none;max-height:none;padding:0;border:0;background:none;color:inherit}
dialog::backdrop{background:rgba(6,12,21,.92)}
.menu{--ink:var(--craie);--bg:var(--marine);--btn-h:var(--craie);--btn-hc:var(--marine);width:100vw;height:100dvh;padding:0 var(--pad) calc(1.5rem + env(safe-area-inset-bottom,0px));background:var(--marine);color:var(--craie)}
.menu[open]{display:flex;flex-direction:column}
.menu__top{display:flex;justify-content:space-between;align-items:center;flex:none;height:var(--top-h)}
.menu nav{display:grid;margin-block:auto;padding-block:1rem}
.menu nav a{padding:.12em 0;font-size:clamp(2.6rem,13vw,4.75rem);font-weight:800;font-stretch:75%;line-height:1;letter-spacing:-.015em;text-transform:uppercase;text-decoration:none}
.menu nav a[aria-current]{color:var(--accent)}
.menu__foot{display:grid;justify-items:start;gap:.55rem}
.menu__foot .btn{margin-bottom:.5rem}
.player{--ink:var(--craie);--bg:var(--marine);--btn-h:var(--craie);--btn-hc:var(--marine);width:min(100vw,calc((100dvh - 6rem)*16/9),84rem);color:var(--craie)}
.player__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .75rem}
.player__title{font-weight:600}
.player__frame{aspect-ratio:16/9;background:#000}
.player__frame iframe{display:block;width:100%;height:100%;border:0}
.lb{--ink:var(--craie);--bg:var(--marine);--btn-h:var(--craie);--btn-hc:var(--marine);width:100vw;height:100dvh;background:var(--marine);color:var(--craie)}
.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.lb__track{display:flex;overflow-x:auto;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.lb__track::-webkit-scrollbar{display:none}
.lb__track:focus-visible{outline-offset:-3px;box-shadow:none}
.lb__slide{flex:0 0 100%;display:grid;place-items:center;min-height:0;padding:3.75rem .75rem .5rem;scroll-snap-align:center}
.lb__slide picture{display:grid;place-items:center;max-height:100%}
.lb__slide img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 8.5rem);object-fit:contain}
.lb__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem var(--pad) calc(.9rem + env(safe-area-inset-bottom,0px));font-size:.9688rem}
.lb__bar p{max-width:none}
.lb__cap{font-weight:600}
.lb__close{position:absolute;top:.7rem;right:var(--pad)}
.lb__nav{position:absolute;top:50%;display:none;place-items:center;width:3rem;height:3rem;margin-top:-1.5rem;border:1.5px solid currentColor;background:var(--marine);cursor:pointer}
.lb__nav:hover{background:var(--craie);color:var(--marine)}
.lb__prev{left:var(--pad)}
.lb__next{right:var(--pad)}
@media (min-width:48rem){.lb__nav{display:grid}}

/* ---------- consentement (seulement si Google Analytics est activé) */
.consent{position:fixed;left:1rem;right:1rem;bottom:calc(var(--dock-h) + 1rem);z-index:70;display:grid;gap:.9rem;max-width:30rem;padding:1.1rem;background:var(--marine);color:var(--craie);--ink:var(--craie);--bg:var(--marine);--btn-h:var(--craie);--btn-hc:var(--marine);font-size:.9688rem}

/* ---------- ligne de références (sous le hero) */
.refs{padding-block:clamp(1.4rem,3vw,2.4rem);border-bottom:1px solid color-mix(in srgb,var(--craie) 16%,transparent);background:var(--marine);color:var(--craie)}
.refs .wrap{display:grid;gap:.7rem 2.5rem;align-items:baseline}
.refs__l{color:color-mix(in srgb,var(--craie) 72%,transparent);font-size:.9688rem;white-space:nowrap}
.refs__list{display:flex;flex-wrap:wrap;gap:.3rem clamp(1.1rem,2.6vw,2.6rem);font-size:clamp(1.2rem,1rem + 1.2vw,1.9rem);font-weight:750;font-stretch:80%;line-height:1.2;letter-spacing:-.01em}
.sec--after-band{padding-top:clamp(3rem,7vw,6rem)}
@media (min-width:62rem){.refs .wrap{grid-template-columns:auto 1fr}}

/* ---------- autres langues (pied de page), portes */
.intl{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.foot .wrap>.intl:first-child{margin-top:0;padding-top:0;border-top:0}
.intl__h{margin-bottom:.8rem;color:var(--ink-2);font-size:.9rem}
.intl ul{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;font-size:.9688rem}
.intl a{font-weight:550;text-decoration:none}
.intl a:hover,.intl a[aria-current]{color:var(--accent)}
.trio--plain .shot__cap{display:none}
:lang(zh-HK),:lang(zh-TW){font-family:"Bricolage Grotesque","PingFang HK","PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",sans-serif}
html:lang(zh-HK) :is(h2,h3,.hero__role,.lede),html:lang(zh-TW) :is(h2,h3,.hero__role,.lede){line-height:1.3;letter-spacing:0}
html:lang(zh-HK) :is(h2,h3),html:lang(zh-TW) :is(h2,h3){font-weight:800}
html:lang(zh-HK) :is(h2,.hero__role),html:lang(zh-TW) :is(h2,.hero__role){word-break:keep-all;overflow-wrap:anywhere}
html:lang(vi) :is(h2,h3){line-height:1.14}
:lang(ja){font-family:"Bricolage Grotesque","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",Meiryo,sans-serif}
html:lang(ja) :is(h2,h3,.hero__role,.lede){line-height:1.4;letter-spacing:0;line-break:strict;word-break:auto-phrase}
html:lang(ja) :is(h2,h3){font-weight:800}
:lang(ar){font-family:"Bricolage Grotesque","Noto Sans Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif}
html:lang(ar) body *{letter-spacing:0}
html:lang(ar) .hero__name{letter-spacing:-.012em}
html:lang(ar) :is(h2,h3,.hero__role,.lede){line-height:1.4}
[dir=rtl] .hero{direction:ltr}
[dir=rtl] .hero :is(.hero__role,.hero__facts){direction:rtl}
[dir=rtl] .hero__role{text-align:left}
[dir=rtl] .top__nav a::after{transform-origin:right}

/* ---------- crédit de réalisation (pied de page) */
.foot__row{flex-wrap:wrap;gap:.5rem 2rem}
.foot__by a{font-weight:600}

/* ---------- page signature e-mail */
.sig{padding:1.5rem 1.6rem;border:1px solid var(--line);background:#fff;overflow-x:auto}
.steps{counter-reset:etape}
.steps li{counter-increment:etape;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.steps li:first-child{padding-top:0}
.steps li::before{content:counter(etape);grid-row:1 / span 2;color:var(--accent);font-size:2rem;font-weight:800;font-stretch:75%;line-height:.95}
.steps h3{margin-bottom:.25rem;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);font-weight:700;font-stretch:88%;line-height:1.2}
.steps p{grid-column:2;max-width:56ch}

/* ---------- FAQ */
.faq__i{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.faq__i:first-child{padding-top:0}
.faq__i h3{margin-bottom:.55rem;font-size:clamp(1.15rem,1rem + .55vw,1.45rem);font-weight:700;font-stretch:88%;line-height:1.22;letter-spacing:-.008em}
.faq__i p{max-width:62ch}
.faq__i p+p{margin-top:.6rem}
.faq__c{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-weight:600}
.faq__i:target h3{color:var(--accent-ink,var(--accent))}

/* ---------- mouvement : rien ne bouge si le système demande moins d'animations */
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left;scale:var(--prog,0) 1}
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;font-size:.875rem;line-height:1.6;white-space:nowrap}
.cur.on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  :root{--ease:cubic-bezier(.2,.7,.1,1)}
  /* au chargement, sans JavaScript */
  @keyframes k-rise{from{opacity:0;translate:0 1.4rem}to{opacity:1;translate:0 0}}
  @keyframes k-title{from{opacity:0;translate:0 24%;clip-path:inset(0 -5% 100% -5%)}to{opacity:1;translate:0 0;clip-path:inset(-12% -5% -12% -5%)}}
  @keyframes k-fig{from{opacity:0;scale:1.05}to{opacity:1;scale:1}}
  @keyframes k-dlg{from{opacity:0;scale:.985}to{opacity:1;scale:1}}
  .hero__name>span{animation:k-title .95s var(--ease) both}
  .hero__name>span+span{animation-delay:.1s}
  .hero__photo,.hero__cut{animation:k-fig 1.1s var(--ease) both}
  .hero__role{animation:k-rise .7s var(--ease) .35s both}
  .hero__cta{animation:k-rise .7s var(--ease) .45s both}
  .hero__facts{animation:k-rise .7s var(--ease) .55s both}
  .ph .mast,.ph .h1-s{animation:k-title .85s var(--ease) both}
  .ph .mast-sub{animation:k-rise .7s var(--ease) .18s both}
  .ph__intro{animation:k-rise .7s var(--ease) .28s both}
  .ph .acts,.ph__meta{animation:k-rise .7s var(--ease) .38s both}
  .lost__txt>*{animation:k-rise .7s var(--ease) both}
  .lost__txt>:nth-child(2){animation-delay:.12s}
  .lost__txt>:nth-child(3){animation-delay:.24s}
  dialog[open]{animation:k-dlg .28s var(--ease)}
  .menu[open] nav a{animation:k-rise .5s var(--ease) both}
  .menu[open] nav a:nth-child(2){animation-delay:.04s}
  .menu[open] nav a:nth-child(3){animation-delay:.08s}
  .menu[open] nav a:nth-child(4){animation-delay:.12s}
  .menu[open] nav a:nth-child(5){animation-delay:.16s}
  .menu[open] nav a:nth-child(6){animation-delay:.2s}
  /* profondeur du hero au défilement : le nom recule, le portrait avance */
  .hero__name{transform:translateY(calc(var(--sy,0)*-7vh))}
  .hero__photo,.hero__cut{transform:translateY(calc(var(--sy,0)*5vh))}
  /* apparition au défilement (classes posées par le script) */
  .anim{opacity:0;translate:0 1.6rem;transition:opacity .7s var(--ease) var(--d,0s),translate .8s var(--ease) var(--d,0s)}
  .anim.is-in{opacity:1;translate:0 0}
  /* titres : le texte monte derrière un cache ; images : volet latéral. Le cache est porté par les enfants,
     jamais par l'élément observé, sinon le navigateur le croit hors champ et ne le révèle pas. */
  .anim--title{opacity:1;translate:none;transition:none;clip-path:inset(-.16em -5% -.22em -5%)}
  .anim--title .anim__in{display:block;translate:0 135%;transition:translate .95s var(--ease) var(--d,0s)}
  .anim--title.is-in .anim__in{translate:0 0}
  .anim--wipe{opacity:1;translate:none;transition:none}
  .anim--wipe>*{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease) var(--d,0s)}
  .anim--wipe.is-in>*{clip-path:inset(0 0 0 0)}
  .anim--wipe img,.anim--wipe .carton{scale:1.1;transition:scale 1.5s var(--ease) var(--d,0s)}
  .anim--wipe.is-in img,.anim--wipe.is-in .carton{scale:1}
  .anim .cta__en{opacity:0;transition:opacity .01s linear .95s}
  .anim.is-in .cta__en{opacity:1}
  /* parallaxe des photos */
  .plx{overflow:hidden}
  .plx img{transform:translateY(calc(var(--p,0)*-7%)) scale(1.14)}
  /* survols */
  .btn{transition:translate .15s var(--ease)}
  .btn:active{translate:0 2px}
  .btn svg,.video__play svg{transition:translate .2s var(--ease)}
  .btn:hover svg,.video__frame:hover .video__play svg{translate:.22em 0}
  .top__nav a::after{transition:scale .28s var(--ease)}
  .video__frame img,a.shot img,.stills .shot img,.tri .shot img,.gal-stills .shot img{transition:scale .7s var(--ease),filter .3s}
  .video__frame:hover img,a.shot:hover img,.stills .shot:hover img,.tri .shot:hover img,.gal-stills .shot:hover img{scale:1.04}
  .gal-stills .shot,.stills .shot,.video__frame{overflow:hidden}
  .credit__title,.next a{transition:translate .25s var(--ease),padding .2s var(--ease)}
  .credit:hover .credit__title{translate:.4rem 0}
  .cur{transition:opacity .15s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:62rem) and (min-aspect-ratio:11/10){
  .hero__name>span{display:inline-block}
  .hero__photo,.hero__cut{transform:translateX(-42%) translateY(calc(var(--sy,0)*6vh)) scale(calc(1 + var(--sy,0)*.03))}
}

/* ---------- impression (la filmographie devient un CV) */
@media print{
  @page{margin:1.4cm}
  :root{--step:.5cm}
  body{padding:0;background:#fff;font-size:10pt}
  .top,.dock,.foot,.skip,.cta,.noprint,dialog,.video,.next{display:none!important}
  .sec{background:#fff!important;color:#000!important;--ink:#000;--bg:#fff}
  .ph{padding:0 0 .4cm}
  .mast{font-size:34pt}
  .filmo__g{grid-template-columns:3.4cm 1fr;gap:.4cm;padding-block:.25cm;break-inside:avoid}
  .filmo__h{position:static;font-size:13pt}
  .credit{grid-template-columns:1.2cm 1.1fr 1fr;column-gap:.4cm;padding:.14cm 0;break-inside:avoid}
  .credit__year{grid-row:auto;padding:0}
  .credit__title{font-size:11.5pt}
  .brief h2{font-size:15pt}
  .brief__grid{grid-template-columns:1.2fr 1fr 1.2fr;gap:.6cm;margin-top:.3cm}
  .printonly{display:list-item}
  .anim,.anim>*,.anim__in{opacity:1!important;translate:none!important;clip-path:none!important}
  a{text-decoration:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}