/* ==========================================================
   video.css : pejy Vidéo — pellicule, grid cinéma, lecteur
   ========================================================== */

/* ---------- Pellicule (miniatures réelles, non cliquables) ---------- */
.reel{margin:0 calc(clamp(1.3rem,5vw,4.5rem)*-1);overflow:hidden;background:#0e0f10;padding:30px 0;position:relative;pointer-events:none;-webkit-user-select:none;user-select:none;cursor:default}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 14px,#E9ECEF 14px 28px);opacity:.65;z-index:2}
.reel::before{top:9px}.reel::after{bottom:9px}
.reel-in{display:flex;gap:16px;padding-right:16px;width:max-content;animation:rl 80s linear infinite}
.reel-in i{flex:none;width:min(46vw,380px);aspect-ratio:2.39/1;background:var(--g);background-size:cover;background-position:center;position:relative;filter:saturate(.9) contrast(1.05)}
.reel-in i::before{content:"SC " attr(data-n);position:absolute;left:10px;bottom:8px;z-index:2;font:700 .68rem 'Roboto Mono',monospace;letter-spacing:.14em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.reel-in i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 28%,transparent 58%,rgba(0,0,0,.55)),radial-gradient(circle at 70% 30%,rgba(255,255,255,.14),transparent 50%)}
@keyframes rl{to{transform:translateX(-50%)}}

/* ---------- Statistiques ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:2.2rem 0 1.6rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats:empty{display:none}
.stats>div{padding:1.3rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;border-left:1px solid var(--line)}
.stats>div:first-child{border-left:0;padding-left:0}
.stats .n{font-family:'Roboto Condensed',sans-serif;font-weight:900;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.01em}
.stats .m{color:var(--mut);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div:nth-child(3){border-left:0;padding-left:0}.stats>div:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- Etat de synchronisation ---------- */
.sync{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 1.8rem;color:var(--mut);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.sync[data-k="live"]::before,.sync[data-k="cache"]::before{background:#2fd47a;animation:pls 2s infinite}
.sync[data-k="load"]::before{background:var(--o);animation:pls 1s infinite}
.sync[data-k="off"]::before{background:#e5484d}
@keyframes pls{0%{box-shadow:0 0 0 0 rgba(47,212,122,.55)}70%{box-shadow:0 0 0 8px rgba(47,212,122,0)}100%{box-shadow:0 0 0 0 rgba(47,212,122,0)}}

/* ==========================================================
   CARROUSEL HORIZONTAL INFINI (seule cette zone défile en horizontal)
   ========================================================== */
.car{--P:clamp(1.3rem,5vw,4.5rem);--cw:clamp(280px,26vw,470px);--gap:22px;
  position:relative;overflow:hidden;overflow:clip;
  margin:-22px calc(var(--P)*-1) -26px;padding:22px var(--P) 26px;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(18px,4vw,70px),#000 calc(100% - clamp(18px,4vw,70px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 clamp(18px,4vw,70px),#000 calc(100% - clamp(18px,4vw,70px)),transparent 100%)}
.car.loop{cursor:grab}
.car.drag{cursor:grabbing}
.car.drag .fl{pointer-events:none}
.list{position:relative;display:flex;gap:var(--gap);width:max-content;will-change:transform;backface-visibility:hidden}
@media(max-width:700px){.car{--cw:min(80vw,360px);--gap:16px}}

.car-ui{display:flex;align-items:center;gap:1.4rem;margin-top:2.4rem}
.car-ui[hidden]{display:none}
.cb{flex:1;position:relative;height:2px;background:var(--line);overflow:hidden;border-radius:99px;min-width:40px}
.cb i{position:absolute;top:0;height:2px;width:10%;background:linear-gradient(90deg,var(--o),var(--p));border-radius:99px}
.cc{color:var(--fg);letter-spacing:.14em;min-width:5.2rem}
.ch{color:var(--mut);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}
.cn{display:flex;gap:.6rem}
.cbtn{width:52px;height:52px;border-radius:50%;border:2px solid var(--fg);display:grid;place-items:center;font:700 1.2rem 'Roboto Mono',monospace;position:relative;overflow:hidden;isolation:isolate;transition:color .45s,border-color .45s,transform .6s cubic-bezier(.16,1,.3,1)}
.cbtn::before{content:"";position:absolute;inset:0;background:var(--o);transform:scale(0);border-radius:50%;transition:transform .6s cubic-bezier(.16,1,.3,1);z-index:-1}
.cbtn:hover{color:#fff;border-color:var(--o);transform:scale(1.06)}
.cbtn:hover::before{transform:scale(1.1)}
.cbtn:active{transform:scale(.94)}
@media(max-width:700px){.ch{display:none}.car-ui{gap:1rem}.cbtn{width:46px;height:46px}}

/* ---------- Cartes ---------- */
.fl{flex:none;display:flex;flex-direction:column;position:relative;width:var(--cw);text-align:left;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:border-color .5s,transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.fl[hidden]{display:none}
.fl::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--o),var(--p));transition:width .9s cubic-bezier(.16,1,.3,1);z-index:6}
.fl:hover,.fl:focus-visible{border-color:var(--o);transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(251,86,7,.55)}
.fl:hover::after,.fl:focus-visible::after{width:100%}
.fl.rise{animation:fup .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,0ms)}
@keyframes fup{from{opacity:0;transform:translateY(32px)}}

.fl .th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0e0f10}
.fl .im{position:absolute;inset:0;background:var(--g);background-size:cover;background-position:center;filter:saturate(.62) contrast(1.05);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}
.fl:hover .im,.fl:focus-visible .im{transform:scale(1.08);filter:none}
.fl .vg{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 32%,transparent 52%,rgba(0,0,0,.78))}
.fl .vf{position:absolute;inset:12px;z-index:3;--c:#fff;--s:20px;opacity:0;transform:scale(1.06);transition:opacity .5s,transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.fl:hover .vf,.fl:focus-visible .vf{opacity:.9;transform:none}
.fl .sn{position:absolute;left:16px;top:14px;z-index:4;color:#fff;letter-spacing:.16em;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.fl .tm{position:absolute;right:14px;bottom:12px;z-index:4;color:#fff;background:rgba(14,15,16,.72);padding:.12rem .55rem;border-radius:3px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fl .pl{position:absolute;inset:0;display:grid;place-items:center;z-index:4}
.fl .pl span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding-left:4px;font-size:1.25rem;color:#fff;background:rgba(14,15,16,.55);border:2px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:scale(.88);transition:background .4s,border-color .4s,transform .7s cubic-bezier(.16,1,.3,1)}
.fl:hover .pl span,.fl:focus-visible .pl span{background:var(--o);border-color:var(--o);transform:scale(1.12)}

.fl .in{position:relative;display:flex;flex-direction:column;gap:.5rem;flex:1;padding:1.2rem 1.4rem 1.35rem;overflow:hidden}
.fl .in::before{content:attr(data-n);position:absolute;right:.9rem;top:.2rem;font:900 5rem/1 'Roboto Condensed',sans-serif;color:transparent;-webkit-text-stroke:1px var(--fg);opacity:.14;transition:opacity .6s,-webkit-text-stroke-color .6s,transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.fl:hover .in::before,.fl:focus-visible .in::before{opacity:.55;-webkit-text-stroke-color:var(--o);transform:translateX(-6px)}
.fl .tg{position:relative;color:var(--o);letter-spacing:.18em;font-weight:700}
.fl .in h2{position:relative;font-size:clamp(1.55rem,2.2vw,2.15rem);line-height:1;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.05em}
.fl .in p{position:relative;color:var(--mut);font-size:.95rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fl .mt{position:relative;display:flex;flex-wrap:wrap;gap:.2rem 0;margin-top:auto;padding-top:.85rem;border-top:1px dashed var(--line);color:var(--mut);font-size:.74rem;letter-spacing:.08em}
.fl .in>p+.mt{margin-top:.7rem}
.fl .mt span+span::before{content:"·";margin:0 .8rem;opacity:.55}

/* ---------- Skeleton ---------- */
.fl.sk{pointer-events:none}
.fl.sk::after{display:none}
.fl.sk .th,.fl.sk .l{background:linear-gradient(100deg,#1a1c1f 30%,#2a2d31 50%,#1a1c1f 70%);background-size:250% 100%;animation:skm 1.4s linear infinite}
.fl.sk .in{gap:.8rem}
.fl.sk .in::before{display:none}
.fl.sk .l{display:block;height:14px;border-radius:3px}
.fl.sk .a{width:30%}.fl.sk .b{width:80%;height:28px}.fl.sk .c{width:55%}
@keyframes skm{from{background-position:150% 0}to{background-position:-100% 0}}
[data-theme="light"] .fl.sk .th,[data-theme="light"] .fl.sk .l{background-image:linear-gradient(100deg,#dfe3e7 30%,#f1f3f5 50%,#dfe3e7 70%)}

.empty{grid-column:1/-1;padding:3rem 0;text-align:center;color:var(--mut)}
.more-w{display:flex;justify-content:center;margin-top:2.6rem}
.more-w .ob[hidden]{display:none}
.cta-end{text-align:center;margin-top:4rem}

/* ==========================================================
   Lecteur : vidéo à gauche, informations à droite, fondu
   ========================================================== */
#pl{background:rgba(8,9,10,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#pl.on{animation:mIn .4s ease both}
#pl.on .bx{animation:bxIn .75s cubic-bezier(.16,1,.3,1) both}
#pl.on.out{animation:mOut .32s ease both}
#pl.on.out .bx{animation:bxOut .32s ease both}
@keyframes mIn{from{opacity:0}}
@keyframes mOut{to{opacity:0}}
@keyframes bxIn{from{opacity:0;transform:translateY(26px) scale(.97)}}
@keyframes bxOut{to{opacity:0;transform:translateY(12px) scale(.98)}}

/* la largeur est calculée pour que la vidéo (16:9) reste entière dans la hauteur de l'écran */
#pl .bx{position:relative;width:min(1500px,96vw,calc(92vh * 16 / 9 + 380px));width:min(1500px,96vw,calc(92dvh * 16 / 9 + 380px));max-height:none;overflow:hidden;padding-right:380px;background:#0b0c0d;color:#E9ECEF;border-radius:8px;box-shadow:0 40px 120px -20px rgba(0,0,0,.85),0 0 0 1px rgba(233,236,239,.1)}
.scr{position:relative;aspect-ratio:2.39/1;background:var(--g);background-size:cover;background-position:center;overflow:hidden}
#pl .scr.live{aspect-ratio:16/9;background:#000}
.scr .lbx{position:absolute;left:0;right:0;height:11%;background:#000;z-index:2;pointer-events:none}
.scr .lbx.t{top:0}.scr .lbx.b{bottom:0}
.scr.fake::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);background-size:250% 100%;animation:sh 3.2s linear infinite;animation-play-state:paused}
.scr.fake.run::after{animation-play-state:running}
@keyframes sh{from{background-position:150% 0}to{background-position:-100% 0}}
.bigp{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font-size:2.4rem;color:#fff;transition:opacity .4s}
.bigp::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:rgba(14,15,16,.65);border:2px solid #fff;z-index:-1;transition:background .3s}
.bigp:hover::before{background:var(--o);border-color:var(--o)}
.scr.run .bigp{opacity:0}.scr.run:hover .bigp{opacity:.9}
.hudl{position:absolute;left:14px;top:calc(11% + 8px);z-index:4;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.emb{position:absolute;inset:0;z-index:5;display:none}.emb iframe{width:100%;height:100%;border:0;display:block}
.scr.live .emb{display:block}.scr.live .bigp,.scr.live .hudl,.scr.live .lbx{display:none}
.ctl{display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;background:#16181b;border-top:1px solid rgba(233,236,239,.15)}
.ctl.off{display:none}
.ctl #pp{width:34px;height:34px;border-radius:50%;background:var(--o);color:#fff;display:grid;place-items:center;flex:none}
.trk{flex:1;height:8px;background:rgba(233,236,239,.2);border-radius:99px;position:relative;cursor:pointer;touch-action:none}
.trk:focus-visible{outline-offset:6px}
.trk i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--o),var(--p));border-radius:99px}
.trk b{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--o)}
#ptc{min-width:6.5rem;text-align:right;color:rgba(233,236,239,.8)}

/* panneau d'informations (à droite) */
#pl .bd{position:absolute;top:0;right:0;bottom:0;width:380px;display:flex;flex-direction:column;gap:.9rem;padding:2.2rem 1.8rem 1.6rem;background:linear-gradient(180deg,#16181b,#0f1112);border-left:1px solid rgba(233,236,239,.1);overflow:hidden}
#pl .bd::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--o),var(--p))}
#pl .bd.sw>*{animation:swp .6s cubic-bezier(.16,1,.3,1) backwards}
#pl .bd.sw>*:nth-child(2){animation-delay:.05s}#pl .bd.sw>*:nth-child(3){animation-delay:.1s}#pl .bd.sw>*:nth-child(4){animation-delay:.15s}
@keyframes swp{from{opacity:0;transform:translateY(14px)}}
#pl .bd .m{color:var(--o);letter-spacing:.12em;line-height:1.6;padding-right:3.2rem}
#pl .bd h3{font-size:clamp(1.8rem,2.3vw,2.5rem);line-height:.98;margin:0;letter-spacing:-.005em}
#pl .bd p{flex:1;min-height:0;margin:0;overflow:auto;white-space:pre-line;color:rgba(233,236,239,.74);font-size:.98rem;line-height:1.6;padding-right:.4rem;scrollbar-width:thin}
#pl .bd p::-webkit-scrollbar{width:6px}
#pl .bd p::-webkit-scrollbar-track{background:transparent;border:0}
#pl .bd p::-webkit-scrollbar-thumb{border:0;border-radius:99px;min-height:30px;background:rgba(233,236,239,.28);box-shadow:none}
#pl .nv2{margin:0;padding-top:1.1rem;border-top:1px dashed rgba(233,236,239,.2);display:flex;flex-wrap:wrap;gap:.6rem}
#pl .ob{border-color:rgba(233,236,239,.7);color:#E9ECEF;padding:.6rem 1.2rem;font-size:1.02rem;justify-content:center;flex:1 1 calc(50% - .3rem)}
#pl .ob.yt{order:-1;flex:1 1 100%;background:var(--o);border-color:var(--o);color:#fff;text-decoration:none}
#pl .ob.yt::before{background:var(--p)}
#pl .ob.yt[hidden]{display:none}
#pl .x{top:14px;right:14px}

@media(max-width:900px){
  #pl .bx{width:min(100%,720px);padding-right:0;max-height:94vh;overflow:auto}
  #pl .bd{position:static;width:auto;padding:1.4rem 1.3rem 1.4rem;overflow:visible}
  #pl .bd p{flex:none;max-height:9rem}
  #pl .bd h3{font-size:clamp(1.7rem,6vw,2.3rem)}
}

@media(prefers-reduced-motion:reduce){.fl.rise,.reel-in,.sync::before,.fl.sk .th,.fl.sk .l{animation:none}}

/* ---------- Hero : portrait retourné à droite + parallaxe ---------- */
.ph1{position:relative;isolation:isolate}
.ph1>.kick,.ph1>h1,.ph1>p{position:relative;z-index:2}
.ph1 h1 span{display:block}
.ph1{--fg:#E9ECEF;--mut:rgba(233,236,239,.82);color:#E9ECEF}
.hph{--P:clamp(1.3rem,5vw,4.5rem);position:absolute;z-index:0;top:-5.2rem;bottom:-1rem;left:calc(var(--P)*-1);right:calc(var(--P)*-1);overflow:hidden;pointer-events:none;background:#0e0f10;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%)}
.hph::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(14,15,16,.88) 0,rgba(14,15,16,.62) 38%,rgba(14,15,16,.12) 72%,rgba(14,15,16,.28) 100%),linear-gradient(180deg,rgba(14,15,16,.55) 0,transparent 22%,transparent 62%,rgba(14,15,16,.85) 100%)}
.hpi{position:absolute;inset:-2% -3% -22%;transform-origin:50% 0;will-change:transform}
.hpi img{width:100%;height:100%;object-fit:cover;object-position:60% 0%;display:block;transform:scaleX(-1);filter:contrast(1.06) saturate(1.08)}
.hpi::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(251,86,7,.22),transparent 55%),radial-gradient(circle at 20% 90%,rgba(131,56,236,.25),transparent 60%);mix-blend-mode:screen;background-size:140% 140%;animation:hglow 14s ease-in-out infinite alternate}
@keyframes hglow{to{background-position:100% 100%;opacity:.7}}
@media(max-width:800px){
  .hph::before{background:linear-gradient(180deg,rgba(14,15,16,.55),rgba(14,15,16,.38) 45%,rgba(14,15,16,.82))}
  .hpi{inset:-2% -3% -6%}
  /* l'image est retournée (scaleX(-1)) : 24% cadre l'opérateur et la caméra au centre */
  .hpi img{object-position:24% 0%}
}
@media(prefers-reduced-motion:reduce){.hpi::after{animation:none}}