/* =========================================================
   style-cctv.css
   AJOUT uniquement — ne pas modifier style.css existant.

   À inclure dans header.php après style.css :
   <link rel="stylesheet" href="<?= asset('css/style-cctv.css') ?>">
========================================================= */

/* Angles droits — cohérence avec le vocabulaire carré CCTV    */
.post-item:has(.cctv-item) {
    border-radius: 0;
}

/* Image de base : noir & blanc + assombrie par défaut
   Au hover : couleurs restaurées                               */
.cctv-item .cctv-base-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) brightness(0.6);
    transition: filter 0.35s ease;
}
.cctv-item:hover .cctv-base-img {
    filter: grayscale(0%) brightness(1);
}

/* Overlay CCTV : visible par défaut, disparaît au hover       */
.cctv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
}
.cctv-item:hover .cctv-overlay {
    opacity: 0;
}

/* Badges masqués par défaut, révélés au hover                 */
.cctv-item .cat-overlay-text,
.cctv-item .duration-badge,
.cctv-item .channel-badge {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.cctv-item:hover .cat-overlay-text,
.cctv-item:hover .duration-badge,
.cctv-item:hover .channel-badge {
    opacity: 1;
}

/* Tous les éléments au-dessus de l'overlay                    */
.cctv-item .cat-overlay-text,
.cctv-item .duration-badge,
.cctv-item .channel-badge { z-index: 5; }
.cctv-item .post-title-overlay { z-index: 4; }
.cctv-item::after { z-index: 4; }