/* ==========================================================================
   assets/css/catalogue.css
   --------------------------------------------------------------------------
   PAGE  : /chaussures.php  →  app/Views/products/list.php
   RÔLE  : Tous les styles visuels de la page catalogue publique
   --------------------------------------------------------------------------
   CHARGEMENT :
   - Injecté via $pageCssUrl dans ProductController::list()
   - Chargé APRÈS theme.css, utilities.css, app.css (variables disponibles)
   --------------------------------------------------------------------------
   DÉPENDANCES CSS :
   - var(--site-*) définis dans assets/css/app.css
   - .mk-shell       défini dans assets/css/app.css
   --------------------------------------------------------------------------
   DÉPENDANCES JS :
   - assets/js/app.js → App.publicApp.initCatalogueFilters()
     (filtre genre + compteur dynamique + état vide)
   --------------------------------------------------------------------------
   STRUCTURE HTML COUVERTE :
   .catalogue-page
     .catalogue-intro
       .catalogue-intro__eyebrow
       .catalogue-intro__heading
         .catalogue-intro__title-wrap
           .catalogue-intro__title
           .catalogue-intro__tagline
           .catalogue-intro__count
     .catalogue-toolbar
       .catalogue-toolbar__inner
         .catalogue-filter (.is-active)
     .catalogue-content
       .catalogue-empty
         .catalogue-empty__icon
         .catalogue-empty__title
         .catalogue-empty__text
       .catalogue-grid
         .catalogue-card (.catalogue-card--featured) (.catalogue-card--no-image)
           .catalogue-card__link (.catalogue-card__link--disabled)
             .catalogue-card__media
               .catalogue-card__img
               .catalogue-card__placeholder
               .catalogue-card__badge
             .catalogue-card__body
               .catalogue-card__title
               .catalogue-card__meta
                 .catalogue-card__code
                 .catalogue-card__gender
       .catalogue-no-results
   --------------------------------------------------------------------------
   NOTE JS : Le <script> inline présent dans list.php est un doublon.
   La logique vit déjà dans assets/js/app.js (App.publicApp.initCatalogueFilters).
   Supprimer le bloc inline de list.php une fois ce CSS en place.
   ========================================================================== */


/* ==========================================================================
   1. WRAPPER DE PAGE
   --------------------------------------------------------------------------
   Fond global et padding top pour compenser le header fixe.
   ========================================================================== */

.catalogue-page {
    width: 100%;
    background: var(--site-bg);
}


/* ==========================================================================
   2. INTRO
   --------------------------------------------------------------------------
   Bandeau d'introduction : label, titre, tagline, compteur.
   Structure stable — ne bouge pas quand les filtres s'activent.
   ========================================================================== */

.catalogue-intro {
    padding: 72px 0 48px;
    border-bottom: 1px solid var(--site-line);
}

/* Eyebrow "Catalogue" */
.catalogue-intro__eyebrow {
    margin: 0 0 16px;
    color: var(--site-text-faint);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Conteneur titre + tagline + compteur */
.catalogue-intro__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.catalogue-intro__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

/* H1 principal */
.catalogue-intro__title {
    margin: 0 0 10px;
    font-family: "Cabinet Grotesk", "Satoshi", sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--site-text);
}

/* Sous-titre éditorial */
.catalogue-intro__tagline {
    margin: 0 0 18px;
    color: var(--site-text-soft);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    line-height: 1.5;
    max-width: 480px;
}

/* Compteur dynamique (mis à jour par JS au filtrage) */
.catalogue-intro__count {
    margin: 0;
    color: var(--site-text-faint);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}


/* ==========================================================================
   3. BARRE DE FILTRES
   --------------------------------------------------------------------------
   Filtres de genre : pill buttons.
   .is-active géré par assets/js/app.js (initCatalogueFilters).
   ========================================================================== */

.catalogue-toolbar {
    padding: 20px 0;
    border-bottom: 1px solid var(--site-line);
    position: sticky;
    top: var(--site-header-h);
    z-index: 10;
    background: rgba(7, 11, 8, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.catalogue-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Pill filtre */
.catalogue-filter {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--site-border-soft);
    border-radius: var(--site-radius-pill);
    background: transparent;
    color: var(--site-text-soft);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        border-color var(--site-transition-fast),
        background var(--site-transition-fast),
        color var(--site-transition-fast);
}

.catalogue-filter:hover {
    border-color: rgba(212, 245, 74, 0.28);
    color: var(--site-text);
}

/* Filtre actif */
.catalogue-filter.is-active {
    border-color: var(--site-accent);
    background: rgba(212, 245, 74, 0.1);
    color: var(--site-accent);
}

.catalogue-filter:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
}


/* ==========================================================================
   4. ZONE DE CONTENU
   ========================================================================== */

.catalogue-content {
    padding: 48px 0 96px;
}


/* ==========================================================================
   5. ÉTAT VIDE
   --------------------------------------------------------------------------
   Affiché quand aucun produit n'existe dans la base.
   ========================================================================== */

.catalogue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    gap: 16px;
}

.catalogue-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--site-surface);
    color: var(--site-text-faint);
    border: 1px solid var(--site-border-soft);
}

.catalogue-empty__title {
    margin: 0;
    color: var(--site-text);
    font-size: 1.15rem;
    font-weight: 700;
}

.catalogue-empty__text {
    margin: 0;
    color: var(--site-text-soft);
    font-size: 0.92rem;
    max-width: 380px;
    line-height: 1.6;
}


/* ==========================================================================
   6. GRILLE PRODUITS
   --------------------------------------------------------------------------
   Grille auto-fill avec une carte "featured" en avant.
   Layout :
   - Desktop  : 3 colonnes, la première carte prend 2 colonnes + 2 lignes
   - Tablette : 2 colonnes
   - Mobile   : 1 colonne
   ========================================================================== */

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


/* ==========================================================================
   7. CARTE PRODUIT
   --------------------------------------------------------------------------
   Structure BEM :
   .catalogue-card                    → article de base
   .catalogue-card--featured          → première carte avec image (mise en avant)
   .catalogue-card--no-image          → carte sans visuel
   .catalogue-card__link              → lien wrapping toute la carte
   .catalogue-card__media             → zone image/placeholder
   .catalogue-card__img               → balise <img>
   .catalogue-card__placeholder       → SVG affiché si pas d'image
   .catalogue-card__badge             → label "Focus"
   .catalogue-card__body              → zone texte
   .catalogue-card__title             → nom du produit
   .catalogue-card__meta              → code modèle + genre
   .catalogue-card__code              → code modèle
   .catalogue-card__gender            → genre (Homme / Femme / Unisexe)
   ========================================================================== */

.catalogue-card {
    position: relative;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface);
    border: 1px solid var(--site-border-soft);
    overflow: hidden;
    transition:
        border-color var(--site-transition-base),
        transform var(--site-transition-base),
        box-shadow var(--site-transition-base);
}

.catalogue-card:hover {
    border-color: rgba(212, 245, 74, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--site-shadow-md);
}

/* --- Carte featured : occupe 2 colonnes et 2 lignes --- */
.catalogue-card--featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* --- Carte sans image : style léger réduit --- */
.catalogue-card--no-image .catalogue-card__media {
    aspect-ratio: unset;
    min-height: 100px;
}

/* --------------------------------------------------------------------------
   Lien wrapping
   -------------------------------------------------------------------------- */
.catalogue-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    outline: none;
}

.catalogue-card__link:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 2px;
    border-radius: var(--site-radius-sm);
}

/* Lien désactivé (productId = 0) */
.catalogue-card__link--disabled {
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Media (image ou placeholder)
   -------------------------------------------------------------------------- */
.catalogue-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;       /* Portrait produit */
    overflow: hidden;
    background: var(--site-surface-2);
    flex-shrink: 0;
}

/* Carte featured : ratio plus ouvert */
.catalogue-card--featured .catalogue-card__media {
    aspect-ratio: 3 / 4;
    flex: 1 1 auto;
}

/* Image */
.catalogue-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.catalogue-card:hover .catalogue-card__img {
    transform: scale(1.03);
}

/* Placeholder SVG (pas d'image) */
.catalogue-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--site-text-faint);
}

/* Badge "Focus" */
.catalogue-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    border-radius: var(--site-radius-pill);
    background: var(--site-accent);
    color: #10130a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Body (texte)
   -------------------------------------------------------------------------- */
.catalogue-card__body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Carte featured : padding plus généreux */
.catalogue-card--featured .catalogue-card__body {
    padding: 20px 24px 26px;
}

/* Nom du produit */
.catalogue-card__title {
    margin: 0;
    font-family: "Cabinet Grotesk", "Satoshi", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--site-text);
    transition: color var(--site-transition-fast);
}

.catalogue-card--featured .catalogue-card__title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.catalogue-card:hover .catalogue-card__title {
    color: var(--site-accent);
}

/* Meta : code + genre */
.catalogue-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Code modèle */
.catalogue-card__code {
    font-family: "Satoshi", monospace;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--site-text-faint);
    letter-spacing: 0.04em;
}

/* Pill genre */
.catalogue-card__gender {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--site-radius-pill);
    border: 1px solid var(--site-border-soft);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--site-text-soft);
    letter-spacing: 0.04em;
}


/* ==========================================================================
   8. MESSAGE AUCUN RÉSULTAT (après filtre JS)
   --------------------------------------------------------------------------
   Affiché par JS si le filtre actif renvoie 0 cartes visibles.
   L'attribut [hidden] est géré par assets/js/app.js.
   ========================================================================== */

.catalogue-no-results {
    padding: 48px 0;
    text-align: center;
    color: var(--site-text-soft);
    font-size: 0.95rem;
}

.catalogue-no-results p {
    margin: 0;
}


/* ==========================================================================
   9. RESPONSIVE
   --------------------------------------------------------------------------
   Un seul bloc par breakpoint, du plus large au plus étroit.
   ========================================================================== */

/* --- Tablette : 2 colonnes, featured reprend 1 seule ligne --- */
@media (max-width: 991.98px) {
    .catalogue-intro {
        padding: 56px 0 36px;
    }

    .catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Featured : 2 colonnes, 1 seule ligne */
    .catalogue-card--featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    .catalogue-card--featured .catalogue-card__media {
        aspect-ratio: 16 / 7;
    }
}

/* --- Mobile : 1 colonne, toutes les cartes identiques --- */
@media (max-width: 575.98px) {
    .catalogue-intro {
        padding: 40px 0 28px;
    }

    .catalogue-intro__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .catalogue-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .catalogue-card--featured {
        grid-column: span 1;
        grid-row: span 1;
    }

    .catalogue-card--featured .catalogue-card__media {
        aspect-ratio: 4 / 5;
    }

    .catalogue-toolbar {
        padding: 14px 0;
    }

    .catalogue-toolbar__inner {
        gap: 6px;
    }

    .catalogue-filter {
        height: 32px;
        padding: 0 14px;
        font-size: 0.82rem;
    }
}


/* ==========================================================================
   10. RÉDUCTION D'ANIMATIONS
   --------------------------------------------------------------------------
   Respect des préférences utilisateur.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .catalogue-card,
    .catalogue-card__img,
    .catalogue-filter {
        transition: none !important;
    }

    .catalogue-card:hover {
        transform: none;
    }

    .catalogue-card:hover .catalogue-card__img {
        transform: none;
    }
}