/* --- 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; /* Fond gris clair */
    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;
}

/* Style des cartes "Leviers" */
.levier-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%; /* Force les cartes à avoir la même hauteur */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.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: 30px;
}

/* Liste à puces personnalisée (Touche de modernisation) */
.levier-list {
    list-style: none; /* On enlève les puces standards */
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Pousse le contenu pour remplir la carte */
}

.levier-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px; /* Espace pour notre puce personnalisée */
}

/* Création de la puce bleue evOrg */
.levier-list li::before {
    content: '•';
    color: #2b6b8c; /* Le bleu de ta charte */
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -4px; /* Ajustement vertical fin */
}

/* --- Réactivité Mobile et Tablette --- */
@media (max-width: 768px) {
    .leviers-section {
        padding: 70px 0;
    }
    
    .leviers-header .elegant-title {
        font-size: 2.2rem;
    }
    
    .leviers-desc {
        font-size: 1rem;
    }
    
    .levier-card {
        padding: 30px 25px;
    }
}

/* --- 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 */
    }
}

.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 LEVIERS : GRILLE HORIZONTALE ET RESPONSIVE AVEC IMAGES
   ========================================================================== */

.leviers-section {
    background-color: #f7f7f7; /* Fond gris clair pour détacher les cartes blanches */
    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;
}

/* --- Nouvelles Cartes Premium avec Image --- */
.levier-card-premium {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* Obligatoire pour garder les angles arrondis de la photo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%; /* Aligne toutes les hauteurs de cartes horizontalement */
    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);
}

/* Le conteneur de la photo du levier */
.levier-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10; /* Format paysage cinéma très élégant */
    overflow: hidden;
}

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

/* Effet zoom discret sur l'image interne au survol de la carte globale */
.levier-card-premium:hover .levier-img-wrapper img {
    transform: scale(1.04);
}

/* Contenu textuel sous la photo */
.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;
}

/* Liste à puces avec puces evOrg personnalisées */
.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;
    }
    
    /* Sur tablette, la grille passe automatiquement sur 2 colonnes grâce au style global si configuré, 
       sinon on force une transition propre ici */
    .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;
    }
    
    /* Sur mobile, on empile les cartes verticalement sur une seule colonne */
    .leviers-section .cards-grid-3 {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .levier-card-content {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   SECTION HERO MANAGEMENT / CERTIFICATION (Thème Bleu)
   ========================================================================== */

.management-hero-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff; 
    
    /* Variables magiques : redéfinissent les couleurs du cadre parent ! */
    --hero-theme-blue: #1c5b88; /* Le bleu evOrg profond */
    --hero-bg: #f4f7f9; /* Fond très légèrement bleuté/gris */
    --hero-border: #d3dfe8; /* Bordure fine assortie */
}

/* Surcharge de la couleur du petit surtitre */
.management-hero-section .hero-meta {
    color: var(--hero-theme-blue);
    display: block; /* S'assure que les tags en dessous passent à la ligne */
}

/* --- Tags des Normes ISO --- */
.iso-tags-container {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne automatique proprement */
    gap: 8px;
    margin-bottom: 30px;
    max-width: 95%;
}

.iso-tag {
    font-family: var(--font-family);
    font-size: 0.65rem;
    color: var(--hero-theme-blue);
    border: 1px solid rgba(28, 91, 136, 0.3); /* Bordure bleue semi-transparente */
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.iso-tag:hover {
    background-color: rgba(28, 91, 136, 0.06); /* Léger fond bleu au survol */
    border-color: var(--hero-theme-blue);
}

/* --- Ajustements de la Grille de Statistiques --- */
.stats-management {
    margin-bottom: 35px;
    gap: 15px 40px; 
}

/* Force la stat "100% de réussite" à prendre toute la largeur sur la 2ème ligne */
.stat-full-width {
    grid-column: 1 / -1; 
}

/* --- Bouton Bleu Spécifique --- */
.btn-solid-blue {
    background-color: #1c5b88; /* Couleur en dur pour qu'il fonctionne 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, box-shadow 0.3s ease;
}

.btn-solid-blue:hover {
    background-color: #134266; /* Bleu encore plus foncé */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 91, 136, 0.2);
    color: #ffffff;
}

/* --- Le Badge sur l'image (Thème Bleu) --- */
.management-hero-section .badge-blue {
    background-color: rgba(28, 91, 136, 0.7); /* Fond bleu avec translucidité pour l'effet blur */
}

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

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

@media (max-width: 768px) {
    .management-hero-section {
        padding: 40px 0;
    }
    
    .iso-tags-container {
        gap: 6px; /* Tags légèrement plus rapprochés sur mobile */
    }
    
    .iso-tag {
        font-size: 0.6rem;
        padding: 4px 8px;
    }
}

/* ==========================================================================
   THEME BLEU POUR LE BANDEAU CTA
   ========================================================================== */

.management-cta-theme {
    background-color: #1c5b88; /* Le Bleu Profond evOrg */
}

/* On s'assure que le texte du bouton reprenne bien le bleu profond */
.management-cta-theme .btn-white-solid {
    color: #1c5b88; 
}

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

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

.management-chantiers-theme {
    /* Écrase les variables Vert-Bleu par les variables Bleu profond */
    --teal-dark: #1c5b88; /* Bleu evOrg pour les titres et surtitres */
    --teal-light: #d3dfe8; /* Bordures bleu clair */
    --bg-card: #f4f7f9; /* Fond du cadre légèrement bleuté */
}

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

.management-leviers-theme {
    /* On remplace la variable verte par la bleue pour les titres, surtitres et puces */
    --teal-dark: #1c5b88; 
}

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

/* Change la couleur du texte "qu'evOrg accompagne" pour matcher avec la page Management */
.management-realities-theme {
    --teal-main: #1c5b88; 
}

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

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

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