*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.teste{
    display: none;
}

.nothing{
    text-align: center;
    font-weight: bold;
}

/* POP UP*/

.main-profil::backdrop{
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8));
}
.popup-pp{
    width: calc(100% - 1em);
    height: 220px;
    max-width: 400px;
    border: 1px solid #ddd;
    border-radius: 0.5em;
    text-align: center;
    padding: 30px 20px;
    margin: 150px auto;
}

.update{
    width: calc(100% - 1em);
    height: 330px;
    max-width: 400px;
    border: 1px solid #ddd;
    border-radius: 0.5em;
    text-align: center;
    padding: 30px 20px;
    margin: 150px auto;
}

.popup-pp .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.popup-pp .title i{
    font-size: 30px;
    margin-bottom: 19px;
    cursor: pointer;
    color: #2872a1;
}

.popup-pp.update .photo img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #2872a1;
    margin-bottom: 10px;
}

.popup-pp.update .photo img:hover{
    opacity: 0.8;
}

.popup-pp h2{
    margin-bottom: 0.5em;
    color: #111;
}

.popup-pp p{
    margin-bottom: 1.25em;
    color: #555;
    padding: 0 0.5em;
    font-size: 18px;
}


.popup-pp .controls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom: 0.5em;
}


.popup-pp .controls a{
    padding: 0.75em;
    cursor: pointer;
    background-color: #2872a1;
    outline: none;
    border: 1px solid #2872a1;
    border-radius: 5px;
    color: #fff;
    font-size: 0.9em;
    text-decoration: none;
}

.popup-pp .controls button{
    padding: 0.75em;
    cursor: pointer;
    background-color: #2872a1;
    outline: none;
    border: 1px solid #2872a1;
    border-radius: 5px;
    color: #fff;
    font-size: 0.9em;
}

.popup-pp .controls a.seePhoto{
    background-color: transparent;
    color: #2872a1;
}


/* END POP UP*/

.file-input{
    display: none;
}

html{
    scroll-behavior: smooth;
}

::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-thumb{
     background-color: #2872a1;
     border-radius: 5px;
}

.is-invalid{
    border: 1px solid red;
    outline: red;
}

.bad{
    text-align: center;
    color: red;
    font-weight: bold;
    font-size: 17px;
    margin: 3px 0;
}
.good{
    text-align: center;
    color: green;
    font-weight: bold;
    font-size: 17px;
}



/* ============================================== GENERALE =============================================== */

/* HEADER */
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 70px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background-color: #fff;
}

header .logo{
    font-size: 25px;
    font-weight: bold;
    color: #2872a1;
    cursor: pointer;
}

header .end{
    display: flex;
    align-items: center;
    gap: 60px;
}

header .end ul{
    display: flex;
    gap: 30px;
}

header .end ul li{
    list-style: none;
}


header a{
    text-decoration: none;
    color: #999;
    transition: 0.5s;
}

header img.profil{
    width: 100%;
    height: 40px;
    border-radius: 100px;
    cursor: pointer;
}
header img{
    width: 100%;
    height: 40px;
    cursor: pointer;
}

header img.logo{
    width: 100%;
    height: 40px;
    cursor: pointer;
}

header a:hover{
    color: #000
}

.active{
    color: #000;
}

header .end .auth a{
    text-decoration: none;
    color: #fff;
    background-color: #2872a1;
    padding: 6px 20px;
    border-radius: 8px;
    transition: 0.5s;
}

header .end .auth a:hover{
    opacity: 0.9;
}

header .sidebar, header .main{
    display: none;
}

/* responsive HEADER */
@media screen and (max-width: 1010px) {
    header .end {
        display: none;
    }

    header .sidebar, header .main{
        display: block;
    }

    header{
        padding: 10px 25px;
    }

    header .sidebar{
        height: 100%;
        width: 0; 
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        background-color: #2872a1;
        overflow-x: hidden;
        padding-top: 60px;
        transition: 0.5s;
        display: flex;
        flex-direction: column;
    }

    header .sidebar ul{
        display: flex;
        flex-direction: column;
        margin-top: 40px;
    }

    header .sidebar ul hr{
        margin: 0 27px;
        color: #fff;
    }

    header .sidebar i{
        font-size: 35px;
        color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    header .sidebar a{
        color: #fff;
        padding: 15px 30px;
        transition: 0.5s;
        font-size: 20px;
    }

    header .main .openbtn i{
        font-size: 35px;
        color: #2872a1;
        cursor: pointer;
    }

    header .main .openbtn{
        border: none;
        outline: none;
        background-color: #fff;
    }


}

/* END HEADER */

/* FOOTER */
footer{
    display: flex;
    flex-direction: column;
    background-color: #2872a1;
    padding-top: 160px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
}

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}

.footer .site{
    max-width: 450px;
}

.footer .site h1{
    color: #fff;
    margin-bottom: 5px;
}

.footer .site p{
    color: rgba(255, 255, 255, 0.8);
    margin: 10px 0;
    text-align: justify;
}

.footer .service h4{
    color: #fff;
    margin-bottom: 5px;
}

.footer .service p{
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.footer .service p a{
    text-decoration: none;
    color: #fff;
}

.footer .service p:hover{
    text-decoration: underline;
    cursor: pointer;
}

.footer .support h4{
    color: #fff;
    margin-bottom: 5px;
}

.footer .support p{
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.footer .support p a{
    text-decoration: none;
    color: #fff;
}

.footer .support p:hover{
    text-decoration: underline;
    cursor: pointer;
}

footer hr{
    margin: 10px 10px;
    height: 3px;
    background-color: #fff;
    border-radius: 50px;
}

footer .end{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

footer .end .right-end{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

footer .end .right-end-item:hover{
    text-decoration: underline;
    cursor: pointer;
}

/* responsive FOOTER */
@media screen and (max-width: 800px) {
    .footer{
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: start;
        margin-bottom: 80px;
    }
}

/* END FOOTER */


/* ================================================= PAGES CSS ============================================== */

/* --------------------------------------------- ACCUEIL ---------------------------------------------- */
/* HERO */
.hero{
    background-color: rgba(255,255,255,0.06);
    padding: 90px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;
}

.hero h1{
    color: #000;
    font-size: 63px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.hero h1 span{
    color: #2872a1;
}

.hero p{
    font-size: 16px;
    text-align: center;
    color: rgba(0,0,0,0.8);
    padding: 0 100px;
}

.hero .cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 650px; 
    gap: 20px;
}

.hero .cta .left-btn{
    text-decoration: none;
    color: #fff;
    padding: 10px 35px;
    border-radius: 8px;
    background-color: #2872a1;
    margin-top: 20px;
    border: 2px solid #2872a1;
    transition: 0.5s;
}

.hero .cta .left-btn:hover{
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.hero .cta .right-btn{
    text-decoration: none;
    color: #2872a1;
    padding: 10px 35px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    margin-top: 20px;
    transition: 0.5s;
    border: 2px solid #fff;
}

.hero .cta .right-btn:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
}

.hero .partenaire{
    margin-top: 20px;
    width: 100%;
}

.hero .partenaire span{
    color: #000;
    font-size: 25px;
    margin-right: 60px;
}

.hero .partenaire span i{
    font-size: 25px;
    color: #2872a1;
}

/* responsive HERO */
@media screen and (max-width:992px) {
    .hero{
        background-color: rgba(255,255,255,0.06);
        padding: 140px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 17px;
    }

    .hero h1{
        color: #000;
        font-size: 45px;
        text-align: center;
        line-height: 60px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 820px) {
    .hero{
        background-color: rgba(255,255,255,0.06);
        padding: 140px 35px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 17px;
    }

    .hero h1{
        color: #000;
        font-size: 40px;
        text-align: center;
        line-height: 55px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 768px) {
    .hero{
        background-color: rgba(255,255,255,0.06);
        padding: 140px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 17px;
    }

    .hero h1{
        color: #000;
        font-size: 35px;
        text-align: center;
        line-height: 45px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    .hero p{
        font-size: 16px;
        text-align: center;
        color: rgba(0,0,0,0.8);
        padding: 0 70px;
    }

    .hero .partenaire span{
        color: #000;
        font-size: 20px;
        margin-right: 60px;
    }

    .hero .partenaire span i{
        font-size: 20px;
        color: #2872a1;
    }
}

@media screen and (max-width: 576px) {
    .hero{
        background-color: rgba(255,255,255,0.06);
        padding: 120px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 17px;
    }

    .hero p{
        font-size: 16px;
        text-align: center;
        color: rgba(0,0,0,0.8);
        padding: 0 20px;
    }

    .hero h1{
        color: #000;
        font-size: 27px;
        text-align: center;
        line-height: 35px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    .hero .partenaire span{
        color: #000;
        font-size: 20px;
        margin-right: 60px;
    }
}

@media screen and (max-width: 520px) {
    .hero .cta{
        display: flex;
        flex-direction: column;
        max-width: 100%; 
        gap: 0px;
    }
}

@media screen and (max-width: 400px) {
    .hero{
        background-color: rgba(255,255,255,0.06);
        padding: 110px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 17px;
    }

    .hero p{
        font-size: 14px;
        text-align: center;
        color: rgba(0,0,0,0.8);
        padding: 0 8px;
        text-align: justify;
    }

    .hero h1{
        color: #000;
        font-size: 28px;
        text-align: center;
        line-height: 35px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 360px) {
    .hero .cta .left-btn{
        text-decoration: none;
        color: #fff;
        padding: 10px 35px;
        border-radius: 8px;
        background-color: #2872a1;
        margin-top: 20px;
        border: 2px solid #2872a1;
        transition: 0.5s;
        font-size: 15px;
    }

    .hero .cta .right-btn{
        text-decoration: none;
        color: #2872a1;
        padding: 10px 35px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        /* margin-top: 10px; */
        transition: 0.5s;
        border: 2px solid #fff;
        font-size: 15px;
    }

    .hero p{
        font-size: 12px;
        text-align: center;
        color: rgba(0,0,0,0.8);
        padding: 0 5px;
    }

    .hero h1{
        color: #000;
        font-size: 24px;
        text-align: center;
        line-height: 35px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 320px) {
    .hero .cta .left-btn{
        text-decoration: none;
        color: #fff;
        padding: 10px 35px;
        border-radius: 8px;
        background-color: #2872a1;
        margin-top: 20px;
        border: 2px solid #2872a1;
        transition: 0.5s;
        font-size: 12px;
    }

    .hero .cta .right-btn{
        text-decoration: none;
        color: #2872a1;
        padding: 10px 35px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        margin-top: 20px;
        transition: 0.5s;
        border: 2px solid #fff;
        font-size: 12px;
    }

    .hero h1{
        color: #000;
        font-size: 21px;
        text-align: center;
        line-height: 26px;
        letter-spacing: 2px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    .hero p{
        font-size: 10px;
        text-align: center;
        color: rgba(0,0,0,0.8);
        padding: 0 5px;
    }
}

/* END HERO */

/* ABOUT */
.about{
    background-color: rgba(0,0,0,0.05);
    padding: 120px 100px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.about h2{
    color: #000;
    font-size: 2rem;
    text-align: center;
    color: #2872a1;
    margin-bottom: 1rem;
}

.about h1{
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
}

.about h1:after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    height: 2px;
    width: 5rem;
    background-color: #2872a1;
}

.about .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
}

.about .content .left{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about .content .left h3{
    color: #2872a1;
    font-size: 25px;
    text-align: justify;
}

.about .content .left p{
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    text-align: justify;
    line-height: 26px;
}

.about .content .right{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
}

.about .content .right img{
    width: 500px;
    height: 400px;
}

/* responsive ABOUT */
@media screen and (max-width: 1080px) {
    .about{
        background-color: rgba(0,0,0,0.05);
        padding: 120px 100px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .about .content{
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .about .content .right img{
        width: 800px;
        height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .about{
        background-color: rgba(0,0,0,0.05);
        padding: 120px 30px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .about .content{
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .about .content .right img{
        width: 600px;
        height: 400px;
    }

    .about .content .left p{
        color: rgba(0, 0, 0, 0.8);
        font-size: 14px;
        text-align: justify;
        line-height: 24px;
    }

    .about .content .left h3{
        color: #2872a1;
        font-size: 20px;
        text-align: justify;
    }
}

@media screen and (max-width: 576px) {
    .about{
        background-color: rgba(0,0,0,0.05);
        padding: 120px 20px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .about .content{
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .about .content .right img{
        width: 500px;
        height: 400px;
    }

    .about .content .left p{
        color: rgba(0, 0, 0, 0.8);
        font-size: 14px;
        text-align: justify;
        line-height: 24px;
    }

    .about .content .left h3{
        color: #2872a1;
        font-size: 20px;
        text-align: justify;
    }

    .about h2{
        color: #000;
        font-size: 1.5rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .about h1{
        position: relative;
        text-align: center;
        margin-bottom: 1.7rem;
        font-size: 1.7rem;
        font-weight: 600;
        color: #000;
    }
}

@media screen and (max-width: 520px) {
    .about .content .right img{
        width: 400px;
        height: 300px;
    }
}

@media screen and (max-width: 430px) {
     .about{
        background-color: rgba(0,0,0,0.05);
        padding: 120px 10px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .about .content{
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .about .content .right img{
        width: 350px;
        height: 200px;
    }

    .about h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .about h1{
        position: relative;
        text-align: center;
        margin-bottom: 1.3rem;
        font-size: 1.3rem;
        font-weight: 600;
        color: #000;
    }

     .about .content .left p{
        color: rgba(0, 0, 0, 0.8);
        font-size: 13px;
        text-align: justify;
        line-height: 22px;
    }

    .about .content .left h3{
        color: #2872a1;
        font-size: 19px;
        text-align: justify;
    }
}

@media screen and (max-width: 380px) {
    .about{
        background-color: rgba(0,0,0,0.05);
        padding: 120px 15px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .about .content{
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .about .content .right img{
        width: 280px;
        height: 180px;
    }

    .about h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .about h1{
        position: relative;
        text-align: center;
        margin-bottom: 1.1rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: #000;
    }

     .about .content .left p{
        color: rgba(0, 0, 0, 0.8);
        font-size: 12px;
        text-align: justify;
        line-height: 18px;
    }

    .about .content .left h3{
        color: #2872a1;
        font-size: 15px;
        text-align: justify;
    }
}

@media screen and (max-width: 325px) {
    .about .content .right img{
        width: 200px;
        height: 180px;
    }

    .about h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .about h1{
        position: relative;
        text-align: center;
        margin-bottom: 1.1rem;
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }
}

/* END ABOUT */

/* TESTIMONIAL */
.testimonial{
    padding: 120px 100px;
}

.testimonial h2{
    color: #000;
    font-size: 2rem;
    text-align: center;
    color: #2872a1;
    margin-bottom: 1rem;
}

.testimonial h1{
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
}

.testimonial h1:after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    height: 2px;
    width: 5rem;
    background-color: #2872a1;
}

.section__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.section__card{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5rem 2rem 2rem;
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0,0,0,.1);
    transition: .3s;
}

.section__card::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 75%;
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: #2872a1;
    z-index: -1;
    transition: 0.5s;
}

.section__card span{
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    font-size: 3rem;
    color: #fff;
}

.section__card h4{
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2872a1;
    transition: 0.3s;
    text-align: center;
}

.section__card p{
    margin-bottom: 2rem;
    color: #000;
    transition: 0.3s;
    text-align: justify;
}

.section__card img{
    margin-bottom: 1rem;
    max-width: 100px;
    border-radius: 100%;
    border: 2px solid #2872a1;
    transition: 0.3s;
}

.section__card h5{
    font-size: 1.25rem;
    font-weight: 600;
    color: #2872a1;
    transition: 0.3s;
}

.section__card h6{
    font-size: 1rem;
    font-weight: 400;
    color: #000;
    transition: 0.3s;
}

.section__card:hover::before{
    width: 400%;
}

.section__card:hover :is(h4, h5){
    color: #fff;
}

.section__card:hover :is(p, h6){
    color: rgba(255,255,255,0.7);
}

.section__card:hover  img{
    border-color: #fff;
}

/* reponsive TEMOIGNAGE */
@media screen and (max-width: 1030px) {
    .section__grid{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .section__card{
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 5rem 2rem 2rem;
        background-color: rgba(0,0,0,0.05);
        border-radius: 5px;
        box-shadow: 5px 5px 10px rgba(0,0,0,.1);
        transition: .3s;
        max-width: 450px;
    }
}

@media screen and (max-width: 810px) {
    .testimonial{
        padding: 120px 80px;
    }

    .testimonial h2{
        color: #000;
        font-size: 1.5rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .testimonial h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 2rem;
        font-weight: 600;
        color: #000;
    }
}

@media screen and (max-width: 640px) {
    .testimonial{
        padding: 120px 80px;
    }

    .testimonial h2{
        color: #000;
        font-size: 1.2rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .testimonial h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.5rem;
        font-weight: 600;
        color: #000;
    }
}

@media screen and (max-width: 525px) {
    .testimonial{
        padding: 120px 60px;
    }

    .testimonial h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .testimonial h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
    }
}

@media screen and (max-width: 410px) {
    .testimonial{
        padding: 120px 40px;
    }

    .testimonial h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .testimonial h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }

    .section__card h4{
        margin-top: 4rem;
        margin-bottom: 1rem;
        font-size: 1.3rem;
        font-weight: 600;
        color: #2872a1;
        transition: 0.3s;
        text-align: center;
    }

    .section__card p{
        margin-bottom: 2rem;
        color: #000;
        transition: 0.3s;
        text-align: justify;
        font-size: 13px;
    }
}

@media screen and (max-width: 342px) {
    .testimonial{
        padding: 120px 40px;
    }

    .testimonial h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .testimonial h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }

    .section__card h4{
        margin-top: 4rem;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: #2872a1;
        transition: 0.3s;
        text-align: center;
    }

    .section__card p{
        margin-bottom: 2rem;
        color: #000;
        transition: 0.3s;
        text-align: justify;
        font-size: 13px;
    }
}

@media screen and (max-width: 324px) {
    .testimonial{
        padding: 120px 40px;
    }

    .testimonial h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .testimonial h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }

    .section__card h4{
        margin-top: 4rem;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: #2872a1;
        transition: 0.3s;
        text-align: center;
    }

    .section__card p{
        margin-bottom: 2rem;
        color: #000;
        transition: 0.3s;
        text-align: justify;
        font-size: 13px;
    }
}

/* END TESTIMONIAL */

/* WHY */
.why{
    background-color: rgba(0,0,0,0.05);
    padding: 120px 100px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.why h2{
    color: #000;
    font-size: 2rem;
    text-align: center;
    color: #2872a1;
    margin-bottom: 1rem;
}

.why h1{
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
}

.why h1:after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    height: 2px;
    width: 5rem;
    background-color: #2872a1;
}

.why .reasons{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
    padding: 0 50px;
}

.why .reasons .reason{
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #fff;
    padding: 20px 50px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    width: 350px;
    height: 390px;
}

.why .reasons .reason:hover{
    transform: translateY(-8px);
}

.why .reasons .reason i{
    font-size: 55px;
    color: #2872a1;
    padding: 10px 0;
    text-align: center;
}

.why .reasons .reason h3{
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
}

.why .reasons .reason p{
    text-align: justify;
    font-size: 17px;
    line-height: 24px;
}

/* responsive WHY */
@media screen and (max-width: 1110px) {
    .why .reasons{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        margin-top: 20px;
        padding: 0 50px;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 550px;
        height: 300px;
    }
}

@media screen and (max-width: 670px) {
    .why h2{
        color: #000;
        font-size: 1.7rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 2rem;
        font-weight: 600;
        color: #000;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 470px;
        height: 300px;
    }
}

@media screen and (max-width: 580px) {
    .why h2{
        color: #000;
        font-size: 1.5rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.7rem;
        font-weight: 600;
        color: #000;
    }
}

@media screen and (max-width: 520px) {
    .why h2{
        color: #000;
        font-size: 1.5rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.7rem;
        font-weight: 600;
        color: #000;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 430px;
        height: 300px;
    }
}

@media screen and (max-width: 470px) {
    .why h2{
        color: #000;
        font-size: 1.2rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 400px;
        height: 350px;
    }
}

@media screen and (max-width: 435px) {
    .why h2{
        color: #000;
        font-size: 1.2rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 350px;
        height: 320px;
    }

    .why .reasons .reason p{
        text-align: justify;
        font-size: 14px;
        line-height: 22px;
    }

    .why .reasons .reason i{
        font-size: 30px;
        color: #2872a1;
        padding: 10px 0;
        text-align: center;
    }
}

@media screen and (max-width: 385px) {
    .why h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 320px;
        height: 300px;
    }

    .why .reasons .reason p{
        text-align: justify;
        font-size: 12px;
        line-height: 22px;
    }

    .why .reasons .reason i{
        font-size: 23px;
        color: #2872a1;
        padding: 10px 0;
        text-align: center;
    }

    .why .reasons .reason h3{
        font-size: 15px;
        padding: 8px 0;
        text-align: center;
        text-transform: uppercase;
    }
}

@media screen and (max-width: 350px) {
    .why h2{
        color: #000;
        font-size: 1rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .why h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: #000;
    }

    .why .reasons .reason{
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: #fff;
        padding: 20px 50px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        width: 300px;
        height: 300px;
    }

    .why .reasons .reason p{
        text-align: justify;
        font-size: 12px;
        line-height: 22px;
    }

    .why .reasons .reason i{
        font-size: 21px;
        color: #2872a1;
        padding: 10px 0;
        text-align: center;
    }

    .why .reasons .reason h3{
        font-size: 15px;
        padding: 8px 0;
        text-align: center;
        text-transform: uppercase;
    }
}


/* END WHY */


/* LAST OFFERS */

.lastOffers{
    background-color: #fff;
    padding: 120px 100px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.lastOffers h2{
    color: #000;
    font-size: 2rem;
    text-align: center;
    color: #2872a1;
    margin-bottom: 1rem;
}

.lastOffers h1{
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
}

.lastOffers h1:after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    height: 2px;
    width: 5rem;
    background-color: #2872a1;
}

.lastOffers .offers{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.lastOffers .offers .offer{
    background-color: rgba(0,0,0,0.05);
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: 0.5s;
}

.lastOffers .offers .offer i{
    color: rgba(0,0,0,0.7);
    font-size: 14px;
}

.lastOffers .offers .offer:hover{
    transform: translateY(-5px);
}

.lastOffers .offers .offer img{
    border-radius: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: 200px;
}

.lastOffers .offers .offer h3{
    font-size: 19px;
    text-align: center;
    text-transform: uppercase;
}

.lastOffers .offers .offer p.entreprise{
    color: #2872a1;
    text-align: center;
    font-size: 15px;
}

.lastOffers .offers .offer p.detail{
    font-size: 17px;
    text-align: center;
    margin-top: 5px;
    color: rgba(0, 0, 0, 0.7);
}

.lastOffers .offers .offer a{
    text-decoration: none;
    width: 100%;
    background-color: #2872a1;
    color: #fff;
    padding: 5px 15px;
    text-align: center;
    margin-top: 8px;
    border: 2px solid #2872a1;
    border-radius: 5px;
    transition: 0.5s;
}

.lastOffers .offers .offer a:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
}

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

.lastOffers .cta a{
    text-decoration: none;
    background-color: #2872a1;
    color: #fff;
    padding: 12px 40px;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid #2872a1;
    transition: 0.5s;
}

.lastOffers .cta a:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
    letter-spacing: 1px;
}

/* responsive LAST OFFERS */
@media screen and (max-width: 1190px) {
    .lastOffers{
        background-color: #fff;
        padding: 120px 70px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
}
@media screen and (max-width: 1190px) {
    .lastOffers{
        background-color: #fff;
        padding: 120px 50px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
}

@media screen and (max-width: 1120px) {
    .lastOffers .offers{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .lastOffers .offers .offer{
        background-color: rgba(0,0,0,0.05);
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transition: 0.5s;
        width: 600px;
    }
}

@media screen and (max-width: 630px) {
    .lastOffers .offers{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .lastOffers .offers .offer{
        background-color: rgba(0,0,0,0.05);
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transition: 0.5s;
        width: 500px;
    }
}

@media screen and (max-width: 520px) {
    .lastOffers .offers{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .lastOffers .offers .offer{
        background-color: rgba(0,0,0,0.05);
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transition: 0.5s;
        width: 400px;
    }

    .lastOffers h2{
        color: #000;
        font-size: 1.7rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .lastOffers h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 2rem;
        font-weight: 600;
        color: #000;
    }

    .lastOffers .offers .offer h3{
        font-size: 17px;
        text-align: center;
        text-transform: uppercase;
    }
}

@media screen and (max-width: 425px) {
    .lastOffers .offers{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .lastOffers .offers .offer{
        background-color: rgba(0,0,0,0.05);
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transition: 0.5s;
        width: 300px;
    }

    .lastOffers h2{
        color: #000;
        font-size: 1.5rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .lastOffers h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.7rem;
        font-weight: 600;
        color: #000;
    }

    .lastOffers .offers .offer img{
        border-radius: 10px;
        margin-bottom: 10px;
        width: 250px;
        height: 180px;
    }

    .lastOffers .offers .offer h3{
        font-size: 15px;
        text-align: center;
        text-transform: uppercase;
    }
}

@media screen and (max-width: 330px) {
    .lastOffers .offers{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .lastOffers .offers .offer{
        background-color: rgba(0,0,0,0.05);
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transition: 0.5s;
        width: 250px;
    }

    .lastOffers h2{
        color: #000;
        font-size: 1.5rem;
        text-align: center;
        color: #2872a1;
        margin-bottom: 1rem;
    }

    .lastOffers h1{
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1.7rem;
        font-weight: 600;
        color: #000;
    }

    .lastOffers .offers .offer img{
        border-radius: 10px;
        margin-bottom: 10px;
        width: 250px;
        height: 180px;
    }

    .lastOffers .offers .offer h3{
        font-size: 14px;
        text-align: center;
        text-transform: uppercase;
    }
}

/* END LAST OFFERS */

/* -------------------------------------------- END ACCUEIL ---------------------------------------------- */


/* -------------------------------------------- STAGES ---------------------------------------------- */

/* EN TETE */
.header{
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 20px;
}

.header .navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.header .navbar h2{
    font-size: 40px;
    color: #000;
}

.header .navbar input{
    width: 330px;
    height: 37px;
    border: 0;
    outline: 0;
    background-color: rgba(0,0,0,0.05);
    padding: 5px 10px;
    border-radius: 8px;
}

.header .navbar input::placeholder{
    font-size: 16px;
}

.header .navbar button{
    width: 100px;
    height: 35px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    background-color: #2872a1;
    margin-left: 3px;
    transition: 0.5s;
}

.header .navbar button:hover{
    cursor: pointer;
    opacity: 0.9;
}

.header p{
    color: rgba(0, 0, 0, 0.8);
}

/* CORPS (BODY) */
.body{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
    padding-top: 10px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 80px;
}

/* left-body (aside) */
.body .left-body{
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 30px;
    background-color: rgba(0,0,0,0.05);
    padding-top: 55px;
    padding-left: 20px;
    padding-right: 50px;
    padding-bottom: 55px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.body .left-body label:hover{
    cursor: pointer;
}

.body .left-body h3{
    color: #000;
    font-size: 25px;
}

.body .left-body .localisation{
    margin-bottom: 20px;
}

.body .left-body .localisation h4{
    color: #000;
    font-size: 17px;
    margin-bottom: 5px;
}

.body .left-body .localisation .location{
    margin-bottom: 2px;
}

.body .left-body .localisation .location:hover{
    cursor: pointer;
}

.body .left-body .categories{
    margin-bottom: 10px;
}

.body .left-body .categories h4{
    color: #000;
    font-size: 17px;
    margin-bottom: 5px;
}

.body .left-body .categories .categorie{
    margin-bottom: 2px;
}

.body .left-body .categories .categorie:hover{
    cursor: pointer;
}

.body .left-body .type h4{
    color: #000;
    font-size: 17px;
    margin-bottom: 5px;
}

.body .left-body .type .type-item{
    margin-bottom: 2px;
}

.body .left-body .type .type-item:hover{
    cursor: pointer;
}

.body .left-body button{
    border: 0;
    outline: 0;
    background-color: #2872a1;
    padding: 7px 30px;
    border-radius: 10px;
    color: #fff;
    transition: 0.5s;
}

.body .left-body button:hover{
    cursor: pointer;
    opacity: 0.9;
}

/* right-body (corps meme meme) */
.body .right-body{
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
    background-color: rgba(0,0,0,0.05);
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 50px;
    padding-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.body .right-body .stages{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

.body .right-body .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.body .right-body .title a{
    padding: 7px 25px;
    text-decoration: none;
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
    border-radius: 7px;
    transition: 0.5s;
}

.body .right-body .title a:hover{
    cursor: pointer;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

.body .right-body .stages .stage{
    background-color: #fff;
    padding: 20px 20px;
    border-radius: 8px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    transition: 0.5s;
}

.body .right-body .stages .stage:hover{
    transform: translateX(-5px);
}

.body .right-body .stages .stage .start{
    display: flex;
}

.body .right-body .stages .stage .start img{
    width: 100px;
    height: auto;
    border-radius: 10px;
    margin-right: 20px;
}

.body .right-body .stages .stage .start .infos{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.body .right-body .stages .stage .start .infos i{
    padding-right: 3px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

.body .right-body .stages .stage .start .infos h5{
    font-size: 17px;
    color: #000;
}

.body .right-body .stages .stage .start .infos h6{
    font-weight: 600;
    font-size: 12px;
    color: #2872a1;
}

.body .right-body .stages .stage .start .infos p{
    color: rgba(0, 0, 0, 0.8);
}

.body .right-body .stages .stage a{
    border: 2px solid #2872a1;
    background-color: #2872a1;
    padding: 5px 20px;
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    transition: 0.5s;
}

.body .right-body .stages .stage a:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
    cursor: pointer;
}

/* responsive STAGES */

@media screen and (max-width: 1185px) {
    .body{
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 1150px) {
    .body .left-body{
        display: none;
    }

    .body .right-body{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 50px;
        padding-bottom: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 100%;
    }

    .body .right-body .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 120px;
    }
}

@media screen and (max-width: 900px) {
    .body .right-body .stages .stage{
        background-color: #fff;
        padding: 20px 20px;
        border-radius: 8px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 700px;
        transition: 0.5s;
    }

    .body .right-body{
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 775px) {
    .body .right-body .stages .stage{
        background-color: #fff;
        padding: 20px 20px;
        border-radius: 8px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 600px;
        transition: 0.5s;
    }
}

@media screen and (max-width: 685px) {
    .body .right-body .stages .stage{
        background-color: #fff;
        padding: 20px 20px;
        border-radius: 8px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 500px;
        transition: 0.5s;
    }

    .body .right-body .stages .stage a{
        border: 2px solid #2872a1;
        background-color: #2872a1;
        padding: 5px 20px;
        border-radius: 7px;
        color: #fff;
        text-decoration: none;
        transition: 0.5s;
        width: 60%;
        text-align: center;
    }

    .header .navbar .h2{
        text-align: center;
    }

     .body .right-body .title{
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .body .right-body{
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 579px) {
    .body .right-body .stages .stage{
        background-color: #fff;
        padding: 20px 20px;
        border-radius: 8px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 400px;
        transition: 0.5s;
    }

    .header .navbar .h2{
        text-align: center;
    }

    .body .right-body{
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 480px) {
    .body .right-body .stages .stage{
        background-color: #fff;
        padding: 20px 10px;
        border-radius: 8px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 300px;
        transition: 0.5s;
    }

    .body .right-body .stages .stage .start{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .body .right-body .stages .stage .start .infos{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    .body .right-body .stages .stage .start img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
        margin-right: 20px;
    }

    .header .navbar .h2{
        text-align: center;
    }

    .body .right-body{
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        padding: 30px 10px 30px 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 376px) {
    .body .right-body .stages .stage{
        background-color: #fff;
        padding: 20px 10px;
        border-radius: 8px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 250px;
        transition: 0.5s;
    }

    .body .right-body .stages .stage .start img{
        width: 80px;
        height: 80px;
        border-radius: 10px;
        margin-right: 20px;
    }

    .body .right-body .stages .stage .start .infos h5{
        font-size: 14px;
        color: #000;
    }

    .body .right-body .stages .stage .start .infos p{
        color: rgba(0, 0, 0, 0.8);
        font-size: 13px;
    }

    .body .right-body .title p{
        font-size: 14px;
        text-align: center;
    }

    .header .navbar .h2{
        font-size: 20px;
        text-align: center;
        color: #000;
    }

    .header  p{
        font-size: 15px;
    }

    .body .right-body{
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        padding: 30px 10px 30px 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}


/* -------------------------------------------- END STAGES ---------------------------------------------- */


/* -------------------------------------------- DEMANDES ---------------------------------------------- */

.demande{
    padding-top: 100px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 150px;
    background-color: rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.demande h3{
    font-size: 27px;
    text-align: center;
}

.demande .headD{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demande .headD .headerD{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demande .headD .headerD h2{
    font-size: 40px;
    color: #000;
    letter-spacing: 1px;
}

.demande .headD .headerD a{
    text-decoration: none;
    background-color: #2872a1;
    border: 2px solid #2872a1;
    padding: 8px 30px;
    border-radius: 10px;
    color: #fff;
    transition: 0.5s;
}

.demande .headD .headerD a:hover{
    background-color: #fff;
    border: 2px solid #2872a1;
    color: #2872a1;
}

.demande .headD p{
    font-size: 17px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.8);
}

.demande .stats{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-bottom: 10px;
}

.demande .stats.tb{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-bottom: 10px;
}

.demande .stats .stat{
    padding: 13px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 10px;
    transition: 0.5s;
}

.demande .stats .stat i{
    /* padding-right: 3px; */
    font-size: 40px;
    color: #fff;
    /* color: rgba(0, 0, 0, 0.6); */
}

.demande .stats .stat:hover{
    transform: translateY(-5px);
}

.demande .stats .stat h4{
    font-size: 17px;
    font-weight: normal;
    letter-spacing: 1px;
}

.demande .stats .stat p{
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px;

}

.demande .stats .stat .start{
    padding: 10px;
    border-radius: 5px;
}

.demande .stats .stat .start.startB{
    background-color: #2563EB;
}

.demande .stats .stat .start.startO{
    background-color: #F59E0B;
}

.demande .stats .stat .start.startV{
    background-color: #10B981;
}

.demande .stats .stat .start.startR{
    background-color: #EF4444;
}

.demande .stats .stat.statB{
    background-color: #DBEAFE;
}

.demande .stats .stat.statO{
    background-color: #FEF3C7;
}

.demande .stats .stat.statV{
    background-color: #D1FAE5;  
}

.demande .stats .stat.statR{
    background-color: #FEE2E2;  
}

.demande .tableau.mobile{
    display: none;
}

.demande .tableau{
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px 40px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demande .tableau table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.demande .tableau table thead th{
    text-align: start;
}

.demande .tableau table tbody tr{
    background-color: rgba(0,0,0,0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: 0.5s;
    
}

.demande .tableau table tbody tr:hover{
    transform: translateX(-5px);
}

.demande .tableau table td{
    padding: 13px 15px;
}

.demande .tableau table th{
    padding: 15px 15px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: normal;
}

.demande .tableau table td.stage.titre{
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}
.demande .tableau table td.stage a{
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}

.demande .tableau table td.entreprise i{
    padding-right: 3px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

.demande .tableau table td.date i{
    padding-right: 5px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

.demande .tableau table td.stage img{
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.demande .tableau table td.date{
    color: rgba(0, 0, 0, 0.8);
}

.demande .tableau table td.date.CV{
    display: flex;
    gap: 5px;
}

.demande .tableau table td.date.CV a{
    border: 2px solid #2872a1;
    color: #2872a1;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
}

.demande .tableau table td.date.CV a:hover{
    background-color: #2872a1;
    color: #fff;
}

.demande .tableau table td.statutE span{
    background-color: #FEF3C7;
    color: #F59E0B;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.demande .tableau table form button.activer{
    background-color: #D1FAE5;
    color: #10B981;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    border: none;
    cursor: pointer;
}
.demande .tableau table form button.desactiver{
    background-color: #FEE2E2;
    color: #EF4444;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.demande .tableau table td.statutV span{
    background-color: #D1FAE5;
    color: #10B981;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.demande .tableau table td.statutR span{
    background-color: #FEE2E2;
    color: #EF4444;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.demande .tableau table td.delete .cta{
    display: flex;
    gap: 5px;
}

.demande .tableau table td.delete span.contactS a.contact{
    text-decoration: none;
    padding: 5px 10px;
    background-color: #fff;
    margin-right: 20px;
    text-align: center;
    border: 2px solid #2872a1;
    color: #2872a1;
    border-radius: 10px;
    transition: 0.5s;
}

.demande .tableau table td.delete span.contactS a.contact:hover{
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
}


.demande .tableau table td.delete span.dem{
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 5px 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

.demande .tableau table td.delete span.dem:hover{
    background-color: red;
    border: 2px solid red;
    color: #fff;
}

.demande .tableau table td.delete .cta span.del{
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 5px 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

.demande .tableau table td.delete .cta button.del{
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 5px 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

.demande .tableau table td.delete .cta span.delete{
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 5px 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

.demande .tableau table td.delete .cta span.des{
    background-color: transparent;
    border: 2px solid #2872a1;
    color: #2872a1;
    padding: 5px 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

.demande .tableau table td.delete .cta button.des{
    background-color: transparent;
    border: 2px solid #2872a1;
    color: #2872a1;
    padding: 5px 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

.demande .tableau table td.delete .cta span.del:hover{
    background-color: red;
    border: 2px solid red;
    color: #fff;
}

.demande .tableau table td.delete .cta button.del:hover{
    background-color: red;
    border: 2px solid red;
    color: #fff;
}


.demande .tableau table td.delete .cta span.des:hover{
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
}

.demande .tableau table td.delete .cta button.des:hover{
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
}

.demande .tableau.small{
    display: none;
}

/* responsive DEMANDE */
@media screen and (max-width: 1125px) {
    .demande .tableau.ordi{
        display: none;
    }

    .demande .tableau.mobile{
        display: block;
    }

    .demande .tableau.small{
        display: none;
    }
}

@media screen and (max-width: 865px) {
    .demande .stats{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .demande .headD .headerD h2{
        font-size: 30px;
        color: #000;
        letter-spacing: 1px;
    }
}

@media screen and (max-width: 550px) {
    .demande .tableau.mobile{
        display: none;
    }

    .demande .tableau.small{
        display: block;
    }

    .demande{
        padding-top: 100px;
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 150px;
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .demande .headD .headerD h2{
        font-size: 28px;
        color: #000;
        letter-spacing: 1px;
    }

    .demande .headD .headerD p{
        font-size: 13px;
    }
}

@media screen and (max-width: 440px) {

    .demande{
        padding-top: 100px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 150px;
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .demande .headD .headerD h2{
        font-size: 26px;
        color: #000;
        letter-spacing: 1px;
    }

    .demande .headD .headerD p{
        font-size: 12px;
    }
}

@media screen and (max-width: 365px) {

    .demande{
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 150px;
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .demande .headD .headerD h2{
        font-size: 25px;
        color: #000;
        letter-spacing: 1px;
    }

    .demande .headD .headerD p{
        font-size: 13px;
    }
}

/* -------------------------------------------- END DEMANDES ---------------------------------------------- */


/* -------------------------------------------- POSTULER ---------------------------------------------- */

.tete{
    padding: 100px 80px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tete h2{
    font-size: 40px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
}

.corps{
    padding: 10px 80px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: rgba(0,0,0,0.05);
}

.corps h3{
    font-size: 22px;
    padding: 10px 0;
}

.corps .infos{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    margin-bottom: 10px;
}

.corps .info{
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    transition: 0.5s;
}

.corps .info.des{
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    transition: 0.5s;
    width: 100%;
}

.corps .info:hover{
    transform: translateY(-3px);
}

.corps .info i{
    color: #2872a1;
    padding: 0 10px 0 2px;
    font-size: 24px;
}

.corps .info span{
    font-size: 17.5px;
}

.corps form{
    display: flex;
    flex-direction: column;
}

.corps form .label-cv{
    margin-bottom: 5px;
    font-size: 18px;
    margin-left: 10px;
    margin-top: 5px;
}

.corps form .file-upload{
    border: 2px solid #2872a1;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.corps form .file-input{
    display: none;
}

.corps form .file-label{
    background-color: #2872a1;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    transition: 0.3s;
    font-size: 15px;
}

.corps form .file-label:hover{
    background-color: #1E40AF;
}

.corps form .file-name{
    margin-left: 10px;
    font-size: 14px;
    color: #555;
}

.corps form .file-name-motivation{
    margin-left: 10px;
    font-size: 14px;
    color: #555;
}

.corps form textarea{
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 17px;
    height: 150px;
    margin-bottom: 20px;
}

.corps form .cta{
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 15px 0;
    gap: 30px;
}

.corps form .cta a{
    text-decoration: none;
    color: #000;
    padding: 9px 25px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    font-size: 17px;
    transition: 0.5s;
}

.corps form .cta a:hover{
    opacity: 0.8;
}

.corps form .cta button{
    color: #fff;
    padding: 9px 50px;
    border-radius: 10px;
    border: 2px solid #2872a1;
    background-color: #2872a1;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    font-size: 17px;
    cursor: pointer;
    transition: 0.5s;
}

.corps form .cta button:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
}

/* responsive POSTULER */
@media screen and (max-width: 715px) {
    .corps .infos{
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 10px;
    }

    .corps .infos .info span{
        font-size: 15px;
    }

    .corps .info.des{
        background-color: #fff;
        padding: 15px 15px;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        transition: 0.5s;
        width: 100%;
        font-size: 12px;
    }

    .tete h2{
        font-size: 30px;
    }
}

@media screen and (max-width: 585px) {
    .tete h2{
        font-size: 20px;
    }
}

@media screen and (max-width: 450px) {
    .tete h2{
        font-size: 20px;
    }

    .tete{
        padding: 100px 50px 20px 50px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .corps h3{
        font-size: 17px;
        padding: 10px 0;
    }
}

@media screen and (max-width: 400px) {
    .corps form .file-label{
        font-size: 11px;
    }

    .corps form .file-name{
        font-size: 11px;
    }

    .corps form .file-name-motivation{
        font-size: 11px;
    }

    .corps form .label-cv{
        font-size: 15px;
    }
}

@media screen and (max-width: 625px) {
    .corps form .cta{
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        align-items: center;
    }

    .corps form .cta a{
        text-decoration: none;
        color: #000;
        padding: 9px 25px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
        font-size: 17px;
        transition: 0.5s;
        width: 100%;
        text-align: center;
    }

    .corps form .cta button{
        color: #fff;
        padding: 9px 50px;
        border-radius: 10px;
        border: 2px solid #2872a1;
        background-color: #2872a1;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        font-size: 17px;
        cursor: pointer;
        transition: 0.5s;
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 420px) {
    .corps form .cta button{
        font-size: 14px;
    }

    .corps form .cta a{
        font-size: 14px;
    }
}

@media screen and (max-width: 380px) {
    .corps{
        padding: 10px 20px 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: rgba(0,0,0,0.05);
    }
}

@media screen and (max-width: 390px) {
    .tete h2{
        font-size: 20px;
    }

    .tete{
        padding: 100px 20px 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 365px) {
    .corps h3{
        font-size: 14px;
        padding: 10px 0;
    }
}

@media screen and (max-width: 330px) {
    .tete h2{
        font-size: 20px;
    }

    .tete{
        padding: 100px 10px 20px 10px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 565px) {
   .corps{
        padding: 10px 50px 20px 50px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: rgba(0,0,0,0.05);
    }

    .corps .info.des{
        background-color: #fff;
        padding: 15px 15px;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        transition: 0.5s;
        width: 100%;
        
    }

    .corps .info.des span{
        font-size: 15px;
    }

    .corps .infos .info span{
        font-size: 13px;
    }
}

@media screen and (max-width: 340px) {

    .corps .info.des span{
        font-size: 13px;
    }

    .corps .infos .info span{
        font-size: 11px;
    }
}

/* -------------------------------------------- END POSTULER ---------------------------------------------- */


/* --------------------------------------------  ENTREPRISES ---------------------------------------------- */

/* EN TETE */
.header{
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 20px;
}

.header .navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.header .navbar h2{
    font-size: 40px;
    color: #000;
}

.header .navbar input{
    width: 330px;
    height: 37px;
    border: 0;
    outline: 0;
    background-color: rgba(0,0,0,0.05);
    padding: 5px 10px;
    border-radius: 8px;
}

.header .navbar input::placeholder{
    font-size: 16px;
}

.header .navbar button{
    width: 100px;
    height: 35px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    background-color: #2872a1;
    margin-left: 3px;
    transition: 0.5s;
}

.header .navbar button:hover{
    cursor: pointer;
    opacity: 0.9;
}

.header p{
    color: rgba(0, 0, 0, 0.8);
}

/* CORPS (BODY) */
.bodyE{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 25px;
    padding-top: 10px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 80px;
}

/* left-body (aside) */
.bodyE .left-body{
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 30px;
    background-color: rgba(0,0,0,0.05);
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 80px;
    padding-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.bodyE .left-body label:hover{
    cursor: pointer;
}

.bodyE .left-body h3{
    color: #000;
    font-size: 25px;
}

.bodyE .left-body .localisation{
    margin-bottom: 20px;
}

.bodyE .left-body .localisation h4{
    color: #000;
    font-size: 17px;
    margin-bottom: 5px;
}

.bodyE .left-body .localisation .location{
    margin-bottom: 2px;
}

.bodyE .left-body .localisation .location:hover{
    cursor: pointer;
}

.bodyE .left-body .secteurs{
    margin-bottom: 10px;
}

.bodyE .left-body .secteurs h4{
    color: #000;
    font-size: 17px;
    margin-bottom: 5px;
}

.bodyE .left-body .secteurs .secteur{
    margin-bottom: 2px;
}

.bodyE .left-body .secteurs .secteur:hover{
    cursor: pointer;
}


.bodyE .left-body button{
    border: 0;
    outline: 0;
    background-color: #2872a1;
    padding: 7px 30px;
    border-radius: 10px;
    color: #fff;
    transition: 0.5s;
}

.bodyE .left-body button:hover{
    cursor: pointer;
    opacity: 0.9;
}

/* right-body (corps meme meme) */
.bodyE .right-body{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
    background-color: rgba(0,0,0,0.05);
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.bodyE .right-body .entreprises{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bodyE .right-body .entreprises .entreprise{
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 280px;
    transition: 0.5s;
}

.bodyE .right-body .entreprises .entreprise:hover{
    transform: translateY(-5px);
}

.bodyE .right-body .entreprises .entreprise hr{
    margin-top: 20px;
    margin-bottom: 5px;
}

.bodyE .right-body .entreprises .entreprise .start{
    display: flex;
}

.bodyE .right-body .entreprises .entreprise .start img{
    width: 100px;
    height: auto;
    border-radius: 10px;
    margin-right: 15px;
}

.bodyE .right-body .entreprises .entreprise .start .infos{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bodyE .right-body .entreprises .entreprise .start .infos h5{
    font-size: 17px;
    color: #000;
}

.bodyE .right-body .entreprises .entreprise .start .infos h6{
    font-weight: 600;
    font-size: 12px;
    color: #2872a1;
}

.bodyE .right-body .entreprises .entreprise .start .infos p{
    color: rgba(0, 0, 0, 0.8);
}


.bodyE .right-body .entreprises .entreprise .end{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.bodyE .right-body .entreprises .entreprise a{
    border: 2px solid #2872a1;
    background-color: #2872a1;
    padding: 2px 5px;
    border-radius: 7px;
    color: #fff;
    transition: 0.5s;
    text-decoration: none;
    font-size: 15px;
}

.bodyE .right-body .entreprises .entreprise a:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
    cursor: pointer;
}

/* RESPONSIVE */
@media screen and (max-width: 1200px) {
    .header{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .header p{
        text-align: center;
    }

    .bodyE{
        display: flex;
        justify-content: space-around;
        align-items: start;
    }

    .bodyE .left-body{
        padding-top: 50px;
        padding-left: 30px;
        padding-right: 90px;
        padding-bottom: 100px;
        min-width: 300px;
    }

    .bodyE .left-body h3{
        color: #000;
        font-size: 30px;
    }

    .bodyE .left-body .localisation h4{
        color: #000;
        font-size: 23px;
        margin-bottom: 8px;
    }

    .bodyE .left-body .localisation .location{
        margin-bottom: 5px;
    }

    .bodyE .left-body label{
        font-size: 20px;
    }

    .bodyE .left-body .secteurs h4{
        color: #000;
        font-size: 23px;
        margin-bottom: 8px;
    }

    .bodyE .left-body .secteurs .secteur{
        margin-bottom: 5px;
    }

    .bodyE .left-body button{
        border: 0;
        outline: 0;
        background-color: #2872a1;
        padding: 13px 50px;
        border-radius: 10px;
        color: #fff;
        transition: 0.5s;
    }


    .bodyE .right-body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 700px;
    }

    .bodyE .right-body .entreprises{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .header .navbar{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .header .navbar h2{
        font-size: 35px;
        color: #000;
        margin-bottom: 20px;
    }

    .header .navbar input{
        width: 500px;
        height: 40px;
        border: 0;
        outline: 0;
        background-color: rgba(0,0,0,0.05);
        padding: 5px 10px;
        border-radius: 8px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1090px) {
    .bodyE .left-body{
        display: none;
    }

    .bodyE .right-body .entreprises{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media screen and (max-width: 1050px) {
    .bodyE .right-body .entreprises{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .bodyE .right-body .entreprises .entreprise{
        width: 420px;
    }
}

@media screen and (max-width: 1020px) {
    .bodyE .right-body .entreprises .entreprise{
        width: 350px;
    }
}

@media screen and (max-width: 880px) {
    .bodyE .right-body .entreprises{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 18px;
    }

    .bodyE .right-body .entreprises .entreprise{
        width: 600px;
    }
}

@media screen and (max-width: 780px) {
    .bodyE .right-body .entreprises{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 18px;
    }

    .bodyE .right-body .entreprises .entreprise{
        width: 500px;
    }

    .bodyE .right-body{
        max-width: 500px;
    }

    .bodyE{
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 80px;
    }

}

@media screen and (max-width: 750px) {
     .bodyE .right-body .entreprises .entreprise{
        width: 450px;
    }

    .bodyE .right-body{
        min-width: 600px;
    }

    .header .navbar input{
        width: 350px;
    }
}

@media screen and (max-width: 635px) {
     .bodyE .right-body .entreprises .entreprise{
        width: 400px;
    }

    .bodyE .right-body{
        min-width: 500px;
    }

    .header .navbar input{
        width: 250px;
    }

    .header{
        display: flex;
        flex-direction: column;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 540px) {
     .bodyE .right-body .entreprises .entreprise{
        width: 320px;
    }

    .bodyE .right-body{
        min-width: 450px;
    }

    .header .navbar h2{
        font-size: 30px;
    }

    .header .navbar input{
        width: 270px;
    }

    .header{
        display: flex;
        flex-direction: column;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 480px) {
     .bodyE .right-body .entreprises .entreprise{
        width: 290px;
    }

    .bodyE .right-body{
        min-width: 350px;
    }

    .header .navbar h2{
        font-size: 25px;
    }

    /* .header .navbar input{
        width: 150px;
    } */

    .header .navbar button{
        width: 70px;
        height: 35px;
        padding: 5px 5px;
        font-size: 11px;
    }


    .header .navbar input::placeholder{
        font-size: 12px;
        
    }

    .header{
        display: flex;
        flex-direction: column;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 400px) {
    .header{
        display: flex;
        flex-direction: column;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 390px) {
     .bodyE .right-body .entreprises .entreprise{
        width: 250px;
    }

    .bodyE .right-body{
        min-width: 280px;
    }

    .header .navbar h2{
        font-size: 20px;
    }

    .header .navbar input{
        width: 250px;
    }

    .header .navbar input::placeholder{
        font-size: 12px;
    }

    .header{
        display: flex;
        flex-direction: column;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 375px) {
    .header .navbar input{
        width: 200px;
    }
}



/* -------------------------------------------- END ENTREPRISES ---------------------------------------------- */


/* -------------------------------------------- CONTACT ---------------------------------------------- */
.contact{
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 80px 60px;
}

.contact .headerC{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact .headerC h2{
    color: #000;
    font-size: 36px;
}

.contact .headerC p{
    color: rgba(0, 0, 0, 0.8);
    font-size: 17px;
}

.contact .bodyC{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 30px;
    margin-top: 25px;
}

.contact .bodyC .left{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 350px;
    background-color: rgba(0,0,0,0.05);
    padding: 35px 30px;
    border-radius: 7px;
}

.contact .bodyC .left h3{
    font-size: 22px;
    margin-bottom: 5px;
    color: #2872a1;
}

.contact .bodyC .left p{
    color: rgba(0, 0, 0, 0.8);
}

.contact .bodyC .left .info i{
    padding: 0 7px;
    color: #2872a1;
}

.contact .bodyC .left .info{
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 15px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: 0.5s;
}

.contact .bodyC .left .info:hover{
    transform: translateX(-4px);
}

.contact .bodyC .right{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    background-color: rgba(0,0,0,0.05);
    padding: 35px 30px;
    border-radius: 10px;
}

.contact .bodyC .right h2{
    text-align: center;
    font-size: 30px;
    color: #2872a1;
}

.contact .bodyC .right p{
    text-align: center;
}

.contact .bodyC .right form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


.contact .bodyC .right form input{
    width: 700px;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-size: 17px;
    border: 2px solid #fff;
    outline: #fff;
}

.contact .bodyC .right form input.is-invalid{
    border: 1px solid red;
    outline: red;
}

.contact .bodyC .right form input:focus{
    outline: 0;
    border: 2px solid #2872a1;
}

.contact .bodyC .right form input::placeholder{
    font-size: 17px;
}

.contact .bodyC .right form textarea{
    width: 700px;
    height: 140px;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-size: 17px;
}

.contact .bodyC .right form textarea.is-invalid{
     border: 1px solid red;
    outline: red;
}

.contact .bodyC .right form textarea:focus{
    outline: 0;
    border: 2px solid #2872a1;
}

.contact .bodyC .right form textarea::placeholder{
    font-size: 17px;
}

.contact .bodyC .right form button{
    width: 100%;
    height: 41px;
    border-radius: 8px;
    border: 2px solid #2872a1;
    background-color: #2872a1;
    color: #fff;
    margin-top: 10px;
    transition: 0.5s;
    font-size: 18px;
}

.contact .bodyC .right form button:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
    cursor: pointer;
}

/* RESPONSIVE CONTACT */
@media screen and (max-width: 900px) {
    .contact .bodyC{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 25px;
    }

    .contact .bodyC .left{
        max-width: 700px;
    }
}

@media screen and (max-width: 775px) {
    .contact .bodyC .right{
        max-width: 600px;
    }

    .contact .bodyC .right form input{
        width: 500px;
        height: 40px;
        border: 2px solid white;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 15px;
    }

    .contact .bodyC .right form textarea{
        width: 500px;
        height: 140px;
        border: 0;
        outline: 0;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 17px;
    }
}

@media screen and (max-width: 600px) {
    .contact .bodyC .right{
        max-width: 600px;
    }

    .contact .bodyC .right form input{
        width: 400px;
        height: 40px;
        border: 2px solid white;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 13px;
    }

    .contact .bodyC .right form textarea{
        width: 400px;
        height: 140px;
        border: 0;
        outline: 0;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 17px;
    }
}

@media screen and (max-width: 495px) {
    .contact{
        padding: 80px 20px;
    }

    .contact .headerC h2{
        color: #000;
        font-size: 30px;
    }

    .contact .bodyC .right h2{
        text-align: center;
        font-size: 23px;
    }

    .contact .bodyC .right{
        max-width: 400px;
    }

    .contact .bodyC .right form input{
        width: 350px;
        height: 40px;
        border: 2px solid white;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 13px;
    }

    .contact .bodyC .right form textarea{
        width: 350px;
        height: 140px;
        border: 0;
        outline: 0;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 17px;
    }
}

@media screen and (max-width: 370px) {
    .contact{
        padding: 80px 20px;
    }

    .contact .headerC h2{
        color: #000;
        font-size: 30px;
    }

    .contact .bodyC .right h2{
        text-align: center;
        font-size: 23px;
    }

    .contact .bodyC .right{
        max-width: 400px;
    }

    .contact .bodyC .right form input{
        width: 335px;
        height: 40px;
        border: 2px solid white;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 13px;
        margin-left: 2px;
    }

    .contact .bodyC .right form textarea{
        width: 335px;
        height: 140px;
        border: 0;
        outline: 0;
        border-radius: 8px;
        padding: 10px 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        font-size: 17px;
        margin-left: 2px;
    }
}


/* -------------------------------------------- END CONTACT ---------------------------------------------- */


/* -------------------------------------------- PROFIL ---------------------------------------------- */
.alert{
    margin: 0px 100px 5px 100px;
    padding: 8px 10px;
    background-color: #FEF3C7;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

.alert a{
    color: #2563EB;
}

/* responsive ALERT */
@media screen and (max-width: 590px) {
    .alert{
        margin: 0px 50px 5px 50px;
        padding: 8px 10px;
        background-color: #FEF3C7;
        font-weight: bold;
        font-size: 15px;
        text-align: center;
    }
}

@media screen and (max-width: 490px) {
    .alert{
        margin: 0px 20px 5px 20px;
        padding: 8px 10px;
        background-color: #FEF3C7;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
    }
}

@media screen and (max-width: 370px) {
    .alert{
        margin: 0px 10px 5px 10px;
        padding: 8px 8px;
        background-color: #FEF3C7;
        font-weight: bold;
        font-size: 13px;
        text-align: center;
    }
}

.navProfil{
    margin: 100px 100px 30px 100px;
    padding: 20px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    gap: 20px;
    background-color: rgba(0,0,0,0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.navProfil.seeEn{
    margin: 100px 100px 30px 100px;
    padding: 20px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    gap: 20px;
    background-color: rgba(0,0,0,0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.navProfil img{
    width: 15%;
    border: 5px solid #2872a1;
    border-radius: 100px;
    cursor: pointer;
    transition: 0.5s;
}

.navProfil .name{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.navProfil .name h2{
    font-size: 30px;
    letter-spacing: 1px;
}

.navProfil .name p{
    font-size: 18px;
}

.navProfil .name .cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    max-width: 350px;
    margin-top: 7px;
}

.navProfil .name .cta a.modifier{
    text-decoration: none;
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
    text-align: center;
    padding: 4px 10px;
    border-radius: 8px;
    transition: 0.5s;
}

.navProfil .name .cta a.modifier:hover{
    background-color: #fff;
    border: 2px solid #2872a1;
    color: #2872a1;
}

.navProfil .name .cta button{
    text-decoration: none;
    background-color: red;
    border: 2px solid red;
    color: #fff;
    text-align: center;
    padding: 4px 10px;
    border-radius: 8px;
    transition: 0.5s;
    cursor: pointer;
    font-size: 16px;
}

.navProfil .name .cta button:hover{
    background-color: #fff;
    border: 2px solid red;
    color: red;
}

.navProfil .name i{
    margin-left: 5px;
}

.navProfil .name p i{
    margin-right: 5px;
}

.bodyProfil{
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 10px 100px 50px 100px;
    gap: 30px;
}

.bodyProfil.seeEn{
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 10px 100px 50px 100px;
    gap: 30px;
}

.bodyProfil .left{
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 700px;
}

.bodyProfil .left.see{
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.bodyProfil .left .top{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.bodyProfil .left .top h3{
    font-size: 25px;
    letter-spacing: 1px;
}

.bodyProfil .left .top p{
    text-align: justify;
}

.bodyProfil .left .bottom{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.bodyProfil .left .bottom h3{
    font-size: 25px;
    letter-spacing: 1px;
}

.bodyProfil .left .bottom .info{
    background-color: #fff;
    padding: 13px 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    margin: 3px 0;
    transition: 0.5s;
}

.bodyProfil .left .bottom .info:hover{
    transform: translateX(-5px);
}

.bodyProfil .left .bottom .info i{
    color: #2872a1;
    font-size: 22px;
    margin-right: 10px;
}

.bodyProfil .right{
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.05);
    gap: 10px;
    width: 500px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.bodyProfil .right h3{
    font-size: 25px;
    letter-spacing: 1px;
}

.bodyProfil .right p{
    text-align: justify;
    margin-bottom: 15px;
    margin-top: 5px;
}

.bodyProfil .right .statistiques{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bodyProfil .right .statistiques .stat{
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
}

.bodyProfil .right .statistiques .stat:hover{
    transform: translateX(-5px);
}

.bodyProfil .right .statistiques .stat i{
    font-size: 30px;
    margin-left: 10px;
    color: #2872a1;
}
.bodyProfil .right .statistiques .stat i.Tt{
    font-size: 30px;
    margin-left: 10px;
    color: #2563EB;
}
.bodyProfil .right .statistiques .stat i.At{
    font-size: 30px;
    margin-left: 10px;
    color: #F59E0B;
}
.bodyProfil .right .statistiques .stat i.V{
    font-size: 30px;
    margin-left: 10px;
    color: #10B981;
}
.bodyProfil .right .statistiques .stat i.R{
    font-size: 30px;
    margin-left: 10px;
    color: #EF4444;
}

.bodyProfil .right .statistiques .stat .end{
    display: flex;
    flex-direction: column;
}

.bodyProfil .right .statistiques .stat .end h3{
    font-weight: normal;
    font-size: 20px;
}

.bodyProfil .right .statistiques .stat .end p{
    font-weight: bold;
    font-size: 25px;
}

/* responsive PROFIL */
@media screen and (max-width: 810px) {
    .bodyProfil{
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 10px 60px 50px 60px;
        gap: 30px;
    }

    .bodyProfil .right{
        width: 100%;
    }

    .bodyProfil .left{
        width: 100%;
    }

    .navProfil.profil{
        margin: 100px 60px 30px 60px;
        padding: 20px;
        display: flex;
        border-radius: 10px;
        align-items: center;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 570px) {
    .bodyProfil{
        padding: 10px 30px 50px 30px;
    }

    .navProfil.profil{
        margin: 100px 30px 30px 30px;
    }
}

@media screen and (max-width: 500px) {
    .bodyProfil{
        padding: 10px 30px 50px 30px;
    }

    .navProfil.profil{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 100px 30px 30px 30px;
    }

    .navProfil.profil img{
        width: 30%;
        border: 5px solid #2872a1;
        border-radius: 100px;
        cursor: pointer;
        transition: 0.5s;
    }

    .navProfil.profil .name{
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 415px) {
    .bodyProfil{
        padding: 10px 10px 50px 10px;
    }

    .navProfil.profil{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 100px 10px 30px 10px;
    }

    .navProfil.profil img{
        width: 30%;
        border: 5px solid #2872a1;
        border-radius: 100px;
        cursor: pointer;
        transition: 0.5s;
    }

    .navProfil.profil .name{
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 375px) {
   .navProfil.profil .name .cta{
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: none;
        width: 250px;
    }

   .navProfil.profil .name .cta a{
        width: 100%;
        text-align: center;
    }

    .navProfil.profil .name .cta form {
        width: 250px;
    }

   .navProfil.profil .name .cta form button{
        width: 100%;
        text-align: center;
    }
}

/* responsive PROFIL ENTREPRISE */
@media screen and (max-width: 780px) {
    .bodyProfil.seeEn{
        display: flex;
        align-items: start;
        justify-content: space-between;
        padding: 10px 50px 50px 50px;
        gap: 30px;
    }

    .navProfil.seeEn{
        margin: 100px 50px 30px 50px;
        padding: 20px;
        display: flex;
        border-radius: 10px;
        align-items: center;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 525px) {
    .bodyProfil.seeEn{
        display: flex;
        align-items: start;
        justify-content: space-between;
        padding: 10px 20px 50px 20px;
        gap: 30px;
    }

    .navProfil.seeEn{
        margin: 100px 20px 30px 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        align-items: center;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .navProfil .name{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navProfil .name h2{
        font-size: 25px;
        letter-spacing: 1px;
    }

    .bodyProfil.seeEn .left.see h3{
        font-size: 20px;
        letter-spacing: 1px;
    }

    .navProfil.seeEn img{
        width: 25%;
        border: 5px solid #2872a1;
        border-radius: 100px;
        cursor: pointer;
        transition: 0.5s;
    }
}

@media screen and (max-width: 375px) {
    .bodyProfil.seeEn{
        display: flex;
        align-items: start;
        justify-content: space-between;
        padding: 10px 10px 50px 10px;
        gap: 30px;
    }

    .navProfil.seeEn{
        margin: 100px 10px 30px 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        align-items: center;
        gap: 20px;
        background-color: rgba(0,0,0,0.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .navProfil.seeEn .name h2{
        font-size: 20px;
        letter-spacing: 1px;
    }

    .bodyProfil.seeEn .left.see h3{
        font-size: 18px;
        letter-spacing: 1px;
    }

    .navProfil.seeEn .name p{
        font-size: 15px;
    }

    .bodyProfil.seeEn .left.see .info{
        font-size: 15px;
    }

    .navProfil.seeEn img{
        width: 30%;
        border: 5px solid #2872a1;
        border-radius: 100px;
        cursor: pointer;
        transition: 0.5s;
    }
}

/* -------------------------------------------- END PROFIL ---------------------------------------------- */


/* -------------------------------------------- AFTER REGISTER ---------------------------------------------- */
.bodyAfterRegister{
    background-color: rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    /* justify-content: center;
    align-items: center; */
    margin: 0 200px 0 200px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.bodyAfterRegister .all{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bodyAfterRegister .all h2{
    font-size: 35px;
    letter-spacing: 1px;
    text-align: center;
    color: #2872a1;
}

.bodyAfterRegister .all .informations{
    background-color: #fff;
    padding: 30px 50px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
}

.bodyAfterRegister .all .informations form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.bodyAfterRegister .all .informations form .input{
    width: 600px;
    height: 45px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.05);
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
}

.bodyAfterRegister .all .informations form .input.montant{
    display: none;
}

.bodyAfterRegister .all .informations form select{
    width: 600px;
    height: 45px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.05);
    outline: none;
    padding: 10px 15px;
    font-size: 16px;
}

.bodyAfterRegister .all .informations form .input.is-invalid{
    border: 1px solid red;
}
.bodyAfterRegister .all .informations form .inputRow.is-invalid{
    border: 1px solid red;
}

.bodyAfterRegister .all .informations form .input::placeholder{
    font-size: 15px;
}

.bodyAfterRegister .all .informations form .row{
    display: flex;
    gap: 10px;
}

.bodyAfterRegister .all .informations form .inputRow{
    width: 300px;
    height: 45px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.05);
    padding: 10px 15px;
    font-size: 16px;
}

.bodyAfterRegister .all .informations form .inputRow::placeholder{
    font-size: 15px;
}

.bodyAfterRegister .all .informations form textarea{
    width: 600px;
    height: 150px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
    border: 2px solid rgba(0,0,0,0.05);
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
}

.bodyAfterRegister .all .informations form textarea.is-invalid{
    border: 1px solid red;
}

.bodyAfterRegister .all .informations form .cta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.bodyAfterRegister .all .informations form .cta a{
    text-decoration: none;
    color: #000;
    padding: 10px 70px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.bodyAfterRegister .all .informations form .cta button{
    text-decoration: none;
    color: #000;
    padding: 10px 70px;
    border-radius: 5px;
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
    font-size: 15px;
    outline: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.5s;
}

.bodyAfterRegister .all .informations form .cta button:hover{
    background-color: #fff;
    border: 2px solid #2872a1;
    color: #2872a1;
}

/* responsive AFTER-REGISTER */
@media screen and (max-width: 1035px) {
    .bodyAfterRegister{
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        margin: 0 150px 0 150px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 935px) {
    .bodyAfterRegister{
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        margin: 0 100px 0 100px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 830px) {
    .bodyAfterRegister{
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        margin: 0 50px 0 50px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 725px) {
    .bodyAfterRegister{
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        margin: 0 20px 0 20px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 665px) {
    .bodyAfterRegister{
        background-color: rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        margin: 0 10px 0 10px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .bodyAfterRegister .all .informations form .input{
        width: 450px;
    }

    .bodyAfterRegister .all .informations form textarea{
        width: 450px;
    }

    .bodyAfterRegister .all .informations form select{
        width: 450px;
    }

    .bodyAfterRegister .all .informations form .inputRow{
        width: 220px;
    }

    .bodyAfterRegister .all h2{
        font-size: 28px;
        letter-spacing: 1px;
        text-align: center;
        color: #2872a1;
    }
}

@media screen and (max-width: 585px) {
    .bodyAfterRegister .all .informations form .cta{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .bodyAfterRegister .all .informations form .cta a{
        width: 300px;
        text-align: center;
    }

    .bodyAfterRegister .all .informations form .cta button{
         width: 300px;
    }

    .bodyAfterRegister .all h2{
        font-size: 23px;
        letter-spacing: 1px;
        text-align: center;
        color: #2872a1;
    }
}

@media screen and (max-width: 490px) {

    .bodyAfterRegister .all .informations form .input{
        width: 320px;
    }

    .bodyAfterRegister .all .informations form select{
        width: 320px;
    }

    .bodyAfterRegister .all .informations form textarea{
        width: 320px;
    }

    .bodyAfterRegister .all .informations form .row{
        display: flex;
        flex-direction: column;
    }

    .bodyAfterRegister .all .informations form .inputRow{
        width: 320px;
    }

    .bodyAfterRegister .all h2{
        font-size: 20px;
        letter-spacing: 1px;
        text-align: center;
        color: #2872a1;
    }
}

@media screen and (max-width: 365px) {

    .bodyAfterRegister .all .informations form .input{
        width: 280px;
    }

    .bodyAfterRegister .all .informations form select{
        width: 280px;
    }

    .bodyAfterRegister .all .informations form textarea{
        width: 280px;
    }

    .bodyAfterRegister .all .informations form .inputRow{
        width: 280px;
    }
}

@media screen and (max-width: 330px) {

    .bodyAfterRegister .all .informations form .input{
        width: 250px;
    }

    .bodyAfterRegister .all .informations form select{
        width: 250px;
    }

    .bodyAfterRegister .all .informations form textarea{
        width: 250px;
    }

    .bodyAfterRegister .all .informations form .inputRow{
        width: 250px;
    }

    .bodyAfterRegister .all .informations form .cta a{
        width: 250px;
        text-align: center;
    }

    .bodyAfterRegister .all .informations form .cta button{
         width: 250px;
    }
}

/* -------------------------------------------- END AFTER REGISTER ---------------------------------------------- */


/* -------------------------------------------- COURRIER ---------------------------------------------- */

.bodyCourrier{
    background-color: rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bodyCourrier .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 60px 0px 60px;
}

.bodyCourrier .title .titleH2{
    color: #000;
    font-size: 36px;
    
}

.bodyCourrier .title p{
    font-size: 20px;
}

.navCourrier{
    background-color: #fff;
    margin: 0px 60px 10px 60px;
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navCourrier .me{
    display: flex;
    gap: 15px;
}

.navCourrier .me img{
    width: 50px;
    height: 50px;
    border-radius: 100px;
}

.navCourrier .me .infos{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.navCourrier .me .infos i{
    font-size: 13px;
    margin-right: 3px;
    color: #999;
}

.navCourrier .me .infos p.name{
    font-weight: bold;
}

.navCourrier .me .infos p.email{
    color: rgba(0, 0, 0, 0.9);
}

.navCourrier .search input{
    width: 400px;
    height: 38px;
    border: none;
    background-color: rgba(0,0,0,0.05);
    border-radius: 8px;
    padding: 5px 7px;
    outline: none;
    font-size: 16px;
}

.navCourrier .search input::placeholder{
    font-size: 16px;
}

.navCourrier a.new{
    text-decoration: none;
    background-color: #2872a1;
    color: #fff;
    border: 2px solid #2872a1;
    padding: 6px 15px;
    border-radius: 10px;
    transition: 0.5s;
}

.navCourrier a.new:hover{
    background-color: #fff;
    color: #2872a1;
    border: 2px solid #2872a1;
}

.corpsCourrier.courrier{
    background-color: #fff;
    margin: 0px 60px 50px 60px;
    padding: 10px 15px;
    border-radius: 10px;
}

.corpsCourrier.nouveau{
    background-color: #fff;
    margin: 0px 100px 50px 100px;
    padding: 15px 15px;
}

.corpsCourrier.nouveau form{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.corpsCourrier.nouveau form input.emailTo{
    width: 500px;
    height: 30px;
    border: none;
    outline: none;
    padding: 0 5px;
    font-size: 15px;
}

.corpsCourrier.nouveau form input.emailTo.is-invalid{
    border-bottom: 1px solid red;
}
.corpsCourrier.nouveau form input.emailFrom{
    width: 500px;
    height: 30px;
    border: 0;
    outline: 0;
    padding: 0 5px;
    font-size: 15px;
}

.corpsCourrier.nouveau form input.emailFrom.is-invalid{
    border-bottom: 1px solid red;
}
.corpsCourrier.nouveau form input.objet{
    width: 500px;
    height: 30px;
    border: 0;
    outline: 0;
    padding: 0 5px;
    font-size: 15px;
}

.corpsCourrier.nouveau form input.objet.is-invalid{
    border-bottom: 1px solid red;
}

.corpsCourrier.nouveau form textarea{
    border: 0;
    outline: 0;
    padding: 5px 10px;
    height: 150px;
}

.corpsCourrier.nouveau form textarea.is-invalid::placeholder{
    color: red;
}

.corpsCourrier.nouveau form .cta{
    display: flex;
    gap: 15px;
    justify-content: end;
    margin-top: 10px;
}

.corpsCourrier.nouveau form .cta a{
    background-color: #fff;
    color: #2872a1;
    border: 2px solid #2872a1;
    border-radius: 10px;
    padding: 5px 20px;
    text-decoration: none;
    font-size: 15px;
}

.corpsCourrier.nouveau form .cta button{
    background-color: #2872a1;
    color: #fff;
    border: 2px solid #2872a1;
    border-radius: 10px;
    padding: 5px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.5s;
}

.corpsCourrier.nouveau form .cta button:hover{
    opacity: 0.8;
}

.corpsCourrier.courrier{
    background-color: #fff;
    margin: 0px 60px 50px 60px;
    padding: 10px 15px;
    border-radius: 10px;
    height: 420px;
    display: flex;
    align-items: start;
    gap: 50px;
}

.corpsCourrier.courrier.mobile{
    display: none;
}

.corpsCourrier.courrier .gauche{
    padding: 10px 10px;
    width: 400px;
    height: 400px;
    overflow-y: scroll;
}
.corpsCourrier.courrier .gauche.mobile{
    padding: 10px 10px;
    width: 100%;
    height: 400px;
    overflow-y: scroll;
}

.corpsCourrier.courrier .gauche .emails{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.corpsCourrier.courrier .gauche .emails a.emailLink{
    text-decoration: none;
    padding: 10px;
}
.corpsCourrier.courrier .gauche .emails a.emailLink.active{
    text-decoration: none;
    background-color: rgba(0,0,0,0.05);
    padding: 10px;
}

.corpsCourrier.courrier .gauche .emails .email{
    display: flex;
    align-items: center;
    gap: 12px;
}

.corpsCourrier.courrier .gauche .emails .email img{
    width: 40px;
    height: 40px;
    border-radius: 100px;
}

.corpsCourrier.courrier .gauche .emails .email .detail{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.corpsCourrier.courrier .gauche .emails .email .detail h5.name{
    color: #000;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
}
.corpsCourrier.courrier .gauche .emails .email .detail p.objet{
    color: #000;
}

.corpsCourrier.courrier .droite.courrier p{
    margin-top: 200px;
    margin-left: 100px;
    font-size: 18px;
}

.corpsCourrier.courrier .droite.courrier i{
    color: #2872a1;
}

.corpsCourrier.courrier .droite.lire{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 800px;
    height: 400px;
    overflow-y: scroll;
}

.corpsCourrier.courrier .droite.lire.mobile{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 400px;
    overflow-y: scroll;
}

.corpsCourrier.courrier .droite.lire .corpsDroite{
    text-align: justify;
    padding: 3px 8px;
}

.corpsCourrier.courrier .droite.lire .navDroite{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
}

.corpsCourrier.courrier .droite.lire .navDroite .info{
    display: flex;
    gap: 20px;
    align-items: center;
}

.corpsCourrier.courrier .droite.lire .navDroite .info .more{
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.corpsCourrier.courrier .droite.lire .navDroite .info .more p.objet{
    letter-spacing: 1px;
    font-style: italic;
}

.corpsCourrier.courrier .droite.lire .navDroite .info img{
    width: 45px;
    height: 45px;
    border-radius: 100px;
}

.corpsCourrier.courrier .droite.lire .navDroite form{
    display: flex;
    gap: 10px;
}

.corpsCourrier.courrier .droite.lire .navDroite form button{
    background-color: #fff;
    border: 2px solid red;
    color: red;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}
.corpsCourrier.courrier .droite.lire .navDroite form a{
    background-color: #fff;
    border: 2px solid #2872a1;
    color: #2872a1;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
}

.corpsCourrier.courrier .droite.lire .navDroite form button:hover{
    background-color: red;
    border: 2px solid red;
    color: #fff;
}
.corpsCourrier.courrier .droite.lire .navDroite form a:hover{
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
}

/* responsive COURRIER */
@media screen and (max-width: 772px) {
    .bodyCourrier .title{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px 60px 0px 60px;
    }

    .corpsCourrier.nouveau{
        background-color: #fff;
        margin: 0px 50px 50px 50px;
        padding: 15px 15px;
    }
}

@media screen and (max-width: 665px) {
    .corpsCourrier.nouveau{
        background-color: #fff;
        margin: 0px 30px 50px 30px;
        padding: 15px 15px;
    }

    .corpsCourrier.nouveau form input.objet{
        width: 300px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.emailTo{
        width: 300px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.emailFrom{
        width: 300px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form textarea{
        border: 0;
        outline: 0;
        padding: 5px 10px;
        height: 200px;
    }
}

@media screen and (max-width: 450px) {
    .corpsCourrier.nouveau{
        background-color: #fff;
        margin: 0px 10px 50px 10px;
        padding: 15px 15px;
    }

    .corpsCourrier.nouveau form input.objet{
        width: 280px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.emailTo{
        width: 280px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.emailFrom{
        width: 280px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }
}



@media screen and (max-width: 965px) {
    .corpsCourrier.courrier.ordi{
        display: none;
    }
    .corpsCourrier.courrier.mobile{
        display: block;
    }
}

@media screen and (max-width: 661px) {
    .navCourrier{
        background-color: #fff;
        margin: 0px 80px 10px 80px;
        padding: 10px 15px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

@media screen and (max-width: 515px) {
    .navCourrier{
        background-color: #fff;
        margin: 0px 80px 10px 80px;
        padding: 10px 15px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

@media screen and (max-width: 510px) {
    .navCourrier{
        background-color: #fff;
        margin: 0px 80px 10px 80px;
        padding: 10px 15px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 300px;
    }

    .navCourrier .me .infos p.name{
        font-weight: bold;
    }

    .navCourrier .me .infos p.email{
        color: rgba(0, 0, 0, 0.9);
        font-size: 12px;
    }

    .bodyCourrier .title .titleH2{
        font-size: 25px;
    }
}

@media screen and (max-width: 462px) {
    .corpsCourrier.courrier{
        background-color: #fff;
        margin: 0px 40px 50px 40px;
        padding: 10px 15px;
        border-radius: 10px;
        height: 420px;
        display: flex;
        align-items: start;
        gap: 50px;
    }

    

    .bodyCourrier .title p{
        font-size: 15px;
    }
}

@media screen and (max-width: 385px) {
    .corpsCourrier.courrier{
        background-color: #fff;
        margin: 0px 20px 50px 20px;
        padding: 10px 15px;
        border-radius: 10px;
        height: 420px;
        display: flex;
        align-items: start;
        gap: 50px;
    }

    .corpsCourrier.nouveau form .cta{
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-top: 10px;
    }

    .corpsCourrier.nouveau form input.objet{
        width: 250px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.emailFrom{
        width: 250px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .bodyCourrier .title .titleH2{
        font-size: 20px;
    }
}

@media screen and (max-width: 360px) {
    .bodyCourrier .title{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px 30px 0px 30px;
    }

    .corpsCourrier.nouveau form input.emailFrom{
        width: 200px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.emailTo{
        width: 200px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }

    .corpsCourrier.nouveau form input.objet{
        width: 200px;
        height: 30px;
        border: 0;
        outline: 0;
        padding: 0 5px;
        font-size: 15px;
    }
}

@media screen and (max-width: 342px) {
    .corpsCourrier.courrier{
        background-color: #fff;
        margin: 0px 10px 50px 10px;
        padding: 10px 15px;
        border-radius: 10px;
        height: 420px;
        display: flex;
        align-items: start;
        gap: 50px;
    }

    .corpsCourrier.courrier .gauche .emails .email .detail p.objet{
        color: #000;
        font-size: 14px;
    }
}

@media screen and (max-width: 410px) {
    .bodyCourrier .title .titleH2{
        font-size: 23px;
    }

    .bodyCourrier .title p{
        font-size: 15px;
    }
}

@media screen and (max-width: 336px) {
    .bodyCourrier .title .titleH2{
        font-size: 20px;
    }

    .bodyCourrier .title p{
        font-size: 13px;
    }
}

@media screen and (max-width: 450px) {
    .navCourrier{
        background-color: #fff;
        margin: 0px 20px 10px 20px;
        padding: 10px 15px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 400px;
    }

    .navCourrier .me .infos p.name{
        font-weight: bold;
    }

    .navCourrier .me .infos p.email{
        color: rgba(0, 0, 0, 0.9);
        font-size: 10px;
    }

    .bodyCourrier .title{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px 20px 0px 20px;
    }

    .corpsCourrier.courrier.mobile{
        background-color: #fff;
        margin: 0px 20px 50px 20px;
        padding: 10px 15px;
        border-radius: 10px;
        height: 420px;
        display: flex;
        align-items: start;
        gap: 50px;
    }
}

@media screen and (max-width: 350px) {
    .navCourrier{
        background-color: #fff;
        margin: 0px 20px 10px 20px;
        padding: 10px 15px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 300px;
    }

    .navCourrier .me .infos p.name{
        font-weight: bold;
    }

    .navCourrier .me .infos p.email{
        color: rgba(0, 0, 0, 0.9);
        font-size: 10px;
    }

}

/* COURRIER LIRE */
@media screen and (max-width: 741px) {
    .corpsCourrier.courrier .droite.lire .navDroite{
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 17px;
        padding: 0px 10px;
    }
}

@media screen and (max-width: 500px) {
    .corpsCourrier.courrier .droite.lire .navDroite{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 17px;
        padding: 0px 10px;
    }

}

/* -------------------------------------------- END COURRIER ---------------------------------------------- */

/* ========================================= CONFIRMATION ====================================================== */

.bodyConfirmation{
    background-color: rgba(0, 0, 0, 0.4);
}

.bodyConfirmation .confirmationCard{
    background-color: #fff;
    margin: 50px 250px 20px 250px;
    padding: 15px 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.bodyConfirmation .confirmationCard h3{
    font-size: 25px;
    text-align: center;
    letter-spacing: 1px;
}

.bodyConfirmation .confirmationCard p{
    font-size: 17px;
    text-align: center;
}

.bodyConfirmation .confirmationCard .cta{
    margin-top: 20px;
}

.bodyConfirmation .confirmationCard form{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.bodyConfirmation .confirmationCard form a{
    text-decoration: none;
    color: #2872a1;
    border: 2px solid #2872a1;
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    transition: 0.5s;
}

.bodyConfirmation .confirmationCard form a:hover{
    border: 2px solid #2872a1;
    background-color: #2872a1;
    color: #fff;
}

.bodyConfirmation .confirmationCard form button{
    color: #fff;
    border: 2px solid red;
    background-color: red;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.5s;
}

.bodyConfirmation .confirmationCard form button:hover{
    color: red;
    border: 2px solid red;
    background-color: #fff;
}

/* ========================================= END CONFIRMATION ====================================================== */


/* ========================================= VERIFY ====================================================== */

.bodyVerify{
    background-color: rgba(0,0,0,0.05);
}

.bodyVerify .container{
    background-color: #fff;
    padding: 30px 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 80px 250px 100px 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.bodyVerify .container img{
    width: 25%;
}

.bodyVerify .container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bodyVerify .container form .code-container{
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 40px 0;
}

.bodyVerify .container form .code-container .code-input{
    width: 60px;
    height: 60px;
    font-size: 28px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.bodyVerify .container form .code-container .code-input:focus{
    outline: none;
    border-color: #2872a1;
}

.bodyVerify .container form button.send{
    padding: 8px 45px;
    border-radius: 10px;
    border: 2px solid #2872a1;
    background-color: #2872a1;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    transition: 0.5s;
}

.bodyVerify .container form button.resend{
    color: #2872a1;
    font-size: 17px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.bodyVerify .container form button.send:hover{
    border: 2px solid #2872a1;
    background-color: #fff;
    color: #2872a1;
    
}

/* responsive VERIFY */
@media screen and (max-width: 1020px) {
    .bodyVerify .container{
        margin: 80px 180px 100px 180px;
    }
}

@media screen and (max-width: 885px) {
    .bodyVerify .container{
        margin: 80px 100px 100px 100px;
    }
}

@media screen and (max-width: 715px) {
    .bodyVerify .container{
        margin: 80px 50px 100px 50px;
    }
}

@media screen and (max-width: 715px) {
    .bodyVerify .container{
        margin: 80px 20px 100px 20px;
    }
}

@media screen and (max-width: 500px) {
    .bodyVerify .container{
        margin: 150px 20px 100px 20px;
    }

    .bodyVerify .container img{
        width: 30%;
    }
}

@media screen and (max-width: 400px) {
    .bodyVerify .container{
        margin: 150px 20px 100px 20px;
    }

    .bodyVerify .container img{
        width: 40%;
    }
}

@media screen and (max-width: 370px) {

    .bodyVerify .container form .code-container .code-input{
        width: 50px;
        height: 50px;
        font-size: 25px;
        text-align: center;
        border: 2px solid #ddd;
        border-radius: 10px;
    }
}

@media screen and (max-width: 370px) {
    .bodyVerify .container{
        margin: 150px 20px 100px 20px;
    }

    .bodyVerify .container img{
        width: 40%;
    }

    .bodyVerify .container h2{
        font-size: 20px;
    }

    .bodyVerify .container p{
        font-size: 15px;
    }
}

@media screen and (max-width: 350px) {
    .bodyVerify .container{
        margin: 150px 20px 100px 20px;
    }

    .bodyVerify .container img{
        width: 40%;
    }

    .bodyVerify .container h2{
        font-size: 20px;
    }

    .bodyVerify .container p{
        font-size: 15px;
    }
}

@media screen and (max-width: 325px) {
    .bodyVerify .container{
        margin: 150px 20px 100px 20px;
    }

    .bodyVerify .container img{
        width: 40%;
    }

    .bodyVerify .container h2{
        font-size: 18px;
    }

    .bodyVerify .container p{
        font-size: 14px;
    }
}

/* POUR LES TERME ET CONDITIONS DU FOOTER */
/* CONDITION D'UTILISATION */
.containerFooter{
    margin: 100px 100px 60px 100px;
}

.containerFooter h1{
    font-size: 35px;
}

.containerFooter .contenus{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.containerFooter .contenus .contenu{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.containerFooter .contenus .contenu h3{
    font-size: 22px;
}

.containerFooter .contenus .contenu p{
    font-size: 18px;
    text-align: justify;
}

.containerFooter .contenus .contenu ul{
    margin-left: 40px;
}

/* responsive */
@media screen and (max-width: 940px) {
    .containerFooter{
        margin: 100px 50px 60px 50px;
    }
}
@media screen and (max-width: 700px) {
    .containerFooter{
        margin: 100px 50px 60px 50px;
    }

    .containerFooter h1{
        font-size: 30px;
    }
}
@media screen and (max-width: 620px) {
    .containerFooter{
        margin: 100px 40px 60px 40px;
    }

    .containerFooter h1{
        font-size: 25px;
        text-align: center;
    }
}
@media screen and (max-width: 510px) {
    .containerFooter{
        margin: 100px 40px 60px 40px;
    }

    .containerFooter h1{
        font-size: 22px;
    }

    .containerFooter .contenus .contenu h3{
        font-size: 18px;
    }

    .containerFooter .contenus .contenu p{
        font-size: 15px;
        text-align: justify;
    }
}

@media screen and (max-width: 510px) {
    .containerFooter{
        margin: 100px 20px 60px 20px;
    }

    .containerFooter h1{
        font-size: 20px;
    }
}

@media screen and (max-width: 385px) {
    .containerFooter{
        margin: 100px 20px 60px 20px;
    }

    .containerFooter h1{
        font-size: 17px;
    }
}



/* ========================================= END VERIFY ====================================================== */


/* =========================================================================================================== */
/* ================================================ BACKOFFICE =============================================== */
/* =========================================================================================================== */
/* gray = #f5f5f5, black2 = #999 */

/* ADMIN (Page de base) */

.bodyAdmin{
    min-height: 100vh;
}

.containerAdmin{
   display: flex;
   gap: 0px;
}

.containerAdmin a{
    text-decoration: none;
}

.containerAdmin .left{
   height: 100vh;
   width: 300px;
}
.containerAdmin .right{
   height: 100vh;
   width: 900px;
}

/* NAVIGATION */
.containerAdmin .navigationAdmin{
    position: fixed;
    width: 250px;
    height: 100%;
    background-color: #2872a1;
    border-left: 10px solid #2872a1;
    transition: 0.5s;
    overflow: hidden;
}

.containerAdmin .navigationAdmin ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.containerAdmin .navigationAdmin ul li{
    position: relative;
    width: 100%;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.containerAdmin .navigationAdmin ul li.active{
    background-color: #fff;
    color: #2872a1;
}

.containerAdmin .navigationAdmin ul li:hover{
    background-color: #fff;
}

.containerAdmin .navigationAdmin ul li:nth-child(1){
    margin-bottom: 40px;
    pointer-events: none;
}

.containerAdmin .navigationAdmin ul li img{
    margin: 20px 0 0 50px;
    width: 50%;
}

.containerAdmin .navigationAdmin ul li a{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: #fff;
}

.containerAdmin .navigationAdmin ul li a.active{
    color: #2872a1;
}

.containerAdmin .navigationAdmin ul li a:hover{
    color: #2872a1;
}

.containerAdmin .navigationAdmin ul li a .icon{
    position: relative;
    min-width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.containerAdmin .navigationAdmin ul li a .icon i{
    font-size: 1.75rem;
}

.containerAdmin .navigationAdmin ul li a .title{
    position: relative;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
}

/* ------------ curve outside ------------- */
.containerAdmin .navigationAdmin ul li:hover a::before{
    content: '';
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 35px 35px 0 10px #fff;
}

.containerAdmin .navigationAdmin ul li a.active::before{
    content: '';
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 35px 35px 0 10px #fff;
}

.containerAdmin .navigationAdmin ul li:hover a::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 35px -35px 0 10px #fff;
}

.containerAdmin .navigationAdmin ul li a.active::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 35px -35px 0 10px #fff;
}

/* CORPS */
.bodyAdmin{
    min-height: 100vh;
    background-color: #fff;
}

/* END ADMIN (page de base) */


/* -------------------------- DASHBOARD --------------------------- */

.containerDashboard{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 10px;
    width: 950px;
}

.containerDashboard .charts{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.containerDashboard .chart{
    margin-top: 20px;
    /* margin-left: 200px; */
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.containerDashboard .chart h2{
    margin-bottom: 10px;
    text-transform: uppercase;
}

.containerDashboard p.homme{
    display: none;
}
.containerDashboard p.femme{
    display: none;
}
.containerDashboard p.aca{
    display: none;
}
.containerDashboard p.pro{
    display: none;
}
.containerDashboard p.at{
    display: none;
}
.containerDashboard p.va{
    display: none;
}
.containerDashboard p.re{
    display: none;
}

.containerAdmin .headerDashboard{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.containerAdmin .headerDashboard .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.containerAdmin .headerDashboard .top h1 span{
    color: #2872a1;
}

.containerAdmin .headerDashboard .top .bell{
    border: 2px solid #2872a1;
    background-color: #fff;
    padding: 5px 20px;
    border-radius: 10px;
    cursor: pointer;
    color: #2872a1;
    transition: 0.5s;
}

.containerAdmin .headerDashboard .top .bell:hover{
    border: 2px solid #2872a1;
    background-color: #2872a1;
    color: #fff;
}

.containerAdmin .headerDashboard .top .bell i{
    font-size: 20px;
    padding-right: 5px;
}

.containerAdmin .headerDashboard p{
    font-size: 20px;
    margin-top: 10px;
}

/* stats DASHBOARD */
.containerDashboard .statsDashboard{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    margin-bottom: 20px;
}

.containerDashboard .statsDashboard .stat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    width: 220px;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.containerDashboard .statsDashboard .stat:hover{
    transform: translateY(-5px);
}

.containerDashboard .statsDashboard .stat .top{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.containerDashboard .statsDashboard .stat .top h2{
    font-size: 35px;
    color: #2872a1;
}

.containerDashboard .statsDashboard .stat i{
    font-size: 25px; 
    color: rgba(0, 0, 0, 0.8);
}

.containerDashboard .statsDashboard .stat p{
    font-size: 15px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}
/* END stats DASHBOARD */

.containerDashboard .recent{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
    background-color: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.containerDashboard .recent h2{
    font-size: 27px;
    color: #2872a1;
    margin-bottom: 10px;
    text-align: center;
}

.containerDashboard .recent table th{
    text-align: start;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.containerDashboard table tbody tr td.statutV{
    color: green;
}

.containerDashboard table tbody tr td.statutR{
    color: red;
}

.containerDashboard .recent table tbody tr td a{
    text-decoration: none;
    color: #000;
}

.containerDashboard .recent table tbody tr td a:hover{
    text-decoration: underline;
}

/* ------------------------ END DASHBOARD ------------------------- */


/* ------------------------ ENTREPRISES ------------------------- */

/* stats ENTREPRISES */

.containerEntreprises{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 10px;
    width: 950px;
}

.containerEntreprises table{
    margin-bottom: 20px;
}

.containerEntreprises .statsDashboard{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin-bottom: 20px;
}

.containerEntreprises.candidature .statsDashboard{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    margin-bottom: 20px;
}

.containerEntreprises.candidature .statsDashboard .stat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    width: 225px;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.containerEntreprises .statsDashboard .stat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    width: 280px;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.containerEntreprises .statsDashboard .stat:hover{
    transform: translateY(-5px);
}

.containerEntreprises .statsDashboard .stat .top{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.containerEntreprises .statsDashboard .stat .top h2{
    font-size: 35px;
    color: #2872a1;
}

.containerEntreprises .statsDashboard .stat i{
    font-size: 25px; 
    color: rgba(0, 0, 0, 0.8);
}

.containerEntreprises .statsDashboard .stat p{
    font-size: 15px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}
/* END stats ENTREPRISES */

.containerEntreprises  table{
   border-collapse: collapse;
}

.containerEntreprises  table th{
    text-align: start;
    text-transform: uppercase;
    padding-bottom: 10px;
    font-size: 23px;
}

.containerEntreprises table tbody tr td{
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    padding-top: 10px;
}

.containerEntreprises table tbody tr td{
    font-size: 18px;
}


.containerEntreprises table tbody tr td.statutV{
    color: green;
}


.containerEntreprises table tbody tr td a.nom{
    text-decoration: none;
    color: #000;
}

.containerEntreprises table tbody tr td a.logo{
    text-decoration: none;
    color: #2872a1;
    background-color: #fff;
    padding: 2px 5px;
    border-radius: 10px;
    border: 2px solid #2872a1;
    transition: 0.5s;
}
.containerEntreprises table tbody tr td a.logo:hover{
    color: #fff;
    border: 2px solid #2872a1;
    background-color: #2872a1;
}

.containerEntreprises table tbody tr td a.nom:hover{
    text-decoration: underline;
}

/* pour la decision pour une entreprise ADMIN */
.AdminChoose{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.AdminChoose form button{
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.AdminChoose form button i{
    margin-left: 10px;
}

.AdminChoose form button.good{
    background-color: green;
    color: #fff;
}

.AdminChoose form button.bad{
    background-color: red;
    color: #fff;
}

/* ------------------------ END ENTREPRISES ------------------------- */


/* ------------------------ STATISTIQUES ------------------------- */

.containerStatistiques{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 10px;
    width: 950px;
}

.containerStatistiques h1{
    text-align: center;
    color: #2872a1;
}

.containerStatistiques .statsStatistiques{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    margin-bottom: 20px;
}

.containerStatistiques .statsStatistiques .stat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    width: 95%;
    height: 300px;
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.containerStatistiques .statsStatistiques .stat:hover{
    transform: translateY(-5px);
}

.containerStatistiques .statsStatistiques .stat .top{
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: start;
}

.containerStatistiques .statsStatistiques .stat .top h2{
    font-size: 90px;
    color: #2872a1;
}

.containerStatistiques .statsStatistiques .stat i{
    font-size: 60px; 
    color: rgba(0, 0, 0, 0.8);
    padding-right: 20px;
}

.containerStatistiques .statsStatistiques .stat p{
    font-size: 25px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

/* bottom */

.containerStatistiques .statsStatistiquesBottom{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin-bottom: 20px;
}

.containerStatistiques .statsStatistiquesBottom .statBottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    width: 95%;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.containerStatistiques .statsStatistiquesBottom .statBottom:hover{
    transform: translateY(-5px);
}

.containerStatistiques .statsStatistiquesBottom .statBottom .top{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
}

.containerStatistiques .statsStatistiquesBottom .statBottom .top h2{
    font-size: 30px;
    color: #2872a1;
}

.containerStatistiques .statsStatistiquesBottom .statBottom i{
    font-size: 30px; 
    color: rgba(0, 0, 0, 0.8);
    padding-right: 20px;
}

.containerStatistiques .statsStatistiquesBottom .statBottom p{
    font-size: 15px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}
/* END stats STATISTIQUES */



/* ------------------------ END STATISTIQUES ------------------------- */


/* ------------------------ NOTIFICATIONS ------------------------- */

.containerNotifications .notifications{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    padding-top: 10px;
}

.containerNotifications .notifications .notification.nonlu{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px #2872a1;
    
    
}

.containerNotifications .notifications .notification.lu{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.containerNotifications .notifications .notification .cta{
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.containerNotifications .notifications .notification .cta .lu{
    border: 2px solid #2872a1;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    transition: 0.5s;
}

.containerNotifications .notifications .notification .cta .lu:hover{
    background-color: #2872a1;
    border: 2px solid #2872a1;
    color: #fff;
}

.containerNotifications .notifications .notification .cta .supprimer{
    border: 2px solid red;
    padding: 5px 20px;
    border-radius: 10px;
    color: #fff;
    background-color: red;
    cursor: pointer;
    transition: 0.5s;
}

/* ------------------------ END NOTIFICATIONS ------------------------- */