/* Rapport annuel 2025 · étude de cas. Habillage portfolio commun (Geist, grille, en-tête, héros) ;
   personnalité propre : la nuit du rapport comme fond de scène, la lumière qui vient des pages, aucun autre accent que celui des pièces. */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(fonts/geist-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(fonts/geist-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(fonts/geist-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
:root{
  color-scheme:only light;
  --paper:#ecebe8; --ink:#121314; --muted:#5d5f64; --line:rgba(18,19,20,.14);
  --stage:#080b13; --stage-ink:#e9eaee; --stage-muted:#8f95a3; --stage-line:rgba(233,234,238,.14);
  --studio:#eae8eb;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ra:"Jost","Futura PT",Futura,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --frame:1920px;
  --gutter:max(20px, env(safe-area-inset-left, 0px), calc((100vw - var(--frame)) / 2 + 20px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px), calc((100vw - var(--frame)) / 2 + 20px));
  --measure:36em;--lede:30em;--txt-min:27em;
}
@media (min-width:861px){:root{--gutter:max(48px, calc((100vw - var(--frame)) / 2 + 48px));--gutter-r:max(64px, calc((100vw - var(--frame)) / 2 + 64px))}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--stage)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px, 10px + .45vw, 20px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--mono);font-size:clamp(12px, 9px + .22vw, 14px);letter-spacing:.01em;line-height:1.45}
.muted{color:var(--muted)}
.muted-d{color:var(--stage-muted)}
.note{font-size:11.5px!important}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block}
section[data-cs-theme=dark],footer[data-cs-theme=dark]{background:var(--stage);color:var(--stage-ink)}
figure{margin:0}
figcaption{margin-top:10px}

.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter-r) 18px var(--gutter);color:#fff;mix-blend-mode:difference;pointer-events:none;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.cs-on .top{transform:translateY(-110%)}
.top a{pointer-events:auto;text-decoration:none}
.top .name{font-weight:500;font-size:15px;letter-spacing:-.01em}
.top nav{display:flex;gap:28px;font-size:14px}

.chap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-bottom:clamp(40px,5vw,80px)}
.chap-n{grid-column:1/3;display:flex;align-items:center;gap:10px;padding-top:.9em;color:var(--muted)}
.chap-d .chap-n{color:var(--stage-muted)}
.chap-n i{display:block;width:10px;height:10px;background:currentColor}
.chap h2{grid-column:3/12;font-size:clamp(38px,5.4vw,92px);line-height:.98;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
@media (max-width:860px){.chap{display:block}.chap-n{padding:0 0 18px}.chap h2{font-size:clamp(34px,9vw,52px)}}

.credit{font-size:11px!important;color:var(--stage-muted)}
.ph-clip{overflow:hidden;position:relative}
.ph-clip img{width:100%;height:116%;object-fit:cover;will-change:transform}
.bleed .credit{padding:0 var(--gutter-r) 0 var(--gutter)}
.bleed .ph-clip{height:min(88svh,1080px)}

/* Grille éditoriale commune : une mesure, jamais une fraction de colonnes */
.txt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px}
.txt>*{grid-column:3/13;max-width:var(--measure)}
.txt>.lede{max-width:var(--lede)}
@media (min-width:861px) and (max-width:1180px){.txt>*{grid-column:1/13}}
@media (max-width:860px){.txt{display:block}.txt>*+*{margin-top:18px}}
.pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(min(100%,var(--txt-min)),1fr);column-gap:clamp(32px,4vw,80px);align-items:center}
@media (max-width:1180px){.pair{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4vw,48px)}}
.lede{font-size:clamp(19px,1.5vw,26px);line-height:1.38;letter-spacing:-.012em}
.side>*+*{margin-top:18px}
.side p{max-width:var(--measure)}
.replay{position:absolute;z-index:5;right:12px;bottom:12px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:8px 14px;min-height:36px;cursor:pointer;font-size:11px!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,opacity .4s}
.replay:hover{background:rgba(255,255,255,.18)}

/* Ouverture : même système que les autres études ; ici le livre en lumière de studio, la nuit est réservée aux pages */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;background:var(--studio);color:var(--ink);overflow:hidden}
.hero-stage{position:absolute;top:0;bottom:0;right:calc(var(--gutter-r) - 4vw);left:calc(var(--gutter) + min(36vw,560px));display:grid;place-items:center}
.hero-stage img{width:100%;max-height:100%;object-fit:contain;transform-origin:60% 60%}
.hero-title{position:absolute;left:var(--gutter);top:44%;transform:translateY(-50%);max-width:min(40vw,620px);z-index:4}
.hero-title .kick{color:var(--muted);margin:0 0 22px}
.hero-title h1{font-size:clamp(60px,8vw,140px);font-weight:500;letter-spacing:-.05em;line-height:.88;padding-bottom:.04em;margin:0 0 0 -.03em}
.hero-title .desc{margin:28px 0 0;font-size:clamp(17px,1.45vw,22px);line-height:1.38;color:var(--muted);letter-spacing:-.01em}
.hero-meta{position:absolute;left:var(--gutter);right:calc(var(--gutter-r) + 160px);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:.6fr .5fr 1.3fr 1fr;gap:24px;margin:0;z-index:4}
.hero-meta dt{color:var(--muted);margin-bottom:4px}
.hero-meta dd{margin:0;font-size:15px;line-height:1.35}
.hero-cue{position:absolute;right:var(--gutter-r);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:var(--muted);z-index:4}
.hero-cue i{position:relative;display:block;width:1px;height:28px;background:var(--line);overflow:hidden}
.hero-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--ink);animation:cue 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{from{transform:translateY(-12px)}to{transform:translateY(28px)}}
@media (max-width:860px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:calc(84px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px))}
  .hero-title{order:1;position:static;transform:none;max-width:none;padding:0 var(--gutter-r) 0 var(--gutter)}
  .hero-title .kick{margin-bottom:14px}
  .hero-title h1{font-size:clamp(56px,16vw,96px)}
  .hero-title .desc{margin-top:16px;font-size:16px}
  .hero-stage{order:2;position:relative;left:auto;right:auto;width:100%;margin:8px 0 16px}
  .hero-meta{order:3;position:static;margin-top:auto;padding:0 var(--gutter-r) 0 var(--gutter);grid-template-columns:1fr 1fr;gap:10px 16px}
  .hero-meta dd{font-size:14px}
  .hero-cue{display:none}
}