/* Phase 2 — conversion (hero CTA, menu devis, barre mobile) */

/* ========================================
   BANNER UNIFIÉ — surcharge les CSS par page
   (chargé en dernier via footer sur toutes les pages)
   ======================================== */

#banner,
#banner.ase-banner,
section#banner {
    min-height: var(--ase-banner-height) !important;
    height: auto !important;
    max-height: none !important;
    padding: calc(var(--ase-header-height) + 1.15rem) 1rem calc(1.15rem + var(--ase-sticky-height)) 1rem !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

#banner .inner,
#banner .banner-inner {
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
    width: 100%;
    max-width: min(700px, 92vw);
    text-align: center !important;
}

#banner .header-bg-img,
#banner .header-bg-video,
.header-bg-img,
.header-bg-video {
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    left: 0 !important;
    transform: none !important;
    background-size: cover !important;
    background-position: center center !important;
    object-fit: cover !important;
}

#banner .header-bg-video iframe,
#banner .header-bg-video video {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    inset: 0 !important;
    transform: none !important;
    object-fit: cover !important;
}

#banner .inner h2,
#banner h2 {
    font-size: var(--ase-banner-title-size) !important;
    margin: 0 0 0.35em 0 !important;
    text-align: center !important;
    width: 100%;
}

#banner .header-subtitle,
#banner .header-subtitle--cms {
    font-size: var(--ase-banner-subtitle-size) !important;
    margin: 0 0 0.45em 0 !important;
    text-align: center !important;
    width: 100%;
    max-width: 100%;
}

/* Annule main.css order:0 sur les blocs bandeau */
#banner .inner h2 { order: 2 !important; }
#banner .inner .header-subtitle,
#banner .inner .header-subtitle--cms { order: 3 !important; }
#banner .inner .header-buttons { order: 4 !important; }
#banner .inner .more,
#banner .inner .more.scrolly { order: 99 !important; }

#banner .header-subtitle img {
    max-width: var(--ase-banner-logo-size) !important;
}

.header-cta-devis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.5rem;
    margin-right: 0.25rem;
    border-radius: 3px;
    background: #7952cc;
    color: #fff !important;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid #7952cc;
    white-space: nowrap;
    line-height: 1.2;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.header-cta-devis:hover {
    background: #4f1c90;
    border-color: #4f1c90;
    color: #fff !important;
}

@media screen and (max-width: 736px) {
    .header-cta-devis {
        display: none;
    }
}

body.landing #banner .hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

body.landing #banner .hero-cta li {
    margin: 0;
    padding: 0;
}

body.landing #banner .hero-cta .button {
    margin: 0;
    min-width: 0;
    width: auto;
    padding: clamp(0.45rem, 1.2vw, 0.55rem) clamp(0.85rem, 2.5vw, 1.15rem) !important;
    font-size: clamp(0.62rem, 1.5vw + 0.35rem, 0.72rem) !important;
    letter-spacing: 0.08em;
    line-height: 1.35;
    height: auto !important;
}

body.landing #banner .hero-cta .button.primary {
    background: #7952cc !important;
    border-color: #7952cc !important;
}

body.landing #banner .hero-cta .button.primary:hover {
    background: #4f1c90 !important;
    border-color: #4f1c90 !important;
}

body.landing #banner .hero-cta .button.whatsapp {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
    color: #fff !important;
}

body.landing #banner .hero-cta .button.whatsapp:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #fff !important;
}

body.landing #banner .inner .hero-cta-link {
    order: 4 !important;
}

body.landing #banner .inner .hero-cta {
    order: 5 !important;
    width: auto;
    max-width: 100%;
}

body.landing #banner .hero-cta-link {
    display: inline-block;
    margin: clamp(0.35rem, 1.5vw, 0.5rem) 0 clamp(0.25rem, 1vw, 0.35rem);
    color: #fff !important;
    font-size: clamp(0.88rem, 2vw + 0.35rem, 1.12rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: underline !important;
    text-underline-offset: 0.2em;
}

body.landing #banner .hero-cta-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.landing #banner .header-subtitle {
    max-width: 42em;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

body.landing #banner .header-subtitle--cms {
    font-size: var(--ase-banner-subtitle-size);
    letter-spacing: 0.04em;
}

body.landing #banner .header-subtitle--cms p {
    margin: 0;
}

body.landing #banner .header-subtitle--cms img {
    display: block;
    max-width: var(--ase-banner-logo-size);
    height: auto;
    margin: clamp(0.3rem, 1.2vw, 0.45rem) auto 0;
}

.ase-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10040;
    background: rgba(46, 56, 66, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    gap: 0.35rem;
}

.ase-sticky-cta__btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem 0.25rem;
    border-radius: 6px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    min-height: 3rem;
}

.ase-sticky-cta__btn i {
    font-size: 1.05rem;
}

.ase-sticky-cta__btn--wa {
    border-color: rgba(37, 211, 102, 0.45);
}

.ase-sticky-cta__btn--primary {
    background: #7952cc;
    border-color: #7952cc;
}

@media screen and (max-width: 768px) {
    .ase-sticky-cta {
        display: flex;
    }

    body {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }

    .ase-cookie-banner {
        bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }
}

@media screen and (min-width: 769px) {
    .ase-sticky-cta {
        display: none !important;
    }
}

/* ========================================
   MOBILE — redimensionnement fluide (toutes pages)
   Surcharge main.*.css (100vh fixes)
   ======================================== */

@media screen and (max-width: 736px) {
    #banner,
    #banner.ase-banner,
    section#banner,
    body.landing #banner,
    body.landingLocation #banner,
    body.page-partenaires #banner {
        min-height: var(--ase-banner-height) !important;
        height: auto !important;
        max-height: none !important;
        padding: calc(var(--ase-header-height) + 0.85rem) 0.65rem calc(0.85rem + var(--ase-sticky-height)) 0.65rem !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #banner .inner,
    #banner .banner-inner,
    .banner-inner {
        max-width: 94vw !important;
        width: 100% !important;
        padding: 0 0.65rem !important;
        gap: clamp(0.15rem, 0.8vh, 0.4rem) !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
        margin: auto !important;
        overflow: visible !important;
    }

    #banner .inner h2,
    #banner h2,
    #banner .banner-inner h2 {
        font-size: var(--ase-banner-title-size) !important;
        line-height: 1.1 !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    #banner .header-subtitle,
    #banner .header-subtitle--cms {
        font-size: var(--ase-banner-subtitle-size) !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
    }

    #banner .header-subtitle img,
    #banner .header-subtitle--cms img {
        max-width: var(--ase-banner-logo-size) !important;
        width: auto !important;
        height: auto !important;
    }

    #banner .header-bg-img,
    #banner .header-bg-video,
    .header-bg-img,
    .header-bg-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        left: 0 !important;
        transform: none !important;
        background-size: cover !important;
        background-position: center center !important;
        object-fit: cover !important;
    }

    #banner .header-bg-video iframe,
    #banner .header-bg-video video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
    }

    body.landing #banner .hero-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 16.5rem;
        margin: clamp(0.35rem, 1.5vh, 0.65rem) auto 0;
        gap: clamp(0.35rem, 1.2vh, 0.5rem);
    }

    body.landing #banner .hero-cta li {
        width: 100%;
    }

    body.landing #banner .hero-cta .button {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(0.4rem, 1.8vw, 0.5rem) clamp(0.65rem, 3vw, 0.95rem) !important;
        font-size: clamp(0.58rem, 2.8vw + 0.2rem, 0.68rem) !important;
        white-space: normal;
        text-align: center;
    }

    body.landing #banner .hero-cta-link {
        font-size: clamp(0.78rem, 3.5vw + 0.2rem, 0.95rem) !important;
        margin: clamp(0.25rem, 1vh, 0.4rem) 0 clamp(0.2rem, 0.8vh, 0.3rem) !important;
    }

    .ase-sticky-cta__btn {
        font-size: clamp(0.52rem, 2.2vw, 0.6rem);
        min-height: clamp(2.5rem, 8vw, 3rem);
        padding: 0.35rem 0.2rem;
    }

    .ase-sticky-cta__btn i {
        font-size: clamp(0.9rem, 4vw, 1.05rem);
    }
}

@media screen and (max-width: 736px) and (max-height: 680px) {
    body.landing #banner .hero-cta {
        max-width: 14.5rem;
    }

    #banner .inner,
    #banner .banner-inner {
        gap: 0.12rem !important;
    }
}

/* ========================================
   HOMOGÉNÉISATION TOTALE — écrase main.*.css + styles inline
   ======================================== */

body #page-wrapper #banner,
body #page-wrapper section#banner,
body.landingLocation #banner,
body.page-partenaires #page-wrapper #banner,
body.page-partenaires #page-wrapper section#banner {
    min-height: var(--ase-banner-height) !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: calc(var(--ase-header-height) + 1.15rem) 1rem calc(1.15rem + var(--ase-sticky-height)) 1rem !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
}

body #banner .inner,
body #banner .banner-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
    overflow: visible !important;
}

body #banner .banner-media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

body #banner .header-bg-img,
body #banner .header-bg-video,
body #banner .banner-media .header-bg-img,
body #banner .banner-media .header-bg-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    transform: none !important;
    background-size: cover !important;
    background-position: center center !important;
    object-fit: cover !important;
}

body #banner .header-bg-video iframe,
body #banner .header-bg-video video,
body #banner .header-bg-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
    border: 0 !important;
}

body #banner .ase-logo {
    width: var(--ase-banner-logo-size) !important;
    max-width: var(--ase-banner-logo-size) !important;
    height: auto !important;
    margin: 0 auto 0.35em !important;
    display: block !important;
    order: 1 !important;
}

body #banner .inner h2,
body #banner h2 {
    font-size: var(--ase-banner-title-size) !important;
    line-height: 1.12 !important;
    order: 2 !important;
}

body #banner .header-subtitle,
body #banner .header-subtitle--cms {
    font-size: var(--ase-banner-subtitle-size) !important;
    order: 3 !important;
}

body #banner .header-buttons {
    order: 4 !important;
    margin: 0.5em auto !important;
    gap: 0.65em !important;
}

body #banner .header-buttons .header-btn,
body #banner .more,
body #banner .more.scrolly {
    order: 99 !important;
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0.5em auto 0 !important;
    padding: clamp(0.35em, 1vw, 0.45em) clamp(0.85em, 2vw, 1.15em) !important;
    font-size: clamp(0.78rem, 1.4vw + 0.4rem, 0.92rem) !important;
    line-height: 1.25 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    border-radius: 50px !important;
    text-decoration: none !important;
}

body #banner .more:hover,
body #banner .more.scrolly:hover {
    background: #3b1b4a !important;
    color: #fff !important;
}

body #banner .header-buttons .header-btn {
    background: #fff !important;
    color: #222 !important;
    border-radius: 24px !important;
    font-weight: 700 !important;
}

body #banner .header-buttons .header-btn:hover {
    background: #222 !important;
    color: #fff !important;
}

@media screen and (max-width: 980px) {
    body #page-wrapper #banner,
    body #page-wrapper section#banner,
    body.page-partenaires #page-wrapper #banner {
        min-height: var(--ase-banner-height) !important;
        padding: calc(var(--ase-header-height) + 0.9rem) 0.85rem calc(0.9rem + var(--ase-sticky-height)) 0.85rem !important;
    }
}

@media screen and (max-width: 736px) {
    body #page-wrapper #banner,
    body #page-wrapper section#banner,
    body.page-partenaires #page-wrapper #banner,
    body.landingLocation #banner {
        min-height: var(--ase-banner-height) !important;
        padding: calc(var(--ase-header-height) + 0.75rem) 0.65rem calc(0.75rem + var(--ase-sticky-height)) 0.65rem !important;
    }
}