/* =============================================================
   LILIAN CLEANING AND SERVICES — Brand Override CSS
   Surcharge du template premium "Cleanu" (ValidThemes)
   Auteur   : Antigravity AI
   Créé le  : 2026-09-25
   Version  : 1.0
   ============================================================= */

/* ── 0. Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Open+Sans:wght@400;600&family=Merriweather:ital,wght@1,700&display=swap');

/* ── 1. CSS Custom Properties — Design System Lilian ── */
:root {
    /* Couleurs principales */
    --lilian-navy:        #0B4A8B;   /* Bleu marine — titres, header, footer */
    --lilian-blue:        #1BA1E2;   /* Bleu vif — boutons, liens, CTA, icônes */
    --lilian-mist:        #EAF4FB;   /* Bleu très clair — fonds de sections */
    --lilian-green:       #2E9E4A;   /* Vert eco — badges eco, succès */
    --lilian-orange:      #F5A623;   /* Orange chaud — janitorial, accents */
    --lilian-ink:         #1F2A37;   /* Texte principal */
    --lilian-muted:       #5A6A7A;   /* Texte secondaire */
    --lilian-white:       #FFFFFF;
    --lilian-bg:          #F5F7FA;   /* Fond page clair */
    --lilian-border:      #CFE3F3;   /* Bordures cartes */

    /* Typographies */
    --font-heading:  'Montserrat', sans-serif;
    --font-body:     'Open Sans', sans-serif;
    --font-tagline:  'Merriweather', Georgia, serif;

    /* Border radius */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  50px;

    /* Ombres */
    --shadow-card:  0 4px 24px rgba(11, 74, 139, 0.10);
    --shadow-btn:   0 6px 20px rgba(27, 161, 226, 0.35);
    --shadow-hero:  0 0 60px rgba(11, 74, 139, 0.25);

    /* Overrides template */
    --color-primary:      var(--lilian-blue);
    --color-secondary:    var(--lilian-orange);
    --color-heading:      var(--lilian-ink);
    --color-paragraph:    var(--lilian-muted);
    --dark:               var(--lilian-navy);
    --dark-secondary:     var(--lilian-navy);
    --bg-gray:            var(--lilian-mist);
    --bg-gradient:        linear-gradient(135deg, var(--lilian-navy) 0%, #1565c0 50%, var(--lilian-blue) 100%);
    --box-shadow-primary: var(--shadow-card);
    --box-shadow-secondary: var(--shadow-btn);
}

/* ── 2. Base body & typography ── */
body {
    font-family: var(--font-body) !important;
    color: var(--lilian-ink);
    background-color: var(--lilian-white);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-heading h2,
.site-heading h4 {
    font-family: var(--font-heading) !important;
    color: var(--lilian-navy);
}

h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; }
h2 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 700; }
h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 600; }

p { font-family: var(--font-body); color: var(--lilian-muted); line-height: 1.7; }

/* Tagline accroche */
.lilian-tagline {
    font-family: var(--font-tagline) !important;
    font-style: italic;
    font-weight: 700;
}

/* ── 3. Top Bar (Preserves template structure & geometry) ── */
.top-bar-area.multi-content {
    background-color: var(--lilian-navy) !important;
    font-family: var(--font-body);
}
.top-bar-area .info li {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
}
.top-bar-area .info li a {
    color: rgba(255, 255, 255, 0.92);
}
.top-bar-area .info li i {
    color: var(--lilian-blue);
    margin-right: 6px;
}
.top-bar-area.multi-content .social li a {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transition: all 0.3s;
}
.top-bar-area.multi-content .social li a:hover {
    background: var(--lilian-blue);
    border-color: var(--lilian-blue);
    color: #fff;
}

/* ── 4. Logo Display (No deformation, perfectly scaled) ── */
.top-bar-area .logo a {
    display: inline-block;
    vertical-align: middle;
}
.top-bar-area .logo img.logo,
.top-bar-area .logo img {
    height: 87px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: inline-block;
}
.navbar-brand img.logo,
.navbar-brand img,
.navbar-header .navbar-brand img {
    height: 46px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: inline-block;
}
.collapse.navbar-collapse > img {
    height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 15px 0 15px 25px;
}
.side .widget .logo img {
    height: 55px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
    margin-bottom: 20px;
}

/* ── 5. Navigation & Header Bar ── */
nav.navbar.validnavs.nav-box,
nav.navbar.validnavs.navbar-fixed.nav-box.no-background,
nav.navbar.nav-box.validnavs.no-background .container,
.nav-box.no-background .container.nav-container,
.container.nav-box {
    background: #FFFFFF !important;
    box-shadow: 0 8px 30px rgba(11, 74, 139, 0.12) !important;
    border: 1px solid rgba(27, 161, 226, 0.18) !important;
    border-radius: 10px !important;
}

nav.navbar.validnavs.navbar-sticky.sticked {
    background: #FFFFFF !important;
    box-shadow: 0 4px 25px rgba(11, 74, 139, 0.12) !important;
}

/* Nav Links - Desktop Base */
nav.validnavs ul li > a,
nav.validnavs ul.navbar-nav > li > a,
nav.validnavs ul.nav > li > a,
.nav-box.no-background .container.nav-container ul.nav > li > a,
nav.navbar.validnavs.navbar-fixed.nav-box.no-background ul.nav > li > a {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--lilian-navy) !important;
    letter-spacing: 0.2px;
    padding: 26px 14px !important;
    transition: all 0.25s ease !important;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
}

/* Hover state */
nav.validnavs ul li > a:hover,
nav.validnavs ul.navbar-nav > li > a:hover,
nav.validnavs ul.navbar-nav > li:hover > a {
    color: var(--lilian-blue) !important;
    background: transparent !important;
}

/* ACTIVE state — Crystal clear, high contrast, elegant indicator */
nav.validnavs ul li.active > a,
nav.validnavs ul.navbar-nav > li.active > a,
nav.validnavs ul.nav > li.active > a,
nav.validnavs ul.navbar-nav > li > a.active,
nav.validnavs ul.nav > li > a.active,
nav.navbar.validnavs.navbar-fixed.nav-box.no-background ul.nav > li.active > a {
    color: var(--lilian-navy) !important;
    font-weight: 800 !important;
    position: relative;
}

/* Active indicator bottom bar & soft highlight on Desktop */
@media (min-width: 1024px) {
    nav.validnavs ul.navbar-nav > li.active > a::after,
    nav.validnavs ul.nav > li.active > a::after,
    nav.validnavs ul.navbar-nav > li > a.active::after,
    nav.validnavs ul.nav > li > a.active::after {
        content: "" !important;
        position: absolute;
        bottom: 12px;
        left: 14px;
        right: 14px;
        height: 3px;
        background: var(--lilian-blue) !important;
        border-radius: 3px;
        display: block !important;
    }

    nav.validnavs ul.navbar-nav > li.active > a,
    nav.validnavs ul.nav > li.active > a {
        background: rgba(234, 244, 251, 0.75) !important;
        border-radius: 6px;
    }
}

/* Dropdown Menus */
nav.validnavs ul.dropdown-menu {
    background: #FFFFFF !important;
    border-top: 3px solid var(--lilian-blue) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    box-shadow: 0 12px 32px rgba(11, 74, 139, 0.16) !important;
    padding: 8px 0 !important;
}

nav.validnavs ul.dropdown-menu > li > a {
    font-family: var(--font-heading) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--lilian-ink) !important;
    padding: 10px 22px !important;
    display: block !important;
    transition: all 0.2s ease !important;
}

nav.validnavs ul.dropdown-menu > li > a:hover,
nav.validnavs ul.dropdown-menu > li.active > a,
nav.validnavs ul.dropdown-menu > li > a.active {
    color: var(--lilian-navy) !important;
    background: var(--lilian-mist) !important;
    font-weight: 700 !important;
    padding-left: 26px !important;
    border-left: 4px solid var(--lilian-blue) !important;
}

/* Mobile navigation drawer / sidebar */
@media (max-width: 1023px) {
    nav.validnavs .navbar-collapse {
        background: #FFFFFF !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    }

    nav.validnavs .navbar-collapse ul.navbar-nav > li > a,
    nav.validnavs .navbar-collapse ul.nav > li > a {
        color: var(--lilian-navy) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 14px 20px !important;
        border-bottom: 1px solid #F0F4F8 !important;
        display: block !important;
    }

    nav.validnavs .navbar-collapse ul.navbar-nav > li.active > a,
    nav.validnavs .navbar-collapse ul.nav > li.active > a,
    nav.validnavs .navbar-collapse ul.navbar-nav > li > a.active {
        background: var(--lilian-mist) !important;
        color: var(--lilian-navy) !important;
        font-weight: 800 !important;
        border-left: 4px solid var(--lilian-blue) !important;
        padding-left: 24px !important;
    }

    .navbar-header .navbar-toggle {
        color: var(--lilian-navy) !important;
    }
}

/* Attribute Nav & Icons */
.attr-nav > ul > li > a,
nav.navbar.validnavs.navbar-fixed.nav-box.no-background .attr-nav > ul > li > a,
.nav-box.no-background .container.nav-container .attr-nav > ul > li > a {
    color: var(--lilian-navy) !important;
}

.attr-nav .side-menu span,
nav.navbar.nav-box.validnavs.no-background .attr-nav .side-menu span,
.nav-box.no-background .container.nav-container .attr-nav .side-menu span {
    background: var(--lilian-navy) !important;
}

.nav-btn-estimate {
    background: var(--lilian-blue);
    color: var(--lilian-white) !important;
    padding: 10px 22px !important;
    border-radius: var(--radius-xl) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
.nav-btn-estimate:hover {
    background: var(--lilian-navy) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-2px);
}

/* ── 5. Hero / Banner ── */
.banner-area {
    position: relative;
}
.banner-area .box-cell.shadow.gradient {
    background: linear-gradient(
        to right,
        rgba(11, 74, 139, 0.88) 0%,
        rgba(11, 74, 139, 0.60) 60%,
        rgba(11, 74, 139, 0.20) 100%
    ) !important;
}
.banner-area .content h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lilian-blue) !important;
    background: rgba(27, 161, 226, 0.12);
    display: inline-block;
    padding: 6px 18px;
    border-radius: var(--radius-xl);
    margin-bottom: 20px;
    border: 1px solid rgba(27, 161, 226, 0.4);
}
.banner-area .content h2 {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    color: #fff !important;
    line-height: 1.15;
    margin-bottom: 16px;
}
.banner-area .content .hero-sub {
    font-family: var(--font-body);
    font-size: 18px;
    color: rgba(255,255,255,0.90);
    max-width: 560px;
    line-height: 1.6;
    margin-bottom: 36px;
}
.banner-area .content .hero-tagline {
    font-family: var(--font-tagline);
    font-style: italic;
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

/* ── 6. Boutons (Design System) ── */
.btn-lilian-primary,
.btn.btn-theme.primary.effect {
    background: var(--lilian-blue) !important;
    border: 2px solid var(--lilian-blue) !important;
    color: var(--lilian-white) !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 32px;
    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-lilian-primary:hover,
.btn.btn-theme.primary.effect:hover {
    background: var(--lilian-navy) !important;
    border-color: var(--lilian-navy) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-2px);
    color: var(--lilian-white) !important;
}

.btn-lilian-secondary,
.btn.btn-theme.secondary.effect {
    background: transparent !important;
    border: 2px solid var(--lilian-white) !important;
    color: var(--lilian-white) !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 32px;
    transition: all 0.3s;
}
.btn-lilian-secondary:hover {
    background: var(--lilian-white) !important;
    color: var(--lilian-navy) !important;
}

.btn.btn-light.effect {
    background: var(--lilian-white) !important;
    border: 2px solid var(--lilian-white) !important;
    color: var(--lilian-navy) !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-heading);
    font-weight: 700;
}
.btn.btn-light.effect:hover {
    background: var(--lilian-orange) !important;
    border-color: var(--lilian-orange) !important;
    color: var(--lilian-white) !important;
}

.btn.btn-dark.effect {
    background: var(--lilian-navy) !important;
    border: 2px solid var(--lilian-navy) !important;
    color: var(--lilian-white) !important;
    border-radius: var(--radius-xl) !important;
}
.btn.btn-dark.effect:hover {
    background: var(--lilian-blue) !important;
    border-color: var(--lilian-blue) !important;
}

/* ── 7. Trust Bar / Features badges ── */
.trust-bar {
    background: var(--lilian-white);
    border-top: 1px solid var(--lilian-border);
    border-bottom: 1px solid var(--lilian-border);
    padding: 22px 0;
    box-shadow: 0 2px 12px rgba(11,74,139,0.06);
}
.trust-bar .trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}
.trust-bar .trust-item i {
    font-size: 26px;
    color: var(--lilian-blue);
    flex-shrink: 0;
}
.trust-bar .trust-item .text strong {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--lilian-navy);
    display: block;
}
.trust-bar .trust-item .text span {
    font-size: 12px;
    color: var(--lilian-muted);
}

/* ── 8. Section Headings ── */
.site-heading h4 {
    color: var(--lilian-blue) !important;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.site-heading h2 {
    color: var(--lilian-navy) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700;
}
.site-heading .devider {
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, var(--lilian-blue), var(--lilian-green));
    border-radius: 4px;
    margin: 16px auto;
}
.heading-left .site-heading .devider {
    margin: 16px 0;
}

/* ── 9. Service Cards ── */
.lilian-service-card {
    background: var(--lilian-white);
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-md);
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.lilian-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--lilian-blue), var(--lilian-navy));
    transform: scaleX(0);
    transition: transform 0.3s;
}
.lilian-service-card:hover::before { transform: scaleX(1); }
.lilian-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(11, 74, 139, 0.18);
    border-color: var(--lilian-blue);
}
.lilian-service-card .icon-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
}
.icon-circle-blue   { background: rgba(27,161,226,0.12); color: var(--lilian-blue); }
.icon-circle-navy   { background: rgba(11,74,139,0.12);  color: var(--lilian-navy); }
.icon-circle-green  { background: rgba(46,158,74,0.12);  color: var(--lilian-green); }
.icon-circle-orange { background: rgba(245,166,35,0.12); color: var(--lilian-orange); }

.lilian-service-card h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--lilian-navy);
    margin-bottom: 12px;
}
.lilian-service-card p {
    font-size: 15px;
    margin-bottom: 20px;
}
.lilian-service-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}
.lilian-service-card ul li {
    padding: 5px 0;
    font-size: 14px;
    color: var(--lilian-muted);
}
.lilian-service-card ul li::before {
    content: '✓';
    color: var(--lilian-green);
    font-weight: 700;
    margin-right: 8px;
}

/* Feature cards (Popular Options) */
.feature-style-three .item {
    background: var(--lilian-white);
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    margin-bottom: 30px;
}
.feature-style-three .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(11,74,139,0.15);
}
.feature-style-three .item .top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.feature-style-three .item .top i {
    font-size: 38px;
    color: var(--lilian-blue);
}
.feature-style-three .item .top h4 a {
    color: var(--lilian-navy);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    transition: color 0.2s;
}
.feature-style-three .item .top h4 a:hover { color: var(--lilian-blue); }

/* ── 10. Services Types (carousel) ── */
.services-types-area {
    background: var(--bg-gradient) !important;
}
.services-types-area h5 {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65) !important;
}
.services-types-area h2 { color: var(--lilian-white) !important; }
.services-types-area p  { color: rgba(255,255,255,0.80) !important; }
.services-types-area ul li { color: rgba(255,255,255,0.85) !important; }
.services-types-area ul li::before {
    content: '✓';
    color: var(--lilian-green);
    font-weight: 700;
    margin-right: 8px;
}
.services-types-area .thumb {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-hero);
}
.services-types-area .thumb img {
    border-radius: var(--radius-md);
    width: 100%;
    object-fit: cover;
}

/* ── 11. Fun Facts ── */
.fun-factor-area {
    background: var(--lilian-navy) !important;
    position: relative;
}
.fun-factor-area .fun-fact .timer {
    font-family: var(--font-heading);
    font-size: 56px;
    font-weight: 800;
    color: var(--lilian-blue) !important;
}
.fun-factor-area .fun-fact .operator {
    color: var(--lilian-blue) !important;
    font-size: 36px;
    font-weight: 800;
}
.fun-factor-area .fun-fact .medium {
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75) !important;
    margin-top: 4px;
}

/* ── 12. Work Process ── */
.work-process-area .item .thumb {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.work-process-area .item .thumb span {
    background: var(--lilian-blue);
    color: var(--lilian-white);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    top: 16px; right: 16px;
    box-shadow: 0 4px 12px rgba(27,161,226,0.4);
}
.work-process-area .item h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--lilian-navy);
    margin-top: 20px;
}
.work-process-area .item p {
    font-size: 14px;
    color: var(--lilian-muted);
}

/* Process steps with numbers (alternative) */
.lilian-step {
    text-align: center;
    padding: 32px 20px;
    background: var(--lilian-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--lilian-border);
    box-shadow: var(--shadow-card);
    position: relative;
    transition: transform 0.3s;
}
.lilian-step:hover { transform: translateY(-6px); }
.lilian-step .step-number {
    width: 60px; height: 60px;
    background: var(--lilian-blue);
    color: var(--lilian-white);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-btn);
}
.lilian-step h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lilian-navy);
    margin-bottom: 10px;
}
.lilian-step p { font-size: 14px; }

/* ── 13. Appointment / Estimate Form ── */
.appoinment-area {
    background: var(--bg-gradient) !important;
}
.appoinment-area h2 {
    color: var(--lilian-white) !important;
    font-family: var(--font-heading) !important;
}
.appoinment-area p { color: rgba(255,255,255,0.80) !important; }
.appoinment-area .form-items {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 40px 36px;
    backdrop-filter: blur(10px);
}
.appoinment-area .form-control {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--lilian-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.appoinment-area .form-control:focus {
    border-color: var(--lilian-blue);
    box-shadow: 0 0 0 3px rgba(27,161,226,0.15);
    background: var(--lilian-white);
    outline: none;
}
.appoinment-area .nice-select {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-sm);
    width: 100%;
    height: 50px;
    line-height: 48px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--lilian-muted);
}
.appoinment-area label {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.btn-estimate-submit {
    background: var(--lilian-white) !important;
    color: var(--lilian-navy) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    padding: 16px 40px;
    width: 100%;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.btn-estimate-submit:hover {
    background: var(--lilian-orange) !important;
    color: var(--lilian-white) !important;
    box-shadow: 0 8px 24px rgba(245,166,35,0.40);
}

/* ── 14. Témoignages ── */
.testimonials-area {
    background: var(--lilian-mist);
}
.testimonials-area.half-bg::after {
    background: var(--lilian-navy) !important;
}
.testimonial-carousel .item {
    background: var(--lilian-white);
    border-radius: var(--radius-md);
    padding: 40px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--lilian-border);
}
.testimonial-carousel .item img.reviewer-photo {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--lilian-blue);
    margin-bottom: 16px;
}
.testimonial-carousel .item p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--lilian-muted);
    font-style: italic;
}
.testimonial-carousel .provider h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lilian-navy);
    font-size: 16px;
    margin-bottom: 2px;
}
.testimonial-carousel .provider .reviewer-location {
    font-size: 12px;
    color: var(--lilian-muted);
}
.testimonial-carousel .rating i {
    color: var(--lilian-orange);
    font-size: 14px;
}
.testimonial-carousel .item .quote-icon {
    font-size: 40px;
    color: var(--lilian-blue);
    opacity: 0.25;
    margin-bottom: 16px;
}

/* ── 15. CTA Band ── */
.lilian-cta-band {
    background: var(--bg-gradient);
    padding: 70px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lilian-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/img/shape/bg.svg') center/cover no-repeat;
    opacity: 0.06;
}
.lilian-cta-band h2 {
    color: var(--lilian-white) !important;
    font-size: clamp(24px, 3vw, 40px);
    margin-bottom: 14px;
}
.lilian-cta-band p {
    color: rgba(255,255,255,0.80);
    font-size: 18px;
    margin-bottom: 36px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.lilian-cta-band .btn-cta-white {
    background: var(--lilian-white);
    color: var(--lilian-navy);
    border-radius: var(--radius-xl);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    padding: 16px 40px;
    display: inline-block;
    transition: all 0.3s;
    margin: 6px;
}
.lilian-cta-band .btn-cta-white:hover {
    background: var(--lilian-orange);
    color: var(--lilian-white);
    box-shadow: 0 8px 24px rgba(245,166,35,0.40);
    transform: translateY(-2px);
}
.lilian-cta-band .btn-cta-outline {
    background: transparent;
    color: var(--lilian-white);
    border: 2px solid rgba(255,255,255,0.60);
    border-radius: var(--radius-xl);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    padding: 14px 38px;
    display: inline-block;
    transition: all 0.3s;
    margin: 6px;
}
.lilian-cta-band .btn-cta-outline:hover {
    border-color: var(--lilian-white);
    background: rgba(255,255,255,0.10);
    color: var(--lilian-white);
}

/* ── 16. About Section ── */
.about-us-area h2 { color: var(--lilian-navy) !important; }
.about-us-area blockquote {
    border-left: 4px solid var(--lilian-blue);
    background: var(--lilian-mist);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 18px 24px;
    font-style: italic;
    color: var(--lilian-navy);
    font-size: 16px;
    margin: 24px 0;
}
.about-us-area .thumb .experience {
    background: var(--lilian-blue) !important;
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-btn);
}
.about-us-area .thumb .experience h2 {
    color: var(--lilian-white) !important;
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 0;
}
.about-us-area .thumb .experience h4 {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px;
    margin-top: 4px;
}
.about-us-area .contact .content span {
    color: var(--lilian-muted);
    font-size: 13px;
}
.about-us-area .contact .content h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--lilian-blue);
}

/* Values list */
.lilian-values-list { list-style: none; padding: 0; margin: 20px 0; }
.lilian-values-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--lilian-navy);
    border-bottom: 1px solid var(--lilian-border);
}
.lilian-values-list li:last-child { border-bottom: none; }
.lilian-values-list li .val-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lilian-mist);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* ── 17. Who We Serve ── */
.lilian-audience-card {
    background: var(--lilian-white);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    border: 1px solid var(--lilian-border);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}
.lilian-audience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(11,74,139,0.15);
}
.lilian-audience-card i {
    font-size: 40px;
    color: var(--lilian-blue);
    margin-bottom: 16px;
    display: block;
}
.lilian-audience-card h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lilian-navy);
    margin-bottom: 8px;
}
.lilian-audience-card p { font-size: 14px; }

/* ── 18. FAQ Accordion ── */
.lilian-faq .accordion-item {
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-sm) !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(11,74,139,0.06);
}
.lilian-faq .accordion-button {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--lilian-navy);
    background: var(--lilian-white);
    padding: 20px 24px;
}
.lilian-faq .accordion-button:not(.collapsed) {
    color: var(--lilian-blue);
    background: var(--lilian-mist);
    box-shadow: none;
}
.lilian-faq .accordion-button::after {
    filter: hue-rotate(200deg) saturate(2);
}
.lilian-faq .accordion-body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--lilian-muted);
    line-height: 1.7;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--lilian-border);
}

/* ── 19. Page Banner (inner pages) ── */
.lilian-page-banner {
    background: var(--bg-gradient);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}
.lilian-page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/img/shape/bg.svg') center/cover no-repeat;
    opacity: 0.05;
}
.lilian-page-banner h1 {
    color: var(--lilian-white);
    font-family: var(--font-heading);
    font-weight: 800;
    margin-bottom: 12px;
}
.lilian-page-banner .breadcrumb-item,
.lilian-page-banner .breadcrumb-item a {
    color: rgba(255,255,255,0.75);
    font-family: var(--font-body);
    font-size: 14px;
}
.lilian-page-banner .breadcrumb-item.active { color: var(--lilian-white); }
.lilian-page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.40); }

/* ── 20. Contact Info Cards ── */
.lilian-contact-card {
    background: var(--lilian-white);
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--shadow-card);
    height: 100%;
    transition: transform 0.3s;
}
.lilian-contact-card:hover { transform: translateY(-6px); }
.lilian-contact-card .icon {
    width: 64px; height: 64px;
    background: var(--lilian-mist);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.lilian-contact-card .icon i {
    font-size: 26px;
    color: var(--lilian-blue);
}
.lilian-contact-card h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lilian-navy);
    margin-bottom: 8px;
}
.lilian-contact-card p, .lilian-contact-card a {
    font-size: 15px;
    color: var(--lilian-muted);
}
.lilian-contact-card a:hover { color: var(--lilian-blue); }

/* ── 21. Eco-Friendly Badge ── */
.eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(46,158,74,0.10);
    color: var(--lilian-green);
    border: 1px solid rgba(46,158,74,0.30);
    border-radius: var(--radius-xl);
    padding: 5px 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.eco-badge i { font-size: 14px; }

/* ── 22. Footer ── */
footer.bg-theme {
    background: var(--lilian-navy) !important;
}
footer .widget-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lilian-white) !important;
    font-size: 17px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
}
footer .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 36px; height: 3px;
    background: var(--lilian-blue);
    border-radius: 2px;
}
footer .f-item p { color: rgba(255,255,255,0.70); font-size: 14px; }
footer .f-item.link ul li a {
    color: rgba(255,255,255,0.70);
    font-size: 14px;
    transition: color 0.2s, padding-left 0.2s;
    font-family: var(--font-body);
    display: block;
    padding: 5px 0;
}
footer .f-item.link ul li a:hover {
    color: var(--lilian-blue);
    padding-left: 4px;
}
footer .f-item.link ul li a i { color: var(--lilian-blue); margin-right: 6px; }
footer .f-item.contact-widget .address ul li {
    color: rgba(255,255,255,0.70);
    font-size: 14px;
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
footer .f-item.contact-widget .address ul li .icon i {
    color: var(--lilian-blue);
    font-size: 16px;
    margin-top: 2px;
}
footer .f-item.contact-widget .address ul li .content a {
    color: var(--lilian-blue);
}
footer .footer-bottom {
    background: rgba(0,0,0,0.25);
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}
footer .footer-bottom p {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    margin: 0;
}
footer .footer-bottom .link a {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    transition: color 0.2s;
}
footer .footer-bottom .link a:hover { color: var(--lilian-blue); }
footer .f-newsletter {
    margin-top: 24px;
}
footer .f-newsletter form {
    display: flex;
    gap: 8px;
}
footer .f-newsletter input {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    color: var(--lilian-white);
    font-size: 14px;
    flex: 1;
    outline: none;
}
footer .f-newsletter input::placeholder { color: rgba(255,255,255,0.45); }
footer .f-newsletter button {
    background: var(--lilian-blue);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--lilian-white);
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.3s;
}
footer .f-newsletter button:hover { background: var(--lilian-navy); border: 1px solid var(--lilian-white); }

/* Footer social */
footer .footer-social { margin-top: 20px; }
footer .footer-social a {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lilian-white);
    font-size: 14px;
    margin-right: 6px;
    transition: background 0.3s, border-color 0.3s;
}
footer .footer-social a:hover {
    background: var(--lilian-blue);
    border-color: var(--lilian-blue);
}

/* ── 23. Sticky Mobile CTA ── */
.sticky-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9990;
    background: var(--lilian-white);
    border-top: 2px solid var(--lilian-border);
    box-shadow: 0 -4px 20px rgba(11,74,139,0.15);
}
.sticky-mobile-cta .cta-btn {
    flex: 1;
    padding: 14px 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: background 0.2s;
}
.sticky-mobile-cta .cta-btn i { font-size: 20px; }
.sticky-mobile-cta .cta-call {
    background: var(--lilian-blue);
    color: var(--lilian-white);
    border-right: 1px solid rgba(255,255,255,0.20);
}
.sticky-mobile-cta .cta-call:hover { background: #1488c4; color: var(--lilian-white); }
.sticky-mobile-cta .cta-whatsapp {
    background: #25D366;
    color: var(--lilian-white);
    border-right: 1px solid rgba(255,255,255,0.20);
}
.sticky-mobile-cta .cta-whatsapp:hover { background: #1ebe59; color: var(--lilian-white); }
.sticky-mobile-cta .cta-estimate {
    background: var(--lilian-navy);
    color: var(--lilian-white);
}
.sticky-mobile-cta .cta-estimate:hover { background: #082f5a; color: var(--lilian-white); }

/* ── 24. Preloader override ── */
.se-pre-con {
    background: var(--lilian-navy) url('assets/img/lilian-logo.png') center/180px auto no-repeat;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* ── 25. Scroll to top ── */
.scroll-to-top {
    position: fixed;
    bottom: 80px; right: 24px;
    width: 44px; height: 44px;
    background: var(--lilian-blue);
    color: var(--lilian-white);
    border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
    font-size: 18px;
    z-index: 9991;
    box-shadow: var(--shadow-btn);
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    text-decoration: none;
}
.scroll-to-top:hover {
    background: var(--lilian-navy);
    color: var(--lilian-white);
    transform: translateY(-3px);
}
.scroll-to-top.visible { display: flex; }

/* ── 26. Owl Carousel dots & nav ── */
.owl-theme .owl-dots .owl-dot span {
    background: var(--lilian-border);
    transition: background 0.3s, width 0.3s;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--lilian-blue);
    width: 28px;
}
.owl-theme .owl-nav button {
    background: var(--lilian-blue) !important;
    color: var(--lilian-white) !important;
    border-radius: 50% !important;
    width: 40px; height: 40px;
    font-size: 18px !important;
    transition: background 0.3s;
}
.owl-theme .owl-nav button:hover {
    background: var(--lilian-navy) !important;
}

/* ── 27. Section backgrounds alternées ── */
.section-bg-white  { background: var(--lilian-white); }
.section-bg-mist   { background: var(--lilian-mist); }
.section-bg-navy   { background: var(--lilian-navy); }
.default-padding   { padding: 90px 0; }
.default-padding-bottom { padding-bottom: 90px; }

/* ── 28. Responsive — Mobile First ── */
@media (max-width: 991px) {
    .sticky-mobile-cta { display: flex; }
    body { padding-bottom: 70px; } /* room for sticky bar */
    .banner-area .content h2 { font-size: 32px; }
    .default-padding { padding: 60px 0; }
}

@media (max-width: 767px) {
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    .lilian-service-card { padding: 28px 20px; }
    .appoinment-area .form-items { padding: 28px 20px; }
    .lilian-cta-band { padding: 50px 0; }
    .banner-area .content h2 { font-size: 28px; }
    .banner-area .content .hero-sub { font-size: 15px; }
}

@media (max-width: 480px) {
    .lilian-cta-band .btn-cta-white,
    .lilian-cta-band .btn-cta-outline { display: block; width: 100%; text-align: center; }
}

/* ── 29. Print / Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

:focus-visible {
    outline: 3px solid var(--lilian-blue);
    outline-offset: 3px;
}

/* ── 30. Services inner page ── */
.lilian-service-detail h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lilian-navy);
    margin: 28px 0 12px;
}
.lilian-checklist { list-style: none; padding: 0; }
.lilian-checklist li {
    padding: 7px 0;
    font-size: 15px;
    color: var(--lilian-muted);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.lilian-checklist li::before {
    content: '✓';
    color: var(--lilian-green);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.lilian-frequency-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lilian-mist);
    color: var(--lilian-navy);
    border: 1px solid var(--lilian-border);
    border-radius: var(--radius-xl);
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    margin: 4px;
}

/* Google Maps embed */
.lilian-map iframe {
    width: 100%;
    height: 380px;
    border-radius: var(--radius-md);
    border: none;
    filter: grayscale(20%) contrast(1.05);
}

/* ── 31. Form validation states ── */
.form-control.is-valid  { border-color: var(--lilian-green) !important; }
.form-control.is-invalid { border-color: #dc3545 !important; }
.form-feedback {
    font-size: 12px;
    margin-top: 4px;
    padding-left: 2px;
}
.form-feedback.error { color: #dc3545; }
.form-feedback.success { color: var(--lilian-green); }

/* Form success message */
.form-success-msg {
    background: rgba(46,158,74,0.10);
    border: 1px solid var(--lilian-green);
    border-radius: var(--radius-sm);
    color: var(--lilian-green);
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    display: none;
    margin-top: 16px;
}

/* ── 32. Utility classes ── */
.text-lilian-blue   { color: var(--lilian-blue) !important; }
.text-lilian-navy   { color: var(--lilian-navy) !important; }
.text-lilian-green  { color: var(--lilian-green) !important; }
.text-lilian-orange { color: var(--lilian-orange) !important; }
.bg-lilian-mist     { background: var(--lilian-mist) !important; }
.bg-lilian-navy     { background: var(--lilian-navy) !important; }