@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Colors extracted from reference */
    --color-primary: #125b5b;
    /* Deep Green for backgrounds/headers */
    --color-primary-dark: #0a3a3a;
    --color-accent: #009879;
    /* Teal/Green for buttons */
    --color-accent-hover: #007f65;
    --color-text-main: #1a1a1a;
    --color-text-light: #555555;
    --color-white: #ffffff;
    --color-bg-light: #f5f5f5;
    /* Light grey background */
    --color-border: #e0e0e0;

    /* Spacing */
    --container-width: 1200px;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Transition */
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: #f4f6f8;
    /* Light grey background from design */
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Typography Tools */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
    /* Titles often blue/green in design */
}

h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
    border-radius: 4px;
    /* Slightly rounded */
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn:hover {
    background-color: var(--color-accent-hover);
}

/* Header */
header {
    background-color: var(--color-white);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 98%;
    /* Use almost full width */
    margin: 0 auto;
    padding: 0 20px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 90px;
    /* Big Logo */
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 20px;
    /* Tighter gap */
    align-items: center;
    margin: 0 20px;
    flex-grow: 1;
    justify-content: center;
    flex-wrap: nowrap;
    /* No wrapping */
}

.nav-links li {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-links a {
    font-size: 14px;
    /* Explicit smaller size (approx 0.875rem) */
    font-weight: 700;
    color: var(--color-text-main);
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    /* Force 1 line */
    text-transform: none;
    /* User image shows Sentence case mostly but keys are uppercase in previous code. Let's stick to what's in HTML or set uppercase if needed. Image seems mixed/standard. Let's remove uppercase transform to save space/match image better if needed */
}

.nav-links a:hover {
    color: var(--color-accent);
}

/* Burger Menu */
.burger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.burger-menu .bar {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    transition: all 0.3s ease;
}

.burger-menu.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-menu.open .bar:nth-child(2) {
    opacity: 0;
}

.burger-menu.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Header Responsive */
@media (max-width: 1200px) {
    .nav-links {
        gap: 15px;
    }

    .nav-links a {
        font-size: 12px;
    }
}

/* Prevents body scroll when mobile menu is open */
.no-scroll {
    overflow: hidden;
}

/* Mobile Menu - Professional Left-Aligned Design */
@media (max-width: 768px) {
    .burger-menu {
        display: flex;
        z-index: 10001;
        position: relative;
    }

    .burger-menu.open .bar {
        background-color: var(--color-primary);
    }

    .nav-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Better than 100vh for some mobile browsers to avoid toolbar issues */
        background-color: white;
        z-index: 10000;
        padding-top: 80px;
        padding-bottom: 100px;
        /* Ensure content is reachable at bottom */
        box-shadow: none;
        overflow-y: auto;
        /* Standard scroll */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll for iOS */
        overscroll-behavior: contain;
        /* Prevent scroll chaining */
    }

    .nav-container.active {
        display: block !important;
    }

    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* List Items */
    .nav-links li {
        display: block !important;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main Level Links */
    .nav-links>li>a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 18px 25px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--color-primary) !important;
        text-transform: uppercase;
        background-color: white;
        text-decoration: none;
        width: 100%;
    }

    /* Sub-menu container */
    .dropdown-menu {
        display: none !important;
        /* Hidden by default */
        position: static !important;
        background-color: #f8f9fa !important;
        box-shadow: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Show sub-menu when parent li has 'active-dropdown' class */
    .dropdown-item.active-dropdown .dropdown-menu {
        display: block !important;
        animation: slideDown 0.3s ease-out;
    }

    /* Sub-menu Items */
    .dropdown-menu li {
        border-bottom: 1px solid #eee !important;
        border-top: none !important;
    }

    .dropdown-menu li:last-child {
        border-bottom: none !important;
    }

    .dropdown-menu li a {
        padding: 12px 25px 12px 40px !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #555 !important;
        text-transform: none !important;
        background-color: transparent !important;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a:active {
        color: var(--color-primary) !important;
        background-color: #f0f0f0 !important;
    }

    /* Chevron Arrow Styles */
    .nav-arrow {
        display: inline-block !important;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--color-primary);
        border-bottom: 2px solid var(--color-primary);
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        margin-left: 10px;
        margin-bottom: 3px;
    }

    /* Rotate arrow when active */
    .dropdown-item.active-dropdown .nav-arrow {
        transform: rotate(-135deg);
        margin-bottom: -3px;
    }

    /* Hide desktop cleanup items */
    .dropdown-item::after,
    .cta-btn {
        display: none !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Menu Styles */
.dropdown-item {
    position: relative;
    /* Padding removed to fix alignment */
}

/* Pseudo-element to bridge gap to menu for stable hover */
.dropdown-item::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
    display: block;
    margin-top: 10px;
    /* Create the visual gap */
}

.dropdown-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    /* top: 100% implicitly remains, margin-top remains */
}

.dropdown-menu li {
    display: block;
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.dropdown-menu a:hover {
    background-color: #f5f5f5;
    color: var(--color-primary);
}

/* Dropdown arrow styling */
.nav-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--color-text-main);
    margin-left: 6px;
    margin-top: 2px;
    transition: transform 0.3s;
}

.dropdown-item:hover .nav-arrow {
    transform: rotate(180deg);
}


.cta-btn {
    background-color: #008f72;
    /* Teal color matching the image */
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}

.cta-btn:hover {
    background-color: #00765c;
}

/* Hero full width image */
.hero-full {
    max-width: 1400px;
    margin: 30px auto;
    /* Center horizontally with some vertical space */
    padding: 0 20px;
    /* Add side padding for smaller screens */
}

.hero-full img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    /* Rounded corners as per design */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Subtle shadow for "floating" effect */
}

/* Previously used .hero-phone-btn css - kept if needed for other sections or deleted if unused. 
   Currently unused in Hero but might be used in footer or other places? 
   Will clear old hero CSS to avoid clutter. 
*/
.hero-phone-btn {
    display: none;
    /* Hidden as text is removed */
}

.hero-phone-btn svg {
    fill: var(--color-accent);
}

/* General Utilities */
.section-padding {
    padding: var(--spacing-xl) 0;
}

.bg-light {
    background-color: var(--color-bg-light);
}

@media (max-width: 768px) {
    .hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        width: 100%;
        height: 300px;
    }

    .nav-links {
        display: none;
        /* simple mobile hide for now */
    }


    .review-badge {
        position: relative;
        left: 0;
        top: -40px;
        margin: 0 auto;
    }
}

/* History Section */
.history-section {
    padding: 80px 0;
    background-color: var(--color-white);
}

.history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    /* Vertically center image and text */
    max-width: 1400px;
    /* Match width of hero/header */
    margin: 0 auto;
    /* Center the grid */
    padding: 0 20px;
    /* Add side padding for safety */
}

.history-content h2 {
    color: #005b8e;
    /* Specific blue from design */
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
    text-align: left;
}

.history-text-block p {
    margin-bottom: 20px;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
    /* Justify text for cleaner block look */
}

.history-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /* Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
    .history-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    .history-image {
        order: -1;
    }

    .history-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .history-section {
        padding: 40px 0;
    }
}

.history-text-block {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-light);
}

/* Services Section */
.services-section {
    background-color: var(--color-bg-light);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.services-margin {
    max-width: 1400px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.service-card {
    position: relative;
    height: 250px;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #ddd;
}

.service-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Intervention Zone Section */
.zone-section {
    padding: var(--spacing-xl) 0;
    background-color: #ffffff;
}

.zone-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    max-width: 1400px;
}

.zone-map {
    flex: 1;
    background-color: #f0f0f0;
    height: 500px;
    border-radius: 12px;
    border: 2px solid #000000;
}

.zone-content {
    flex: 1;
}

/* Trust Section */
.trust-section {
    padding: 60px 0;
    background-color: #eef2f6;
    /* Light grey/blue background from design */
}

.trust-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.trust-title {
    color: #005b8e;
    /* Matching Blue Title */
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.trust-logos-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    padding: 0 20px;
}

.trust-logo {
    max-height: 70px;
    /* Fixed height for consistency */
    width: auto;
    object-fit: contain;
    filter: grayscale(0%);
    transition: transform 0.3s ease;
}

.trust-logo:hover {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

@media (max-width: 1024px) {
    .trust-logos-grid {
        justify-content: center;
        gap: 30px;
    }

    .trust-logo {
        max-height: 60px;
        margin: 10px;
    }
}

@media (max-width: 600px) {
    .trust-title {
        font-size: 1.8rem;
    }

    .trust-logo {
        max-height: 40px;
    }
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .history-inner,
    .zone-inner {
        flex-direction: column;
    }

    .history-image,
    .zone-map {
        width: 100%;
        height: 300px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Banner Section */
.banner-section {
    position: relative;
    height: 350px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    /* Placeholder for truck background */
    z-index: 1;
    opacity: 0.5;
}

.banner-content {
    position: relative;
    /* justify-content and align-items do nothing without display:flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
    padding: 20px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    /* Force centering horizontally */
}

.banner-content h2 {
    color: white;
    font-size: 2rem;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: none;
}

/* Audience Section */
.audience-section {
    padding: var(--spacing-xl) 0;
    background-color: #ffffff;
}

.audience-margin {
    max-width: 1400px;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.audience-card {
    background: var(--color-bg-light);
    border-radius: 8px;
    padding: var(--spacing-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.audience-image {
    height: 200px;
    background-color: #ddd;
    border-radius: 6px;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.audience-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
}

.audience-text {
    font-size: 0.95rem;
    color: var(--color-text-light);
}

@media (max-width: 768px) {
    .audience-grid {
        grid-template-columns: 1fr;
    }
}

/* Trust Section */
.trust-section {
    background-color: var(--color-bg-light);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    align-items: center;
}

.logos-grid img,
.logos-grid .logo-placeholder {
    height: 50px;
    opacity: 0.8;
    filter: grayscale(0%);
    /* Assuming color logos based on image */
}

/* FAQ Section */
.faq-section {
    padding: var(--spacing-xl) 0;
    text-align: center;
    background-color: #ffffff;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.accordion {
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: 0.4s;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion:after {
    content: '\25BC';
    /* Down arrow */
    font-size: 0.8rem;
    color: var(--color-text-main);
    margin-left: 10px;
}

.accordion.active:after {
    content: '\25B2';
    /* Up arrow */
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 10px;
    color: var(--color-text-light);
}

/* Footer Section */
.footer-cta-bar {
    background-color: var(--color-bg-light);
    /* Light grey bar */
    padding: var(--spacing-md) 0;
}

.footer-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
}

.footer-cta-text h3 {
    margin-bottom: 5px;
    color: #056C9E;
    /* Blue title */
    font-size: 1.5rem;
}

.footer-cta-phone {
    font-size: 1.5rem;
    color: #056C9E;
    transition: color 0.3s ease;
}

.footer-cta-phone:hover {
    color: var(--color-accent);
}

.btn-cta {
    background-color: #056C9E;
    color: #ffff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 0;
    /* Changed from var(--spacing-md) as it might affect vertical alignment */
}

/* Footer CTA Responsive */
@media (max-width: 768px) {
    .footer-cta-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-cta-text {
        width: 100%;
    }

    .footer-cta-phone {
        justify-content: center;
        /* Center the flex content of phone */
        font-size: 1.3rem;
        /* Slightly smaller on mobile */
    }
}

/* Main Footer Styling */
.footer-main {
    background-color: #004d4d;
    /* Deep Teal/Green relative to image */
    color: white;
    padding: 60px 0 40px;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 40px;
    max-width: 1400px;
}

/* Col Left */
.footer-col-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-logo-box {
    background-color: white;
    padding: 15px 20px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 30px;
}

.footer-logo-box img {
    height: 30px;
    width: auto;
    display: block;
}

.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: auto;
    /* Push to bottom */
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s;
}

.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Col Center */
.footer-col-center {
    display: flex;
    flex-direction: column;
}

.footer-col-center h4 {
    color: white;
    margin-bottom: 20px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.footer-links {
    margin-bottom: 40px;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #b0caca;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: white;
}

.footer-divider-line {
    width: 40px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.footer-contact-details {
    color: #b0caca;
    line-height: 1.5;
}

/* Col Right */
.footer-col-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
}

.btn-footer-contact {
    background-color: white;
    color: #004d4d;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-footer-contact:hover {
    background-color: #f0f0f0;
}

.footer-legal-block {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
}

.footer-legals {
    display: flex;
    gap: 20px;
    color: #8daaaa;
    font-size: 0.8rem;
}

.footer-copyright {
    color: #5d7e7e;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .footer-col-left,
    .footer-col-center,
    .footer-col-right {
        align-items: flex-start;
        text-align: left;
    }

    .footer-col-right {
        align-items: flex-start;
    }

    .footer-legal-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-socials {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .logos-grid {
        gap: var(--spacing-md);
    }

    .footer-cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-inner {
        flex-direction: column;
    }
}

/* --- Travaux d'Assainissement Page Styles --- */

/* Page Hero */
/* Page Hero */
.page-hero {
    position: relative;
    height: 400px;
    max-width: 1400px;
    /* Contained width */
    margin: 30px auto;
    /* Centered with vertical spacing */
    border-radius: 20px;
    /* Rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0 20px;
    /* Padding for mobile text safety */
}

.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.page-hero-content {
    position: relative;
    z-index: 3;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.page-hero-content h1 {
    font-size: 3.5rem;
    /* Larger title */
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-underline {
    width: 300px;
    /* Wider green line */
    height: 5px;
    background-color: #009879;
    /* Green accent */
    margin-bottom: 20px;
    border-radius: 2px;
}

.page-hero-content p {
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    /* Match the style if needed */
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .page-hero {
        height: 300px;
        margin: 20px 10px;
        /* Small margin on mobile */
        border-radius: 12px;
    }

    .page-hero-content h1 {
        font-size: 2rem;
    }

    .hero-underline {
        width: 150px;
    }

    .page-hero-content p {
        font-size: 1rem;
    }
}

/* Problems Section */
.problems-section {
    padding: var(--spacing-xl) 0;
    background-color: white;
}

.problems-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Image left, Text right */
    gap: 80px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    /* Safety padding */
}

.problems-images {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    height: 550px;
    /* Taller images as shown in design */
}

.problem-img-col {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.prob-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.problem-img-col:hover .prob-img {
    transform: scale(1.05);
}

.problems-content {
    padding-right: 20px;
}

.problems-content h2 {
    color: #00609c;
    /* Strong Blue */
    text-align: left;
    margin-bottom: 25px;
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
}

.problems-content h3 {
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 30px;
    font-weight: 700;
}

.problems-list {
    list-style: none;
    /* Custom bullets */
}

.problems-list li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.6;
}

.problems-list li::before {
    content: "•";
    color: #333;
    /* Dark bullets as appearing in image */
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    /* Larger bullet */
    line-height: 1rem;
    top: 5px;
}

/* Responsive Problems Section */
@media (max-width: 1024px) {
    .problems-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .problems-images {
        height: 400px;
        /* Slightly shorter on tablet */
    }

    .problems-content {
        text-align: center;
        padding-right: 0;
    }

    .problems-content h2 {
        text-align: center;
        font-size: 2.5rem;
    }

    .problems-list {
        display: inline-block;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .problems-images {
        height: 300px;
        gap: 10px;
    }

    .problem-img-col {
        border-radius: 10px;
    }

    .problems-content h2 {
        font-size: 2rem;
    }
}

/* Detailed Services */
.services-detailed-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-light);
    /* Light background */
}

.services-detailed-section-white {
    background-color: white;
    padding: var(--spacing-xl) 0;
}

.services-width {
    max-width: 1400px;
}

.services-detailed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.service-detailed-card {
    background-color: #128169;
    /* Green color match */
    color: white;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s;
}

.service-detailed-card h3 {
    color: white;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.service-detailed-card p {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Process Section */
.process-section {
    padding: var(--spacing-xl) 0;
    background-color: white;
    text-align: center;
}

.process-section-grey {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-light);
    text-align: center;
}

.process-section .container {
    max-width: 1400px;
    /* Ensure 1400px width as requested */
    width: 100%;
}

.process-section h2 {
    color: #0076a8;
    margin-bottom: 60px;
    font-size: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
    /* Prevent wrapping on desktop */
    width: 100%;
}

.process-step {
    background-color: white;
    /* White card */
    padding: 25px 15px;
    border-radius: 12px;
    width: 100%;
    /* Flexible width */
    flex: 1;
    /* evenly distribute */
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text vertically */
    align-items: center;
    transition: transform 0.3s;
    border: 1px solid #f0f0f0;
}

.process-step:hover {
    transform: translateY(-5px);
}

.process-step h4 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 800;
}

.process-step p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.process-arrow {
    font-size: 1.5rem;
    color: #333;
    flex-shrink: 0;
    /* Arrow shouldn't shrink */
}

/* Footer CTA White */
.footer-cta-white {
    background-color: white;
}

@media (max-width: 1024px) {
    .process-steps {
        flex-wrap: wrap;
        /* Allow wrapping on tablets */
        justify-content: center;
    }

    .process-step {
        width: 45%;
        flex: none;
        margin-bottom: 20px;
    }

    .process-arrow {
        display: none;
        /* Hide arrows when grid changes */
    }
}

@media (max-width: 600px) {
    .process-step {
        width: 100%;
    }
}

/* Why Choose Us Section */
.why-us-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-light);
}

.why-us-section-station-de-relevage {
    padding: var(--spacing-xl) 0;
    background-color: #ffffff;
}

.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

.why-us-content h2 {
    color: #00609c;
    /* Strong Blue Match */
    text-align: left;
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.why-us-intro {
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.5;
}

.why-us-list {
    list-style: none;
    /* Custom bullets */
    padding-left: 0;
    margin-bottom: 40px;
}

.why-us-list li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.6;
}

.why-us-list li::before {
    content: "•";
    color: #333;
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    line-height: 1rem;
    top: 5px;
}

.why-us-list strong {
    color: #222;
    /* Darker strong text */
}

.btn-why-us {
    background-color: #00609c;
    /* Brand Blue */
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    /* Fully rounded pill shape */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.3s;
    display: inline-block;
}

.btn-why-us:hover {
    background-color: #004d7d;
}

.why-us-image {
    display: flex;
    justify-content: flex-end;
}

.why-us-image img {
    width: 100%;
    max-width: 650px;
    /* Limit image width */
    border-radius: 20px;
    /* Rounded Image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
    .why-us-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .why-us-content h2 {
        text-align: center;
        font-size: 2.2rem;
    }

    .why-us-list {
        display: inline-block;
        text-align: left;
    }

    .why-us-image {
        justify-content: center;
    }
}


/* Responsive Adjustments for New Page */
@media (max-width: 900px) {

    .problems-grid,
    .why-us-grid,
    .services-detailed-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .process-steps {
        flex-direction: column;
        align-items: center;
    }

    .solutions-images-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Inspection Intro Grid */
.inspection-intro-section {
    padding: 80px 0;
    background-color: white;
}

.inspection-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    /* Increased gap for better separation */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.inspection-intro-content {
    text-align: left;
}

.inspection-intro-content h2 {
    color: #00609c;
    /* Brand blue */
    font-size: 3rem;
    /* Larger heading */
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 25px;
    line-height: 1.1;
    text-align: left;
    /* Explicitly force left align */
}

.inspection-intro-content h3 {
    font-size: 1.25rem;
    font-weight: 800;
    /* Bolder subheading */
    margin-bottom: 20px;
    color: #222;
    /* Darker black/grey */
}

.inspection-intro-content p {
    color: #444;
    line-height: 1.7;
    /* Increased readability */
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.inspection-intro-content p:last-child {
    margin-bottom: 0;
}

.inspection-intro-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.inspection-intro-image img {
    width: 100%;
    max-height: 500px;
    /* Limit height if needed */
    object-fit: cover;
    border-radius: 20px;
    /* Rounded corners */
}

/* Problems Collage Grid */
.problems-detected-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
}

.problems-detected-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    /* Match typical large gap */
    align-items: center;
    max-width: 1400px;
    width: 100%;
    /* Force full width use */
    margin: 0 auto;
    padding: 0 20px;
}

.problems-collage-wrapper {
    display: block;
    /* Default block to fill space, removed flex center */
}

.collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 250px);
    /* Slightly taller for better scale filling 700px */
    gap: 20px;
    width: 100%;
    max-width: none;
    /* Allow filling the full column width */
}

/* Image 1: Tall Vertical (Left) */
.collage-grid .collage-img:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* Spans full height */
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Image 2: Top Right */
.collage-grid .collage-img:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Image 3: Bottom Right */
.collage-grid .collage-img:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.problems-detected-content {
    text-align: left;
}

.problems-detected-content h2 {
    color: #00609c;
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 25px;
    text-align: left;
}

.problems-detected-content h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #333;
}

.problems-list {
    list-style-type: none;
    /* Custom bullets */
    padding: 0;
}

.problems-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.5;
}

.problems-list li::before {
    content: "•";
    color: #333;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 1024px) {
    .problems-detected-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .problems-detected-content h2,
    .problems-detected-content h3 {
        text-align: center;
    }

    .problems-list {
        display: inline-block;
        text-align: left;
    }

    .problems-detected-content {
        text-align: center;
    }
}

/* Prestations Grid (Green Cards) */
.prestations-section {
    background-color: white;
}

.prestations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.prestation-card {
    background-color: #008f72;
    color: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.prestation-card:hover {
    transform: translateY(-5px);
}

.prestation-card h3 {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.prestation-card p {
    font-size: 1rem;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .inspection-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .inspection-intro-content {
        text-align: center;
        order: 1;
        /* Ensure text is maintained or swapped if needed. Let's keep default order */
    }

    .inspection-intro-content h2 {
        text-align: center;
        /* Override desktop left align */
    }

    .inspection-intro-content h3 {
        text-align: center;
    }

    .inspection-intro-image {
        order: 2;
        /* Image below text on mobile */
    }

    .problems-detected-content {
        padding-left: 0 !important;
        margin-top: 40px;
        text-align: center;
    }

    .problems-list {
        text-align: left;
        display: inline-block;
    }

    .collage-grid {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .prestations-grid {
        grid-template-columns: 1fr;
    }
}

/* Well Types Section (Nettoyage de Puits) */
.well-types-section {
    padding: var(--spacing-xl) 0;
    text-align: center;
    background-color: var(--color-bg-light);
}

.well-types-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
}

.well-type-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 250px;
    width: 280px;
    /* Fixed width for flex centering */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.well-type-card:hover {
    transform: translateY(-5px);
}

.well-type-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.well-type-label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #009879;
    /* Brand Green */
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: max-content;
    max-width: 90%;
}

@media (max-width: 1200px) {
    .well-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .well-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .well-types-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Page Styles */
.contact-page-section {
    background-color: #EEE;
    /* Match the grey background */
    padding: 80px 0;
    text-align: center;
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-form-container h1 {
    color: #003366;
    /* Dark blue */
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 900;
}

.contact-subtitle {
    font-size: 1.2rem;
    color: #003366;
    margin-bottom: 50px;
}

.contact-form {
    text-align: left;
}

.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    margin-bottom: 20px;
}

.form-group label {
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    padding: 15px;
    border: none;
    border-radius: 8px;
    /* Rounded corners */
    background-color: white;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.form-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #333;
}

.form-checkbox-group input[type="checkbox"] {
    margin-top: 4px;
    /* Align with text */
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.form-disclaimer {
    font-size: 0.75rem;
    color: #777;
    margin-bottom: 30px;
}

.btn-submit {
    background-color: #008f72;
    /* Green color from services cards */
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #006b55;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
}

/* Mentions Légales - Nouvelle page propre façon carte */
.legal-page-bg {
    background-color: var(--color-bg-light);
    padding: 80px 0 100px;
}

.legal-title-wrapper {
    margin-bottom: 50px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.legal-main-title {
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}

.legal-main-title::after {
    content: '';
    display: block;
    width: 60px;
    border-radius: 5px;
    height: 4px;
    background-color: #0F8F6F;
    margin-top: 8px;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

.legal-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    /* Very subtle border */
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}

.legal-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.legal-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
    /* Dark Gray */
    margin-bottom: 15px;
    padding-bottom: 0;
    border: none;
    text-transform: none;
    /* Sentence case/Normal */
}

.legal-card p {
    color: #4b5563;
    /* Gray text */
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.legal-card p:last-child {
    margin-bottom: 0;
}

.legal-card strong {
    color: #111827;
    font-weight: 600;
}