/* Penta TV (/watch) : compléments à watch.css, dans un fichier à part pour ne pas retoucher l'ancienne feuille. */

/* Shorts : la vignette est un lien (styles autrefois écrits dans la page) */
a.row-poster.row-poster-vertical { display: block; background: #111; color: inherit; }
a.row-poster.row-poster-vertical:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* « Proposer une vidéo » sous le bloc À propos (styles autrefois écrits dans la page) */
.about-propose { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .05); }
.about-propose-texte { color: #888; font-size: .85rem; margin-bottom: 1rem; }
.about-propose-bouton { font-size: .8rem; padding: 10px 20px; }

/* Libellés lus par les lecteurs d'écran seulement */
.watch-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Vignettes enrichies ---------- */
.poster-legende-bas { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.poster-legende-bas .poster-legende-meta { margin-top: 0; }
.poster-ma-liste {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    background: transparent;
    color: #fff;
    font-size: .7rem;
    cursor: pointer;
}
.poster-ma-liste:hover, .poster-ma-liste:focus-visible { border-color: #fff; }
.poster-ma-liste.in-list { background: #fff; color: #111; border-color: #fff; }
.poster-nouveau {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
    background: #e50914;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: 3px;
    pointer-events: none;
}

/* ---------- Top 10 : grands numéros à côté des vignettes ---------- */
.poster-carte.poster-carte-top { display: flex; align-items: flex-start; width: auto; min-width: 0; flex-shrink: 0; }
.poster-carte-top .poster-carte-corps { width: 270px; flex-shrink: 0; position: relative; z-index: 1; }
.poster-carte-top .row-poster { width: 100%; min-width: 0; }
.top10-rang {
    font-size: 10rem;
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.06em;
    color: #0b0b0b;
    -webkit-text-stroke: 3px #5c5c5c;
    margin-right: -1.6rem;
    user-select: none;
    flex-shrink: 0;
}

/* ---------- Bannière qui défile ---------- */
.hero-points { display: flex; gap: .5rem; margin-top: 1.4rem; }
.hero-point {
    width: 28px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
}
.hero-point:hover, .hero-point:focus-visible { background: rgba(255, 255, 255, .7); }
.hero-point.actif { background: #fff; width: 40px; }
@media (prefers-reduced-motion: no-preference) {
    .hero-content.hero-change { animation: heroApparition .6s ease; }
    .hero-point { transition: width .3s ease, background .3s ease; }
}
@keyframes heroApparition {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Page de lecture : vidéo suivante ---------- */
.ptv-suivante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 10000;
    max-width: 22rem;
    padding: 1rem 1.2rem;
    background: #181818;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
}
.ptv-suivante p { margin: 0; }
.ptv-suivante-label { color: #a3a3a3; font-size: .8rem; }
.ptv-suivante-titre { font-weight: 700; margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ptv-suivante-actions { display: flex; gap: .5rem; margin-top: .8rem; }
.ptv-suivante-lire { background: #fff; color: #111; font-weight: 700; padding: .45rem .9rem; border-radius: 4px; text-decoration: none; }
.ptv-suivante-annuler { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); padding: .45rem .9rem; border-radius: 4px; cursor: pointer; }

@media (max-width: 768px) {
    .poster-carte-top .poster-carte-corps { width: 140px; }
    .top10-rang { font-size: 6.5rem; -webkit-text-stroke: 2px #5c5c5c; margin-right: -1rem; }
    .ptv-suivante { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}