/* ============================================================
   UNIFIED BUTTON SYSTEM
   Canonical style: .reserve-btn (header "Réserver")
   Red→orange gradient, skewed -10°, square corners, compact padding.
   Applied to every main CTA class across the site via override.
   ============================================================ */

/* -------- Base shell (shared by primary + secondary) -------- */
.reserve-btn,
.mob-reserve-btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.v2-btn,
.v2-btn--primary,
.v2-btn--outline,
.v2-btn--ghost,
.nf-btn,
.nf-btn--primary,
.nf-btn--secondary,
.espace-reserve-btn,
.eg-hero-cta, .eg-hero-cta--secondary,
.eg-cta-banner-btn, .eg-cta-banner-btn--secondary,
.eg-contact-cta, .eg-contact-cta--outline,
.ee-hero-cta, .ee-hero-cta--secondary,
.ee-cta-banner-btn, .ee-cta-banner-btn--secondary,
.ee-contact-cta, .ee-contact-cta--outline,
.el-hero-cta, .el-hero-cta--secondary,
.el-cta-banner-btn, .el-cta-banner-btn--secondary,
.el-contact-cta, .el-contact-cta--outline,
.en-hero-cta, .en-hero-cta--secondary,
.en-cta-banner-btn, .en-cta-banner-btn--secondary,
.en-contact-cta, .en-contact-cta--outline,
.ey-hero-cta, .ey-hero-cta--secondary,
.ey-cta-banner-btn, .ey-cta-banner-btn--secondary,
.ey-contact-cta, .ey-contact-cta--outline,
.bd-hero-cta, .bd-hero-cta--secondary,
.bd-cta-banner-btn, .bd-cta-banner-btn--secondary,
.bd-contact-cta, .bd-contact-cta--outline {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1.5rem !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    z-index: 0 !important;
    transform: none !important;
    transition: transform 0.3s ease !important;
    overflow: visible !important;
    line-height: 1.4;
}

/* Neutralize any legacy child-level un-skew */
.reserve-btn > *,
.mob-reserve-btn > *,
.nf-btn > *,
.eg-hero-cta > *, .eg-hero-cta--secondary > *,
.eg-cta-banner-btn > *, .eg-cta-banner-btn--secondary > *,
.eg-contact-cta > *, .eg-contact-cta--outline > *,
.ee-hero-cta > *, .ee-hero-cta--secondary > *,
.ee-cta-banner-btn > *, .ee-cta-banner-btn--secondary > *,
.ee-contact-cta > *, .ee-contact-cta--outline > *,
.el-hero-cta > *, .el-hero-cta--secondary > *,
.el-cta-banner-btn > *, .el-cta-banner-btn--secondary > *,
.el-contact-cta > *, .el-contact-cta--outline > *,
.en-hero-cta > *, .en-hero-cta--secondary > *,
.en-cta-banner-btn > *, .en-cta-banner-btn--secondary > *,
.en-contact-cta > *, .en-contact-cta--outline > *,
.ey-hero-cta > *, .ey-hero-cta--secondary > *,
.ey-cta-banner-btn > *, .ey-cta-banner-btn--secondary > *,
.ey-contact-cta > *, .ey-contact-cta--outline > *,
.bd-hero-cta > *, .bd-hero-cta--secondary > *,
.bd-cta-banner-btn > *, .bd-cta-banner-btn--secondary > *,
.bd-contact-cta > *, .bd-contact-cta--outline > * {
    transform: none !important;
}

/* -------- Skewed shape (::before) — shared by all --------
   The shape lives on a pseudo-element so the button's text and
   icons remain un-skewed regardless of their markup. */
.reserve-btn::before,
.mob-reserve-btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-outline::before,
.v2-btn::before,
.v2-btn--primary::before,
.v2-btn--outline::before,
.v2-btn--ghost::before,
.nf-btn::before,
.nf-btn--primary::before,
.nf-btn--secondary::before,
.espace-reserve-btn::before,
.eg-hero-cta::before, .eg-hero-cta--secondary::before,
.eg-cta-banner-btn::before, .eg-cta-banner-btn--secondary::before,
.eg-contact-cta::before, .eg-contact-cta--outline::before,
.ee-hero-cta::before, .ee-hero-cta--secondary::before,
.ee-cta-banner-btn::before, .ee-cta-banner-btn--secondary::before,
.ee-contact-cta::before, .ee-contact-cta--outline::before,
.el-hero-cta::before, .el-hero-cta--secondary::before,
.el-cta-banner-btn::before, .el-cta-banner-btn--secondary::before,
.el-contact-cta::before, .el-contact-cta--outline::before,
.en-hero-cta::before, .en-hero-cta--secondary::before,
.en-cta-banner-btn::before, .en-cta-banner-btn--secondary::before,
.en-contact-cta::before, .en-contact-cta--outline::before,
.ey-hero-cta::before, .ey-hero-cta--secondary::before,
.ey-cta-banner-btn::before, .ey-cta-banner-btn--secondary::before,
.ey-contact-cta::before, .ey-contact-cta--outline::before,
.bd-hero-cta::before, .bd-hero-cta--secondary::before,
.bd-cta-banner-btn::before, .bd-cta-banner-btn--secondary::before,
.bd-contact-cta::before, .bd-contact-cta--outline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 0;
    transform: skewX(-10deg);
    transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    pointer-events: none;
}

/* -------- Primary: red→orange gradient fill -------- */
.reserve-btn::before,
.mob-reserve-btn::before,
.btn-primary::before,
.v2-btn--primary::before,
.nf-btn--primary::before,
.espace-reserve-btn::before,
.eg-hero-cta::before,
.eg-cta-banner-btn::before,
.eg-contact-cta::before,
.ee-hero-cta::before,
.ee-cta-banner-btn::before,
.ee-contact-cta::before,
.el-hero-cta::before,
.el-cta-banner-btn::before,
.el-contact-cta::before,
.en-hero-cta::before,
.en-cta-banner-btn::before,
.en-contact-cta::before,
.ey-hero-cta::before,
.ey-cta-banner-btn::before,
.ey-contact-cta::before,
.bd-hero-cta::before,
.bd-cta-banner-btn::before,
.bd-contact-cta::before {
    background: linear-gradient(135deg, #ff0040, #ff6b35);
}

/* Primary hover: small lift + red glow */
.reserve-btn:hover,
.mob-reserve-btn:hover,
.btn-primary:hover,
.v2-btn--primary:hover,
.nf-btn--primary:hover,
.espace-reserve-btn:hover,
.eg-hero-cta:hover,
.eg-cta-banner-btn:hover,
.eg-contact-cta:hover,
.ee-hero-cta:hover,
.ee-cta-banner-btn:hover,
.ee-contact-cta:hover,
.el-hero-cta:hover,
.el-cta-banner-btn:hover,
.el-contact-cta:hover,
.en-hero-cta:hover,
.en-cta-banner-btn:hover,
.en-contact-cta:hover,
.ey-hero-cta:hover,
.ey-cta-banner-btn:hover,
.ey-contact-cta:hover,
.bd-hero-cta:hover,
.bd-cta-banner-btn:hover,
.bd-contact-cta:hover {
    transform: translateY(-2px) !important;
}
.reserve-btn:hover::before,
.mob-reserve-btn:hover::before,
.btn-primary:hover::before,
.v2-btn--primary:hover::before,
.nf-btn--primary:hover::before,
.espace-reserve-btn:hover::before,
.eg-hero-cta:hover::before,
.eg-cta-banner-btn:hover::before,
.eg-contact-cta:hover::before,
.ee-hero-cta:hover::before,
.ee-cta-banner-btn:hover::before,
.ee-contact-cta:hover::before,
.el-hero-cta:hover::before,
.el-cta-banner-btn:hover::before,
.el-contact-cta:hover::before,
.en-hero-cta:hover::before,
.en-cta-banner-btn:hover::before,
.en-contact-cta:hover::before,
.ey-hero-cta:hover::before,
.ey-cta-banner-btn:hover::before,
.ey-contact-cta:hover::before,
.bd-hero-cta:hover::before,
.bd-cta-banner-btn:hover::before,
.bd-contact-cta:hover::before {
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
}

/* -------- Secondary / outline: transparent w/ red border -------- */
.btn-secondary::before,
.btn-outline::before,
.v2-btn--outline::before,
.v2-btn--ghost::before,
.nf-btn--secondary::before,
.eg-hero-cta--secondary::before,
.eg-cta-banner-btn--secondary::before,
.eg-contact-cta--outline::before,
.ee-hero-cta--secondary::before,
.ee-cta-banner-btn--secondary::before,
.ee-contact-cta--outline::before,
.el-hero-cta--secondary::before,
.el-cta-banner-btn--secondary::before,
.el-contact-cta--outline::before,
.en-hero-cta--secondary::before,
.en-cta-banner-btn--secondary::before,
.en-contact-cta--outline::before,
.ey-hero-cta--secondary::before,
.ey-cta-banner-btn--secondary::before,
.ey-contact-cta--outline::before,
.bd-hero-cta--secondary::before,
.bd-cta-banner-btn--secondary::before,
.bd-contact-cta--outline::before {
    background: transparent;
    border: 2px solid rgba(255, 0, 64, 0.6);
}

/* Secondary hover: lift + subtle fill */
.btn-secondary:hover,
.btn-outline:hover,
.v2-btn--outline:hover,
.v2-btn--ghost:hover,
.nf-btn--secondary:hover,
.eg-hero-cta--secondary:hover,
.eg-cta-banner-btn--secondary:hover,
.eg-contact-cta--outline:hover,
.ee-hero-cta--secondary:hover,
.ee-cta-banner-btn--secondary:hover,
.ee-contact-cta--outline:hover,
.el-hero-cta--secondary:hover,
.el-cta-banner-btn--secondary:hover,
.el-contact-cta--outline:hover,
.en-hero-cta--secondary:hover,
.en-cta-banner-btn--secondary:hover,
.en-contact-cta--outline:hover,
.ey-hero-cta--secondary:hover,
.ey-cta-banner-btn--secondary:hover,
.ey-contact-cta--outline:hover,
.bd-hero-cta--secondary:hover,
.bd-cta-banner-btn--secondary:hover,
.bd-contact-cta--outline:hover {
    transform: translateY(-2px) !important;
}
.btn-secondary:hover::before,
.btn-outline:hover::before,
.v2-btn--outline:hover::before,
.v2-btn--ghost:hover::before,
.nf-btn--secondary:hover::before,
.eg-hero-cta--secondary:hover::before,
.eg-cta-banner-btn--secondary:hover::before,
.eg-contact-cta--outline:hover::before,
.ee-hero-cta--secondary:hover::before,
.ee-cta-banner-btn--secondary:hover::before,
.ee-contact-cta--outline:hover::before,
.el-hero-cta--secondary:hover::before,
.el-cta-banner-btn--secondary:hover::before,
.el-contact-cta--outline:hover::before,
.en-hero-cta--secondary:hover::before,
.en-cta-banner-btn--secondary:hover::before,
.en-contact-cta--outline:hover::before,
.ey-hero-cta--secondary:hover::before,
.ey-cta-banner-btn--secondary:hover::before,
.ey-contact-cta--outline:hover::before,
.bd-hero-cta--secondary:hover::before,
.bd-cta-banner-btn--secondary:hover::before,
.bd-contact-cta--outline:hover::before {
    background: rgba(255, 0, 64, 0.1);
    border-color: #ff0040;
}