/* ViewerFirst — vitrine de l'accueil (inc/vf-vitrine.php) : mur de logos, extraits en direct, films et séries */
.vit{padding-block:var(--section-gap);border-top:1px solid var(--hairline);overflow:hidden}
.vit .vf-section-heading .vf-eyebrow{color:var(--ash-mist)}
/* Mur de logos qui défile */
.vit__wall{display:flex;gap:12px;margin:0 0 var(--spacing-48);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vit__marquee{display:flex;gap:12px;margin:0;padding:0;list-style:none;flex:none;animation:vit-marquee 60s linear infinite}
.vit__wall:hover .vit__marquee{animation-play-state:paused}
.vit__logo{flex:none;width:160px;height:90px;border-radius:var(--radius-lg);background:#fff;display:grid;place-items:center;padding:12px}
.vit__logo img{max-width:100%;max-height:100%;object-fit:contain}
@keyframes vit-marquee{to{transform:translateX(calc(-100% - 12px))}}
@media (prefers-reduced-motion:reduce){.vit__marquee{animation:none}.vit__marquee[aria-hidden]{display:none}.vit__wall{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}.vit__marquee{flex-wrap:wrap}}
/* Rangées */
.vit__row+.vit__row{margin-top:var(--spacing-48)}
.vit__head{display:flex;align-items:baseline;gap:var(--spacing-12);margin-bottom:var(--spacing-16)}
.vit__head h3{margin:0}.vit__head p{margin:0;color:var(--ash-mist)}
.vit__nav{margin-left:auto;display:flex;gap:8px}
.vit__track{display:grid;grid-auto-flow:column;gap:var(--spacing-16);margin:0;padding:0 0 4px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vit__track::-webkit-scrollbar{display:none}
.vit__track>li{scroll-snap-align:start}
.vit figure{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--smoke)}
.vit figcaption{display:grid;gap:2px;padding:10px 2px 0;background:var(--obsidian)}
.vit figcaption b{font:500 14px/1.3 var(--font-sans);color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vit figcaption span{font:400 12px/1.3 var(--font-sans);color:var(--ash-mist)}
/* Extraits en direct */
.vit__track:has(.vit__live){grid-auto-columns:minmax(280px,360px)}
.vit__live video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;border-radius:var(--radius-lg)}
.vit__badge{position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:4px;background:#d23b3b;color:#fff;font:700 11px/1 var(--font-sans);letter-spacing:.08em}
.vit__chlogo{position:absolute;top:8px;right:8px;width:64px;height:36px;object-fit:contain;padding:4px;border-radius:6px;background:rgba(255,255,255,.92)}
/* Films et séries */
.vit__track:has(.vit__movie){grid-auto-columns:minmax(150px,180px)}
.vit__movie img,.vit__movie video{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-lg);background:#111}
.vit__movie video{position:absolute;inset:0 0 auto 0;opacity:0;transition:opacity .2s}
.vit__movie.is-playing video{opacity:1}
.vit__play{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center}
.vit__play svg{width:14px;height:14px;fill:#fff}
.vit__movie.is-playing .vit__play{opacity:0}
.vit__movie figure:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (max-width:640px){.vit__head{flex-wrap:wrap}.vit__nav{display:none}.vit__logo{width:120px;height:68px}.vit__track:has(.vit__live){grid-auto-columns:78%}.vit__track:has(.vit__movie){grid-auto-columns:42%}}
/* Simulateur d'écrans de l'en-tête */
.hscreens{position:absolute;top:72px;bottom:0;right:0;width:48%;display:grid;place-items:center;padding:48px max(32px,calc((100vw - var(--page-max-width,1200px))/2)) 48px 56px;box-sizing:border-box;pointer-events:none}
.hscreens::before{content:"";position:absolute;inset:10% 0 10% 10%;background:radial-gradient(closest-side,rgba(61,106,153,.32),transparent);filter:blur(10px)}
.hs-tv{position:relative;width:min(100%,620px)}
.hs-screen{position:relative;overflow:hidden;background:#05060a center/cover no-repeat}
.hs-tv>.hs-screen{aspect-ratio:16/9;border:10px solid #111216;border-radius:14px;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09)}
.hs-tv__stand{display:block;width:30%;height:16px;margin:0 auto;background:linear-gradient(#202127,#0c0d10);border-radius:0 0 10px 10px;box-shadow:0 18px 30px rgba(0,0,0,.5)}
.hs-phone{position:absolute;right:-7%;bottom:-11%;width:34%}
.hs-phone>.hs-screen{aspect-ratio:19.5/9;border:6px solid #111216;border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1)}
.hs-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.hs-screen video.on{opacity:1}
.hs-over{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 42%);color:#fff;transition:opacity .4s}
.hs-over.out{opacity:0}
.hs-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:4px;background:#d23b3b;font:700 11px/1 var(--font-sans);letter-spacing:.08em}
.hs-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:hsdot 1.4s infinite}
.hs-badge--vod{background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.hs-badge--vod::before{display:none}
.hs-logo{position:absolute;top:10px;right:12px;width:64px;height:36px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.hs-name{position:absolute;left:14px;right:14px;bottom:14px;font:600 15px/1.25 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hs-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.hs-bar i{display:block;height:100%;width:0;background:var(--signal-blue,#3d6a99)}
.hs-bar.run i{animation:hsbar var(--d,3s) linear forwards}
.hs-phone .hs-badge{top:7px;left:7px;padding:3px 6px;font-size:8px}
.hs-phone .hs-badge::before{width:4px;height:4px}
.hs-phone .hs-logo{top:6px;right:8px;width:36px;height:20px}
.hs-phone .hs-name{left:9px;right:9px;bottom:8px;font-size:10px}
@keyframes hsbar{to{width:100%}}
@keyframes hsdot{50%{opacity:.25}}
@media (max-width:960px){
 .hscreens{order:2;position:relative;top:auto;width:auto;padding:40px 36px 64px 24px}
 .hs-phone{right:-5%;bottom:-14%}
}
@media (max-width:480px){.hs-tv>.hs-screen{border-width:6px;border-radius:10px}.hs-badge{top:8px;left:8px;padding:4px 7px;font-size:10px}.hs-name{font-size:13px;bottom:10px;left:10px}.hs-logo{width:48px;height:27px;top:8px;right:8px}.hs-phone .hs-name{display:none}}
@media (prefers-reduced-motion:reduce){.hs-screen video{transition:none}.hs-badge::before{animation:none}}
/* v1.8.4 : rien par-dessus l'image (logos des chaînes visibles) ; « ● LIVE · nom » au-dessus de la télévision, à droite */
.hs-screen .hs-over{display:none}
.hs-cap{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:22px;margin:0 4px 10px;color:var(--ash-mist);font:500 13px/1.2 var(--font-sans);transition:opacity .4s}
.hs-cap.out{opacity:0}
.hs-cap .hs-badge,.hs-cap .hs-logo,.hs-cap .hs-name{position:static}
.hs-cap .hs-badge{padding:4px 8px;font-size:10px}
.hs-cap .hs-badge--vod{background:var(--hairline);color:var(--snow)}
.hs-cap .hs-name{color:var(--snow);font-weight:500;font-size:13px;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.hs-cap .hs-logo{display:none}
@media (max-width:480px){.hs-cap{font-size:12px;margin-bottom:8px}.hs-cap .hs-name{font-size:12px}}
.hs-cap .hs-badge{color:#ffffff}.hs-cap .hs-badge::before{background:#ffffff}
/* v1.8.5 : une seule télévision, un peu plus grande */
.hs-tv{width:min(100%,660px)}
@media (max-width:960px){.hscreens{padding-right:24px}}
