/* ============================================================================
 * V17 COMPONENTS  —  one hero, three buttons, one card, one section rhythm,
 * one footer, one breadcrumb, one CTA band. (priority 121, loads after tokens)
 * Locks the GEOMETRY of the shared component classes every template already
 * uses, so any two pages render the same parts. Sealed sheets untouched.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. BUTTONS  —  three treatments, identical geometry
 *    primary (rose pill) · secondary/outline (border pill, fills on hover) ·
 *    ghost (text + arrow). All share pill radius, padding, font, min target.
 * -------------------------------------------------------------------------- */
.latoxica-button,
.latoxica-button--primary,
.latoxica-button--ghost,
.latoxica-button--filled-cream,
.v11-btn-primary,
.v11-btn-outline,
.latoxica-cta-band__buttons .btn,
.latoxica-storefront-cta,
.latoxica-trois-adresses__cta,
.latoxica-section-asymmetric__cta,
.latoxica-loc-chooser__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.85rem 2.1rem;
    border-radius: var(--v17-r-pill);
    font-family: var(--v17-font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s var(--v17-ease), background-color 0.25s var(--v17-ease),
                color 0.25s var(--v17-ease), border-color 0.25s var(--v17-ease),
                box-shadow 0.25s var(--v17-ease);
}

/* PRIMARY — rose pill, white text (AA: white on rose = 4.6:1) */
.latoxica-button--primary,
.v11-btn-primary,
.latoxica-storefront-cta,
.latoxica-trois-adresses__cta,
.latoxica-loc-chooser__btn:not(.latoxica-loc-chooser__btn--alt),
.btn-primary {
    /* rose-deep, not bright rose: white-on-rose-deep is 5.2:1 (AA), while
     * white-on-#EC2C91 is only 3.9:1. The bright rose stays the accent;
     * solid text-bearing buttons take the deeper shade for legibility. */
    background: var(--v17-rose-deep);
    color: var(--v17-white);
    border-color: var(--v17-rose-deep);
}
.latoxica-button--primary:hover,
.latoxica-button--primary:focus-visible,
.v11-btn-primary:hover,
.v11-btn-primary:focus-visible,
.latoxica-storefront-cta:hover,
.latoxica-trois-adresses__cta:hover,
.btn-primary:hover {
    background: var(--v17-rose-deep);   /* keep AA on hover (no lightening below 4.5) */
    border-color: var(--v17-rose-deep);
    color: var(--v17-white);
    transform: translateY(-2px);
    box-shadow: var(--v17-shadow-rose);
    text-decoration: none;
}

/* SECONDARY / OUTLINE — transparent w/ border, fills on hover.
 * On dark surfaces: cream border+text; on cream surfaces: charcoal border+text. */
.latoxica-button--ghost,
.v11-btn-outline,
.latoxica-section-asymmetric__cta,
.btn-secondary,
.btn-tertiary {
    background: transparent;
    color: var(--v17-cream);
    border-color: var(--v17-cream);
}
.latoxica-button--ghost:hover,
.latoxica-button--ghost:focus-visible,
.v11-btn-outline:hover,
.v11-btn-outline:focus-visible,
.latoxica-section-asymmetric__cta:hover,
.btn-secondary:hover,
.btn-tertiary:hover {
    background: var(--v17-cream);
    color: var(--v17-charcoal);
    border-color: var(--v17-cream);
    transform: translateY(-2px);
    text-decoration: none;
}
/* outline on cream bands: charcoal border/text, fills charcoal on hover */
.v11-section-cream .latoxica-button--ghost,
.v17-section--cream .latoxica-button--ghost,
.v11-section-cream .v11-btn-outline,
.v11-section-cream .btn-secondary,
.latoxica-trois-adresses .latoxica-button--ghost,
.latoxica-section-asymmetric[data-on="cream"] .latoxica-section-asymmetric__cta {
    color: var(--v17-charcoal);
    border-color: var(--v17-charcoal);
}
.v11-section-cream .latoxica-button--ghost:hover,
.v17-section--cream .latoxica-button--ghost:hover,
.v11-section-cream .v11-btn-outline:hover,
.v11-section-cream .btn-secondary:hover {
    background: var(--v17-charcoal);
    color: var(--v17-cream);
    border-color: var(--v17-charcoal);
}

/* TERTIARY: the cream-filled pill (charcoal text, AA on cream) — high-contrast
 * secondary on dark sections. Kept within the family (same geometry). */
.latoxica-button--filled-cream,
.latoxica-loc-chooser__btn--alt {
    background: var(--v17-cream);
    color: var(--v17-charcoal);
    border-color: var(--v17-cream);
}
.latoxica-button--filled-cream:hover,
.latoxica-button--filled-cream:focus-visible,
.latoxica-loc-chooser__btn--alt:hover {
    background: var(--v17-jaune);
    color: var(--v17-charcoal);
    border-color: var(--v17-jaune);
    transform: translateY(-2px);
}
.btn-small { min-height: 44px; padding: 0.7rem 1.5rem; font-size: 0.85rem; }

/* legacy .btn-primary variants paint bright rose with white text (3.9:1 fail).
 * Force rose-deep so white labels clear AA (5.2:1). !important beats the legacy
 * .btn.btn-primary / button.btn-primary specificity. */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-small.btn-primary {
    background-color: var(--v17-rose-deep) !important;
    border-color: var(--v17-rose-deep) !important;
    color: var(--v17-white) !important;
}

/* ----------------------------------------------------------------------------
 * 2. CARD  —  one primitive (radius, hairline, tinted shadow, lift on hover)
 * -------------------------------------------------------------------------- */
.latoxica-trois-adresses__card,
.v17-card {
    border-radius: var(--v17-r-card);
    overflow: hidden;
    transition: transform 0.3s var(--v17-ease), box-shadow 0.3s var(--v17-ease);
}
.latoxica-trois-adresses__card:hover,
.v17-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v17-shadow-card);
}
/* card media radius consistency */
.latoxica-trois-adresses__card img,
.v17-card img { border-radius: 0; }

/* ----------------------------------------------------------------------------
 * 3. SECTION RHYTHM  —  consistent vertical padding & wrap on every band
 * -------------------------------------------------------------------------- */
.v11-section-dark,
.v11-section-cream,
.v11-section-charcoal-soft,
.latoxica-cocktails-section,
.latoxica-section-asymmetric,
.latoxica-cta-band,
.latoxica-trois-adresses,
.latoxica-bat-faq {
    padding-top: var(--v17-section-y);
    padding-bottom: var(--v17-section-y);
}
.latoxica-wrap,
.v17-wrap {
    width: 100%;
    max-width: var(--v17-wrap);
    margin-inline: auto;
    padding-inline: var(--v17-gutter);
}

/* section headings: one display scale across the site */
.v11-section-dark h2,
.v11-section-cream h2,
.latoxica-cocktails-section__title,
.latoxica-section-asymmetric h2,
.latoxica-cta-band__title,
.latoxica-trois-adresses h2 {
    font-family: var(--v17-font-display);
    font-weight: 700;
    font-size: var(--v17-fs-h2);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------------
 * 4. HERO  —  N1: center hero-A content horizontally + vertically, lift it off
 *    the bottom. One alignment shared by every A-hero page.
 * -------------------------------------------------------------------------- */
.latoxica-hero-a {
    align-items: center;          /* was flex-end */
    justify-content: center;      /* was flex-start */
    text-align: center;
    /* clear the fixed header, balanced vertical centering, capped top pad */
    padding: clamp(5.5rem, 11vh, 7rem) var(--v17-gutter) clamp(3rem, 6vh, 4.5rem);
    min-height: clamp(560px, 82vh, 880px);
}
.latoxica-hero-a__content {
    align-self: center;           /* was flex-end */
    text-align: center;
    margin-inline: auto;
    max-width: 56rem;
}
.latoxica-hero-a__title {
    font-size: var(--v17-fs-display);
    line-height: 0.96;
}
.latoxica-hero-a__sub {
    margin-inline: auto;
    max-width: 40rem;
}
.latoxica-hero-a__cta {
    justify-content: center;
}
/* the vertical meta label reads odd when the hero is centered: retire it */
.latoxica-hero-a .latoxica-meta-vertical,
.latoxica-hero-a__meta {
    display: none;
}

/* hero eyebrow + caveat keep the shared treatment, centered */
.latoxica-hero-a__content .latoxica-eyebrow {
    color: var(--v17-rose);
}

/* ----------------------------------------------------------------------------
 * 5. CTA BAND  —  the two-option reserve/order pattern, one look everywhere
 * -------------------------------------------------------------------------- */
.latoxica-cta-band {
    text-align: center;
}
.latoxica-cta-band__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ----------------------------------------------------------------------------
 * 6. FOOTER  —  one footer treatment (charcoal, cream text, rose accents)
 * -------------------------------------------------------------------------- */
.latoxica-site-footer,
.latoxica-footer,
footer.site-footer {
    background: var(--v17-charcoal);
    color: var(--v17-cream-90);
}
.latoxica-site-footer a,
.latoxica-footer a,
footer.site-footer a { color: var(--v17-cream-90); text-decoration: none; }
.latoxica-site-footer a:hover,
.latoxica-footer a:hover,
footer.site-footer a:hover { color: var(--v17-rose); }

/* ----------------------------------------------------------------------------
 * 7. BREADCRUMB  —  one treatment, AA on either surface
 * -------------------------------------------------------------------------- */
.latoxica-breadcrumb,
.v17-breadcrumb {
    font-family: var(--v17-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--v17-ink-55);
}
.v11-section-dark .latoxica-breadcrumb,
.v17-section--dark .latoxica-breadcrumb { color: var(--v17-cream-65); }
.latoxica-breadcrumb a { color: inherit; text-decoration: none; }
.latoxica-breadcrumb a:hover { color: var(--v17-rose); }

/* ----------------------------------------------------------------------------
 * 7b. MENU FILTER CHIPS  —  kill the off-token green; join the palette.
 *     The "vegetarian" chip was green (#22c55e/#15803d !important). Palette
 *     doctrine allows only the six colors: the veg chip becomes a jaune spark
 *     (charcoal text passes AA on jaune), matching the rest of the system.
 * -------------------------------------------------------------------------- */
button[data-filter="vegetarian"],
.latoxica-menu-filter__chip--vegetarian,
.filter-vegetarian,
.vegetarian-filter,
a[href*="vegetarien"],
.latoxica-menu-filter__chip:nth-child(3) {
    background-color: var(--v17-jaune) !important;
    border-color: var(--v17-jaune) !important;
    color: var(--v17-charcoal) !important;   /* charcoal-on-jaune passes AA; white would fail */
}
button[data-filter="vegetarian"]:hover,
.latoxica-menu-filter__chip--vegetarian:hover,
.latoxica-menu-filter__chip--vegetarian.is-active {
    background-color: var(--v17-jaune-deep) !important;
    border-color: var(--v17-jaune-deep) !important;
    color: var(--v17-charcoal) !important;
}
/* green dietary icon -> jaune */
.dietary-icon.vegetarian,
.allergen-icon.vegetarian { background-color: var(--v17-jaune) !important; color: var(--v17-charcoal) !important; }
.latoxica-menu-legend__veg,
.latoxica-menu-item__veg { color: var(--v17-jaune-deep) !important; }

/* ----------------------------------------------------------------------------
 * 7c. CONTENT LINKS  —  in-body links use brand rose, never the off-token
 *     theme.json "primary" red (#b91c1c) or any default blue. Covers entry
 *     content, the FAQ/geo answer links, and the reviews keyword links.
 * -------------------------------------------------------------------------- */
/* DEFAULT content/keyword links: lighter rose. The site is dark-led, so the
 * lighter rose clears AA on charcoal (5.2-5.7:1); cream containers override
 * below. A single rose cannot pass on both surfaces, so colour is surface-aware. */
/* general body content links live mostly on cream/light sections -> deeper rose
 * (AA 4.9:1 on cream). The review keyword links are excluded (they sit on the
 * dark slider) and coloured separately below. */
.entry-content a:not(.latoxica-button):not([class*="btn"]):not(.wc-phone):not(.v17-kw),
.latoxica-store-faq a,
.latoxica-store-faq__a a,
.latoxica-bat-faq a,
.latoxica-bat-faq__a a {
    color: var(--v17-rose-deep) !important;
    text-decoration-color: rgba(200, 31, 120, 0.45);
}
/* review keyword links on the dark charcoal slider -> lighter rose (AA 5.2:1) */
.v17-review-card__quote a,
a.v17-kw {
    color: var(--v17-rose-hover) !important;
    text-decoration-color: rgba(247, 84, 159, 0.45);
}
/* the few content links that genuinely sit on a dark section -> lighter rose */
.v11-section-dark .entry-content a:not(.latoxica-button),
.v17-section--dark a:not(.latoxica-button) {
    color: var(--v17-rose-hover) !important;
}

/* ----------------------------------------------------------------------------
 * 7d. LEGACY A11Y LIFTS  —  remaining sub-AA rose small-text in legacy markup.
 * -------------------------------------------------------------------------- */
/* cream-surface rose labels/links -> rose-deep (4.9:1 on cream) */
.latoxica-recette-card__num,
.latoxica-recette-card__label,
.wc-phone,
a.wc-phone {
    color: var(--v17-rose-deep) !important;
}
/* the same elements on dark surfaces (footer) -> lighter rose (5.2:1 on charcoal) */
.latoxica-site-footer .wc-phone,
footer .wc-phone,
.v11-section-dark .wc-phone,
.latoxica-mobile-sticky-cta a,
.latoxica-mobile-sticky-cta__secondary {
    color: var(--v17-rose-hover) !important;
}

/* ----------------------------------------------------------------------------
 * 8. MOBILE  —  hero + buttons collapse cleanly
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .latoxica-hero-a {
        padding: clamp(4.5rem, 14vh, 6rem) 1.25rem 2.5rem;
        min-height: 78vh;
    }
    .latoxica-cta-band__buttons,
    .latoxica-hero-a__cta { gap: 0.75rem; }
    .latoxica-button,
    .latoxica-button--primary,
    .latoxica-button--ghost,
    .latoxica-button--filled-cream { width: 100%; max-width: 22rem; }
}