/* VARIABLES */
:root {
    --fond-sombre: #0f1a14;
    --vert-congo: #009543;
    --jaune-congo: #fbde4a;
    --rouge-congo: #dc241f;
    --texte-clair: #f5f5f5;
    --texte-discret: #b8c4bc;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    color: var(--texte-clair);
    background-color: var(--fond-sombre);
}

h1, h2, h3 {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    line-height: 1.2;
}

img {
    max-width: 100%;
    display: block;
}

/* EN-TÊTE */
.en-tete {
    background-color: rgba(15, 26, 20, 0.95);
    border-bottom: 2px solid var(--vert-congo);
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 0;
    gap: 1rem;
}

.armoirie img {
    width: 70px;
    height: auto;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a {
    color: var(--texte-discret);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: var(--jaune-congo);
}

/* INTRO */
.intro {
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.intro h1 {
    color: var(--jaune-congo);
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.intro p {
    color: var(--texte-discret);
    margin: 0;
}

/* SECTION GALERIE */
.section-galerie {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.section-galerie h2 {
    text-align: center;
    color: var(--jaune-congo);
    margin: 0 0 2rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contrôles radio masqués (filtres + pagination) */
.controle-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.barre-outils {
    margin: 0 0 1.75rem;
    text-align: center;
}

.outils-titre {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--texte-discret);
}

.filtres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.puce-filtre,
.puce-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--texte-discret);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.puce-filtre:hover,
.puce-page:hover {
    border-color: var(--jaune-congo);
    color: var(--jaune-congo);
}

#filtre-tous:checked ~ .barre-outils label[for="filtre-tous"],
#filtre-brazzaville:checked ~ .barre-outils label[for="filtre-brazzaville"],
#filtre-architecture:checked ~ .barre-outils label[for="filtre-architecture"],
#filtre-monuments:checked ~ .barre-outils label[for="filtre-monuments"],
#page-1:checked ~ .pagination label[for="page-1"],
#page-2:checked ~ .pagination label[for="page-2"] {
    background-color: var(--vert-congo);
    border-color: var(--vert-congo);
    color: var(--texte-clair);
}

/* Filtre : masquer les cartes hors catégorie */
#filtre-brazzaville:checked ~ .galerie .carte:not([data-categorie="brazzaville"]),
#filtre-architecture:checked ~ .galerie .carte:not([data-categorie="architecture"]),
#filtre-monuments:checked ~ .galerie .carte:not([data-categorie="monuments"]) {
    display: none;
}

/* Pagination : page 1 / page 2 (quand filtre = Tous) */
#page-1:checked ~ .galerie .carte[data-page="2"],
#page-2:checked ~ .galerie .carte[data-page="1"] {
    display: none;
}

/* Avec un filtre actif, on ignore la pagination pour montrer toutes les cartes filtrées */
#filtre-brazzaville:checked ~ .galerie .carte[data-categorie="brazzaville"],
#filtre-architecture:checked ~ .galerie .carte[data-categorie="architecture"],
#filtre-monuments:checked ~ .galerie .carte[data-categorie="monuments"] {
    display: block;
}

#filtre-brazzaville:checked ~ .pagination,
#filtre-architecture:checked ~ .pagination,
#filtre-monuments:checked ~ .pagination {
    display: none;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-rows: 220px;
}

/* Image mise en avant : 2 colonnes × 2 lignes */
.galerie .vedette {
    grid-column: span 2;
    grid-row: span 2;
}

/* CARTE IMAGE */
.carte {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.carte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carte-lien {
    display: block;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.carte-lien:focus-visible {
    outline: 2px solid var(--jaune-congo);
    outline-offset: 3px;
}

/* OVERLAY AU HOVER */
.superposition {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.superposition h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    color: var(--jaune-congo);
    transform: translateY(12px);
    transition: transform 0.4s ease;
}

.superposition p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--texte-clair);
    transform: translateY(12px);
    transition: transform 0.4s ease 0.05s;
}

.carte:hover img {
    transform: scale(1.08);
}

.carte:hover .superposition {
    opacity: 1;
}

.carte:hover .superposition h3,
.carte:hover .superposition p {
    transform: translateY(0);
}

/* LIGHTBOX CSS pure (:target) — sans JavaScript */
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(4px);
}

.visionneuse:target {
    display: flex;
    animation: apparition-lightbox 0.3s ease;
}

html:has(.visionneuse:target) {
    overflow: hidden;
}

.visionneuse-fond {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.visionneuse-fermer {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--texte-clair);
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.visionneuse-fermer:hover {
    background-color: var(--jaune-congo);
    color: var(--fond-sombre);
}

.visionneuse-contenu {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.visionneuse-contenu img {
    max-height: 70vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
}

.visionneuse-contenu figcaption {
    margin-top: 1rem;
}

.visionneuse-contenu h3 {
    color: var(--jaune-congo);
    margin: 0 0 0.5rem;
}

.visionneuse-contenu p {
    color: var(--texte-discret);
    margin: 0;
}

@keyframes apparition-lightbox {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* CONTACT */
.contact {
    text-align: center;
    padding: 3rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact h2 {
    color: var(--jaune-congo);
    margin: 0 0 1rem;
}

.contact p {
    color: var(--texte-discret);
    margin: 0;
}

/* PIED DE PAGE */
.pied-page {
    text-align: center;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
    color: var(--texte-discret);
}

.pied-page p {
    margin: 0;
}

/* ===== RESPONSIVE — 3 BREAKPOINTS ===== */

/* Tablette : 2 colonnes */
@media (max-width: 1023px) {
    .galerie {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .galerie .vedette {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Mobile : 1 colonne */
@media (max-width: 767px) {
    .navigation {
        flex-direction: column;
        text-align: center;
    }

    .menu {
        justify-content: center;
        gap: 1rem;
    }

    .galerie {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }

    .galerie .vedette {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 300px;
    }
}