/* Optimisations CSS sur mesure */
html { scroll-behavior: smooth; }
.hero-section {
    background-image: linear-gradient(to right, rgba(12, 30, 60, 0.95) 0%, rgba(12, 30, 60, 0.7) 100%), url('../images/thermopompe-murale-condo-luxueux.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effet Parallax doux */
    min-height: 85vh; 
    display: flex;
    align-items: center;
}
.brand-logo-img { filter: grayscale(100%); opacity: 0.5; transition: all 0.4s ease; }
.brand-logo-img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }
.mobile-sticky-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-sticky-bar > a,
    .mobile-sticky-bar > button {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}
.modal-overlay { background-color: rgba(12, 30, 60, 0.85); backdrop-filter: blur(5px); }
.section-padding { padding-top: 5rem; padding-bottom: 5rem; }

/* Classes pour animations Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Navigation dynamique */
nav.scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(12, 30, 60, 0.95);
    backdrop-filter: blur(8px);
}
nav.scrolled img {
    height: 2.5rem; /* Logo plus petit au scroll */
}