/* Homepage enrichment sections — dropshipping generic.
   Sections: categories, discover products, featured products, featured bundles.
   Reuses .pc-grid / .pc-cat / .pc-card / .pc-grid--cats from
   product-card-modern.css + catalog-modern-extras.css. */

.m-cats,
.m-newprods,
.m-featprods,
.m-featbundles {
    max-width: 1360px;
    margin: 64px auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    .m-cats,
    .m-newprods,
    .m-featprods,
    .m-featbundles {
        margin: 40px auto;
        padding: 0 16px;
    }
}

/* Shared section header (title centered + right-side "See all" link).
   Desktop layout: three-column CSS grid where the middle column is fully
   centered (the "Tout voir" link floats to the right without pushing
   the title off-center). On mobile the link stacks below, centered. */
.m-section-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 12px 24px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.m-section-head > .m-section-heading {
    grid-column: 2;
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
}

.m-section-head > .m-section-link {
    grid-column: 3;
    justify-self: end;
    align-self: end;
}

.m-section-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    line-height: 1.15;
    color: #1a1a1a;
}

.m-section-lede {
    font-size: 0.95rem;
    color: #666;
    margin: 0 auto;
    line-height: 1.5;
    max-width: 60ch;
}

.m-section-link {
    /* Secondary CTA — pill shape, subtle 1px border. More visible than a
       plain text link while staying restrained (marketplace/editorial). */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 9px 18px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    background: transparent;
    transition: background 180ms ease, border-color 180ms ease,
                color 180ms ease, transform 180ms ease;
}

.m-section-link__arrow {
    display: inline-block;
    transform: translateX(0);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.m-section-link:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.m-section-link:hover .m-section-link__arrow {
    transform: translateX(3px);
}

@media (max-width: 640px) {
    .m-section-head {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .m-section-head > .m-section-heading {
        grid-column: 1;
    }
    .m-section-head > .m-section-link {
        grid-column: 1;
        justify-self: center;
    }
}

/* Home categories grid: 4-across desktop (fixed columns for a controlled
   marketplace grid — no auto-fill that leaks to 5 on wide screens),
   slightly landscape 16/10 ratio (rectangular, not square) to match the
   editorial vibe on the "Univers" page while keeping density.
   Tablet: 3-across, mobile: 2-across. */
.pc-grid--cats-home {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 24px;
}

.pc-grid--cats-home .pc-cat {
    aspect-ratio: 16 / 10;
    min-height: 180px;
    border-radius: 14px;
    overflow: hidden;
}

@media (max-width: 1180px) {
    .pc-grid--cats-home {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    }
}

@media (max-width: 720px) {
    .pc-grid--cats-home {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 14px;
        row-gap: 14px;
    }
    .pc-grid--cats-home .pc-cat {
        aspect-ratio: 4 / 3;
        min-height: 150px;
    }
}

/* Mobile-only breathing room for the HOME categories grid.
   Scoped strictly to `.home-categories-grid` so the /categories index and
   category-detail pages are not affected. Keeps the 2-column layout, ratios
   and rounded corners intact; only the horizontal + vertical gap changes. */
@media (max-width: 720px) {
    .home-categories-grid {
        column-gap: 16px !important;
        row-gap: 16px !important;
    }
    /* Ensure tiles never exceed the available half-column: drop the
       min-height that combined with `aspect-ratio: 4/3` was forcing a
       ≥200px min-width and causing horizontal overflow on ≤400px. */
    .home-categories-grid .pc-cat { min-height: 0; }
}
@media (max-width: 420px) {
    .home-categories-grid {
        column-gap: 12px !important;
        row-gap: 14px !important;
    }
}

@media (max-width: 420px) {
    .pc-grid--cats-home .pc-cat__title {
        font-size: 15px;
    }
}

/* Home product grids — reuses pc-grid from product-card-modern.
   Desktop: 4-across; tablet: 3; mobile: 2. */
.pc-grid--home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .pc-grid--home { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .pc-grid--home { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ====================================================================== *
 * ROYALECLAT — premium editorial redesign of 3 homepage blocks:          *
 *   1) Nos catégories  2) Découvrir  3) Coups de cœur                   *
 * Reference-driven: serif left-aligned titles + gold rule, image-cover   *
 * category cards with overlaid text, in-grid CTA card, compact fave row. *
 * Scoped to .rc-* classes — does not touch other homepage sections.      *
 * ====================================================================== */
:root { --rc-ink: #17120f; --rc-gold: #B08A3E; --rc-cta-bg: #F3ECE1; --rc-media-bg: #EFE7DA; }

/* Master column — every homepage block shares the hero's horizontal
   container. Sections are now full-bleed bands (edge to edge) with their
   inner content padded to the shared --gutter, so they align exactly with
   the hero while allowing subtle alternating background tints. Vertical
   rhythm is driven by compact padding (no big beige gaps). */
.rc-sec {
    max-width: none;
    margin: 0;
    padding: clamp(16px, 1.9vw, 24px) var(--gutter);
}
/* Subtle, calm tints to separate blocks (premium, not marketplace-loud). */
.rc-sec--cats  { background: transparent; }
.rc-sec--prods { background: #FAF5EC; }
.rc-sec--faves { background: #F5EFE6; }

/* Simplified, centered section headers — title only, no rule/lede. */
.rc-sec__head { margin-bottom: clamp(12px, 1.6vw, 20px); text-align: center; }
.rc-sec__title {
    font-family: var(--serif, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--ink, var(--rc-ink));
    margin: 0;
}

/* Homepage vertical rhythm — kill the oversized beige gaps. The .cat-main
   collapse rules in catalog.css only matched the legacy .m-hero/.m-cats, so
   the new .rc-hero / .rc-sec first child kept the full 72px/96px padding.
   Re-target them here (home-sections.css loads last → wins). */
.cat-main:has(> .rc-hero),
.cat-main:has(> .rc-sec) {
    padding-top: clamp(8px, 1.6vw, 18px);
    padding-bottom: clamp(14px, 2.2vw, 26px);
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}
/* Tighten the hero's own bottom margin so it sits close to the first row. */
.rc-hero { margin-bottom: clamp(12px, 1.8vw, 22px) !important; }

/* (Section header is defined once above — centered, title-only.) */

/* --- In-grid CTA (shared by categories & product rows) --- */
.rc-cta__icon {
    display: grid; place-items: center;
    width: 66px; height: 66px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(23, 18, 15, 0.10);
    color: var(--ink, var(--rc-ink)); margin-bottom: 12px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.rc-cta__icon svg { width: 22px; height: 22px; display: block; }
.rc-cta__title {
    font-family: var(--serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(16px, 1.5vw, 21px); line-height: 1.15;
    color: var(--ink, var(--rc-ink)); margin-bottom: 6px;
}
.rc-cta__sub {
    font-size: 12.5px; line-height: 1.45; color: rgba(23, 18, 15, 0.55);
    max-width: 24ch;
}

/* ================= BLOC 1 — NOS CATÉGORIES ================= */
/* Categories — compact horizontal PASTEL rectangles (no image), 4 cols × 2
   rows desktop (5 cats + CTA). Icon + name only. */
.rc-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1vw, 16px);
}
.rc-cat {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 82px; padding: 14px 18px;
    border-radius: 14px; text-decoration: none;
    box-shadow: 0 1px 2px rgba(23, 18, 15, 0.04);
    transition: transform .22s ease, box-shadow .22s ease;
}
.rc-cat:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(23, 18, 15, 0.45); }
/* Hover/focus lifts the tile (and its category-preview popover child) above
   the following sections. The :hover transform already creates a stacking
   context; without this z-index it stacks at the default level and the later
   "Découvrir"/"Coups de cœur" bands paint over the popover. */
.rc-cat:hover, .rc-cat:focus-within { z-index: 60; }
.rc-cat__icon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255, 255, 255, 0.55); color: var(--ink, var(--rc-ink));
    transition: transform .22s ease;
}
.rc-cat__icon svg { width: 22px; height: 22px; display: block; }
.rc-cat__name {
    font-family: var(--serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(15px, 1.05vw, 18px); font-weight: 500; line-height: 1.15;
    color: var(--ink, var(--rc-ink));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Soft premium pastels — distinct but cohesive. */
.rc-cat--p0 { background: #EFE7DA; }  /* beige */
.rc-cat--p1 { background: #E4E9DE; }  /* sauge */
.rc-cat--p2 { background: #DEE5EB; }  /* bleu gris */
.rc-cat--p3 { background: #F1E3E3; }  /* rose poudré */
.rc-cat--p4 { background: #F2EAD9; }  /* champagne */
.rc-cat--p5 { background: #E8E4DF; }  /* gris chaud */

.rc-cat--cta {
    background: #fff; border: 1px dashed rgba(23, 18, 15, 0.25); box-shadow: none;
}
.rc-cat--cta .rc-cat__icon { background: var(--ink, var(--rc-ink)); color: #fff; }
.rc-cat--cta:hover { border-color: rgba(176, 138, 62, 0.55); }
.rc-cat--cta:hover .rc-cat__icon { transform: translateX(3px); }

/* Categories responsive: 4 → 3 (tablet) → 2 (mobile) columns; keep the
   horizontal rectangle format at every breakpoint (never square/vertical). */
@media (max-width: 1024px) { .rc-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
    .rc-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rc-cat { min-height: 66px; padding: 11px 13px; gap: 10px; }
    .rc-cat__icon { width: 34px; height: 34px; }
    .rc-cat__icon svg { width: 19px; height: 19px; }
}

/* ================= BLOCS 2 & 3 — PRODUCT CARDS ================= */
.rc-pcard { display: flex; flex-direction: column; min-width: 0; }
.rc-pcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.rc-pcard__media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: var(--design-img-ratio, 3 / 4);
    background: var(--rc-media-bg);
    box-shadow: 0 1px 2px rgba(23, 18, 15, 0.05);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.rc-pcard:hover .rc-pcard__media { transform: translateY(-3px); box-shadow: 0 24px 42px -30px rgba(23, 18, 15, 0.5); }
.rc-pcard__badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.92); color: var(--rc-gold); font-size: 13px;
    box-shadow: 0 2px 8px -2px rgba(23, 18, 15, 0.3);
}
.rc-pcard__body { padding: 9px 2px 0; display: flex; flex-direction: column; gap: 2px; }
.rc-pcard__name {
    margin: 0; font-size: 13px; line-height: 1.28; font-weight: 600;
    color: var(--ink, var(--rc-ink));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-pcard__sub { font-size: 11.5px; color: rgba(23, 18, 15, 0.5); letter-spacing: .01em; }
.rc-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.rc-pcard__priceline { display: flex; align-items: baseline; gap: 6px; }
.rc-pcard__price { font-size: 14px; font-weight: 700; color: var(--ink, var(--rc-ink)); }
.rc-pcard__was { font-size: 12px; color: rgba(23, 18, 15, 0.4); text-decoration: line-through; }
.rc-pcard__heart { display: inline-flex; color: rgba(23, 18, 15, 0.32); transition: color .2s ease, transform .2s ease; }
.rc-pcard__heart svg { width: 18px; height: 18px; display: block; }
.rc-pcard:hover .rc-pcard__heart { color: var(--rc-gold); transform: scale(1.08); }

.rc-pcard--cta {
    background: var(--rc-cta-bg); border: 1px dashed rgba(23, 18, 15, 0.22);
    border-radius: 14px; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 2px; padding: 20px 16px; min-height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rc-pcard--cta:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(23, 18, 15, 0.4); border-color: rgba(176, 138, 62, 0.55); }
.rc-pcard--cta:hover .rc-cta__icon { transform: translateX(4px); }
.rc-pcard--cta .rc-cta__icon { width: 52px; height: 52px; }
.rc-pcard--cta .rc-cta__sub { display: none; }

/* --- Découvrir: DENSE multi-row grid (≥3 rows), ~6–8 cards/line desktop,
   CTA card at the very end. Not a single row, not a swipe carousel. --- */
.rc-row--6 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(10px, 1.1vw, 16px); align-items: stretch; }
/* Tablet: 4 per line. Mobile: 3 per line — dense grid, no full-width cards. */
@media (max-width: 1024px) { .rc-row--6 { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (max-width: 640px)  { .rc-row--6 { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* --- Coups de cœur: compact scroll row + circular control on the right --- */
.rc-carousel { position: relative; }
.rc-faves {
    display: flex; gap: clamp(12px, 1.2vw, 18px);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
}
.rc-faves::-webkit-scrollbar { display: none; }
.rc-faves > .rc-pcard { flex: 0 0 calc((100% - 4 * clamp(12px, 1.2vw, 18px)) / 5); scroll-snap-align: start; }
.rc-carousel__ctrl {
    position: absolute; top: 40%; right: -2px; transform: translateY(-50%);
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(23, 18, 15, 0.14); color: var(--ink, var(--rc-ink));
    cursor: pointer; box-shadow: 0 10px 26px -12px rgba(23, 18, 15, 0.4);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.rc-carousel__ctrl svg { width: 20px; height: 20px; }
.rc-carousel__ctrl:hover { background: var(--ink, var(--rc-ink)); color: #fff; transform: translateY(-50%) scale(1.06); }
@media (max-width: 1024px) { .rc-faves > .rc-pcard { flex-basis: calc((100% - 2.5 * 16px) / 3.5); } }
@media (max-width: 640px)  { .rc-faves > .rc-pcard { flex-basis: 46%; } .rc-carousel__ctrl { display: none; } }

/* ====================================================================== *
 * HERO — product carousel (keeps the exact rc-hero look: rounded block,   *
 * text left, product image right, CTA). Slides cross-fade; autoplay,      *
 * arrows, dots, swipe, pause-on-hover — all client-side, no reload.       *
 * ====================================================================== */
.rc-hero__carousel {
    position: relative;
    display: block;
    min-height: 180px;
    background: #1a1512;
    overflow: hidden;
}
@media (min-width: 860px) { .rc-hero__carousel { min-height: 250px; } }

/* Compact hero — ~45% shorter than before. */
.rc-hero__text { padding: clamp(16px, 2.2vw, 30px); gap: 8px; }
.rc-hero__title { font-size: clamp(20px, 2.6vw, 32px); }
.rc-hero__lede {
    font-size: clamp(13px, 1.1vw, 15px); line-height: 1.45; max-width: 40ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-hero__cta { margin-top: 4px; padding: 10px 22px; font-size: 13px; }

/* Product name + price: compact shared cloud instead of a full-width black scrim. */
.rc-hero__caption {
    position: absolute; z-index: 2;
    left: clamp(10px, 1.4vw, 16px); right: auto; bottom: clamp(10px, 1.4vw, 16px);
    max-width: min(72%, 360px);
    pointer-events: none;
    display: flex; flex-direction: column; gap: 2px;
}
.rc-hero__pname {
    color: var(--ink, #17120f); font-family: var(--serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; line-height: 1.14;
    text-shadow: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-hero__pprice { color: var(--ink, #17120f); font-size: 13px; font-weight: 600; text-shadow: none; }
.rc-hero__track { position: absolute; inset: 0; }
.rc-hero__slide {
    position: absolute; inset: 0;
    display: block;
    opacity: 0; visibility: hidden;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}
.rc-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.rc-hero__slide .img-bg-fill { position: absolute; inset: 0; }
.rc-hero__carousel:hover .rc-hero__slide.is-active .img-bg-fill__main { transform: scale(1.03); }

.rc-hero__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(23, 18, 15, 0.12);
    color: #17120f; cursor: pointer; opacity: 0;
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .5);
    transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.rc-hero__carousel:hover .rc-hero__nav, .rc-hero__nav:focus-visible { opacity: 1; }
.rc-hero__nav:hover { background: #fff; }
.rc-hero__nav svg { width: 18px; height: 18px; }
.rc-hero__nav--prev { left: 12px; }
.rc-hero__nav--next { right: 12px; }
.rc-hero__dots {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
    display: flex; gap: 7px; justify-content: center;
}
.rc-hero__dot {
    width: 7px; height: 7px; border-radius: 999px; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.5); border: 0;
    transition: background .2s ease, width .2s ease;
}
.rc-hero__dot.is-active { background: #fff; width: 20px; }
@media (max-width: 640px) { .rc-hero__nav { opacity: 1; width: 36px; height: 36px; } }