.author-box .inner .content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author-box .inner .content p{
    width: 80%;
}

.section-title.section-left p{
    color: #000;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.95px;
}


/* 1. Le conteneur principal reste inchangé */
.hero-banner.hero-style-2 {
    position: relative;
    background: transparent; 
}

/* 2. Le média (Vidéo ou Image) */
.hero-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    z-index: -2; /* ⚠️ IMPORTANT : On le recule d'un cran (passe de -1 à -2) */
    
    /* Le masque SVG pour la vidéo */
    -webkit-mask-image: url(../images/bg/bg-image-1.svg);
    mask-image: url(../images/bg/bg-image-1.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 3. Le dégradé superposé (Overlay) via ::before */
.hero-banner.hero-style-2::before {
    content: '';
    display: block; /* On réactive l'élément */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🔥 TON DÉGRADÉ LINÉAIRE ICI 🔥 */
    /* Exemple : dégradé noir semi-transparent de haut en bas. À toi de modifier les couleurs (rgba) et l'angle. */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);
    
    z-index: -1; /* Se place au-dessus de la vidéo (-2) mais sous le texte (1) */
    pointer-events: none; /* Empêche le filtre de bloquer les clics de la souris */

    /* On applique EXACTEMENT le même masque SVG pour que le dégradé ne déborde pas des vagues */
    -webkit-mask-image: url(../images/bg/bg-image-1.svg);
    mask-image: url(../images/bg/bg-image-1.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 4. Le conteneur du texte reste bien au premier plan */
.hero-banner.hero-style-2 .relative-content {
    position: relative;
    z-index: 1; 
}

.alignement-header{
    display: flex;
    flex-direction: column;
}

.background-dark{
    background: #111212;
}

.edu-footer-widget .logo img.logo-light {
    width: 150px; /* Ajuste cette valeur selon tes besoins */
    height: auto;
    display: block; /* Évite les comportements étranges en ligne */
}

/* Fix pour forcer l'affichage du logo SVG dans le header et le menu mobile */
.header-brand .logo img,
.header-top .logo img,
.site-logo img {
    width: 160px; /* 👈 Modifie cette valeur selon la taille voulue pour ton logo */
    height: auto;
    display: block;
}

/* --- LAYOUT GLOBAL DU HEADER --- */
.custom-header-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Lignes séparatrices verticales */
.header-brand {
    padding-right: 30px;
    border-right: 1px solid #e5e5e5;
}

.header-services-block {
    padding-right: 30px;
    border-right: 1px solid #e5e5e5;
}

/* --- ENCART RÉSEAUX SOCIAUX --- */
.social-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 50px; /* Forme de pilule */
    background-color: #ffffff;
    margin-right: 20px;
}

.social-pill .social-text {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.social-pill a i {
    font-size: 18px;
    transition: 0.3s;
}

.social-pill .color-linkd { color: #0077b5; }
.social-pill .color-ig { color: #e1306c; }

.social-pill a:hover {
    opacity: 0.7;
}

/* --- BOUTONS --- */
.btn-purple {
    background-color: #63538c !important; /* Couleur violette de ta maquette */
    color: #ffffff !important;
    margin-right: 15px;
    border-radius: 5px;
}

.btn-orange {
    background-color: #f68b20 !important; /* Couleur orange de ta maquette */
    color: #ffffff !important;
    border-radius: 5px;
}

.btn-purple:hover, .btn-orange:hover {
    filter: brightness(1.1);
}

/* --- MEGA MENU "SERVICES" --- */
.custom-mega-menu-item {
    position: relative;
}

.custom-mega-menu-content {
    position: absolute;
    top: 150%; /* Descend un peu le menu */
    left: 0;
    width: 600px; /* Largeur de la boîte */
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 99;
}

/* Affichage au survol */
.custom-mega-menu-item:hover .custom-mega-menu-content {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.mega-menu-links {
    display: flex;
    gap: 40px;
}

.mega-menu-links .link-column {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-links .link-column li {
    margin-bottom: 15px;
}

.mega-menu-links .link-column li a {
    color: #111;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
}

.mega-menu-links .link-column li a:hover {
    color: #f68b20; /* Devient orange au survol */
}

.mega-menu-image {
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-menu-image img {
    width: 100%;
    height: auto;
}

/* --- LE MEGA MENU 100% DYNAMIQUE --- */
.mega-menu-services {
    position: relative;
}

/* On modifie le conteneur du sous-menu de "Services" */
.mega-menu-services > .submenu {
    width: 650px !important; /* Largeur totale de la boîte */
    padding: 30px !important;
    padding-right: 250px !important; /* ⚠️ CRUCIAL : Laisse un trou vide à droite pour laisser apparaître l'image ACF */
    
    /* On sépare la liste des liens en 2 colonnes ! */
    column-count: 2;
    column-gap: 40px;
    
    /* Paramètres de l'image de fond (injectée via ACF) */
    background-repeat: no-repeat !important;
    background-position: right 30px center !important; /* Alignée à droite, centrée verticalement */
    background-size: 200px auto !important; /* Taille de l'image */
}

/* Style des liens à l'intérieur */
.mega-menu-services > .submenu li {
    break-inside: avoid; /* Empêche un mot d'être coupé entre la colonne 1 et la colonne 2 */
    margin-bottom: 15px;
    display: block;
}

.mega-menu-services > .submenu li a {
    font-weight: 700;
    color: #111;
    font-size: 16px;
    transition: 0.3s;
}

.mega-menu-services > .submenu li a:hover {
    color: #f68b20; /* Devient orange au survol */
}

/* Barre verticale de séparation */
.header-services-block {
    padding-right: 30px;
    border-right: 1px solid #e5e5e5;
    margin-right: 20px; /* Espace avant "Accueil" */
}

/* Le Mega Menu Dynamique */
.header-services-block .mainmenu > li {
    position: relative;
}

.header-services-block .mainmenu > li > .submenu {
    width: 650px !important; 
    padding: 30px !important;
    padding-right: 250px !important; /* Trou pour l'image ACF */
    
    /* 2 colonnes */
    column-count: 2;
    column-gap: 40px;
    
    background-repeat: no-repeat !important;
    background-position: right 30px center !important; 
    background-size: 200px auto !important; 
}

.header-services-block .mainmenu > li > .submenu li {
    break-inside: avoid;
    margin-bottom: 15px;
    display: block;
}

.header-services-block .mainmenu > li > .submenu li a {
    font-weight: 700;
    color: #111;
    font-size: 16px;
    transition: 0.3s;
}

.header-services-block .mainmenu > li > .submenu li a:hover {
    color: #f68b20;
}

/* --- LE MEGA MENU "SERVICES" (Style Maquette) --- */

/* 1. La boîte principale du sous-menu */
/* --- LE MEGA MENU "SERVICES" (Ajustements millimétrés) --- */

.header-services-block .mainmenu > li > .submenu {
    /* 1. Dimensions exactes de ta maquette */
    width: 838px !important; 
    min-height: 270px !important; /* min-height évite que le texte déborde si on zoome */
    
    /* 2. Alignement avec la ligne de séparation de gauche */
    /* La boîte "recule" vers la gauche. Ajuste le -30px (ex: -20px ou -40px) au pixel près selon le padding de ton thème */
    left: -30px !important; 
    
    /* 3. Espacements intérieurs */
    padding: 40px 50px !important; 
    padding-right: 350px !important; /* Maintien de l'espace à droite pour l'image */
    
    /* Coins arrondis en bas et ombre */
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    
    /* Les colonnes et la ligne séparatrice beige */
    column-count: 2;
    column-gap: 60px; 
    column-rule: 2px solid #fbe7d6 !important; 
    
    /* L'image de fond */
    background-repeat: no-repeat !important;
    background-position: right 10px center !important; 
    background-size: auto 220px !important; /* Ajusté pour bien rentrer dans les 270px de hauteur */
}

/* 4. L'espacement des liens */
.header-services-block .mainmenu > li > .submenu li {
    break-inside: avoid; /* Empêche les ruptures de colonnes */
    margin-bottom: 25px !important; /* Plus d'espace entre chaque mot */
    display: block;
}

/* 5. La typographie (Texte noir et très gras) */
.header-services-block .mainmenu > li > .submenu li a {
    font-weight: 800 !important; /* Texte en gras comme sur la maquette */
    color: #000000 !important; /* Noir pur */
    font-size: 16px !important;
    transition: color 0.3s ease;
}

/* 6. Effet au survol des liens (Orange) */
.header-services-block .mainmenu > li > .submenu li a:hover {
    color: #f68b20 !important; 
}

.gallery-content {
    max-width: 1320px;
}

/* Centrage du bouton dans la carte */
.bouton-enjeu-simple {
    margin-top: 30px;
    text-align: center;
}

/* Structure de base du petit bouton flèche */
.bouton-enjeu-simple a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px; /* Largeur de la petite boîte */
    height: 35px; /* Hauteur */
    border-radius: 4px; /* Bords très légèrement arrondis */
    text-decoration: none;
    transition: all 0.3s ease;
}

.bouton-enjeu-simple a i {
    font-size: 14px;
    font-weight: bold;
}

/* --- BOUTON POUR LES CARTES BEIGES --- */
.color-extra05-style .bouton-enjeu-simple a {
    background-color: #FCECD9; /* Beige légèrement plus foncé que la carte */
    color: #F68B20; /* Flèche orange */
}

/* Effet au survol (Optionnel : devient tout orange) */
.color-extra05-style .bouton-enjeu-simple a:hover {
    background-color: #F68B20;
    color: #FFFFFF;
}

/* --- BOUTON POUR LES CARTES VIOLETTES --- */
.color-primary-style .bouton-enjeu-simple a {
    background-color: #E7E5F0; /* Violet très clair */
    color: #63538C; /* Flèche violette foncé */
}

/* Effet au survol (Optionnel : devient tout violet) */
.color-primary-style .bouton-enjeu-simple a:hover {
    background-color: #63538C;
    color: #FFFFFF;
}

.about-content .features-list li.checkmark:before{
    top: -5px;
}