/**
 * Galerie photos presse.
 *
 * Grille masonry légère (CSS columns) respectant les ratios portrait/paysage,
 * légendes discrètes en monospace avec crédit, cartes thématiques sur l'index.
 * Charte du site (variables --brand-*), compatible thème clair et sombre.
 */

/* ---- Cartes thématiques (index /photos/) ---- */
.photos-thematiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.photos-carte {
    display: flex;
    flex-direction: column;
    background: var(--brand-linen, #f2f2f2);
    border: 1px solid rgba(102, 178, 178, 0.25);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: rgba(0, 76, 76, 0.06) 0 2px 8px, rgba(0, 0, 0, 0.04) 0 1px 3px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.photos-carte:hover,
.photos-carte:focus-visible {
    transform: translateY(-4px);
    box-shadow: rgba(0, 76, 76, 0.14) 0 8px 24px, rgba(0, 0, 0, 0.06) 0 2px 6px;
    border-color: var(--brand-teal, #66b2b2);
}

.photos-carte:focus-visible {
    outline: 3px solid var(--brand-gold, #fbb03b);
    outline-offset: 2px;
}

.photos-carte-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--brand-dark, #004c4c);
}

.photos-carte-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.photos-carte:hover .photos-carte-media img {
    transform: scale(1.04);
}

.photos-carte-corps {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.photos-carte-titre {
    font-weight: 700;
    color: var(--brand-dark, #004c4c);
}

.photos-carte-meta {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}

/* ---- Galerie masonry ---- */
.galerie-photos {
    columns: 3 260px;
    column-gap: 1.25rem;
    margin-top: 1.5rem;
}

.galerie-photo {
    break-inside: avoid;
    margin: 0 0 1.25rem;
    background: var(--brand-linen, #f2f2f2);
    border: 1px solid rgba(102, 178, 178, 0.2);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: rgba(0, 76, 76, 0.06) 0 2px 8px, rgba(0, 0, 0, 0.04) 0 1px 3px;
}

.galerie-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.galerie-photo figcaption {
    padding: 0.5rem 0.75rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #475569);
    background: var(--brand-teal-light, #e8f4f4);
}

/* ---- Licence ---- */
.photos-licence {
    max-width: 72ch;
}

.photos-licence p {
    line-height: 1.75;
    color: var(--text-secondary, #475569);
}

.galerie-licence-lien {
    margin-top: 1.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #475569);
}

.galerie-licence-lien i {
    color: var(--brand-teal, #66b2b2);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .galerie-photos {
        columns: 2 150px;
        column-gap: 0.85rem;
    }
    .galerie-photo {
        margin-bottom: 0.85rem;
    }
}

/* ---- Accessibilité : mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
    .photos-carte,
    .photos-carte-media img {
        transition: none;
    }
    .photos-carte:hover {
        transform: none;
    }
    .photos-carte:hover .photos-carte-media img {
        transform: none;
    }
}