/* ─── Variables (identiques aux tableaux) ──────────────────── */
.archive-carte {
    --couleur-fond       : #f7f4ef;
    --couleur-texte      : #1a1a1a;
    --couleur-meta       : #72685c; /* contraste ≥ 4,5:1 sur #f0ece3 */
    --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-carte__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);
}


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

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

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

/* ─── Zone flip ───────────────────────────────────────────── */
.archive-carte__flip-lien {
    display     : block;
    perspective : 1000px;
}

.archive-carte__flip {
    position         : relative;
    transform-style  : preserve-3d;
    transition       : transform 0.6s ease;
    aspect-ratio     : 4 / 3;
    background       : var(--couleur-separateur);
}

.archive-carte__item.has-verso:hover .archive-carte__flip {
    transform : rotateY(180deg);
}

/* ─── Recto & Verso ───────────────────────────────────────── */
.archive-carte__recto,
.archive-carte__verso {
    position           : absolute;
    inset              : 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow           : hidden;
}

.archive-carte__verso {
    transform : rotateY(180deg);
}

.archive-carte__image {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

/* ─── Placeholder (pas d'image) ───────────────────────────── */
.archive-carte__placeholder {
    width            : 100%;
    height           : 100%;
    background       : var(--couleur-separateur);
    display          : flex;
    align-items      : center;
    justify-content  : center;
}

.archive-carte__placeholder--verso span {
    font-size      : 0.75rem;
    font-family    : 'Arial', sans-serif;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    color          : var(--couleur-meta);
}

/* ─── Infos ───────────────────────────────────────────────── */
.archive-carte__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-carte__nom {
    font-size   : 0.95rem;
    font-weight : 400;
    line-height : 1.4;
    margin      : 0;
}

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

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

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

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

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

/* ─── Pagination ──────────────────────────────────────────── */
.archive-carte__pagination {
    margin-top : 4rem;
    text-align : center;
}

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

.archive-carte__pagination a,
.archive-carte__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-carte__pagination a:hover {
    background   : var(--couleur-texte);
    color        : #fff;
    border-color : var(--couleur-texte);
}

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

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

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

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