/* Cyclo · studio photo fictif, Lyon. Une seule famille : Mona Sans (variable, wdth 75–125, wght 200–900). */
@font-face{font-family:"Mona";src:url(fonts/mona-sans.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}

:root{
  --paper:#f3f2ef;      /* blanc de cyclo */
  --set:#d9d8d4;        /* gris plateau */
  --ink:#0d0d0d;        /* noir */
  --mute:#57564f;       /* texte second, AA sur le blanc et sur le gris */
  --line:#c9c7c1;
  --act:#1f3bff;        /* bleu de gélatine : boutons d'action seulement */
  --act-d:#1730d6;
  --hh:60px;
  --g:clamp(16px,3.2vw,44px);
  --ease:cubic-bezier(.22,.8,.2,1);
  --glide:cubic-bezier(.65,0,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--hh) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Mona",system-ui,sans-serif;font-size:17px;line-height:1.5;font-stretch:100%;font-weight:420;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
sup{font-size:.62em;line-height:0;vertical-align:.5em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* étiquettes : étroites, capitales espacées */
.kick,.fin-k,.fin-h,.sh-k,legend,.fd label,.nb label,.cv-l,figcaption,.count,.f-hint,.plan-c,.specs dt{font-stretch:75%;font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:12px;line-height:1.35}

/* boutons d'action : la seule couleur */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--act);color:#fff;border:0;border-radius:2px;font:inherit;font-stretch:112%;font-weight:700;font-size:15px;letter-spacing:.01em;padding:15px 22px;text-decoration:none;cursor:pointer;transition:background-color .2s,transform .15s var(--ease)}
.btn:hover{background:var(--act-d)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-s{padding:10px 16px;font-size:14px}
.btn-l{padding:18px 28px;font-size:17px}

/* EN-TÊTE */
.hd{position:sticky;top:0;z-index:50;height:var(--hh);display:flex;align-items:center;gap:28px;padding:0 var(--g);background:var(--paper)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .3s}
.hd.sc::after{opacity:1}
.logo{font-stretch:125%;font-weight:900;font-size:22px;letter-spacing:-.02em;text-decoration:none;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.hd.sc .logo,.logo:focus-visible{opacity:1;transform:none}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-stretch:88%;font-weight:560;font-size:15px;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd-r{display:flex;align-items:center;gap:14px}
.snd{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--ink);border-radius:2px;color:var(--ink);font:inherit;font-stretch:80%;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:8px 12px;cursor:pointer}
.snd-d{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;transition:background-color .2s}
.snd[aria-pressed="true"] .snd-d{background:currentColor}

/* ============ LE FLASH ============ */
.flash{--F:min(21.6vw,30svh);--H:calc(100svh - var(--hh) - var(--F)*.5 - 34px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:calc(var(--F)*.86) 1fr;column-gap:clamp(24px,3vw,48px);padding:0 var(--g) 34px;min-height:calc(100svh - var(--hh));background:linear-gradient(180deg,#eceae5 0%,#f1f0ec 38%,#f6f5f2 70%,#efeee9 100%);overflow:clip}
.mast{grid-column:1/-1;grid-row:1;position:relative;z-index:0;line-height:1;text-align:center}
.mast-w{display:block;font-stretch:125%;font-weight:900;font-size:var(--F);line-height:.8;letter-spacing:-.035em;text-transform:uppercase;padding-top:calc(var(--F)*.06);white-space:nowrap}
.stage{grid-column:2;grid-row:1/3;align-self:end;position:relative;z-index:2;width:calc(var(--H)*2/3);height:var(--H);cursor:pointer;outline:none}
.stage:focus-visible::after{content:"";position:absolute;inset:-8px;border:2px solid var(--ink)}
.ph{position:absolute;inset:0;background:#fff;box-shadow:0 40px 60px -42px rgba(13,13,13,.45),0 2px 3px rgba(13,13,13,.08)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.ph img.on{opacity:1}
.veil{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.f-l{grid-column:1;grid-row:2;align-self:end;display:grid;gap:18px;max-width:390px;padding-bottom:6px}
.lede{font-size:clamp(19px,1.55vw,23px);line-height:1.32;font-weight:480;letter-spacing:-.005em}
.f-hint{color:var(--mute)}
.f-r{grid-column:3;grid-row:2;align-self:end;display:grid;gap:16px;justify-items:start;padding-bottom:6px;min-width:0}
.plan{margin:0;width:100%;max-width:400px;background:#121211;color:#e9e8e4;padding:12px 12px 10px;border-radius:2px}
.plan-svg{display:block;width:100%;height:auto;max-height:calc(var(--H) - 230px)}
.plan-c{display:flex;justify-content:space-between;gap:12px;color:#b9b8b2;margin-top:6px;font-size:11px}
.setup{color:#fff}
.legend{display:none}
.cyc{fill:none;stroke:#3a3936;stroke-width:12;stroke-linecap:round}
.t-cyc,.t-cam,.lb text{font-family:"Mona",sans-serif;font-stretch:78%;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:#a8a7a1}
.lb .pw{fill:#fff;font-weight:500;font-size:11px;letter-spacing:.02em;text-transform:none;font-stretch:90%}
.lb .nm{fill:#d9d8d4}
.model ellipse,.model circle{fill:#f3f2ef}
.model circle{fill:#d9d8d4}
.cam rect{fill:#8d8c86}
.cam .axis{stroke:#5b5a56;stroke-dasharray:3 4;stroke-width:1}
.cam,.lt,.lb,.bm{transition:transform .95s var(--glide),opacity .6s}
.lt .head{fill:#f3f2ef}
.lt .back{fill:#7d7c76}
.lt .bm{fill:url(#beamG)}
.lt .refl{fill:none;stroke:#f3f2ef;stroke-width:3;stroke-linecap:round}
.lt.off{opacity:.32}
.lt.off .bm{opacity:0}
.shot{display:flex;flex-wrap:wrap;gap:0 14px;font-stretch:112%;font-weight:640;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em;line-height:1.2}
.shot .c{display:inline-block;overflow:hidden;position:relative;padding:2px 0}
.shot .c span{display:inline-block}
.shot .c:not(:last-child)::after{content:"·";margin-left:14px;color:var(--mute)}
.f-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.trig{font-size:17px;padding:18px 26px 18px 22px;font-stretch:118%}
.ready{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22);transition:opacity .25s}
.trig.chg .ready{opacity:.25}
.count{color:var(--mute)}
.count span{color:var(--ink)}
.flashlayer{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20}

/* ============ LE PLATEAU (double pages) ============ */
.plateau{padding:clamp(80px,10vw,140px) var(--g) clamp(40px,6vw,90px);overflow:clip}
.spread{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px)}
.spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.spread+.spread{margin-top:clamp(70px,9vw,140px)}
.pg{position:relative;min-width:0}
.sec-k{margin-bottom:22px}
.pic{position:relative;margin:0}
.pic>img,.cv-ph>img{width:100%;height:auto;aspect-ratio:var(--ar,auto);object-fit:cover;background:var(--set)}
.pic figcaption{margin-top:12px;max-width:44ch;color:var(--mute);text-transform:none;letter-spacing:.01em;font-size:13px;font-stretch:84%;font-weight:500}
.pl-txt{font-size:clamp(22px,2.15vw,32px);line-height:1.28;font-weight:470;letter-spacing:-.012em;max-width:22em;margin:clamp(30px,5vw,60px) 0 clamp(40px,6vw,90px)}
.pic-sol{width:62%;margin-left:auto}
.pic-vis{width:58%}
.pl-day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:end;margin-top:clamp(36px,4vw,56px)}
.pl-day p{font-size:17px;line-height:1.5;max-width:30ch}
.pic-vis{width:100%}
.pic-cyc{margin-top:clamp(60px,8vw,120px)}
.spread-b .pg-l{display:flex;flex-direction:column}
/* les grandes lignes : noires sur le papier, claires sur les photos (deux copies alignées) */
.giant,.gcopy{position:absolute;left:0;white-space:nowrap;pointer-events:none;font-stretch:125%;font-weight:860;text-transform:uppercase;letter-spacing:-.04em;line-height:.8;will-change:transform}
.giant::before,.gcopy::before{content:attr(data-t)}
.giant{top:var(--gy,56%);z-index:1;color:var(--ink);font-size:clamp(88px,13.5vw,230px)}
.gcopy{top:0;z-index:3;color:var(--paper);text-shadow:0 0 34px rgba(13,13,13,.16);font-size:clamp(88px,13.5vw,230px)}
/* la photo couvre la copie noire ; la copie claire vit dans la photo */
.pic{z-index:2}
.gwrap{position:relative;display:block;overflow:hidden}

/* ============ SÉRIES ============ */
.series{padding:clamp(70px,9vw,130px) var(--g) clamp(70px,9vw,130px);background:var(--set)}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:24px clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(40px,5vw,70px)}
.h2{font-stretch:120%;font-weight:780;font-size:clamp(36px,4.6vw,72px);line-height:.98;letter-spacing:-.03em}
.sec-p{color:var(--mute);max-width:34ch;font-size:17px}
.sec-h .kick{align-self:start;padding-top:10px}
.covers{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px);row-gap:clamp(50px,6vw,90px)}
.cover{position:relative;overflow:hidden;color:var(--ink);container-type:inline-size}
.cv-a{grid-column:1/7}
.cv-b{grid-column:8/13;margin-top:clamp(60px,9vw,150px)}
.cv-c{grid-column:2/7}
.cv-d{grid-column:7/13;margin-top:clamp(-120px,-6vw,-40px)}
.cv-ph{--ar:4/5;overflow:hidden;position:relative}
.cv-t{z-index:4;position:absolute;left:0;right:0;top:0;padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px) 0;color:var(--ink);font-stretch:125%;font-weight:880;font-size:var(--ts,22cqw);line-height:.84;letter-spacing:-.045em;text-transform:uppercase;pointer-events:none}
.cover .cv-t{color:var(--ink)}
.cover[style*="f3f2ef"] .cv-t{color:var(--paper)}
.cv-l{z-index:4;position:absolute;left:clamp(16px,1.8vw,26px);bottom:clamp(14px,1.6vw,22px);right:40%;color:var(--paper);pointer-events:none}
.cover[style*="0d0d0d"] .cv-l{color:var(--ink)}
.cv-b{--ts:13.4cqw}.cv-c{--ts:15.5cqw}.cv-d{--ts:18cqw}
.cv-more{z-index:4;position:absolute;left:0;right:0;bottom:0;padding:16px clamp(16px,1.8vw,26px);background:var(--paper);display:flex;justify-content:flex-end;transform:translateY(101%);transition:transform .5s var(--ease);pointer-events:none}
.cv-more span{font-stretch:112%;font-weight:700;font-size:15px}
.cover:hover .cv-more,.cover:focus-within .cv-more{transform:none}
.js .cv-t,.js .cv-l{opacity:0;transition:opacity .7s var(--ease) .45s}
.js .cv-ph.seen~.cv-t,.js .cv-ph.seen~.cv-l{opacity:1}
.cv-btn{position:absolute;inset:0;width:100%;background:none;border:0;cursor:pointer;z-index:6}
.cv-btn:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}

/* révélation des photos : un rideau en transform, la photo ne bouge pas */
.js .pic,.js .cv-ph{isolation:isolate}
.js .rvp::after{content:"";position:absolute;inset:0;background:var(--rc,var(--paper));transform-origin:50% 0;transition:transform 1.05s var(--glide);z-index:2;pointer-events:none}
.js .rvp.seen::after{transform:scaleY(0)}
.series .rvp{--rc:var(--set)}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.seen{opacity:1;transform:none}

/* ============ MATÉRIEL ============ */
.mat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:clamp(80px,10vw,140px) var(--g);align-items:start}
.mat-a{display:grid;gap:18px}
.mat-a .pic{margin-top:18px}
.mini figcaption{font-size:12px}
.specs{margin:0;border-top:1.5px solid var(--ink)}
.specs div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:16px;padding:15px 0 14px;border-bottom:1px solid var(--line)}
.specs dt{padding-top:4px}
.specs dd{margin:0;font-size:17px;line-height:1.4}
.mat-b{display:grid;gap:28px;padding-top:clamp(0px,4vw,60px)}

/* ============ RÉSERVER ============ */
.book{background:var(--set);padding:clamp(80px,10vw,140px) var(--g) clamp(80px,9vw,130px)}
.bk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"f s" "b s";column-gap:clamp(30px,6vw,110px);align-items:start;max-width:1240px;margin:0 auto}
.bk-f{grid-area:f;display:grid;gap:30px}
.bk-s,.bk-ok{grid-area:b;margin-top:34px}
.sheet-wrap{grid-area:s;position:sticky;top:calc(var(--hh) + 24px);container-type:inline-size}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:12px}
.ch{display:flex;flex-wrap:wrap;gap:8px}
.ch legend{width:100%}
.ch label{position:relative;cursor:pointer}
.ch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ch label>span{display:inline-block;padding:11px 16px;border:1px solid var(--ink);border-radius:2px;font-stretch:96%;font-weight:540;font-size:15px;transition:background-color .2s,color .2s}
.ch input:checked+span{background:var(--ink);color:var(--paper)}
.ch input[type=checkbox]+span::before{content:"";display:inline-block;width:9px;height:9px;border:1.5px solid currentColor;margin-right:9px;vertical-align:1px;transition:background-color .2s}
.ch input[type=checkbox]:checked+span::before{background:currentColor}
.ch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.nb{display:inline-flex;align-items:center;gap:10px;margin-left:6px}
.nb input{width:76px}
.fl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 26px}
.fd{display:grid;gap:8px}
.fd:last-child{grid-column:1/-1}
input[type=text],input[type=email],input[type=date],input[type=number]{font:inherit;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:8px 0;width:100%;min-height:44px;transition:border-color .2s}
input:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.err{color:#8a1d12;font-size:13px;min-height:1.2em}
.bk-n{margin-top:14px;color:var(--mute);font-size:14px;max-width:40ch}
.bk-ok{display:grid;gap:14px;max-width:46ch;outline:none}
.ok-t{font-stretch:120%;font-weight:780;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.03em}
.lnk{justify-self:start;background:none;border:0;padding:6px 0;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--ink)}
.js .bk-ok:not([hidden]) .ok-t{animation:okin .8s var(--ease) both}
@keyframes okin{from{opacity:0;transform:translateY(14px)}}

/* la feuille : taille fixe (A, rapport racine de 2), tout en unités du conteneur */
.sheet{position:relative;width:100%;aspect-ratio:1/1.4142;background:#fff;color:var(--ink);padding:6.2cqw 6.8cqw;box-shadow:0 30px 50px -36px rgba(13,13,13,.5),0 1px 2px rgba(13,13,13,.1);display:flex;flex-direction:column;gap:3.6cqw;overflow:hidden;font-size:3cqw;line-height:1.35}
.sh-top{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:3cqw;border-bottom:.5cqw solid var(--ink);padding-bottom:2.4cqw}
.sh-brand{font-stretch:125%;font-weight:900;font-size:5.6cqw;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.sh-doc,.sh-ref{font-stretch:75%;font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:2.6cqw}
.sh-ref{color:var(--mute)}
.sh-k{display:block;font-size:2.4cqw;color:var(--mute);margin-bottom:.6cqw}
.sh-v{display:block;font-weight:540}
.sh-date .sh-v{font-stretch:118%;font-weight:760;font-size:6.6cqw;line-height:1.02;letter-spacing:-.02em}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw 4cqw}
.sh-time{list-style:none;margin:0;padding:2.2cqw 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.sh-time li b{display:block;font-stretch:110%;font-weight:720;font-size:3.6cqw}
.sh-time li span{font-size:2.4cqw;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-stretch:80%;font-weight:600}
.sh-crew{width:100%;border-collapse:collapse}
.sh-crew th,.sh-crew td{text-align:left;padding:1.3cqw 0;border-bottom:1px solid #e6e5e1;font-weight:500;vertical-align:baseline}
.sh-crew thead th{font-stretch:75%;font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:2.4cqw;color:var(--mute);border-bottom:1px solid var(--ink)}
.sh-crew .r{text-align:right}
.sh-crew tbody th{font-weight:620}
.sh-crew tbody td:nth-child(2){color:var(--mute)}
.sh-crew tbody tr.new{animation:rowin .45s var(--ease) both}
@keyframes rowin{from{opacity:0;transform:translateX(-6px)}}
.sh-crew tfoot th,.sh-crew tfoot td{border:0;padding-top:2.4cqw;font-stretch:118%;font-weight:800;font-size:4.8cqw}
.sh-foot{margin-top:auto;font-size:2.4cqw;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-stretch:80%;font-weight:600}
.stamp{position:absolute;right:7cqw;bottom:13cqw;border:.7cqw solid var(--ink);padding:1.6cqw 3cqw;font-stretch:125%;font-weight:900;font-size:5.4cqw;text-transform:uppercase;letter-spacing:-.01em;transform:rotate(-7deg) scale(1.25);opacity:0;transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1);background:rgba(255,255,255,.86)}
.sheet.ok .stamp{opacity:1;transform:rotate(-7deg)}
.sh-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.tick{display:inline-block}

/* ============ FIN ============ */
.fin{position:relative;background:#0d0d0d;color:#e9e8e4;overflow:hidden}
.fin-in{padding:clamp(80px,10vw,140px) var(--g) 28px;display:grid;gap:clamp(50px,6vw,80px)}
.fin-a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px clamp(30px,5vw,80px);align-items:end}
.fin-k{color:#a3a29c;grid-column:1/-1}
.fin-t{font-stretch:118%;font-weight:700;font-size:clamp(30px,3.8vw,58px);line-height:1.02;letter-spacing:-.025em;max-width:17em;text-wrap:balance}
.lamps{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-stretch:84%;font-weight:520;font-size:15px;color:#c9c8c2}
.lamps li{display:flex;align-items:center;gap:12px;transition:color .6s}
.lamp{width:12px;height:12px;border-radius:50%;background:#fff3c9;box-shadow:0 0 0 4px rgba(255,243,201,.16),0 0 18px 4px rgba(255,236,170,.32);transition:opacity .7s,box-shadow .7s}
.lamps li.out{color:#8e8d87}
.lamps li.out .lamp{opacity:.18}
.fin-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid #33322f;padding-top:26px}
.fin-b p{color:#d0cfc9;font-size:15px}
.fin-h{color:#a3a29c!important;margin-bottom:8px}
.fin-w{font-stretch:125%;font-weight:200;font-size:min(23vw,360px);line-height:.78;letter-spacing:-.04em;text-transform:uppercase;color:#262523;text-align:center;margin:0 calc(var(--g) * -.2);user-select:none}
.fin-w::before{content:attr(data-t)}
.fin-c{display:grid;gap:6px;color:#a3a29c;font-size:13px;border-top:1px solid #33322f;padding-top:18px}
.fin-m{color:#e9e8e4;font-stretch:80%;font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:12px;margin-top:6px}
.fin-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ============ VISIONNEUSE ============ */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:hidden}
.viewer::backdrop{background:var(--paper)}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:vwin .4s var(--ease)}
@keyframes vwin{from{opacity:0}}
.vw-top{display:flex;align-items:center;gap:20px;padding:14px var(--g);height:var(--hh)}
.vw-t{font-stretch:125%;font-weight:880;font-size:22px;text-transform:uppercase;letter-spacing:-.02em}
.vw-n{color:var(--mute);font-stretch:84%;font-weight:600;font-size:14px}
.vw-x{margin-left:auto;background:none;border:1px solid var(--ink);border-radius:2px;padding:9px 14px;font:inherit;font-stretch:84%;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;color:var(--ink)}
.vw-st{position:relative;margin:0 calc(var(--g) + 64px);touch-action:pan-y}
.vw-st img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s var(--ease)}
.vw-st img.on{opacity:1}
.vw-c{padding:14px var(--g) 18px;text-align:center;color:var(--mute);font-size:14px;min-height:52px}
.vw-a{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.vw-a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.vw-p{left:var(--g)}
.vw-nx{right:var(--g)}

/* ============ TÉLÉPHONE ============ */
@media (max-width:1080px){
  .flash{--F:21.6vw}
  .f-l{max-width:300px}
}
.bk-bar{display:none}
@media (max-width:767px){
  html{scroll-padding-bottom:96px}
  .bk-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:var(--paper);padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));visibility:hidden;transform:translateY(100%);transition:transform .35s var(--ease),visibility 0s .35s}
  .bk-bar.on{visibility:visible;transform:none;transition:transform .35s var(--ease)}
  .bk-bt{margin:0;display:grid;gap:2px;min-width:0}
  .bk-bt b{font-stretch:118%;font-weight:800;font-size:22px;line-height:1.1}
  .bk-bt span{font-size:12px;line-height:1.3;color:#cfcdc6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .bk-bar .btn{flex:none;min-height:44px;padding:12px 16px;font-size:14px}
}
@media (max-width:860px){
  :root{--hh:56px}
  .nav{display:none}
  .hd{gap:12px}
  .hd-r{margin-left:auto;gap:10px}
  .snd{padding:7px 10px}
  /* la scène tient dans l'écran : photo, puis plan (plus petit) et déclencheur côte à côte */
  .flash{--F:22.2vw;--H:min(47svh,108vw);display:flex;flex-direction:column;align-items:center;padding:0 var(--g) 28px;min-height:auto}
  .mast{width:100%}
  .stage{margin-top:calc(var(--F) * -.4);align-self:center}
  .f-r{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"p s" "p a" "l l";column-gap:14px;row-gap:10px;width:100%;margin-top:14px;align-items:start}
  .plan{grid-area:p;padding:7px 7px 6px}
  .plan-svg{max-height:none}
  .lb{display:none}
  .t-cyc,.t-cam{font-size:16px}
  .plan-c{font-size:9.5px;flex-direction:column;gap:2px;margin-top:4px}
  .plan-c span:first-child{display:none}
  .shot{grid-area:s;display:grid;gap:3px;font-size:17px}
  .shot .c:not(:last-child)::after{content:none}
  .f-act{grid-area:a;align-self:end;flex-direction:column;align-items:stretch;gap:8px}
  .trig{justify-content:center;padding:15px 12px;font-size:16px}
  .count{text-align:center}
  .legend{display:grid;gap:0;list-style:none;margin:6px 0 0;padding:0;font-size:11.5px;font-stretch:80%;font-weight:520;color:#b9b8b2}
  .legend li{display:flex;justify-content:space-between;gap:6px;border-top:1px solid #2c2b28;padding:3px 1px}
  .legend b{color:#fff;font-weight:640}
  .legend li.off,.legend li.off b{color:#8e8d87;font-weight:500}
  .f-l{order:4;max-width:none;margin-top:30px;gap:12px}
  .f-hint{display:none}

  .spread{grid-template-columns:minmax(0,1fr);row-gap:0}
  .spread::before{display:none}
  .pic-sol{width:78%}
  .pl-txt{margin:34px 0 40px}
  .pl-day{grid-template-columns:minmax(0,1fr);gap:22px}
  .pic-cyc{margin-top:40px;width:86%;margin-left:auto}
  .giant,.gcopy{font-size:21vw}

  .sec-h{grid-template-columns:minmax(0,1fr);gap:14px}
  .sec-h .kick{padding-top:0}
  .covers{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:28px;column-gap:12px}
  .cv-a{grid-column:1/-1}
  .cv-b{grid-column:1/2;margin-top:0}
  .cv-c{grid-column:2/3;margin-top:44px}
  .cv-d{grid-column:1/-1;margin-top:0}
  .cv-b .cv-l,.cv-c .cv-l{display:none}
  .cv-more{transform:none;padding:10px 12px;background:transparent;justify-content:flex-start}
  .cv-more span{display:none}

  .mat{grid-template-columns:minmax(0,1fr);gap:34px}
  .mat-a .pic{display:none}
  .mat-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding-top:0}
  .specs div{grid-template-columns:7.2em minmax(0,1fr);gap:12px}
  .specs dd{font-size:16px}

  .bk{grid-template-columns:minmax(0,1fr);grid-template-areas:"f" "s" "b"}
  .sheet-wrap{position:relative;top:0;margin-top:36px}
  .fl{grid-template-columns:minmax(0,1fr)}
  .ch label>span{padding:10px 13px;font-size:14px}

  .fin-a{grid-template-columns:minmax(0,1fr)}
  .fin-b{grid-template-columns:1fr 1fr;gap:26px 18px}
  .fin-w{font-size:24vw}

  .vw-st{margin:0 var(--g)}
  .vw-a{top:auto;bottom:10px;margin-top:0;width:46px;height:46px}
  .vw-c{padding:14px 70px 22px}
}
@media (max-width:400px){
  .btn-s{padding:9px 12px;font-size:13px}
  .snd{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .js .rv{opacity:1;transform:none}
  .js .rvp::after{display:none}
}