/* ============================================================
   Page /collections — entrée éditoriale par univers.
   ============================================================ */

.page-collections-main {
    background: var(--color-bg-page);
    /* Clippe le débordement horizontal des chips scrollables (marges négatives
       en mobile pour aller bord à bord) — sinon toute la page devient
       scrollable horizontalement sur mobile. */
    overflow-x: hidden;
}

/* ============================================================
   1. INTRO
   ============================================================ */

.page-collections-intro {
    /* Mobile : le titre serif et le sous-titre sont centrés et larges ; le
       padding latéral du .container (16px) est trop serré, le texte arrivait
       bord à bord. On ajoute de la respiration horizontale ici. */
    padding: var(--sp-12) var(--sp-3) 0;
    text-align: center;
}

@media (min-width: 720px) {
    .page-collections-intro {
        padding-inline: 0;
    }
}

.page-collections-crumb {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin-bottom: var(--sp-4);
}

.page-collections-title {
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}

.page-collections-sub {
    max-width: 580px;
    margin: var(--sp-4) auto 0;
    color: var(--color-text-soft);
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
}

/* ---------- Chips d'accès rapide ----------
   Mobile : 1 seule ligne en scroll horizontal (snap doux).
   Desktop : flex wrap centré.
   Ce sont des liens <a>, pas des filtres. */

.page-collections-chips {
    display: flex;
    gap: var(--sp-2);
    margin: var(--sp-8) 0 var(--sp-2);

    /* Mobile-first : scroll horizontal */
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* Le scroll des chips doit aller bord à bord de l'écran. On annule donc
       le padding latéral du .container (--sp-4 = 16px) ET le padding latéral
       de .page-collections-intro (--sp-3 = 12px) via une marge négative, puis
       on re-padde d'autant pour que le 1er/dernier chip s'aligne sur le texte
       sans être coupé au bord. */
    padding: var(--sp-1) calc(var(--sp-4) + var(--sp-3));
    margin-left: calc((var(--sp-4) + var(--sp-3)) * -1);
    margin-right: calc((var(--sp-4) + var(--sp-3)) * -1);
}

.page-collections-chips::-webkit-scrollbar {
    display: none;
}

.page-collections-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-soft);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 9px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.page-collections-chip:hover {
    border-color: var(--color-orange-dark);
    color: var(--color-text);
}

@media (min-width: 720px) {
    .page-collections-chips {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}

/* ============================================================
   2. LABEL DE SECTION
   ============================================================ */

.page-collections-label {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: var(--sp-8) 0 var(--sp-6);
}

.page-collections-label span {
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-orange-dark);
    font-weight: var(--fw-semibold);
}

.page-collections-label-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ============================================================
   3. BANDEAU VEDETTE
   ============================================================ */

.page-collections-featured {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gradient-atelier);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--sp-6);
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
}

.page-collections-featured:hover {
    transform: translateY(-3px);
}

/* Desktop : image en background couvrant tout. object-position avec un Y
   bas (~30%) recadre vers le haut de la photo, ce qui descend visuellement
   les cadres dans le bandeau (les laisse mieux en place sans qu'ils dépassent
   en haut). Overlay sombre côté texte pour lisibilité. */
.page-collections-featured-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.page-collections-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 12, 6, 0.72) 0%, rgba(20, 12, 6, 0.35) 55%, rgba(20, 12, 6, 0.1) 100%);
    pointer-events: none;
}

.page-collections-featured-text {
    position: relative;
    z-index: 2;
    padding: var(--sp-10);
    max-width: 60%;
}

.page-collections-featured-text small {
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.85;
}

.page-collections-featured-text h2 {
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    font-size: 42px;
    line-height: 1.05;
    margin: var(--sp-3) 0 var(--sp-2);
    color: #fff;
}

.page-collections-featured-text p {
    opacity: 0.92;
    max-width: 380px;
    margin-bottom: var(--sp-5);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
}

.page-collections-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: inherit;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    padding: 13px 24px;
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    color: var(--color-text);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.page-collections-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.page-collections-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   4. GRILLE UNIVERS
   ============================================================ */

.page-collections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
}

.page-collections-uni {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
}

.page-collections-uni:hover {
    transform: translateY(-4px);
}

/* Image OVH en background plein cadre + overlay sombre bas pour lisibilité
   du texte posé en bas. */
.page-collections-uni-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}

.page-collections-uni::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(20, 12, 6, 0.78) 0%, rgba(20, 12, 6, 0.25) 55%, rgba(20, 12, 6, 0) 100%);
    pointer-events: none;
}

.page-collections-uni-text {
    position: relative;
    z-index: 2;
    padding: var(--sp-8);
}

.page-collections-uni-text h3 {
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    font-size: 27px;
    line-height: 1.1;
    color: #fff;
    margin: var(--sp-1) 0 var(--sp-1);
}

.page-collections-uni-sample {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: var(--sp-2);
}

.page-collections-uni-cta {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
    /* Bandeau vedette : image en haut (aspect 16:9), texte sur fond vert
       atelier en dessous. Plus lisible qu'un overlay sur image plein écran. */
    .page-collections-featured {
        display: block;
        min-height: 0;
        background: var(--gradient-atelier);
    }
    .page-collections-featured-bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-position: 50% 35%;
    }
    .page-collections-featured::after {
        display: none;
    }
    .page-collections-featured-text {
        max-width: 100%;
        padding: var(--sp-6) var(--sp-6) var(--sp-8);
    }
    .page-collections-featured-text h2 {
        font-size: 28px;
    }

    /* Grille univers : 1 colonne, overlay sombre gauche → transparent droite
       pour que le texte posé en haut-gauche reste lisible sur l'image. */
    .page-collections-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .page-collections-uni {
        min-height: 220px;
        align-items: flex-start;
    }
    .page-collections-uni::after {
        background: linear-gradient(90deg, rgba(20, 12, 6, 0.55) 0%, rgba(20, 12, 6, 0.2) 50%, rgba(20, 12, 6, 0) 75%);
    }
    .page-collections-uni-text {
        padding: var(--sp-5);
        max-width: 60%;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .page-collections-uni-text h3 {
        font-size: 22px;
        line-height: 1.1;
    }
}