/* intertitles sit on their own darkness so nothing bleeds through */
.inter::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(4,7,10,.92),rgba(4,7,10,.55) 70%,transparent);opacity:0;transition:opacity .8s}
.inter.on::before{opacity:1}
.inter .in{position:relative}

/* "Comprendre" — pauses the film and opens the act's note */
.why{position:fixed;z-index:6;right:clamp(16px,4vw,48px);bottom:max(calc(var(--bar) - 58px),64px);font:400 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);background:rgba(4,7,10,.6);border:1px solid rgba(242,235,221,.35);padding:11px 14px 11px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:border-color .3s,color .3s,opacity .5s}
.why:hover{border-color:var(--amber);color:var(--amber)}
.why:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
.why i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(240,160,64,.6);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(240,160,64,.6)}70%{box-shadow:0 0 0 9px rgba(240,160,64,0)}100%{box-shadow:0 0 0 0 rgba(240,160,64,0)}}
.why[hidden]{display:none!important}

.note{position:fixed;z-index:7;top:var(--bar);bottom:var(--bar);right:0;width:min(470px,100vw);background:rgba(3,5,8,.94);border-left:1px solid rgba(242,235,221,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateX(102%);transition:transform .6s cubic-bezier(.6,0,.2,1);display:flex;flex-direction:column}
.note.on{transform:none}
.note .body{overflow-y:auto;padding:26px clamp(18px,3vw,34px) 20px;flex:1;min-height:0}
.note small{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.note h3{margin:0 0 18px;font-family:var(--f-title);font-style:italic;font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.1;color:var(--bone);text-wrap:balance}
.note p{margin:0 0 13px;font-size:15px;line-height:1.6;color:#CFC8BA;max-width:60ch}
.note p b{color:var(--bone);font-weight:600}
.note code{font-family:var(--f-mono);font-size:.86em;color:var(--cyan)}
.note figure{margin:4px 0 20px;padding:14px 10px 8px;border:1px solid rgba(242,235,221,.12);background:rgba(242,235,221,.02)}
.note figure svg{display:block;width:100%;height:auto}
.note figcaption{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px;text-align:center}
.note .foot{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px clamp(18px,3vw,34px);border-top:1px solid rgba(242,235,221,.1)}
.note .foot span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.resume{font:400 11px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:#04070A;background:var(--bone);border:0;padding:13px 18px;cursor:pointer;transition:background .25s}
.resume:hover{background:var(--amber)}
.resume:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
.gloss{margin-top:6px;padding-top:12px;border-top:1px dashed rgba(242,235,221,.14)}
.gloss p{font-size:13.5px;color:var(--mute)}

/* schema vocabulary */
.s-t{font-family:var(--f-mono);font-size:11px;fill:var(--mute)}
.s-tb{font-family:var(--f-mono);font-size:11px;fill:var(--bone)}
.s-h{font-family:var(--f-title);font-style:italic;font-size:15px;fill:var(--bone)}
.s-box{fill:none;stroke:rgba(242,235,221,.35);stroke-width:1}
.s-ln{fill:none;stroke:rgba(242,235,221,.55);stroke-width:1.3}
.s-cy{fill:none;stroke:var(--cyan);stroke-width:1.5}
.s-am{fill:none;stroke:var(--amber);stroke-width:1.5}
.s-rd{fill:none;stroke:var(--red);stroke-width:1.5}
.s-dash{stroke-dasharray:4 4}
.s-w{fill:#F2ECE0}.s-g{fill:#707A86}.s-b{fill:#05080B;stroke:var(--cyan);stroke-width:1.6}
.s-fc{fill:var(--cyan)}.s-fa{fill:var(--amber)}.s-fr{fill:var(--red)}.s-fm{fill:rgba(127,138,147,.45)}.s-fd{fill:rgba(242,235,221,.06)}
.s-arw{fill:rgba(242,235,221,.55)}

@media (max-width:899px){
  .subs span{max-width:100%}
  .why{bottom:calc(var(--bar) + 8px);right:16px;padding:9px 11px;font-size:9.5px}
  .console{top:calc(var(--bar) + 8px);bottom:auto}
  .note{top:auto;bottom:0;height:min(78vh,640px);width:100%;border-left:0;border-top:1px solid rgba(242,235,221,.14);transform:translateY(102%)}
  .note p{font-size:14.5px}
}