/* ===== Styles des bannières ===== */

/* Bannière accueil */
.banner-section {
    margin-top: -88px;
    position: relative;
    z-index: 0;
    min-height: calc(100vh + 88px) !important;
    height: calc(100vh + 88px) !important;
    overflow: hidden;
    display: block;
}

.banner-section--with-padding {
    margin-top: -88px;
    padding-top: 88px;
    min-height: calc(100vh + 88px) !important;
    height: calc(100vh + 88px) !important;
    display: block;
}

/* Bannière compacte avec padding */
.banner-section--compact.banner-section--with-padding {
    min-height: calc(33vh + 88px) !important;
    height: calc(33vh + 88px) !important;
}

.banner-hero-bg {
    background-image: url('../img-louis/hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: calc(100vh + 88px) !important;
    height: calc(100vh + 88px) !important;
    width: 100%;
    display: block;
    position: relative;
}

.banner-voyageur-bg {
    background-image: url('../img-louis/banniere-voyageur.webp');
    background-size: cover;
    background-position: center;
    min-height: calc(33vh + 88px) !important;
    height: calc(33vh + 88px) !important;
    width: 100%;
    display: block;
    position: relative;
}

.banner-proprietaire-bg {
    background-image: url('../img-louis/banniere-proprietaire.webp');
    background-size: cover;
    background-position: center;
    min-height: calc(33vh + 88px) !important;
    height: calc(33vh + 88px) !important;
    width: 100%;
    display: block;
    position: relative;
}

.banner-content-padding {
    padding-top: 88px;
}

/* Force la hauteur complète pour les conteneurs de bannière (accueil uniquement) */
.banner-section:not(.banner-section--compact) > div {
    min-height: calc(100vh + 88px) !important;
    height: calc(100vh + 88px) !important;
    display: block;
}

/* Bannières compactes (voyageurs et propriétaires) - 1/3 de l'écran */
.banner-section--compact {
    min-height: calc(33vh + 88px) !important;
    height: calc(33vh + 88px) !important;
}

.banner-section--compact > div {
    min-height: calc(33vh + 88px) !important;
    height: calc(33vh + 88px) !important;
    display: block;
}

.banner-section--compact .relative {
    min-height: calc(33vh + 88px) !important;
    height: calc(33vh + 88px) !important;
    display: block;
}

/* Assure que les éléments relatifs prennent toute la hauteur (accueil uniquement) */
.banner-section:not(.banner-section--compact) .relative {
    min-height: calc(100vh + 88px) !important;
    height: calc(100vh + 88px) !important;
    display: block;
}

/* Supprime tout espace après la bannière */
.banner-section + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Assure que le body et html n'ont pas de marges qui réduisent la hauteur */
body:has(.banner-section),
html:has(.banner-section) {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

/* Typographie bannière - Gérée dans typography.css */
.banner-typography {
    --banner-font-family: inherit;
}

/* Ajustements pour les bannières compactes */
.banner-section--compact h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    margin-bottom: calc(var(--spacing) * 2) !important;
}

.banner-section--compact p {
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
}

@media (max-width: 768px) {
    .banner-section--compact h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: calc(var(--spacing) * 1.5) !important;
    }
    
    .banner-section--compact p {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem) !important;
    }
}