/* ==========================================================
   GOLDEN GROUP CONSULTING SARL
   STYLE.CSS FINAL CLEAN VERSION
   PARTIE 1/4
========================================================== */


/* ==========================================================
   1. VARIABLES GLOBALES
========================================================== */

:root {


    /* Couleurs Golden Group */

    --primary:#12355B;
    --primary-light:#1D4E89;
    --primary-dark:#071A33;


    --gold:#D4AF37;
    --gold-light:#E8C766;
    --gold-dark:#B99120;


    /* Couleurs générales */

    --white:#FFFFFF;
    --black:#000000;

    --gray:#6B7280;
    --gray-dark:#374151;
    --light:#F7F8FB;


    /* Ombres */

    --shadow:
    0 10px 30px rgba(0,0,0,.08);


    --shadow-lg:
    0 20px 50px rgba(0,0,0,.15);



    /* Design */

    --radius:25px;

    --transition:.3s ease;


}



/* ==========================================================
   2. RESET GLOBAL
========================================================== */


*,
*::before,
*::after {


    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {


    scroll-behavior:smooth;

    width:100%;

}



body {


    min-height:100vh;

    width:100%;


    font-family:
    "Montserrat",
    "Segoe UI",
    Arial,
    sans-serif;


    color:var(--gray-dark);


    background:var(--white);


    line-height:1.6;


    overflow-x:hidden;

}



body.menu-open {


    overflow:hidden;

}




img {


    max-width:100%;

    height:auto;

    display:block;

}



a {


    text-decoration:none;

}



ul,
ol {


    list-style:none;

    padding:0;

    margin:0;

}



button,
input,
textarea,
select {


    font-family:inherit;

}



button {


    cursor:pointer;

}



/* ==========================================================
   3. CONTENEUR GOLDEN
   (évite conflit Bootstrap)
========================================================== */


.gg-container {


    width:100%;

    max-width:1200px;

    margin:auto;

    padding-left:15px;

    padding-right:15px;

}




/* ==========================================================
   4. STRUCTURE PRINCIPALE
========================================================== */


.gg-main {


    width:100%;


    padding-top:80px;


}



/* ==========================================================
   5. NAVBAR GOLDEN GROUP
========================================================== */


.gg-navbar {


    position:fixed;


    top:0;

    left:0;


    width:100%;


    height:80px;


    background:rgba(255,255,255,.98);


    display:flex;


    align-items:center;


    z-index:9999;


    box-shadow:

    0 5px 25px rgba(0,0,0,.12);


    transition:var(--transition);

}





.gg-navbar-container {


    width:100%;


    max-width:1200px;


    height:100%;


    margin:auto;


    padding:0 15px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:25px;

}





/* ==========================================================
   LOGO
========================================================== */


.gg-navbar-brand {


    display:flex;


    align-items:center;


}



.gg-logo {


    width:170px;


    height:auto;


    object-fit:contain;


    transition:.3s;

}



.gg-logo:hover {


    transform:scale(1.05);

}





/* ==========================================================
   MENU DESKTOP
========================================================== */


.gg-desktop-menu {


    display:flex;


    align-items:center;


    justify-content:flex-end;


    gap:25px;


    margin-left:auto;


}





.gg-nav-link {


    position:relative;


    display:flex;


    align-items:center;


    gap:8px;


    padding:10px 0;


    border:none;


    background:none;


    color:var(--primary)!important;


    font-size:15px;


    font-weight:700;


    white-space:nowrap;


    transition:var(--transition);


}





.gg-nav-link::after {


    content:"";


    position:absolute;


    left:0;


    bottom:0;


    height:3px;


    width:0;


    background:var(--gold);


    transition:.3s;


}



.gg-nav-link:hover {


    color:var(--gold)!important;


}



.gg-nav-link:hover::after {


    width:100%;


}




/* ==========================================================
   DROPDOWN RH
========================================================== */


.gg-dropdown {


    position:relative;


    display:flex;


    align-items:center;


}



.gg-dropdown-menu {


    position:absolute;


    top:45px;


    right:0;


    width:280px;


    padding:12px;


    background:white;


    border-radius:15px;


    box-shadow:var(--shadow-lg);


    opacity:0;


    visibility:hidden;


    transform:translateY(15px);


    transition:.3s;


    z-index:10000;


}



.gg-dropdown:hover .gg-dropdown-menu {


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}



.gg-dropdown-menu a {


    display:flex;


    align-items:center;


    gap:12px;


    padding:12px;


    color:var(--primary)!important;


    font-weight:600;


    border-radius:10px;


}



.gg-dropdown-menu a:hover {


    background:var(--gold);


}



/* ==========================================================
   BOUTON CONTACT NAVBAR
========================================================== */


.gg-contact-button {


    display:flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    padding:12px 28px;


    background:var(--gold);


    color:var(--primary)!important;


    border-radius:50px;


    font-weight:800;


    transition:var(--transition);


}



.gg-contact-button:hover {


    background:var(--primary);


    color:white!important;


    transform:translateY(-2px);


}
/* ==========================================================
   GOLDEN GROUP CONSULTING SARL
   STYLE.CSS FINAL CLEAN VERSION
   PARTIE 2/4
========================================================== */


/* ==========================================================
   6. BOUTON MOBILE
========================================================== */


.gg-mobile-button {


    display:none;


    width:45px;


    height:45px;


    border:none;


    border-radius:10px;


    background:var(--primary);


    color:white;


    align-items:center;


    justify-content:center;


    font-size:28px;


}





.gg-mobile-button:hover {


    background:var(--gold);


    color:var(--primary);


}




/* ==========================================================
   6. BOUTON MOBILE
========================================================== */


.gg-mobile-button {

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:white;

    align-items:center;

    justify-content:center;

    font-size:26px;

    transition:.3s;

}


.gg-mobile-button:hover {

    background:var(--gold);

    color:var(--primary);

}



/* ==========================================================
   7. MENU MOBILE PREMIUM
========================================================== */


.gg-mobile-menu {


    position:fixed;


    top:0;


    right:0;


    width:330px;


    max-width:90vw;


    height:100vh;


    background:white;


    z-index:10001;


    overflow-y:auto;


    transform:translateX(100%);


    visibility:hidden;


    transition:.45s cubic-bezier(.4,0,.2,1);


    box-shadow:-15px 0 50px rgba(0,0,0,.20);


}



.gg-mobile-menu.active {


    transform:translateX(0);


    visibility:visible;


}





/* ==========================
   HEADER MOBILE
========================== */


.gg-mobile-header {


    height:90px;


    padding:20px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    background:


    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );


}




.gg-mobile-header img {


    width:140px;


    filter:brightness(0) invert(1);


}





.gg-mobile-close {


    width:42px;


    height:42px;


    border:none;


    border-radius:50%;


    background:white;


    color:var(--primary);


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:22px;


    transition:.3s;


}




.gg-mobile-close:hover {


    background:var(--gold);


    transform:rotate(90deg);


}





/* ==========================
   CONTENU MENU
========================== */


.gg-mobile-content {


    display:flex;


    flex-direction:column;


    padding:25px 20px;


    gap:10px;


}




/* Liens principaux */


.gg-mobile-link {


    display:flex;


    align-items:center;


    gap:15px;


    padding:15px 18px;


    background:#f8f9fc;


    border-radius:15px;


    color:var(--primary)!important;


    font-size:16px;


    font-weight:700;


    transition:.3s;


    border-left:4px solid transparent;


}




.gg-mobile-link i {


    width:25px;


    color:var(--gold);


    font-size:19px;


}





.gg-mobile-link:hover {


    background:#fff9e8;


    border-left-color:var(--gold);


    transform:translateX(5px);


    color:var(--gold)!important;


}





/* ==========================
   TITRE ESPACE RH
========================== */


.gg-mobile-section-title {


    margin-top:20px;


    padding:12px 15px;


    background:var(--primary);


    color:var(--gold);


    border-radius:12px;


    font-size:15px;


    font-weight:900;


    text-transform:uppercase;


}





/* ==========================
   SOUS MENU RH
========================== */


.gg-mobile-link.rh {


    margin-left:10px;


    background:#ffffff;


    border:1px solid #eee;


    font-size:15px;


}





/* ==========================
   CONTACT MOBILE
========================== */


.gg-mobile-contact {


    margin-top:25px;


    padding:15px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    background:var(--gold);


    color:var(--primary)!important;


    border-radius:50px;


    font-weight:900;


    box-shadow:


    0 10px 25px rgba(212,175,55,.35);


    transition:.3s;


}




.gg-mobile-contact:hover {


    background:var(--primary);


    color:white!important;


    transform:translateY(-3px);


}





/* ==========================
   OVERLAY
========================== */


.gg-mobile-overlay {


    position:fixed;


    inset:0;


    background:rgba(7,26,51,.65);


    backdrop-filter:blur(3px);


    z-index:10000;


    opacity:0;


    visibility:hidden;


    transition:.3s;


}




.gg-mobile-overlay.active {


    opacity:1;


    visibility:visible;


}




/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */


@media(max-width:991px){


    .gg-desktop-menu {


        display:none!important;


    }



    .gg-mobile-button {


        display:flex;


    }


}




@media(max-width:575px){


    .gg-mobile-menu {


        width:300px;


    }



    .gg-mobile-header {


        height:80px;


    }



    .gg-mobile-link {


        font-size:15px;


    }


}


/* ==========================================================
   8. BOUTONS GENERAUX
========================================================== */


.btn-golden {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    padding:13px 30px;


    background:var(--gold);


    color:var(--primary)!important;


    border:2px solid var(--gold);


    border-radius:50px;


    font-weight:800;


    transition:var(--transition);


}




.btn-golden:hover {


    background:var(--primary);


    border-color:var(--primary);


    color:white!important;


    transform:translateY(-3px);


}




.btn-primary-golden {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    padding:13px 30px;


    background:var(--primary);


    color:white!important;


    border:2px solid var(--primary);


    border-radius:50px;


    font-weight:800;


    transition:var(--transition);


}




.btn-primary-golden:hover {


    background:var(--gold);


    color:var(--primary)!important;


    border-color:var(--gold);


}







/* ==========================================================
   9. HERO ACCUEIL
========================================================== */


.hero-home {


    position:relative;


    min-height:calc(100vh - 80px);


    display:flex;


    align-items:center;


    background:


    linear-gradient(

        120deg,

        rgba(7,26,51,.95),

        rgba(29,78,137,.75)

    ),


    url("../uploads/Pub_golden.jpg.jpeg");


    background-size:cover;


    background-position:center;


}





.hero-home .gg-container {


    position:relative;


    z-index:2;


}





.hero-home h1 {


    color:white;


    font-size:clamp(38px,5vw,60px);


    font-weight:900;


    line-height:1.15;


    margin-bottom:25px;


}




.hero-home h1 span {


    color:var(--gold);


}





.hero-home p {


    max-width:700px;


    color:#eeeeee;


    font-size:18px;


    line-height:1.8;


}






.gold-badge {


    display:inline-flex;


    padding:9px 22px;


    margin-bottom:20px;


    background:var(--gold);


    color:var(--primary);


    border-radius:50px;


    font-size:13px;


    font-weight:900;


}







.hero-photo {


    width:90%;


    margin-left:auto;


    border-radius:35px;


    box-shadow:


    0 30px 60px rgba(0,0,0,.35);


    animation:floating 5s infinite ease-in-out;


}







/* ==========================================================
   10. HERO PAGES INTERNES
========================================================== */


.about-hero,
.services-hero,
.recruitment-hero,
.contact-hero,
.formation-hero {


    min-height:60vh;


    display:flex;


    align-items:center;


    position:relative;


    background-size:cover;


    background-position:center;


}




.about-hero,
.services-hero,
.recruitment-hero,
.contact-hero,
.formation-hero {


    background:


    linear-gradient(

        120deg,

        rgba(7,26,51,.95),

        rgba(18,53,91,.80)

    ),


    url("../uploads/pub.jpg");


}




.about-hero h1,
.services-hero h1,
.recruitment-hero h1,
.contact-hero h1,
.formation-hero h1 {


    color:white;


    font-size:clamp(40px,6vw,65px);


    font-weight:900;


}







/* ==========================================================
   11. SECTIONS GENERALES
========================================================== */


.section-padding {


    padding:100px 0;


}




.section-title {


    color:var(--primary);


    font-size:42px;


    font-weight:900;


    line-height:1.2;


    margin-bottom:20px;


}





.section-tag {


    display:inline-block;


    color:var(--gold-dark);


    font-size:13px;


    font-weight:900;


    letter-spacing:2px;


    text-transform:uppercase;


}




.section-text {


    color:var(--gray);


    font-size:17px;


    line-height:1.8;


}
/* ==========================================================
   GOLDEN GROUP CONSULTING SARL
   STYLE.CSS FINAL CLEAN VERSION
   PARTIE 3/4
========================================================== */



/* ==========================================================
   12. SERVICES GOLDEN GROUP
========================================================== */


.services-section {


    padding:100px 0;


    background:var(--light);


}




.expert-card {


    height:100%;


    padding:40px 30px;


    background:white;


    border-radius:30px;


    text-align:center;


    box-shadow:var(--shadow);


    transition:var(--transition);


}



.expert-card:hover {


    transform:translateY(-10px);


    box-shadow:var(--shadow-lg);


}




.expert-card i {


    width:90px;


    height:90px;


    margin:0 auto 25px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:var(--primary);


    color:var(--gold);


    border-radius:50%;


    font-size:40px;


}



.expert-card h3,
.expert-card h4 {


    color:var(--primary);


    font-weight:900;


    margin-bottom:15px;


}




.expert-card p {


    color:var(--gray);


    line-height:1.7;


}






/* ==========================================================
   13. CARTES PREMIUM
========================================================== */


.card-premium,
.premium-card {


    height:100%;


    padding:35px 30px;


    background:white;


    border-radius:var(--radius);


    box-shadow:var(--shadow);


    transition:var(--transition);


}



.card-premium:hover,
.premium-card:hover {


    transform:translateY(-10px);


    box-shadow:var(--shadow-lg);


}




.premium-card {


    text-align:center;


}




.icon-box {


    width:90px;


    height:90px;


    margin:0 auto 20px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:var(--primary);


    color:var(--gold);


    border-radius:50%;


    font-size:35px;


}






/* ==========================================================
   14. FORMATIONS
========================================================== */


.formations-section {


    padding:100px 0;


    background:white;


}




.formation-card {


    height:100%;


    overflow:hidden;


    background:white;


    border-radius:25px;


    box-shadow:var(--shadow);


    transition:var(--transition);


}




.formation-card:hover {


    transform:translateY(-10px);


    box-shadow:var(--shadow-lg);


}




.formation-image {


    height:230px;


    overflow:hidden;


}




.formation-image img {


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}




.formation-card:hover .formation-image img {


    transform:scale(1.08);


}




.formation-body {


    padding:30px;


}




.formation-body h3 {


    color:var(--primary);


    font-weight:900;


}



.price-box {


    color:var(--gold-dark);


    font-size:28px;


    font-weight:900;


}




.formation-body p {


    color:var(--gray);


}






/* ==========================================================
   15. ABOUT IMAGE
========================================================== */


.about-image-box {


    position:relative;


}




.about-image-box::before {


    content:"";


    position:absolute;


    top:20px;


    left:-20px;


    width:100%;


    height:100%;


    background:var(--gold);


    border-radius:30px;


}




.about-image-box img {


    position:relative;


    z-index:2;


    border-radius:30px;


    box-shadow:var(--shadow-lg);


}






/* ==========================================================
   16. CHIFFRES CLES
========================================================== */


.numbers-section {


    padding:90px 0;


    background:


    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );


}





.number-box {


    height:100%;


    padding:35px;


    text-align:center;


    color:white;


    background:rgba(255,255,255,.08);


    border-radius:25px;


    backdrop-filter:blur(10px);


    transition:.3s;


}




.number-box:hover {


    transform:translateY(-8px);


}





.number-box h2 {


    color:var(--gold);


    font-size:50px;


    font-weight:900;


}






/* ==========================================================
   17. RECRUTEMENT
========================================================== */


.recruitment-section {


    padding:100px 0;


    background:var(--light);


}




.offer-card {


    height:100%;


    padding:35px;


    background:white;


    border-radius:25px;


    border-top:5px solid var(--gold);


    box-shadow:var(--shadow);


    transition:.3s;


}




.offer-card:hover {


    transform:translateY(-10px);


    box-shadow:var(--shadow-lg);


}




.offer-card h3 {


    color:var(--primary);


    font-weight:900;


}





.offer-icon {


    color:var(--gold);


    font-size:45px;


    margin-bottom:20px;


}




.cv-section {


    padding:100px 0;


    background:#F7F8FB;


}





.cv-card {


    padding:50px;


    background:white;


    border-radius:30px;


    box-shadow:var(--shadow-lg);


}






/* ==========================================================
   18. CONTACT
========================================================== */


.contact-section {


    padding:100px 0;


}





.contact-form {


    padding:50px;


    background:white;


    border-radius:30px;


    box-shadow:var(--shadow);


}





.form-control,
.form-select {


    min-height:50px;


    border-radius:12px;


    border:1px solid #ddd;


}





.form-control:focus,
.form-select:focus {


    border-color:var(--gold);


    box-shadow:

    0 0 0 .2rem rgba(212,175,55,.20);


}





textarea.form-control {


    min-height:140px;


}




.info-item {


    display:flex;


    align-items:center;


    gap:20px;


    margin-bottom:25px;


}





.info-item i {


    width:55px;


    height:55px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:var(--primary);


    color:var(--gold);


    border-radius:50%;


}
/* =====================================================
   GOLDEN GROUP CONSULTING SARL
   STYLE.CSS FINAL NETTOYÉ
   PARTIE 4/4
===================================================== */


/* =====================================================
   FOOTER GOLDEN GROUP
===================================================== */

.footer {

    padding:80px 0 0;

    background:var(--primary-dark);

    color:white;

}


.footer-logo {

    width:120px;

    margin-bottom:20px;

}



.footer h4,
.footer h5 {

    color:var(--gold);

    font-weight:900;

    margin-bottom:20px;

}



.footer p {

    color:#ddd;

    line-height:1.8;

}



.footer ul li {

    margin-bottom:10px;

}



.footer a {

    color:#ddd;

    text-decoration:none;

    transition:var(--transition);

}



.footer a:hover {

    color:var(--gold);

}



.footer i {

    color:var(--gold);

    margin-right:8px;

}



/* FOOTER BOTTOM */

.footer-bottom {

    margin-top:50px;

    padding:20px 0;

    background:#050F20;

    color:#ccc;

    font-size:14px;

}



.footer-bottom strong {

    color:var(--gold);

}





/* =====================================================
   PARTENAIRES
===================================================== */


.partners-section {

    padding:100px 0;

    background:#F8FAFC;

}



.partner-card {

    height:170px;

    padding:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}



.partner-card:hover {

    transform:translateY(-8px);

}



.partner-logo {

    max-width:160px;

    max-height:90px;

    object-fit:contain;

}





/* =====================================================
   TEMOIGNAGES
===================================================== */


.testimonial-card {

    height:100%;

    padding:35px;

    background:white;

    border-radius:25px;

    box-shadow:var(--shadow);

}



.stars {

    color:var(--gold);

    font-size:24px;

}





/* =====================================================
   DASHBOARD ADMIN
===================================================== */


.sidebar {

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100vh;

    padding:25px 15px;

    background:

    linear-gradient(

        180deg,

        var(--primary),

        var(--primary-light)

    );

    color:white;

    z-index:1000;

}



.main-content {

    min-height:100vh;

    margin-left:260px;

    padding:30px;

    background:var(--light);

}



.dashboard-card {

    padding:30px;

    height:100%;

    background:white;

    border-radius:20px;

    box-shadow:var(--shadow);

}



.dashboard-card h2 {

    color:var(--gold-dark);

    font-weight:900;

}





/* =====================================================
   TOPBAR
===================================================== */


.topbar {

    padding:10px 0;

    background:var(--primary);

    color:white;

    font-size:14px;

}



.topbar a {

    color:white;

    margin-left:15px;

}



.topbar a:hover {

    color:var(--gold);

}





/* =====================================================
   LOADER
===================================================== */


#loader {

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    z-index:99999;

}



.gold-loader {

    width:70px;

    height:70px;

    border:6px solid #eee;

    border-top-color:var(--gold);

    border-radius:50%;

    animation:rotate 1s linear infinite;

}





/* =====================================================
   BACK TO TOP
===================================================== */


#backTop {

    position:fixed;

    right:25px;

    bottom:25px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:var(--primary);

    z-index:9000;

    box-shadow:var(--shadow);

}



#backTop:hover {

    background:var(--primary);

    color:white;

}





/* =====================================================
   ANIMATIONS
===================================================== */


.fade-in {

    animation:fade .8s ease both;

}



.slide-up {

    animation:slide .8s ease both;

}



@keyframes floating {

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(-15px);

}

}



@keyframes fade {

from{

    opacity:0;

}

to{

    opacity:1;

}

}



@keyframes slide {

from{

    opacity:0;

    transform:translateY(40px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}



@keyframes rotate {

from{

    transform:rotate(0deg);

}

to{

    transform:rotate(360deg);

}

}





/* =====================================================
   CORRECTIONS GENERALES BOOTSTRAP
===================================================== */


.gg-navbar a {

    text-decoration:none!important;

}



.gg-navbar img {

    max-width:100%;

}



section {

    overflow:hidden;

}



table {

    width:100%;

}



input,
textarea,
select {

    max-width:100%;

}





/* =====================================================
   PROTECTION MOBILE
===================================================== */


html,
body {

    max-width:100%;

    overflow-x:hidden;

}



img {

    max-width:100%;

    height:auto;

}





/* =====================================================
   ACCESSIBILITE
===================================================== */


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {


    outline:3px solid rgba(212,175,55,.5);

    outline-offset:3px;

}





/* =====================================================
   RESPONSIVE FINAL
===================================================== */


@media(max-width:991px){


    .sidebar {

        width:80px;

    }



    .main-content {

        margin-left:80px;

    }



}



@media(max-width:575px){


    .sidebar {

        display:none;

    }



    .main-content {

        margin-left:0;

        padding:20px;

    }



    .footer {

        padding-top:60px;

    }



    .footer-bottom {

        text-align:center;

    }



}
/* =====================================================
   CORRECTION TEXTES SUR IMAGES HERO
===================================================== */


/* Tous les textes placés sur les images */

.hero-home,
.about-hero,
.services-hero,
.recruitment-hero,
.contact-hero,
.formation-hero {

    color:white;

}


/* Titres principaux */

.hero-home h1,
.hero-home h2,
.hero-home h3,

.about-hero h1,
.about-hero h2,

.services-hero h1,
.services-hero h2,

.recruitment-hero h1,
.recruitment-hero h2,

.contact-hero h1,
.contact-hero h2,

.formation-hero h1,
.formation-hero h2 {

    color:#ffffff !important;

}




/* Paragraphes sur les images */

.hero-home p,
.about-hero p,
.services-hero p,
.recruitment-hero p,
.contact-hero p,
.formation-hero p {

    color:#ffffff !important;

    opacity:.95;

}




/* Petits textes */

.hero-home span,
.about-hero span,
.services-hero span,
.recruitment-hero span,
.contact-hero span,
.formation-hero span {

    color:white;

}



/* Badge doré */

.gold-badge {

    color:var(--primary)!important;

    background:var(--gold)!important;

}





/* Correction Bootstrap text-dark */

.hero-home .text-dark,
.about-hero .text-dark,
.services-hero .text-dark,
.recruitment-hero .text-dark,
.contact-hero .text-dark,
.formation-hero .text-dark {

    color:white!important;

}




/* Correction liens sur Hero */

.hero-home a,
.about-hero a,
.services-hero a,
.recruitment-hero a,
.contact-hero a,
.formation-hero a {

    color:white;

}



/* Boutons gardent leurs couleurs */

.hero-home .btn-golden,
.about-hero .btn-golden {

    color:var(--primary)!important;

}


.hero-home .btn-primary-golden,
.about-hero .btn-primary-golden {

    color:white!important;

}
/* ==========================================================
   IMAGES DES FORMATIONS
   PUBLIC + ADMIN
========================================================== */

/* Conteneur de l'image */
.formation-image-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 14px;
    background: #f5f5f5;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image */
.formation-image-container img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease;
}

/* Petit effet au survol */
.formation-image-container:hover img {
    transform: scale(1.03);
}


/* ==========================================================
   FORMATIONS - IMAGES
   PUBLIC + ADMIN
========================================================== */


/* ==========================================================
   PUBLIC - CARTES
========================================================== */

.formation-image {
    width: 100%;
    height: 220px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f5;

    border-radius: 14px 14px 0 0;
}


.formation-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .3s ease;
}


.formation-image:hover img {
    transform: scale(1.03);
}


/* ==========================================================
   ADMIN - CARTES
========================================================== */

.formation-admin-image-wrapper {

    width: 100%;

    height: 190px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5f5f5;

}


.formation-admin-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


.formation-admin-card {

    overflow: hidden;

}


/* ==========================================================
   DESCRIPTION ADMIN
========================================================== */

.formation-description {

    min-height: 65px;

}


/* ==========================================================
   PAGE DÉTAIL PUBLIC
========================================================== */

.formation-detail-image-wrapper {

    width: 100%;

    max-width: 600px;

    height: 420px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #f5f5f5;

    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(0,0,0,.08);

}


.formation-detail-image {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 991px) {

    .formation-image {

        height: 210px;

    }


    .formation-admin-image-wrapper {

        height: 190px;

    }


    .formation-detail-image-wrapper {

        height: 350px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .formation-image {

        height: 200px;

    }


    .formation-admin-image-wrapper {

        height: 200px;

    }


    .formation-detail-image-wrapper {

        height: 280px;

        border-radius: 14px;

    }

}


/* ==========================================================
   PETIT MOBILE
========================================================== */

@media (max-width: 480px) {

    .formation-image {

        height: 180px;

    }


    .formation-admin-image-wrapper {

        height: 180px;

    }


    .formation-detail-image-wrapper {

        height: 230px;

    }

}
/* ==========================================================
   IMAGES FORMATIONS - ADMIN
========================================================== */

.formation-admin-card {
    overflow: hidden;
}

/* Zone de l'image */
.formation-admin-image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f5f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image */
.formation-admin-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ==========================================================
   ÉCRAN ORDINATEUR
========================================================== */

@media (min-width: 992px) {

    .formation-admin-image-wrapper {
        height: 170px;
    }

    .formation-admin-image {
        max-height: 170px;
    }

}


/* ==========================================================
   TABLETTE
========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .formation-admin-image-wrapper {
        height: 160px;
    }

}


/* ==========================================================
   TÉLÉPHONE
========================================================== */

@media (max-width: 767px) {

    .formation-admin-image-wrapper {
        height: 190px;
    }

    .formation-admin-image {
        max-height: 190px;
    }

}


/* ==========================================================
   PETITS TÉLÉPHONES
========================================================== */

@media (max-width: 480px) {

    .formation-admin-image-wrapper {
        height: 180px;
    }

    .formation-admin-image {
        max-height: 180px;
    }

}
/* ==========================================================
   BOUTONS FORMATIONS
========================================================== */

/* Conteneur des boutons sur les cartes */
.formation-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    align-items: stretch;
}

/* Tous les boutons des cartes */
.formation-buttons .btn {
    flex: 1;
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 18px;

    border-radius: 8px;

    font-weight: 700;
    font-size: 14px;

    text-decoration: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


/* ==========================================================
   VOIR DÉTAILS
========================================================== */

.formation-buttons .btn-outline-gold {

    background: transparent;

    color: #D4AF37;

    border: 2px solid #D4AF37;

}


.formation-buttons .btn-outline-gold:hover {

    background: #D4AF37;

    color: #ffffff;

    border-color: #D4AF37;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(212, 175, 55, .25);

}


/* ==========================================================
   S'INSCRIRE
========================================================== */

.formation-buttons .btn-golden {

    background: linear-gradient(
        135deg,
        #D4AF37,
        #B99120
    );

    color: #ffffff;

    border: 2px solid #D4AF37;

}


.formation-buttons .btn-golden:hover {

    background: linear-gradient(
        135deg,
        #E8C766,
        #D4AF37
    );

    color: #ffffff;

    border-color: #E8C766;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(212, 175, 55, .30);

}


/* ==========================================================
   PAGE DÉTAIL - BOUTON INSCRIPTION
========================================================== */

.formation-detail-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Bouton inscription */
.formation-detail-buttons .btn-inscription {

    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #12355B,
        #1D4E89
    );

    color: #ffffff;

    border: 2px solid #12355B;

    border-radius: 9px;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.formation-detail-buttons .btn-inscription:hover {

    background: linear-gradient(
        135deg,
        #D4AF37,
        #B99120
    );

    color: #ffffff;

    border-color: #D4AF37;

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(212, 175, 55, .28);

}


/* ==========================================================
   RETOUR AUX FORMATIONS
========================================================== */

.formation-detail-buttons .btn-retour {

    width: 100%;

    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    color: #12355B;

    border: 2px solid #12355B;

    border-radius: 9px;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.formation-detail-buttons .btn-retour:hover {

    background: #12355B;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(18, 53, 91, .20);

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .formation-buttons {

        flex-direction: column;

        gap: 10px;

    }


    .formation-buttons .btn {

        width: 100%;

        min-height: 48px;

        font-size: 15px;

    }


    .formation-detail-buttons .btn-inscription {

        min-height: 52px;

        font-size: 15px;

    }


    .formation-detail-buttons .btn-retour {

        min-height: 48px;

        font-size: 14px;

    }

}
/* ==========================================================
   OFFRES D'EMPLOI
========================================================== */

.offers-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            135deg,
            #0D1B2A,
            #12355B
        );
    overflow: hidden;
}

.offers-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(212,175,55,.20),
            transparent 35%
        );
}

.offers-hero-content {
    position: relative;
    max-width: 800px;
    padding: 70px 0;
}

.offers-hero h1 {
    margin: 20px 0 15px;
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 800;
}

.offers-hero p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.85);
    font-size: 18px;
    line-height: 1.7;
}

.offers-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 50px;
    background: #D4AF37;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* ==========================================================
   SECTION
========================================================== */

.offers-section {
    padding: 80px 0;
    background: #f8f9fb;
}

.offers-heading {
    max-width: 750px;
    margin: 0 auto 50px;
}

.offers-heading h2 {
    margin: 15px 0;
    color: #12355B;
    font-size: 36px;
    font-weight: 800;
}

.offers-heading p {
    color: #6c757d;
    line-height: 1.7;
}


/* ==========================================================
   CARTE OFFRE
========================================================== */

.offer-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8ebef;
    box-shadow: 0 8px 30px rgba(13,27,42,.07);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(13,27,42,.13);
}

.offer-card-header {
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #eee;
}

.offer-contract {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 50px;
    background: #12355B;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.offer-reference {
    color: #777;
    font-size: 12px;
    font-weight: 600;
}

.offer-card-body {
    flex: 1;
    padding: 26px 24px;
}

.offer-title {
    margin-bottom: 22px;
    color: #12355B;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.offer-info {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.offer-info-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(212,175,55,.12);
}

.offer-info div {
    display: flex;
    flex-direction: column;
}

.offer-info strong {
    color: #12355B;
    font-size: 13px;
}

.offer-info span {
    color: #6c757d;
    font-size: 14px;
}

.offer-description {
    margin-top: 22px;
    color: #666;
    line-height: 1.7;
}

.offer-card-footer {
    padding: 20px 24px;
    border-top: 1px solid #eee;
}


/* ==========================================================
   BOUTONS
========================================================== */

.offer-btn {
    min-height: 46px;
    padding: 11px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all .25s ease;
}

.offer-btn-primary {
    width: 100%;
    background: #12355B;
    color: #fff;
    border: 2px solid #12355B;
}

.offer-btn-primary:hover {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #fff;
    transform: translateY(-2px);
}

.offer-btn-gold {
    background: linear-gradient(
        135deg,
        #D4AF37,
        #B99120
    );
    color: #fff;
    border: 2px solid #D4AF37;
}

.offer-btn-gold:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212,175,55,.25);
}

.offer-btn-outline {
    background: #fff;
    color: #12355B;
    border: 2px solid #12355B;
}

.offer-btn-outline:hover {
    background: #12355B;
    color: #fff;
    transform: translateY(-2px);
}


/* ==========================================================
   AUCUNE OFFRE
========================================================== */

.offers-empty {
    max-width: 700px;
    margin: 30px auto;
    padding: 60px 30px;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(13,27,42,.07);
}

.offers-empty-icon {
    font-size: 55px;
    margin-bottom: 20px;
}

.offers-empty h3 {
    color: #12355B;
    font-weight: 800;
}

.offers-empty p {
    margin: 15px auto 25px;
    max-width: 550px;
    color: #6c757d;
    line-height: 1.7;
}


/* ==========================================================
   CTA
========================================================== */

.offers-cta {
    padding: 70px 0;
    background: #12355B;
}

.offers-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.offers-cta h2 {
    margin: 15px 0;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
}

.offers-cta p {
    max-width: 750px;
    margin: 0;
    color: rgba(255,255,255,.8);
    line-height: 1.7;
}


/* ==========================================================
   PAGE DÉTAIL
========================================================== */

.offer-detail-hero {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    background: linear-gradient(
        135deg,
        #0D1B2A,
        #12355B
    );
}

.offer-detail-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(212,175,55,.20),
            transparent 35%
        );
}

.offer-detail-hero-content {
    position: relative;
    padding: 60px 0;
    max-width: 900px;
}

.offer-detail-hero h1 {
    margin: 18px 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
}

.offer-detail-reference {
    color: rgba(255,255,255,.75);
}


/* ==========================================================
   SECTION DÉTAIL
========================================================== */

.offer-detail-section {
    padding: 70px 0;
    background: #f8f9fb;
}

.offer-detail-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 35px rgba(13,27,42,.07);
}

.offer-detail-header {
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.offer-detail-header h2 {
    margin-top: 15px;
    color: #12355B;
    font-size: 32px;
    font-weight: 800;
}


/* ==========================================================
   INFORMATIONS
========================================================== */

.offer-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 30px 0 40px;
}

.offer-detail-info {
    display: flex;
    gap: 12px;
    padding: 18px;
    background: #f7f8fa;
    border-radius: 12px;
}

.offer-detail-info-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,.12);
    border-radius: 10px;
}

.offer-detail-info div:last-child {
    display: flex;
    flex-direction: column;
}

.offer-detail-info span {
    color: #777;
    font-size: 12px;
}

.offer-detail-info strong {
    color: #12355B;
    font-size: 14px;
}


/* ==========================================================
   CONTENU
========================================================== */

.offer-detail-content {
    margin-bottom: 40px;
}

.offer-detail-content h3 {
    position: relative;
    margin-bottom: 18px;
    padding-left: 15px;
    color: #12355B;
    font-size: 24px;
    font-weight: 800;
}

.offer-detail-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 4px;
    height: 25px;
    border-radius: 5px;
    background: #D4AF37;
}

.offer-text {
    color: #555;
    line-height: 1.9;
    white-space: pre-line;
}


/* ==========================================================
   ACTIONS
========================================================== */

.offer-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.offer-sidebar {
    position: sticky;
    top: 100px;
    padding: 30px;
    background: #12355B;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(13,27,42,.15);
}

.offer-sidebar-header span {
    color: #D4AF37;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.offer-sidebar h3 {
    margin: 12px 0 18px;
    color: #fff;
    font-size: 25px;
    font-weight: 800;
}

.offer-sidebar p {
    margin-bottom: 25px;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}

.offer-sidebar .offer-btn {
    margin-bottom: 10px;
}

.offer-sidebar .offer-btn-outline {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.offer-sidebar .offer-btn-outline:hover {
    background: #fff;
    color: #12355B;
}


/* ==========================================================
   CONTACT
========================================================== */

.offer-contact-card {
    margin-top: 20px;
    padding: 25px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(13,27,42,.07);
}

.offer-contact-card h4 {
    color: #12355B;
    font-weight: 800;
}

.offer-contact-card p {
    color: #6c757d;
    line-height: 1.7;
}

.offer-contact-card a {
    color: #D4AF37;
    font-weight: 700;
    text-decoration: none;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 991px) {

    .offers-cta-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .offer-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .offer-sidebar {
        position: static;
    }

}


@media (max-width: 767px) {

    .offers-hero {
        min-height: 320px;
    }

    .offers-section {
        padding: 55px 0;
    }

    .offers-heading h2 {
        font-size: 29px;
    }

    .offer-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .offer-title {
        font-size: 21px;
    }

    .offer-detail-card {
        padding: 25px 20px;
    }

    .offer-detail-header h2 {
        font-size: 27px;
    }

    .offer-detail-actions {
        flex-direction: column;
    }

    .offer-detail-actions .offer-btn {
        width: 100%;
    }

    .offers-cta {
        padding: 50px 0;
    }

    .offers-cta h2 {
        font-size: 27px;
    }

}


@media (max-width: 480px) {

    .offers-hero-content {
        padding: 50px 0;
    }

    .offers-hero h1 {
        font-size: 34px;
    }

    .offers-hero p {
        font-size: 15px;
    }

    .offer-card-body {
        padding: 22px 18px;
    }

    .offer-card-footer {
        padding: 18px;
    }

    .offer-detail-section {
        padding: 45px 0;
    }

    .offer-detail-card {
        padding: 20px 16px;
    }

    .offer-sidebar {
        padding: 24px 20px;
    }

}

/* ==========================================================
   BOUTON VOIR LES OFFRES
   PAGE CANDIDATURE SPONTANÉE
========================================================== */

.btn-retour-offres {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 11px 22px;

    background: #ffffff;

    color: #12355B;

    border: 2px solid #12355B;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* HOVER */

.btn-retour-offres:hover {

    background: #12355B;

    color: #ffffff;

    border-color: #12355B;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(18, 53, 91, .20);

}


/* CLIC */

.btn-retour-offres:active {

    transform: translateY(0);

    box-shadow: none;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .btn-retour-offres {

        width: 100%;

        min-height: 48px;

        font-size: 15px;

    }

}

/* ==========================================================
   PAGE À PROPOS - APPROCHE
========================================================== */

.approach-box {

    height:100%;

    padding:40px 30px;

    text-align:center;

    background:#ffffff;

    border-radius:25px;

    box-shadow:var(--shadow);

    border-top:4px solid var(--gold);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.approach-box:hover {

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


.approach-box i {

    width:75px;

    height:75px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:var(--gold);

    font-size:30px;

}


.approach-box h4 {

    margin-bottom:15px;

    color:var(--primary);

    font-weight:900;

}


.approach-box p {

    margin:0;

    color:var(--gray);

    line-height:1.7;

}



/* ==========================================================
   PAGE À PROPOS - CTA
========================================================== */

.cta-home {

    position:relative;

    padding:90px 0;

    background:

        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color:white;

    overflow:hidden;

}


.cta-home::before {

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-120px;

    top:-150px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

}


.cta-home::after {

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    left:-100px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}


.cta-home .container {

    position:relative;

    z-index:2;

}


.cta-home h2 {

    margin-bottom:18px;

    color:#ffffff;

    font-size:clamp(30px,4vw,45px);

    font-weight:900;

}


.cta-home p {

    max-width:700px;

    margin:0 auto 30px;

    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.8;

}


.cta-home .btn-golden {

    display:inline-flex;

}



/* ==========================================================
   ABOUT HERO OVERLAY
========================================================== */

.about-overlay {

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            120deg,
            rgba(7,26,51,.95),
            rgba(18,53,91,.80)
        );

    z-index:0;

}


.about-hero .container {

    position:relative;

    z-index:2;

}


.about-hero {

    min-height:60vh;

    position:relative;

    display:flex;

    align-items:center;

    background-image:url("../uploads/pub.jpg");

    background-size:cover;

    background-position:center;

}

/* ==========================================================
   GOLDEN GROUP CONSULTING SARL
   ACCUEIL - CORRECTION FINALE
========================================================== */


/* ==========================================================
   HERO ACCUEIL
========================================================== */

.hero-home {

    position: relative;

    min-height: calc(100vh - 80px);

    display: flex;

    align-items: center;

    background-image:
        url("../uploads/Pub_golden.jpg.jpeg");

    background-size: cover;

    background-position: center;

    overflow: hidden;

}


/* OVERLAY */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(7,26,51,.95),
            rgba(18,53,91,.72)
        );

    z-index: 1;

}


/* CONTENU HERO */

.hero-home > .container {

    position: relative;

    z-index: 2;

}


/* TITRE */

.hero-home h1 {

    color: #ffffff !important;

    font-size: clamp(38px, 5vw, 62px);

    font-weight: 900;

    line-height: 1.15;

    margin-bottom: 25px;

}


.hero-home h1 span {

    color: var(--gold) !important;

}


/* PARAGRAPHE */

.hero-home p {

    max-width: 700px;

    color: #ffffff !important;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 30px;

}


/* IMAGE HERO */

.hero-photo {

    width: 90%;

    max-width: 520px;

    height: auto;

    margin-left: auto;

    margin-right: auto;

    border-radius: 30px;

    object-fit: cover;

    box-shadow:
        0 30px 60px rgba(0,0,0,.40);

    animation: floating 5s infinite ease-in-out;

}


/* BOUTONS HERO */

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}



/* ==========================================================
   BADGE
========================================================== */

.gold-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 22px;

    margin-bottom: 20px;

    background: var(--gold) !important;

    color: var(--primary) !important;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .5px;

}



/* ==========================================================
   BOUTON BLEU
========================================================== */

.btn-primary-golden {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 13px 30px;

    background: var(--primary);

    color: #ffffff !important;

    border: 2px solid var(--primary);

    border-radius: 50px;

    font-weight: 800;

    transition: .3s ease;

}


.btn-primary-golden:hover {

    background: var(--gold);

    color: var(--primary) !important;

    border-color: var(--gold);

    transform: translateY(-3px);

}



/* ==========================================================
   INTRODUCTION
========================================================== */

.intro-logo {

    width: 100%;

    max-width: 420px;

    height: auto;

    margin: auto;

    object-fit: contain;

    transition: .3s ease;

}


.intro-logo:hover {

    transform: scale(1.03);

}



/* ==========================================================
   TITRES DES SECTIONS
========================================================== */

.section-title {

    color: var(--primary);

    font-size: clamp(30px, 4vw, 42px);

    font-weight: 900;

    line-height: 1.2;

    margin-top: 15px;

    margin-bottom: 20px;

}


.section-text {

    color: var(--gray);

    font-size: 16px;

    line-height: 1.8;

}



/* ==========================================================
   SERVICES
========================================================== */

.services-section {

    padding: 100px 0;

    background: var(--light);

}


.expert-card {

    height: 100%;

    padding: 40px 30px;

    background: #ffffff;

    border-radius: 30px;

    text-align: center;

    box-shadow: var(--shadow);

    transition: .3s ease;

    border-top: 4px solid transparent;

}


.expert-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

    border-top-color: var(--gold);

}


.expert-card i {

    width: 90px;

    height: 90px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: var(--gold);

    border-radius: 50%;

    font-size: 40px;

}


.expert-card h4 {

    color: var(--primary);

    font-weight: 900;

    margin-bottom: 15px;

}


.expert-card p {

    color: var(--gray);

    line-height: 1.7;

    margin-bottom: 0;

}



/* ==========================================================
   STATISTIQUES
========================================================== */

.numbers-section {

    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light)
        );

}


.number-box {

    height: 100%;

    padding: 35px 20px;

    text-align: center;

    color: #ffffff;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 25px;

    backdrop-filter: blur(10px);

    transition: .3s ease;

}


.number-box:hover {

    transform: translateY(-8px);

    background: rgba(255,255,255,.13);

}


.number-box h2 {

    color: var(--gold);

    font-size: 50px;

    font-weight: 900;

    margin-bottom: 8px;

}


.number-box p {

    color: #ffffff;

    font-size: 15px;

    margin: 0;

}



/* ==========================================================
   VALEURS
========================================================== */

.value-card {

    height: 100%;

    padding: 35px 25px;

    text-align: center;

    background: #ffffff;

    border-radius: 25px;

    border-bottom: 4px solid var(--gold);

    box-shadow: var(--shadow);

    transition: .3s ease;

}


.value-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}


.value-card i {

    width: 70px;

    height: 70px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: var(--gold);

    border-radius: 50%;

    font-size: 30px;

}


.value-card h5 {

    color: var(--primary);

    font-size: 19px;

    font-weight: 900;

    margin-bottom: 12px;

}


.value-card p {

    color: var(--gray);

    line-height: 1.7;

    margin: 0;

}



/* ==========================================================
   MÉTHODE DE TRAVAIL
========================================================== */

.process-section {

    padding: 100px 0;

    background: #F7F8FB;

}


.process-box {

    position: relative;

    height: 100%;

    min-height: 270px;

    padding: 35px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ffffff;

    border-radius: 25px;

    box-shadow: var(--shadow);

    transition: .3s ease;

    overflow: hidden;

}


.process-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: var(--gold);

}


.process-box:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}


.process-number {

    position: absolute;

    top: 15px;

    right: 20px;

    color: rgba(212,175,55,.18);

    font-size: 45px;

    font-weight: 900;

}


.process-box i {

    width: 70px;

    height: 70px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: var(--gold);

    border-radius: 50%;

    font-size: 28px;

}


.process-box h5 {

    color: var(--primary);

    font-size: 20px;

    font-weight: 900;

    margin-bottom: 10px;

}


.process-box p {

    color: var(--gray);

    line-height: 1.6;

    margin: 0;

}



/* ==========================================================
   CTA
========================================================== */

.cta-home {

    position: relative;

    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color: #ffffff;

    overflow: hidden;

}


.cta-home::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -120px;

    top: -150px;

    border-radius: 50%;

    background: rgba(212,175,55,.12);

}


.cta-home::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    left: -100px;

    bottom: -120px;

    border-radius: 50%;

    background: rgba(255,255,255,.05);

}


.cta-home .container {

    position: relative;

    z-index: 2;

}


.cta-home h2 {

    color: #ffffff !important;

    font-size: clamp(30px, 4vw, 45px);

    font-weight: 900;

    margin: 15px 0 18px;

}


.cta-home p {

    max-width: 700px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.88) !important;

    font-size: 17px;

    line-height: 1.8;

}


.cta-tag {

    color: var(--gold) !important;

}



/* ==========================================================
   PARTENAIRES
========================================================== */

.partners-section {

    padding: 100px 0;

    background: #F8FAFC;

}


.partner-card {

    height: 170px;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border-radius: 25px;

    box-shadow: var(--shadow);

    transition: .3s ease;

    overflow: hidden;

}


.partner-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}


.partner-logo {

    max-width: 160px;

    max-height: 90px;

    width: auto;

    height: auto;

    object-fit: contain;

    transition: .3s ease;

}


.partner-card:hover .partner-logo {

    transform: scale(1.05);

}



/* ==========================================================
   TEXTES SUR HERO
========================================================== */

.hero-home h1,
.hero-home h2,
.hero-home h3 {

    color: #ffffff !important;

}


.hero-home p {

    color: #ffffff !important;

}


.hero-home a {

    text-decoration: none;

}



/* ==========================================================
   RESPONSIVE TABLETTE
========================================================== */

@media (max-width: 991px) {

    .hero-home {

        min-height: auto;

        padding: 100px 0 80px;

    }


    .hero-home h1 {

        font-size: 44px;

    }


    .hero-photo {

        width: 80%;

        margin: 30px auto 0;

    }


    .section-padding {

        padding: 75px 0;

    }


    .services-section {

        padding: 75px 0;

    }


    .numbers-section {

        padding: 70px 0;

    }


    .process-section {

        padding: 75px 0;

    }


    .partners-section {

        padding: 75px 0;

    }

}



/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 767px) {

    .hero-home {

        padding: 80px 0 60px;

        text-align: center;

    }


    .hero-home h1 {

        font-size: 34px;

        line-height: 1.2;

    }


    .hero-home p {

        font-size: 15px;

        line-height: 1.7;

    }


    .hero-buttons {

        justify-content: center;

        flex-direction: column;

        align-items: center;

    }


    .hero-buttons .btn {

        width: 100%;

        max-width: 300px;

    }


    .hero-photo {

        width: 88%;

        border-radius: 25px;

    }


    .intro-logo {

        max-width: 280px;

        margin-bottom: 20px;

    }


    .section-padding {

        padding: 60px 0;

    }


    .services-section {

        padding: 60px 0;

    }


    .numbers-section {

        padding: 60px 0;

    }


    .number-box {

        padding: 30px 15px;

    }


    .number-box h2 {

        font-size: 40px;

    }


    .process-section {

        padding: 60px 0;

    }


    .process-box {

        min-height: 220px;

    }


    .process-section .section-title {

        font-size: 32px;

    }


    .cta-home {

        padding: 65px 20px;

    }


    .cta-home h2 {

        font-size: 30px;

    }


    .cta-home p {

        font-size: 15px;

    }


    .partners-section {

        padding: 60px 0;

    }


    .partner-card {

        height: 140px;

    }


    .partner-logo {

        max-width: 130px;

        max-height: 75px;

    }

}



/* ==========================================================
   PETIT MOBILE
========================================================== */

@media (max-width: 480px) {

    .hero-home {

        padding: 70px 15px 50px;

    }


    .hero-home h1 {

        font-size: 29px;

    }


    .hero-home p {

        font-size: 14px;

    }


    .gold-badge {

        font-size: 10px;

        padding: 8px 13px;

    }


    .hero-photo {

        width: 95%;

    }


    .number-box h2 {

        font-size: 36px;

    }


    .value-card {

        padding: 30px 20px;

    }


    .process-box {

        min-height: 210px;

    }


    .partner-card {

        height: 125px;

    }

}
/* =========================================================
   GOLDEN GROUP CONSULTING
   SERVICES PAGE
========================================================= */


/* =========================================================
   VARIABLES DE SECOURS
========================================================= */

:root {

    --primary: #12355B;
    --primary-light: #1D4E89;
    --primary-dark: #0D1B2A;

    --gold: #D4AF37;
    --gold-light: #E8C766;
    --gold-dark: #B99120;

    --white: #ffffff;
    --black: #111111;
    --gray: #666666;
    --light: #f7f9fc;

}


/* =========================================================
   HERO SERVICES
========================================================= */

.services-hero {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(13, 27, 42, .95),
            rgba(18, 53, 91, .82),
            rgba(18, 53, 91, .55)
        ),

        url("../uploads/Pub_golden.jpg.jpeg");

    background-size: cover;

    background-position: center;

    color: #ffffff;

}


.services-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,
            rgba(13, 27, 42, .95),
            rgba(18, 53, 91, .65)
        );

    z-index: 0;

}


.services-hero .container {

    position: relative;

    z-index: 2;

}


.services-hero h1 {

    margin-top: 25px;

    margin-bottom: 25px;

    max-width: 850px;

    font-size: clamp(
        38px,
        5vw,
        68px
    );

    line-height: 1.08;

    font-weight: 800;

    color: #ffffff;

}


.services-hero h1 span {

    color: var(--gold);

}


.services-hero p {

    max-width: 720px;

    font-size: 18px;

    line-height: 1.8;

    color: #ffffff;

    margin-bottom: 0;

}


/* =========================================================
   GOLD BADGE
========================================================= */

.gold-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    border: 1px solid
        rgba(232, 199, 102, .6);

    border-radius: 50px;

    background:
        rgba(212, 175, 55, .15);

    color: var(--gold-light);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


/* =========================================================
   SERVICES SECTION
========================================================= */

.services-section {

    padding: 100px 0;

    background: #ffffff;

}


/* =========================================================
   SECTION TAG
========================================================= */

.section-tag {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--gold-dark);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {

    margin-bottom: 18px;

    color: var(--primary-dark);

    font-size: clamp(
        30px,
        4vw,
        44px
    );

    font-weight: 800;

    line-height: 1.2;

}


.section-text {

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

    color: var(--gray);

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.expert-card {

    height: 100%;

    padding: 40px 32px;

    background: #ffffff;

    border: 1px solid #e7ebf1;

    border-radius: 18px;

    box-shadow:
        0 10px 35px
        rgba(13, 27, 42, .07);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

    position: relative;

    overflow: hidden;

}


/* GOLD LINE */

.expert-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:

        linear-gradient(
            90deg,
            var(--gold-dark),
            var(--gold-light)
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform .35s ease;

}


.expert-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(212, 175, 55, .45);

    box-shadow:

        0 20px 50px
        rgba(13, 27, 42, .13);

}


.expert-card:hover::before {

    transform:
        scaleX(1);

}


/* =========================================================
   ICON
========================================================= */

.icon-box {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 16px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-light)
        );

    color: var(--gold-light);

    font-size: 30px;

    box-shadow:

        0 10px 25px
        rgba(18, 53, 91, .20);

    transition:

        transform .35s ease,

        background .35s ease;

}


.expert-card:hover .icon-box {

    transform:
        rotate(-5deg)
        scale(1.05);

    background:

        linear-gradient(
            135deg,
            var(--gold-dark),
            var(--gold)
        );

    color: #ffffff;

}


/* =========================================================
   CARD TEXT
========================================================= */

.expert-card h4 {

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 22px;

    font-weight: 800;

}


.expert-card p {

    margin: 0;

    color: #666666;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   NUMBERS / ENGAGEMENTS
========================================================= */

.numbers-section {

    padding: 90px 0;

    background:

        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    position: relative;

    overflow: hidden;

}


/* décor */

.numbers-section::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    top: -200px;

    right: -150px;

    border:
        1px solid
        rgba(212, 175, 55, .18);

}


.numbers-section .section-tag {

    color: var(--gold-light);

}


.numbers-section .section-title {

    color: #ffffff;

}


.number-box {

    height: 100%;

    padding: 40px 30px;

    border:

        1px solid
        rgba(255, 255, 255, .13);

    border-radius: 18px;

    background:

        rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(10px);

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.number-box:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(212, 175, 55, .5);

}


.number {

    display: block;

    margin-bottom: 15px;

    color: var(--gold);

    font-size: 48px;

    font-weight: 900;

}


.number-box h5 {

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 700;

}


.number-box p {

    margin: 0;

    color: rgba(255, 255, 255, .75);

    line-height: 1.7;

}


/* =========================================================
   CTA
========================================================= */

.services-cta {

    padding: 100px 20px;

    background: #ffffff;

}


.services-cta h2 {

    margin: 15px 0;

    color: var(--primary-dark);

    font-size: clamp(
        30px,
        4vw,
        44px
    );

    font-weight: 800;

}


.services-cta p {

    max-width: 700px;

    margin: 0 auto 30px;

    color: var(--gray);

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   BOUTON GOLDEN
========================================================= */

.btn-golden {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 13px 28px;

    border: 0;

    border-radius: 8px;

    background:

        linear-gradient(
            135deg,
            var(--gold-dark),
            var(--gold)
        );

    color: #ffffff !important;

    font-weight: 700;

    text-decoration: none;

    box-shadow:

        0 8px 20px
        rgba(185, 145, 32, .25);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.btn-golden:hover {

    transform:
        translateY(-3px);

    color: #ffffff !important;

    box-shadow:

        0 12px 30px
        rgba(185, 145, 32, .35);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .services-hero {

        min-height: 450px;

        padding: 100px 0 70px;

    }


    .services-hero h1 {

        font-size: 44px;

    }


    .services-section {

        padding: 75px 0;

    }

}


@media (max-width: 767px) {

    .services-hero {

        min-height: 500px;

        padding:
            110px 20px
            70px;

        background-position:
            center;

    }


    .services-hero h1 {

        font-size: 36px;

        line-height: 1.15;

    }


    .services-hero p {

        font-size: 16px;

        line-height: 1.7;

    }


    .services-section {

        padding: 60px 15px;

    }


    .expert-card {

        padding: 30px 25px;

    }


    .icon-box {

        width: 60px;

        height: 60px;

        font-size: 25px;

    }


    .expert-card h4 {

        font-size: 20px;

    }


    .numbers-section {

        padding: 65px 15px;

    }


    .number-box {

        padding: 30px 20px;

    }


    .number {

        font-size: 40px;

    }


    .services-cta {

        padding:
            70px 20px;

    }

}


@media (max-width: 480px) {

    .services-hero {

        min-height: 520px;

    }


    .services-hero h1 {

        font-size: 31px;

    }


    .gold-badge {

        font-size: 11px;

        padding: 8px 13px;

    }


    .section-title {

        font-size: 29px;

    }


    .expert-card {

        padding: 28px 22px;

        border-radius: 15px;

    }


    .expert-card p {

        font-size: 14px;

    }

}
/* =========================================================
   GOLDEN GROUP CONSULTING
   SERVICES PAGE
========================================================= */

.services-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url("../uploads/Pub_golden.jpg.jpeg");
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.services-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(5, 15, 28, 0.96) 0%,
            rgba(13, 27, 42, 0.88) 35%,
            rgba(18, 53, 91, 0.65) 65%,
            rgba(18, 53, 91, 0.30) 100%
        );
}

.services-hero .container,
.services-hero .col-lg-8,
.services-hero .gold-badge,
.services-hero h1,
.services-hero p {
    position: relative;
}

.services-hero .container {
    z-index: 3;
}

.services-hero .col-lg-8 {
    z-index: 4;
}

.services-hero .gold-badge,
.services-hero h1,
.services-hero p {
    z-index: 5;
}

.services-hero .gold-badge {
    color: #E8C766 !important;
    background: rgba(13, 27, 42, 0.75);
    border: 1px solid rgba(232, 199, 102, 0.8);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
}

.services-hero h1 {
    max-width: 850px;
    margin: 25px 0;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 800;
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.75);
}

.services-hero h1 span {
    color: #E8C766 !important;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

.services-hero p {
    max-width: 720px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.services-section {
    padding: 100px 0;
    background: #ffffff;
}

.services-section .section-text {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}

.expert-card {
    position: relative;
    height: 100%;
    padding: 40px 32px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7ebf1;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(13, 27, 42, .07);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.expert-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.expert-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, .45);
    box-shadow: 0 20px 50px rgba(13, 27, 42, .13);
}

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

.icon-box {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--gold-light);
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(18, 53, 91, .20);
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.expert-card:hover .icon-box {
    transform: rotate(-5deg) scale(1.05);
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #ffffff;
}

.expert-card h4 {
    margin-bottom: 15px;
    color: var(--primary);
    font-size: 22px;
    font-weight: 800;
}

.expert-card p {
    margin: 0;
    color: #666666;
    font-size: 15px;
    line-height: 1.8;
}

.numbers-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.numbers-section::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -150px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 50%;
}

.numbers-section .container {
    position: relative;
    z-index: 2;
}

.numbers-section .section-tag {
    color: var(--gold-light);
}

.numbers-section .section-title {
    color: #ffffff;
}

.number-box {
    height: 100%;
    padding: 40px 30px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
    transition:
        transform .3s ease,
        border-color .3s ease;
}

.number-box:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, .5);
}

.number {
    display: block;
    margin-bottom: 15px;
    color: var(--gold);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.number-box h5 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
}

.number-box p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
}

.services-cta {
    padding: 100px 20px;
    background: #ffffff;
}

.services-cta h2 {
    margin: 15px 0;
    color: var(--primary-dark);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
}

.services-cta p {
    max-width: 700px;
    margin: 0 auto 30px;
    color: var(--gray);
    font-size: 17px;
    line-height: 1.8;
}

.btn-golden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 28px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(185, 145, 32, .25);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.btn-golden:hover {
    transform: translateY(-3px);
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(185, 145, 32, .35);
}

@media (max-width: 991px) {
    .services-hero {
        min-height: 450px;
        padding: 100px 0 70px;
    }

    .services-hero h1 {
        font-size: 44px;
    }

    .services-section {
        padding: 75px 0;
    }
}

@media (max-width: 767px) {
    .services-hero {
        min-height: 500px;
        padding: 110px 20px 70px;
        background-position: center;
    }

    .services-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 15, 28, 0.97),
                rgba(13, 27, 42, 0.88)
            );
    }

    .services-hero h1 {
        font-size: 36px;
        line-height: 1.15;
    }

    .services-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .services-section {
        padding: 60px 15px;
    }

    .expert-card {
        padding: 30px 25px;
    }

    .icon-box {
        width: 60px;
        height: 60px;
        font-size: 25px;
    }

    .expert-card h4 {
        font-size: 20px;
    }

    .numbers-section {
        padding: 65px 15px;
    }

    .number-box {
        padding: 30px 20px;
    }

    .number {
        font-size: 40px;
    }

    .services-cta {
        padding: 70px 20px;
    }
}

@media (max-width: 480px) {
    .services-hero {
        min-height: 520px;
    }

    .services-hero h1 {
        font-size: 31px;
    }

    .gold-badge {
        font-size: 11px;
        padding: 8px 13px;
    }

    .section-title {
        font-size: 29px;
    }

    .expert-card {
        padding: 28px 22px;
        border-radius: 15px;
    }

    .expert-card p {
        font-size: 14px;
    }
}
/* =========================================================
   BOUTON RETOUR À L'ACCUEIL
========================================================= */

.btn-retour-accueil {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 24px;

    min-height: 48px;

    border: 2px solid #12355B;

    border-radius: 8px;

    background: #ffffff;

    color: #12355B !important;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none !important;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* HOVER */

.btn-retour-accueil:hover {

    background: #12355B;

    color: #ffffff !important;

    border-color: #12355B;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(18, 53, 91, 0.20);

}


/* CLIC */

.btn-retour-accueil:active {

    transform: translateY(0);

    box-shadow:
        0 4px 10px rgba(18, 53, 91, 0.15);

}


/* ICÔNE */

.btn-retour-accueil i {

    font-size: 17px;

    color: inherit;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .btn-retour-accueil {

        width: 100%;

        padding: 12px 20px;

    }

}
/*======================================
        POURQUOI NOUS
======================================*/

.why-section{
    background:#f8f9fc;
    padding:90px 0;
}

.why-card{
    background:#fff;
    border-radius:20px;
    padding:45px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.why-card h2{
    color:var(--primary);
    font-size:2.2rem;
    font-weight:700;
    margin-bottom:20px;
}

.why-card p{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
}

.why-card ul{
    padding:0;
    margin:0;
}

.why-card li{
    list-style:none;
    position:relative;
    padding-left:38px;
    margin-bottom:18px;
    color:#444;
    font-size:1.05rem;
    font-weight:500;
}

.why-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:24px;
    height:24px;
    background:var(--gold);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:bold;
}