*{
    font-family:Arial, Helvetica, sans-serif
}

.logoSet{

    margin-top: unset!important;

}

table{
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid;
  }
  

body{
    margin: unset;
    /* overflow: hidden; */
}
/* NAVBAR */

.absoluteSocial{
    position: absolute;
    right: 4.4%;
    top: 9px;
}

.iconSocialThirty {
    width: 30px;
    height: 30px;
}

header{
    color: white;
    top: 0;
    position: absolute;
    width: 100%;
    background-color: #233365;
}
.container{
    height: 142px;
}

.divLogo{
    position: absolute;
    left: 46%;
    top: 22%;
}

.logo{
    width: 186px;
    height: 186px;
    margin-left: -33px;
    margin-top: -9px;
}
h1{
    font-size: 30px;
    margin-top: 6px;
}
h2{
    font-size: 39px;
}
.ulNav{
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 100px;
    align-items: center;
    letter-spacing: 1px;
}

.liLeft{
    margin-left: 45%;
}

a{
    text-decoration: none;
}

.navLink{
    color: white;
    text-decoration: none;
}

.navLink:visited{

    color: white;
}
/* NAVBAR */
main{
    margin-top: 158px;
    color: white;
    display: flex;
    flex-direction: column;
}


/* HOME */

.sectionPresentation{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homePresentation{
    padding-top: 265px;
    font-size: 41px;
    width: 39%;
}

.Logotest{
    width: 596px !important;
}

.metier{
    background-color: white;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    margin-top: 25px;
}

.metier img{
    margin-top: 113px;
    margin-left: -5%;
}

.metier div{
    color: #00266f;
    display: flex;
    flex-direction: column;
}

.metier > div > p{
    margin-top: 50px;
    font-size: 37px;
    width: 68%;
    text-align: center;
    color: #00266f;
    margin-left: -95px;
}

.metier > div > h2{
    font-weight: bold;
    color: #5cc8cd;
    margin-top: 18px;
    font-size: 18px;
}

.metier div ul{
    list-style-type: none;
    margin-left: -42px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metier div ul li{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.metier div ul li span{
    font-weight: 400;
}

.competence{
    background-color: white;
    color: #00266f;
    display: flex;
    flex-direction: column;
    position: relative;
}

.competence > p{
    font-size: 37px;
    margin-left: 22.5%;
    margin-top: 29px;
    width: 53%;
    text-align: center;
    color: #00266f;
}

.competence > div{
    display: flex;
    flex-direction: column;
}

.competence > h2{
    text-align: center;
    color: #5cc8cd;
    margin-top: 25px;
    font-size: 18px;
    font-weight: bold;
}

.competence > div > ul {
    display: flex;
    align-items: center;
    gap: 31px;
}

.competence > div > ul > li{
    font-size: 20px;
    border-style: none;
    width: 113px;
    height: 115px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: white;
}



.competence > div > ul > li:first-child{
    background-color: #5cc8cd;
    margin-left: 175px;
}

.competence > div > ul > li:nth-child(2){
    background-color: #8dabd1;
}

.competence > div > ul > li:nth-child(3){
    background-color: #6a66b0;
}


.competence div img{
    width: 369px;
    align-self: flex-end;
    margin-top: -289px;
    z-index: 1;
    margin-right: 14%;
}
.competence div p{
    width: 32%;
    margin-left: 213px;
    margin-top: 12px;
    font-weight: 400;
}
.designCompetence{
    position: absolute;
    background: linear-gradient(to bottom right, rgba(98,196,205,0) 0%, rgba(98,196,205,0) 50%, rgba(98,196,205,1) 25%, rgba(115,120,184,1) 75%);
    width: 553px;
    height: 343px;
    bottom: 0;
    right: 0;
}

.valeurs{
    background-color: #6a66b0;
    color: white;
    text-align: center;
}

.valeurs > p{
    font-size: 38px;
    margin-top: unset;
}
.valeurs > h2{
    color: #5cc8cd;
    margin-top: 51px;
    font-size: 18px;
}

.valeurs > div > ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding-left: unset;
    align-items: center;
    /* padding-right: 3%; */
    flex-wrap: wrap;
    gap: 3%;
}

.valeurs > div > ul > li > p{
    height: 130px;
    width: 200px;
}

.valeurs > div > ul > li > img{
    width: 75px;
    height: 75px;
}

.client{
    background-color: white;
    color: #00266f;
    text-align: center;
    padding-bottom: 50px;
}

.client > p{
    color: #5cc8cd;
    font-size: 18px;
    margin-top: 77px;
}

.client > h3{
    font-size: 38px;
    margin-top: unset;
}

.client > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 37px;
}

.client > div > p{
    width: 55%;
}

.client > div > ul{
    display: flex;
    list-style-type: none;
    margin-top: 51px;
    gap: 40px;
    padding-right: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.client > div > ul > li{
    border: 2px solid;
    height: 217px;
    width: 213px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}
.advice > div > div > img{
    border: 2px solid;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.client > div > ul > li > img{
    object-fit: cover;
    width: 100%;
}

.client > a{
    border: 1px solid;
    font-size: 19px;
    font-weight: bold;
    padding: 13px 20px 10px;
    margin-left: 17px;
    color: #00266f;
}

.client > a:visited{
    color: #00266f;
}

.temoignage{
    background-color: #8dabd1;
    color: white;
    text-align: center;
}

.temoignage > p{
    font-size: 38px;
    margin-top: 0;
}

.temoignage > h2{
    color: #6a66b0;
    font-size: 18px;
    margin-top: 67px;
    font-weight: bold;

}

.temoignage > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 37px;
}
blockquote{
    width: 55%;
    margin-top: 12px;
}
blockquote > footer{
    margin-top: 32px;
    margin-bottom: unset;
    font-size: 14px;
}

.equipe{
    text-align: center;
    color: #00266f;
    position: relative;
}

.designEquipe{
    background: linear-gradient(to top left, rgba(98,196,205,0) 0%, rgba(98,196,205,0) 50%, rgba(98,196,205,1) 25%, rgba(115,120,184,1) 75%);
    width: 45%;
    height: 46%;
    position: absolute;
    z-index: -1;
}

.equipe > p{
    font-size: 38px;
    margin-top: unset;

}
.equipe > h2{
    color: #5cc8cd;
    font-weight: bold;
    font-size: 18px;
    margin-top: 157px;
} 

.equipe > div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8%;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.divStaff{
    position: relative;
    overflow: hidden;
    border-radius: 135px;
    height: 249px;
    width: 246px;
    border: 1px solid;
}

.photoStaff{
    width: 102%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.divStaffBast{
    position: relative;
    overflow: hidden;
    border-radius: 135px;
    height: 249px;
    width: 246px;
    border: 1px solid;
}

.photoStaffBast{
    width: 389%;
    position: absolute;
    top: 131%;
    left: 79%;
    transform: translate(-50%, -50%);
}

/* TEAM */

.teamPresentation{
    display: flex;
    flex-wrap: wrap;
    background-repeat: no-repeat;
    justify-content: space-evenly;
    align-items: center;
    background-size: cover;
}

.imageTeamPresentation{
    width: 100%;
    margin-top: 207px;
}

.teamCV > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 84px;
    align-items: center;
}
.teamCV{
    display: flex;
    flex-direction: column;
    color: #00266f;
    position: relative;
    margin-bottom: 247px;
}

.designTeamCV{
    position: absolute;
    background: linear-gradient(to bottom right, rgba(98,196,205,0) 0%, rgba(98,196,205,0) 50%, rgba(98,196,205,1) 25%, rgba(115,120,184,1) 75%);
    width: 459px;
    height: 290px;
    bottom: -247px;
    right: 0;
}

.flexTextTeamCV{
    display: flex;
    width: 54%;
    flex-direction: column;
    justify-content: space-evenly;
}

.flexTextTeamCV > p:first-child{
    font-weight: 600;
    font-size: 19px;
    color: #5cc8cd;
}

.flexTextTeamCV > h3{
    font-size: 38px;
    margin-top: -11px;
}

.flexTextTeamCV > p:nth-child(3){
    font-weight: bold;
}

.flexTextTeamCV > p:nth-child(4){
    width: 81%;
}

.imageSet{
    margin-left: 1.5%;
    margin-top: 10px
}

.textStaff{
    text-align: center;
}

.competenceTeamCV{
    width: 100%;
    display: flex;
    justify-content: normal;
    gap: 7%;
    padding-left: 10%;
    padding-right: 15%;
}

.competenceTeamCV > div > ul{
    list-style: none;
    padding-left: unset;
    gap: 10px;
    display: flex;
    flex-direction: column;
    width: 300px;
}

.competenceTeamCV > div > ul > li{
    background-color: #e6e6e6;
}

.competenceTeamCV > div > ul > li > div{
    height: 25px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    color: white;
}

.divPercentTeamCVpurple{
    background-color: #6a66b0;
}
.divPercentTeamCVblue{
    background-color: #00266f;
}

.marginUnset{
    margin-top: unset;
    padding: 2%;
}


.competenceTeamCV > div:nth-child(2){
    display: flex;
    align-items: center;
    gap: 20px;
}

.competenceTeamCV > div:nth-child(2) > img{
    width: 75px;
    height: 75px;
}

.competenceTeamCV > div:nth-child(2) > div > p:first-child{
    font-weight: 600;
    font-size: 17px;
    color: #5cc8cd;
}

.temoignageTeam > p{
    margin-top: 67px;
    font-size: 18px;
    font-weight: 600;
    color: #6a66b0;
}

.temoignageTeam > h3{
    font-size: 36px;
    margin-top: unset;
    margin-bottom: 74px;
}

.temoignageTeam > a{
    border: 1px solid;
    font-size: 19px;
    font-weight: bold;
    padding: 14px 31px 10px;
    color: white!important;
}

/* TEAM */

/* RECAP */

.client > div > div > ul{
    display: flex;
    list-style: none;
    margin-top: 60px;
    font-weight: bold;
    gap: 3vw;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: unset;
}

.client > div > div > ul:first-child > li{
    border: 1px solid #00266f;
    padding: 15px 45px;
}

.client > div > div > ul:nth-child(2) > li > a > img{
    border: 1px solid #00266f;
    height: 217px;
    width: 213px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.divViewTeam{
    display: flex;
    justify-content: center;
}

a .borderViewTeam{
    color: #00266f;
}

.divViewTeam p{
    border: 1px solid #00266f;
    padding: 15px 45px;
    font-weight: 700;
    text-align: center;
}

/* RECAP */

/* CLIENTS */

.objective{
    color: #00266f;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.objective > p:first-child{
    font-weight: 600;
    font-size: 19px;
    color: #5cc8cd;
}

.objective > h3{
    font-size: 38px;
}

.objective > p:nth-child(2){
    width: 55%;
    text-align: center;
}

.objective > div:nth-child(3) {
    display: flex;
    justify-content: center;
    padding-left: 7.3%;
    padding-right: 7.3%;
}

.objective > div:nth-child(4){
    display: flex;
    justify-content: center;
    padding-left: 7.3%;
    padding-right: 7.3%;
    flex-direction: column;
}

.objective > div > div:first-child{
    padding-right: 3.7%;
    width: 224px;
    background-color: #8dabd1;
    padding-top: 4px;
    padding-left: 3.7%;
    margin-top: 49px;
    color: white;
    text-align: justify;
}

.objective > div > div:nth-child(2){
    width: 75%;
    padding-left: 49px;
    margin-top: 31px;
}

.objective > div > div:first-child > p{
    width: 87%;
    text-align: justify;
}

.objective > div > div:nth-child(2) > p{
    width: 82%;
    text-align: justify;
}
.objective > div:nth-child(5){
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    padding-left: 7%;
    padding-right: 7%;
}
.objective > div:nth-child(5) > p{
    text-align: center;
}
/* CLIENTS */

/* ADVICE */

.advice{
    display: flex;
    flex-direction: column;
    color: #00266f;
    gap: 25px;
}

.borderBlue{
    border: 2px solid #00266f;
}

.advice > div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 45px 4% 45px 7%;
}

.flexDirection{
    flex-direction: row-reverse;
}

.textAdvice{
    width: 70%;
}

.backgroundAdviceColorPurple{
    background-color: #b8d0ea;
}

.backgroundAdviceColorGreen{
    background-color: #d5f2f0;
}

/* ADVICE */

/* CONTACT */
.contactForm{
    background-color: #233365;
    margin-top: -1px;
}

.contactForm form{
    display: flex;
    align-items: center;
}

#dynamic_form1{
    background-color: #233365;
    height: 300px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 300px;
}

.width-half{
    display: flex;
    justify-content: space-between;
    width: 275px;
}

.width-full{
    display: flex;
    justify-content: space-between;
    width: 275px;
}
.width-full button{
    display: flex;
    justify-content: center;
}



/*
.width-half{
    width: 300px;
}

.width-is-last{
    display: flex;
    justify-content: space-between;
}

.required{
    margin: 15px;
}

#dynamic_form1_lastName{

}
*/
/* CONTACT */

/* FOOTER */

footer{
    color: white;
    background-repeat: no-repeat;
    background-size: cover;
}

.divFooterFlex{
    display: flex;
    gap: 11%;
    flex-wrap: wrap;
}

.footerLogo{
    margin-left: 8.4%;
}

form{
    display: flex;
    flex-direction: column;
    margin-top: 23px;
}

h5{
    font-size: 25px;
    margin-bottom: unset;
}

/* Style pour les conteneurs des champs */
.width-half, .width-full {
    display: flex;
    flex-direction: column;
}

/* Style pour les labels */
#dynamic_form1 label {
    display: block;
    margin-bottom: 2px; /* Ajuste l'espace entre le label et l'input */
}

/* Style pour les inputs et textareas */
#dynamic_form1 input[type="text"],
#dynamic_form1 input[type="email"],
#dynamic_form1 textarea {
    width: 98%;
    margin-top: 6px;
}



form button{
    width: 159px;
    margin-top: 34px;
    font-size: 18px;
    PADDING-TOP: 11PX;
    PADDING-BOTTOM: 11px;
    background-color: #233365;
    border: 1px solid #5cc8cd;
    color: #5cc8cd;
    font-weight: bold;
}

.divInfoFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 9%;
    padding-left: 9%;
    flex-wrap: wrap;
}

.pFooter{
    width: 50%;
}

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

.infoIconDiv{
    display: flex;
    flex-wrap: wrap;
    max-width: 270px;
    justify-content: center;
}

.iconSocial{
    width: 45px;
    height: 45px;
}

.footerColor{
    background: linear-gradient(90deg, rgba(93,200,206,1) 0%, rgba(105,103,176,1) 100%);
    height: 39px;
    text-align: center;
    font-weight: bold;
    padding-top: 19px;
    font-size: 15px;
}
/* FOOTER */

@media screen and (min-width: 1960px) {
    .divFooterFlex{
        padding-left: 10%;
    }

}


@media screen and (max-width: 1130px) {
    .competence div img{
        display: none;
    }
    .designCompetence{
        display: none !important;
    }
    .green{
        margin-left: unset;
    }
    .FlexCompetence {
        justify-content: center;
        padding-bottom: 30px;
    }
    .techObjective {
        flex-wrap: wrap;
    }

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

    .imagePresentation{
        margin-top: unset;
    }

}
@media screen and (max-width: 1069px) {
    .divFooterFlex{
        justify-content: center;
    }

}
@media screen and (max-width: 1006px) {
    .designTeamCV{
        display: none!important;
    }

}
@media screen and (max-width: 894px) {
    .imageTeamPresentation{
        margin-top: unset;
    }
    .designEquipe{
        height: 241px;
    }
}

@media screen and (max-width: 887px) {
    .metier{
        background-color: white;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .metier div p{
        width: unset;
        margin-left: unset;
    }
}

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

    .equipe > h2 {
        color: #5cc8cd;
        font-weight: bold;
        font-size: 18px;
        margin-top: 40px;
    }

    .competence > div > p{
        width: unset;
        margin-left: unset;
        margin-top: 12px;
        display: unset;
        padding-left: 13%;
        padding-right: 12%;
    }

    .competence > div > ul {
        justify-content: center;
        flex-wrap: wrap;
    }
    .competence > div > ul > li:first-child {
        margin-left: unset;
    }
    .logo{
        width: 186px;
        margin-left: -78px;
        margin-top: -74px;
    }
    .ulNav{
        padding-top: 130px;

    }
    .liLeft {
        margin-left: unset;
    }
    .designEquipe{
        display: none!important;
    }
    .competenceTeamCV > div:nth-child(2){
        flex-wrap: wrap;
        justify-content: center;
    }
    .designTeamCV{
        display: none!important;
    }
    .teamPresentation{
        background-color: #233365;
    }
    .competenceTeamCV{
        flex-wrap: wrap;
        justify-content: center;
        gap: 7%;
        padding-left: unset;
        padding-right: unset;
    }
    .temoignageTeam {
        margin-top: unset;
    }
    body > footer{
        background-color: #233365;
    }

}
@media screen and (max-width: 539px) {
    .flexTextTeamCV{
        width: 91%;
    }
    .flexTextTeamCV > p:nth-child(4) {
        width: 91%;
    }
}
@media screen and (max-width: 502px) {
    .divInfoFooter{
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {
    h2 {
        font-size: 24px;
    }
    .flexTextTeamCV > h3 {
        font-size: 26px;
    }
    .imageTeamPresentation {
        width: 100%;
    }
    .footerLogo {
        width: 100%;
        margin-left: unset;
    }
    .inputBasic {
        width: unset;
    }
    .inputWide {

        width: unset;
    }
    .pFooter {
        width: unset;
    }
}

@media screen and (max-width: 388px) {
    .metier img {
        width: 100%;
        margin-top: 163px;
        margin-left: unset;
    }
    .mentraTeamCV > div{
        padding-left: 2%;
        padding-right: 2%;
    }
}