/* --- VARIABLES & RESET --- */
:root {
    --font-main: 'Poppins', sans-serif;
    --font-serif: 'Playfair Display', serif;
    
    --color-brand-green: #003e49;
    --color-brand-green-hover: #0d666a;
    --color-brand-green-light: #0d5b62;
    --color-brand-beige-light: #c2a47d;
    --color-brand-beige-light-hover: #bb976b;
    
    --color-text-dark: #1f2937;
    --color-text-gray: #4b5563;
    --color-text-light: #9ca3af;
    --color-bg-light: #fafaf9; /* stone-50 */
    --color-bg-gray: #f5f5f4; /* stone-100 */
    --color-footer-bg: #5a7672;
    
    --container-max: 1440px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative; /* Aide Safari iOS à comprendre la limite */
}

html {
    scroll-behavior: smooth;      /* Active le défilement fluide magique */
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-serif {
    font-family: var(--font-serif);
}

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

ul {
    list-style: none;
}

svg {
    display: block;
}

/* --- UTILITIES --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.brand-green { color: var(--color-brand-green-light); }
.brand-beige { color: var(--color-brand-beige); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* --- HEADER --- */
.site-header {
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    z-index: 50;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.logo img {
    width: 10em; /* Vous pouvez ajuster cette taille selon les proportions de votre logo */
    height: auto;
    display: block;
}

.footer-brand .logo img {
    width: 80%; /* Taille légèrement réduite pour le footer */
    height: auto;
}

.main-nav {
    display: none;
    gap: 2rem;
}

.main-nav a {
    color: var(--color-text-dark);
    transition: color 0.3s;
    padding-bottom: 0.25rem;
   position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;           /* Elle démarre tout à gauche */
    bottom: 0;         /* Elle se place en bas du padding */
    width: 0;          /* Largeur initiale : 0% */
    height: 2px;       /* Épaisseur de la ligne */
    background-color: var(--color-brand-green);
    transition: width 0.3s ease; /* C'est ici que la magie opère (durée de l'animation) */
}

.main-nav a:hover, 
.main-nav a.active {
    color: var(--color-brand-green);
}

.main-nav a:hover::after, 
.main-nav a.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-gray);
    cursor: pointer;
    transition: color 0.3s;
}
.user-icon:hover { color: #000; }

@media (min-width: 768px) {
    .main-nav { display: flex; }
}

/* --- HERO SECTION --- */
/* 1. Styles par défaut (Mobile) */
.hero {
    /* On retire le min-height et le padding d'ici */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: var(--color-bg-dark); /* Couleur de sécurité si la vidéo charge lentement */
}

.hero-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-card {
    width: 100%;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    
    /* Le padding et la hauteur sont gérés ici sur mobile */
    padding: 6rem 1rem 2rem 1rem; /* 6rem en haut pour compenser le header */
    min-height: 100vh;  
    
    position: relative; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* NOUVEAU : Styles pour la vidéo et le voile sombre */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    object-position: 55% center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    z-index: 2;
}

.hero-content {
    max-width: 54rem;
    margin: 0 auto;
    width: 100%;
    
    /* NOUVEAU : On assure que le texte passe au-dessus de la vidéo */
    position: relative;
    z-index: 3;
}

.hero-title {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.025em;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    color: #e5e7eb;
    font-size: 1.125rem;
    font-weight: 300;
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    border: none;
}

.btn-primary {
    background-color: var(--color-brand-green-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(13, 102, 106, 0.2);
}

.btn-primary:hover {
    background-color: var(--color-brand-green-hover);
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(69, 141, 164, 0.3);
}

.btn-beige {
    background-color: var(--color-brand-beige-light);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    font-weight: 500;
    transition: all 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-actions .btn-beige:hover {
    background-color: var(--color-brand-beige-light-hover);
    color: var(--color-brand-green);
    transform: none;
}

.btn-beige svg { width: 1.25rem; height: 1.25rem; }

.btn-beige:hover{
    color: #fff;
    background-color: var(--color-brand-beige-light-hover);
    transform: scale(1.02);
}

.hero-contact {
    color: #fff;
    text-align: left;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-contact span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #d1d5db;
}

.hero-contact strong, .contact-link-bold {
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-main);
}

@media (min-width: 640px) {
    .hero-actions { flex-direction: row; gap: 1.5rem; }
    .btn-beige { padding: 1rem 2rem; font-size: 1rem; }
    .hero-contact { padding-left: 1rem; }
    .hero-contact span { font-size: 0.875rem; }
    .hero-contact strong, .contact-link-bold { font-size: 1.5rem; }
}

/* 2. Styles pour Tablette & Desktop (>= 768px) : Activation de la carte flottante */
@media (min-width: 768px) {
    .hero {
        background-image: none; /* On s'assure qu'il n'y a rien derrière la carte */
        background-color: transparent; 
        padding: 6rem 1rem 1rem 1rem; /* Espace autour de la carte */
    }

    .hero-card {
        /* On supprime les anciennes propriétés background du GIF */
        background: transparent; 
        
        /* On conserve votre style de carte flottante */
        border-radius: 2rem; 
        box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.25); 
        padding: 11.5rem 1rem 10rem 1rem;
        width: 98%; 
        
        /* On annule le plein écran forcé du mobile pour laisser agir vos paddings */
        min-height: auto; 
    }

    .hero-title { font-size: 3.75rem; }
    .hero-subtitle { font-size: 1.45rem; }
}

/* --- PROPRIETAIRES SECTION --- */
.section-padding { padding: 6rem 0; }

.owners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

.owners-image-wrapper { position: relative; }

.owners-image {
    width: 50%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.floating-stat {
    position: absolute;
    bottom: -1.5rem;
    right: 8.5rem;
    background: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    align-items: center;
    gap: 0.75rem;
}

.stat-icon {
    /* On force une largeur et hauteur fixes */
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* La formule magique anti-écrasement : */
    flex-shrink: 0; 
    border-radius: 50%;
    border: 1px solid var(--color-brand-green);
    padding: 0; /* On enlève le padding qui peut fausser la taille */
}

.stat-icon svg { 
    width: 1.25rem; 
    height: 1.25rem; 
}

.stat-text span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
}
.stat-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-green);
}

.owners-content {
    padding-right: 10%;
}

.owners-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--color-brand-green);
}

.owners-desc {
    font-size: 1.125rem;
    color: var(--color-text-gray);
    margin-bottom: 2rem;
    font-weight: 300;
}

.features-list { margin-bottom: 2.5rem; }
.features-list li {
    display: flex;
    align-items: flex-start; /* L'icône s'aligne en haut de la première ligne */
    gap: 0.75rem;
    margin-bottom: 1.5rem;   /* Un peu plus d'espace entre les paragraphes */
    color: #374151;
    line-height: 1.6;        /* Améliore la lisibilité du texte long */
}

.features-list li strong {
    color: var(--color-brand-green); /* Met les titres en vert pour plus de cohérence */
    display: inline;
}

/* Petit ajustement pour que l'icône soit parfaitement alignée avec le texte */
.feature-icon {
    margin-top: 0.2rem;
}

.feature-icon svg { width: 1rem; height: 1rem; }

.btn-green {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-brand-green-light);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.3s;
}
.btn-green:hover { background-color: var(--color-brand-green); }
.btn-green svg { width: 1rem; height: 1rem; }

@media (min-width: 768px) {
    .owners-title { font-size: 3rem; }
    .floating-stat { display: flex; }
}
@media (min-width: 1024px) {
    .owners-grid { grid-template-columns: 40% 60%; }
    .owners-image-wrapper { width: 100%; left: 15%;}
    .owners-image { width: 70%; height: auto;}
}

/* --- PRESTATIONS SECTION --- */
.services-section { background-color: #fff; }

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-brand-green);
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    max-width: 42rem;
    margin: 0 auto 4rem auto;
    font-size: 1.125rem;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.service-card {
    background-color: var(--color-bg-light);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    transition: box-shadow 0.3s;
}
.service-card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

.service-icon {
    width: 3rem;
    height: 3rem;
    background-color: #f0fdf4;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--color-brand-green);
}
.service-icon svg { width: 1.5rem; height: 1.5rem; }

.service-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-brand-green);
    font-family: var(--font-serif);
}

.service-list {
    font-size: 0.875rem;
    color: var(--color-text-gray);
    line-height: 1.8;
}

@media (min-width: 768px) {
    .section-title { font-size: 3rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
    .services-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- ÉTUDE DE CAS SECTION --- */
.case-study { background-color: var(--color-bg-gray); }

.case-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4rem;
    color: var(--color-brand-green);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-family: var(--font-main);
}

.case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.case-steps {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.step-title {
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.875rem;
}
.step-title span { margin-right: 0.5rem; }

.step-desc {
    color: var(--color-text-gray);
    padding-left: 1.5rem;
    border-left: 2px solid #e5e7eb;
}
.step-desc strong {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-text-dark);
}
.step-desc .large-net { font-size: 1.125rem; }

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-svg {
    width: 16rem;
    height: 16rem;
    margin-bottom: 2rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.legend-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 24rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.legend-item:last-child { margin-bottom: 0; }

.legend-color { width: 1rem; height: 1rem; border-radius: 0.125rem; }
.bg-beige { background-color: var(--color-brand-beige); }
.bg-gray-dark { background-color: #9ca3af; }
.bg-gray-light { background-color: #e5e7eb; }

.legend-text { font-size: 0.875rem; color: #374151; }

.estimate-btn-wrapper {
    text-align: center;
    margin-top: 4rem;
}

.btn-large {
    display: inline-block;
    background-color: var(--color-brand-beige-light);
    color: #fff;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    font-size: 1.125rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    transition: background-color 0.3s;
}
.btn-large:hover { background-color: var(--color-brand-beige-light-hover); }

@media (min-width: 768px) {
    .case-title { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
    .case-grid { grid-template-columns: 1fr 1fr; }
}

/* --- FOOTER --- */
.site-footer {
    background-color: var(--color-footer-bg);
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 2.5rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 1rem;
    padding-bottom: 2rem;
}

.footer-brand .logo {
    margin-bottom: 1.5rem;
    font-family: var(--font-serif);
}
.footer-brand .logo-icon-wrap {
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
}

.footer-desc {
    color: var(--color-brand-beige-light-hover);
    margin-bottom: 2rem;
    max-width: 28rem;
}

.zones-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.zones-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.zone-badge {
    padding: 0.375rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}
.zone-badge:hover { background-color: rgba(255, 255, 255, 0.1); }

.footer-contact-box {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem 2rem 1.5rem 2rem; /* Ajusté pour réduire le vide bleu en bas */
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%; 
    align-self: stretch; 
}

.contact-box-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-beige);
    margin-bottom: 1.5rem;
}

.contact-info-list { margin-bottom: 1rem; }
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.contact-info-item:last-child { margin-bottom: 0; }

.contact-icon {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 9999px;
}
.contact-icon svg { width: 1.25rem; height: 1.25rem; }

.contact-details span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}
.contact-details strong { font-weight: 600; }

.btn-full-beige {
    width: 100%;
    background-color: var(--color-brand-green-light);
    color: #fff;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: var(--font-main);
    font-size: 1rem;
}
.btn-full-beige:hover { background-color: var(--color-brand-green-hover); }
.btn-full-beige svg { width: 1.25rem; height: 1.25rem; }

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 4rem; /* Écart entre Navigation et Informations */
    align-self: center; /* C'EST CETTE LIGNE QUI CENTRE LE BLOC SANS TOUCHER À LA BOÎTE */
}

.footer-col-title {
    font-weight: 700;
    margin-bottom: 1rem;
    display: block; /* On passe de flex à block pour un alignement strict à gauche */
    font-size: 1rem;
    color: #fff;
}

.footer-col-title::before {
    display: none; 
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.footer-links-list a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s;
}
.footer-links-list a:hover { color: #fff; }

.footer-bottom {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Style du bouton hamburger */
.mobile-menu-toggle {
    display: none; /* Caché sur ordinateur */
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--color-brand-green);
    border-radius: 3px;
    transition: 0.3s;
}

/* Animation du bouton hamburger vers une croix */
.mobile-menu-toggle.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- STATS SECTION --- */
.stats-section {
    background-color: #fff;
    overflow: hidden; /* Empêche les cartes de déborder sur les côtés sur mobile */
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne par défaut (mobile) */
    gap: 4rem;
    align-items: center;
}

/* Alignement du texte à gauche */
.section-title-left {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--color-brand-green);
    font-family: var(--font-serif);
}

.section-subtitle-left {
    color: var(--color-text-gray);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.stats-btn {
    margin-bottom: 3rem;
    /* On force le centrage sur mobile */
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

/* On remet l'alignement à gauche uniquement sur ordinateur */
@media (min-width: 1024px) {
    .stats-btn {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Logos Partenaires */
.logos-partenaires {
    display: flex;
    align-items: center;
    /* On garde un alignement à gauche pour correspondre au texte */
    justify-content: flex-start; 
}

.partners-img {
    /* Ajustez 'max-width' selon la taille réelle de votre image pour qu'elle reste nette */
    max-width: 320px; 
    width: 100%;
    height: auto;
    display: block;
    /* Optionnel : un léger filtre si vous voulez qu'ils soient plus discrets */
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.partners-img:hover {
    opacity: 1;
}

/* --- PARTIE VISUELLE (IMAGE + CARTES) --- */
.stats-visual {
    position: relative;
    padding: 2rem 0;
}

.stats-image-wrapper {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.stats-main-img {
    width: 100%;
    height: auto;
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Style de base des cartes flottantes */
.floating-card {
    position: absolute;
    background: #ffffff;
    padding: 0.4rem 0.6rem;
    border-radius: 1.25rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 5;
    margin-top: 1rem;
    transition: transform 0.3s ease;
    min-width: max-content;
}

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

.card-value {
    display: block;
    color: var(--color-brand-green-light); /* Vert "succès" comme sur votre image */
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.125rem;
}

.card-label {
    display: block;
    color: var(--color-text-gray);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    line-height: 1.3;
}

.card-top {
    top: 1%;
    left: -11%; /* Dépasse très légèrement sur la gauche */
}

.card-middle {
    top: 40%;
    right: -15%; /* Dépasse très légèrement sur la droite */
}

.card-bottom {
    bottom: 5%;
    left: -9%;
}

/* --- RESPONSIVE TABLETTE & DESKTOP --- */
@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: 50% 50%; /* Répartition du texte et de l'image */
        gap: 6rem;
    }

    .section-title-left { font-size: 3rem; }
    .stats-visual { padding: 4rem 0; }
    .stats-image-wrapper { margin: 0; width: 60%; right: -12%; }

    /* On redonne leur grande taille aux cartes sur ordinateur */
    .floating-card {
        padding: 1.25rem 1.5rem;
        border-radius: 1.25rem;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }
    
    .card-value { font-size: 1.75rem; margin-bottom: 0.25rem; }
    .card-label { font-size: 0.7rem; }

    /* Placement plus écarté sur grand écran */
    .card-top {
        top: 10%;
        left: -27%;
    }

    .card-middle {
        top: 33%;
        right: -27%;
    }

    .card-bottom {
        bottom: 6%;
        left: -13%;
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex; /* Apparaît sur mobile */
    }

    /* On cache la navigation classique pour la transformer en menu mobile */
    .main-nav {
        display: none; /* Par défaut caché */
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }

    /* Classe qui sera ajoutée via JavaScript pour ouvrir le menu */
    .main-nav.active {
        display: flex;
    }
}
@media (min-width: 768px) {
    .footer-links-grid { grid-template-columns: repeat(2, max-content); }
}

@media (min-width: 1024px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .logo img {
        width: 8rem; /* Taille plus petite pour mobile */
    }
    .header-actions .btn-primary {
        padding: 8px 12px; /* Plus compact */
        font-size: 0.85rem;
    }
    .owners-content {
        padding-right: 0; /* Ou une valeur plus faible comme 1rem */
    }
}

/* --- INVERSION TEXTE / IMAGE SUR MOBILE --- */
@media (max-width: 1023px) {
    .owners-grid {
        /* On s'assure que la grille gère bien l'ordre */
        display: flex; 
        flex-direction: column-reverse; /* Magie : inverse l'ordre d'affichage ! */
        gap: 3rem;
    }

    .owners-content {
        padding-right: 0; /* On enlève le padding droit inutile sur mobile */
    }

    /* --- CONTRÔLE DE L'IMAGE SUR MOBILE --- */
    .owners-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center; /* Centre l'image */
    }

    .owners-image {
        /* RÉGLAGE 1 : Modifiez ce pourcentage pour la taille de l'image */
        width: 90%; 
        max-width: 450px; /* Évite qu'elle devienne géante sur tablette */
    }

    /* --- CONTRÔLE DE LA BULLE SUR MOBILE --- */
    .floating-stat {
        /* 1. RÉTABLIR L'AFFICHAGE HORIZONTAL (ICÔNE + TEXTE) */
        display: flex;           /* La clé du problème ! */
        align-items: center;
        flex-direction: row;     /* Force l'alignement horizontal */
        width: max-content;      /* Empêche le texte de se faire écraser */
        gap: 0.75rem;            /* Rétablit l'espace entre l'étoile et le texte */
        
        /* 2. TAILLE */
        padding: 0.75rem 1rem;
        
        /* 3. POSITIONNEMENT (EN BAS À DROITE) */
        left: auto;
        transform: none;         /* Annule le centrage précédent */
        right: 0%;               /* S'aligne parfaitement avec le bord droit de votre image (qui fait 90%) */
        bottom: -1.5rem; 
    }

    /* --- NOUVEAU : On cache la grande icône SVG sur mobile --- */
    .pillar-header-icon {
        display: none;
    }

    
}

/* REQ 3 : Réduction de la largeur du tableau */
.pillars-wrapper {
    max-width: 1200px; /* Diminue la largeur max */
    margin: 0 auto;    /* Centre le tableau */
}

/* Base du conteneur */
.pillars-container {
    display: grid;
    grid-template-columns: 1fr; 
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #f3f4f6;
    min-height: 520px;
    font-family: var(--font-main); /* REQ 2 : Retour à la police classique */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.pillars-container.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 1024px) {
    .pillars-container { grid-template-columns: 320px 1fr; }
}

/* Sidebar Navigation */
.pillars-nav {
    background-color: var(--color-bg-light);
    border-right: 1px solid #eee;
    padding: 1.5rem 0;
}

.pillar-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.pillar-item:hover, .pillar-item.active { background: #fff; }
.pillar-item.active { border-left-color: var(--color-brand-beige-light); }

.p-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #eee;
    color: var(--color-text-gray);
    transition: 0.3s;
}
.pillar-item.active .p-num { background: var(--color-brand-green); color: #fff; }

.p-title { font-size: 0.95rem; color: var(--color-text-gray); font-weight: 500; transition: 0.3s; }
.pillar-item.active .p-title { color: var(--color-brand-green); font-weight: 600; }

/* Zone de contenu droite */
.pillars-content {
    padding: 2.5rem;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse les points tout en bas */
}

.slide-fade { animation: fadeIn 0.4s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* REQ 4 : En-tête avec Icône à droite */
.pillar-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.pillar-full-title {
    font-family: var(--font-serif); /* REQ 2 : Police élégante pour le titre */
    font-size: 1.75rem;
    color: var(--color-brand-green);
    margin-bottom: 0.5rem;
}

.pillar-desc { color: var(--color-text-gray); font-weight: 300; font-size: 1.1rem; line-height: 1.6; }

.pillar-header-icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-brand-beige-light);
    flex-shrink: 0;
    opacity: 0.8;
}

/* Grille des services & Clic */
.services-subgrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 2rem; }
@media (min-width: 768px) { .services-subgrid { grid-template-columns: 1fr 1fr; } }

.sub-service-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    background: var(--color-bg-light);
    border-radius: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    /* On a retiré le cursor: pointer et les animations ici */
}

.sub-dot { width: 6px; height: 6px; background: var(--color-brand-beige-light); border-radius: 50%; margin-top: 7px; flex-shrink: 0; }

/* REQ 5 : Les 7 cercles en bas */
.pillar-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: auto; /* Pousse les points vers le bas */
    padding-top: 1rem;
}
.p-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
.p-dot:hover { transform: scale(1.2); }
.p-dot.active { background: var(--color-brand-green); }

/* --- TARIFS SECTION --- */
.tarifs-section {
    background-color: var(--color-bg-light);
}

.tarifs-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

/* Mise en avant du prix */
.price-highlight {
    display: inline-flex;    /* REQ : Le cadre se limite désormais à la taille du contenu */
    align-items: flex-end;   /* REQ : Aligne le texte sur le bas du chiffre 20% */
    gap: 1.5rem;
    background: #fff;
    padding: 1.25rem 2rem;   /* Ajustement du padding pour un meilleur équilibre */
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    border-left: 4px solid var(--color-brand-beige-light);
}

/* Ajustement précis pour que le texte ne touche pas le bord bas */
.price-text {
    padding-bottom: 0rem; 
}

.price-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-brand-green);
    line-height: 1;
}

.price-text strong {
    display: block;
    font-size: 1rem;
    color: var(--color-brand-green);
}

.price-text span {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    font-weight: 500;
}

/* Liste des avantages */
.tarifs-features {
    margin-bottom: 2.5rem;
}

.tarifs-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    color: var(--color-text-gray);
    font-size: 1rem;
}

.tarifs-features svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #16a34a; /* Vert succès */
}

/* Visuel Droite */
.tarifs-image-wrapper {
    position: relative;
}

.tarifs-img {
    width: 100%;
    height: auto;
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.tarifs-badge {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    background: var(--color-brand-green);
    color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.tarifs-badge strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.tarifs-badge span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Responsive Desktop */
@media (min-width: 1024px) {
    .tarifs-grid {
        grid-template-columns: 52% 48%;
        align-items: stretch; /* Les colonnes font la même taille */
    }

    .tarifs-image-wrapper {
        position: relative; /* Indispensable pour le positionnement de l'image */
        height: 100%;
        min-height: 0;      /* Empêche l'image de forcer l'agrandissement de la grille */
        right: -10%;          /* Légère sortie sur la droite pour un effet plus dynamique */
    }

    .tarifs-img {
        position: absolute; /* Sort l'image du flux : elle ne dicte plus la hauteur */
        top: 0;
        left: 0;
        width:80%;
        height: 100%;
        object-fit: cover;  /* L'image remplit l'espace sans se déformer */
    }
}

/* --- ANIMATION SÉQUENTIELLE DU DONUT CHART --- */

/* 1. On définit le comportement de base des segments */
.donut-segment {
    stroke-dasharray: 0, 100; /* REQUIS : Cache les traits tant que l'animation n'a pas commencé */
}

.animated-donut.start-animation .donut-segment {
    animation-name: fillDonut;
    animation-fill-mode: both; /* CRUCIAL : "both" maintient le trait à 0% pendant les secondes d'attente, et garde le trait rempli à la fin */
    animation-timing-function: ease-in-out; 
}
/* 2. Revenus de Martin : Il démarre en premier */
.donut-martin {
    stroke: var(--color-brand-beige-light);
    stroke-width: 10;
    --target-array: 73.125;   /* Valeur exacte : 73.125% */
    stroke-dashoffset: 0;     /* Démarre à 0 */
}
.animated-donut.start-animation .donut-martin {
    animation-duration: 1.5s; 
    animation-delay: 0s;
}

/* 3. Commission Nuit Dorée : Elle démarre après Martin */
.donut-commission {
    stroke: var(--color-brand-green);
    stroke-width: 7;
    --target-array: 20.625;   /* Valeur exacte : 20.625% */
    stroke-dashoffset: -73.125; /* Démarre exactement à la fin de Martin (-73.125) */
}
.animated-donut.start-animation .donut-commission {
    animation-duration: 1s;     
    animation-delay: 1.5s;      
}

/* 4. Frais de ménage : Il démarre en dernier */
.donut-menage {
    stroke: #d4d6d9;
    stroke-width: 4;
    --target-array: 6.25;     /* Valeur exacte : 6.25% */
    stroke-dashoffset: -93.75; /* Démarre après Martin + Commission (-73.125 - 20.625 = -93.75) */
}
.animated-donut.start-animation .donut-menage {
    animation-duration: 0.8s;   
    animation-delay: 2.5s;      
}

/* L'animation reste la même */
@keyframes fillDonut {
    0% { stroke-dasharray: 0, 100; }
    100% { stroke-dasharray: var(--target-array), 100; }
}

/* --- ONBOARDING SECTION --- */
.onboarding-section {
    background-color: #fff;
}

.onboarding-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

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

@media (min-width: 1024px) {
    .onboarding-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.onboarding-item {
    padding: 2.5rem 1.5rem;
    background: var(--color-bg-light);
    border-radius: 1.5rem;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.onboarding-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: var(--color-brand-beige-light);
}

.step-number {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: rgba(194, 164, 125, 0.15); /* Beige léger transparent */
    font-weight: 700;
}

.step-icon {
    width: 4rem;
    height: 4rem;
    background: #fff;
    color: var(--color-brand-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-brand-green);
    margin-bottom: 1rem;
}

.step-card-desc {
    font-size: 0.95rem;
    color: var(--color-text-gray);
    line-height: 1.6;
}

.onboarding-cta {
    text-align: center;
    margin-top: 4rem;
}

/* --- FAQ SECTION --- */
.faq-section {
    background-color: var(--color-bg-gray);
}

.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-brand-green);
    font-weight: 600;
}

.faq-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
    color: var(--color-brand-beige-light);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    /* 1. On remplace l'ancienne méthode par une grille dynamique */
    display: grid;
    grid-template-rows: 0fr; /* L'état fermé : 0 fraction d'espace */
    
    padding: 0 2rem 0 2rem;
    transition: grid-template-rows 0.4s ease-out, padding-bottom 0.4s ease-out;
    background: #fff;
    overflow: hidden; /* Cache proprement le contenu pendant l'animation */
}

/* 2. Le secret pour que le texte soit écrasé et étiré de façon synchronisée */
.faq-answer > * {
    min-height: 0; 
    margin: 0 !important;
    overflow: hidden;
}

.faq-item.active .faq-answer {
    /* L'état ouvert : 1 fraction d'espace (soit EXACTEMENT la taille du texte) */
    grid-template-rows: 1fr; 
    padding-bottom: 1.5rem;
}

.faq-answer p {
    color: var(--color-text-gray);
    line-height: 1.6;
    font-size: 0.95rem;
    border-top: 1px solid #f9f9f9;
    padding-top: 1rem;
}

/* --- CONTACT SECTION --- */
.contact-section { background-color: #fff; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .contact-grid { grid-template-columns: 45% 55%; }
}

.contact-details-list { margin-top: 3rem; }

.contact-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-icon-circle {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--color-bg-light);
    color: var(--color-brand-green);
    border: 1px solid var(--color-brand-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon-circle svg { width: 1.5rem; height: 1.5rem; }

.contact-item span {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-item strong {
    font-size: 1.25rem;
    color: var(--color-brand-green);
}

/* Form Styling */
.contact-form-wrapper {
    background: var(--color-bg-light);
    padding: 2.5rem;
    border-radius: 2rem;
    border: 1px solid #eee;
    width: 100%;
    max-width: 100%; /* Empêche de sortir du parent */
    overflow: hidden; /* Sécurité anti-débordement */
}

/* --- STRUCTURE DU FORMULAIRE --- */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* C'est lui qui gère TOUS les espaces verticaux de manière égale ! */
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem; 
}

@media (min-width: 640px) {
    .contact-form { gap: 1.5rem; }
    .contact-form .form-row { 
        grid-template-columns: 1fr 1fr; 
        gap: 1.5rem;
    }
}

.form-group { 
    margin-bottom: 0; /* Magie : On désactive les marges individuelles pour laisser le "gap" tout aligner au millimètre */
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-brand-green);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #ddd;
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand-beige-light);
    box-shadow: 0 0 0 3px rgba(194, 164, 125, 0.1);
}

.form-status {
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: center;
}

.form-status.success { color: #16a34a; }

/* --- OPTIMISATION DU FORMULAIRE SUR MOBILE --- */
@media (max-width: 767px) {
    /* 1. On récupère de la place sur l'écran */
    .contact-form-wrapper {
        padding: 1.5rem; 
        border-radius: 1.25rem; 
    }

    /* 2. CORRECTION : On met un espace STRICTEMENT égal partout (0.85rem) et on tue les marges */
    .contact-form {
        gap: 0.85rem; 
    }
    .contact-form .form-row {
        gap: 0.85rem; 
    }
    .form-group { 
        margin-bottom: 0 !important; /* Le !important garantit qu'aucun autre espace ne s'ajoute */
    }

    /* 3. L'ASTUCE PRO : Empêcher le zoom automatique sur iPhone */
    .form-group input, 
    .form-group select, 
    .form-group textarea {
        font-size: 1rem; 
        padding: 0.75rem 1rem; 
    }

    /* 4. On espace bien la grille des avantages (Réponse rapide, etc.) par rapport au formulaire */
    .contact-perks-grid {
        margin-bottom: 1.5rem;
    }

    /* Rapproche le formulaire de la partie supérieure (texte + rectangles) */
    .contact-grid {
        gap: 1.5rem; 
    }
}

/* --- FIX OVERFLOW & FORM REASSURANCE --- */

@media (min-width: 768px) {
    .contact-form-wrapper {
        padding: 3rem;
        width: 90%;
        padding: 2rem 2rem 0.5rem 2rem;
    }
}

/* Style de la grille de réassurance */
.form-reassurance {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne mobile */
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

@media (min-width: 640px) {
    .form-reassurance {
        grid-template-columns: 1fr 1fr; /* 2 colonnes tablette/desktop */
    }
}

.reassurance-item {
    display: flex;
    flex-direction: column;
}

.reassurance-item strong {
    font-size: 0.85rem;
    color: var(--color-brand-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.reassurance-item span {
    font-size: 0.8rem;
    color: var(--color-text-gray);
    line-height: 1.4;
}

/* Fix pour les inputs pour qu'ils ne poussent pas le cadre */
.contact-form input, 
.contact-form select, 
.contact-form textarea {
    max-width: 100%;
    box-sizing: border-box; /* Indispensable pour inclure le padding dans la largeur */
}

/* --- CONTACT PERKS (RECTANGLES GAUCHE) --- */

.contact-perks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 1rem;
    margin-top: 2.5rem;
}

.perk-card {
    background: #fff; /* Fond blanc pour ressortir sur le fond de section si besoin */
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.perk-card:hover {
    border-color: var(--color-brand-beige-light);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

.perk-card strong {
    display: block;
    font-size: 0.8rem;
    color: var(--color-brand-green);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.perk-card span {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-gray);
    line-height: 1.4;
    font-weight: 300;
}

/* Responsive : On passe en 1 colonne sur très petits mobiles si nécessaire */
@media (max-width: 480px) {
    .contact-perks-grid {
        grid-template-columns: 1fr;
    }
}

.footer-right-side {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Réduit l'espace entre la boîte et les liens pour plus de compacité */
    width: 100%;
}

/* On s'assure que la grille de liens ne prend pas toute la largeur de sa nouvelle colonne */
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8rem;
}

/* Effet Hover pour les numéros et mails */
.contact-link-bold, .contact-link-footer {
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

/* Style spécifique pour le Hero et la section Contact */
.contact-link-bold {
    color: inherit; /* Garde la couleur actuelle (vert ou blanc) */
    font-weight: 700;
}

/* Style spécifique pour le Footer (fond vert foncé) */
.contact-link-footer {
    color: #fff;
    font-weight: 600;
}

/* L'effet de survol ne s'active QUE sur les ordinateurs (avec souris) */
@media (hover: hover) {
    .contact-link-bold:hover {
        color: var(--color-brand-beige-light); 
    }

    .contact-link-footer:hover {
        color: var(--color-brand-beige-light);
        opacity: 1;
    }
}

/* Pour supprimer le soulignement automatique des liens sur certains navigateurs */
a[href^="tel:"], a[href^="mailto:"] {
    text-decoration: none;
}

/* --- ANIMATIONS D'APPARITION AU SCROLL --- */

/* États de départ (invisibles et décalés) */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* État final (classe ajoutée par le JavaScript) */
.reveal-active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Classes pour créer un effet "cascade" (l'un après l'autre) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* --- SYSTÈME DE NOTIFICATIONS (TOAST) --- */

.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none; /* Empêche de bloquer les clics en dessous */
}

.toast {
    min-width: 300px;
    max-width: 400px;
    background: #fff;
    color: var(--color-text-dark);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    border-left: 4px solid;
    pointer-events: auto;
    
    /* Animation de départ (caché à droite) */
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Classe ajoutée par le JS pour l'apparition */
.toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* Couleurs selon l'état */
.toast.success { border-left-color: var(--color-brand-green-hover); }
.toast.error { border-left-color: #dc2626; }

.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.toast.success .toast-icon { color: var(--color-brand-green-hover); }
.toast.error .toast-icon { color: #dc2626; }

/* Adaptation pour mobile */
@media (max-width: 640px) {
    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem; 
    }
    .toast {
        min-width: 100%; /* Prend toute la largeur sur petit écran */
    }
}

.mobile-only { 
    display: none; 
}

/* Sur Mobile et Tablette (< 1024px) */
@media (max-width: 1023px) {
    /* On cache le grand tableau de l'ordinateur */
    .desktop-only { 
        display: none !important; 
    }
    
    /* On affiche l'accordéon */
    .mobile-only { 
        display: block; 
    }
    
    /* On réduit un peu l'espacement de la section pour aérer */
    .services-section {
        padding: 4rem 0 2rem 0;
    }
}

/* --- OPTIMISATION DU FOOTER SUR MOBILE --- */
@media (max-width: 767px) {
    /* 1. On répare la grille des liens qui sortait de l'écran */
    .footer-links-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes fluides (moitié-moitié) au lieu de max-content */
        gap: 1rem; /* On annule l'écart géant de 8rem de l'ordinateur ! */
        width: 100%;
    }

    /* 2. On réduit légèrement la taille du texte des liens longs */
    .footer-links-list a {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .footer-col-title {
        font-size: 0.95rem;
    }

    /* 3. On ajuste la boîte de contact pour gagner de l'espace */
    .footer-contact-box {
        padding: 1.5rem; 
    }
    
    .contact-details span {
        font-size: 0.7rem; /* Un poil plus petit pour la lisibilité */
    }

    /* 4. On affine les badges "Zones d'intervention" */
    .zone-badge {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    /* 5. On rapproche les grands blocs du footer */
    .footer-right-side {
        gap: 2.5rem; 
    }
    .footer-top {
        gap: 3rem;
    }

    .footer-brand .logo,
    .footer-desc {
        display: none;
    }

    .site-footer {
        padding-top: 2rem;
    }
}

/* --- GESTION DES MÉDIAS HERO --- */

/* Par défaut (Mobile) : On montre l'image et on cache la vidéo */
.mobile-only-media { 
    display: block; 
}
.desktop-only-media { 
    display: none; 
}

/* Common styles : L'image et la vidéo doivent se comporter de la même façon */
.hero-video, .hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-img {
    object-position: center;
}

/* Sur Ordinateur (>= 768px) : On inverse */
@media (min-width: 768px) {
    .mobile-only-media { 
        display: none; 
    }
    .desktop-only-media { 
        display: block; 
    }
    
    .hero-video {
        object-position: 55% center; /* On garde votre réglage de centrage vidéo */
    }
}