/* --- 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: 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: #ffffff; /* 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: #f7f7f7; /* 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: #2b6b8c;
    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: #2b6b8c; }

/* 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: #2b6b8c; /* 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: #f7f7f7; 
    padding: 100px 0;
}

.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: #2b6b8c; }

.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: #2b6b8c; /* 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;
    }
}

/* --- Section: Profil Émotionnel Premium (Bannière PEP) --- */
.pep-promo-section {
    background-color: #f9f9f9; /* Un gris extrêmement clair pour contraster en douceur avec la FAQ */
    padding: 80px 0;
    border-top: 1px solid #eaeaea; /* Ligne subtile pour séparer de la section précédente */
}

.pep-promo-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Le texte prend les 2/3 de l'espace, le bouton 1/3 */
    align-items: center; /* Centre le bouton verticalement par rapport au texte */
    gap: 60px;
}

.pep-text-col {
    max-width: 850px;
}

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

.pep-promo-section .elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    margin: 0 0 20px 0;
    line-height: 1.15;
}

/* Couleurs spécifiques héritées de tes choix précédents */
.pep-promo-section .text-dark { color: #1a1a1a; }
.pep-promo-section .text-blue { color: #2b6b8c; }

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

/* Alignement du bouton à droite sur les grands écrans */
.pep-btn-col {
    display: flex;
    justify-content: flex-end; 
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 992px) {
    .pep-promo-grid {
        grid-template-columns: 1fr; /* On passe sur 1 seule colonne */
        gap: 40px;
        text-align: center; /* On centre le texte pour plus d'harmonie sur tablette/mobile */
    }

    .pep-btn-col {
        justify-content: center; /* Le bouton repasse au centre */
    }
    
    .pep-promo-section .overline-text {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .pep-promo-section {
        padding: 60px 0;
    }

    .pep-promo-section .elegant-title {
        font-size: 2.2rem; /* Réduction du titre pour les petits écrans */
    }

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

.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;
}

/* ==========================================================================
   SECTION HERO LEADERSHIP (Thème Vert Sauge)
   ========================================================================== */

.leadership-hero-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff; 
    
    /* Variables magiques pour le thème Vert Nature */
    --hero-theme-green: #3a754e; /* Le vert forêt/sauge profond */
    --hero-bg: #f3f7f4; /* Fond très légèrement teinté de vert */
    --hero-border: #d4e0d7; /* Bordure fine assortie */
}

/* On applique la structure du cadre parent via les variables */
.leadership-hero-section .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);
}

.leadership-hero-section .hero-meta {
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--hero-theme-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
    display: block;
}

/* --- Ajustements de la Grille de Statistiques (3 colonnes) --- */
.stats-leadership {
    margin-bottom: 35px;
    grid-template-columns: repeat(3, 1fr); /* Force 3 colonnes pour cette page */
    gap: 15px 20px; 
}

/* Force la dernière stat à prendre toute la largeur en bas */
.stat-full-width {
    grid-column: 1 / -1; 
}

/* Le petit lien vert redirigeant vers le coaching */
.link-coaching-inline {
    display: inline-block;
    font-family: var(--font-family);
    font-size: 0.85rem;
    color: var(--hero-theme-green);
    font-weight: 600;
    margin-bottom: 30px;
    text-decoration: none;
    border-bottom: 1px solid rgba(58, 117, 78, 0.3);
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.link-coaching-inline:hover {
    color: #2a5739;
    border-bottom-color: #2a5739;
}

/* --- Bouton Vert Spécifique --- */
.btn-solid-green {
    background-color: var(--hero-theme-green);
    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, box-shadow 0.3s ease;
}

.btn-solid-green:hover {
    background-color: #2a5739; /* Vert plus foncé au survol */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 117, 78, 0.2);
    color: #ffffff;
}

/* --- Le Badge sur l'image (Thème Vert) --- */
.leadership-hero-section .badge-green {
    background-color: rgba(58, 117, 78, 0.85); /* Vert soutenu avec légère translucidité */
}

/* --- Liens de soulignement au survol --- */
.leadership-hero-section .link-underline-grey:hover {
    color: var(--hero-theme-green);
    border-color: var(--hero-theme-green);
}

/* ==========================================================================
   RESPONSIVITÉ POUR LE HERO LEADERSHIP
   ========================================================================== */

@media (max-width: 1100px) {
    .stats-leadership {
        grid-template-columns: repeat(2, 1fr); /* Retourne à 2 colonnes sur petit PC/Tablette */
    }
}

@media (max-width: 768px) {
    .leadership-hero-section {
        padding: 40px 0;
    }
    
    .stats-leadership {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
}

/* --- Correction de l'alignement des statistiques --- */
.hero-stats-grid .stat-item {
    display: block; /* Annule le réglage "colonne" de l'ancien CSS global */
    text-align: left; /* Force l'alignement à gauche pour le chiffre et le texte */
}

/* ==========================================================================
   THEME VERT POUR LE SLIDER (Écrase les couleurs par défaut)
   ========================================================================== */

.leadership-slider-theme {
    /* Le Vert Sauge evOrg remplace le Vert-Bleu ou le Bleu profond */
    --teal-dark: #3a754e; 
    
    /* Le vert très clair pour les bordures et les cartes intérieures */
    --teal-light: #d4e0d7; 
    
    /* Le fond très clair teinté de vert pour le grand cadre parent */
    --bg-card: #f3f7f4; 
}

/* On ajuste la couleur des grands numéros (01, 02...) pour s'harmoniser au thème */
.leadership-slider-theme .item-number {
    color: #a8c4b1; /* Un vert pastel/grisé très doux */
}

/* ==========================================================================
   THEME VERT SAUGE POUR LE BANDEAU CTA
   ========================================================================== */

.leadership-cta-theme {
    background-color: #3a754e; /* Le Vert Nature/Sauge evOrg */
}

/* On s'assure que le texte du bouton reprenne bien le vert */
.leadership-cta-theme .btn-white-solid {
    color: #3a754e; 
}

/* Sécurité pour la liste à 3 éléments : permet de passer à la ligne proprement sur les petits écrans d'ordinateur */
.leadership-cta-theme .cta-benefits {
    flex-wrap: wrap; 
    gap: 20px 40px; /* 20px d'espace vertical si ça passe à la ligne, 40px horizontal */
}

/* ==========================================================================
   THEME VERT SAUGE POUR LA SECTION CHANTIERS (Leadership)
   ========================================================================== */

.leadership-chantiers-theme {
    /* Écrase les variables globales par les couleurs Vert Sauge */
    --teal-dark: #3a754e; /* Le vert evOrg pour les titres et surtitres */
    --teal-light: #d4e0d7; /* Bordures vert clair */
    --bg-card: #f3f7f4; /* Fond du cadre parent très légèrement teinté de vert */
}

/* Personnalisation des titres de cartes pour coller à la maquette "Leadership" */
.leadership-leviers-theme .levier-card-title {
    font-family: 'Playfair Display', serif; /* Typographie élégante */
    text-transform: none; /* On retire le tout-majuscule */
    font-size: 1.25rem; /* Un peu plus grand pour compenser la typographie */
    font-weight: 500;
    letter-spacing: 0; /* On retire l'espacement des lettres du design précédent */
    margin-bottom: 20px;
}

/* ==========================================================================
   THEME VERT SAUGE POUR LA SECTION RESULTATS (Leadership)
   ========================================================================== */

/* Couleur du surtitre (CE QUE VOUS GAGNEZ) */
.leadership-results-theme .overline-text {
    color: #3a754e; 
}

/* Couleur du titre secondaire (qui durent.) */
.leadership-results-theme .text-green {
    color: #3a754e;
}

/* Couleur des icones "check" de la liste */
.leadership-results-theme .benefit-icon {
    color: #3a754e;
}

/* ==========================================================================
   THEME VERT SAUGE POUR LA SECTION INTERVENTION (Leadership)
   ========================================================================== */

.leadership-intervention-theme {
    background-color: #f7f7f7; /* Le fond gris très doux de la maquette */
}

/* Couleur du surtitre */
.leadership-intervention-theme .overline-text {
    color: #3a754e; 
}

/* Couleur du titre secondaire */
.leadership-intervention-theme .text-green {
    color: #3a754e;
    font-weight: 400; /* Un peu plus fin pour contraster avec le texte sombre */
}

/* Couleur des grands numéros en arrière-plan */
.leadership-intervention-theme .step-number {
    color: #a8c4b1; /* Un vert pastel très doux */
}

/* Couleur des nouveaux mots-clés */
.leadership-intervention-theme .step-keywords {
    color: #3a754e;
}

/* ==========================================================================
   THEME VERT SAUGE POUR LA SECTION OUTILS / APPROCHES (Leadership)
   ========================================================================== */

.leadership-tools-theme {
    /* Écrase la couleur par défaut par le Vert Sauge evOrg */
    --teal-main: #3a754e; 
}

/* Couleur du surtitre et du titre en surbrillance */
.leadership-tools-theme .overline-text,
.leadership-tools-theme .text-green {
    color: var(--teal-main);
}

/* On ajuste la couleur du fond et de la bordure au survol pour rester dans les tons verts */
.leadership-tools-theme .tool-card:hover {
    background-color: rgba(58, 117, 78, 0.04); /* Un vert très très clair et subtil */
    border-color: #d4e0d7; /* La bordure vert clair de ce thème */
}

.faq-answer-content a{
    color: #3a754e;
}
.faq-answer-content a:hover{
    text-decoration: underline;
}

.btn-solid-teal{
    background-color: #3a754e;
}
.btn-solid-teal:hover{
    background-color: #2c5b3c;
}

/* ==========================================================================
   THEME VERT SAUGE POUR LA PROMO PEP (Leadership)
   ========================================================================== */

/* Le bouton du CTA (fond blanc forcé et texte vert) */
.leadership-cta-theme .pep-btn-col {
    background-color: #387d38;
    color: #ffffff;
    border: none; /* Sécurité pour éviter d'éventuelles bordures invisibles */
}

/* Petit effet au survol pour le dynamisme */
.leadership-cta-theme .pep-btn-col:hover {
    background-color: #2e642e; /* Un blanc très légèrement teinté de vert */
    color: #ffffff; /* Le texte devient un vert un peu plus foncé */
}
/* --- Bouton Vert Spécifique --- */
.btn-solid-green2 {
    background-color: #36724a;
    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, box-shadow 0.3s ease;
}

.btn-solid-green2:hover {
    background-color: #2a5739; /* Vert plus foncé au survol */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 117, 78, 0.2);
    color: #ffffff;
}

/* ==========================================================================
   THEMES COMPLÉMENTAIRES (Section Autres Réalités - Leadership)
   ========================================================================== */

/* Change la couleur du texte et du surtitre pour matcher avec la page Leadership */
.leadership-realities-theme .overline-text {
    color: #3a754e;
}
.leadership-realities-theme .text-green {
    color: #3a754e; 
}

/* Thème de carte "Teal" (Vert-Bleu) pour l'univers Diagnostic 01 */
.theme-teal { 
    --theme-color: #00878a; 
    --theme-border: #d2e8e6; 
    --theme-bg: #f4f9f8; 
}

/* Thème de carte "Blue" (Bleu profond) pour l'univers Certification 02 */
.theme-blue {
    --theme-color: #1c5b88;
    --theme-border: #d3dfe8;
    --theme-bg: #f4f7f9;
}

/* Thème de carte "Gold" (Doré) pour l'univers Coaching 04 */
.theme-gold {
    --theme-color: #c4962c; /* Doré evOrg */
    --theme-border: #f2e9d5;
    --theme-bg: #fbf9f5;
}

/* ==========================================================================
   THEME VERT SAUGE POUR LE CTA FINAL (Leadership)
   ========================================================================== */

/* Couleur de la deuxième ligne du titre */
.leadership-final-cta-theme .text-green {
    color: #3a754e;
    font-weight: 400; /* Typographie plus fine et élégante */
}

/* Espacement sous le bouton */
.leadership-final-cta-theme .final-btn {
    margin-bottom: 25px; 
    padding: 16px 35px; /* Un bouton légèrement plus large pour terminer en beauté */
}

/* Style du petit texte "Ou appelez directement" */
.leadership-final-cta-theme .final-cta-phone {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* Le lien du numéro de téléphone */
.leadership-final-cta-theme .final-cta-phone a.text-green {
    color: #3a754e;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.leadership-final-cta-theme .final-cta-phone a.text-green:hover {
    color: #2a5739;
    text-decoration: underline;
}