/* Concept : une salle de projection. Un gros titre, la dernière vidéo en grand, puis une grille de cartes qui se penchent vers la souris et se retournent pour montrer leur déroulé. Même famille que le hub Écrits : puces avec compteurs, recherche, cartes recto-verso. */
.hubv{--sea:#7C8CFF;--d:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--u:Inter,system-ui,sans-serif;--s:Newsreader,Georgia,serif}
.hubv{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.hubv h1,.hubv h2,.hubv h3{font-family:var(--d);text-transform:uppercase;line-height:.9;margin:0;font-weight:800;text-wrap:balance}
.hubv .star{width:1em;height:1em;fill:currentColor;flex:none;display:block;aspect-ratio:auto;filter:none}
.eyebrow{font:600 12px/1 var(--u);letter-spacing:.2em;text-transform:uppercase;color:var(--star);display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:99px;border:1px solid var(--line);font:600 14px/1 var(--u);text-decoration:none;cursor:pointer;background:rgba(255,255,255,.04);color:var(--ink);transition:transform .25s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px);border-color:var(--star)}
.btn.main{background:var(--ink);color:#1A1A2E;border-color:var(--ink)}
.btn.main:hover{background:var(--star);border-color:var(--star)}
/* hero */
.hero{position:relative;padding-block:clamp(120px,20vh,170px) 40px}
.hero h1{font-size:clamp(88px,22vw,320px);line-height:.8;position:relative;z-index:2}
.hero .st{fill:currentColor;position:absolute;right:clamp(0px,6vw,100px);top:clamp(110px,16vh,150px);width:clamp(70px,14vw,220px);color:var(--star);z-index:1;filter:drop-shadow(0 0 40px rgba(249,200,120,.45));animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(12px) rotate(8deg)}}
.intro{max-width:46ch;margin:26px 0 0;color:var(--mut);font:italic 400 clamp(19px,2.1vw,24px)/1.5 var(--s);position:relative;z-index:2}
/* à la une */
.feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:30px;padding:clamp(18px,3vw,34px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(249,200,120,.07),transparent 60%),var(--bg2)}
.feat .meta{display:grid;gap:16px;align-content:center}
.feat h2{font-size:clamp(40px,5vw,72px)}
.feat p{margin:0;color:var(--mut)}
.feat .row{display:flex;gap:10px;flex-wrap:wrap}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills span{font:500 12px/1 var(--u);padding:7px 12px;border:1px solid var(--line);border-radius:99px;color:var(--mut)}
.shot{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;display:block;border:1px solid var(--line)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.05)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(10,10,24,.55))}
.shot .play{position:absolute;left:50%;top:50%;z-index:2;width:76px;aspect-ratio:1;margin:-38px;border-radius:50%;background:var(--star);color:#1A1A2E;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(249,200,120,.22);transition:transform .25s}
.shot:hover .play{transform:scale(1.1)}
.shot .play svg{width:30%;margin-left:5%}
.shot .dur{position:absolute;right:14px;bottom:12px;z-index:2;font:600 12px/1 var(--u);letter-spacing:.14em;background:rgba(26,26,46,.75);padding:7px 11px;border-radius:99px}
/* barre */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:44px 8px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:rgba(10,10,24,.45);color:var(--ink);padding:10px 18px;border-radius:99px;font:500 15px var(--u);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:.2s}
.chip small{font-size:13px;opacity:.6}
.chip:hover{border-color:rgba(249,200,120,.6)}
.chip[aria-pressed=true]{background:var(--star);border-color:var(--star);color:#1A1A2E}
.rt{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rt input[type=search]{width:min(60vw,240px);border:1px solid var(--line);background:rgba(10,10,24,.45);color:var(--ink);border-radius:99px;padding:10px 18px;font:400 15px var(--u)}
.rt input::placeholder{color:var(--mut)}
.rt input:focus{outline:2px solid var(--star);outline-offset:3px}
.tg{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut);cursor:pointer}
.tg input{accent-color:#F9C878;width:17px;height:17px}
#count{color:var(--mut);font-size:15px}
/* cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(26px,3.5vw,46px);padding-block:30px 100px}
.card{position:relative;aspect-ratio:16/11;perspective:1300px;outline:none}
.card[hidden]{display:none}
.card.in{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.93)}}
.tilt{position:absolute;inset:0;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform:rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));transform-style:preserve-3d}
.card.on .tilt{transition:transform .08s linear}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card.on .flip{transform:rotateY(180deg)}
.f,.b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;overflow:hidden}
.f{background:radial-gradient(circle at 74% 28%,color-mix(in srgb,var(--c1) 55%,transparent),transparent 56%),linear-gradient(165deg,var(--c2),var(--bg) 88%)}
.f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,14,30,.35),transparent 32%,rgba(14,14,30,.55) 62%,rgba(14,14,30,.92));pointer-events:none}
.f.pub img{height:68%;bottom:auto}
.f.pub::after{background:linear-gradient(rgba(14,14,30,.4),transparent 30%,transparent 52%,rgba(26,26,46,1) 69%)}
.f.pub h3{font-size:clamp(20px,1.8vw,25px);bottom:14px;right:78px;line-height:1}
.f.pub{background:var(--bg2)}
.f .tag{position:absolute;z-index:2;left:18px;top:16px;font:500 13px var(--u);background:rgba(26,26,46,.65);padding:5px 13px;border-radius:99px}
.f .soon{position:absolute;z-index:2;right:16px;top:16px;font:600 11px/1 var(--u);letter-spacing:.14em;text-transform:uppercase;color:#1A1A2E;background:var(--star);padding:7px 11px;border-radius:99px}
.f .d{position:absolute;z-index:2;right:16px;bottom:16px;font:600 12px/1 var(--u);letter-spacing:.12em;background:rgba(26,26,46,.75);padding:7px 11px;border-radius:99px}
.f h3{position:absolute;z-index:2;left:18px;right:90px;bottom:16px;font-size:clamp(28px,2.8vw,40px);line-height:.92}
.f .big{fill:currentColor;position:absolute;z-index:1;right:-4%;top:6%;width:48%;color:var(--star);opacity:.9;filter:drop-shadow(0 0 30px rgba(249,200,120,.4))}
.b{transform:rotateY(180deg);background:var(--bg2);border:1px solid var(--line);padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.b small{color:var(--star);font:600 12px/1.3 var(--u);letter-spacing:.14em;text-transform:uppercase}
.b h3{font-size:clamp(26px,2.4vw,34px);line-height:.95}
.b p{margin:0;font-size:14px;line-height:1.5;color:var(--mut)}
.b ol{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:2px;font-size:13px}
.b ol a{display:flex;gap:12px;padding:5px 8px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background .2s}
.b ol a:hover{background:rgba(249,200,120,.14)}
.b ol i{font:600 11px/1.8 var(--u);color:var(--star);font-style:normal;font-variant-numeric:tabular-nums;min-width:38px}
.b .act{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.b .act a{font:600 13px/1 var(--u);padding:10px 16px;border-radius:99px;text-decoration:none;border:1px solid var(--line)}
.b .act a.m{background:var(--ink);color:#1A1A2E;border-color:var(--ink)}
.b .act a:hover{border-color:var(--star)}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--mut)}
.empty[hidden]{display:none}
/* séries */
section.ser{padding-block:90px;border-top:1px solid var(--line)}
.hd{display:grid;gap:16px;margin-bottom:36px;max-width:720px}
.hd h2{font-size:clamp(42px,6vw,84px)}
.hd p{margin:0;color:var(--mut)}
.sers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.srs{padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--bg2);display:grid;gap:14px;align-content:space-between;min-height:250px;transition:border-color .25s,transform .25s}
.srs:hover{border-color:var(--star);transform:translateY(-4px)}
.srs h3{font-size:clamp(32px,3.4vw,46px)}
.srs p{margin:0;color:var(--mut);font-size:15px}
.dots{display:flex;gap:8px;align-items:center}
.dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--mut)}
.dots i.on{background:var(--star);border-color:var(--star)}
.dots span{margin-left:8px;font-size:13px;color:var(--mut)}
.flag{display:inline-block;font:500 11px/1 var(--u);color:var(--star);border:1px dashed var(--star);border-radius:99px;padding:5px 9px;vertical-align:middle;margin-left:6px}
section.cta{padding-block:90px;border-top:1px solid var(--line);display:grid;gap:26px;justify-items:start}
.cta h2{font-size:clamp(46px,8vw,112px)}
.cta p{margin:0;max-width:540px;font:italic 400 clamp(20px,2.3vw,27px)/1.45 var(--s);color:var(--mut)}
@media(max-width:860px){.feat,.sers{grid-template-columns:minmax(0,1fr)}nav .links{gap:14px}}
@media(hover:none){.card .tilt{transform:none!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}