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

.menu-toggle{

    display:none;

    width:56px;
    height:56px;

    border:none;

    border-radius:18px;

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

    backdrop-filter:blur(18px);

    cursor:pointer;

    position:relative;

    transition:.35s ease;

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

    z-index:10000;
       position:fixed;

    top:22px;

    right:22px;

    z-index:10001;



}

.menu-toggle:hover{

    transform:translateY(-2px);

}
.menu-toggle span{

    position:absolute;

    left:16px;

    width:24px;

    height:2px;

    background:#111827;

    border-radius:30px;

    transition:.35s ease;

}

.menu-toggle span:nth-child(1){

    top:19px;

}

.menu-toggle span:nth-child(2){

    top:27px;

}

.menu-toggle span:nth-child(3){

    top:35px;

}
.menu-toggle.active span:nth-child(1){

    transform:rotate(45deg);

    top:27px;

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:rotate(-45deg);

    top:27px;

}
@media(max-width:768px){

nav{

    display:none;

}

.menu-toggle{

    display:block;

}

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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.28);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}
/* ===================================================== */
/* PANNEAU */
/* ===================================================== */

.mobile-panel{

    position:fixed;

    top:0;

    right:-420px;

    width:380px;

    max-width:92vw;

    height:100vh;

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border-left:1px solid rgba(15,23,42,.06);

    box-shadow:
        -20px 0 80px rgba(15,23,42,.12);

    padding:38px;

    overflow-y:auto;

    transition:.45s cubic-bezier(.22,1,.36,1);

    z-index:9999;

}

.mobile-panel.active{

    right:0;

}

.mobile-panel.active{

    right:0;

}
/* ===================================================== */
/* HEADER */
/* ===================================================== */

.mobile-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:60px;

}

.mobile-panel-header img{

    height:85px;

}

.mobile-close{

    width:42px;
    height:42px;

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

    border:none;

    border-radius:14px;

    background:#f8fafc;

    color:#0f172a;

    font-size:22px;

    cursor:pointer;

    transition:.25s;
}

.mobile-close:hover{

    background:#0ea5e9;

    color:white;

    transform:rotate(90deg);
}
.mobile-label{

    display:block;

    margin-bottom:18px;

    color:#0ea5e9;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

}
.mobile-link{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 0;

    color:#111827;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.30s;

}

.mobile-link:hover{

    color:#0ea5e9;

    padding-left:10px;
    transform:translateX(8px);

}
.mobile-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    flex-shrink:0;

}

.dot-qualifop{

    background:#84aaa0;

}

.dot-cyclise{

    background:#ad67a2;

}

.dot-apprenant{

    background:#f1d983;

}

.dot-cynesia{

    background:#fe9090;

}
.mobile-demo{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:40px;

    height:58px;

    border-radius:18px;

    background:#0ea5e9;

    color:white;

    text-decoration:none;

    font-weight:600;

    box-shadow:

        0 20px 40px rgba(14,165,233,.22);

    transition:.3s;

}

.mobile-demo:hover{

    transform:translateY(-2px);

    box-shadow:

        0 28px 55px rgba(14,165,233,.28);

}
.menu-toggle.active{

    right:300px;

}
.mobile-divider{

    margin:30px 0;

    border-top:1px solid rgba(15,23,42,.08);

}