/* ============================
   CONTAINER MUURI
============================ */
.vlc-grid {
    position: relative;
}

/* ============================
   ITEM DE BASE
============================ */
.vlc-grid-item {
    position: absolute;
    width: calc(25% - 24px);
    margin: 12px;
    overflow: hidden;
    cursor: pointer;
    border: solid 1px #777;
    border-radius: 5px;
}

/* ============================
   TAILLES METRO (base 178px)
============================ */
.vlc-grid-item[data-cell="1x1"] {
    height: 178px;
}

.vlc-grid-item[data-cell="1x2"] {
    height: calc(178px * 2 + 24px);
}

.vlc-grid-item[data-cell="2x1"] {
    width: calc(50% - 24px);
    height: 178px;
}

.vlc-grid-item[data-cell="2x2"] {
    width: calc(50% - 24px);
    height: calc(178px * 2 + 24px);
}

/* ============================
   ITEMS CACHÉS (LOAD MORE)
============================ */
.vlc-item-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0 !important;
}

/* ============================
   CONTENU INTERNE
============================ */
.vlc-item-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transform: none !important; /* Neutralise Elementor */
}

/* ============================
   IMAGE (pas de zoom)
============================ */
.vlc-item-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================
   OVERLAY (voile doux)
============================ */
.vlc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.45s cubic-bezier(.25,.1,.25,1);
    pointer-events: none;
}

.vlc-grid-item:hover .vlc-overlay {
    background: rgba(0,0,0,0.35);
}

/* ============================
   ICÔNE PLAY
============================ */
.vlc-play-icon {
    width: 46px;
    height: 46px;
    position: relative;
    opacity: 0;
    transition: opacity 0.35s ease; /* uniquement le fondu */
}

.vlc-grid-item:hover .vlc-play-icon {
    opacity: 0.85; /* apparition douce */
}

.vlc-play-icon::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 11px;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent rgba(40,40,40,0.9);
}

/* ============================
   CAPTION – règle générale
============================ */
.vlc-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px; /* caché sous l’image */
    padding: 10px;
    color: white;
    font-size: 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s ease, bottom 0.35s ease;
    z-index: 3;
}

.vlc-grid-item:hover .vlc-caption {
    opacity: 1;
    transform: translateY(0);
    bottom: 0;
}

/* ============================
   CAPTION — ajustement 1x1
============================ */
.vlc-grid-item[data-cell="1x1"] .vlc-caption {
    bottom: -10px !important;          /* position initiale plus basse */
    transform: translateY(6px) !important; /* mouvement plus court */
    padding: 8px 10px;
    font-size: 13px;
}

/* Position finale du caption 1x1 */
.vlc-grid-item[data-cell="1x1"]:hover .vlc-caption {
    opacity: 1 !important;
    bottom: -4px !important;  /* ← hauteur finale ajustée */
    transform: translateY(0) !important;
}

/* ============================
   BOUTON LOAD MORE
============================ */
.vlc-load-more-wrapper {
    text-align: center;
    top: -22px;
    position: relative;
}

.vlc-load-more {
    padding: 10px 20px;
    background: #508CC8;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.vlc-load-more.hide {
    opacity: 0;
    pointer-events: none;
}