/* ============================================================
   MAISON SILENCE — desktop.css v3
   Approche Flexbox — garantie de fonctionner
   ============================================================ */

/* ============================================================
   TABLETTE 640–1023px
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
    .header-sticky { padding: 18px 32px; }
    .page-section  { padding: 32px 32px; }
    .px-lg         { padding-left: 32px; padding-right: 32px; }
    .hero-title    { font-size: 3rem; }
    .pull-quote p  { font-size: 1.4rem; }
}


/* ============================================================
   DESKTOP ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {

    /* ----------------------------------------------------------
       1. HEADER
    ---------------------------------------------------------- */
    .header-sticky { padding: 20px 56px; }
    .brand-link    { font-size: 0.8rem; letter-spacing: 0.2em; }


    /* ----------------------------------------------------------
       2. FICHE PRODUIT — Layout Split-Screen
    ---------------------------------------------------------- */
    .product-split-layout {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 3rem;
        align-items: flex-start;
        padding-bottom: 0;
    }

    /* Colonne Visuelle — Sticky */
    .product-gallery-col {
        position: sticky;
        top: 80px;
        align-self: start;
        height: calc(100vh - 80px);
        background-color: #E6E6E3;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-gallery-col .gallery {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-gallery-col img {
        width: 100%;
        height: auto;
        max-height: 85vh;
        object-fit: contain !important;
        object-position: center top;
    }

    /* Colonne Infos — Scrollable */
    .product-info-col {
        overflow-y: auto;
        height: calc(100vh - 80px);
        padding-bottom: 80px;
        padding-left: 1rem;
    }

    /* Sections intérieures */
    .product-info-col .page-section { padding: 40px 48px; border-bottom: 0.5px solid var(--line); }
    .product-info-col .px-lg        { padding: 0 48px 48px; }

    /* CTA sticky (bas de page mobile) */
    .sticky-cta-container { padding: 20px 48px; }

    /* Typographie produit desktop */
    .product-info-col .text-2xl { font-size: 2.6rem; line-height: 1; }
    .product-info-col .product-description {
        font-size: 0.92rem;
        line-height: 1.8;
        max-width: 48ch;
    }

    /* Accordéons aérés */
    .accordion-item    { padding: 22px 0; }
    .accordion-content { padding-top: 16px; font-size: 0.88rem; line-height: 1.75; }

    /* Version selector */
    .version-selector { max-width: 440px; }
    .version-btn      { padding: 18px 20px; }
    .version-btn strong { font-size: 1.05rem; }


    /* ----------------------------------------------------------
       3. LOGO BANNER
    ---------------------------------------------------------- */
    .logo-banner { padding: 80px 56px; }
    .logo-banner a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo-banner-img {
        max-width: 300px;
        width: 35%;
        opacity: 0.9;
        transition: opacity 0.3s ease;
    }
    .logo-banner a:hover .logo-banner-img { opacity: 0.6; }


    /* ----------------------------------------------------------
       4. HERO CAROUSEL — Plein écran
    ---------------------------------------------------------- */
    .hero-carousel,
    .hero-track       { min-height: 100vh; }

    .hero-slide-text {
        min-height: 100vh;
        padding: 0 120px 100px;
        justify-content: flex-end;
        align-items: flex-start;
        text-align: left;
    }

    .hero-title  { font-size: 4rem; line-height: 1; max-width: 14ch; }
    .hero-lede   { font-size: 1rem; max-width: 34ch; text-align: left; }
    .hero-cta    { align-self: flex-start; }

    .hero-photo-caption {
        left: 56px;
        transform: none;
        text-align: left;
        bottom: 56px;
    }

    .hero-arrow { width: 56px; height: 56px; font-size: 1.3rem; }
    #hero-prev  { left: 32px; }
    #hero-next  { right: 32px; }
    .hero-dots  { bottom: 40px; gap: 12px; }
    .hero-dot   { width: 6px; height: 6px; }


    /* ----------------------------------------------------------
       5. FAMILLES ÉDITORIALES (accueil)
    ---------------------------------------------------------- */
    .family {
        min-height: 50vh;
        padding: 72px 120px;
    }
    .family-title   { font-size: 4.5rem; }
    .family-tagline { max-width: 36ch; font-size: 0.95rem; }


    /* ----------------------------------------------------------
       6. MANIFESTE & FOOTER
    ---------------------------------------------------------- */
    .manifesto       { padding: 120px 80px; }
    .manifesto-quote { font-size: 2.2rem; max-width: 26ch; }
    .footer          { padding: 60px 56px; }


    /* ----------------------------------------------------------
       7. COLLECTION — Grille 3 colonnes
    ---------------------------------------------------------- */
    .collection-grid,
    #collection-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .collection-banner {
        height: 55vh;
        max-height: 520px;
    }


    /* ----------------------------------------------------------
       8. PAGE ÉDITORIALE
    ---------------------------------------------------------- */
    .editorial-hero  { padding: 120px 120px 80px; }
    .editorial-title { font-size: 4rem; }
    .section-block   { padding: 80px 120px; max-width: 860px; margin: 0 auto; }
    .pull-quote      { padding: 100px 120px; }
    .pull-quote p    { font-size: 2rem; max-width: 28ch; }
    .cta-end         { padding: 120px 80px; }
    .cta-end h2      { font-size: 2.4rem; }

    .editorial-photo-split .editorial-split-img { aspect-ratio: 2/3; }
    .editorial-photo-full                       { max-height: 82vh; }


    /* ----------------------------------------------------------
       9. DRAWER PANIER
    ---------------------------------------------------------- */
    .cart-drawer  { width: 500px; }
    .cart-header,
    .cart-body,
    .cart-footer  { padding-left: 40px; padding-right: 40px; }
}

/* ============================================================
   CAROUSEL RESPONSIVE — Media Queries
   ============================================================ */
/* Mobile/Tablette (< 1024px) — défaut */
.hero-slide-photo img {
    height: 60vh;
    object-fit: cover;
    object-position: center top;
}

/* Laptop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .hero-slide-photo img {
        height: 75vh;
        object-fit: cover;
        object-position: center 20%;
    }
}

/* Large screens (≥ 1440px) */
@media (min-width: 1440px) {
    .hero-slide-photo img {
        height: 90vh;
        object-fit: cover;
        object-position: center;
    }
}