/*
 * Page Portfolio (app/Views/Site/pages/portfolio.php)
 * S'appuie sur style/css/accueil.css et style/css/galerie.css (grille, filtres, visionneuse).
 * Seule la page Portfolio a ces vignettes plus grandes ; les autres galeries gardent les leurs.
 */

.pf .gg-galerie {
    padding: 0 0 72px;
}

/* ---------- En-tête ---------- */

.pf-entete {
    padding-top: 72px;
    padding-bottom: 36px;
}

.pf h1 {
    margin: 0;
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.1;
}

.pf-lead {
    max-width: 640px;
    margin: 16px 0 0;
    color: #d6d6d6;
    font-size: clamp(16px, 1.4vw, 18px);
}

.pf .pf-filtres {
    justify-content: flex-start;
    max-width: none;
    margin: 28px 0 0;
    padding: 0;
}

/* ---------- Grille : vignettes plus grandes ---------- */

.pf .pf-grille {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    max-width: 1400px;
    padding: 0 24px;
}

@media (min-width: 1800px) {
    .pf .pf-grille {
        max-width: 1700px;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    }
}

.pf-vide {
    margin: 0;
    padding: 40px 24px;
    text-align: center;
}

/* ---------- Téléphone : 2 photos par ligne ---------- */

@media (max-width: 767px) {
    .pf-entete {
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .pf .pf-filtres {
        margin: 22px -16px 0;
        padding: 0 16px 4px;
    }

    .pf .pf-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 0 4px;
    }

    .pf .gg-galerie {
        padding-bottom: 48px;
    }
}

/* À partir de 768 px, le menu est fixe (80 px de haut) et recouvre le haut de la page */
@media (min-width: 768px) {
    .pf-entete {
        padding-top: 152px;
    }
}