/**
 * Dev-Naked Overlay (phase 3)
 * ---------------------------------------------------------------
 * Strict wireframe rendering. No element gets a dark or strong-colour
 * background. Surfaces are white or near-white; colour only appears
 * on text and thin borders. This file is enqueued LAST by
 * theme-styles.php so it wins over component defaults.
 *
 * REMOVE the enqueue (or delete this file) when phase 8 (Design du
 * site) begins. Components then revert to their full filled-block
 * style and the real client palette takes effect.
 *
 * Only add a rule here when an actually-used component renders a
 * strong-colour block in dev-naked. Do not pre-emptively flatten
 * components that aren't on a page yet.
 */

/* Footer: dark band -> white surface, dark text. */
.site-footer {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    border-top: 1px solid var(--color-border);
}

.site-footer__top {
    border-bottom: 1px solid var(--color-border) !important;
}

.site-footer__logo,
.site-footer__logo:hover {
    color: var(--color-text-primary) !important;
}

.site-footer__menu li a {
    color: var(--color-text-muted) !important;
}

.site-footer__menu li a:hover {
    color: var(--color-text-primary) !important;
}

.site-footer__copyright,
.site-footer__credit {
    color: var(--color-text-muted) !important;
}

.site-footer__credit:hover {
    color: var(--color-text-primary) !important;
}

/* Top-hero FAQ anchor nav: phase-8 UX feature, hidden in dev-naked.
   Also kills the .is-sticky variant that JS pins under the header. */
.faq-anchor-nav,
.faq-anchor-nav.is-sticky {
    display: none !important;
}

/* Top-hero (center variant, no bg image): the component sets
   background-color: var(--color-primary) which in our grayscale dev-naked
   palette renders near-black + makes text invisible. Flatten to white
   surface + dark text and give it min-height since page-accueil.css used
   to silently carry a 600px height (now removed - law-firm leftover). */
.top-hero {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    min-height: 480px;
    padding: 96px 0 64px;
}
.top-hero__title,
.top-hero__sub-title,
.top-hero .title-section,
.top-hero .title-section__label,
.top-hero .title-section__title,
.top-hero .title-section__sub-title {
    color: var(--color-text-primary) !important;
}
.top-hero > .container {
    justify-content: center;
    gap: 24px;
}

/* Compact top_hero_section (used on /boutique, /contact, etc.):
   not the big hero - just a page header band. */
.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;
}

/* Generic section spacing in dev-naked: every section gets vertical breathing room
   so the layout doesn't feel cramped while we wait for phase 8 design pass. */
.section {
    padding-top: 72px;
    padding-bottom: 72px;
}
.section + .section {
    border-top: 1px solid var(--color-border, #eee);
}

/* Icons-list rendering: lay out cards as a tidy grid (the component defaults
   to a vertical list of titles which looks broken without icons). */
.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); }
}

/* Two-cols (About): center the lone column when no image is set so the
   text doesn't hug the left edge. */
.two-cols-image-right-section .container {
    max-width: 820px;
}

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

/* CTAs: filled -> outlined. */
.cta-component {
    background: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-text-primary) !important;
}

.cta-component:hover,
.header .cta-component:hover {
    background: var(--color-bg-light) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-text-primary) !important;
}