@font-face{font-family:T;src:url(polices/BarlowCondensed-Bold.woff2) format("woff2");font-display:swap}
@font-face{font-family:R;src:url(polices/BarlowSemiCondensed-Medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:I;src:url(polices/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--fond:#08080a;--carte:#121216;--carte2:#18181d;--ligne:#26262c;--texte:#f4f3ef;--doux:#a2a4a9;--or:#e9c46a;--haut:env(safe-area-inset-top,0px);--bas:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--fond);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:I,system-ui,sans-serif;overscroll-behavior-y:none}
body.fige{overflow:hidden}
a{color:inherit}button{font:inherit;color:inherit}
/* en-tête collant, compact */
.tete{position:sticky;top:0;z-index:5;background:rgba(8,8,10,.86);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--ligne);padding-top:var(--haut)}
.barre{display:flex;align-items:center;gap:14px;padding:14px 28px}
.barre svg{width:64px;fill:var(--texte);flex:none}.barre h1{font-family:T;text-transform:uppercase;font-size:22px;margin:0;line-height:1}
.barre .lab{font-family:R;letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--doux);margin-top:3px}
.barre .esp{flex:1}
.ico{-webkit-appearance:none;appearance:none;margin:0;padding:0;width:40px;height:40px;line-height:0;border-radius:50%;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .12s,background .15s}.ico:hover{background:var(--carte)}
.ico:active{transform:scale(.9);background:var(--carte)}.ico svg{display:block;width:21px;height:21px;fill:none;stroke:var(--texte);stroke-width:2}
.cherche{display:none;padding:0 28px 12px}.cherche.on{display:block}
.cherche input{width:100%;background:var(--carte);border:1px solid var(--ligne);color:var(--texte);padding:12px 14px;border-radius:12px;font:16px I;outline:none}
.cherche input:focus{border-color:var(--or)}
.onglets{display:flex;gap:8px;padding:0 28px 12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets button{flex:none;scroll-snap-align:start;font-family:R;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;background:var(--carte);color:var(--doux);border:1px solid var(--ligne);padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,transform .12s}
.onglets button:active{transform:scale(.95)}.onglets button.on{background:var(--texte);color:var(--fond);border-color:var(--texte)}
main{padding:6px 28px calc(60px + var(--bas))}
section{content-visibility:auto;contain-intrinsic-size:600px}
h2{font-family:T;text-transform:uppercase;font-size:28px;margin:26px 0 12px;display:flex;align-items:baseline;gap:10px}h2 span{color:var(--or);font-size:20px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.c{background:var(--carte);border:1px solid var(--ligne);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s,transform .12s;animation:entre .35s ease both}
.c:hover{border-color:var(--or)}.c:active{transform:scale(.975)}
@keyframes entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.c .ap{aspect-ratio:16/10;background:var(--carte2);display:grid;place-items:center;position:relative;overflow:hidden}
.c .ap img{width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .3s}.c .ap img.ok{opacity:1}
.c.film .ap img{object-fit:cover}.c .ap.clair{background:#e9e7e0}
.c .ap .typ{font-family:T;font-size:30px;color:var(--doux)}
.c .ap .pl{position:absolute;width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:grid;place-items:center}
.c .ap .pl:after{content:"";border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.c .t{padding:12px 14px 3px;font-weight:600;font-size:14px;line-height:1.3}.c .n{padding:0 14px;font-size:12.5px;color:var(--doux);flex:1}
.c .m{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px 12px;font-size:11.5px;color:var(--doux)}
.c .m a{color:var(--or);text-decoration:none;font-weight:700;padding:6px 0}
/* visionneuse plein écran */
.vue{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.94);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s}
.vue.on{opacity:1;pointer-events:auto}
.vue .pan{flex:1;display:flex;flex-direction:column;transform:translateY(24px);transition:transform .28s cubic-bezier(.2,.8,.2,1);min-height:0}
.vue.on .pan{transform:none}
.vue .b{display:flex;justify-content:space-between;align-items:center;padding:calc(12px + var(--haut)) 18px 12px;gap:12px}
.vue .b strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vue .b span{display:flex;gap:8px;flex:none}
.vue .b a{background:var(--texte);color:var(--fond);padding:10px 16px;border-radius:12px;font:700 13px I;text-decoration:none}
.vue .z{flex:1;display:grid;place-items:center;padding:0 14px calc(14px + var(--bas));min-height:0;touch-action:pan-y}
.vue .z>img,.vue .z>video{max-width:100%;max-height:100%;border-radius:8px}
.vue .z>audio{width:min(520px,100%)}
.vue iframe{width:min(1100px,100%);height:100%;border:0;background:#fff;border-radius:8px}
.pied{padding:26px 28px calc(30px + var(--bas));color:var(--doux);font-size:12px;border-top:1px solid var(--ligne)}
@media (max-width:640px){
  .barre{padding:12px 16px}.barre svg{width:52px}.barre h1{font-size:20px}.barre .lab{display:none}
  .cherche,.onglets{padding-left:16px;padding-right:16px}
  main{padding-left:16px;padding-right:16px}h2{font-size:24px;margin:22px 0 10px}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .c.film,.c.doc{grid-column:1/-1}
  .c .t{font-size:13px;padding:10px 11px 2px}.c .n{padding:0 11px;font-size:12px}.c .m{padding:8px 11px 10px}
  .c:not(.film):not(.doc) .n{display:none}
  .c:not(.film):not(.doc) .m span{display:none}
  .pied{padding-left:16px;padding-right:16px}
}
@media (min-width:641px){.c.film{grid-column:span 2}.c.film .ap{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== V3 : carrousels, barre d'onglets, filtres, galerie ===== */
.rang{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -28px;padding-left:28px;padding-right:28px;scrollbar-width:none;overscroll-behavior-x:contain}
.rang::-webkit-scrollbar{display:none}
.rang .c{flex:none;width:260px;scroll-snap-align:start}.rang .c.film{width:420px}
.voir{margin-left:auto;font:600 13px I;color:var(--or);background:none;border:0;cursor:pointer;padding:6px 0}
.filtres{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;scroll-snap-type:x proximity}
.filtres::-webkit-scrollbar{display:none}
.filtres button{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:7px;font:600 13px I;background:var(--carte);color:var(--doux);border:1px solid var(--ligne);padding:8px 13px;border-radius:999px;cursor:pointer;transition:transform .12s,background .15s}
.filtres button:active{transform:scale(.95)}.filtres button.on{background:var(--or);color:var(--fond);border-color:var(--or)}
.filtres img{width:20px;height:14px;object-fit:cover;border-radius:2px}
.outils{display:flex;align-items:center;gap:10px;margin:4px 0 6px;flex-wrap:wrap}
.pack{font:700 13px I;color:var(--fond);background:var(--or);border:0;border-radius:12px;padding:10px 14px;text-decoration:none}
.compte{color:var(--doux);font-size:12.5px}
.onglets-bas{display:none}
.vue .cpt{color:var(--doux);font-size:12px;margin-top:2px}
.vue .b .act{display:flex;gap:8px}.vue .b button.part{background:var(--carte);border:1px solid var(--ligne);color:var(--texte);padding:10px 14px;border-radius:12px;font:700 13px I;cursor:pointer}
.vue .z{overflow:hidden}.vue .z img{touch-action:none;transform-origin:center;will-change:transform;transition:transform .18s}
.vue .z img.geste{transition:none}
.vue .fl{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--ligne);display:grid;place-items:center;cursor:pointer}
.vue .fl svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}.vue .fl.g{left:16px}.vue .fl.d{right:16px}
.vue .pan{position:relative}
.toast{position:fixed;left:50%;bottom:calc(90px + var(--bas));transform:translate(-50%,20px);background:var(--texte);color:var(--fond);padding:10px 16px;border-radius:12px;font:600 13px I;opacity:0;transition:.25s;z-index:20;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){
  .onglets{display:none}
  .rang{margin:0 -16px;padding-left:16px;padding-right:16px;gap:10px}.rang .c{width:44vw}.rang .c.film{width:82vw}
  .rang .c .n,.rang .c .m span{display:none}
  main{padding-bottom:calc(96px + var(--bas))}.pied{padding-bottom:calc(100px + var(--bas))}
  .onglets-bas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;background:rgba(14,14,18,.9);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);border-top:1px solid var(--ligne);padding:6px 6px calc(6px + var(--bas))}
  .onglets-bas button{flex:1;background:none;border:0;color:var(--doux);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font:600 10.5px I;cursor:pointer;transition:transform .12s}
  .onglets-bas button:active{transform:scale(.9)}.onglets-bas svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
  .onglets-bas button.on{color:var(--texte)}.onglets-bas button.on svg{stroke:var(--or)}
  .vue .fl{display:none}
  .feuille{position:fixed;left:0;right:0;bottom:0;z-index:12;background:#16161b;border-radius:18px 18px 0 0;padding:10px 16px calc(16px + var(--bas));transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .feuille.on{transform:none}.feuille .poignee{width:40px;height:5px;border-radius:3px;background:#3a3a42;margin:0 auto 12px}
  .feuille button{display:flex;width:100%;justify-content:space-between;background:none;border:0;border-bottom:1px solid var(--ligne);color:var(--texte);padding:16px 4px;font:600 16px I}
  .voile{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:11;opacity:0;pointer-events:none;transition:opacity .25s}.voile.on{opacity:1;pointer-events:auto}
}
@media (min-width:641px){.feuille,.voile{display:none}}
/* rangées de pastilles : fondu aux bords + flèche tant qu'il reste à voir */
.defile{position:relative}
.defile:before,.defile:after{content:"";position:absolute;top:0;bottom:10px;width:34px;pointer-events:none;z-index:1;transition:opacity .2s}
.defile:before{left:0;background:linear-gradient(90deg,var(--fond),transparent);opacity:0}
.defile:after{right:0;background:linear-gradient(270deg,var(--fond) 35%,transparent)}
.defile.gauche:before{opacity:1}.defile.fin:after{opacity:0}
.defile .fleche{position:absolute;right:0;top:calc(50% - 5px);transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:50%;background:var(--carte);border:1px solid var(--ligne);display:grid;place-items:center;pointer-events:none;transition:opacity .2s}
.defile .fleche svg{width:14px;height:14px;fill:none;stroke:var(--texte);stroke-width:2.4}.defile.fin .fleche{opacity:0}
.actifs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.actifs .pill{display:flex;align-items:center;gap:8px;background:var(--texte);color:var(--fond);border:0;border-radius:999px;padding:8px 12px;font:700 13px I;cursor:pointer}
.actifs .pill img{width:20px;height:14px;object-fit:cover;border-radius:2px}