/* ============================================================
   Xibar Native — modules/xn-webtv.css
   Module « Web TV et vidéos » : bloc Web TV et dernières vidéos des
   accueils. Feuille enfilée seulement si le module est actif (handle
   xibar-module-webtv, inc/enqueue.php, lot L10). Règles extraites de
   xn-layout.css, dans leur ordre d'origine.
   ============================================================ */

/* ── Accueil 1 ─────────────────────────────────────────────── */
.xn-home1__yt-item { margin-bottom: 10px; }
.xn-home1__yt-item:last-child { margin-bottom: 0; }
.xn-home1__yt-item-thumb {
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
    margin-bottom: 6px;
    display: block;
}
.xn-home1__yt-item-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.xn-home1__yt-item-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--xn-color-white);
    font-size: 30px;
}
.xn-home1__yt-item-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ── Accueil 2 (et 4) ──────────────────────────────────────── */
/* Coins carres (liste generale des composants home2 : xn-layout.css). */
body.xn-home2-active .xn-home2__yt-item-thumb {
    border-radius: 0;
}

.xn-home2__yt-item-thumb {
    position: relative;
    display: block;
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-home2__yt-item-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-home2__yt-item-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--xn-color-white);
    font-size: 36px;
    transition: background var(--xn-transition);
}
.xn-home2__yt-item-thumb:hover .xn-home2__yt-item-play { background: rgba(39, 64, 178, .5); }

/* ── Accueil 3 ─────────────────────────────────────────────── */
/* Web TV facade YouTube */
.xn-home3__yt-item-thumb {
    position: relative;
    display: block;
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-home3__yt-item-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-home3__yt-item-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--xn-color-white);
    font-size: 36px;
    transition: background var(--xn-transition);
}
.xn-home3__yt-item-thumb:hover .xn-home3__yt-item-play { background: rgba(39, 64, 178, .5); }

/* Coins carres (liste generale des composants home3 : xn-layout.css). */
body.xn-home3-active .xn-home3__yt-item-thumb {
    border-radius: 0;
}

/* Coins carres home1 (liste generale des composants home1 : xn-layout.css). */
body.xn-home1-active .xn-home1__yt-item-thumb {
    border-radius: 0;
}

/* ──────────────────────────────────────────────────────────
   Bouton player video — cercle contour blanc, transparent.
   Cible les selecteurs play des 3 homes.
   ────────────────────────────────────────────────────────── */
.xn-home1__yt-item-play,
.xn-home2__yt-item-play,
.xn-home3__yt-item-play {
    position: absolute;
    /* inset:auto AVANT top/left — sinon le shorthand reset les
       positions a auto et le bouton sort de la zone du thumb. */
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--xn-color-white);
    background: transparent;
    color: transparent;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Triangle blanc via ::after (CSS-only, ne depend pas de la police).
   Le caractere ► dans le HTML est rendu invisible par font-size 0
   et color transparent du parent. */
.xn-home1__yt-item-play::after,
.xn-home2__yt-item-play::after,
.xn-home3__yt-item-play::after {
    content: '';
    border-style: solid;
    border-width: 7px 0 7px 14px;
    border-color: transparent transparent transparent var(--xn-color-white);
    margin-left: 3px;
}