/**
 * Design overlay - Direction B "Terre & Doré" (phase 5/6)
 * ---------------------------------------------------------------
 * This file was the phase-3 "dev-naked" wireframe overlay. It is still
 * enqueued LAST by theme-styles.php, so it wins over component defaults.
 * The colour-flattening rules have been removed now that the real
 * Direction B palette is live (validated by Paulette 2026-06-04):
 * the footer keeps its brown band, the CTAs stay filled brown, the hero
 * shows the approved sand band. What remains here is layout scaffolding
 * (hero height, section rhythm, page-header bands) plus the few targeted
 * fixes that must out-specificity the component CSS.
 *
 * CSS-only restyle: no markup / PHP touched. When a real STYLE3K logo
 * lands (phase 6) the header/footer ::after wordmark device can retire.
 */

/* ── Hero (center variant) ───────────────────────────────────────
   The component paints its own background var(--color-primary) (brown)
   and bottom-aligns content for a background image. With no image yet,
   we render the approved Direction B hero: a soft SAND band with brown
   text, content centered, breathing room top and bottom. */
.top-hero {
    background-color: var(--color-bg-alt) !important; /* sable #ebe0db */
    color: var(--color-text-primary) !important;
    min-height: 480px;
    padding: 96px 0 64px;
}
.top-hero > .container {
    justify-content: center;
    gap: 24px;
}
.top-hero__title,
.top-hero .title-section__title {
    color: var(--color-text-primary) !important; /* brun */
}
.top-hero__sub-title,
.top-hero .title-section__sub-title {
    color: var(--color-secondary) !important;     /* brun doux */
}
.top-hero .title-section__label {
    color: var(--color-accent-dark) !important;   /* suraccroche dorée */
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Top-hero FAQ anchor nav: optional UX feature, kept hidden until
   reviewed against the live design. Remove this block to reveal it. */
.faq-anchor-nav,
.faq-anchor-nav.is-sticky {
    display: none !important;
}

/* Compact top_hero_section (used on /boutique, /contact, etc.):
   a page-header band, not the big hero. Renders fine on the cream page. */
.top-hero-section {
    padding: 80px 0 48px;
}
.top-hero-section__title h1,
.top-hero-section__title h2 {
    margin: 0 0 16px;
}
.top-hero-section__copy {
    max-width: 720px;
    margin: 0 auto;
}

/* Section rhythm: vertical breathing room + soft warm dividers. */
.section {
    padding-top: 72px;
    padding-bottom: 72px;
}
.section + .section {
    border-top: 1px solid var(--color-border);
}

/* Icons-list: tidy grid (component defaults to a bare vertical list). */
.icons-list-section__cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;
    max-width: 1100px;
    margin: 0 auto;
}
.icons-list-section__card {
    text-align: center;
}
.icons-list-section__card-title {
    font-weight: 600;
    margin: 0 0 8px;
}
.icons-list-section__card-line-text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
@media (max-width: 768px) {
    .icons-list-section__cards { grid-template-columns: repeat(2, 1fr); }
}

/* 404 page CTAs spacing. */
.error-404__ctas {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}