/* ============================================================
   People's Window Washing : Shared CSS
   Variables, reset, buttons, sections, header, page-hero,
   CTA, footer, floating CTA + global overrides absorbed
   from the old overrides file (kept loaded last here too,
   to preserve the original cascade order).
   ============================================================ */

:root {
    /* Palette People's Window Washing : Blue & Gold */
    --color-bg-main: #F5F8FB;
    --color-bg-card: #FFFFFF;
    --color-bg-darker: #E8EFF6;
    --color-text-main: #17233B;
    --color-text-light: #57667D;
    --color-accent-1: #1B3A6B;
    --color-accent-2: #12294D;
    --color-accent-gold: #D4A537;
    --color-accent-light: #BFD4EC;
    --color-white: #FFFFFF;
    --color-navy: #12294D;

    --font-serif: Georgia, 'Times New Roman', serif;
    --font-sans: 'Manrope', Tahoma, Geneva, Verdana, sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 4px 6px -1px rgba(61, 43, 31, 0.1);
    --shadow-md: 0 10px 25px -5px rgba(61, 43, 31, 0.1);
    --shadow-lg: 0 20px 40px -10px rgba(61, 43, 31, 0.15);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.4s ease;
    --transition: 0.3s ease; /* compat pages historiquement "groupe B" */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-sans); color: var(--color-text-main); background-color: var(--color-bg-main); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, .font-serif { font-family: var(--font-serif); font-weight: normal; line-height: 1.2; color: var(--color-text-main); }
a { color: var(--color-accent-1); text-decoration: none; transition: color var(--transition-fast); }
.section p a, .contact-info-item p a, .faq-answer-inner a { text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-2); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-sm); }
.text-center { text-align: center; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background-color: var(--color-accent-1); color: var(--color-white) !important;
    padding: 12px 24px; border: none; border-radius: 6px;
    font-family: var(--font-sans); font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(27, 58, 107, 0.3);
}
.btn:hover { background-color: var(--color-accent-2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27, 58, 107, 0.4); }
.btn-secondary { background-color: var(--color-white); color: var(--color-text-main) !important; }
.btn-secondary:hover { background-color: var(--color-bg-darker); color: var(--color-text-main) !important; }
.btn-outline { background-color: transparent; border: 2px solid var(--color-accent-1); color: var(--color-accent-1) !important; box-shadow: none; }
.btn-outline:hover { background-color: var(--color-accent-1); color: var(--color-white) !important; box-shadow: 0 4px 15px rgba(27, 58, 107, 0.3); }
.btn-lg { padding: 16px 32px; font-size: 1.1rem; }

.section { padding: var(--spacing-xl) 0; }
.section-label { display: inline-block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--color-accent-1); margin-bottom: 1rem; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--spacing-sm); position: relative; }
.section-subtitle { font-size: 1.15rem; color: var(--color-text-light); margin-bottom: var(--spacing-lg); max-width: 700px; margin-left: auto; margin-right: auto; }

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }

/* ==========================================================================
   HEADER
   ========================================================================== */
header {
    position: fixed; top: 0; left: 0; width: 100%; background-color: transparent;
    z-index: 1000; transition: all var(--transition-normal); padding: 15px 0;
}
header::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 140px;
    background: linear-gradient(to bottom, rgba(10, 20, 35, 0.55) 0%, rgba(10, 20, 35, 0.25) 60%, rgba(10, 20, 35, 0) 100%);
    z-index: -1; pointer-events: none; transition: opacity var(--transition-normal);
}
header.scrolled::before { opacity: 0; }
header.scrolled { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 10px 0; }
.header-main { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-sm); }
.logo img { height: 60px; transition: var(--transition-fast); }
header.scrolled .logo img { height: 50px; }

nav ul { display: flex; gap: 20px; align-items: center; flex-wrap: nowrap; }
nav a, .nav-dropdown-toggle {
    font-size: 0.95rem; font-weight: 600; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.5px;
    background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; position: relative;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4); white-space: nowrap;
}

/* Compact the header progressively before giving up and switching to the burger menu,
   so common laptop widths (1366px, 1280px, 1200px) still show the full nav instead of
   collapsing unnecessarily early. The burger only kicks in below 1100px now. */
@media (max-width: 1400px) {
    nav ul { gap: 12px; }
    nav a, .nav-dropdown-toggle { font-size: 0.82rem; letter-spacing: 0.2px; }
    .header-actions .btn { padding: 10px 16px !important; font-size: 0.85rem !important; }
    .header-actions { margin-left: 1.25rem; }
}
header.scrolled nav a, header.scrolled .nav-dropdown-toggle { color: var(--color-text-main); text-shadow: none; }
nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--color-accent-gold); transition: width var(--transition-fast); }
nav a:hover::after, nav a.active::after { width: 100%; }
nav a:hover, .nav-dropdown-toggle:hover { color: var(--color-white); }
header.scrolled nav a:hover, header.scrolled .nav-dropdown-toggle:hover { color: var(--color-accent-1); }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute; top: 100%; left: 0; background: var(--color-white); min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 8px; padding: 10px 0;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition-fast); z-index: 1000;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: block; padding: 10px 20px; color: var(--color-text-main); text-transform: none; font-weight: 500; font-size: 0.95rem; }
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background-color: var(--color-bg-main); color: var(--color-accent-1); }

.burger-menu { display: none; background: none; border: none; cursor: pointer; }
.burger-menu span { display: block; width: 25px; height: 2px; background-color: var(--color-white); margin-bottom: 5px; transition: 0.3s; }
header.scrolled .burger-menu span { background-color: var(--color-text-main); }

@media (max-width: 1100px) {
    nav ul {
        display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%;
        background: rgba(255,255,255,0.97); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
        padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-bottom: 1px solid rgba(255,255,255,0.4);
    }
    nav ul.active { display: flex; }
    nav a, .nav-dropdown-toggle { color: var(--color-text-main) !important; text-shadow: none !important; padding: 10px 0; width: 100%; }
    .nav-dropdown-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 15px; border-left: 2px solid var(--color-bg-darker); margin-top: 5px; }
    .nav-dropdown-menu a { color: var(--color-text-main) !important; }
    .nav-dropdown.active .nav-dropdown-menu { display: block; }
    .burger-menu { display: block; }
    .header-actions { display: none; }
}

/* ==========================================================================
   PAGE HERO
   ========================================================================== */
.page-hero { position: relative; padding: 180px 0 100px; min-height: 55vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-white); overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,16,28,0.82), rgba(8,16,28,0.62)); }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }

.page-hero-content { position: relative; z-index: 1; max-width: 800px; padding: 0 1rem; }
.breadcrumb { margin-bottom: 1.5rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.breadcrumb a { color: var(--color-accent-light); transition: var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }
.page-hero h1 { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1rem; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
.page-hero h1 .highlight { color: var(--color-accent-gold); font-style: italic; }
.page-hero p { font-size: clamp(1.1rem, 2vw, 1.3rem); opacity: 0.95; font-weight: 300; text-shadow: 0 1px 10px rgba(0,0,0,0.35); }

/* ==========================================================================
   CTA BOTTOM
   ========================================================================== */
.cta-section { background: var(--color-bg-main); padding: 6rem 0; border-top: 1px solid var(--color-bg-darker); }
.cta-content { background: linear-gradient(135deg, var(--color-text-main) 0%, #1a120d 100%); color: var(--color-white); text-align: center; padding: 4rem 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cta-content h2 { font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 1rem; color: var(--color-white); }
.cta-content p { font-size: 1.15rem; max-width: 600px; margin: 0 auto 2.5rem auto; opacity: 0.9; overflow-wrap: break-word; word-break: break-word; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer { background-color: var(--color-white); padding: 4rem 0 2rem 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin: 0 auto 3rem auto; max-width: 1100px; justify-content: center; text-align: left; align-items: start; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; max-width: 400px; text-align: center; } .footer-col h4::after { left: 50%; transform: translateX(-50%); } }
.footer-col h4 { font-size: 1.2rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background-color: var(--color-accent-1); }
.footer-col p, .footer-col ul a { color: var(--color-text-light); font-size: 0.95rem; }
.footer-col p + p { margin-top: 0.75rem; }
.footer-col ul li { margin-bottom: 10px; }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--color-bg-darker); color: var(--color-text-light); font-size: 0.85rem; }
.footer-bottom a { color: var(--color-text-light); margin: 0 10px; }

.floating-cta { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background: var(--color-accent-1); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 9999; transition: transform 0.2s; }
.floating-cta:hover { transform: scale(1.1); }

/* === Canonical block: menu font + header phone fix === */
.nav-dropdown-toggle { font-family: inherit; }
.header-phone { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; color: #fff; transition: color 0.2s ease; }
header.scrolled .header-phone { color: #3D2B1F; }
.header-phone:hover { color: var(--color-accent-gold); }
.header-actions { display: flex; align-items: center; gap: 18px; margin-left: 1.25rem; }
header .logo img{height:92px!important}@media(max-width:1300px){header .logo img{height:60px!important}}@media(max-width:1100px){header .logo img{height:52px!important}}

/* ============================================================
   Global fixups
   Kept at the end of the file to preserve the cascade order
   (loaded last in the <head>).
   ============================================================ */

/* 1) Phone number removed from header (desktop AND mobile) */
.header-phone { display: none !important; }

/* 1ter) Nav links: consistent case and spacing across all templates */
.nav-links > a,
.nav-dropdown-toggle { text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; }

/* 1bis) Header "Get a Free Quote" button: identical look across every page
   (size, case, radius, color), regardless of template. */
.header-actions .btn {
    background-color: var(--color-accent-gold) !important;
    color: var(--color-text-main) !important;
    padding: 12px 22px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    gap: 8px;
    white-space: nowrap;
}
.header-actions .btn svg { stroke: var(--color-text-main); width: 16px; height: 16px; }
.header-actions .btn:hover { background-color: #c2952d !important; }

/* 2) Logos: WHITE version on the hero (transparent header),
   version COULEUR quand le header passe en blanc (scroll). */
.logo-dark { display: none; }
header.scrolled .logo-light { display: none; }
header.scrolled .logo-dark { display: block; }
/* slight lift on light/dark backgrounds */
.logo-light { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
.logo-dark { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)); }

/* 3) Heading contrast over background images (hero / banners) */
.page-hero-bg::after,
.hero-bg::after {
    background: linear-gradient(to bottom, rgba(42, 35, 30, 0.55), rgba(42, 35, 30, 0.78)) !important;
}
.page-hero h1,
.page-hero-content h1,
.hero-content h1,
.hero h1 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
/* Hero title: first part of the h1 in white (the .highlight word,
   being more specific, stays gold automatically) */
.page-hero h1 { color: #fff; }

/* 4) Mobile (<= 1024px) */
@media (max-width: 1100px) {
    /* Le bouton RDV et les actions sortent du header : seul le burger reste.
       Supprime tout chevauchement RDV / burger / logo. */
    .header-actions { display: none !important; }

    /* Slightly bigger, more legible logo on small screens */
    .logo img { height: 50px !important; }

    /* Breathing room between the nav bar and the hero content */
    .page-hero-content,
    .hero-content { padding-top: 1.5rem; }
}

/* 5) Home: 3rd stat hidden behind the search card on mobile.
   The card's negative top-margin was covering the end of the stats. */
@media (max-width: 1100px) {
    .project-search { margin-top: 1.5rem !important; }
    .hero-stats { padding-bottom: 1.5rem; }
}

/* Our Story — collapsible letter on mobile only (desktop always shows the full letter) */
.letter-toggle { display: none; }
.letter-fade { display: none; }
.letter-fade.hidden { display: none !important; }
@media (max-width: 768px) {
    .letter-rest { display: none; }
    .letter-preview { position: relative; }
    .letter-fade {
        display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--color-white) 90%);
        pointer-events: none;
    }
    .letter-toggle {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; margin-top: 1.25rem; padding: 0.85rem; background: var(--color-bg-main);
        border: 1px solid var(--color-bg-darker); border-radius: 8px; color: var(--color-accent-1);
        font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: var(--transition-fast);
    }
    .letter-toggle:hover { background: var(--color-bg-darker); }
    .letter-toggle svg { transition: transform 0.25s ease; }
    .letter-toggle.expanded svg { transform: rotate(180deg); }
    .letter-rest.expanded { display: block; }
}