:root{--nuit:#0A1128;--marine:#121B3A;--acier:#26325C;--brume:#8F9BC4;--fog:#CBD3EC;--glacier:#EEF1FA;--elec:#6C8DFF;--r:14px;--sec:clamp(72px,10vw,128px);--maxw:1200px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font:400 18px/1.65 "Instrument Sans",system-ui,sans-serif;background:var(--nuit);color:var(--glacier);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--elec);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--elec);color:var(--nuit);padding:8px 14px;border-radius:8px;z-index:30}
.skip:focus{left:8px}
.wrap{width:min(var(--maxw),100% - 48px);margin-inline:auto}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.04}
h1{font-size:clamp(46px,7vw,104px)}
h2{font-size:clamp(34px,4.6vw,60px)}
h3{font-size:24px;letter-spacing:-.015em}
.lead{margin-top:16px;font-size:clamp(19px,2vw,22px);color:var(--fog);max-width:46ch}
.kind{font-weight:600;color:var(--elec);margin-bottom:6px}
.dark{background:var(--nuit);color:var(--glacier)}
.light{background:var(--glacier);color:var(--nuit)}
.light .lead{color:var(--acier)}
section{padding:var(--sec) 0}

/* bi-ton : les photos prennent les couleurs de la marque */
.duo{position:relative;isolation:isolate;background:var(--elec);overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply}
.duo::after{content:"";position:absolute;inset:0;background:var(--nuit);mix-blend-mode:lighten;pointer-events:none}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--elec);color:var(--nuit);font:600 17px "Instrument Sans",sans-serif;text-decoration:none;white-space:nowrap;border:2px solid var(--elec);transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--glacier);border-color:var(--glacier)}
.btn.sm{min-height:44px;padding:0 20px;font-size:16px}
.btn.ghost{background:transparent;color:var(--glacier);border-color:rgba(238,241,250,.35)}
.btn.ghost:hover{background:transparent;border-color:var(--glacier)}
.btn.ghost-dark{background:transparent;color:var(--nuit);border-color:rgba(10,17,40,.3)}
.btn.ghost-dark:hover{background:transparent;border-color:var(--nuit)}
.btn.dark{background:var(--nuit);color:var(--glacier);border-color:var(--nuit)}
.btn.dark:hover{background:var(--glacier);color:var(--nuit);border-color:var(--glacier)}

/* en-tête */
.top{position:sticky;top:0;z-index:20;background:rgba(10,17,40,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(143,155,196,.18)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(var(--maxw),100% - 48px);margin-inline:auto;height:68px}
.logo img{height:20px;width:auto}
.top nav{display:flex;align-items:center;gap:32px}
.top nav a:not(.btn){position:relative;text-decoration:none;font-weight:500;padding:6px 0}
.top nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--elec);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.top nav a:not(.btn):hover::after,.top nav a[aria-current="page"]::after{transform:scaleX(1)}

/* accueil */
.hero{position:relative;display:flex;align-items:center;min-height:min(86vh,820px);padding:0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,17,40,.96) 18%,rgba(10,17,40,.55) 60%,rgba(10,17,40,.25))}
.hero-in{position:relative;z-index:2;padding:96px 0}
.hero h1{max-width:11ch}
.hero-in p{max-width:40ch;margin:28px 0 36px;font-size:clamp(19px,2vw,23px);color:var(--fog)}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-mark{position:absolute;z-index:2;right:max(24px,5vw);bottom:0;width:min(42vw,600px);filter:drop-shadow(0 20px 44px rgba(10,17,40,.5));animation:leap 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes leap{from{opacity:0;transform:translate(-18%,20%) rotate(-5deg) scale(.9)}to{opacity:1;transform:none}}
.statement{font-size:clamp(28px,3.9vw,50px);max-width:26ch;letter-spacing:-.03em}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:72px}
.cols article{border-top:2px solid var(--nuit);padding-top:24px}
.cols p{margin-top:12px;color:var(--acier)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:32px;margin-top:64px}
.steps li{border-top:1px solid var(--acier);padding-top:22px}
.n{display:block;font-size:44px;font-weight:700;letter-spacing:-.04em;color:var(--elec);line-height:1;margin-bottom:18px}
.steps h3{font-size:21px}
.steps p{margin-top:8px;font-size:16px;color:var(--brume);line-height:1.55}
.row-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:56px}

/* cartes projets */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 28px}
.pcard{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:var(--nuit)}
.pimg{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,#5b0d14,#120508)}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
a.pcard:hover .pimg img{transform:scale(1.04)}
.pcap{display:flex;flex-direction:column;gap:2px}
.pcap span{color:var(--acier);font-size:16px}
.pcap b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.pcard.soon .pimg{background:transparent;border:2px dashed rgba(10,17,40,.25);display:grid;place-items:center;color:var(--acier);font-weight:600}
.pcard.soon .pcap b{color:var(--acier)}

/* pages internes */
.page-head{padding:calc(var(--sec)*.8) 0 calc(var(--sec)*.55)}
.page-head h1{font-size:clamp(44px,7vw,96px)}
.nf{min-height:60vh}.nf p:last-child{margin-top:32px}
.film-page{padding-top:56px}
.back{display:inline-block;margin-bottom:40px;color:var(--fog);text-underline-offset:5px}
.back:hover{color:var(--elec)}
.film{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:72px;align-items:start}
.poster{position:sticky;top:104px;margin:0;border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,#5b0d14,#120508);aspect-ratio:3/4}
.poster img{width:100%;height:100%;object-fit:cover}
.poster figcaption{position:absolute;left:16px;bottom:16px;padding:6px 14px;border-radius:999px;background:rgba(10,17,40,.82);font-size:15px;font-weight:500}
.film-info h1{font-size:clamp(44px,6vw,88px);margin:6px 0 18px}
.by{color:var(--fog);font-size:21px;max-width:40ch}
.credits{margin-top:56px}
.credits h2{font-size:24px;letter-spacing:-.015em;margin-bottom:8px}
.role{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--acier)}
.role h3{font-size:17px;font-weight:500;color:var(--brume);letter-spacing:0}
.role ul{list-style:none;padding:0;display:grid;gap:8px}
.role li{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.role b{font-size:22px;font-weight:600}
.role li span{color:var(--brume)}
.team{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:48px 28px}
.person{display:flex;flex-direction:column;gap:2px}
.av{display:grid;place-items:center;width:112px;height:112px;margin-bottom:18px;border-radius:50%;background:var(--nuit);color:var(--elec);font-weight:700;font-size:32px}
.person b{font-size:22px;font-weight:600}
.person span:not(.av){color:var(--acier)}

/* appel final */
.cta{background:var(--elec);color:var(--nuit)}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px}
.cta .kind{color:var(--nuit);opacity:.75}
.cta h2{font-size:clamp(48px,8vw,120px);letter-spacing:-.04em}
.cta .lead{color:var(--nuit);opacity:.85}

/* pied de page */
.foot{padding:72px 0 32px;background:var(--nuit);border-top:1px solid rgba(143,155,196,.18)}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.fbrand p{margin-top:16px;max-width:30ch;color:var(--brume);font-size:16px}
.foot nav{display:flex;flex-direction:column;gap:10px;font-size:16px}
.foot nav b{color:var(--brume);font-weight:500;margin-bottom:4px}
.foot nav a{text-decoration:none}.foot nav a:hover{color:var(--elec)}
.copy{margin-top:56px;color:var(--brume);font-size:15px}

@media (max-width:900px){
 .bar{height:auto;padding:12px 0;flex-wrap:wrap;row-gap:10px}
 .top nav{flex:1 1 100%;gap:20px}
 .top nav .btn{margin-left:auto}
 .hero{min-height:0;align-items:flex-start}
 .hero-in{padding:56px 0 220px}
 .hero-mark{width:min(88vw,460px);right:50%;transform:translateX(50%);animation:none}
 .cols,.film{grid-template-columns:1fr;gap:40px}
 .steps{grid-template-columns:1fr;gap:28px}
 .steps li{display:grid;grid-template-columns:56px 1fr;column-gap:16px}.steps .n{grid-row:span 2;margin:0;font-size:36px}
 .poster{position:relative;top:0;max-width:420px}
 .role{grid-template-columns:1fr;gap:6px}
 .foot .wrap{grid-template-columns:1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-mark{animation:none}*{transition:none!important}}

/* ---------- v3 : accueil façon "dernières sorties" ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{position:relative;height:min(78vh,780px);min-height:480px;background:var(--nuit);padding:0;overflow:hidden}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.slide.on{opacity:1;visibility:visible}
.sbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-bg{background:radial-gradient(120% 90% at 80% 20%,var(--acier),var(--nuit) 70%)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,17,40,.92) 0%,rgba(10,17,40,.35) 45%,rgba(10,17,40,.15) 100%)}
.sov{position:absolute;z-index:2;left:0;right:0;bottom:0;margin-inline:auto;padding-bottom:56px}
.sk{font-weight:600;color:var(--fog);margin-bottom:10px}
.slide h2{font-size:clamp(44px,8vw,120px);letter-spacing:-.045em;line-height:.98;max-width:14ch;margin-bottom:28px}
.btn.off{background:transparent;color:var(--fog);border-color:rgba(238,241,250,.3);cursor:default}
.ctrl{position:absolute;z-index:3;right:0;left:0;bottom:56px;margin-inline:auto;display:flex;justify-content:flex-end;align-items:center;gap:12px;pointer-events:none}
.ctrl>*{pointer-events:auto}
.count{margin-right:12px;color:var(--fog);font-variant-numeric:tabular-nums}
.count b{color:var(--glacier);font-weight:600}
.arrow{width:52px;height:52px;border-radius:50%;border:2px solid rgba(238,241,250,.35);background:rgba(10,17,40,.4);backdrop-filter:blur(6px);color:var(--glacier);font:400 30px/1 "Instrument Sans",sans-serif;cursor:pointer;display:grid;place-items:center;padding:0 0 4px;transition:border-color .2s,background .2s}
.arrow:hover{border-color:var(--glacier);background:rgba(10,17,40,.7)}
.rail{background:var(--nuit);padding:40px 0 var(--sec)}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.rail-head h2{font-size:22px;letter-spacing:-.015em}
.rail-head a{color:var(--fog);text-underline-offset:5px}.rail-head a:hover{color:var(--elec)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.thumb{position:relative;display:flex;align-items:center;gap:16px;text-align:left;padding:18px 0 0;background:none;border:0;border-top:2px solid rgba(143,155,196,.28);color:inherit;font:inherit;cursor:pointer;opacity:.62;transition:opacity .25s}
.thumb:hover,.thumb.on{opacity:1}
.thumb::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--elec)}
.thumb.on::before{width:100%}
.rail.run .thumb.on::before{width:0;animation:fill 7s linear forwards}
@keyframes fill{to{width:100%}}
.tp{flex:0 0 64px;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#5b0d14,#120508)}
.tp img{width:100%;height:100%;object-fit:cover}
.ph-tp{background:transparent;border:2px dashed rgba(143,155,196,.4)}
.tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tt b{font-size:20px;font-weight:600;letter-spacing:-.015em}
.tt span{color:var(--brume);font-size:15px}
.services .lead{margin-top:20px}
.services .statement{max-width:24ch}
.cta .wrap{position:relative}
.cta-mark{position:absolute;right:0;bottom:-8px;width:min(34vw,420px);opacity:.9;pointer-events:none}
.cta .btn.dark{margin-top:32px}
.cta .wrap>div{position:relative;z-index:1;max-width:640px}

/* ---------- placeholders ---------- */
.ph{margin:0;border-radius:var(--r);background:#DCE2F3;color:var(--acier);display:grid;place-items:center;text-align:center;font-size:15px;font-weight:500;overflow:hidden;position:relative}
.ph img{width:100%;height:100%;object-fit:cover}
.dark .ph{background:var(--marine);color:var(--brume);border:1px dashed var(--acier)}
.portrait{aspect-ratio:4/5}
.portrait .sil{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;opacity:.22}
.portrait figcaption{position:absolute;left:0;right:0;bottom:14px}
.portrait img{position:absolute;inset:0}

/* équipe */
.team{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:64px 32px}
.member h3{font-size:26px;margin-top:20px}
.role-l{color:var(--acier);font-weight:600;margin-top:4px}
.bio{margin-top:12px;color:var(--acier);font-size:17px;line-height:1.6}

/* fiche film */
.subnav{position:sticky;top:72px;z-index:15;background:var(--marine);border-block:1px solid rgba(143,155,196,.16)}
.subnav .wrap{display:flex;gap:32px;overflow-x:auto}
.subnav a{position:relative;padding:16px 0;text-decoration:none;font-size:15px;font-weight:500;color:var(--brume);white-space:nowrap;transition:color .2s}
.subnav a:hover,.subnav a:focus-visible{color:var(--glacier)}
.film-page{padding-bottom:var(--sec)}
.cast{border-top:1px solid rgba(143,155,196,.18)}
.cast-grid{list-style:none;padding:0;margin-top:48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:40px 24px}
.actor{display:flex;flex-direction:column;gap:2px}
.actor .portrait{margin-bottom:14px}
.actor b{font-size:21px;font-weight:600}
.actor span:not(.sil){color:var(--brume)}
.ggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:48px}
.gi{padding:16px}
.gi img{position:absolute;inset:0}
.g219{grid-column:span 6;aspect-ratio:2400/1030}
.g169{grid-column:span 3;aspect-ratio:16/9}
.g45{grid-column:span 2;aspect-ratio:4/5}
.page-head+.light .team{margin-top:0}
.film{margin-top:0}

@media (max-width:900px){
 .stage{height:min(74vh,620px)}
 .sov{padding-bottom:104px}
 .ctrl{bottom:32px;justify-content:flex-start}
 .thumbs{grid-template-columns:1fr;gap:16px}
 .cta-mark{position:relative;display:block;width:min(70vw,320px);margin-top:32px;right:auto}
 .cta .wrap{flex-direction:column;align-items:flex-start}
 .ggrid{grid-template-columns:repeat(2,1fr)}
 .g219,.g169{grid-column:span 2}.g45{grid-column:span 1}
 .subnav{top:104px}
}

/* ---------- v5 : navigation sobre ---------- */
.top{background:var(--nuit);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(143,155,196,.16)}
.bar{gap:24px;height:72px}
.top nav.menu{flex:1;justify-content:center;gap:40px}
.top nav.menu a:not(.btn){display:inline-flex;align-items:center;height:72px;padding:0;border-radius:0;font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--brume);transition:color .2s}
.top nav.menu a:not(.btn)::after{display:block;bottom:-1px;height:2px;background:var(--glacier);transform:scaleX(0);transition:transform .25s ease}
.top nav.menu a:not(.btn):hover{color:var(--glacier)}
.top nav.menu a:not(.btn)[aria-current="page"]{color:var(--glacier)}
.top nav.menu a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.bar>.btn.sm{min-height:40px;padding:0 18px;font-size:15px;border-radius:6px}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:28px;font-size:15px;color:var(--brume)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.55}
.crumbs a{color:var(--fog);text-underline-offset:4px}
.crumbs a:hover{color:var(--elec)}
.crumbs [aria-current]{color:var(--glacier);font-weight:500}
.film-page{padding-top:40px}
.sn-label{align-self:center;margin-right:-8px;padding-right:24px;border-right:1px solid rgba(143,155,196,.3);color:var(--brume);font-size:15px;white-space:nowrap}
.subnav a[aria-current]{color:var(--glacier);box-shadow:inset 0 -2px 0 var(--elec)}

/* à propos */
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:start}
.about-text h2{font-size:clamp(32px,4vw,52px);margin-bottom:24px;max-width:18ch}
.about-text p{margin-bottom:18px;max-width:56ch;color:var(--acier);font-size:19px}
.about-text h3{margin:40px 0 12px}
.about-text .actions{margin-top:36px}
.about-photo{position:sticky;top:104px;margin:0;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--acier)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo figcaption{position:absolute;left:16px;bottom:16px;padding:6px 14px;border-radius:999px;background:rgba(10,17,40,.82);color:var(--glacier);font-size:15px}

@media (max-width:900px){
 .bar{padding:12px 0 8px;gap:10px 16px}
 .bar .logo{order:1}
 .bar>.btn{order:2;margin-left:auto;padding:0 14px;font-size:15px;min-height:40px}
 .logo img{height:17px}
 .bar{height:auto}
 .top nav.menu{order:3;flex:1 1 100%;justify-content:flex-start;overflow-x:auto;gap:24px;margin-bottom:-8px}
 .top nav.menu a:not(.btn){height:auto;padding:10px 0 12px;white-space:nowrap;font-size:15px}
 .bar>.btn.sm{min-height:38px;padding:0 14px;font-size:14px}
 .about-grid{grid-template-columns:1fr;gap:40px}
 .about-photo{position:relative;top:0;order:-1;aspect-ratio:4/3}
 .subnav{top:108px}
 .sn-label{display:none}
}