@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/*--------------------- encien fonts --------------------------------*/



/*@font-face {*/
/*    font-family: 'Gotham-Medium';*/
/*    src: url('/font/Gotham-font-family/Gotham/Gotham-Medium.otf') format('otf');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'HelveticaNeueMedium';*/
/*    src: url('/font/helvetica/HelveticaNeueMedium.otf') format('otf');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Metropolis-Medium';*/
/*    src: url('/font/metropolis/Metropolis-Medium.otf') format('otf');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/



*{
    font-family: Gotham;
   ;
}

main {
    max-width: 2000px;
    margin: 0 auto;
}

header{
    max-width: 2000px;
    margin: 0 auto;
}


/*-------------------------------------accesibilité--------------------------------------------------------*/
.accesibilité{
    visibility: hidden;
    position: fixed;
    right: 0;
    z-index: 1000;
    overflow-y: scroll;
    height: 705px;
    width: 430px;
    margin-right: 0px;
}

*{
    font-family: "Metropolis", sans-serif;
    margin-left: 0px;
    margin-top: 0px;
}

.header{
    background-color: #0048FF;
}

.mid{
    background-color: #edeff3;
    display: inline-block;
    width: 430px;
}


.header img{ /* croix blanc*/
    width: 24px;
    position: fixed;
    top: 15px;
    right: 15px;
}

.title{
    /* de base 16px*/
    font-size: 0.9375em; /* 15/16 */
    font-family: "Metropolis", sans-serif;
    padding: 5px 25px 15px 0px;
    margin-bottom: 5px;
    color: white;
    margin-left: -70px;
    display: inline-block;
}


/*-------------boutton-------------------*/
.francais_belgique{
    display: flex;
    align-items: center; /* Centre verticalement */
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    margin-right: 25px;
    margin-left: 20px;
    background-color: transparent;
    margin-top: 3px;

}

.profil_etudaiant{
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    margin-right: 25px;
    margin-left: 20px;
    background-color: transparent;
}

.ce{
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    margin-right: 25px;
    margin-left: 20px;
    background-color: transparent;
    margin-bottom: 25px;
}

.be{
    width: 31px;
    margin-left: 20px;
    padding-left: 0px;
}

.bonhomenoire{
    width: 28px;
    margin-left: 20px;
    padding-left: 0px;
}

.ce img{
    width: 22px;
    margin-left: 20px;
    padding-left: 0px;
}

.francais_belgique button{ /* francais belgique*/
    margin-left: 20px;
    padding: 15px 0px 15px 0px;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.profil_etudaiant button{
    /* de base font-siez: 13.3333px */
    margin-left: 20px;
    padding: 15px 0px 15px 0px;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.competances_aquise{
    margin-left: 20px;
    padding: 15px 0px 15px 0px;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.mid section button:last-of-type{ /* Compétences acquise */
    /* de base font-siez: 13.3333px */

}

.rafraichire_les_compétances{ /* comme le button mais en plus global*/
    background-color: #0048FF;
    border-style: none;
    border-radius: 9px;
    width: 401px;
    height: 34px;
    margin-left: 0px;
    margin-top: 28px;
    margin-bottom: 28px;
}

.rafraichire_les_compétances img{ /* flèche rafraichisante*/
    width: 21px;
    position: relative;
    top: 2px;
    right: 54px
}

.refresh{ /* Rafraichir les compétences acquise */
    font-size:1.050002625006563em;/* de base font-siez: 13.3333px */
    color: #FFFFFF;
    text-decoration: none;
}

.zone_reglage button{ /* reglage*/
    /* de base font-siez: 13.3333px */
    background-color: transparent;
    border-style: none;

}

.footer button:first-of-type{ /* Signaler un problèmes */
    /* de base font-siez: 13.3333px */
    color: #0048FF;
    background-color: transparent;
    border-style: none;
    margin-left: -242px;
    margin-top: 12px;
}

.footer button:last-of-type{ /* Gérer */
    /* de base font-siez: 13.3333px */
    display: block;
    background-color: #0048FF;
    color: white;
    border-radius: 8px;
    border-style: none;
    margin-top: 8px;
    margin-left: 20px;
}

/*----------------------------------------------*/
.francais_belgique img:nth-of-type(2){
    width: 6.41px;
    margin-left: 8px;
}

.logos li:nth-child(1) img {
    padding: 14px 33px 14px 32px;
    width: inherit;
}

.logos li:nth-child(2) img {
    padding: 2px 30px 1px 30px;
    width: inherit;
}

.logos li:nth-child(3) img {
    width: 62px;
    padding: 12px 32px 13px 31px;
}

.css_icon{
    width: 63px;
    padding: 1px 31px 16px 31px;
}

.logos li:nth-child(5) img {
    width: 97px;
    padding: 29px 14px 30px 14px;
}

.html_icon{
    width: 58px;
    padding:  1px 34px 15px 33px;
}

.js_icon{
    width: 71px;
    padding: 0px 27px 12px 27px;
}

.logos li:nth-child(8) img {
    width: 64px;
    padding: 16px 31px 15px 30px;
}

.logos li:nth-child(9) img {
    width: 44px;
    padding: 6px 41px 6px 40px;
}

.my_sql.icon{
    width: 97.59px;
    padding: 1px 11.52px 25.24px 15.88px;
}

.php_icon{
    width: 95px;
    padding: 2px 15px 22px 15px;
}

.logos li:nth-child(12) img {
    width: 68px;
    padding: 14px 29px 14px 28px;
}

.logos li:nth-child(13) img {
    width: 76px;
    padding: 10px 25px 10px 24px;
}

.logos li:nth-child(14) img {
    width: 59px;
    padding: 12px 33px 12px 33px;
}

.logos li:nth-child(15) img {
    width: 68px;
    padding: 14px 29px 13px 28px;
}



.chekone{
    width: 15px;
    position: relative;
    top: 5px;
    left: -50px;
    padding: 0px;

}

.chektwo{
    width: 15px;
    padding: 0px;
    position: relative;
    top: 5px;
    left: -50px;
}

.chekthree{
    width: 15px;
    padding: 0px;
    position: relative;
    top: 5px;
    left: -50px;
}

.chekfoure{
    width: 15px;
    padding: 0px;
    position: relative;
    top: 5px;
    left: -50px;
}

.chekfive{
    width: 15px;
    padding: 0px;
    position: relative;
    top: 5px;
    left: -50px;
}

div>img{  /*gear*/
    width: 28px;
    margin-left: 20px;
    margin-right: 12px;
}

.zone_reglage{
    display: flex;
    vertical-align: center;
    margin-bottom: 25px;
    background-color: transparent;
}

.fleche_droite{
    width: 6.41px;
    margin-left: 8px;
}

.footer img{ /*logo de la hepl*/
    width: 96px;
    position: relative;
    top: -33px;
    left: 148px;
}

/* tout les images*/
.logos{
    display: grid;
    gap: 5px;
    grid-template-columns: 125px 125px 125px;
    grid-template-rows: 95px 95px 95px 95px 95px;
    list-style: none;
    margin-left: 20px;
}

/* tout les fond*/
.logos li{
    background-color: white;
    border-radius: 9px;

}

.footer{
    background-color: white;
}

/*---------------------------------------------------------------------------------------------------------*/


.the_tri_top_links{
    background-color: transparent;
    text-align: center;
}

.myparcour_top{
    color: black;
    margin-right: 10px;
    font-family: Gotham;
    display: inline-block;
}

.my_portfolio_top{
    color: black;
    margin-right: 10px;
    font-family: Gotham;
    display: inline-block;
}

.my_formulaire_top{
    color: black;
    font-family: Gotham;
    display: inline-block;
}

img{
    width: 100%;
}

.lienBurgerMenu{
    visibility: hidden;
}

.burgeurmenu{
    display: inline-block;
    margin-top: 16px;
    margin-left: 10px;
    border: none;
}

.burgeurmenu span:nth-of-type(1){
    display: block;
    width: 34px;
    height: 3.5px;
    background-color: black;
    margin: 6px 6px 1px 6px ;
}

.burgeurmenu span:nth-of-type(2){
    display: block;
    width: 34px;
    height: 3.5px;
    background-color: black;
    margin: 3px 6px 3px 6px ;
}


.burgeurmenu span:nth-of-type(3){
    display: block;
    width: 34px;
    height: 3px;
    background-color: black;
    margin: 4px 6px 6px 6px ;
}

.nomprenomhaut{
    font-family: Bebas Neue,Alegreya Sans,sans Serif;
    /* de base il y a le font size fait 16 px*/
    font-size: 40px;
    color: black;
    display: flex;
    justify-content: center; /* Centre tout le texte horizontalement */
    margin-top: -148px; /* Espace vers le haut */
}

.section_my_competances span:nth-child(1){ /*HEPL  dans le text*/
    color: white;
}

.the_tri_top_logo{
    background-color: transparent;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.the_tri_top_logo li {
    margin: 5px;
}

.instableu{
    width: 18px;
    top: -10px;
    left: 20px;
    display: inline-block;

}

.facebookbleu{
    width: 18px;
    top: 0;
    left: 15px;
    display: inline-block;

}

.twiterbleu{
    width: 20px;
    top: -28.7px;
    left: 30px;
    display: inline-block;
}

.logoaccesibility{
    width: 45px;
    position: fixed;
    top: 11px;
    right: 25px;

}
/*------------------------header-------------------*/
.first_section{
    display: inline-block;
    background-image: url("img/image_of_top_webP_new.webp");
    background-position: right center;
    background-color: blue;
    background-size: cover;
    width: 100%;
    height: 626px;

}

.contactez_moi{
    display: inline-block;
    background-image: url("/img/my_outstretched_arm_webP.webp");
    background-position: right center;
    background-color: blue;
    background-size: cover;
    width: 100%;
    height: 626px;
}

.section_my_competances{
    display: inline-block;
    background-image: url("/img/my_of_profil_webP.webp");
    background-position: right center;
    background-color: blue;
    background-size: cover;
    height: 821px;
}


@media screen and (min-width: 600px) {
    /*plus petit que 600          verssion tel*/
    .burgeurmenu {
        visibility: hidden;
    }
}

@media screen and (min-width: 600px) and (max-width: 1000px) {


    .the_tri_top_links{
        margin-top: 47px;
        margin-bottom:20px ;
    }



}

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

    body .reseau_social {/*------------------------------------------------------------------------------------*/
        background-color: #0048FF;
        background-image: none;
    }



    .section_my_competances p{
        margin-right: 187px;
    }

    body .mon_porfolio{
        font-size: 16px;
        text-align: center;
        margin-right: 10%;
        margin-left: 10%;

    }

    .first_section{
        background-image: url("/img/image_of_top_coupe_jpeg.jpg");
        background-position: right center; /* Positionne l'image à droite */
    }

    .contactez_moi{
        background-image: url("/img/my_outstretched_arm_jpeg.jpg");
        background-position: right center; /* Positionne l'image à droite */
    }


    .surmonparcoure{
        padding-left: 200px;
    }

    .the_tri_top_links{
        visibility: hidden;
    }

    .the_tri_top_logo{
        visibility: hidden;
    }

    .extention{
        visibility: hidden;
    }

    header{
        height: 60px;
    }



}


@media screen and (min-width: 500px){  /*plus grand que 500*/
    .surmonparcoure{
        width: 200px;
        display: flex;
        text-align: center;

    }

    .surayman{
        width: 200px;
        display: flex;
        text-align: center;
    }

    .mon_porfolio{
        margin-top: 30px;
    }

    .contactez_moi .extention{
        color: gray; /* je l'ai mis pour qu'on le vois bien*/
    }

    .contactez_moi p{
        color: gray; /* je l'ai mis pour qu'on le vois bien*/
    }

    .sur_mon_parcourand_ayman{
        position: absolute;
        left: 26px;
    }

    body .resaux_liste{
        width: 300px;
    }


}

@media screen and (min-width: 750px){
    .mclassdle_images li:nth-child(2),
    .mclassdle_images li:nth-child(3) {
        display: inline-flex; /* Met les deux éléments sur la même ligne */
        align-items: center; /* Alignement vertical */
        width: 45%; /* Ajustez la largeur en fonction de l'espace disponible */
        margin-bottom: 0px;
        text-align: center;
    }
}


@media screen and (min-width: 1100px){  /* car avec le blanc on voyez rien*/
    .reseau_social p{
        color: #5F82A9;
    }
}

@media screen and (min-width: 1000px) {

    margin-top: 48px;
}

@media screen and (min-width: 1000px) {

    .the_tri_top_links{
        position: absolute;
        top: -22px;
    }
    .my_formulaire_top{
        color: black;
        font-family: Gotham;
        display: inline-block;
        margin-top: 50px;
        color: black;
    }

    body div div .title{
        color: olivedrab;
        font-size: 15px;
        margin-right: 100px;
    }

    body h1{
        font-size: 5.5625em; /*89/16*/
        margin-right: 324px;
    }

    body h2{
        font-size: 4.388888888888889em; /*79/18*/
    }

    .section{
        display: flex;
        justify-content: space-between;
        align-items: center;  /* Aligne verticalement avec le logo bleu */
        padding: 10px 20px;
    }

   .the_tri_top_logo{
       margin-right: 43px;
       position: absolute;
       right: 50px;
       top: 4px;
   }

   .nomprenomhaut{
       display: flex;
       top: 155px;
       position: absolute;
       margin-left: 11px;
   }

   .logoaccesibility{
       position: fixed ;
       top: 12px;
   }

}

.mail{
    color: inherit;
    margin-left: 0px;
    font-family: "Helvetica Neue";
}

.HEPL{
    margin-left: 0px;
    font-family: "Helvetica Neue";
}

span{
    font-family: Bebas Neue,Alegreya Sans,sans Serif;
    /* de base il y a le font size fait 16 px*/
    color: #5f82a9;
}

h1 span:nth-of-type(2){  /* ayman du h1*/
    color: black;
}

.enplus{
    font-family: Helvetica Neue;
    /* de base il y a le font size fait 16 px*/
    color: black; /* de base il est bleu mais je l'ai mis en noire pour qu'on le voi bien*/
    display: block;
    margin-left: 0px;
}

b{
    font-weight: bolder;
}

.qualityproduct{
   font-family: Metropolis;
    font-size: 1.25em; /* 20/16*/
    margin-bottom: 24px;
    margin-right: 50px;
    font-family: "gotham";
    font-weight: lighter;
}



cite{
    font-size: 1.5em; /* 24/16 */
    color: #6B6B6B;
    margin-top: 15px;
    margin-left: 40%;
    margin-bottom: 67px;
    margin-right: 20px;
    display: inline-block;
    text-align: inherit;
}

.guillemet_ouvrant{
    width: 50px;
    position: relative;
    top: 10px;
}

.guillemet_fermant{
    width: 50px;
    position: relative;
    top: 30px;
    /* je ne sait pas comment régle ca******************/
}

.section_my_competances p{
    margin-right: 50px;
    font-weight: lighter;
}

.reseau_social p{
    margin-right: 50px;
}

h1{
    font-family: Bebas Neue,Alegreya Sans,sans Serif;
    /* de base il y a le font size fait 16 px*/
    margin-top: 20px;
    font-size: 2.8125em; /* 45/16 */
    margin-left: 26px;
    margin-right: 114px;
}



h2{
    font-family: Bebas Neue,Alegreya Sans,sans Serif;
    font-size: 2.8125em; /* 45/16 */
    color: white;
    margin-left: 26px;
    margin-top: 64px;
}

nav h2{ /*le mot réssaux*/
    color: black;
}

h3{
    font-family: Bebas Neue,Alegreya Sans,sans Serif;
    color: #999;
    font-size:1.1875em;  /* 19/16*/
    text-align: center;
    margin-top: 40px;
}

.liege_atlas_gris{
    display: flex;
    width: 147px;
    margin: 40px auto;
    margin-top: 90px;

    animation: slider 10s linear infinite;
}

.hepl_gris{
    display: flex;
    width: 291px;
    margin-top: 169px;
    margin-right: auto;
    margin-left: auto;
}

div:nth-of-type(3)>a {
    background-color: #5f82a9; /* c le boutton mon portefolio */
}

div:nth-of-type(2)>p {
    color: #ffffff; /* github discord...*/
}

div:nth-of-type(3)>h2 {
    color: white; /* MES*/
}

div:nth-of-type(2)>h2 {
    color: white; /* CONTACTER*/
}


.first_section p{
    margin-right: 238px;
}



.extention{
    color: white;
    margin-left: 0px;
    font-family: "Helvetica Neue";
}

div{ /* la zone ou se trouve la citation et l'avi*/
    background-color: #D9D9D9;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.voirecole{
    font-family: gotham;
    color: #999;
    font-size: 0.9375em; /* 15/16 */
    text-align: center; /* je ne sait pas purquoi sa ne fonctione pas*/
    margin-top: 129px;
    align-content: center;
    display: block;
}


.sur_mon_parcourand_ayman{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

}

.sur_mon_parcourand_ayman a{
    display: inline-block;

}

.surmonparcoure{
    background-color: #5f82a9;
    color: white;
    padding: 23px 16px 23px 15px;
    margin-top: 97px;
    border: 4px solid #5f82a9;
}


.surayman{
    color: white;
    border: solid white;
    background-color: transparent;
    max-height: 61px;
    padding: 24px 31px 24px 31px;
    margin-top: 97px;
}


.imageAyman{
    width: 100%;
    position: absolute;
}

nav{
    height: 690px;
}

.middle_images{
    text-align: center;
}

.mon_porfolio{
    color: white;
    display: inline-block;
    background-color: #5F82A9;
    padding: 22px 106px 21px 89px;
    margin-left: 40px;
    font-weight: 400;
}

a{
    font-size: 0.875em; /* 14/16 */
    text-decoration: none;
}

p{
    font-family: Helvetica Neue;
    font-size: 1em; /* 18/18 */
    margin-left: 26px;
    margin-top: 17px;
    line-height: 1.56;

}

section p{
    color: white;
}

.taille_seize{
    font-size: 1em; /* 16/16 */
    color: white; /* je l'ai mis en blanc pour que ca se voi bien*/
    margin-bottom: 41px;
}

/*-----------------------reseaux sociaux-------------------*/

.reseau_social{
    background-image: url("/img/bottom_image_webP.webp");
    background-position: right center;
    background-color: white;
    background-size: cover;
    margin-top: 0px/* je ne sait pas pourquoi il prend mm le backround*/;
    display: inline-block;
    width: 100%;
}

.resaux_liste a {
    color: white; /* Couleur du texte */
    font-size: 16px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* Espacement optimal */
}

.resaux_liste{
    background: #666; /* Couleur de fond gris */
    margin: 10px 0; /* Espacement entre les éléments */
    padding: 15px;
    display: flex;
    justify-content: space-between; /* Espacement entre texte et icône */
    align-items: center;
    margin-right: 20px;
    margin-left: 20px;
}

.Logo_insta_Blanc{
    width: 36.18px;
}

.logo_facebook_Blanc{
    width: 35px;

}

.Logo_twitter_Blanc{
    width: 36px;
}

/*----------------------footer-----------------*/

footer{
    background-color: black;
    display: inline-block;
    width: 100%;
}


.tri_links_bottom{
    display: ruby;
    text-align: center;


}
.surmonparcourebas span{
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

.portefoliobas span{
    margin-top: 17px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}

.formulairebas span{
    margin-top: 17px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}


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

.facebookbleubas{
    width: 21px;
    margin-right: 10px;
}

.twitterbleubas{
    width: 23px;
    margin-right: 10px;


}

.instableubas{
    width: 21px;
    margin-right: 10px;
}

.nomprenombas{
    color: white;
    margin-top: 20px;
    margin-bottom: 26px;
    font-family: Bebas Neue ,Alegreya Sans,sans Serif; /* je ne sait pas pourquoi sa ne fonctionne pas*/
    font-weight: normal;
    font-size: 24px;
    letter-spacing: 5px;
}

.textedefin{
    color: white;
    font-size: 13px;
    font-weight: lighter;
    margin-bottom: 56px;
    margin-right: 20px;
}

footer div{
    background-color: black;
    margin-top: 44px;
    text-align: center;
}

footer span{ /* les liens de footer*/
    color: white;
    font-family: Gotham;
    font-size: 1em;
}/* de base 16    16/16 */

.follower{
    position: absolute;
}


@media screen and (max-width: 600px) {
    .tri_links_bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;

    }
}