@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F6F1E9; --paper-2:#EFE7DB; --blush:#E9D3C4; --ink:#1C1914; --ink-2:#5C544A; --navy:#0F2D50;
  --rule:rgba(28,25,20,.17); --pad:clamp(1.25rem,5vw,4.5rem);
  --serif:"Libre Caslon Display","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:var(--pad);top:-4rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10;text-decoration:none}
.skip:focus{top:.75rem}
h1,h2,h3{margin:0;font-weight:400}
h1,h2{font-family:var(--serif)}
p{margin:0}

/* barre du haut */
.top{padding:1.25rem var(--pad) 0}
.top nav{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;justify-content:flex-end;align-items:baseline;font-size:.95rem}
.top a{color:var(--ink);text-decoration:none;padding:.25rem 0;border-bottom:1px solid transparent}
.top a:hover{border-bottom-color:var(--ink)}
.top .langswitch{white-space:nowrap;margin-left:.5rem;padding:.2rem .55rem;border:1px solid var(--rule);border-radius:2px;font-weight:500;font-size:.85rem}

/* en-tête */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(1rem,4vw,4rem);min-height:calc(100svh - 3.5rem);padding:1rem var(--pad) 4rem}
.hero-text{max-width:34rem}
.hero h1{font-size:clamp(3.6rem,9vw,8.4rem);line-height:.92;letter-spacing:-.025em}
.role{margin-top:1.6rem;font-size:1.3rem;font-weight:500;color:var(--navy)}
.intro{margin-top:1rem;max-width:34rem;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{display:inline-block;padding:.8rem 1.25rem;border:1px solid var(--ink);border-radius:2px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem;line-height:1.2;transition:background-color .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-main{background:var(--ink);color:var(--paper)}
.btn-main:hover{background:var(--navy);border-color:var(--navy)}

.art{position:relative;margin:0;justify-self:center;height:min(88svh,56rem);aspect-ratio:997/1499;max-width:100%}
.art img{position:absolute;inset:0;width:100%;height:100%}
.art-blush{animation:fade 1s ease-out both}
.art-line{animation:draw 2.6s cubic-bezier(.65,0,.35,1) .25s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* sections */
.band{padding:clamp(3.5rem,8vw,6.5rem) var(--pad);border-top:1px solid var(--rule)}
.wrap{max-width:74rem;margin:0 auto;display:grid;grid-template-columns:minmax(10rem,.3fr) minmax(0,1fr);gap:1rem clamp(1.5rem,5vw,5rem)}
.wrap>h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.05;position:sticky;top:1.5rem;align-self:start}
.lead{color:var(--ink-2);margin-bottom:2rem;max-width:40rem}
.sub{font-size:1.05rem;font-weight:600;margin:2.4rem 0 .6rem}
.col>p,.col>ul{max-width:44rem}

.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem clamp(1.5rem,4vw,3.5rem)}
.do h3{font-family:var(--serif);font-size:1.5rem;line-height:1.2;margin-bottom:.5rem}
.do p{color:var(--ink-2);max-width:30rem}

.job{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.5rem 1.5rem;padding:1.9rem 0;border-top:1px solid var(--rule)}
.job:first-of-type{border-top:0;padding-top:0}
.job-dates{white-space:nowrap;color:var(--ink-2);font-size:.95rem;font-variant-numeric:tabular-nums;padding-top:.35rem}
.job h3{font-size:1.2rem;font-weight:600;line-height:1.35}
.job-org{margin-top:.15rem;color:var(--navy)}
.job-org strong{font-weight:600}
.job-kw{margin-top:.5rem;color:var(--ink-2);font-style:italic;font-size:.97rem;max-width:42rem}
.job ul{list-style:none;margin:1rem 0 0;padding:0;max-width:44rem}
.job li{position:relative;padding-left:1.25rem;margin-top:.55rem}
.job li::before{content:"";position:absolute;left:0;top:.8em;width:.6rem;height:1px;background:var(--ink)}

.skills{margin:0}
.skill{padding:1rem 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(9rem,.34fr) minmax(0,1fr);gap:.4rem 1.5rem}
.skill:first-child{border-top:0;padding-top:0}
.skill dt{font-weight:600}
.skill dd{margin:0;color:var(--ink-2);max-width:42rem}

.plain{list-style:none;margin:0;padding:0}
.plain li{display:grid;grid-template-columns:minmax(0,1fr);padding:.7rem 0;border-top:1px solid var(--rule)}
.plain li:first-child{border-top:0}
.plain strong{font-weight:600}
.plain span{color:var(--ink-2);font-size:.97rem}

.contact{background:var(--paper-2)}
.big{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.25;max-width:32rem}
.mailline{margin-top:1.25rem;color:var(--ink-2);font-size:.97rem}

.foot{padding:2rem var(--pad) 3rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.foot a{color:var(--ink-2)}

.legal .wrap.narrow{display:block;max-width:44rem;padding:3rem var(--pad)}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.5rem}
.legal h2{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:1.8rem 0 .3rem}
.legal .small{margin-top:2rem;color:var(--ink-2);font-size:.9rem}

/* tablette et mobile */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:1.5rem;min-height:0;padding-top:.5rem}
  .art{order:-1;height:auto;width:min(78vw,26rem)}
  .hero-text{max-width:none}
  .wrap{grid-template-columns:minmax(0,1fr)}
  .wrap>h2{position:static}
  .dos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .top nav{justify-content:flex-start;gap:.25rem 1.1rem;font-size:.9rem}
  .top .langswitch{margin-left:auto;white-space:nowrap}
  .job{grid-template-columns:minmax(0,1fr)}
  .skill{grid-template-columns:minmax(0,1fr)}
  .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .art-blush,.art-line{animation:none}
}
@media print{
  .top,.actions,.skip{display:none}
  body{background:#fff}
  .hero{min-height:0}
}