/* --- RESET & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

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

:root {
    --blue: #004595;
    --yellow: #f2bc00;
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --white: #ffffff;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
    /* L'espace pour le header fixed */
    padding-top: 100px;
}

/* --- HARMONISATION DES TITRES DE SECTIONS --- */
.services-title,
.methodology-section h2,
.projects-grid-section h2,
.events-section h2,
.es-agir-section h2 {
    color: var(--blue);
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 50px;
    text-align: left;
    position: relative;
    padding-left: 0;
}

/* La ligne jaune commune sous tous les titres alignés à gauche */
.services-title::after,
.methodology-section h2::after,
.projects-grid-section h2::after,
.events-section h2::after,
.es-agir-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--yellow);
    margin-top: 15px;
}

/* --- HEADER --- */
header {
    background: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 8%;
    transition: all 0.4s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* État quand on scroll (ajouté via JS) */
header.sticky {
    padding: 10px 8%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LOGO */
.logo img {
    height: 65px;
    /* Base fixe pour le header */
    width: auto;
    transition: all 0.4s ease;

    /* TAILLE MAXIMUM SANS CASSER LE MENU */
    transform: scale(1.9);
    /* Passage à 2.1 pour un impact massif */
    transform-origin: left center;

    /* On décale un peu plus pour laisser le logo "respirer" à gauche */
    margin-left: 25px;

    /* MAGIE POUR LE FOND BLANC */
    mix-blend-mode: multiply;
    image-rendering: -webkit-optimize-contrast;
}

header.sticky .logo img {
    height: 50px;
    /* On garde un scale important même en réduit */
    transform: scale(1.6);
    margin-left: 15px;
}

/* MENU DE NAVIGATION */
nav {
    display: flex;
    align-items: center;
    /* Aligne le dropdown parfaitement au centre vertical des autres liens */
    gap: 25px;
}

nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 13px;
    /* Conserve tes 13px d'origine */
    text-transform: uppercase;
    /* Conserve les majuscules */
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--blue);
}

/* ==========================================================================
   AJOUT : GESTION DU SOUS-MENU DÉROULANT (DROPDOWN)
   ========================================================================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Petite flèche FontAwesome à côté d'ESMaroc */
.nav-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

/* Le rideau/boîte du sous-menu (Caché par défaut) */
.dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    /* Effet d'apparition vers le bas */
    background-color: var(--white);
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    opacity: 0;
    pointer-events: none;
    /* Désactivé tant qu'il est invisible */
    transition: all 0.3s ease;
    z-index: 9999;
    border-top: 3px solid var(--blue);
    /* Ligne de rappel bleu */
}

/* Liens internes du sous-menu (Qui sommes-nous, Histoire, Équipe) */
.dropdown-menu a {
    color: var(--text-dark) !important;
    padding: 12px 20px !important;
    display: block !important;
    font-size: 12px !important;
    /* Légèrement plus petit pour le sous-menu */
    font-weight: 600 !important;
    text-transform: none !important;
    /* En minuscule/normal pour une meilleure lecture */
    letter-spacing: 0px !important;
    text-align: left !important;
    transition: background-color 0.2s, color 0.2s !important;
}

/* Changement de couleur au survol dans le sous-menu */
.dropdown-menu a:hover {
    background-color: #f8f9fa !important;
    color: var(--blue) !important;
    /* Reste dans ta charte au survol */
}

/* DÉPLOIEMENT AU SURVOL DE LA SOURIS */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    /* Remonte à sa position finale */
}

/* Pivotement à 180° de la flèche au survol */
.dropdown:hover .nav-arrow {
    transform: rotate(180deg);
    color: var(--blue);
}

/* ICONES DE DROITE */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-icons a,
.burger-menu {
    color: var(--blue);
    font-size: 18px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.header-icons a:hover {
    color: var(--yellow);
    transform: scale(1.1);
}

/* ── Hubs dropdown ── */
.hubs-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.hubs-wrapper .icon-link {
    z-index: 3;
}

.hubs-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 100;
    overflow: hidden;
}

.hubs-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hub-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--blue);
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(0,69,149,0.06);
}

.hub-option:last-child {
    border-bottom: none;
}

.hub-option:hover {
    background: #f0f4fa;
}

.hub-option i {
    font-size: 1.1rem;
    color: var(--yellow);
    flex-shrink: 0;
}

.hub-option div {
    display: flex;
    flex-direction: column;
}

.hub-option strong {
    font-size: 0.85rem;
    font-weight: 700;
}

.hub-option span {
    font-size: 0.72rem;
    color: #8899aa;
    margin-top: 2px;
}

.hubs-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* ── HERO SECTION ── */
.hero {
    height: 85vh;
    background: url('../img/team/hero-img.jpeg') center/cover no-repeat;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    /* NOUVEAU dégradé : plus doux, plus transparent à droite */
    background: linear-gradient(110deg, rgba(0, 69, 149, 0.8) 25%, rgba(0, 69, 149, 0) 90%);
    display: flex;
    align-items: center;
    padding: 0 8%;
}

.hero-content {
    display: flex;
    align-items: stretch;
    gap: 30px;
    max-width: 1400px;
}

.signature-line {
    width: 6px;
    background-color: var(--yellow);
    flex-shrink: 0;
}

.hero-text h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    /* S'adapte à la taille de l'écran */
    color: var(--white);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: none;
}

.hero-text p {
    font-size: 1.2rem;
    color: var(--white);
    font-weight: 300;
    margin-bottom: 40px;
    max-width: 600px;
    opacity: 0.9;
}

.cta-yellow {
    background: var(--yellow);
    color: var(--text-dark);
    border: none;
    padding: 18px 35px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-yellow:hover {
    background: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- SERVICES --- */
.services {
    padding: 100px 8%;
    background: var(--white);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.service-card {
    background: var(--white);
    padding: 40px 30px;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* La petite barre bleue discrète au survol */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: transparent;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card h3 {
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 30px;
    flex-grow: 1;
    /* Pousse le bouton vers le bas */
}

.service-card button {
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
}

.service-card button:hover {
    background: var(--blue);
    color: var(--white);
}

/* --- METHODOLOGIE --- */
.methodology-section {
    padding: 100px 8%;
    background: var(--bg-light);
    /* Fond gris très léger pour séparer des services */
}

.content-wrapper {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.methodology-text {
    flex: 1.2;
}

.methodology-text h2 {
    /* Propriétés gérées par le bloc général des titres en haut */
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.methodology-text p {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 35px;
}

.methodology-text h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 700;
}

.methodology-text ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Liste sur deux colonnes */
    gap: 15px;
}

.methodology-text ul li {
    font-size: 0.9rem;
    color: var(--text-light);
    position: relative;
    padding-left: 25px;
}

/* La petite puce jaune horizontale */
.methodology-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 2px;
    background: var(--yellow);
}

.methodology-image {
    flex: 0.8;
}

.methodology-image img {
    width: 100%;
    height: auto;
    box-shadow: 20px 20px 0px var(--yellow);
    /* Ombre décalée jaune style moderne */
}

/* --- IMPACT / CHIFFRES CLÉS --- */
.impact {
    padding: 100px 8%;
    background: var(--white);
    text-align: center;
}

/* EXCEPTION DEMANDÉE : TITRE DES CHIFFRES RESTE CENTRÉ MAIS GAGNE L'UNDERLINE JAUNE */
.impact .section-title {
    font-size: 2.5rem;
    color: var(--blue);
    margin-bottom: 60px;
    font-weight: 800;
    text-align: center;
    position: relative;
    display: inline-block;
}

.impact .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--yellow);
    margin: 15px auto 0 auto;
}

.impact-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.impact-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.impact-item i {
    font-size: 2rem;
    color: var(--blue);
    margin-bottom: 15px;
    opacity: 0.7;
}

.num {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--yellow);
    margin: 10px 0;
    letter-spacing: -2px;
}

.impact-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--blue);
}

.impact-sub {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 5px;
}

/* --- ÉVÉNEMENTS --- */
.events-section {
    padding: 100px 8%;
    background: var(--white);
}

.events-section h2 {
    /* Géré par le bloc d'harmonisation général des titres */
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.event-card {
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.event-card:hover {
    border-color: var(--blue);
    transform: translateY(-5px);
}

.event-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    filter: grayscale(40%);
    transition: 0.5s;
}

.event-card:hover img {
    filter: grayscale(0%);
}

.event-content {
    padding: 25px;
}

.event-content h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.read-more {
    display: inline-block;
    color: var(--blue);
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 3px;
}

/* ==========================================================================
   SECTION PROJETS - PAGE ACCUEIL (LOOK UM6P)
   ========================================================================== */
body:not(.projects-page) .projects-grid-section {
    padding: 100px 8%;
    background-color: #f4f7f9;
}

body:not(.projects-page) .projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 60px 30px;
    /* Plus d'espace vertical pour laisser la carte monter */
    max-width: 1300px;
    margin: 0 auto;
}

body:not(.projects-page) .project-item {
    display: flex;
    flex-direction: column;
}

body:not(.projects-page) .project-image {
    width: 100%;
    height: 300px;
    z-index: 1;
}

body:not(.projects-page) .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body:not(.projects-page) .project-info-card {
    background: var(--white);
    padding: 30px;
    width: 90%;
    margin: -60px auto 0;
    /* L'EFFET DE CHEVAUCHEMENT */
    z-index: 2;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body:not(.projects-page) .project-info-card h3 {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 700;
}

body:not(.projects-page) .card-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body:not(.projects-page) .read-more-link {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-dark);
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-underline-offset: 4px;
}

body:not(.projects-page) .category-tag {
    background: #a7a7a7;
    color: var(--white);
    padding: 6px 12px;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ==========================================================================
   SECTION : AGIR AVEC ES MAROC (STYLE MISSIONS & IMAGE_FEEB64)
   ========================================================================== */
.es-agir-section {
    padding: 100px 8%;
    background-color: var(--white);
}

/* La limite de 1400 px porte sur le contenu, comme dans les autres sections de l'accueil : posée sur la
   section elle-même (marges comprises), elle décalait le contenu vers la droite au-delà de ~1600 px. */
.es-agir-section > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.es-agir-header {
    margin-bottom: 40px;
}

.es-agir-header .es-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-top: -30px;
    margin-bottom: 20px;
}

.es-agir-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 20px;
}

.es-agir-card {
    background: var(--bg-light);
    /* Fond gris très clair au repos */
    padding: 50px 40px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
}

/* LE ROND DE L'ICÔNE (Copie conforme du style de tes missions réussies) */
.es-agir-icon {
    font-size: 1.8rem;
    color: var(--blue);
    background-color: var(--white);
    /* Fond blanc au repos */
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    /* Cercle parfait */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0, 43, 149, 0.05);
    transition: all 0.3s ease;
}

.es-btn-agir {
    display: inline-block;
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
    padding: 14px 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.es-agir-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.7;
}

/* --- EFFETS HOVER HARMONISÉS --- */
.es-agir-card:hover {
    background-color: var(--white);
    /* Devient blanc comme tes missions */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 69, 149, 0.08);
    border-color: rgba(0, 69, 149, 0.15);
}

/* L'icône passe sur fond jaune et l'élément FontAwesome devient sombre */
.es-agir-card:hover .es-agir-icon {
    background-color: var(--yellow);
    color: var(--text-dark);
}

/* Le bouton s'allume également en jaune */
.es-agir-card:hover .es-btn-agir {
    background: var(--yellow);
    color: var(--text-dark);
}

/* Ajustement responsive */
@media (max-width: 768px) {
    .es-agir-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .es-agir-card {
        padding: 35px 25px;
    }
}

@media (max-width: 768px) {
    .es-agir-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .es-agir-card {
        padding: 35px 25px;
    }
}


/* ============================================================
   PAGE À PROPOS - STYLE INSTITUTIONNEL 
   ============================================================ */

/* ============================================================
   SECTION 1 : HERO & ESSENCE (AVEC TES VARIABLES)
   ============================================================ */

/* --- HERO BANNER --- */
.about-hero {
    background-color: var(--bg-light);
    padding: 80px 5%;
    /* Un peu moins de padding haut car le body a déjà 100px */
    display: flex;
    justify-content: center;
}

.hero-container {
    width: 100%;
    max-width: 1200px;
}

.soft-frame {
    /* Utilisation de ton jaune exact pour la barre verticale UM6P */
    border-left: 6px solid var(--yellow);
    padding: 20px 0 20px 40px;
    background: transparent;
}

.soft-frame h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--blue);
    /* Ton bleu exact */
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.soft-frame .subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-light);
    /* Ton texte grisé exact */
    max-width: 800px;
}

/* --- TEXTE ESSENCE --- */
.about-essence-text {
    padding: 90px 5%;
    background-color: var(--white);
    display: flex;
    justify-content: center;
}

.container-essence {
    width: 100%;
    max-width: 900px;
    /* Largeur de lecture idéale type éditorial / UM6P */
}

.essence-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 35px;
}

/* Petite ligne décorative jaune sous "Entreprise Sociale Maroc" */
.essence-content h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--yellow);
    margin-top: 15px;
}

.essence-content p {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 25px;
    line-height: 1.8;
    font-weight: 400;
    text-align: justify;
}

/* On donne de l'importance au premier paragraphe pour casser la monotonie */
.essence-content p:first-of-type {
    font-size: 1.25rem;
    color: var(--blue);
    font-weight: 600;
    line-height: 1.7;
}

/* ============================================================
   SECTION 2 : MOT DU PRÉSIDENT (VERSION PRESTIGE)
   ============================================================ */
.director-honor-section {
    background-color: var(--white);
    padding-bottom: 100px;
}

/* --- 1. La Grande Bannière Portrait --- */
.director-hero-banner {
    width: 100%;
    padding: 0 5%;
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.director-image-container {
    width: 100%;
    max-width: 1200px;
    height: 550px;
    /* Grande marge de hauteur pour la photo */
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bg-light);
    /* Fond de secours si pas d'image */
}

.director-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recadre la photo proprement sans la déformer */
    object-position: center 20%;
    /* Centre le visage */
    filter: brightness(0.9);
    /* Assombrit légèrement pour faire ressortir le texte */
}

/* La carte de titre superposée en bas à gauche de la photo */
.director-title-card {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background-color: var(--white);
    padding: 30px 40px;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    border-left: 5px solid var(--blue);
    /* Rappel de ta charte */
}

.director-title-card .eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-light);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.director-title-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 5px;
}

.director-title-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 400;
}

/* --- 2. Le Message Éditorial --- */
.director-message-container {
    padding: 0 5%;
    display: flex;
    justify-content: center;
}

.message-content {
    width: 100%;
    max-width: 800px;
    /* Plus serré pour un confort de lecture optimal */
}

.message-content p {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
}

/* Lettrine stylisée pour le "Chers visiteurs" */
.drop-cap-text {
    font-size: 1.4rem !important;
    font-weight: 600;
    color: var(--blue);
}

/* Style de la citation (Blockquote) au milieu du message */
.message-content blockquote {
    border-left: 4px solid var(--yellow);
    /* Accent jaune ESMaroc */
    padding: 15px 0 15px 30px;
    margin: 40px 0;
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    color: var(--blue);
    line-height: 1.6;
}

/* Bloc signature final */
.final-signature {
    margin-top: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 30px;
}

.signature-block {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.signature-block strong {
    font-size: 1.25rem;
    color: var(--blue);
    font-weight: 700;
}

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

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .director-image-container {
        height: 350px;
        /* On réduit la hauteur sur mobile */
    }

    .director-title-card {
        position: relative;
        bottom: 0;
        left: 0;
        margin: 20px 5% 0 5%;
        max-width: 100%;
        padding: 20px;
    }

    .director-hero-banner {
        flex-direction: column;
        padding: 0;
    }

    .message-content blockquote {
        font-size: 1.15rem;
        padding-left: 20px;
    }
}

/* ============================================================
   SECTION 3 : NOS MISSIONS (BENTO GRID STYLE - AVEC LIGNE JAUNE)
   ============================================================ */
.about-missions {
    padding: 100px 5%;
    background-color: var(--white);
    display: flex;
    justify-content: center;
}

.container-missions {
    width: 100%;
    max-width: 1200px;
}

/* Le grand titre de la section ajusté avec sa ligne jaune */
.about-missions .section-title-red {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 50px;
    /* Conserve l'espace avant la grille */
    line-height: 1.3;
    max-width: 900px;
}

/* Ajout de la petite ligne décorative jaune sous le titre des Missions */
.about-missions .section-title-red::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--yellow);
    margin-top: 15px;
}

/* Configuration de la Grille */
.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

/* Style de chaque carte de mission */
.mission-card {
    background-color: var(--bg-light);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 40px;
    display: flex;
    gap: 25px;
    transition: all 0.3s ease;
}

/* La 7ème carte (RSE) prend toute la largeur de la grille */
.mission-card.full-width {
    grid-column: 1 / -1;
}

/* Style des icônes de missions */
.mission-icon {
    font-size: 1.8rem;
    color: var(--blue);
    background-color: var(--white);
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 43, 149, 0.05);
    transition: all 0.3s ease;
}

/* Conteneur de texte de la carte */
.mission-text h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 12px;
}

.mission-text p {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.6;
    text-align: left;
}

/* --- EFFETS HOVER STYLE UM6P --- */
.mission-card:hover {
    background-color: var(--white);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 69, 149, 0.08);
    border-color: rgba(0, 69, 149, 0.15);
}

.mission-card:hover .mission-icon {
    background-color: var(--yellow);
    color: var(--text-dark);
}

/* Ajustement pour les petits écrans (Responsive) */
@media (max-width: 768px) {
    .about-missions {
        text-align: center;
        /* Aligne le texte au centre sur mobile */
    }

    .about-missions .section-title-red::after {
        margin: 15px auto 0 auto;
        /* Centre proprement la ligne jaune sur mobile uniquement */
    }

    .mission-card {
        flex-direction: column;
        gap: 15px;
        padding: 30px;
    }

    .mission-card.full-width {
        grid-column: auto;
    }

    .section-title-red {
        font-size: 1.8rem;
    }
}


/* ============================================================
   SECTION 4 : IMPACT & CHIFFRES (CORRECTIF ALIGNEMENT GAUCHE)
   ============================================================ */
.about-impact {
    padding: 100px 5%;
    background: var(--white);
    text-align: left;
}

.about-impact .section-title-red {
    font-size: 2.5rem;
    color: var(--blue);
    margin-bottom: 20px;
    /* Légèrement augmenté pour espacer la ligne jaune */
    font-weight: 800;
}

/* Ajout de la ligne jaune décorative sous le titre Impact */
.about-impact .section-title-red::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--yellow);
    margin-top: 15px;
}

.about-impact .section-subtitle {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Grille des 8 items */
.impact-container-apropos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0;
}

.impact-item-apropos {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    text-align: center;
    background: var(--white);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.impact-item-apropos:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.impact-item-apropos i {
    font-size: 2rem;
    color: var(--blue);
    margin-bottom: 15px;
    opacity: 0.8;
}

.impact-item-apropos .num {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--yellow);
    margin: 5px 0;
    letter-spacing: -2px;
    line-height: 1.1;
}

.impact-item-apropos .impact-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--blue);
    margin-bottom: 8px;
}

.impact-item-apropos .impact-sub {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}

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

@media (max-width: 768px) {
    .about-impact {
        text-align: center;
    }

    .about-impact .section-title-red::after {
        margin: 15px auto 0 auto;
    }

    .impact-container-apropos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 0 auto;
    }

    .impact-item-apropos { padding: 15px 10px; }
}

@media (max-width: 480px) {
    .impact-container-apropos {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SECTION 5 : NOS VALEURS (HARMONISÉES, ALIGNÉES & SÉPARÉES)
   ============================================================ */
.about-values {
    padding: 100px 5%;
    background-color: var(--white);
    display: flex;
    justify-content: flex-start;
}

.about-values .container {
    width: 100%;
    max-width: 1400px;
}

.values-header {
    text-align: left;
    margin-bottom: 60px;
}

.values-header .section-title-red {
    font-size: 2.5rem;
    color: var(--blue);
    font-weight: 800;
    margin-bottom: 20px;
}

.values-header .section-title-red::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--yellow);
    margin-top: 15px;
}

.values-header .section-subtitle {
    font-size: 1.15rem;
    color: var(--text-light);
}

/* Conteneur flex */
.values-flex-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    /* On passe le gap à 0 pour que les séparateurs soient parfaitement équilibrés */
}

/* Style unique de chaque valeur avec les nouvelles lignes verticales */
.value-item {
    flex: 1;
    min-width: 180px;
    padding: 25px 30px;
    /* Augmentation du padding latéral pour espacer le texte des lignes */
    text-align: center;
    transition: all 0.3s ease;

    /* --- LES LIGNES VERTICALES --- */
    border-right: 1px solid rgba(0, 43, 149, 0.12);
    /* Fline ligne bleutée très subtile */
}

/* Sécurité : On retire la ligne verticale sur le dernier élément (Excellence) */
.values-flex-container .value-item:last-child {
    border-right: none;
}

.value-icon {
    font-size: 2.2rem;
    color: var(--blue);
    margin-bottom: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.value-item h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 15px;
}

.value-item p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* --- EFFET AU SURVOL --- */
.value-item:hover .value-icon {
    transform: scale(1.15);
    color: var(--yellow);
}

/* --- RESPONSIVE TECHNIQUE --- */
@media (max-width: 1024px) {
    .values-header {
        text-align: center;
    }

    .values-header .section-title-red::after {
        margin: 15px auto 0 auto;
    }

    .values-flex-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        /* On remet du gap sur tablette/mobile car les blocs vont se superposer */
    }

    .value-item {
        flex: unset;
        width: 45%;
        padding: 25px 15px;
        border-right: none;
        /* On enlève les lignes verticales sur les petits écrans car la structure change */
        background-color: var(--bg-light);
        /* Un léger fond pour bien séparer les blocs sous forme de grilles */
        border-radius: 4px;
    }
}

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

/* ==========================================================================
   SECTION : STYLE FUSIONNÉ : GRILLE + ACCORDÉON INTERACTIF
   ========================================================================== */
.faq-global-container {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-section-title {
    margin-bottom: 40px;
    text-align: left;
}

.faq-section-title h2 {
    color: #003399;
    /* Ton bleu */
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.title-line-yellow {
    width: 60px;
    height: 4px;
    background-color: #e0ab00;
    /* Ton jaune */
    border-radius: 2px;
}

.about-faq-fusion {
    padding: 80px 5%;
    background-color: #f8f9fa;
    /* Fond clair pour détacher les cartes blanches */
}

.container-fusion {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonnes sur PC */
    gap: 25px;
    /* Espace entre les blocs */
    align-items: start;
    /* Évite que les boîtes s'étirent bizarrement */
}

.fusion-item {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.fusion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 25px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.fusion-title {
    color: #003399;
    /* Ton bleu officiel */
    font-size: 1.15rem;
    font-weight: 700;
}

.fusion-icon {
    color: #003399;
    font-size: 0.95rem;
    transition: transform 0.3s ease;
    margin-left: 15px;
}

.fusion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 25px;
}

.fusion-content p {
    color: #555555;
    font-size: 1rem;
    line-height: 1.6;
    padding-bottom: 22px;
    margin: 0;
}

/* ---- ÉTATS ACTIFS DU MÉLANGE ---- */
.fusion-item.active {
    border-left-color: #e0ab00;
    /* Devient jaune signature à l'ouverture */
    box-shadow: 0 6px 18px rgba(0, 51, 153, 0.08);
}

.fusion-item.active .fusion-icon {
    transform: rotate(180deg);
    color: #e0ab00;
}

/* Responsive : 1 seule colonne sur tablettes et mobiles */
@media (max-width: 992px) {
    .container-fusion {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ============================================================
   PAGE EQUIPE - STYLE INSTITUTIONNEL 
   ============================================================ *
/* ==========================================================================
   NOUVEAU DESIGN ÉQUIPE - INSPIRÉ STYLE CARTES PROJETS 
   ========================================================================== */
.modern-team-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.m-team-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    /* Plus d'espace vertical pour laisser respirer le chevauchement */
    width: 100%;
}

.m-row-center {
    display: flex;
    justify-content: center;
}

.m-row-large {
    grid-template-columns: repeat(3, 1fr);
}

/* La carte globale */
.m-member-card {
    position: relative;
    background: transparent;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 380px;
    /* Hauteur fixe pour aligner parfaitement toutes les cartes */
}

/* Spécificité pour le Directeur */
.leader-card {
    max-width: 360px;
}

/* Zone Photo (Grand rectangle en fond) */
.m-img-wrapper {
    width: 100%;
    height: 280px;
    /* Prend une grande partie de la carte */
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background-color: #e9ecef;
}

.m-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

/* Effet Zoom au survol comme sur les sites de projets */
.m-member-card:hover .m-img-wrapper img {
    transform: scale(1.06);
}

/* Le Bloc d'info blanc qui chevauche (Copie conforme de image_0369d5.png) */
.m-info-box {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    z-index: 2;
    transition: transform 0.3s ease;
    border-bottom: 3px solid #003399;
    /* Fine ligne de rappel sous la boîte */
}

.m-member-card:hover .m-info-box {
    transform: translateY(-5px);
    /* Léger rebond sympa au survol */
}

/* Style de la bordure jaune pour le Directeur */
.leader-card .m-info-box {
    border-bottom-color: #e0ab00;
}

/* Textes à l'intérieur de la boîte blanche */
.m-info-box h4 {
    margin: 0 0 6px 0;
    color: #111111;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    /* Donne le côté moderne et strict de la maquette */
    letter-spacing: 0.5px;
}

.m-role {
    font-size: 0.82rem;
    color: #666666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* --- RESPONSIVE TABLETTE & MOBILE --- */
@media (max-width: 992px) {

    .m-team-row,
    .m-row-large {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {

    .m-team-row,
    .m-row-large {
        grid-template-columns: 1fr;
    }

    .m-member-card {
        max-width: 340px;
        margin: 0 auto;
    }
}


/* ==========================================================================
   PAGE HISTOIRE - DESIGN CHRONOLOGIQUE ET VISION (CORRIGÉ)
   ========================================================================== */
.history-global-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* --- Frise Chronologique --- */
.history-timeline-section {
    padding: 60px 0 100px 0;
    background-color: #ffffff;
}

.timeline-container {
    position: relative;
    padding: 40px 0;
}

/* La ligne verticale centrale */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(0, 51, 153, 0.15);
    /* Ton bleu transparent */
    transform: translateX(-50%);
}

.timeline-block {
    position: relative;
    margin-bottom: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Alternance gauche / droite des blocs de texte */
.timeline-block:nth-child(even) {
    flex-direction: row-reverse;
}

/* TAILLE STRICTEMENT IDENTIQUE POUR TOUS LES BADGES SANS SURPLOMB */
.timeline-date {
    width: 160px;
    /* Largeur fixe harmonisée pour tout le monde (2017, L'INTERFACE, etc.) */
    height: 45px;
    background-color: #003399;
    /* Ton bleu */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    /* Ajusté pour que "L'INTERFACE" tienne parfaitement sans forcer */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(0, 51, 153, 0.2);
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    /* Empêche le mot de se couper sur deux lignes */
}

/* Changement de couleur pour le badge fondateur */
.timeline-block:first-child .timeline-date {
    background-color: #e0ab00;
    /* Ton jaune signature pour 2017 */
    box-shadow: 0 4px 10px rgba(224, 171, 0, 0.3);
}

/* BLOCS D'EXPLICATION RÉDUITS POUR LAISSER RESPIRER LES BADGES CENTRALISÉS */
.timeline-content {
    width: 40%;
    /* Réduit de 43% à 40% pour supprimer le problème d'empiètement */
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    border-top: 3px solid #003399;
}

.timeline-block:first-child .timeline-content {
    border-top-color: #e0ab00;
}

.timeline-content h3 {
    color: #003399;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.timeline-content p {
    color: #555555;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Section Vision --- */
.history-vision-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 50px;
    align-items: center;
}

.vision-intro-box .vision-eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #e0ab00;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.vision-intro-box h2 {
    color: #003399;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.vision-intro-box p {
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.7;
}

.vision-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vision-mini-card {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    border-left: 4px solid transparent;
    transition: border-color 0.3s;
}

.vision-mini-card:hover {
    border-left-color: #003399;
}

.vision-card-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #e0ab00;
    line-height: 1;
}

.vision-mini-card h4 {
    color: #003399;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.vision-mini-card p {
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    grid-column: 2;
    /* Aligne le texte sous le titre, pas sous le numéro */
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .timeline-container::before {
        left: 20px;
    }

    .timeline-block {
        flex-direction: column !important;
        padding-left: 60px;
        /* Augmenté de 50px à 60px pour éviter la collision avec le badge */
        margin-bottom: 40px;
    }

    .timeline-date {
        left: 20px;
        transform: translateX(-50%);
        width: auto;
        /* Permet la flexibilité indispensable sur petits écrans */
        min-width: 100px;
        height: 35px;
        padding: 0 15px;
        font-size: 0.75rem;
    }

    .timeline-content {
        width: 100%;
        padding: 20px;
    }

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ==========================================================================
   PAGE ÉVÉNEMENTS COMPLÈTE : ISOLATION ET DESIGN FLOTTANT SÉCURISÉ
   ========================================================================== */

.events-layout {
    background-color: #f9fbfd;
    background-image: radial-gradient(#e2e8f0 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    padding-top: 50px;
}

/* Hero Section */
.events-hero {
    text-align: center;
    padding: 100px 20px 60px;
    background: #ffffff;
    border-bottom: 2px solid #edf2f7;
}

.events-hero-content h1 {
    font-size: 2.8rem;
    font-weight: 900;
    color: #003399;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
    text-transform: uppercase;
    display: inline-block;
    padding-bottom: 15px;
    border-bottom: 4px solid #e0ab00;
    /* Jaune doré ESMaroc */
}

.events-hero-content p {
    font-size: 1.15rem;
    color: #4a5568;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Titres de Groupes */
.events-group-title {
    text-align: center;
    font-size: 1.8rem;
    color: #0f2547;
    font-weight: 800;
    margin: 60px 0 20px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.events-grid-section {
    padding: 20px 8% 60px;
}

.events-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- STRUCTURE PROTEGÉE DES CARTES DE LA PAGE DÉDIÉE (page-ev-) --- */
.page-ev-card {
    position: relative;
    height: 520px;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.page-ev-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    overflow: hidden;
}

.page-ev-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- LA BOÎTE BLANCHE FLOTTANTE SÉCURISÉE --- */
.page-ev-floating-box {
    position: relative;
    background: #ffffff;
    width: 92%;
    margin: 0 auto 20px auto;
    padding: 25px 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-ev-floating-box h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #003399;
    line-height: 1.4;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.page-ev-snippet {
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pied de la boite flottante */
.page-ev-footer-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
}

.page-ev-read-more {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f2547;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 2px;
    border-bottom: 2px solid #e0ab00;
    transition: all 0.3s ease;
}

.page-ev-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    background: #718096;
    padding: 5px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
}

/* Badges couleurs */
.badge-recrutement {
    background-color: #e53e3e;
}

.badge-accompagnement {
    background-color: #3182ce;
}

.badge-formation {
    background-color: #38a169;
}

.badge-strategie {
    background-color: #805ad5;
}

/* --- HOVER EFFECTS SPÉCIFIQUES --- */
.page-ev-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 37, 71, 0.08);
}

.page-ev-card:hover .page-ev-image-wrapper img {
    transform: scale(1.06);
}

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

.page-ev-card:hover .page-ev-read-more {
    color: #003399;
    border-bottom-color: #003399;
    padding-right: 4px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .events-grid-section {
        padding: 10px 4% 40px;
    }

    .events-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

/* ==========================================================================
   PAGE EVENEMENT 1 :ESALON : DESIGN INSTITUTIONNEL, ÉPURÉ (CHARTE NOIR & ORANGE)
   ========================================================================== */

/* --- 1. HERO HEADER DE L'ÉVÉNEMENT (Lumineux, Épuré & Sobre) --- */
.ev-detail-hero {
    background-color: #f8fafc;
    /* Fond gris ultra-clair, propre et moderne */
    padding: 140px 20px 110px;
    text-align: center;
    color: #4a5568;
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

.ev-detail-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.ev-badge {
    background-color: #000000;
    /* Badge Noir Institutionnel */
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.ev-detail-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #000000;
    /* Titre principal en Noir Pur */
    margin: 0 auto 20px auto;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
    /* Permet à la ligne de s'adapter à la largeur du texte */
}

/* ⭐ AJOUT : Ligne de soulignement (Underline) sous le titre principal H1 */
.ev-detail-hero h1::after {
    content: '';
    display: block;
    width: 60px;
    /* Largeur de la ligne */
    height: 4px;
    /* Épaisseur de la ligne */
    background-color: var(--yellow);
    /* Orange de la charte */
    margin: 15px auto 0 auto;
    /* Centre la ligne sous le texte */
    border-radius: 2px;
}

.ev-breadcrumb {
    font-size: 0.9rem;
    color: #718096;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px;
}

.ev-breadcrumb a {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ev-breadcrumb a:hover {
    color: var(--yellow);
    /* Rappel orange discret au survol */
}

.breadcrumb-sep {
    font-size: 0.75rem;
    margin: 0 10px;
    color: #a0aec0;
}

/* --- INTERSECTION MODERNE DU LOGO CIRCULAIRE CORRIGÉE --- */
.ev-brand-separator {
    background-color: #ffffff;
    position: relative;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.ev-logo-salon-container {
    position: absolute;
    top: -90px;
    background: #ffffff;
    border-radius: 50%;
    border: 3px solid var(--yellow);
    /* Garde la jolie bordure extérieure orange */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.ev-logo-salon-container:hover {
    transform: scale(1.04);
}

.ev-salon-img {
    width: 100%;
    height: 100%;
    padding: 8px;
    /* ⭐ FIX : Donne de l'espace pour que le cercle intégré à l'image ne soit plus rogné */
    object-fit: contain;
    /* ⭐ FIX : Force le logo à s'adapter entièrement sans déborder (image_f23ca1.png) */
    box-sizing: border-box;
}

/* --- 2. RUBAN DES CHIFFRES CLÉS (Épuré & Lumineux) --- */
.ev-stats-bar {
    background-color: #ffffff;
    /* Fond blanc neutre pour laisser respirer */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 40px 8% 40px;
    border-bottom: 1px solid #edf2f7;
}

.ev-stat-item {
    text-align: center;
    padding: 15px;
    min-width: 220px;
}

.ev-stat-number {
    display: block;
    font-size: 3.4rem;
    font-weight: 800;
    color: var(--yellow);
    /* L'orange sert ici d'accentuation élégante pour les chiffres */
    margin-bottom: 5px;
}

.ev-stat-label {
    font-size: 0.9rem;
    color: #4a5568;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* --- 3. ARCHITECTURE DOUBLE COLONNE --- */
.ev-detail-container {
    max-width: 1300px;
    margin: 60px auto;
    display: grid;
    grid-template-columns: 7.5fr 4.5fr;
    gap: 80px;
    padding: 0 6%;
}

.ev-main-content h2 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    color: #000000;
    /* Titre de section en Noir */
    font-weight: 800;
}

.ev-main-content h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--yellow);
    /* Ligne d'accent orange */
    margin-top: 12px;
}

.ev-main-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4a5568;
}

.ev-main-content .ev-lead {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d3748;
}

.ev-quote {
    border-left: 4px solid #000000;
    /* Ligne de citation Noire */
    padding: 20px 25px;
    margin: 40px 0;
    background-color: #f7fafc;
    font-style: italic;
    font-size: 1.1rem;
    color: #2d3748;
}

.ev-quote cite {
    display: block;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #718096;
    font-weight: 700;
    font-style: normal;
}

/* --- SIDEBAR : FICHE INFO PRATIQUE --- */
.ev-info-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #000000;
    /* Haut de carte en Noir */
    border-radius: 4px;
    padding: 35px;
    position: sticky;
    top: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
}

.ev-info-card h3 {
    margin-bottom: 25px;
    font-size: 1.3rem;
    color: #000000;
    /* Titre Infos Pratiques en Noir */
    font-weight: 800;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 12px;
}

.ev-info-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.ev-info-card ul li {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #4a5568;
    display: flex;
    align-items: center;
}

.info-icon {
    color: var(--yellow);
    /* Les icônes restent en orange pour illuminer subtilement la liste */
    font-size: 1.1rem;
    margin-right: 15px;
    width: 20px;
    text-align: center;
}

.ev-info-card ul li strong {
    color: #2d3748;
}

/* BOUTON D'ACTION PRINCIPAL (Noir institutionnel chic) */
.ev-btn-cta {
    display: block;
    background-color: #000000;
    /* Bouton Noir */
    color: #ffffff;
    text-align: center;
    padding: 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    border: 2px solid #000000;
    letter-spacing: 0.5px;
}

.ev-btn-cta:hover {
    background-color: transparent;
    color: #000000;
}

/* --- 4. GALERIE PHOTOS --- */
.ev-gallery-section {
    max-width: 1300px;
    margin: 60px auto 100px;
    padding: 0 6%;
}

.ev-gallery-title {
    text-align: center;
    margin-bottom: 40px;
}

.ev-gallery-title h2 {
    font-size: 2rem;
    color: #000000;
    /* Titre Galerie en Noir */
    font-weight: 800;
}

.ev-gallery-title h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--yellow);
    margin: 12px auto 15px;
}

.ev-gallery-title p {
    color: #718096;
    font-size: 1rem;
}

.ev-standard-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.ev-gallery-item {
    position: relative;
    display: block;
    height: 220px;
    overflow: hidden;
    border-radius: 4px;
}

.ev-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Masque de survol Noir translucide */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay i {
    color: #ffffff;
    font-size: 1.6rem;
}

.ev-gallery-item:hover img {
    transform: scale(1.05);
}

.ev-gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 768px) {
    .ev-stats-bar {
        padding: 30px 20px;
    }

    .ev-stat-number {
        font-size: 2.8rem;
    }

    .ev-detail-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* ==========================================================================
   PAGE ÉVÉNEMENT : CAFÉ ESMAROC (DESIGN GLOBAL & STRUCTURÉ)
   ========================================================================== */

/* --- 1. HERO HEADER (Structure & Aligne-blocs) --- */
.cafe-detail-hero {
    display: block;
    position: relative;
    z-index: 1;
    background-color: #f8fafc;
    color: #4a5568;
    padding: 140px 20px 110px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.cafe-detail-hero-content {
    display: flex;
    flex-direction: column;
    /* Superpose proprement Badge > Titre > Fil d'Ariane */
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Badge de catégorie */
.cafe-badge {
    display: inline-block;
    background-color: #0f172a;
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

/* Titre Principal H1 & Ligne de style */
.cafe-detail-hero h1 {
    display: block;
    position: relative;
    color: #000000;
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 auto 20px auto;
}

.cafe-detail-hero h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #0f172a;
    border-radius: 2px;
    margin: 15px auto 0 auto;
}

/* Fil d'Ariane (Breadcrumb) */
.cafe-breadcrumb {
    color: #718096;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px;
}

.cafe-breadcrumb a {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cafe-breadcrumb a:hover {
    color: #0f172a;
    text-decoration: none;
}

.cafe-breadcrumb-sep {
    color: #a0aec0;
    font-size: 0.75rem;
    margin: 0 10px;
}


/* --- 2. INTERSECTION CADRE LOGO (Grand Rectangle Adapté) --- */
.cafe-brand-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    height: 50px;
    background-color: #ffffff;
}

.cafe-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    /* Positionnement à cheval parfait sur la ligne */
    top: 50%;
    transform: translateY(-50%);

    background: #ffffff;
    border: 3px solid #0f172a;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* Dimensions du cadre */
    width: 380px;
    height: 120px;
    padding: 0;
    /* Suppression du padding pour maximiser la place de l'image */

    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol dynamique (ajusté avec le nouveau scale de l'image) */
.cafe-logo-container:hover {
    transform: translateY(-55%) scale(1.03);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15);
}

.cafe-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Zoom artificiel de 2.2x pour éliminer l'espace vide interne de l'image */
    transform: scale(2.2);
}


/* --- 3. BARRE DES STATISTIQUES --- */
.cafe-stats-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    background-color: #fafafa;
    padding: 100px 8% 40px;
    /* Espace pour laisser passer le grand logo */
    border-bottom: 1px solid #edf2f7;
}

.cafe-stat-item {
    text-align: center;
    min-width: 220px;
    padding: 15px;
}

.cafe-stat-number {
    display: block;
    color: #000000;
    font-size: 3.4rem;
    font-weight: 800;
}

.cafe-stat-label {
    color: #718096;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}


/* --- 4. GRID LAYOUT & ZONE DE CONTENU PRINCIPALE --- */
.cafe-detail-container {
    display: grid;
    grid-template-columns: 7.5fr 4.5fr;
    gap: 60px;
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 6%;
}

/* Typographies de contenu */
.cafe-main-content h2 {
    color: #000000;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 25px;
}

.cafe-main-content p {
    color: #4a5568;
    font-size: 1.05rem;
    line-height: 1.8;
}

.cafe-lead {
    color: #1a202c;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Listes stylisées épurées */
.cafe-clean-list {
    display: block;
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.cafe-clean-list li {
    display: block;
    color: #4a5568;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 16px;
}

.cafe-check {
    display: inline-block;
    color: #0f172a;
    font-weight: bold;
    margin-right: 12px;
}

/* Blocs de citation */
.cafe-quote {
    background-color: #f8fafc;
    border-left: 4px solid #0f172a;
    padding: 20px 25px;
    margin: 40px 0;
    font-style: italic;
}

.cafe-quote cite {
    display: block;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 700;
    font-style: normal;
    margin-top: 12px;
}


/* --- 5. SIDEBAR (Bloc d'informations fixes & CTA) --- */
.cafe-info-card {
    position: sticky;
    top: 40px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #0f172a;
    padding: 35px;
}

.cafe-info-card h3 {
    color: #000000;
    font-size: 1.3rem;
    font-weight: 800;
    padding-bottom: 12px;
    border-bottom: 2px solid #edf2f7;
    margin-bottom: 25px;
}

.cafe-sidebar-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.cafe-sidebar-list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.cafe-info-icon {
    color: #4a5568;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    margin-right: 15px;
}

/* Bouton d'action principal (CTA) */
.cafe-btn-cta {
    display: block;
    background-color: #0f172a;
    color: #ffffff;
    text-align: center;
    padding: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.cafe-btn-cta:hover {
    background-color: #1e293b;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2);
    transform: translateY(-2px);
}


/* --- 6. RESPONSIVE DESIGN (Tablettes & Mobiles) --- */
@media (max-width: 768px) {
    .cafe-logo-container {
        width: 90%;
        height: 90px;
    }

    .cafe-logo-img {
        transform: scale(1.8);
        /* Zoom un poil plus léger pour les petits écrans */
    }

    .cafe-detail-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cafe-stats-bar {
        padding: 80px 20px 40px;
    }
}

/* ==========================================================================
   PAGE SOUK DES STARTUPS : DESIGN COHÉRENT (CHARTE GRIS, ORANGE & JAUNE)
   ========================================================================== */

/* 1. HERO HEADER */
.ev-detail-hero {
    background-color: #f8fafc;
    padding: 140px 20px 110px;
    text-align: center;
    color: #66696b;
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

.ev-detail-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.ev-badge {
    background-color: #f29443 !important;
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 25px;
}

.ev-detail-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #66696b !important;
    margin: 0 auto 20px auto;
}

.ev-detail-hero h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #f9d32d !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* 2. LOGO SEPARATOR */
.ev-brand-separator {
    background-color: #ffffff;
    position: relative;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.ev-logo-salon-container {
    position: absolute;
    top: -90px;
    background: #ffffff;
    border-radius: 8px;
    border: 3px solid #f9d32d !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    width: 250px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.ev-salon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

/* 3. STATS BAR */
.ev-stats-bar {
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 40px 8% 40px;
    border-bottom: 1px solid #edf2f7;
}

.ev-stat-item {
    text-align: center;
    padding: 15px;
    min-width: 200px;
}

.ev-stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #f29443 !important;
    margin-bottom: 5px;
}

.ev-stat-label {
    font-size: 0.9rem;
    color: #66696b;
    font-weight: 700;
    text-transform: uppercase;
}

/* 4. MAIN CONTENT & SIDEBAR */
.ev-detail-container {
    max-width: 1300px;
    margin: 60px auto;
    display: grid;
    grid-template-columns: 7.5fr 4.5fr;
    gap: 80px;
    padding: 0 6%;
}

.ev-main-content h2 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    color: #66696b !important;
    font-weight: 800;
}

.ev-main-content h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #f9d32d !important;
    margin-top: 12px;
}

.ev-main-content p {
    color: #66696b;
}

.ev-info-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #f9d32d !important;
    border-radius: 4px;
    padding: 35px;
    position: sticky;
    top: 40px;
}

.ev-btn-cta {
    display: block;
    background-color: #66696b !important;
    color: #ffffff !important;
    text-align: center;
    padding: 15px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    transition: 0.3s;
}

.ev-btn-cta:hover {
    background-color: #f9d32d !important;
    color: #66696b !important;
}

.info-icon {
    color: #f29443 !important;
    margin-right: 15px;
}

/* 5. GALLERY */
.ev-gallery-section {
    max-width: 1300px;
    margin: 60px auto 100px;
    padding: 0 6%;
}

.ev-gallery-title {
    text-align: center;
    margin-bottom: 40px;
}

.ev-gallery-title h2 {
    color: #66696b !important;
}

.ev-gallery-title h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #f9d32d !important;
    margin: 12px auto 15px;
}

.ev-standard-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.ev-gallery-item {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 4px;
    display: block;
}

.ev-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 105, 107, 0.8) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}

.ev-gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* 6. RESPONSIVE */
@media (max-width: 768px) {
    .ev-detail-container {
        grid-template-columns: 1fr;
    }

    .ev-logo-salon-container {
        width: 200px;
        height: 140px;
        top: -70px;
    }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT 4 : EXPERTS CONNECT
   ========================================================================== */

/* --- VARIABLES DE CHARTE --- */
:root {
    --ec-gold: #F5C518;
    --ec-black: #1a1a1a;
    --ec-bg: #fafaf7;
    --ec-gold-hover: #d4a800;
}

/* --- 1. HERO --- */
.ec-hero {
    background-color: var(--ec-bg);
    border-bottom: 1px solid #e8e5d8;
}

.ec-badge {
    background-color: var(--ec-black) !important;
    color: var(--ec-gold) !important;
    /* Badge noir avec texte doré : signature propre à EC */
}

.ec-h1 {
    color: var(--ec-black) !important;
}

/* Ligne de soulignement en jaune doré */
.ec-h1::after {
    background-color: var(--ec-gold) !important;
}

.ev-breadcrumb a:hover {
    color: var(--ec-gold) !important;
}

/* --- 2. LOGO CIRCULAIRE --- */
.ec-brand-separator {
    height: 55px !important;
}

.ec-logo-container {
    width: 320px !important;
    height: 110px !important;
    border-radius: 8px !important;
    border-color: var(--ec-gold) !important;
    background-color: #ffffff !important;
    /* Fond blanc */
    top: -55px !important;
}

.ec-logo-container .ev-salon-img {
    padding: 0 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- 3. STATS BAR --- */
.ec-stats-bar {
    background-color: var(--ec-black) !important;
    /* Stats sur fond noir — inversé vs ESalon */
    border-bottom: none;
}

.ec-stats-bar .ev-stat-label {
    color: #c9c4a8 !important;
    /* Labels légèrement crème sur fond noir */
}

.ec-stat-number {
    color: var(--ec-gold) !important;
    /* Chiffres en jaune doré */
}

/* Séparateurs entre les stats */
.ec-stats-bar .ev-stat-item:not(:last-child) {
    border-right: 1px solid rgba(245, 197, 24, 0.2);
}

/* --- 4. TITRES DE SECTION --- */
.ec-section-title {
    color: var(--ec-black) !important;
    font-size: 2.2rem !important;
    margin-bottom: 25px !important;
    font-weight: 800 !important;
}

.ec-section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--ec-gold) !important;
    /* Ligne d'accent dorée */
    margin-top: 12px;
}

/* --- ICÔNES CHECK-LIST --- */
.ec-check-icon {
    color: var(--ec-gold);
    margin-right: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* --- 5. CITATION / BLOCKQUOTE --- */
.ec-quote {
    border-left-color: var(--ec-gold) !important;
    /* Barre de citation en doré */
    background-color: #1a1a1a !important;
    color: #f0ead6 !important;
}

.ec-quote cite {
    color: var(--ec-gold) !important;
}

/* --- 6. SIDEBAR / INFO CARD --- */
.ec-info-card {
    border-top-color: var(--ec-gold) !important;
    /* Bandeau supérieur doré */
}

.ec-info-card h3 {
    color: var(--ec-black) !important;
}

.ec-info-icon {
    color: var(--ec-gold) !important;
}

/* --- 7. BOUTON CTA --- */
.ec-btn-cta {
    background-color: var(--ec-gold) !important;
    color: var(--ec-black) !important;
    /* Texte noir sur fond doré */
    border-color: var(--ec-gold) !important;
    font-weight: 800 !important;
}

.ec-btn-cta:hover {
    background-color: transparent !important;
    color: var(--ec-black) !important;
    border-color: var(--ec-black) !important;
}

/* --- 8. GALERIE --- */
.ec-gallery-title-h2 {
    color: var(--ec-black) !important;
}

.ec-gallery-title-h2::after {
    background-color: var(--ec-gold) !important;
}

.ec-gallery-item {
    border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.ec-gallery-item:hover {
    border-color: var(--ec-gold);
}

.ec-gallery-overlay {
    background-color: rgba(26, 26, 26, 0.85) !important;
}

.ec-gallery-overlay i {
    color: var(--ec-gold) !important;
    /* Icône loupe en doré au survol */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .ec-stats-bar .ev-stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(245, 197, 24, 0.2);
        padding-bottom: 20px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT : SEMAINES PORTES OUVERTES (sous-événement ESalon)
   ========================================================================== */

:root {
    --po-orange: #f4ad4a;
    --po-black: #020202;
    --po-grey: #dededd;
    --po-bg: #f9f9f8;
}

/* --- 1. HERO --- */
.po-hero {
    background-color: var(--po-bg);
    border-bottom: 1px solid var(--po-grey);
}

.po-badge {
    background-color: var(--po-black) !important;
    color: #ffffff !important;
}

.po-h1 {
    color: var(--po-black) !important;
}

.po-h1::after {
    background-color: var(--po-orange) !important;
}

.po-hero .ev-breadcrumb a:hover {
    color: var(--po-orange) !important;
}

/* --- 2. LOGO CONTENEUR RECTANGULAIRE --- */
.po-brand-separator {
    height: 55px !important;
}

.po-logo-container {
    width: 320px !important;
    height: 110px !important;
    border-radius: 8px !important;
    border-color: var(--po-orange) !important;
    background-color: #ffffff !important;
    top: -55px !important;
}

.po-salon-img {
    padding: 0 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- 3. STATS BAR --- */
.po-stats-bar {
    background-color: var(--po-grey) !important;
    border-bottom: none;
}

.po-stats-bar .ev-stat-label {
    color: #5a5a5a !important;
}

.po-stat-number {
    color: var(--po-black) !important;
    /* Chiffres/mots en noir sur fond gris */
}

.po-stats-bar .ev-stat-item:not(:last-child) {
    border-right: 1px solid rgba(2, 2, 2, 0.15);
}

/* --- 4. TITRES DE SECTION --- */
.po-section-title {
    color: var(--po-black) !important;
    font-size: 2.2rem !important;
    margin-bottom: 25px !important;
    font-weight: 800 !important;
}

.po-section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--po-orange);
    margin-top: 12px;
}

/* --- CHECK ICONS --- */
.po-check-icon {
    color: var(--po-orange);
    margin-right: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* --- 5. BLOCKQUOTE --- */
.po-quote {
    border-left-color: var(--po-orange) !important;
    background-color: var(--po-bg) !important;
}

.po-quote cite {
    color: var(--po-orange) !important;
}

/* --- LIEN PARENT ESALON --- */
.po-parent-link {
    margin-top: 35px;
    padding: 18px 22px;
    background-color: var(--po-grey);
    border-radius: 4px;
    font-size: 0.95rem;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
}

.po-parent-link a {
    color: var(--po-black);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--po-orange);
    transition: color 0.3s ease;
}

.po-parent-link a:hover {
    color: var(--po-orange);
}

.po-parent-icon {
    color: var(--po-orange);
    font-size: 1rem;
}

/* --- 6. SIDEBAR / INFO CARD --- */
.po-info-card {
    border-top-color: var(--po-orange) !important;
}

.po-info-card h3 {
    color: var(--po-black) !important;
}

.po-info-icon {
    color: var(--po-orange) !important;
}

/* --- 7. BOUTONS --- */
.po-btn-cta {
    background-color: var(--po-black) !important;
    color: #ffffff !important;
    border-color: var(--po-black) !important;
}

.po-btn-cta:hover {
    background-color: transparent !important;
    color: var(--po-black) !important;
}

/* Bouton secondaire retour ESalon */
.po-btn-secondary {
    display: block;
    margin-top: 12px;
    text-align: center;
    padding: 12px;
    border-radius: 4px;
    border: 2px solid var(--po-grey);
    color: #4a5568;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.po-btn-secondary:hover {
    border-color: var(--po-orange);
    color: var(--po-black);
}

/* --- 8. GALERIE --- */
.po-gallery-title-h2 {
    color: var(--po-black) !important;
}

.po-gallery-title-h2::after {
    background-color: var(--po-orange) !important;
}

.po-gallery-overlay {
    background-color: rgba(2, 2, 2, 0.82) !important;
}

.po-gallery-overlay i {
    color: var(--po-orange) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .po-stats-bar .ev-stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(2, 2, 2, 0.1);
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    .po-logo-container {
        width: 260px !important;
        height: 90px !important;
    }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT : ÉCOLE D'ÉTÉ ESMAROC
   ========================================================================== */

:root {
    --ed-teal: #01a9a9;
    --ed-black: #111111;
    --ed-white: #feffff;
    --ed-teal-light: rgba(1, 169, 169, 0.08);
}

/* --- 1. HERO --- */
.ed-hero {
    background-color: var(--ed-white);
    border-bottom: 1px solid #e8f5f5;
}

.ed-hero .ev-detail-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ed-badge {
    background-color: var(--ed-teal) !important;
    color: var(--ed-white) !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}

.ed-h1 {
    color: var(--ed-black) !important;
    display: block !important;
}

.ed-h1::after {
    background-color: var(--ed-teal) !important;
    display: block !important;
    content: '' !important;
    width: 60px !important;
    height: 4px !important;
    margin: 15px auto 0 auto !important;
    border-radius: 2px !important;
}

.ed-hero .ev-breadcrumb a:hover {
    color: var(--ed-teal) !important;
}

/* --- 2. LOGO CONTENEUR --- */
.ed-brand-separator {
    height: 55px !important;
}

.ed-logo-container {
    width: 320px !important;
    height: 110px !important;
    border-radius: 8px !important;
    border-color: var(--ed-teal) !important;
    background-color: transparent !important;
    /* Fond transparent */
    top: -55px !important;
    box-shadow: none !important;
    border-width: 2px !important;
}

.ed-salon-img {
    padding: 0 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    /* Supprime le fond blanc du PNG via mix-blend-mode */
    mix-blend-mode: multiply !important;
    transform: scale(2.0) !important;
    /* Agrandit le logo visuellement */
}

/* --- 3. STATS BAR --- */
.ed-stats-bar {
    background-color: var(--ed-teal-light) !important;
    border-bottom: 2px solid var(--ed-teal) !important;
}

.ed-stats-bar .ev-stat-label {
    color: #4a5568 !important;
}

.ed-stat-number {
    color: var(--ed-teal) !important;
}

.ed-stats-bar .ev-stat-item:not(:last-child) {
    border-right: 1px solid rgba(1, 169, 169, 0.25);
}

/* --- 4. TITRES DE SECTION --- */
.ed-section-title {
    color: var(--ed-black) !important;
    font-size: 2.2rem !important;
    margin-bottom: 25px !important;
    font-weight: 800 !important;
}

.ed-section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--ed-teal);
    margin-top: 12px;
}

/* --- CHECK ICONS --- */
.ed-check-icon {
    color: var(--ed-teal);
    margin-right: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* --- 5. BLOCKQUOTE --- */
.ed-quote {
    border-left-color: var(--ed-teal) !important;
    background-color: var(--ed-teal-light) !important;
}

.ed-quote cite {
    color: var(--ed-teal) !important;
}

/* --- 6. SIDEBAR / INFO CARD --- */
.ed-info-card {
    border-top-color: var(--ed-teal) !important;
}

.ed-info-card h3 {
    color: var(--ed-black) !important;
}

.ed-info-icon {
    color: var(--ed-teal) !important;
}

/* --- 7. BOUTON CTA --- */
.ed-btn-cta {
    background-color: var(--ed-teal) !important;
    color: var(--ed-white) !important;
    border-color: var(--ed-teal) !important;
    font-weight: 800 !important;
}

.ed-btn-cta:hover {
    background-color: transparent !important;
    color: var(--ed-teal) !important;
    border-color: var(--ed-teal) !important;
}

/* --- 8. GALERIE --- */
.ed-gallery-title-h2 {
    color: var(--ed-black) !important;
}

.ed-gallery-title-h2::after {
    background-color: var(--ed-teal) !important;
}

.ed-gallery-overlay {
    background-color: rgba(17, 17, 17, 0.82) !important;
}

.ed-gallery-overlay i {
    color: var(--ed-teal) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .ed-stats-bar .ev-stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(1, 169, 169, 0.2);
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    .ed-logo-container {
        width: 260px !important;
        height: 90px !important;
        top: -45px !important;
    }

    .ed-brand-separator {
        height: 45px !important;
    }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT : SOIRÉE DES ENTREPRISES CITOYENNES
   ========================================================================== */

:root {
    --sec-blue: #084695;
    --sec-yellow: #efba05;
    --sec-blue-light: rgba(8, 70, 149, 0.06);
}

/* --- 1. HERO --- */
.sec-hero {
    background-color: #f7f9fc !important;
    border-bottom: 1px solid #dde6f5 !important;
}

.sec-hero .ev-detail-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.sec-badge {
    background-color: var(--sec-blue) !important;
    color: #ffffff !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}

/* FIX titre gris : double ciblage pour écraser le CSS global */
.sec-hero h1,
.sec-hero .sec-h1 {
    color: var(--sec-blue) !important;
    display: block !important;
}

.sec-hero h1::after,
.sec-hero .sec-h1::after {
    content: '' !important;
    display: block !important;
    width: 60px !important;
    height: 4px !important;
    background-color: var(--sec-yellow) !important;
    margin: 15px auto 0 auto !important;
    border-radius: 2px !important;
}

.sec-hero .ev-breadcrumb a:hover {
    color: var(--sec-blue) !important;
}

/* --- 2. SUPPRESSION BANNIÈRE ET SÉPARATEUR LOGO --- */
.sec-title-banner {
    display: none !important;
}

.sec-hero+.ev-brand-separator {
    display: none !important;
}

/* --- 3. STATS BAR --- */
.sec-stats-bar {
    background-color: var(--sec-blue-light) !important;
    border-top: none !important;
    border-bottom: 2px solid var(--sec-blue) !important;
}

.sec-stats-bar .ev-stat-label {
    color: #4a5568 !important;
}

.sec-stats-bar .ev-stat-number,
.sec-stats-bar span.ev-stat-number {
    color: var(--sec-blue) !important;
}

.sec-stat-number {
    color: var(--sec-blue) !important;
}

.sec-stats-bar .ev-stat-item:not(:last-child) {
    border-right: 1px solid rgba(8, 70, 149, 0.2) !important;
}

/* --- 4. TITRES DE SECTION --- */
.sec-section-title {
    color: var(--sec-blue) !important;
    font-size: 2.2rem !important;
    margin-bottom: 25px !important;
    font-weight: 800 !important;
}

.sec-section-title::after {
    content: '' !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    background-color: var(--sec-yellow) !important;
    margin-top: 12px !important;
}

/* --- CHECK ICONS --- */
.sec-check-icon {
    color: #ffffff !important;
    background-color: var(--sec-blue) !important;
    margin-right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}

/* --- 5. BLOCKQUOTE --- */
.sec-quote {
    border-left-color: var(--sec-blue) !important;
    background-color: var(--sec-blue-light) !important;
}

.sec-quote cite {
    color: var(--sec-blue) !important;
}

/* --- 6. SIDEBAR / INFO CARD --- */
.sec-info-card {
    border-top-color: var(--sec-blue) !important;
}

.sec-info-card h3 {
    color: var(--sec-blue) !important;
}

.sec-info-icon {
    color: var(--sec-yellow) !important;
}

/* --- 7. BOUTON CTA --- */
.sec-btn-cta {
    background-color: var(--sec-yellow) !important;
    color: var(--sec-blue) !important;
    border-color: var(--sec-yellow) !important;
    font-weight: 800 !important;
}

.sec-btn-cta:hover {
    background-color: transparent !important;
    color: var(--sec-blue) !important;
    border-color: var(--sec-blue) !important;
}

/* --- 8. GALERIE --- */
.sec-gallery-title-h2 {
    color: var(--sec-blue) !important;
}

.sec-gallery-title-h2::after {
    content: '' !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    background-color: var(--sec-yellow) !important;
    margin: 12px auto 15px !important;
}

.sec-gallery-overlay {
    background-color: rgba(8, 70, 149, 0.85) !important;
}

.sec-gallery-overlay i {
    color: var(--sec-yellow) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .sec-stats-bar .ev-stat-item:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid rgba(8, 70, 149, 0.15) !important;
        padding-bottom: 20px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   PAGE ÉVÉNEMENT : DÉPLOIEMENT AFRIQUE & COOPÉRATION SUD-SUD
   ========================================================================== */

:root {
    --afs-blue: #084695;
    --afs-yellow: #efba05;
    --afs-blue-light: rgba(8, 70, 149, 0.06);
}

/* --- 1. HERO --- */
.afs-hero {
    background-color: #f7f9fc !important;
    border-bottom: 1px solid #dde6f5 !important;
}

.afs-hero .ev-detail-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.afs-badge {
    background-color: var(--afs-blue) !important;
    color: #ffffff !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}

.afs-hero h1,
.afs-hero .afs-h1 {
    color: var(--afs-blue) !important;
    display: block !important;
}

.afs-hero h1::after,
.afs-hero .afs-h1::after {
    content: '' !important;
    display: block !important;
    width: 60px !important;
    height: 4px !important;
    background-color: var(--afs-yellow) !important;
    margin: 15px auto 0 auto !important;
    border-radius: 2px !important;
}

.afs-hero .ev-breadcrumb a:hover {
    color: var(--afs-blue) !important;
}

/* Masquer le séparateur logo inutile */
.afs-hero+.ev-brand-separator {
    display: none !important;
}

/* --- 2. STATS BAR --- */
.afs-stats-bar {
    background-color: var(--afs-blue-light) !important;
    border-top: none !important;
    border-bottom: 2px solid var(--afs-blue) !important;
}

.afs-stats-bar .ev-stat-label {
    color: #4a5568 !important;
}

.afs-stats-bar .ev-stat-number,
.afs-stats-bar span.ev-stat-number {
    color: var(--afs-blue) !important;
}

.afs-stat-number {
    color: var(--afs-blue) !important;
}

.afs-stats-bar .ev-stat-item:not(:last-child) {
    border-right: 1px solid rgba(8, 70, 149, 0.2) !important;
}

/* --- 3. TITRES DE SECTION --- */
.afs-section-title {
    color: var(--afs-blue) !important;
    font-size: 2.2rem !important;
    margin-bottom: 25px !important;
    font-weight: 800 !important;
}

.afs-section-title::after {
    content: '' !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    background-color: var(--afs-yellow) !important;
    margin-top: 12px !important;
}

/* --- CHECK ICONS --- */
.afs-check-icon {
    color: #ffffff !important;
    background-color: var(--afs-blue) !important;
    margin-right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}

/* --- 4. BLOCKQUOTE --- */
.afs-quote {
    border-left-color: var(--afs-blue) !important;
    background-color: var(--afs-blue-light) !important;
}

.afs-quote cite {
    color: var(--afs-blue) !important;
}

/* --- 5. SIDEBAR / INFO CARD --- */
.afs-info-card {
    border-top-color: var(--afs-blue) !important;
}

.afs-info-card h3 {
    color: var(--afs-blue) !important;
}

.afs-info-icon {
    color: var(--afs-yellow) !important;
}

/* --- 6. BOUTON CTA --- */
.afs-btn-cta {
    background-color: var(--afs-yellow) !important;
    color: var(--afs-blue) !important;
    border-color: var(--afs-yellow) !important;
    font-weight: 800 !important;
}

.afs-btn-cta:hover {
    background-color: transparent !important;
    color: var(--afs-blue) !important;
    border-color: var(--afs-blue) !important;
}

/* --- 7. GALERIE --- */
.afs-gallery-title-h2 {
    color: var(--afs-blue) !important;
}

.afs-gallery-title-h2::after {
    content: '' !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    background-color: var(--afs-yellow) !important;
    margin: 12px auto 15px !important;
}

.afs-gallery-overlay {
    background-color: rgba(8, 70, 149, 0.85) !important;
}

.afs-gallery-overlay i {
    color: var(--afs-yellow) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .afs-stats-bar .ev-stat-item:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid rgba(8, 70, 149, 0.15) !important;
        padding-bottom: 20px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   PAGE RSE & PARTENARIATS — Charte globale ESMaroc 
   ========================================================================== */

:root {
    --rse-blue: #084695;
    --rse-yellow: #efba05;
    --rse-blue-light: rgba(8, 70, 149, 0.06);
}

/* --- HERO --- */
[data-page="rse"] .ev-detail-hero {
    background-color: #f7f9fc !important;
    border-bottom: 1px solid #dde6f5 !important;
}

[data-page="rse"] .ev-detail-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

[data-page="rse"] .ev-badge {
    background-color: var(--rse-blue) !important;
    color: #ffffff !important;
}

[data-page="rse"] .ev-detail-hero h1 {
    color: var(--rse-blue) !important;
}

[data-page="rse"] .ev-detail-hero h1::after {
    background-color: var(--rse-yellow) !important;
}

[data-page="rse"] .ev-breadcrumb a:hover {
    color: var(--rse-blue) !important;
}

[data-page="rse"] .ev-brand-separator {
    display: none !important;
}

/* --- STATS BAR --- */
[data-page="rse"] .ev-stats-bar {
    background-color: var(--rse-blue-light) !important;
    border-bottom: 2px solid var(--rse-blue) !important;
}

[data-page="rse"] .ev-stat-number {
    color: var(--rse-blue) !important;
}

[data-page="rse"] .ev-stat-label {
    color: #4a5568 !important;
}

[data-page="rse"] .ev-stat-item:not(:last-child) {
    border-right: 1px solid rgba(8, 70, 149, 0.2) !important;
}

/* --- TITRES DE SECTION --- */
[data-page="rse"] .ev-main-content h2 {
    color: var(--rse-blue) !important;
}

[data-page="rse"] .ev-main-content h2::after {
    background-color: var(--rse-yellow) !important;
}

/* --- CHECK ICONS --- */
.rse-check-icon {
    color: #ffffff !important;
    background-color: var(--rse-blue) !important;
    margin-right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}

/* --- BLOCKQUOTE --- */
[data-page="rse"] .ev-quote {
    border-left-color: var(--rse-blue) !important;
    background-color: var(--rse-blue-light) !important;
}

[data-page="rse"] .ev-quote cite {
    color: var(--rse-blue) !important;
}

/* --- SIDEBAR / INFO CARD --- */
[data-page="rse"] .ev-info-card {
    border-top-color: var(--rse-blue) !important;
}

[data-page="rse"] .ev-info-card h3 {
    color: var(--rse-blue) !important;
}

[data-page="rse"] .info-icon {
    color: var(--rse-yellow) !important;
}

/* --- BOUTON CTA --- */
[data-page="rse"] .ev-btn-cta {
    background-color: var(--rse-yellow) !important;
    color: var(--rse-blue) !important;
    border-color: var(--rse-yellow) !important;
    font-weight: 800 !important;
}

[data-page="rse"] .ev-btn-cta:hover {
    background-color: transparent !important;
    color: var(--rse-blue) !important;
    border-color: var(--rse-blue) !important;
}

/* --- GALERIE --- */
[data-page="rse"] .ev-gallery-title h2 {
    color: var(--rse-blue) !important;
}

[data-page="rse"] .ev-gallery-title h2::after {
    background-color: var(--rse-yellow) !important;
}

[data-page="rse"] .gallery-overlay {
    background-color: rgba(8, 70, 149, 0.85) !important;
}

[data-page="rse"] .gallery-overlay i {
    color: var(--rse-yellow) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    [data-page="rse"] .ev-stat-item:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid rgba(8, 70, 149, 0.15) !important;
        padding-bottom: 20px !important;
        margin-bottom: 10px !important;
    }
}

/* ── Souk des Startups ── */
.souk-hero {
    background-color: var(--blue);
    color: #fff;
}
.souk-hero .ev-badge {
    background-color: var(--yellow);
    color: var(--blue);
}
.souk-hero h1 {
    color: #fff !important;
}
.souk-hero h1::after {
    background-color: var(--yellow);
}
.souk-hero .ev-breadcrumb,
.souk-hero .ev-breadcrumb a {
    color: rgba(255,255,255,0.8);
}
.souk-hero .ev-breadcrumb a:hover {
    color: var(--yellow);
}
.souk-hero + .ev-brand-separator .ev-logo-salon-container {
    border-color: var(--yellow);
}

/* ==========================================================================
   PAGE ÉVÉNEMENT : SALON DE L'EMPLOI (Palette extraite du logo)
   ========================================================================== */

:root {
    --esalon-black: #0A0A0A;
    --esalon-gold: #F2AE51;
    --esalon-gold-dark: #E89C34;
    --esalon-cream: #F4D2A0;
}

/* --- 1. HERO --- */
.esalon-hero {
    background-color: var(--esalon-black);
    border-bottom: 1px solid var(--esalon-gold-dark);
}

.esalon-hero .ev-badge {
    background-color: var(--esalon-gold) !important;
    color: var(--esalon-black) !important;
}

.esalon-hero h1 {
    color: #ffffff !important;
}

.esalon-hero h1::after {
    background-color: var(--esalon-gold) !important;
}

.esalon-hero .ev-breadcrumb,
.esalon-hero .ev-breadcrumb a {
    color: var(--esalon-cream) !important;
}

.esalon-hero .ev-breadcrumb a:hover {
    color: var(--esalon-gold) !important;
}

.esalon-hero + .ev-brand-separator .ev-logo-salon-container {
    border-color: var(--esalon-gold) !important;
}

/* ── Lightbox – bigger images ── */
.lb-outerContainer {
    max-width: 95vw !important;
}
.lb-outerContainer {
    max-width: 95vw !important;
    max-height: 90vh !important;
}
.lb-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    min-width: 700px !important;
    min-height: 500px !important;
    border: none !important;
    border-radius: 6px !important;
}
.lb-dataContainer {
    max-width: 95vw !important;
}
.lb-nav a {
    outline: none;
}
/* ==========================================================================
   LOT DE MODIFICATIONS — OCTOBRE 2026
   ========================================================================== */

/* --- Accueil : le bouton du bandeau descend aux programmes, sous le header fixe --- */
#programmes {
    scroll-margin-top: 110px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* --- Qui sommes-nous : Mot des fondateurs, deux portraits à égalité --- */
.founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 0 5%;
    box-sizing: content-box;
}

.founders-grid-single {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

.founder-card {
    position: relative;
    margin: 0;
    height: 520px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bg-light);
}

.founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

.founder-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    background-color: var(--white);
    padding: 20px 26px;
    border-radius: 4px;
    border-left: 5px solid var(--blue);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.founder-caption .eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-light);
}

.founder-caption h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue);
}

.message-content .final-conclusion {
    font-weight: 700;
    color: var(--blue);
}

.signature-block span {
    font-style: italic;
}

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

    .founder-card {
        height: 440px;
    }

    .founder-caption {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 16px 20px;
    }
}

/* --- Équipe : Bureau directif, icône e-mail --- */
.team-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.team-bureau-section {
    background-color: var(--white);
    padding: 80px 5% 40px;
}

.team-bureau-section .faq-section-title {
    margin-bottom: 50px;
}

.m-row-bureau {
    flex-wrap: wrap;
}

.m-info-box:has(.m-mail) {
    padding-right: 52px;
}

.m-mail {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef3fa;
    color: var(--blue);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.m-mail:hover,
.m-mail:focus-visible {
    background-color: var(--blue);
    color: var(--white);
}

/* --- Pop-up d'information (toutes les pages) : discret, non bloquant --- */
.esm-popup {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    gap: 14px;
    width: min(380px, calc(100vw - 32px));
    padding: 20px 22px 18px 18px;
    background-color: var(--white);
    border-radius: 6px;
    border-top: 4px solid var(--yellow);
    box-shadow: 0 18px 45px rgba(0, 30, 70, 0.18);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.esm-popup[hidden] {
    display: none;
}

.esm-popup.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.esm-popup-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef3fa;
    color: var(--blue);
    font-size: 1.05rem;
}

.esm-popup-body {
    min-width: 0;
}

.esm-popup-titre {
    margin: 2px 24px 8px 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--blue);
}

.esm-popup-texte {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-dark);
}

.esm-popup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.esm-popup-btn {
    padding: 9px 18px;
    border: none;
    border-radius: 3px;
    background-color: var(--blue);
    color: var(--white);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.esm-popup-btn:hover,
.esm-popup-btn:focus-visible {
    background-color: #003070;
}

.esm-popup-lien {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.esm-popup-lien:hover {
    text-decoration: underline;
}

.esm-popup-lien i {
    font-size: 0.7rem;
    margin-left: 3px;
}

.esm-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.esm-popup-close:hover,
.esm-popup-close:focus-visible {
    background-color: var(--bg-light);
    color: var(--blue);
}

@media (max-width: 600px) {
    .esm-popup {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 14px 16px 14px;
    }

    .esm-popup-icon {
        display: none;
    }

    .esm-popup-titre {
        font-size: 0.88rem;
        margin-bottom: 6px;
    }

    .esm-popup-texte {
        font-size: 0.78rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .esm-popup-btn {
        padding: 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esm-popup {
        transition: none;
    }
}

/* --- Qui sommes-nous : « Notre impact en chiffres » centré --- */
.about-impact {
    text-align: center;
}

.about-impact .section-title-red::after {
    margin-left: auto;
    margin-right: auto;
}

.about-impact .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.about-impact .impact-container-apropos {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Partenaires : étoile du Maroc dans le filtre --- */
.esm-etoile-maroc {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}

/* --- Histoire : frise sur mobile ---
   Centrée sur la ligne (à 20 px du bord), l'étiquette n'avait que la moitié
   de sa largeur de place : « L'INTERFACE », « TERRITOIRE »… sortaient de
   l'écran. Sur mobile, l'étiquette devient un onglet posé sur sa carte et un
   point marque l'étape sur la ligne. */
@media (max-width: 768px) {
    .timeline-block {
        padding-left: 44px;
    }

    .timeline-block::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 12px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #003399;
        box-shadow: 0 0 0 4px #ffffff;
        z-index: 2;
    }

    .timeline-block:first-child::before {
        background-color: #e0ab00;
    }

    .timeline-date {
        position: relative;
        left: auto;
        transform: none;
        align-self: flex-start;
        min-width: 0;
        max-width: 100%;
        height: 32px;
        padding: 0 14px;
        border-radius: 4px 4px 0 0;
        box-shadow: none;
    }

    .timeline-content {
        border-top-left-radius: 0;
    }
}

/* ==========================================================================
   TITRES DE SECTION DES PAGES : UNE SEULE TAILLE (octobre 2026)
   Le site d'origine mélangeait 2rem, 2.1rem, 2.2rem et 2.5rem, en 700 ou 800,
   et plusieurs titres n'étaient pas réduits sur mobile. Même échelle que
   l'accueil (index.css) : 2.5rem, 1.8rem sous 768 px, 1.6rem sous 420 px.
   Le titre du formulaire de contact suit la même taille, pour équilibrer les
   deux colonnes. Hors champ : fiches projet et événement (design propre à
   chacune), titres de groupe des événements, modales, et l'intro E-learning,
   une phrase plutôt qu'un titre, gardée à sa taille d'origine.
   ========================================================================== */
body.page:not(.home) :is(
    .essence-content > h2,
    .faq-section-title > h2,
    .vision-intro-box > h2,
    h2.section-title-red,
    .pt-cta-inner > h2,
    .intro-content > h2,
    .section-header > h2,
    .cta-container > h2,
    h2.el-stats-title,
    h2.el-modules-title,
    .el-pitch-text > h2,
    h2.el-testimonials-title,
    .el-cta-inner > h2,
    h2.cv-intro-title,
    h2.cv-section-title,
    h2.cv-impact-title,
    .contact-info-col > h2,
    .contact-form-col > h3
) {
    font-size: 2.5rem;
    font-weight: 800;
}

@media (max-width: 768px) {
    body.page:not(.home) :is(
        .essence-content > h2, .faq-section-title > h2, .vision-intro-box > h2, h2.section-title-red,
        .pt-cta-inner > h2, .intro-content > h2, .section-header > h2, .cta-container > h2,
        h2.el-stats-title, h2.el-modules-title, .el-pitch-text > h2,
        h2.el-testimonials-title, .el-cta-inner > h2, h2.cv-intro-title, h2.cv-section-title,
        h2.cv-impact-title, .contact-info-col > h2, .contact-form-col > h3
    ) {
        font-size: 1.8rem;
    }
}

@media (max-width: 420px) {
    body.page:not(.home) :is(
        .essence-content > h2, .faq-section-title > h2, .vision-intro-box > h2, h2.section-title-red,
        .pt-cta-inner > h2, .intro-content > h2, .section-header > h2, .cta-container > h2,
        h2.el-stats-title, h2.el-modules-title, .el-pitch-text > h2,
        h2.el-testimonials-title, .el-cta-inner > h2, h2.cv-intro-title, h2.cv-section-title,
        h2.cv-impact-title, .contact-info-col > h2, .contact-form-col > h3
    ) {
        font-size: 1.6rem;
    }
}