/* CINEMA.CSS — interface refaite pour films.html et livre.html (style.css reste intact pour les autres pages) */
@font-face{font-family:"JJ Cinema";src:url("fonts/JJ-Cinema.woff") format("woff"),url("fonts/JJ-Cinema.ttf") format("truetype");font-display:swap}
:root{--bg:#151312;--bg2:#1d1a18;--ink:#ece7dd;--mute:#9a9388;--red:#a31d1d;--red-hi:#d23a2e;--line:rgba(236,231,221,.16);
--film:"JJ Cinema","Bebas Neue",Impact,sans-serif;--serif:"Fraunces",Georgia,serif;--body:"DM Sans",system-ui,sans-serif;
--pad:clamp(20px,4vw,64px);--ease:cubic-bezier(.22,.68,0,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ol,dl,dd{margin:0}ol{padding:0;list-style:none}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}::selection{background:var(--red);color:#fff}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:6px}.skip:focus{top:12px}

/* En-tête */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 var(--pad);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.top.on{background:rgba(21,19,18,.88);backdrop-filter:blur(12px);border-color:var(--line)}
.brand svg{width:38px;height:38px;fill:currentColor;transition:transform .8s var(--ease)}.brand:hover svg{transform:rotate(60deg)}
.nav{display:flex;gap:clamp(18px,3vw,44px)}
.nav a{position:relative;padding:8px 0;font-size:14px;color:var(--mute);transition:color .25s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red-hi)}
.burger{display:none;background:none;border:0;padding:10px;font-size:14px}
@media(max-width:760px){.burger{display:block}
.nav{position:fixed;inset:68px 0 auto;flex-direction:column;gap:0;padding:8px var(--pad) 20px;background:var(--bg);border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .45s var(--ease)}
.nav.open{transform:none}.nav a{padding:14px 0;font-size:20px;border-bottom:1px solid var(--line)}}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1px solid var(--ink);border-radius:4px;background:none;font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}.btn.red{background:var(--red);border-color:var(--red);color:#fff}.btn.red:hover{background:var(--red-hi);border-color:var(--red-hi)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}

/* FILMS — héros */
.stage{position:relative;display:flex;align-items:flex-end;min-height:92svh;padding:130px var(--pad) 56px;overflow:hidden;isolation:isolate}
.stage>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.1)}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 4%,rgba(21,19,18,.5) 45%,rgba(21,19,18,.75))}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage h1{font:400 clamp(88px,19vw,300px)/.85 var(--film);letter-spacing:.02em;margin-left:-.04em}
.stage-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;width:100%}
.stage-info{max-width:380px}.stage-info small{display:block;color:var(--mute);margin-bottom:6px;font-size:14px}
.stage-info b{display:block;font:400 clamp(28px,3.4vw,44px)/1.05 var(--film);letter-spacing:.03em;margin-bottom:18px}

/* FILMS — pellicule */
.reel{padding:clamp(56px,8vw,110px) var(--pad)}
.reel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:34px}
.reel-head h2{font:400 clamp(40px,6vw,84px)/1 var(--film);letter-spacing:.03em}.reel-head p{color:var(--mute);max-width:420px}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.frame{display:block;width:100%;padding:0;text-align:left;background:#0c0b0a;border:0;border-radius:3px;overflow:hidden;transition:transform .4s var(--ease)}
.frame:hover{transform:translateY(-6px)}
.holes{height:16px;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--bg) 10px 24px,transparent 24px 34px);background-size:34px 8px;background-repeat:repeat-x;background-position:6px center;opacity:.9}
.shot{position:relative;aspect-ratio:16/9;margin:0 14px;overflow:hidden;background:var(--g,#222)}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05);transition:filter .5s,transform .8s var(--ease)}
.frame:hover .shot img{filter:none;transform:scale(1.05)}
.shot i{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;transform:scale(.6);opacity:0;transition:.4s var(--ease)}
.frame:hover .shot i,.frame:focus-visible .shot i{transform:none;opacity:1}
.cap{display:flex;gap:14px;align-items:baseline;padding:12px 16px 4px}
.cap span{color:var(--red-hi);font:400 22px/1 var(--film);letter-spacing:.05em}.cap h3{font:600 16px/1.3 var(--body)}

/* Lecteur */
dialog{width:min(1100px,94vw);padding:0;border:0;background:#000;color:var(--ink);border-radius:6px;overflow:visible}
dialog::backdrop{background:rgba(8,7,6,.88)}
.ratio{aspect-ratio:16/9}.ratio iframe{width:100%;height:100%;border:0;display:block}
.x{position:absolute;right:0;top:-46px;background:none;border:0;font-size:15px;padding:8px}

/* LIVRE */
.book-hero{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:clamp(32px,7vw,110px);align-items:center;min-height:100svh;padding:120px var(--pad) 70px;background:radial-gradient(ellipse at 22% 45%,rgba(163,29,29,.28),transparent 60%)}
.volume{perspective:1400px;display:grid;place-items:center}
.cover{position:relative;width:min(100%,340px);aspect-ratio:.68;border-radius:3px 8px 8px 3px;background:linear-gradient(150deg,#2a2321,#0f0d0c);box-shadow:-18px 30px 60px -10px rgba(0,0,0,.7),inset 7px 0 0 rgba(255,255,255,.07);transform:rotateY(-24deg) rotateX(3deg);transition:transform 1s var(--ease);display:grid;align-content:space-between;padding:30px 26px;overflow:hidden}
.volume:hover .cover{transform:rotateY(-6deg)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover img.is-failed{display:none}
.cover b{font:600 clamp(34px,4.4vw,52px)/1 var(--serif);color:var(--ink)}.cover small{color:var(--red-hi);font-size:14px}
.book-hero h1{font:600 clamp(52px,8.5vw,128px)/.95 var(--serif);letter-spacing:-.02em}
.byline{margin:20px 0 34px;color:var(--mute);font-size:18px}.byline b{color:var(--ink);font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* Ligne de bus : les sections sont les arrêts */
.route{position:relative;margin:0 var(--pad);padding:20px 0 40px 44px;border-left:3px solid var(--red)}
.stop{position:relative;padding:clamp(28px,5vw,64px) 0;max-width:720px}
.stop::before{content:"";position:absolute;left:-55px;top:clamp(38px,5.6vw,76px);width:19px;height:19px;border-radius:50%;background:var(--bg);border:4px solid var(--red-hi)}
.stop h2{font:600 clamp(32px,4.6vw,60px)/1.05 var(--serif);margin-bottom:18px}
.stop p{font:400 18px/1.75 var(--serif);color:#d6d0c5;max-width:62ch}
.stop p+p{margin-top:1em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin-top:6px}
.facts dt{color:var(--mute)}.facts dd{font-weight:600}

/* CTA + pied */
.end{padding:clamp(70px,10vw,140px) var(--pad);text-align:center;border-top:1px solid var(--line)}
.end h2{font:400 clamp(44px,7vw,100px)/1 var(--film);letter-spacing:.03em;margin-bottom:30px}.end .row{justify-content:center}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:44px;color:var(--mute);font-size:14px}.links a:hover{color:var(--ink)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:22px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.buybar{position:fixed;inset:auto 0 0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--pad);background:rgba(21,19,18,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.buybar.show{transform:none}.buybar b{font:600 18px var(--serif)}

@media(max-width:820px){.book-hero{grid-template-columns:1fr;min-height:0;text-align:left}.cover{transform:rotateY(-14deg)}}
@media(max-width:560px){.route{padding-left:32px}.stop::before{left:-43px}.facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.cover,.volume:hover .cover{transform:none}}