/* ─── Variables ───────────────────────────────────────────── */
.archive-tableau {
    --couleur-fond      : #f7f4ef;
    --couleur-texte     : #1a1a1a;
    --couleur-meta      : #7a6f62;
    --couleur-separateur: #d6cfc4;
    --couleur-survol    : #3b2e20;
    --rayon             : 2px;
    --ombre             : 0 2px 12px rgba(0, 0, 0, 0.08);
    --ombre-survol      : 0 8px 28px rgba(0, 0, 0, 0.15);

    background-color : var(--couleur-fond);
    color            : var(--couleur-texte);
    padding          : 2rem 2rem 6rem; /* titre à ~40 px de la navigation, comme les autres pages */
    min-height       : 100vh;
    font-family      : 'Georgia', 'Times New Roman', serif;
}

/* ─── Titre de la page ────────────────────────────────────── */
.archive-tableau__titre {
    font-size      : clamp(1.6rem, 3vw, 2.4rem);
    font-weight    : 400;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    text-align     : center;
    margin-bottom  : 2.5rem;
    color          : var(--couleur-texte);
}


/* ─── Filtres (cases, palette du site) ───────────────────── */
.archive-tableau__filtres {
    --filtre-encre  : #2c2416;
    --filtre-brun   : #5a4e3c;
    --filtre-sable  : #9a8a72;
    --filtre-filet  : #c8bfaa;
    --filtre-papier : #ede8de;

    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 1.3rem;
    max-width      : 760px;
    margin         : 0 auto;
    padding        : 1.2rem 1.5rem 1.3rem;
    background     : var(--filtre-papier);
    border         : 1px solid var(--filtre-filet);
    box-shadow     : 0 2px 12px rgba(44, 36, 22, 0.06);
    font-family    : 'Georgia', serif;
}

.archive-tableau__options {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 0.7rem;
    border          : 0;
    margin          : 0;
    padding         : 0;
    min-width       : 0;
}

.archive-tableau__option {
    position : relative;
    cursor   : pointer;
}

.archive-tableau__option input {
    position : absolute;
    opacity  : 0;
    inset    : 0;
    margin   : 0;
    cursor   : pointer;
}

.archive-tableau__option span {
    display        : inline-block;
    padding        : 0.75rem 1.4rem;
    background     : #fff;
    border         : 1px solid var(--filtre-filet);
    font-size      : 12px;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    color          : var(--filtre-brun);
    transition     : color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.archive-tableau__option:hover span {
    border-color : var(--filtre-brun);
    color        : var(--filtre-encre);
    box-shadow   : 0 3px 10px rgba(44, 36, 22, 0.10);
}

.archive-tableau__option input:checked + span {
    background   : var(--filtre-encre);
    border-color : var(--filtre-encre);
    color        : #f0ece3;
}

.archive-tableau__option input:focus-visible + span {
    outline        : 2px solid var(--filtre-sable);
    outline-offset : 3px;
}

/* Le filtre « eau » porte une petite case à cocher */
.archive-tableau__option--eau span::before {
    content       : '';
    display       : inline-block;
    width         : 8px;
    height        : 8px;
    margin-right  : 0.7em;
    border        : 1px solid currentColor;
    vertical-align: 0.05em;
}

.archive-tableau__option--eau input:checked + span::before {
    background : currentColor;
}

.archive-tableau__recherche {
    display   : flex;
    width     : 100%;
    max-width : 30rem;
}

.archive-tableau__recherche input[type="search"] {
    flex           : 1;
    min-width      : 0;
    padding        : 0.7rem 1rem;
    border         : 1px solid var(--filtre-filet);
    border-right   : 0;
    border-radius  : 0;
    background     : #fff;
    font-family    : 'Georgia', serif;
    font-size      : 15px;
    color          : var(--filtre-encre);
    outline        : none;
    transition     : border-color 0.3s ease;
}

.archive-tableau__recherche input[type="search"]:focus {
    border-color : var(--filtre-brun);
}

.archive-tableau__recherche input::placeholder {
    font-style : italic;
    color      : var(--filtre-sable);
    opacity    : 1;
}

.archive-tableau__recherche button {
    display        : flex;
    align-items    : center;
    gap            : 0.6rem;
    padding        : 0 1.3rem;
    border         : 1px solid var(--filtre-encre);
    border-radius  : 0;
    background     : var(--filtre-encre);
    color          : #f0ece3;
    font-family    : 'Georgia', serif;
    font-size      : 12px;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    cursor         : pointer;
    transition     : background-color 0.3s ease;
}

.archive-tableau__recherche button:hover,
.archive-tableau__recherche button:focus-visible {
    background   : var(--filtre-brun);
    border-color : var(--filtre-brun);
    color        : #f0ece3;
}

.archive-tableau__resultats {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 1rem;
    margin         : 1.4rem auto 2.8rem;
    font-family    : 'Georgia', serif;
    text-align     : center;
}

/* Filtres actifs (en haut) et nombre de tableaux (en bas, avec la pagination) */
.archive-tableau__compte {
    margin         : 0;
    font-size      : 14px;
    font-style     : italic;
    letter-spacing : 0.06em;
    color          : #9a8a72;
}

/* Tout afficher · Statistiques · Diaporama : même style de bouton */
.archive-tableau__actions {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 0.7rem;
}

.archive-tableau__action {
    display         : inline-flex;
    align-items     : center;
    gap             : 0.6em;
    padding         : 0.65rem 1.3rem;
    border          : 1px solid #9a8a72;
    border-radius   : 0;
    background      : #fff;
    font-family     : 'Georgia', serif;
    font-size       : 12px;
    font-style      : normal;
    letter-spacing  : 0.18em;
    text-transform  : uppercase;
    text-decoration : none;
    color           : #5a4e3c;
    cursor          : pointer;
    transition      : color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.archive-tableau__action[hidden] {
    display : none;
}

.archive-tableau__action:hover,
.archive-tableau__action:focus,
.archive-tableau__action:focus-visible {
    background   : #2c2416;
    border-color : #2c2416;
    color        : #f0ece3;
}

.archive-tableau__vide {
    font-style : italic;
    color      : #9a8a72 !important;
    text-align : center !important;
}

@media (max-width: 600px) {
    .archive-tableau__filtres {
        padding : 1rem 1rem 1.1rem;
    }

    .archive-tableau__option span {
        padding : 0.65rem 0.9rem;
        font-size : 11px;
        letter-spacing : 0.14em;
    }

    .archive-tableau__recherche button span {
        display : none; /* la loupe suffit sur petit écran */
    }

    .archive-tableau__recherche button {
        padding : 0 1rem;
    }
}

/* ─── Grille flex ─────────────────────────────────────────── */
.archive-tableau__grid {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 2rem;
    justify-content: center;
    max-width      : 1280px;
    margin         : 0 auto;
}

/* ─── Carte ───────────────────────────────────────────────── */
.archive-tableau__item {
    flex           : 0 1 calc(25% - 2rem); /* 4 colonnes par défaut */
    min-width      : 220px;
    max-width      : 320px;
    background     : #fff;
    border-radius  : var(--rayon);
    box-shadow     : var(--ombre);
    overflow       : hidden;
    transition     : box-shadow 0.3s ease, transform 0.3s ease;
    display        : flex;
    flex-direction : column;
}

.archive-tableau__item:hover {
    box-shadow : var(--ombre-survol);
    transform  : translateY(-4px);
}

/* ─── Image ───────────────────────────────────────────────── */
.archive-tableau__image-lien {
    display  : block;
    overflow : hidden;
    aspect-ratio: 4 / 3;
    background: var(--couleur-separateur);
}

.archive-tableau__image {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform 0.4s ease;
}

.archive-tableau__item:hover .archive-tableau__image {
    transform : scale(1.04);
}

.archive-tableau__image-placeholder {
    width      : 100%;
    height     : 100%;
    background : var(--couleur-separateur);
}

/* ─── Infos ───────────────────────────────────────────────── */
.archive-tableau__infos {
    padding    : 1rem 1.1rem 1.2rem;
    flex-grow  : 1;
    display    : flex;
    flex-direction: column;
    gap        : 0.5rem;
    border-top : 1px solid var(--couleur-separateur);
}

.archive-tableau__nom {
    font-size   : 0.95rem;
    font-weight : 400;
    line-height : 1.4;
    margin      : 0;
}

.archive-tableau__nom a {
    color           : var(--couleur-texte);
    text-decoration : none;
    transition      : color 0.2s ease;
}

.archive-tableau__nom a:hover {
    color : var(--couleur-survol);
}

.archive-tableau__meta {
    list-style  : none;
    margin      : 0;
    padding     : 0;
    display     : flex;
    flex-wrap   : wrap;
    gap         : 0.2rem 0.6rem;
}

.archive-tableau__meta li {
    font-size   : 0.78rem;
    color       : var(--couleur-meta);
    font-family : 'Arial', sans-serif;
    letter-spacing: 0.03em;
}

.archive-tableau__meta li:not(:last-child)::after {
    content     : '·';
    margin-left : 0.6rem;
    color       : var(--couleur-separateur);
}

/* Nombre de tableaux, au-dessus de la pagination */
.archive-tableau__compte--bas {
    margin-bottom : 1rem;
}

/* ─── Pagination ──────────────────────────────────────────── */

.archive-tableau__pagination nav {
    justify-content: center;
}

.archive-tableau__pagination {
    margin-top  : 4rem;
    text-align  : center;
}

.archive-tableau__pagination .nav-links {
    display     : flex;
    justify-content: center;
    gap         : 0.5rem;
    flex-wrap   : wrap;
    flex-direction: row;
}

.archive-tableau__pagination a,
.archive-tableau__pagination span {
    display         : inline-block;
    padding         : 0.4rem 0.9rem;
    border          : 1px solid var(--couleur-separateur);
    font-size       : 0.85rem;
    color           : var(--couleur-meta);
    text-decoration : none;
    font-family     : 'Arial', sans-serif;
    letter-spacing  : 0.04em;
    transition      : all 0.2s ease;
    background-color: #fff;
}

.archive-tableau__pagination a:hover {
    background  : var(--couleur-texte);
    color       : #fff;
    border-color: var(--couleur-texte);
}

.archive-tableau__pagination .current {
    background  : var(--couleur-texte);
    color       : #fff;
    border-color: var(--couleur-texte);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .archive-tableau__item {
        flex : 0 1 calc(33.333% - 2rem); /* 3 colonnes */
    }
}

@media (max-width: 700px) {
    .archive-tableau__item {
        flex : 0 1 calc(50% - 2rem); /* 2 colonnes */
    }
}

@media (max-width: 440px) {
    .archive-tableau__item {
        flex : 0 1 100%; /* 1 colonne */
    }
}