/* ============================================
   ARCHIVE.CSS — Page archive façon Zaha Hadid
   Grille épurée, filtres latéraux, pagination
   ============================================ */

.archive-body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* === HEADER === */
.archive-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}

.archive-header-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.archive-header .logo-text {
    background: var(--color-black);
    color: var(--color-white);
    padding: 4px 10px;
    font-size: var(--text-xs);
}

.archive-nav { display: none; }

.archive-nav ul {
    display: flex;
    gap: var(--space-6);
}

.archive-nav .nav-link {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.archive-nav .nav-link:hover,
.archive-nav .nav-link.is-active {
    color: var(--color-text);
}

.archive-nav .nav-link.is-active {
    position: relative;
}

.archive-nav .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background-color: var(--color-accent);
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
}

.menu-toggle span {
    background-color: var(--color-text);
    height: 2px;
    width: 100%;
}

@media (min-width: 768px) {
    .archive-nav { display: block; }
    .menu-toggle { display: none; }
}

/* === MAIN === */
.archive-main {
    padding-bottom: var(--space-24);
}

/* === TITRE === */
.archive-title-section {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-16) var(--container-padding) var(--space-8);
    text-align: center;
}

.archive-title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.archive-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}

/* === FILTRES === */
.archive-filters {
    position: sticky;
    top: 60px;
    z-index: 50;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-8);
}

.filters-row {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.filters-row:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    margin-right: var(--space-3);
    min-width: 80px;
}

.filter-chip {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.filter-chip:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.filter-chip.is-active {
    background-color: var(--color-surface-invert);
    color: var(--color-on-invert);
    border-color: var(--color-surface-invert);
}

/* Recherche */
.filters-row-search {
    margin-top: var(--space-3);
}

#archive-search {
    flex: 1;
    max-width: 360px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    background-color: var(--color-surface-input);
    border: 1px solid var(--color-border-strong);
    font-family: var(--font-sans);
    color: var(--color-text);
}

#archive-search:focus {
    outline: none;
    border-color: var(--color-text);
}

#archive-search::placeholder {
    color: var(--color-text-muted);
}

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

/* === GRILLE === */
.archive-grid-section {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.archive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    /* Scroll snap vertical : caler au top de chaque card pour éviter
       de couper une ligne au milieu lors du scroll de la page. */
    scroll-snap-type: y proximity;
}

@media (min-width: 480px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 700px) {
    .archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1000px) {
    .archive-grid {
        /* Mêmes proportions que la home : 5 cards par ligne en grand écran */
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-3);
    }
}

@media (min-width: 1400px) {
    .archive-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.archive-grid .loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Card archive — même format que .thumb de la home (4/3 paysage) */
.archive-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    scroll-snap-align: start;
    scroll-margin-top: var(--space-16);     /* laisse de l'air au-dessus quand snap */
}

.archive-card-image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;                    /* MÊME ratio que les thumbs de la home */
    overflow: hidden;
    background-color: var(--color-bg-alt);
    margin-bottom: var(--space-2);
}

/* Sur mobile : 1 col plein écran. Ratio 16/9 (plus paysage) pour mieux
   mettre en valeur les photos d'architecture sans les couper */
@media (max-width: 767px) {
    .archive-card-image-wrap {
        aspect-ratio: 16 / 9;
    }
}

.archive-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s var(--ease-out);
}

.archive-card:hover .archive-card-image {
    transform: scale(1.04);
}

.archive-card-meta {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    margin-bottom: 2px;
}

.archive-card-title {
    font-size: 13px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
    color: var(--color-text);
    margin-bottom: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .archive-card-title {
        font-size: 14px;
    }
}

.archive-card:hover .archive-card-title {
    color: var(--color-accent);
}

.archive-card-location {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* === EMPTY === */
.archive-empty {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

.archive-empty .link-underline {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    font-family: inherit;
}

/* === PAGINATION === */
.archive-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.btn-load-more {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    font-family: var(--font-sans);
}

.btn-load-more:hover {
    background-color: var(--color-surface-invert);
    color: var(--color-on-invert);
}

.btn-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}