/* Édition 03 — scène signature. Les styles sont bornés aux nouveaux composants.
   Le sticky appartient à la scène, jamais au scroll de la page. Sans JS, une fiche fixe. */
:root{--nav-height:80px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.campaign-hero:after{background:linear-gradient(90deg,#090b09c9,#090b0928 76%),linear-gradient(0deg,#161714,transparent 47%)}
.campaign-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.campaign-scene-link{display:flex;align-items:center;gap:30px;font-size:10px;min-height:34px;border-bottom:1px solid #ffffff60}
.campaign-scene-link:hover{color:var(--yellow)}
.ticker{background:var(--ink);color:var(--yellow);border-block-color:#ffffff24;padding-block:22px}
.ticker-track{animation:none;will-change:transform}
.ticker span{font-size:clamp(30px,4.6vw,72px);letter-spacing:-.01em}
.cinema{--scene-paper:#161714;--scene-ink:#f1f0e9;--scene-light:1;--word-shift:4%;display:block;position:relative;min-height:0;background:var(--scene-paper);color:var(--scene-ink);scroll-margin-top:0}
.cinema-stage{height:calc(100svh - var(--nav-height));min-height:640px;max-height:1100px;position:relative;overflow:hidden;isolation:isolate;background:var(--scene-paper)}
.cinema:is(.cinema-active,.cinema-pending){height:340svh}
.cinema:is(.cinema-active,.cinema-pending) .cinema-stage{position:sticky;top:var(--nav-height)}
.cinema-stage:before{content:'';position:absolute;width:70%;height:90%;right:-12%;top:-10%;background:radial-gradient(ellipse,#8f78ab22,transparent 67%);opacity:var(--scene-light);z-index:-1;pointer-events:none}
.cinema-top{position:absolute;top:28px;left:var(--gutter);right:var(--gutter);z-index:5;display:flex;justify-content:space-between;gap:16px;align-items:center;font:9px monospace;letter-spacing:1px}
.cinema-top>a{font:11px var(--body);letter-spacing:0;border-bottom:1px solid #9998;padding:8px 0;min-height:36px}
.cinema-top>a>span{margin-left:22px}
.cinema-word{position:absolute;top:46%;left:34%;font:700 clamp(240px,36vw,630px)/.8 var(--display);letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px currentColor;-webkit-text-stroke-color:color-mix(in srgb,var(--scene-ink) 14%,transparent);transform:translate(var(--word-shift),-50%);user-select:none;pointer-events:none}
.cinema-render{position:absolute;inset:35px 0 90px;z-index:1;pointer-events:none}
.cinema-render canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
.cinema-active .cinema-render canvas{opacity:1}
.cinema-poster{position:absolute;width:36%;height:88%;right:10%;top:4%;object-fit:contain;transform:rotate(-5deg);opacity:1}
.cinema-active .cinema-poster{opacity:0;visibility:hidden}
.cinema-chapters{position:absolute;inset:0;z-index:3;pointer-events:none}
.cinema-chapter{position:absolute;left:var(--gutter);top:50%;width:36%;transform:translateY(calc(-50% + 25px));opacity:0;visibility:hidden;transition:opacity .35s ease,transform .55s var(--ease),visibility .35s}
.cinema-chapter.is-current{opacity:1;visibility:visible;transform:translateY(-50%)}
.cinema-chapter .eyebrow{color:var(--lilac);font:9px monospace;letter-spacing:1.6px;margin-bottom:26px}
.cinema-chapter h3{font:700 clamp(64px,7.4vw,120px)/.88 var(--display);letter-spacing:-.025em}
.cinema-chapter h3 em{font-style:normal;color:var(--lilac)}
.cinema-chapter p{font-size:12px;line-height:1.8;margin-top:25px;opacity:.7;max-width:270px}
.cinema-controls{position:absolute;right:var(--gutter);top:78px;display:flex;gap:5px;z-index:5;background:color-mix(in srgb,var(--scene-paper) 90%,transparent)}
.cinema-controls button{font:10px var(--body);padding:10px 12px;min-width:56px;min-height:44px;border:1px solid transparent;background:transparent;color:inherit}
.cinema-controls button[aria-pressed=true]{border-color:currentColor}
.cinema-controls button:hover:not(:disabled){background:#8882}
.cinema-controls button:disabled{visibility:hidden}
.cinema-controls #cinema-toggle{font-size:9px;opacity:.8;margin-left:10px}
.cinema-bottom{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);bottom:32px;border-top:1px solid #9995;padding-top:22px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px}
.cinema-product>span{font:8px monospace;letter-spacing:1.5px;opacity:.6}
.cinema-product strong{display:flex;gap:28px;align-items:center;font:700 25px/1.4 var(--display);margin-top:4px}
.cinema-product strong>span{font:11px var(--body)}
.cinema-product small{font-size:9px;opacity:.6}
.cinema .ninja-copy{display:block;padding:0;border:0;justify-self:center}
.cinema .ninja-copy .button{min-width:210px;min-height:54px;margin:0;font-size:11px}
.cinema-reading{justify-self:end;width:100%;max-width:230px}
.cinema-reading>span{display:flex;gap:5px;font:9px monospace}
.cinema-reading i{font-style:normal;opacity:.5;margin-left:auto;font-size:8px;letter-spacing:.7px}
.cinema-progress{height:1px;background:#9995;margin-top:16px;overflow:hidden}
.cinema-progress>span{height:100%;display:block;background:currentColor;transform:scaleX(0);transform-origin:left}
.cinema:not(.cinema-active) .cinema-reading{visibility:hidden}
.cinema[data-progress^="0.9"] .cinema-chapter .eyebrow,.cinema[data-progress="1.0000"] .cinema-chapter .eyebrow{color:#655183}
.cinema[data-progress^="0.9"] .cinema-chapter h3 em,.cinema[data-progress="1.0000"] .cinema-chapter h3 em{color:#77628e}
.collection{position:relative;z-index:2;background:var(--paper)}
.slogan-detail-visual{position:relative}.slogan-detail-visual img{transform:scale(1.04)}
.slogan-detail-visual>span{z-index:2}
@media(max-width:1100px){
  .cinema-chapter h3{font-size:clamp(60px,7.7vw,85px)}
  .cinema-chapter p{font-size:11px;max-width:230px}
  .cinema-reading i{display:none}.cinema-reading{max-width:105px}
  .cinema-bottom{grid-template-columns:1fr auto 110px}
  .cinema-controls{right:20px}
}
@media(max-width:800px){:root{--nav-height:72px}}
@media(max-width:959px){
  .cinema-stage{min-height:620px;max-height:950px}
  .cinema:is(.cinema-active,.cinema-pending){height:300svh}
  .cinema-top{top:17px;left:20px;right:20px;font-size:7px;letter-spacing:.8px}
  .cinema-top>a{font-size:9px}.cinema-top>a>span{margin-left:7px}
  .cinema-render{inset:53px 0 auto;height:49%}
  .cinema-poster{width:70%;height:100%;right:15%;top:0;transform:rotate(-4deg)}
  .cinema-word{font-size:44vw;top:32%;left:3%;-webkit-text-stroke-width:1px;transform:translate(var(--word-shift),-50%)}
  .cinema-chapter{top:auto;bottom:150px;left:24px;width:calc(100% - 48px);transform:translateY(15px);display:grid;grid-template-columns:1fr .9fr;align-items:end;gap:0 12px}
  .cinema-chapter.is-current{transform:none}
  .cinema-chapter .eyebrow{grid-column:1/-1;font-size:7px;margin-bottom:14px;letter-spacing:1.2px}
  .cinema-chapter h3{font-size:clamp(38px,10.5vw,66px);line-height:.90;letter-spacing:-.02em}
  .cinema-chapter p{font-size:10px;line-height:1.7;margin:0 0 2px;max-width:180px}
  .cinema-controls{top:62px;right:16px;flex-direction:row;gap:0;align-items:center}
  .cinema-controls button{font-size:9px;min-width:44px;min-height:44px;padding:7px 9px}
  .cinema-controls #cinema-toggle{margin-top:0;margin-left:5px;font-size:9px}
  .cinema-bottom{left:20px;right:20px;bottom:22px;padding-top:14px;gap:12px;grid-template-columns:1fr auto}
  .cinema-product>span{font-size:7px}.cinema-product strong{font-size:22px;display:block;line-height:1.1;margin:6px 0}
  .cinema-product strong>span{display:block;font-size:11px;margin-top:7px}
  .cinema-product small{font-size:7px;display:block;max-width:120px;line-height:1.5}
  .cinema .ninja-copy .button{min-width:155px;width:auto;min-height:48px;font-size:10px;padding:12px 16px;gap:18px}
  .cinema-reading{display:none}
}
@media(max-width:600px){:root{--nav-height:66px}.campaign-actions{width:100%}.campaign-scene-link{min-height:44px}}
@media(max-width:370px){.cinema-chapter h3{font-size:38px}.cinema-chapter p{font-size:9px}.cinema .ninja-copy .button{min-width:137px;padding-inline:12px;gap:12px}.cinema-top{font-size:6px}}
@media(max-height:740px) and (min-width:960px){.cinema-stage{min-height:560px}.cinema-chapter h3{font-size:70px}.cinema-chapter p{font-size:11px;margin-top:14px}.cinema-chapter .eyebrow{margin-bottom:14px}}
@media(max-height:710px) and (max-width:959px){.cinema-stage{height:680px;min-height:0}.cinema-active .cinema-stage{height:calc(100svh - var(--nav-height))}.cinema-active .cinema-render{height:43%;top:42px}.cinema-active .cinema-chapter{bottom:139px}.cinema-active .cinema-chapter h3{font-size:34px}.cinema-active .cinema-controls{top:45px}.cinema-active .cinema-top{top:8px}}
/* Téléphone horizontal : conserver la 3D avec une composition latérale compacte. */
@media(max-height:540px) and (min-width:620px) and (max-width:959px){
  :root{--nav-height:60px}.site-header{height:60px}
  .cinema .cinema-stage{height:calc(100svh - var(--nav-height));min-height:290px}
  .cinema .cinema-top{top:7px;font-size:6px}.cinema-top>a{font-size:8px;min-height:30px;padding-block:5px}
  .cinema .cinema-render{inset:33px 95px 67px 28%;height:auto}
  .cinema .cinema-poster{height:100%;width:100%;inset:0}
  .cinema .cinema-word{top:44%;left:30%;font-size:27vw}
  .cinema .cinema-chapter,.cinema .cinema-chapter.is-current{top:66px;bottom:auto;left:24px;width:29%;display:block;transform:none}
  .cinema .cinema-chapter .eyebrow{font-size:6px;margin-bottom:10px}
  .cinema .cinema-chapter h3{font-size:34px}
  .cinema .cinema-chapter p{display:none}
  .cinema .cinema-controls{top:62px;right:16px;flex-direction:column}
  .cinema .cinema-controls #cinema-toggle{margin-left:0}
  .cinema .cinema-bottom{bottom:10px;padding-top:9px}
  .cinema-product strong{display:flex;gap:14px;font-size:20px;margin:3px 0}
  .cinema-product strong>span{margin:0;font-size:10px}
  .cinema-product small{max-width:none}
  .cinema .ninja-copy .button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .cinema-active{height:auto}.cinema-active .cinema-stage{position:relative;top:auto}
  .cinema-render canvas{display:none}.cinema .cinema-poster{opacity:1;visibility:visible}
  .cinema-chapter{transition:none}.ticker-track{transform:none!important;will-change:auto}
  .cinema-word{transform:translate(0,-50%)}
}