/* ========================================
   PAGES RÉALISATIONS — ARCHIVE

   Chargé uniquement sur l'archive/taxonomie Realisation.
   Fichier extrait de page-realisation.css (perf + maintenance).
   ======================================== */

/* ========================================
   ARCHIVE — Hero Section
   ======================================== */
.archive-hero {
    padding: calc(var(--header-height) + var(--spacing-3xl)) 0 var(--spacing-2xl);
    background: var(--carbon-400);
    text-align: center;
}

.archive-hero__content {
    max-width: var(--max-width-section-narrow);
    margin: 0 auto;
}

.archive-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--white);
    margin: var(--spacing-md) 0;
}

.archive-hero__desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gray-400);
    margin: 0;
}


/* ========================================
   ARCHIVE — Filtres (Sticky)
   ======================================== */
.archive-filters {
    /* Layout */
    position: sticky;
    top: var(--header-height);
    z-index: calc(var(--z-header) - 1);
    
    /* Box Model */
    padding: var(--spacing-lg) 0;
    
    /* Visuel */
    background: var(--carbon-400);
    border-bottom: 1px solid var(--color-white-08);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.filters-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Styles des onglets/filtres centralisés dans components/ui-tabs.css */


/* ========================================
   ARCHIVE — Grille Cinématique
   ======================================== */
.archive-grid-section {
    padding: var(--spacing-3xl) 0;
    background: var(--carbon-400);
    min-height: 50vh;
}


/* ========================================
   ARCHIVE — Filtrage JS (Masquage/Affichage)
   ======================================== */
.grid-item {
    display: block;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.grid-item.is-hidden {
    display: none;
}

/* ========================================
   ARCHIVE — État vide
   ======================================== */
.archive-empty {
    padding: var(--spacing-3xl) 0;
    text-align: center;
}

.archive-empty p {
    font-size: 1.125rem;
    color: var(--gray-400);
    margin-bottom: var(--spacing-xl);
}


/* ========================================
   RESPONSIVE — Tablette
   ======================================== */
@media (max-width: 1024px) {
    /* Cinématique : responsive géré dans page-realisation.css (shared) */
}

/* ========================================
   RESPONSIVE — Mobile
   ======================================== */
@media (max-width: 768px) {
    .archive-hero {
        padding: calc(var(--header-height) + var(--spacing-2xl)) 0 var(--spacing-xl);
    }
    
    .archive-hero__title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }
    
    .filters-nav {
        gap: var(--spacing-sm);
    }
    
    /* `.filter-btn` : styles centralisés dans components/ui-tabs.css */
}