.portfolio-grid {
    display: grid;
    /* Utilisation de 1fr au lieu de 250px fixe pour que ça s'adapte à l'écran */
    grid-template-columns: repeat(4, 1fr); 
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 16px;
    margin: 30px 0;
}

.portfolio-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Classes de ratios */
.portfolio-wide { grid-column: span 2; grid-row: span 1; }
.portfolio-tall { grid-column: span 1; grid-row: span 2; }
.portfolio-square, .portfolio-standard { grid-column: span 1; grid-row: span 1; }

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

/* --- LIGHTBOX FIXES --- */

/* Supprime le fond orange que tu avais */
.dialog-type-lightbox {
    background-color: rgba(0, 0, 0, 0.9) !important; /* Noir profond */
}

/* Force le curseur en main sur l'image pour indiquer le clic possible */
.mfp-img {
    cursor: pointer !important;
}

/* Supprime le contour de sélection au clic sur les images */
.portfolio-lightbox-item {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    .portfolio-wide, .portfolio-tall { grid-column: span 1; grid-row: span 1; }
}