@font-face{font-family:Jost;src:url(fonts/jost-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Brochure partenariats · étude de cas. Habillage portfolio commun (Geist, grille, en-tête, héros) ;
   personnalité propre : la nuit de la couverture comme fond de scène, le blanc des pages pour lire, le bleu 42 comme seul accent. */
   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:#07090b; --stage-ink:#e9eaee; --stage-muted:#8f95a3; --stage-line:rgba(233,234,238,.14);
  --studio:#eae8eb; --blue:#173d7a; --bp:"Jost","Futura PT",Futura,sans-serif; --jb:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  
  --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}
}

/* 04 · Ouvertures */
.ops{padding-top:clamp(40px,6vw,100px);padding-bottom:clamp(100px,12vw,180px)}
.viewer{position:relative;aspect-ratio:16/9;background:#fff;overflow:hidden}
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:16px 0 18px}
.tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:block;position:relative;border-top:1px solid var(--stage-line);padding-top:10px;color:var(--stage-muted);font:400 11px/1.3 var(--mono);letter-spacing:.04em;min-height:44px;transition:color .3s}
.tabs button b{display:block;font:500 14px/1.25 var(--sans);letter-spacing:-.005em;color:inherit;margin-top:3px}
.tabs button[aria-selected=true]{color:var(--stage-ink)}
.tabs button .bar{position:absolute;left:0;top:-1px;height:1px;background:var(--stage-ink);width:0}
.tabs button[aria-selected=true] .bar{width:100%}
.tabs button:focus-visible{outline:2px solid var(--stage-ink);outline-offset:4px}
@media (hover:hover){.tabs button:hover{color:var(--stage-ink)}}
@media (max-width:760px){.tabs{grid-template-columns:repeat(3,1fr);row-gap:4px}.tabs button b{font-size:12.5px}}

/* 08 · Sélection */
.sel{padding-top:clamp(40px,6vw,100px);padding-bottom:clamp(100px,12vw,180px);background:#f6f5f5}
.sel-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,20px)}
.sel-grid figure{overflow:hidden}
.sel-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;box-shadow:0 30px 50px -34px rgba(10,20,50,.35),0 0 0 1px rgba(18,19,20,.06);transition:transform 1.2s var(--ease)}
@media (hover:hover){.sel-grid figure:hover img{transform:scale(1.025)}}
.s-a{grid-column:1/13}.s-b{grid-column:1/7}.s-c{grid-column:7/13}
.sel-grid figure{overflow:visible}
.sel-grid figure>div,.sel-grid figure{position:relative}
@media (max-width:760px){.sel-grid figure{grid-column:1/13}}
.sel-all{margin-top:clamp(28px,3vw,48px)}
.btn-all{display:inline-flex;align-items:center;gap:14px;border:0;border-radius:99px;background:var(--ink);color:#fff;padding:0 22px;height:52px;font-size:15px;cursor:pointer;transition:transform .4s var(--ease)}
.btn-all i{width:14px;height:14px;border:1.5px solid currentColor;border-left:0;border-bottom:0;transform:rotate(45deg) translate(-2px,2px);transition:transform .4s var(--ease)}
@media (hover:hover){.btn-all:hover i{transform:rotate(45deg) translate(1px,-1px)}}

/* 10 · Futur et crédits */
.credits{margin-top:28px;border-top:1px solid var(--stage-line)}
.credits div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:12px 0;border-bottom:1px solid var(--stage-line)}
.credits dt{color:var(--stage-muted)}
.credits dd{margin:0}
@media (max-width:560px){.credits div{grid-template-columns:1fr;gap:2px}}
.foot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--stage-line)}
.foot a{text-decoration:none}

/* Visionneuse */
.book{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:#05070c;color:#e9eaee;padding:0}
.book[open]{display:grid;grid-template-rows:auto 1fr auto}
.book::backdrop{background:#05070c}
.book-bar{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter-r) 10px var(--gutter);color:var(--stage-muted)}
.book-x{background:none;border:1px solid var(--stage-line);border-radius:99px;padding:0 16px;height:40px;color:#e9eaee;cursor:pointer}
.book-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 var(--gutter-r) 0 var(--gutter)}
.book-nav{display:flex;align-items:center;gap:14px;padding:14px var(--gutter-r) calc(18px + env(safe-area-inset-bottom,0px)) var(--gutter)}
.book-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--stage-line);background:none;color:#e9eaee;cursor:pointer;flex:none}
.book-nav input{flex:1;accent-color:#e9eaee}
@media (max-width:700px){.book-stage{padding:0 8px}}

@media (prefers-reduced-motion:reduce){.hero-cue i::after{animation:none}.sel-grid img{transition:none}}

/* Ouverture V1.1 : la photographie occupe toute la hauteur et se fond dans la nuit à gauche ;
   au défilement, la caméra se redresse et entre dans l'écran, jusqu'à la couverture à plat. */
.hero.hz{height:auto;min-height:0;overflow:visible;background:var(--stage);color:var(--stage-ink)}
.hz-stick{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden}
.hz-pic{position:absolute;inset:0;display:block}
.hz-ph{position:absolute;top:0;right:0;width:72%;height:100%;max-width:none;object-fit:cover;object-position:46% 50%}
.hz-night{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--stage) 0%,var(--stage) 28%,rgba(7,9,11,.8) 38%,rgba(7,9,11,0) 56%),linear-gradient(0deg,rgba(7,9,11,.9),rgba(7,9,11,0) 26%)}
.hz-cover{position:absolute;left:50%;top:50%;width:min(104vw,calc(104svh * 16 / 9));max-width:none;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.hero-title .kick,.hero-title .desc,.hero-meta dt,.hero-cue{color:var(--stage-muted)}
.hero-cue i{background:var(--stage-line)}.hero-cue i::after{background:var(--stage-ink)}
.hz-on .hz-pin{height:235svh}
.hz-on .hz-stick{position:sticky;top:0}
.hz-on .hz-ph{right:auto;width:auto;height:auto;object-fit:fill;transform-origin:0 0}
@media (min-width:861px){
  .hero-title{max-width:min(42vw,680px)}
  .hero-title h1{font-size:clamp(56px,6.4vw,124px)}
}
@media (max-width:860px){
  .hero.hz{padding:0;display:block}
  .hz-stick{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))}
  .hz-pic{order:2;position:relative;inset:auto;margin:12px 0 18px}
  .hz-ph{position:static;width:100%;height:auto}
  .hz-night,.hz-cover{display:none}
  .hz .hero-title{order:1}.hz .hero-meta{order:3}
  .dia .seg{border-radius:22px}
}

/* 01 · Contexte */
.ctx{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(80px,10vw,160px)}
.ctx .txt{margin-bottom:clamp(64px,8vw,130px)}
.wide img{width:100%}

/* 02 · Système */
.sys{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,180px);background:#fff}
.sys-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(40px,5vw,96px);align-items:start}
@media (max-width:1180px){.sys-grid{grid-template-columns:1fr}}
.spec-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:38px 0 14px}
.spec-k:first-child{margin-top:0}
.spec-t{font-family:var(--bp);font-weight:300;font-size:clamp(40px,4.6vw,78px);line-height:1;letter-spacing:-.035em;color:#0b0c0e}
.spec-t span{color:var(--blue)}
.spec-m{font-family:var(--jb);font-size:13px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:#2a2c31}
.spec-m i{width:6px;height:6px;background:#04809f}
.code{font-family:var(--jb);color:var(--blue)}
.pal{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.pal li{width:104px}
.pal i{display:block;height:54px;background:var(--c);box-shadow:0 0 0 1px rgba(18,19,20,.1) inset}
.pal span{display:block;margin-top:6px;font-size:11px!important;color:var(--muted)}
.spec .note{margin-top:30px;max-width:var(--measure)}
.panel{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#102c5f 0%,#3a5aa8 52%,#aabced 100%);color:#fff}
.panel::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 75% 95%,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.pl{position:absolute;background-repeat:repeat;opacity:.55}
.pl-h{left:0;right:0;top:var(--y);height:1px;background-image:linear-gradient(90deg,#fff 0 3px,transparent 3px 7px);background-size:7px 1px;transform-origin:0 50%}
.pl-v{top:0;bottom:0;left:var(--x);width:1px;background-image:linear-gradient(#fff 0 3px,transparent 3px 7px);background-size:1px 7px;transform-origin:50% 0}
.px{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.pk,.pf{position:absolute;font-family:var(--jb)!important;font-size:clamp(10px,.75vw,12px)!important;letter-spacing:.2em;text-transform:uppercase}
.pk{left:3.4%;top:5%;display:flex;align-items:center;gap:8px}.pk::before{content:"";width:5px;height:5px;background:#00babc}
.pf{left:3.4%;bottom:5%;opacity:.7}
.sys-side>.note{margin:12px 0 28px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo img{width:100%;box-shadow:0 0 0 1px rgba(18,19,20,.08)}
.sys-side>p:last-child{margin-top:28px;max-width:var(--measure)}
@media (max-width:640px){.duo{grid-template-columns:1fr}}

/* 03 · Ouvertures */
.ops{padding-top:clamp(100px,12vw,200px)}

/* 04 · Schémas */
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
.dia{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,180px);background:#fff}
.dia .seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:99px;box-shadow:0 0 0 1px var(--line) inset;margin-bottom:18px}
.dia .seg button{background:none;border:0;border-radius:99px;padding:9px 16px;min-height:40px;cursor:pointer;color:var(--muted);font:400 12px/1.2 var(--mono);transition:background .3s,color .3s}
.dia .seg button[aria-selected=true]{background:var(--ink);color:#fff}
.diav{position:relative;aspect-ratio:16/9;background:#fff;box-shadow:0 0 0 1px var(--line)}
.diav>.dia-b{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none}
.dia-l{position:absolute;display:block;background-repeat:no-repeat}
.dia-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dia-txt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:28px}
.dia-txt>*{grid-column:3/13;max-width:var(--measure)}
.dia-txt>*+*{margin-top:14px}
@media (max-width:1180px){.dia-txt>*{grid-column:1/13}}

/* 05 · Gabarit @campus */
.cmp{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,180px)}
.cmp .txt{margin-bottom:clamp(48px,6vw,96px)}
.cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,24px)}
.cmp-grid figure{position:relative}
.cmp-grid img{width:100%}
.tag{position:absolute;left:10px;top:10px;z-index:1;font-size:10.5px!important;padding:5px 9px;border-radius:99px;background:rgba(7,9,11,.78);color:var(--stage-ink);box-shadow:0 0 0 1px var(--stage-line) inset}
@media (max-width:1000px){.cmp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cmp-grid{grid-template-columns:1fr}}

/* 05 bis · Démonstration du gabarit */
.cz-wrap{margin-bottom:clamp(56px,7vw,110px)}
.cz-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}
.cz-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:99px;box-shadow:0 0 0 1px var(--stage-line) inset}
.cz-seg button{background:none;border:0;border-radius:99px;padding:9px 16px;min-height:40px;cursor:pointer;color:var(--stage-muted);font-size:12px!important;transition:background .3s,color .3s}
.cz-seg button[aria-pressed=true]{background:var(--stage-ink);color:var(--stage)}
.cz-chip{font-size:11px!important;padding:6px 11px;border-radius:99px;color:#cdd8f5;box-shadow:0 0 0 1px rgba(169,189,235,.45) inset}
.cz{position:relative;aspect-ratio:16/9;background:#fff;overflow:hidden;container-type:inline-size}
.cz>img{position:absolute;inset:0;width:100%;height:100%}
.cz-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cz-veil{position:absolute;left:46.6%;top:13.2%;width:48.2%;height:73.6%;border-radius:1.1cqi;background:rgba(18,48,102,.9);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.cz.demo .cz-veil{opacity:1}
.cz-zones{position:absolute;inset:0;pointer-events:none}
.zn{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:1.5px dashed #173d7a;border-radius:6px;background:rgba(23,61,122,.06);opacity:0}
.zn b{position:absolute;left:-1.5px;bottom:calc(100% + 6px);white-space:nowrap;font-weight:400;font-size:clamp(9px,1.05cqi,12px)!important;letter-spacing:.04em;padding:4px 8px;border-radius:99px;background:#173d7a;color:#fff}
.zn-name b{bottom:auto;top:calc(100% + 6px)}
.zn-fix{border-style:solid;border-color:rgba(18,19,20,.28);background:none}
.zn-fix b{background:#e9eaee;color:#121314}
.cz-cap{margin-top:16px;max-width:var(--measure);min-height:3.1em}
@media (max-width:700px){.zn b{bottom:auto;top:4px;left:4px}.zn-fix b{display:none}}

/* 06 · Sélection */
.sel{padding-top:clamp(100px,12vw,200px)}
.sel-grid{row-gap:clamp(28px,3vw,48px)}

/* 07 · Fin */
.fin{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,180px)}

/* Visionneuse : pages simples en 16:9 */
.book-sp{width:min(100%,calc((100svh - 160px) * 16 / 9));aspect-ratio:16/9}
.book-sp img{width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){.replay{display:none!important}}

/* Ouvertures V1.1 : chaque page en deux plans, le titre (moitié gauche) et la photographie (moitié droite) */
.opg{position:absolute;inset:0;opacity:0}
.opg .L{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 50% 0 0)}
.opg .R{position:absolute;left:50%;top:0;width:50%;height:100%;overflow:hidden}
.opg .R img{position:absolute;left:-100%;top:0;width:200%;height:100%;max-width:none;transform-origin:75% 50%}

/* V1.2 · onglets sur une ligne au téléphone (défilement horizontal plutôt qu'un retour à la ligne) */
@media (max-width:600px){
  .dia .seg,.cz-seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;border-radius:99px}
  .dia .seg::-webkit-scrollbar,.cz-seg::-webkit-scrollbar{display:none}
  .dia .seg button,.cz-seg button{flex:none;white-space:nowrap}
}
/* V1.2 · pause entre deux schémas : un trait se remplit sous l'onglet actif */
.dia .seg button{position:relative}
.dia .seg button i{position:absolute;left:16px;right:16px;bottom:6px;height:1px;background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:0 50%}