/* CONTAINER GLOBAL S'ADAPTANT AU LECTEUR */
.suggested-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 46px); /* Laisse la barre de controle visible */
    background: rgba(0, 0, 0, 0.95); /* Fond noir cinema */
    z-index: 9999 !important;
    box-sizing: border-box;
    padding: 20px;
    
    /* CENTRAGE ABSOLU (Haut/Bas et Gauche/Droite) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* LES RANGEES DE COMPOSANTS */
.suggested-grid .grid-row {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    gap: 15px;
    margin: 8px 0;
}

.suggested-grid .grid-row a {
    flex: 1;
    display: block;
}

/* CONTROLE STRICT DES VISUELS 1080x459 */
.suggested-grid img {
    width: 100%;
    height: auto;
    max-height: 140px; /* Hauteur maximale sur grand Ecran */
    object-fit: cover;
    display: block;
    border-radius: 6px;
    border: 1px solid #222;
    cursor: pointer;
    transition: all 0.3s ease;
}

.suggested-grid img:hover {
    transform: scale(1.04);
    border-color: #f68338; /* Votre orange JVS */
    box-shadow: 0 4px 15px rgba(246, 131, 56, 0.4);
}

/* ==========================================
   ADAPTATION SPECIALE POUR LES MOBILES 
   ========================================== */
@media (max-width: 768px) {
    .suggested-grid {
        padding: 10px; /* Moins d'espace perdu sur les bords */
    }
    
    .suggested-grid .grid-row {
        gap: 8px; /* Rapproche les images */
        margin: 4px 0; /* Reduit l'espace entre la ligne du haut et du bas */
        max-width: 100%;
    }
    
    .suggested-grid img {
        max-height: 55px; /* FORCE les images a rester petites pour rentrer sans deborder */
        border-radius: 4px;
    }
}