/* ──────────────────────────────────────────────────────────────────
   V2 OVERRIDES — chargé sur TOUTES les pages base_v2.html.twig
   Annule les styles legacy Bootstrap qui interfèrent avec la v2
────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   1. BODY — restaurer la font v2 (Mulish) écrasée par Bootstrap
════════════════════════════════════════════════════════════ */
body {
    font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif !important;
    color: var(--ink) !important;
    background: var(--cream) !important;
    font-size: 17px;
    line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════
   2. SECTIONS — Bootstrap force background-color, on annule
════════════════════════════════════════════════════════════ */
.site-header, .topbar, .site-footer, .page-hero, .cta-band,
section.bg-cream, section.bg-deep, section.bg-ink, section.bg-paper,
section.section, section.section--tight { background-color: initial; }
section.bg-cream { background: var(--cream) !important; }
section.bg-deep  { background: var(--cream-deep) !important; }
section.bg-ink   { background: var(--ink) !important; color: var(--cream) !important; }
section.bg-paper { background: var(--paper) !important; }
.topbar          { background: var(--ink) !important; color: var(--cream) !important; }
.site-header     { background: rgba(247, 241, 230, 0.92) !important; }
.site-footer     { background: #1b140f !important; color: rgba(247, 241, 230, 0.74) !important; }

/* ════════════════════════════════════════════════════════════
   3. CONTAINER — Bootstrap a min-width:992px + max-width:1140px
════════════════════════════════════════════════════════════ */
.site-header .container,
.topbar .container,
.site-footer .container,
.page-hero .container,
.cta-band .container,
section.section .container,
section.section--tight .container {
    max-width: 1240px !important;
    min-width: 0 !important;
    padding-inline: 28px !important;
    padding-right: 28px !important;
    padding-left: 28px !important;
}
@media (max-width: 480px) {
    .site-header .container,
    .topbar .container,
    .site-footer .container,
    .page-hero .container,
    .cta-band .container,
    section.section .container,
    section.section--tight .container {
        padding-inline: 18px !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   4. RESET héritages Bootstrap
════════════════════════════════════════════════════════════ */
.site-header, .site-header *, .topbar, .topbar *,
.site-footer, .site-footer *, .page-hero, .page-hero *,
.cta-band, .cta-band * { box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════
   5. HEADINGS — restaurer la font display (Marcellus)
════════════════════════════════════════════════════════════ */
.site-header h1, .site-header h2, .site-header h3, .site-header h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
section.section h2, section.section h3, section.section h4,
.cta-band h2, .section-title {
    font-family: 'Marcellus', 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 400 !important;
}

/* ════════════════════════════════════════════════════════════
   6. COULEURS sur fonds sombres — Bootstrap force #38424D
════════════════════════════════════════════════════════════ */
.page-hero h1, .page-hero h2, .page-hero h3,
.page-hero p, .page-hero .lead,
.page-hero .breadcrumb, .page-hero .breadcrumb a, .page-hero .breadcrumb span,
.page-hero .eyebrow,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band p, .cta-band .eyebrow,
section.bg-ink h1, section.bg-ink h2, section.bg-ink h3, section.bg-ink p,
section.bg-ink .section-title, section.bg-ink .section-intro,
.topbar, .topbar span, .topbar .topbar-note { color: var(--cream) !important; }

/* ════════════════════════════════════════════════════════════
   7. HERO styles spécifiques
════════════════════════════════════════════════════════════ */
.page-hero h1 {
    font-size: clamp(36px, 5vw, 58px) !important;
    max-width: 760px;
    line-height: 1.12;
}
.page-hero .lead {
    margin-top: 16px;
    max-width: 600px;
    font-size: 18px;
    color: rgba(247, 241, 230, 0.85) !important;
}
.page-hero .eyebrow { color: var(--gold-bright) !important; }
.page-hero .breadcrumb {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247, 241, 230, 0.7) !important;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    padding-left: 0;
    list-style: none;
}
.page-hero .breadcrumb .sep { color: var(--gold) !important; }
.page-hero .breadcrumb a {
    color: rgba(247, 241, 230, 0.7) !important;
    text-decoration: none !important;
}
.page-hero .breadcrumb a:hover { color: var(--gold-bright) !important; }

/* ════════════════════════════════════════════════════════════
   8. HEADINGS sur fonds clairs — couleur ink v2
════════════════════════════════════════════════════════════ */
section.bg-cream h2, section.bg-cream h3, section.bg-cream h4,
section.bg-deep h2, section.bg-deep h3, section.bg-deep h4,
section.bg-paper h2, section.bg-paper h3, section.bg-paper h4 {
    color: var(--ink) !important;
}

/* ════════════════════════════════════════════════════════════
   9. EXCEPTIONS — cards avec overlay sombre (dish-card)
════════════════════════════════════════════════════════════ */
section.bg-cream .dish-card h3, section.bg-cream .dish-card p, section.bg-cream .dish-card .dish-price,
section.bg-deep  .dish-card h3, section.bg-deep  .dish-card p, section.bg-deep  .dish-card .dish-price,
section.bg-paper .dish-card h3, section.bg-paper .dish-card p, section.bg-paper .dish-card .dish-price {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
section.bg-cream .dish-card .dish-price,
section.bg-deep  .dish-card .dish-price,
section.bg-paper .dish-card .dish-price { color: var(--gold-bright) !important; }
section.bg-cream .dish-card h3 a,
section.bg-deep .dish-card h3 a,
section.bg-paper .dish-card h3 a { color: #fff !important; }

/* ════════════════════════════════════════════════════════════
   10. EXCEPTIONS — cards avec fond clair INSIDE bg-ink
════════════════════════════════════════════════════════════ */
section.bg-ink .pack-card h3,
section.bg-ink .city-card h3,
section.bg-ink .service-card h3 { color: var(--ink) !important; }

section.bg-ink .pack-card p,
section.bg-ink .city-card p,
section.bg-ink .service-card p { color: var(--ink-soft) !important; }

section.bg-ink .pack-card.is-featured h3 { color: var(--cream) !important; }
section.bg-ink .pack-card.is-featured p { color: rgba(247, 241, 230, 0.82) !important; }

/* ════════════════════════════════════════════════════════════
   11. TITRES legacy custom (sous-packs, pages CMS)
════════════════════════════════════════════════════════════ */
.service-detail__title,
.feature-row__title_h2 {
    color: var(--gold) !important;
    font-family: 'Marcellus', serif !important;
}

/* ════════════════════════════════════════════════════════════
   12. HEADER v2 — layout flex non-wrap
════════════════════════════════════════════════════════════ */
.site-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 80px;
    gap: 20px;
    flex-wrap: nowrap !important;
}
.site-header .brand {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}
.site-header .brand-logo {
    height: 52px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.site-header .nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.site-header .nav .nav-link {
    color: var(--ink-soft) !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
}
.site-header .header-cta {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}
.site-header .submenu { background: var(--cream) !important; }
.site-header .submenu a { color: var(--ink-soft) !important; }

/* ════════════════════════════════════════════════════════════
   13. TOPBAR layout flex
════════════════════════════════════════════════════════════ */
.topbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px;
    gap: 16px;
    padding-block: 0 !important;
}
.topbar a {
    color: var(--gold-bright) !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════
   14. RESPONSIVE — mobile (≤ 1024px)
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .site-header .container {
        min-height: 68px !important;
        gap: 12px !important;
    }
    .site-header .brand-logo { height: 44px !important; }
    .site-header .nav { display: none !important; }
    .site-header .nav.is-open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cream) !important;
        padding: 18px 24px 24px;
        gap: 4px;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        align-items: stretch !important;
        z-index: 50;
        box-shadow: var(--shadow-md);
    }
    .site-header .header-cta > .btn { display: none !important; }
}