/* --- Page spécifique: Systèmes de Management --- */

.management-page {
    background-color: #ffffff;
}

.management-hero {
    width: 100%;
    min-height: 90vh; /* Presque toute la hauteur */
    display: flex;
    align-items: center;
}

.management-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Colonne texte un peu plus large */
    width: 100%;
    height: 100%;
}

/* --- Colonne Texte --- */
.hero-text-col {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Pousse le contenu vers le centre */
    padding: 80px 60px;
}

.hero-text-content {
    max-width: 650px; /* Évite que le texte s'étale trop */
}

.management-hero .overline-text {
    margin-bottom: 20px;
    letter-spacing: 3px;
    font-size: 0.75rem;
}

.management-hero .elegant-title {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.hero-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    color: #444;
    margin-bottom: 30px;
}

.hero-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 45px;
}

/* --- Actions (Boutons) --- */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 40px;
}

.btn-link-simple {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
}

.btn-link-simple::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; /* Ligne partielle comme sur la capture */
    height: 1px;
    background-color: #1a1a1a;
    transition: width 0.3s ease;
}

.btn-link-simple:hover::after {
    width: 100%;
}

/* --- Colonne Image --- */
.hero-image-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 60px 60px 20px; /* Apporte une belle respiration autour de l'image */
}

.hero-img-wrapper {
    width: 100%;
    max-width: 550px; /* Empêche l'image de devenir gigantesque sur grand écran */
    aspect-ratio: 4 / 5; /* Force un format portrait très élégant (type magazine) */
    border-radius: 12px; /* Coins arrondis, cohérent avec le reste du site */
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); /* Ombre douce et profonde */
    transform: translateY(0);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

/* Petit effet premium : l'image flotte légèrement quand on passe la souris */
.hero-img-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

.hero-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- RESPONSIVE --- */

@media (max-width: 1100px) {
    .management-hero .elegant-title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .management-hero-grid {
        grid-template-columns: 1fr; 
    }

    .hero-text-col {
        justify-content: center;
        text-align: center;
        order: 2; 
        padding: 40px 20px;
    }

    /* --- NOUVEAUX REGLAGES MOBILE POUR L'IMAGE --- */
    .hero-image-col {
        order: 1; 
        padding: 40px 20px 0 20px; /* Moins d'espace sur les côtés pour le mobile */
    }
    
    .hero-img-wrapper {
        aspect-ratio: 16 / 10; /* On passe en format paysage sur mobile pour ne pas écraser le texte en dessous */
        max-height: 400px;
        margin: 0 auto; /* Centre la photo */
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .management-hero .elegant-title {
        font-size: 2.2rem;
    }
    
    .hero-text-col {
        padding: 40px 20px;
    }
}

/* ==========================================================================
   SECTION HERO DIAGNOSTIC (Style "Card")
   ========================================================================== */

.diagnostic-hero-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff; /* Fond blanc autour de la carte */
    
    /* Variables locales pour le thème Bleu-Vert (Teal) */
    --hero-teal: #00878a; 
    --hero-bg: #f4f9f8; /* Fond légèrement teinté */
    --hero-border: #d2e8e6; /* Bordure fine assortie */
}

/* Le conteneur principal arrondi */
.hero-card-wrapper {
    background-color: var(--hero-bg);
    border: 1px solid var(--hero-border);
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02); /* Ombre à peine perceptible */
}

/* La grille interne */
.hero-card-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Colonne texte légèrement plus large */
    gap: 60px;
    align-items: stretch;
}

/* --- Colonne de Gauche : Contenu --- */
.hero-content-col {
    display: flex;
    flex-direction: column;
}

.hero-meta {
    font-family: var(--font-family); /* Montserrat */
    font-size: 0.75rem;
    color: var(--hero-teal);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
}

.hero-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.4rem;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Grille des Statistiques */
.hero-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 15px 30px; /* Écart vertical et horizontal */
    margin-bottom: 35px;
}

.stat-item {
    font-family: var(--font-family);
    font-size: 0.75rem; /* Petit texte comme sur la maquette */
    color: #666;
    line-height: 1.5;
}

.stat-item strong {
    font-size: 1.05rem;
    color: #1a1a1a;
    font-weight: 700;
    margin-right: 5px;
}

/* Citations et Textes */
.hero-quote {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.4;
}

.hero-description {
    font-family: var(--font-family);
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 95%;
}

/* Boutons et Liens */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px; /* Laisse de l'espace avant le footer */
}

/* --- Bouton Vert-Bleu Global --- */
.btn-solid-teal {
    background-color: #00878a; /* On met la couleur en dur pour qu'il marche partout ! */
    color: #ffffff;
    padding: 16px 28px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-solid-teal:hover {
    background-color: #006c6e; /* Plus sombre au survol */
    transform: translateY(-2px);
    color: #ffffff;
}

.link-underline-grey {
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.link-underline-grey:hover {
    color: var(--hero-teal);
    border-color: var(--hero-teal);
}

/* Infos footer en bas à gauche */
.hero-footer-info {
    margin-top: auto; /* Pousse ce bloc tout en bas de la colonne */
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: #888;
    line-height: 1.6;
}

.hero-footer-info p { margin: 0; }
.hero-footer-info i { margin-right: 6px; font-size: 0.8rem; }

/* --- Colonne de Droite : Image --- */
.hero-image-col {
    display: flex;
    align-items: stretch;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px; /* Assure que l'image ne soit pas écrasée */
    border-radius: 12px;
    overflow: hidden;
}

/* --- L'image de base avec sa transition --- */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* On ajoute une transition fluide. Le cubic-bezier donne un effet de freinage très élégant à la fin du zoom */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- L'effet 'Juicy' au survol --- */
.hero-image-wrapper:hover .hero-img {
    transform: scale(1.05); /* Mini-zoom de 5% */
}

/* Le Badge 01 sur l'image */
.image-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 55px;
    height: 55px;
    /* Un fond semi-transparent flouté élégant, teinté du vert-bleu */
    background-color: rgba(0, 135, 138, 0.6); 
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    border-radius: 50%;
    
    /* Centrage */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typographie affinée */
    font-family: var(--font-family);
    font-size: 1.15rem;
    font-weight: 300; 
    line-height: 1;
    padding-top: 2px; /* Ajustement optique vertical */
    z-index: 2;
}

/* ==========================================================================
   RESPONSIVITÉ (Tablettes & Mobiles)
   ========================================================================== */

/* Écrans moyens (Petits PC, iPad Pro) */
@media (max-width: 1100px) {
    .hero-main-title {
        font-size: 2.8rem;
    }
    .hero-card-wrapper {
        padding: 40px; /* On réduit les marges internes */
    }
}

/* Tablettes (iPad standard) */
@media (max-width: 992px) {
    .hero-card-grid {
        grid-template-columns: 1fr; /* Passage sur une seule colonne */
        gap: 50px;
    }
    
    .hero-image-wrapper {
        aspect-ratio: 16 / 10; /* Donne une forme paysage agréable à l'image */
        min-height: auto;
    }

    .hero-footer-info {
        margin-top: 40px; /* Laisse de l'espace car on n'a plus le auto-margin lié à la colonne de droite */
    }
}

/* Mobiles (Smartphones) */
@media (max-width: 768px) {
    .diagnostic-hero-section {
        padding: 40px 0;
    }
    
    .hero-card-wrapper {
        padding: 30px 20px;
        border-radius: 12px; /* Coins moins arrondis sur petit écran */
    }
    
    .hero-main-title {
        font-size: 2.2rem;
    }
    
    .hero-stats-grid {
        grid-template-columns: 1fr; /* Les statistiques s'empilent */
        gap: 15px;
    }
    
    .hero-actions {
        flex-direction: column; /* Boutons l'un sous l'autre */
        align-items: flex-start;
        gap: 20px;
    }

    .image-badge {
        width: 45px;
        height: 45px;
        font-size: 1rem;
        top: 15px;
        left: 15px;
    }
}

/* ==========================================================================
   SECTION SLIDER "SYMPTÔMES" (10 Blocs)
   ========================================================================== */

.symptoms-slider-section {
    padding: 80px 0;
    background-color: #ffffff;
    --teal-dark: #00878a;
    --teal-light: #d2e8e6;
    --bg-card: #f4f9f8;
}

.symptoms-card-wrapper {
    background-color: var(--bg-card);
    border: 1px solid var(--teal-light);
    border-radius: 20px;
    padding: 60px;
}

/* --- En-tête --- */
.symptoms-header {
    margin-bottom: 50px;
}

.symptoms-meta {
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--teal-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 20px;
}

.symptoms-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0;
}

/* --- Viewport & Track du Slider --- */
.slider-viewport {
    width: 100%;
    overflow: hidden; /* Masque les éléments qui dépassent */
    margin-bottom: 40px;
}

.slider-track {
    display: flex;
    gap: 30px; /* Espace entre les cartes */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Animation fluide */
    /* Important : on ne met pas de wrap pour qu'elles restent sur une ligne */
}

/* --- Les Cartes Individuelles --- */
.slider-item {
    background-color: #ffffff;
    border: 1px solid var(--teal-light);
    border-radius: 10px;
    padding: 40px 30px;
    /* Calcul de la largeur : 1/3 de l'espace total moins le gap */
    flex: 0 0 calc((100% - 60px) / 3); 
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Force la carte à inclure le padding dans son calcul de largeur */
    min-width: 0; /* Empêche le contenu de forcer la carte à s'élargir */
}

.item-number {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #a3c9c9; /* Bleu clair doux pour le numéro */
    line-height: 1;
    margin-bottom: 20px;
}

.item-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
    font-weight: 600;
}

.item-desc {
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Contrôles (Points & Flèches) --- */
.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--teal-dark);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* Pagination (Dots) */
.slider-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden; /* Pour l'animation de la barre */
}

/* Le point actif devient une petite barre allongée */
.dot.active {
    width: 40px; /* Plus long */
    border-radius: 4px;
    background-color: #e0e0e0; /* Fond gris clair pour voir la progression par dessus */
    cursor: default;
}

/* L'animation de la Progress Bar fine dans le point actif */
.dot.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* Commence à 0 */
    background-color: var(--teal-dark);
    border-radius: 4px;
    /* L'animation durera exactement les 5 secondes du JS */
    animation: progressBarFill 5s linear forwards; 
}

@keyframes progressBarFill {
    to { width: 100%; }
}

/* Flèches de navigation */
.slider-arrows {
    display: flex;
    gap: 15px;
}

.arrow-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--teal-dark);
    background: transparent;
    color: var(--teal-dark);
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.arrow-btn:hover:not(:disabled) {
    background-color: var(--teal-dark);
    color: #fff;
}

.arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #ccc;
    color: #ccc;
}

/* --- Footer --- */
.symptoms-footer {
    padding-top: 10px;
}

.footer-italic {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-style: italic;
    color: #555;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVITÉ SLIDER
   ========================================================================== */

@media (max-width: 1100px) {
    .slider-item {
        /* On passe à 2 éléments visibles sur iPad Pro / Petits PC */
        flex: 0 0 calc((100% - 30px) / 2);
    }
}

@media (max-width: 768px) {
    .symptoms-card-wrapper {
        padding: 40px 20px;
    }
    
    .symptoms-main-title {
        font-size: 2.2rem;
    }
    
    .slider-item {
        /* On passe à 1 seul élément visible sur mobile */
        flex: 0 0 100%;
    }
    
    .slider-controls {
        flex-direction: column-reverse; /* Flèches en bas, points en haut sur mobile */
        gap: 20px;
        align-items: flex-start;
    }
}

/* ==========================================================================
   SECTION BANDEAU CTA DIAGNOSTIC (Fond Vert-Bleu)
   ========================================================================== */

.diagnostic-cta-banner {
    background-color: #00878a; /* Le fameux vert-bleu evOrg */
    color: #ffffff;
    padding: 80px 0;
}

.cta-banner-grid {
    display: grid;
    /* La colonne de gauche est un peu plus large que celle de droite */
    grid-template-columns: 1.4fr 0.6fr; 
    gap: 80px;
    align-items: center;
}

/* --- Colonne de Gauche : Textes --- */
.cta-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 500;
    color: #ffffff;
}

.cta-desc {
    font-family: var(--font-family); /* Montserrat */
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 90%;
    font-weight: 300;
}

/* La liste des deux points (check) */
.cta-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    gap: 40px; /* Écarte les deux éléments sur la même ligne */
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 400;
}

.cta-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cta-benefits i {
    font-size: 0.9rem;
    color: #ffffff;
    opacity: 0.8; /* Légèrement transparent pour ne pas être agressif */
}

/* --- Boutons et Téléphone --- */
.cta-actions {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espace entre le bouton et le "Sans engagement" */
}

/* Le bouton blanc */
.btn-white-solid {
    background-color: #ffffff;
    color: #00878a; /* Texte de la couleur du fond */
    padding: 16px 32px;
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-white-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.cta-note {
    font-family: var(--font-family);
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: 5px;
}

/* Le lien téléphone */
.cta-phone {
    font-family: var(--font-family);
    font-size: 1.05rem;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-top: 15px; /* Aligne visuellement le texte avec l'intérieur du bouton */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 4px;
    transition: border-color 0.3s ease;
}

.cta-phone:hover {
    border-color: #ffffff;
}

/* --- Colonne de Droite : Visuel --- */
.cta-visual-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* L'encart semi-transparent autour du logo */
.logo-box {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 40px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-logo {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.cta-author {
    font-family: var(--font-family);
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 300;
}

.cta-author strong {
    font-size: 1.05rem;
    font-weight: 600;
}

/* ==========================================================================
   RESPONSIVITÉ (Tablettes & Mobiles)
   ========================================================================== */

@media (max-width: 1100px) {
    .cta-banner-grid {
        gap: 40px;
    }
    
    .cta-benefits {
        flex-direction: column; /* On empile les checks sur tablette */
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .cta-banner-grid {
        grid-template-columns: 1fr; /* 1 seule colonne */
        text-align: center;
    }

    .cta-desc {
        max-width: 100%;
    }

    .cta-benefits {
        align-items: center; /* Centre la liste des checks */
    }

    .cta-actions {
        flex-direction: column; /* Bouton au dessus du téléphone */
        align-items: center;
        gap: 25px;
    }

    .cta-phone {
        padding-top: 0; /* Réinitialise le padding d'alignement */
    }

    .cta-visual-col {
        align-items: center;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .diagnostic-cta-banner {
        padding: 60px 0;
    }

    .cta-title {
        font-size: 2.2rem;
    }

    .logo-box {
        padding: 30px;
    }
}

/* ==========================================================================
   SECTION CHANTIERS (Grille 4 colonnes avec images)
   ========================================================================== */

.chantiers-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Variables locales pour garantir l'homogénéité avec le reste */
    --teal-dark: #00878a;
    --teal-light: #d2e8e6;
    --bg-card: #f4f9f8;
}

/* Conteneur principal (La grande carte) */
.chantiers-card-wrapper {
    background-color: var(--bg-card);
    border: 1px solid var(--teal-light);
    border-radius: 20px;
    padding: 60px;
}

/* --- En-tête --- */
.chantiers-header {
    margin-bottom: 60px;
}

.chantiers-meta {
    display: block;
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--teal-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 20px;
}

.chantiers-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #1a1a1a;
    line-height: 1.15;
    margin-bottom: 25px;
    font-weight: 500;
}

.chantiers-desc {
    font-family: var(--font-family);
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Grille à 4 colonnes --- */
.chantiers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* Bel espace entre les colonnes */
    align-items: start;
}

.chantier-col {
    display: flex;
    flex-direction: column;
}

/* --- Images avec Effet Zoom Juicy --- */
.chantier-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Format paysage élégant */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
}

.chantier-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Même transition fluide qu'en haut */
}

.chantier-col:hover .chantier-img {
    transform: scale(1.05); /* Mini-zoom de 5% au survol de la colonne */
}

/* --- Textes des colonnes --- */
.chantier-col-title {
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--teal-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Listes d'expertises (sans puces, aérées comme des paragraphes) */
.chantier-list {
    list-style: none; /* On retire les puces pour le look épuré de la maquette */
    padding: 0;
    margin: 0;
}

.chantier-list li {
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: #444; /* Un gris légèrement plus soutenu pour la lisibilité */
    line-height: 1.5;
    margin-bottom: 20px; /* Aération généreuse entre les éléments */
}

/* ==========================================================================
   RESPONSIVITÉ (Tablettes & Mobiles)
   ========================================================================== */

@media (max-width: 1100px) {
    .chantiers-grid {
        gap: 20px; /* On réduit un peu l'écart sur les écrans moyens */
    }
    
    .chantiers-main-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 992px) {
    .chantiers-card-wrapper {
        padding: 40px;
    }

    .chantiers-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
        gap: 50px 30px; /* Espace vertical plus grand que l'horizontal */
    }
    
    .chantiers-desc br {
        display: none; /* Laisse le texte couler naturellement */
    }
}

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

    .chantiers-card-wrapper {
        padding: 30px 20px;
        border-radius: 12px;
    }

    .chantiers-main-title {
        font-size: 2.2rem;
    }

    .chantiers-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
        gap: 40px;
    }
}

/* ==========================================================================
   SECTION NOTRE INTERVENTION (3 Colonnes - Éditorial)
   ========================================================================== */

.intervention-section {
    background-color: #f7f7f7; /* Fond blanc pur */
    padding: 100px 0;
    --teal-main: #00878a;
}

/* --- En-tête --- */
.intervention-header {
    margin-bottom: 80px;
}

.intervention-header .overline-text {
    display: block;
    font-family: var(--font-family); /* Montserrat */
    font-size: 0.75rem;
    color: var(--teal-main);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 20px;
}

.intervention-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin: 0;
    line-height: 1.15;
    font-weight: 500;
}

.intervention-header .text-dark {
    color: #1a1a1a;
}

.intervention-header .text-teal {
    color: var(--teal-main);
    font-weight: 400; /* Légèrement plus fin pour contraster avec la première ligne */
}

/* --- Grille des 3 étapes --- */
.intervention-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px; /* Bel espace horizontal pour aérer les colonnes */
}

.intervention-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne le contenu à gauche */
}

/* Le grand numéro (Typographie Serif) */
.step-number {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: #8dbabc; /* Un vert-bleu légèrement adouci/pastel comme sur la maquette */
    line-height: 1;
    margin-bottom: 20px;
    font-weight: 400;
}

/* Le Titre de l'étape */
.step-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.25;
    font-weight: 600;
}

/* Les mots-clés sous le titre */
.step-keywords {
    font-family: var(--font-family);
    font-size: 0.65rem;
    color: var(--teal-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    display: block;
    margin-bottom: 20px;
}

/* Le paragraphe explicatif */
.step-text {
    font-family: var(--font-family);
    font-size: 1rem;
    color: #555;
    line-height: 1.7; /* Très aéré pour une lecture facile */
    margin: 0;
    padding-right: 15px; /* Évite que le texte ne frôle la colonne d'à côté */
}

/* ==========================================================================
   RESPONSIVITÉ (Tablettes & Mobiles)
   ========================================================================== */

@media (max-width: 1100px) {
    .intervention-header .elegant-title {
        font-size: 3rem;
    }
    .intervention-grid-3 {
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .intervention-grid-3 {
        grid-template-columns: 1fr; /* Sur tablette on passe sur une seule colonne pour le confort de lecture */
        gap: 60px;
    }
    
    .intervention-header {
        margin-bottom: 60px;
    }
}

@media (max-width: 768px) {
    .intervention-section {
        padding: 70px 0;
    }
    
    .intervention-header .elegant-title {
        font-size: 2.3rem;
    }
    
    .step-number {
        font-size: 3.5rem; /* Numéros légèrement plus petits sur mobile */
    }
    
    .step-text {
        padding-right: 0; /* On retire le padding droit sur mobile */
    }
}

/* ==========================================================================
   SECTION OUTILS / RÉFÉRENTIELS (Grille de cartes compactes)
   ========================================================================== */

.tools-section {
    background-color: #fafafa; /* Un blanc très légèrement grisé pour détacher les cartes */
    padding: 100px 0;
    --teal-main: #00878a;
}

/* --- En-tête --- */
.tools-header {
    margin-bottom: 60px;
}

.tools-header .overline-text {
    display: block;
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--teal-main);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 20px;
}

.tools-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin: 0 0 20px 0;
    line-height: 1.15;
    font-weight: 500;
}

.tools-header .text-dark {
    color: #1a1a1a;
}

.tools-header .text-teal {
    color: var(--teal-main);
    font-weight: 400; /* Plus fin comme sur la maquette */
}

.tools-desc {
    font-family: var(--font-family);
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Grille des outils --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes par défaut */
    gap: 25px; /* Écartement homogène */
}

/* --- Style de la Carte --- */
.tool-card {
    background-color: #ffffff;
    border: 1px solid #e5e9ea;
    border-radius: 12px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    /* On ajoute background-color et border-color à la transition */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Effet de survol doux, interactif et "brandé" */
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.04);
    /* Une teinte très légère basée sur le vert-bleu principal */
    background-color: rgba(0, 135, 138, 0.04); 
    /* La bordure prend une couleur un peu plus soutenue pour bien délimiter la carte */
    border-color: #d2e8e6; 
}

.tool-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--teal-main);
    margin: 0 0 15px 0;
    font-weight: 500;
}

.tool-subtitle {
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: #1a1a1a;
    font-weight: 600; /* Gras pour bien séparer du corps de texte */
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.tool-desc {
    font-family: var(--font-family);
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVITÉ (Tablettes & Mobiles)
   ========================================================================== */

/* Écrans de taille moyenne (Petits PC, iPad Pro) */
@media (max-width: 1200px) {
    .tools-grid {
        grid-template-columns: repeat(3, 1fr); /* Passage à 3 colonnes */
    }
}

/* Tablettes classiques */
@media (max-width: 992px) {
    .tools-header .elegant-title {
        font-size: 3rem;
    }
    .tools-grid {
        grid-template-columns: repeat(2, 1fr); /* Passage à 2 colonnes */
        gap: 20px;
    }
    .tools-desc br {
        display: none;
    }
}

/* Smartphones */
@media (max-width: 768px) {
    .tools-section {
        padding: 70px 0;
    }
    .tools-header .elegant-title {
        font-size: 2.3rem;
    }
    .tools-grid {
        grid-template-columns: 1fr; /* 1 seule colonne */
        gap: 15px;
    }
    .tool-card {
        padding: 25px 20px; /* Moins de marge interne pour gagner de la place */
    }
}

/* ==========================================================================
   BLOC CTA EN BAS DE LA FAQ
   ========================================================================== */

.faq-bottom-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px; /* S'ajoute à la bordure du dernier élément faq-item */
    padding-top: 30px; 
    /* La bordure inférieure du dernier élément .faq-item joue déjà le rôle de séparateur */
}

.faq-cta-text {
    font-family: var(--font-family); /* Montserrat */
    font-size: 1.05rem;
    color: #555;
    font-weight: 400;
}

/* Réactivité sur Mobile */
@media (max-width: 768px) {
    .faq-bottom-cta {
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding-top: 40px;
    }
    
    .faq-bottom-cta .btn-solid-teal {
        width: 100%; /* Le bouton prend toute la largeur sur mobile pour être plus facile à cliquer */
        justify-content: center;
    }
}
/* ==========================================================================
   SECTION AUTRES RÉALITÉS (3 Cartes Univers)
   ========================================================================== */

.other-realities-section {
    background-color: #f4f5f7; /* Le fond gris clair de la maquette */
    padding: 100px 0 120px 0; /* Plus d'espace en bas avant le footer */
    --teal-main: #00878a;
}

/* --- En-tête --- */
.other-realities-header {
    margin-bottom: 60px;
    text-align: left;
}

.other-realities-header .overline-text {
    display: block;
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--teal-main);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 20px;
}

.other-realities-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.15;
    margin: 0;
    font-weight: 500;
}

.other-realities-header .text-dark {
    color: #1a1a1a;
}

.other-realities-header .text-teal {
    color: var(--teal-main);
    font-weight: 400; /* Légèrement plus fin */
}

/* --- Grille des cartes --- */
.universe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Thèmes de couleurs des cartes --- */
.theme-blue  { --theme-color: #2b557d; --theme-border: #d7e0ea; --theme-bg: #eef3f7; } /* Bleu clair/grisé */
.theme-green { --theme-color: #387642; --theme-border: #dce7db; --theme-bg: #eff4ef; } /* Vert très clair */
.theme-gold  { --theme-color: #c49124; --theme-border: #ebd9b3; --theme-bg: #f8f5eb; } /* Doré/Beige clair */

/* --- Style de la Carte Univers --- */
.universe-card {
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 15px; /* La marge interne qui encadre l'image comme sur la maquette */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.universe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

/* L'image et son cadre */
.univ-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.1; /* Un format presque carré, légèrement portrait */
    border-radius: 8px; /* Rayon plus petit à l'intérieur */
    overflow: hidden;
    margin-bottom: 25px;
}

.univ-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Effet Juicy */
}

.universe-card:hover .univ-img {
    transform: scale(1.05);
}

/* Le macaron numéroté sur l'image */
.univ-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 42px;
    height: 42px;
    background-color: var(--theme-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    padding-top: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- Contenu Texte --- */
.univ-content {
    padding: 0 10px 15px 10px; /* Aligne le texte correctement sous l'image */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.univ-meta {
    font-family: var(--font-family);
    font-size: 0.65rem;
    color: var(--theme-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 15px;
}

.univ-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #1a1a1a;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 1.25;
}

/* Le petit lien Explorer */
.univ-link {
    font-family: var(--font-family);
    font-size: 0.85rem;
    color: var(--theme-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; /* Pousse le lien tout en bas */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.univ-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.univ-link:hover {
    opacity: 0.7;
}

.univ-link:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVITÉ (Tablettes & Mobiles)
   ========================================================================== */

@media (max-width: 1100px) {
    .other-realities-header .elegant-title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .universe-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .other-realities-section {
        padding: 70px 0;
    }
    
    .other-realities-header .elegant-title {
        font-size: 2.3rem;
    }
    
    .universe-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
        gap: 40px;
    }
    
    .universe-card {
        max-width: 450px; /* Évite que la carte soit gigantesque sur grand smartphone */
        margin: 0 auto;
        width: 100%;
    }
}

/* --- Section: Observations (Les signes) --- */
.observations-section {
    background-color: #f7f7f7; /* Gris très clair, doux et élégant */
    padding: 100px 0;
}

.observations-section .section-header {
    margin-bottom: 60px;
    text-align: left; /* Assure que le texte reste bien aligné à gauche */
}

/* Réutilisation des styles de textes pour garder la cohérence */
.observations-section .overline-text {
    color: #2b6b8c; /* Le bleu evOrg */
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
}

.observations-section .elegant-title {
    font-size: 3.2rem;
    color: #1a1a1a;
    margin: 0;
}

/* Grille des 3 cartes */
.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Bel espacement entre les cartes */
}

/* Design des cartes blanches */
.obs-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 35px;
    /* Ombre très subtile pour décoller la carte du fond gris sans faire "lourd" */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Léger effet au survol pour le dynamisme */
.obs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

.obs-number {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #2b6b8c;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.obs-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 992px) {
    .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    }
}

@media (max-width: 768px) {
    .observations-section {
        padding: 70px 0;
    }
    
    .observations-section .elegant-title {
        font-size: 2.2rem; /* Réduit le titre sur mobile */
    }
    
    .cards-grid-3 {
        grid-template-columns: 1fr; /* 1 colonne sur téléphone */
        gap: 20px;
    }
    
    .obs-card {
        padding: 30px 25px; /* On réduit un peu le padding sur mobile */
    }
}

/* --- Section: Notre Intervention (La démarche) --- */
.intervention-section {
    background-color: #f4f5f7; /* Retour au blanc pur */
    padding: 100px 0;
}

.intervention-section .section-header {
    margin-bottom: 80px;
}

.intervention-section .overline-text {
    color: #2b6b8c;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.intervention-section .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    margin: 0;
    line-height: 1.2;
}

/* Couleurs spécifiques au titre bicolore */
.intervention-section .text-dark {
    color: #1a1a1a;
}

.intervention-section .text-blue {
    color: #2b6b8c;
}

/* Grille des 3 étapes */
.intervention-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px; /* Bel espacement pour aérer les colonnes */
}

.intervention-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne tout à gauche */
}

/* Le grand numéro éditorial */
.step-number {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    color: #82a0b3; /* Un bleu grisé doux, comme sur ta maquette */
    line-height: 1;
    margin-bottom: 25px;
}

.step-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.25;
    font-weight: 500;
}

.step-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 992px) {
    .intervention-grid {
        /* Sur tablette, on passe à une seule colonne pour éviter les textes trop étriqués */
        grid-template-columns: 1fr; 
        gap: 50px;
    }
    
    .intervention-section .elegant-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .intervention-section {
        padding: 70px 0;
    }
    
    .intervention-section .elegant-title {
        font-size: 2.2rem; /* Réduction du titre */
    }
    
    .step-number {
        font-size: 3.5rem; /* Les numéros un peu plus petits sur téléphone */
        margin-bottom: 15px;
    }
    
    .step-title {
        font-size: 1.5rem;
    }
}

/* --- Section: Résultats (Ce que vous gagnez) --- */
.results-section {
    background-color: #ffffff; /* On reprend le fond gris clair pour alterner */
    padding: 100px 0;
    overflow: hidden; /* Important pour que l'animation venant de droite ne crée pas de scroll horizontal */
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* La liste prend un peu plus de place que le titre */
    gap: 80px;
    align-items: center; /* Centre verticalement */
}

/* Colonne Titre */
.results-section .overline-text {
    color: #00878a;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.results-section .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin: 0;
    line-height: 1.2;
}

.results-section .text-dark { color: #1a1a1a; }
.results-section .text-blue { color: #00878a; }

/* Colonne Liste */
.benefits-list {
    list-style: none; /* Enlève les puces par défaut */
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center; /* Aligne l'icône avec le texte */
    padding: 25px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Ligne séparatrice très douce */
}

/* On enlève la bordure du dernier élément pour faire plus propre */
.benefit-item:last-child {
    border-bottom: none;
}

.benefit-icon {
    color: #00878a; /* Bleu evOrg */
    font-size: 1.2rem;
    margin-right: 20px;
}

.benefit-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    color: #333;
    font-weight: 400;
}

/* --- Animation Slide-In depuis la droite --- */
.slide-in-right {
    opacity: 0;
    transform: translateX(50px); /* Décalé de 50px vers la droite */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* La classe .visible sera ajoutée par Javascript lors du scroll */
.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}


/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 992px) {
    .results-grid {
        grid-template-columns: 1fr; /* On empile sur tablette/mobile */
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .results-section {
        padding: 70px 0;
    }
    
    .results-section .elegant-title {
        font-size: 2.5rem;
    }
    
    .benefit-text {
        font-size: 1rem;
    }
}

/* --- Section: Les chantiers (Dans le détail) --- */
.chantiers-section {
    background-color: #ffffff; /* Fond blanc pur pour contraster avec la section précédente */
    padding: 100px 0;
}

.chantiers-header {
    max-width: 800px;
    margin-bottom: 70px;
}

.chantiers-header .overline-text {
    color: #2b6b8c;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.chantiers-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #1a1a1a;
    line-height: 1.15;
    margin-bottom: 25px;
}

.chantiers-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Grille à 4 colonnes */
.chantiers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px; /* Bel espace entre les colonnes */
}

/* Titre des colonnes avec la ligne supérieure */
.chantier-col-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #2b6b8c;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-top: 25px;
    border-top: 1px solid #d3e1e8; /* La ligne de séparation fine et bleutée */
}

/* Listes d'expertises */
.chantier-list {
    list-style: none; /* On retire les puces car le design est textuel */
    padding: 0;
    margin: 0;
}

.chantier-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 18px; /* Espace vertical pour aérer les items */
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 1100px) {
    .chantiers-grid {
        gap: 25px; /* On réduit un peu l'écart sur les écrans moyens */
    }
}

@media (max-width: 992px) {
    .chantiers-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
        gap: 50px; 
    }
}

@media (max-width: 768px) {
    .chantiers-section {
        padding: 70px 0;
    }

    .chantiers-header .elegant-title {
        font-size: 2.5rem;
    }

    .chantiers-desc {
        font-size: 1rem;
    }

    .chantiers-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
        gap: 40px;
    }
    
    .chantier-col-title {
        padding-top: 15px;
        margin-bottom: 20px;
    }
}

/* --- Section: Moyens d'action (Trois leviers) --- */
.leviers-section {
    background-color: #f4f5f7; /* Fond gris clair */
    padding: 100px 0;
    --teal-dark: #00878a;
}

.leviers-header {
    max-width: 700px;
    margin-bottom: 60px;
}

.leviers-header .overline-text {
    color: #2b6b8c;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.leviers-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 20px;
}

.leviers-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Cartes Premium avec Image --- */
.levier-card-premium {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.levier-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

.levier-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10; 
    overflow: hidden;
}

.levier-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.levier-card-premium:hover .levier-img-wrapper img {
    transform: scale(1.04);
}

.levier-card-content {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.levier-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #2b6b8c;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
}

.levier-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.levier-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 12px;
    position: relative;
    padding-left: 18px;
}

.levier-list li::before {
    content: '•';
    color: #2b6b8c;
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: -4px;
}

/* --- ADAPTATION RESPONSIVE DE LA GRILLE --- */
@media (max-width: 992px) {
    .leviers-header .elegant-title {
        font-size: 2.8rem;
    }
    
    .leviers-section .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .leviers-section {
        padding: 70px 0;
    }
    
    .leviers-header .elegant-title {
        font-size: 2.2rem;
    }
    
    .leviers-desc {
        font-size: 1rem;
    }
    
    .leviers-section .cards-grid-3 {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .levier-card-content {
        padding: 30px 20px;
    }
}

/* --- Section: FAQ (Accordéon) --- */
.faq-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.faq-container {
    max-width: 900px; /* On limite la largeur pour un meilleur confort de lecture */
    margin: 0 auto;
}

.faq-header {
    margin-bottom: 60px;
}

.faq-header .overline-text {
    color: #2b6b8c;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.faq-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #1a1a1a;
    margin: 0;
}

/* L'accordéon */
.faq-item {
    border-bottom: 1px solid #eaeaea; /* Ligne de séparation élégante */
}

/* Le bouton question */
.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #1a1a1a;
    font-weight: 500;
    margin: 0;
    padding-right: 20px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.faq-icon {
    font-size: 1.2rem;
    color: #2b6b8c;
    transition: transform 0.4s ease; /* Animation fluide de la flèche */
}

/* Changement de couleur au survol de la question */
.faq-question:hover .faq-question-text {
    color: #2b6b8c;
}

/* État actif (déployé) */
.faq-item.active .faq-icon {
    transform: rotate(180deg); /* La flèche pointe vers le haut */
}

.faq-item.active .faq-question-text {
    color: #2b6b8c; /* Le texte reste bleu quand c'est ouvert */
}

/* La réponse cachée par défaut */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease; /* Animation fluide de l'ouverture */
}

.faq-answer-content {
    padding-bottom: 30px; /* Espace en bas de la réponse */
}

.faq-answer-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 768px) {
    .faq-section {
        padding: 70px 0;
    }
    
    .faq-header .elegant-title {
        font-size: 2.5rem;
    }
    
    .faq-question {
        padding: 20px 0;
    }
    
    .faq-question-text {
        font-size: 1.2rem;
    }
    
    .faq-answer-content p {
        font-size: 1rem;
    }
}

/* --- Section: Autres réalités (Continuer) --- */
.other-realities-section {
    background-color: #ffffff; /* Fond blanc pur pour marquer la fin */
    padding: 100px 0 120px 0; /* Plus d'espace en bas avant le footer */
}

.other-realities-header {
    max-width: 700px;
    margin-bottom: 70px;
    text-align: left; /* Alignement à gauche comme sur la maquette */
}

.other-realities-header .overline-text {
    color: #2b6b8c;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.other-realities-header .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
}

/* Grille spécifique 2 colonnes */
.cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* Bel espace entre les colonnes */
}

/* Design des cartes compactes sans citation */
.service-card-compact {
    display: flex;
    flex-direction: column;
    text-align: left; /* Aligné à gauche pour ce design compact */
}

/* --- Cadre de l'image & Micro-Zoom --- */
.service-card-compact .card-image-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden; /* Empêche l'image de dépasser des bords arrondis pendant le zoom */
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Ombre douce élégante */
    aspect-ratio: 4 / 5; /* Force un format portrait élégant (type magazine) */
}

.service-card-compact .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Transition fluide pour le zoom */
    transition: transform 0.6s ease; 
}

/* --- L'EFFET DE MICRO-ZOOM SUR L'IMAGE au survol de la carte --- */
.service-card-compact:hover .card-image {
    transform: scale(1.05); /* Un léger zoom élégant de 5% */
}

/* Contenu textuel sous l'image */
.service-card-compact .card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne le contenu textuel à gauche */
    flex-grow: 1; /* Pousse le lien vers le bas si besoin */
}

.service-card-compact .card-meta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #2b6b8c;
    font-weight: 600;
    margin-bottom: 15px;
}

.service-card-compact .card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #1a1a1a;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 1.25;
}

/* --- Style du lien 'Explorer' & Micro-Zoom --- */
.service-card-compact .card-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #2b6b8c; /* Bleu evOrg */
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; /* Force le lien à rester en bas si le texte au-dessus est court */
    
    /* Transition fluide pour le zoom et la couleur */
    transition: color 0.3s ease, transform 0.3s ease; 
}

.service-card-compact .card-link i {
    font-size: 0.8rem;
}

/* --- L'EFFET DE MICRO-ZOOM SUR LE LIEN/BOUTON au survol --- */
.service-card-compact .card-link:hover {
    color: #1e4e66; /* Un bleu plus foncé au survol */
    transform: scale(1.03); /* Un très léger zoom de 3% pour le bouton */
}

/* --- RÈGLE GÉNÉRALE : Appliquer le micro-zoom aux boutons pilules existants (comme le CTA) --- */
/* (À placer dans mainStyle.css ou en haut de ce fichier si tu n'as pas de fichier global) */
.btn-hero {
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* --- L'EFFET DE MICRO-ZOOM SUR LES BOUTONS PILULES au survol --- */
.btn-hero:hover {
    transform: translateY(-2px) scale(1.03); /* Zoom léger de 3% + petit décalage vers le haut */
}


/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 992px) {
    .cards-grid-2 {
        grid-template-columns: 1fr; /* 1 seule colonne sur Tablette/Mobile */
        gap: 60px; /* On aère plus entre les blocs sur mobile */
    }
    
    .service-card-compact .card-image-wrapper {
        max-width: 400px; /* Évite que l'image soit gigantesque sur un grand téléphone */
        margin-left: auto;
        margin-right: auto;
    }
    
    .service-card-compact .card-content {
        align-items: center; /* Centre le contenu textuel sur mobile */
        text-align: center;
    }
}

@media (max-width: 768px) {
    .other-realities-section {
        padding: 70px 0;
    }
    
    .other-realities-header .elegant-title {
        font-size: 2.2rem;
    }
}

/* --- Section: Final CTA --- */
.final-cta-section {
    background-color: #f7f7f7; /* Un gris très doux pour clôturer la page élégamment */
    padding: 120px 0;
}

.final-cta-section .elegant-title {
    font-size: 3.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Couleurs du titre (au cas où elles ne soient pas héritées globalement ici) */
.final-cta-section .text-dark { color: #1a1a1a; }
.final-cta-section .text-blue { color: #00878a; }

.final-cta-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin: 0 auto 40px auto;
    max-width: 700px; /* Centre bien le texte sans qu'il ne s'étale trop */
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 80px 20px;
    }

    .final-cta-section .elegant-title {
        font-size: 2.5rem; /* On adapte la taille du titre */
    }

    .final-cta-desc {
        font-size: 1rem;
    }
    
    .final-cta-desc br {
        display: none; /* On désactive le retour à la ligne manuel sur mobile pour que le texte s'adapte naturellement */
    }
}

/* --- Variante Grille 4 colonnes pour l'intervention --- */
.intervention-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* L'espace est légèrement réduit par rapport aux 3 colonnes pour que tout rentre élégamment */
    gap: 40px; 
}

/* Style des nouveaux sous-titres (mots-clés) */
.step-keywords {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: #00878a; /* Bleu evOrg */
    text-transform: uppercase;
    letter-spacing: 2px; /* Donne l'effet aéré de la maquette */
    font-weight: 600;
    display: block; /* Force le passage à la ligne */
    margin-bottom: 20px;
    line-height: 1.6;
}

/* On ajuste la marge sous le titre principal vu qu'il y a maintenant les mots-clés en dessous */
.intervention-grid-4 .step-title {
    margin-bottom: 10px;
}

/* --- Réactivité Mobile et Tablette pour les 4 colonnes --- */
@media (max-width: 1100px) {
    .intervention-grid-4 {
        /* Sur tablette/petit écran, on passe proprement en 2x2 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .intervention-grid-4 {
        /* Sur mobile, on empile tout */
        grid-template-columns: 1fr; 
        gap: 40px;
    }
}


.visual-banner-section {
    width: 100%;
    height: 450px; /* Grande hauteur fixe pour créer un impact */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-banner-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.15); /* Voile très léger pour poser la citation si besoin */
    z-index: 2;
}

.banner-overlay-text {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
}

.banner-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin: 0;
}

.banner-img-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.banner-parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   THEME BLEU POUR LE SLIDER (Écrase les couleurs "Diagnostic")
   ========================================================================== */

.management-slider-theme {
    /* Le bleu evOrg profond remplace le vert-bleu */
    --teal-dark: #1c5b88; 
    
    /* Le bleu clair pour les bordures et les cartes */
    --teal-light: #d3dfe8; 
    
    /* Le fond très clair bleuté pour le grand cadre parent */
    --bg-card: #f4f7f9; 
}

/* On ajuste juste la couleur des grands numéros (01, 02...) pour ce thème spécifique */
.management-slider-theme .item-number {
    color: #92b4cc; /* Un bleu grisé doux assorti au thème ISO */
}

/* ==========================================================================
   THEME BLEU POUR LA SECTION OUTILS / NORMES (Management / Certification)
   ========================================================================== */

.management-tools-theme {
    /* Écrase la couleur Vert-Bleu par le Bleu profond evOrg */
    --teal-main: #1c5b88; 
}

/* On ajuste la couleur du fond au survol pour qu'elle soit dans les tons bleus */
.management-tools-theme .tool-card:hover {
    background-color: rgba(28, 91, 136, 0.04); /* Un bleu très très clair */
    border-color: #d3dfe8; /* La bordure bleu clair de ce thème */
}


.text-theme{
    color: #00878a;
}

.text-theme a:hover{
    text-decoration: underline;
}