/*==================================================
                    RESET
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f8f9fb;
    color:#333;
    overflow-x:hidden;
}


.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:95px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    display:grid;
    grid-template-columns:180px 1fr 300px;
    align-items:center;
    padding:0 40px;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
    z-index:1000;
}

.logo{display:flex;align-items:center;}
.logo img{width:85px;height:auto;object-fit:contain;}

.navbar{display:flex;justify-content:center;align-items:center;}
.navbar a{
    text-decoration:none;
    color:#052F59;
    font-size:16px;
    font-weight:600;
    white-space:nowrap;
    transition:.3s;
    position:relative;
}
.navbar a:hover{color:#F59F27;}
.navbar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:#F59F27;
    transition:.3s;
}
.navbar a:hover::after,
.navbar a.active::after{width:100%;}

.buttons{display:flex;justify-content:flex-end;align-items:center;gap:15px;}
.buttons a{display:flex;align-items:center;justify-content:center;gap:10px;}
.buttons i{font-size:16px;}

.login,.register{
    text-decoration:none;
    padding:12px 18px;
    border-radius:10px;
    transition:.3s;
}
.login{border:2px solid #052F59;color:#052F59;background:#fff;}
.login:hover{background:#052F59;color:#fff;}
.register{background:#F59F27;color:#fff;}
.register:hover{background:#d98612;}

.hero{position:relative;width:100%;height:100vh;overflow:hidden;}
.hero video{width:100%;height:100%;object-fit:cover;}

.navbar > ul{
    display:flex;
    list-style:none;
    gap:35px;
    align-items:center;
    margin:0;
    padding:0;
}
.navbar > ul > li{position:relative;}

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    display:none;
    flex-direction:column;
    padding:10px 0;
    z-index:1000;
}
.dropdown-menu li{list-style:none;width:100%;}
.dropdown-menu a{
    display:block;
    width:100%;
    padding:12px 18px;
    color:#052F59;
    text-decoration:none;
}
.dropdown-menu a::after{display:none;}
.dropdown-menu a:hover{background:#F59F27;color:#fff;}
.dropdown:hover .dropdown-menu{display:flex;}

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

.hero{
    position:relative;
    width:100%;
    height:calc(100vh - 95px);
    margin-top:95px;
    overflow:hidden;
    background:#052F59;
}

.hero-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/*==================================================
                PRESENTATION
==================================================*/

.presentation{
    width:100%;
    padding:90px 7%;
    background:#fff;
}


/*==================================================
            CONTAINER PRESENTATION
==================================================*/

.presentation .container{
    width:100%;
    max-width:1350px;
    margin:0 auto;

    display:grid;
    grid-template-columns:45% 55%;
    align-items:center;

    gap:65px;
}


/*==================================================
                IMAGE
==================================================*/

.presentation .image{
    width:100%;
}

.presentation .image img{
    width:100%;
    height:650px;

    display:block;

    object-fit:cover;

    border-radius:22px;

    box-shadow:
        0 18px 45px rgba(5,47,89,.15);
}


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

.presentation .content{
    width:100%;
}

.presentation .content h1{
    color:#052F59;

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:28px;
}


/*==================================================
            LIGNE SOUS LE TITRE
==================================================*/

.presentation .content h1::after{
    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:15px;

    background:#F59F27;

    border-radius:10px;
}


/*==================================================
                PARAGRAPHES
==================================================*/

.presentation .content p{
    color:#555;

    font-size:16px;

    line-height:1.85;

    text-align:justify;

    margin-bottom:18px;
}

.presentation .content p:last-child{
    margin-bottom:0;
}


/*==================================================
                TEXTE IMPORTANT
==================================================*/

.presentation .content strong{
    color:#052F59;

    font-weight:700;
}


/*==================================================
        RESPONSIVE PRESENTATION
==================================================*/

@media(max-width:1000px){

    .presentation{
        padding:75px 6%;
    }

    .presentation .container{
        grid-template-columns:1fr;

        gap:45px;
    }

    .presentation .image img{
        height:500px;
    }

    .presentation .content h1{
        font-size:36px;
    }

}


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

@media(max-width:600px){

    .hero{
        height:55vh;
    }

    .presentation{
        padding:60px 5%;
    }

    .presentation .image img{
        height:350px;

        border-radius:15px;
    }

    .presentation .content h1{
        font-size:30px;

        margin-bottom:22px;
    }

    .presentation .content p{
        font-size:15px;

        line-height:1.8;

        text-align:left;
    }

}
/*==================================================
                    NOS OBJECTIFS
==================================================*/

.objectifs{
    width:100%;
    padding:90px 7%;
    background:#f5f7fa;
}

.objectifs-container{
    width:100%;
    max-width:1300px;
    margin:0 auto;
}


/*==================================================
                TITRE OBJECTIFS
==================================================*/

.objectifs-title{
    max-width:850px;
    margin:0 auto 55px;
    text-align:center;
}

.objectifs-title span{
    display:inline-block;
    color:#F59F27;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.objectifs-title h2{
    color:#052F59;
    font-size:40px;
    font-weight:700;
    line-height:1.3;
}

.title-line{
    width:65px;
    height:4px;
    margin:16px auto 22px;
    background:#F59F27;
    border-radius:10px;
}

.objectifs-title p{
    color:#666;
    font-size:16px;
    line-height:1.8;
}


/*==================================================
                GRILLE OBJECTIFS
==================================================*/

.objectifs-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
}


/*==================================================
                OBJECTIF ITEM
==================================================*/

.objectif-item{
    background:#fff;
    padding:35px 25px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
    border-bottom:4px solid transparent;
    transition:.35s;
}

.objectif-item:hover{
    transform:translateY(-8px);
    border-bottom-color:#F59F27;
}


/*==================================================
                ICONE OBJECTIF
==================================================*/

.objectif-item i{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 22px;
    border-radius:50%;
    background:rgba(245,159,39,.12);
    color:#F59F27;
    font-size:30px;
}


/*==================================================
                TEXTE OBJECTIF
==================================================*/

.objectif-item h3{
    color:#052F59;
    font-size:20px;
    line-height:1.4;
    margin-bottom:14px;
}

.objectif-item p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}


/*==================================================
                    NOS ATOUTS
==================================================*/

.atouts{
    width:100%;
    padding:90px 7%;
    background:#fff;
}

.atouts .container{
    width:100%;
    max-width:1250px;
    margin:0 auto;
    text-align:center;
}


/*==================================================
                TITRE ATOUTS
==================================================*/

.atouts h2{
    color:#052F59;
    font-size:40px;
    font-weight:700;
    margin-bottom:18px;
}

.atouts h2::after{
    content:"";
    display:block;
    width:65px;
    height:4px;
    margin:16px auto 0;
    background:#F59F27;
    border-radius:10px;
}

.atouts > .container > p{
    max-width:750px;
    margin:0 auto 50px;
    color:#666;
    font-size:17px;
    line-height:1.8;
}


/*==================================================
                GRILLE CARTES
==================================================*/

.cards{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
}


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

.card{
    min-height:290px;
    padding:38px 24px;
    background:#f8f9fb;
    border-radius:16px;
    text-align:center;

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

    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.35s;
}

.card:hover{
    background:#052F59;
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(5,47,89,.20);
}


/*==================================================
                ICONE CARTE
==================================================*/

.card i{
    font-size:42px;
    color:#F59F27;
    margin-bottom:22px;
}


/*==================================================
                TITRE CARTE
==================================================*/

.card h3{
    color:#052F59;
    font-size:21px;
    line-height:1.4;
    margin-bottom:14px;
    transition:.35s;
}


/*==================================================
                TEXTE CARTE
==================================================*/

.card p{
    color:#666;
    font-size:15px;
    line-height:1.7;
    transition:.35s;
}

.card:hover h3,
.card:hover p{
    color:#fff;
}


/*==================================================
        RESPONSIVE OBJECTIFS ET ATOUTS
==================================================*/

@media(max-width:1100px){

    .objectifs-grid,
    .cards{
        grid-template-columns:repeat(2, 1fr);
    }

}


@media(max-width:700px){

    .objectifs,
    .atouts{
        padding:65px 5%;
    }

    .objectifs-title{
        margin-bottom:40px;
    }

    .objectifs-title h2,
    .atouts h2{
        font-size:30px;
    }

    .objectifs-title p,
    .atouts > .container > p{
        font-size:15px;
    }

    .objectifs-grid,
    .cards{
        grid-template-columns:1fr;
    }

    .objectif-item,
    .card{
        max-width:400px;
        width:100%;
        margin:0 auto;
    }

    .card{
        min-height:auto;
    }

}
/*==================================================
            APPROCHE PEDAGOGIQUE
==================================================*/

.pedagogie{
    width:100%;
    padding:100px 7%;
    background:#f5f7fa;
}

.pedagogie-container{
    width:100%;
    max-width:1350px;
    margin:0 auto;

    display:grid;
    grid-template-columns:45% 55%;
    align-items:center;
    gap:70px;
}


/*==================================================
            IMAGE PEDAGOGIE
==================================================*/

.pedagogie-image{
    width:100%;
}

.pedagogie-image img{
    width:100%;
    height:720px;
    display:block;
    object-fit:cover;
    border-radius:22px;
    box-shadow:0 18px 45px rgba(5,47,89,.15);
}


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

.pedagogie-content{
    width:100%;
}

.section-subtitle{
    display:inline-block;
    color:#F59F27;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.pedagogie-content h2{
    color:#052F59;
    font-size:40px;
    font-weight:700;
    line-height:1.3;
}

.pedagogie-content .title-line{
    margin:16px 0 22px;
}

.pedagogie-intro{
    color:#666;
    font-size:16px;
    line-height:1.8;
    margin-bottom:30px;
}


/*==================================================
            ETAPES PEDAGOGIQUES
==================================================*/

.pedagogie-item{
    display:flex;
    align-items:flex-start;
    gap:22px;
    padding:20px 0;
    border-bottom:1px solid #ddd;
}

.pedagogie-item:last-child{
    border-bottom:none;
}

.pedagogie-number{
    width:58px;
    height:58px;
    min-width:58px;

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

    background:#052F59;
    color:#fff;

    border-radius:12px;

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

    transition:.35s;
}

.pedagogie-item:hover .pedagogie-number{
    background:#F59F27;
    transform:translateY(-3px);
}

.pedagogie-text h3{
    color:#052F59;
    font-size:20px;
    margin-bottom:8px;
}

.pedagogie-text p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}


/*==================================================
                APPEL A L'ACTION
==================================================*/

.cta-formation{
    position:relative;
    width:100%;
    padding:95px 7%;
    background:#052F59;
    overflow:hidden;
}


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

.cta-formation::before,
.cta-formation::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

.cta-formation::before{
    width:380px;
    height:380px;
    top:-210px;
    left:-140px;
    background:rgba(245,159,39,.14);
}

.cta-formation::after{
    width:320px;
    height:320px;
    right:-120px;
    bottom:-200px;
    background:rgba(255,255,255,.06);
}


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

.cta-content{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.cta-subtitle{
    display:inline-block;
    color:#F59F27;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.cta-content h2{
    color:#fff;
    font-size:44px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:20px;
}

.cta-content p{
    max-width:650px;
    margin:0 auto 35px;
    color:rgba(255,255,255,.85);
    font-size:18px;
    line-height:1.7;
}


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

.cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.cta-buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:16px 28px;

    border-radius:10px;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:.35s;
}

.cta-btn-formations{
    background:#fff;
    color:#052F59;
}

.cta-btn-formations:hover{
    background:#f2f2f2;
    transform:translateY(-5px);
}

.cta-btn-inscription{
    background:#F59F27;
    color:#fff;
}

.cta-btn-inscription:hover{
    background:#dc8b14;
    transform:translateY(-5px);
}


/*==================================================
            RESPONSIVE HEADER
==================================================*/

@media(max-width:1200px){

    .header{
        grid-template-columns:130px 1fr 240px;
        padding:0 20px;
    }

    .navbar > ul{
        gap:17px;
    }

    .navbar a{
        font-size:14px;
    }

    .buttons a{
        padding:11px 13px;
    }

}


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

@media(max-width:900px){

    .header{
        position:relative;
        height:auto;
        grid-template-columns:1fr;
        padding:18px;
        gap:18px;
    }

    .logo{
        justify-content:center;
    }

    .navbar{
        width:100%;
    }

    .navbar > ul{
        flex-wrap:wrap;
        justify-content:center;
    }

    .buttons{
        justify-content:center;
    }

    .hero{
        margin-top:0;
    }

    .pedagogie-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .pedagogie-image img{
        height:500px;
    }

}


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

@media(max-width:650px){

    .header{
        padding:15px;
    }

    .navbar > ul{
        flex-direction:column;
        gap:18px;
    }

    .dropdown-menu{
        left:50%;
        transform:translate(-50%, 10px);
    }

    .dropdown:hover .dropdown-menu{
        transform:translate(-50%, 0);
    }

    .buttons{
        flex-direction:column;
        width:100%;
    }

    .buttons a{
        width:100%;
        max-width:320px;
    }

    .pedagogie{
        padding:65px 5%;
    }

    .pedagogie-image img{
        height:380px;
        border-radius:15px;
    }

    .pedagogie-content h2{
        font-size:30px;
    }

    .pedagogie-intro{
        font-size:15px;
    }

    .pedagogie-item{
        gap:15px;
    }

    .pedagogie-number{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:16px;
    }

    .pedagogie-text h3{
        font-size:18px;
    }

    .pedagogie-text p{
        font-size:14px;
    }

    .cta-formation{
        padding:70px 5%;
    }

    .cta-content h2{
        font-size:30px;
    }

    .cta-content p{
        font-size:16px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-buttons a{
        width:100%;
        max-width:330px;
    }

}


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

@media(max-width:420px){

    .pedagogie-image img{
        height:300px;
    }

    .pedagogie-content h2{
        font-size:27px;
    }

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

    .cta-subtitle{
        font-size:12px;
    }

}

/*====================================
            FOOTER
====================================*/

.footer{

    background:#052F59;
    color:#fff;
    padding:80px 8% 0;

}

.footer-container{

    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:50px;

}

.footer-logo{

    width:110px;
    margin-bottom:20px;

}

.footer-col p{

    color:#d9d9d9;
    line-height:1.9;
    margin-bottom:25px;

}

.footer-col h3{

    color:#fff;
    margin-bottom:25px;
    font-size:22px;

}

.footer-col ul{

    list-style:none;

}

.footer-col ul li{

    margin-bottom:15px;

}

.footer-col ul li a{

    color:#d9d9d9;
    text-decoration:none;
    transition:.3s;

}

.footer-col ul li a:hover{

    color:#F59F27;
    padding-left:8px;

}

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

.footer-contact li{

    display:flex;
    gap:12px;
    color:#d9d9d9;
    line-height:1.8;

}

.footer-contact i{

    color:#F59F27;
    margin-top:5px;

}

/*==============================
        RESEAUX SOCIAUX
==============================*/

.footer-social{

    display:flex;
    gap:15px;

}

.footer-social a{

    width:45px;
    height:45px;

    border-radius:50%;

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

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#F59F27;

    transform:translateY(-5px);

}

/*==============================
        BAS DU FOOTER
==============================*/

.footer-bottom{

    margin-top:60px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    padding:25px 0;

}

.footer-bottom p{

    color:#d9d9d9;

}

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

@media(max-width:992px){

    .footer-container{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .footer{

        padding:70px 6% 0;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact li{

        justify-content:center;

    }

}

/* =========================================================
   HEADER
   IDENTIQUE AU HEADER DE INDEX.HTML
========================================================= */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:95px;

    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);

    display:grid;
    grid-template-columns:180px 1fr 300px;

    align-items:center;

    padding:0 40px;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

    z-index:1000;
}


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

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    width:85px;
    height:auto;
    object-fit:contain;
}


/* ==========================
   NAVIGATION
========================== */

.navbar{
    display:flex;
    justify-content:center;
    align-items:center;
}

.navbar a{
    text-decoration:none;

    color:#052F59;

    font-size:16px;
    font-weight:600;

    white-space:nowrap;

    transition:.3s;

    position:relative;
}

.navbar a:hover{
    color:#F59F27;
}


/* Ligne sous les liens */

.navbar a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:3px;

    background:#F59F27;

    transition:.3s;
}

.navbar a:hover::after,
.navbar a.active::after{
    width:100%;
}


/* ==========================
   MENU PRINCIPAL
========================== */

.navbar > ul{
    display:flex;

    list-style:none;

    gap:35px;

    align-items:center;

    margin:0;
    padding:0;
}

.navbar > ul > li{
    position:relative;
}


/* ==========================
   SOUS-MENU
========================== */

.dropdown-menu{
    position:absolute;

    top:100%;
    left:0;

    min-width:260px;

    background:#fff;

    border-radius:10px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    display:none;

    flex-direction:column;

    padding:10px 0;

    z-index:1000;
}

.dropdown-menu li{
    list-style:none;
    width:100%;
}

.dropdown-menu a{
    display:block;

    width:100%;

    padding:12px 18px;

    color:#052F59;

    text-decoration:none;
}

.dropdown-menu a::after{
    display:none;
}

.dropdown-menu a:hover{
    background:#F59F27;
    color:#fff;
}

.dropdown:hover .dropdown-menu{
    display:flex;
}


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

.buttons{
    display:flex;

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

    gap:15px;
}

.buttons a{
    display:flex;

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

    gap:10px;
}

.buttons i{
    font-size:16px;
}

.login,
.register{
    text-decoration:none;

    padding:12px 18px;

    border-radius:10px;

    transition:.3s;
}

.login{
    border:2px solid #052F59;

    color:#052F59;

    background:#fff;
}

.login:hover{
    background:#052F59;
    color:#fff;
}

.register{
    background:#F59F27;
    color:#fff;
}

.register:hover{
    background:#d98612;
}


/* =========================================================
   MENU MOBILE
   EXACTEMENT COMME INDEX
========================================================= */

.menu-toggle{
    display:none;
}


/* Overlay */

.menu-overlay{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

    z-index:1998;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}


/* Bouton fermeture */

.menu-close{
    display:none;
}


/* =========================================================
   TABLETTE + MOBILE
========================================================= */

@media (max-width:1000px){

    .header{
        height:75px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:0 22px;

        z-index:2000;
    }


    /* LOGO */

    .logo img{
        width:72px;
    }


    /* HAMBURGER */

    .menu-toggle {
        display: flex;
    
        margin-left: auto;
    
        position: relative;
        z-index: 2001;
    
        width: 45px;
        height: 45px;
    
        align-items: center;
        justify-content: center;
    
        background: transparent;
        border: none;
    
        color: #052F59;
    
        border-radius: 8px;
    
        cursor: pointer;
    
        font-size: 22px;
    }
    
    .menu-toggle i{
        font-size:22px;
    }


    /* ==========================
       MENU LATÉRAL
    ========================== */

    .navbar{
        position:fixed;

        top:0;
        right:0;

        width:72%;
        max-width:390px;

        height:100vh;

        background:#052F59;

        display:block;

        transform:translateX(100%);

        transition:transform .35s ease;

        overflow-y:auto;

        z-index:2002;

        box-shadow:-10px 0 30px rgba(0,0,0,.20);
    }

    .navbar.active{
        transform:translateX(0);
    }


    /* ==========================
       BOUTON X
    ========================== */

    .menu-close{
        position:absolute;

        top:0;
        right:0;

        width:45px;
        height:45px;

        border:0;

        background:#F59F27;

        color:#052F59;

        font-size:25px;

        cursor:pointer;

        display:flex;

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

        z-index:5;
    }


    /* ==========================
       MENU PRINCIPAL MOBILE
    ========================== */

    .navbar > ul{
        width:100%;

        display:flex;

        flex-direction:column;

        gap:0;

        margin:0;

        padding:75px 25px 120px;

        box-sizing:border-box;
    }

    .navbar > ul > li{
        width:100%;

        border-bottom:1px solid rgba(255,255,255,.15);
    }

    .navbar > ul > li > a{
        display:flex;

        align-items:center;

        justify-content:space-between;

        width:100%;

        padding:17px 0;

        color:#fff;

        font-size:16px;
        font-weight:600;

        box-sizing:border-box;
    }

    .navbar > ul > li > a:hover{
        color:#F59F27;
    }


    /* Pas de ligne sous les liens mobile */

    .navbar a::after{
        display:none !important;
    }


    /* ==========================
       SOUS-MENUS MOBILE
    ========================== */

    .dropdown-menu{
        position:static;

        width:100%;

        min-width:0;

        display:none;

        background:rgba(0,0,0,.10);

        box-shadow:none;

        border-radius:0;

        padding:0;

        z-index:auto;
    }

    .dropdown.active > .dropdown-menu{
        display:flex;

        flex-direction:column;
    }

    .dropdown:hover > .dropdown-menu{
        display:none;
    }

    .dropdown.active:hover > .dropdown-menu{
        display:flex;
    }

    .dropdown-menu li{
        width:100%;
        list-style:none;
    }

    .dropdown-menu a{
        display:block;

        width:100%;

        padding:13px 15px;

        color:#fff;

        font-size:14px;

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

        box-sizing:border-box;
    }

    .dropdown-menu a:hover{
        background:rgba(255,255,255,.08);

        color:#F59F27;
    }


    /* =====================================================
       BROCHURE + CONNEXION
       COMME INDEX : DANS LE BAS DU MENU
    ===================================================== */

    .buttons{
        position:fixed;

        right:0;
        bottom:0;

        width:72%;
        max-width:390px;

        display:none;

        flex-direction:column;

        gap:0;

        padding:5px 25px 20px;

        background:#052F59;

        box-sizing:border-box;

        z-index:2003;
    }

    .navbar.active ~ .buttons{
        display:flex;
    }

    .buttons a{
        width:100%;

        min-height:42px;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        padding:11px 0;

        border:none;

        border-radius:0;

        background:transparent;

        color:#fff;

        text-decoration:none;

        font-size:15px;

        font-weight:600;

        box-sizing:border-box;
    }

    .buttons a:hover{
        color:#F59F27;

        background:transparent;
    }

    .buttons .login{
        border:none;

        background:transparent;

        color:#fff;
    }

    .buttons .register{
        background:transparent;

        color:#fff;
    }

    .buttons i{
        font-size:15px;

        margin-right:8px;
    }

}


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

@media (max-width:600px){

    .header{
        height:70px;

        padding:0 16px;
    }


    .logo img{
        width:67px;
    }


    .menu-toggle{
        width:45px;
        height:45px;

        font-size:22px;
    }

    .menu-toggle i{
        font-size:22px;
    }


    .navbar{
        width:78%;

        max-width:none;
    }


    .navbar > ul{
        padding-left:20px;

        padding-right:20px;

        padding-bottom:120px;
    }


    .buttons{
        width:78%;

        padding-left:20px;

        padding-right:20px;
    }


    .navbar > ul > li > a{
        font-size:15px;

        padding:16px 0;
    }

}


/* =========================================================
   TRÈS PETIT ÉCRAN
========================================================= */

@media (max-width:400px){

    .navbar{
        width:84%;
    }

    .buttons{
        width:84%;
    }

}

/* =========================================================
   BOUTONS — RESPONSIVE
   S'adaptent à tous les appareils sans prendre 100%
========================================================= */

/* Tablette */
@media (max-width: 900px) {

    .cta-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .cta-buttons a {
        width: auto !important;
        max-width: 100%;
        flex: 0 1 auto;

        padding: 10px 15px;

        font-size: 13px;

        white-space: nowrap;
    }
}


/* Téléphone */
@media (max-width: 600px) {

    .cta-buttons {
        width: 100%;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

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

        gap: 8px;
    }

    .cta-buttons a {
        width: auto !important;
        max-width: calc(50% - 4px);

        flex: 0 1 auto;

        padding: 12px 12px;

        font-size: 14px;

        line-height: 1.3;

        white-space: normal;

        text-align: center;
    }
}


/* Petit téléphone */
@media (max-width: 480px) {

    .cta-buttons {
        gap: 7px;
    }

    .cta-buttons a {
        width: auto !important;

        max-width: 100%;

        padding: 10px 11px;

        font-size: 11px;
    }
}


/* Très petit téléphone */
@media (max-width: 360px) {

    .cta-buttons {
        gap: 6px;
    }

    .cta-buttons a {
        padding: 10px 10px;

        font-size: 12px;
    }
}
/* =========================================================
   CORRECTION SOUS-MENUS MOBILE
   NE MODIFIE PAS LE RESTE DU HEADER
========================================================= */

@media (max-width: 1000px) {

    /* Le panneau du menu */

    .navbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: 78% !important;
        max-width: 390px !important;
        height: 100vh !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #052F59 !important;

        transform: translateX(100%) !important;
    }

    .navbar.active {
        transform: translateX(0) !important;
    }


    /* Liste principale */

    .navbar > ul {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 65px 20px 120px !important;

        box-sizing: border-box !important;
    }


    .navbar > ul > li {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Liens principaux */

    .navbar > ul > li > a {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        padding: 16px 0 !important;
        margin: 0 !important;

        color: #fff !important;

        white-space: normal !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       SOUS-MENU
    ===================================================== */

    .navbar .dropdown-menu {

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: none !important;

        flex-direction: column !important;

        background: rgba(0, 0, 0, .12) !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* Sous-menu ouvert */

    .navbar .dropdown.active > .dropdown-menu {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;
    }


    /* Éléments du sous-menu */

    .navbar .dropdown-menu li {

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    .navbar .dropdown-menu li a {

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding: 13px 15px !important;

        color: #fff !important;

        background: transparent !important;

        font-size: 14px !important;

        line-height: 1.5 !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: clip !important;

        box-sizing: border-box !important;
    }


    .navbar .dropdown-menu li a:hover {
        background: rgba(255,255,255,.08) !important;
        color: #F59F27 !important;
    }


    /* Supprime le trait sous les liens */

    .navbar a::after,
    .navbar .dropdown-menu a::after {
        display: none !important;
        width: 0 !important;
    }


    /* IMPORTANT :
       le hover desktop ne doit pas intervenir sur mobile */

    .navbar .dropdown:hover > .dropdown-menu {
        display: none !important;
    }

    .navbar .dropdown.active:hover > .dropdown-menu {
        display: flex !important;
    }
}


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

@media (max-width: 600px) {

    .navbar {
        width: 78% !important;
        max-width: none !important;
    }

    .navbar > ul {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}


/* =========================================================
   TRÈS PETIT TÉLÉPHONE
========================================================= */

@media (max-width: 400px) {

    .navbar {
        width: 84% !important;
    }

}