/* ============================================================
   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, background-size 0.35s 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-color: #0a0a0e;
    background-image: linear-gradient(135deg, #ff0040, #ff6b35);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    border: 2px solid rgba(255, 0, 64, 0.6);
}

/* Secondary hover: lift + wipe fill — gated behind hover-capable pointers
   so touch taps don't trigger the sticky hover state on phones. */
@media (hover: hover) {
    .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-size: 100% 100%;
        border-color: #ff0040;
        box-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
    }
}