/*  index.html */
/*résosution problème d'affichege bouton en version tel j'ai chercher longtemps avant de trouvé uniquement cette solution sur un site*/

/* style des credit du carrouselle*/
.legendeINDEX{
  font-family: monospace;
  font-size: small;
  color: whitesmoke;
  padding-top: 10pt;
  text-align: center;
  
}
/*  style logo */
.logo{
    display: block;
    width: 60%;
    background-color: white;
    margin-left: 50%;
    border-radius: 10%;
  }
/*  position nouveau logo */
#newlogoblc{
 display: block;
 background-color: white;
 

 
}

/*test logo*/




  /* style carouselle  */
  .orbit{
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
  }
  
/* style top barre  */
#main-menu{
  border: solid;
  background-color: #44566c;
  border-color: #2f435e;
  border-width: 5px;
}

/* style bouton  */
div ul li a{
  color: #ececec;
  background-color: #44566c;
  border-color: #ececec;
  border: solid;
  border-width: 1pt;
}


/* style bouton hover  */
div ul li a:hover{
  color: #2f435e;
  background-color: #ececec;
  transition: 1s all;
  
}
/* style des hr  */
#style-2 , #style-1,#style,#style2{
  border: solid;
  border-color: black;
  border-radius: 100%;
}

/* style hr numero 2  */

.petit{
  width: 250px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  margin-top: auto;
}
/* augmentation de la taille d'une img qui va pas*/
#retouchepettit{
  width: 350px;
}
/* style du message de bienvenue  */
#messacc{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #44566c;

}
/* style message presentation  */
#messpres{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 180%;
  color: #44566c;
}
/* position des reseau en bas de page  */
.res {
  display: flex;
  justify-content: space-between;
  border: solid;
  border-width: 5px;
}
/* taille linkedin  */
#linke{
  width: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  margin-top: auto;
}
/* taille discord  */
#discord{
  width: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  margin-top: auto;
  text-align: center;
}
/* taille watsapp  */
#watsapp{
  width: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  margin-top: auto;
  text-align: center;
}
/* style bouton legal  */
.legal{
  color: white;
  margin-left: 5%;
  min-width: 10px;
}
/* hover du bouton legal  */
.legal:hover{
  background-color: white;
  color: black;
  transition: 1s all;
}
/* couleur du bas de page  */
#basindex{
  background-color: #44566c;
}
/* style du copyright  */
#copy{
  color: white;
  margin-right:5%;
}
/* positionement de la dernirer image de index.html*/
.lastimgindex{
  width: 60%;
  margin-left: 20%;
}
/* style du "qui suis-je"*/
#titlelast{
  color: #44566c;
  display: block;
  margin-bottom: 5%;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
/* style du texte bas page index*/
#txtlast{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
















/* page de cv.html*/
/*style barre nav cv */
#hautcv{
  background-color: #44566c;
}
/* style texte competence*/
.textestyle{
  font-family: initial;
  color: #ececec;
  text-align: center;
}
/* style de qui a servie de test pour un tableau je n'ose pas y toucher */
div div ul li{
  background-color: #44566c;
  border: solid;
  border-style:double;
  border-width: 1px;
  border-color: #2f435e;
  border-collapse: collapse;
  font-weight: lighter;
  text-align: center;
}
/* style cordonnée*/
#cordo{
  color: #ececec;
  background-color: #44566c;
  text-align: center;
  font-family:'Times New Roman', Times, serif;
}
/*style email dans cordonnée */
#mailcv{
  background-color: #ececec;
  color: black;
}
/* style de qui a servie de test pour un tableau je n'ose pas y toucher */
div div ol li{
  background-color: #44566c;
  border: solid;
  border-style:double;
  border-width: 1px;
  border-color: #2f435e;
  border-collapse: collapse;
  font-weight: lighter;
  text-align: center;
  color: #2f435e;
}
/* style  Mon web inutile mais ça rajoute du style je trouve*/
.btn{
  color: #ececec;
  margin-top: auto;
  margin-bottom: auto;
}
.btn:hover{
  color: #2f435e;
  background-color: black;

  transition: 1s all;
}
/* photo sur CV*/
#photogib{
  width: 100px;
  display: block;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
}
/*mise en forme haut cv  */
#debcv{
  background: #ececec;
  border: solid;
  border-radius: 10px;
}
/* style des hr du cv*/
.barre{
  border-color:  black;
  border-width: 3px;
  border-radius: 100%;
}
/*style titre cv*/
#titlecv{
  font-family: serif;
  color: #44566c;
}
/*style sous titre cv*/
#subtitle{
  font-family:serif;
  color: #4b5e65;
}
/* style pour les tables*/
table{
  border-collapse: collapse;
}
/* style des th*/
th{
  border: solid;
  border-width: 4px;
  border-color: #4b5e65;
  background-color: #44566c;
  color: #ececec;
}
/*style des td (RRR pour contrer)*/
td{
  border-color: #4b5e65;
  border-width: 4px;
  border-style: solid;
  padding: 5pt;
}
/*mise en forme du picto fleche*/
.fleche{
  width: 15px;
  margin-left: 8px;
  margin-bottom: 5px;
}


/*style Mon parcour*/
#Tformation{
  color: #ececec;
  margin: auto;
  background-color: #44566c;
  text-align: center;
  border: solid;
  border-width: 10px;
  border-color: #44566c;
  margin-bottom: 1%;
}
/*changement couleur de RISC car lien */

#RISC{
  color: #2f435e;
}
/* couleur des listes ordo*/
.lna{
color: #4b5e65;
}
/* style des hr de cv cette fois si vue qu'ils son légérement differents*/
.barrecorp{
  border: solid;
  border-radius: 100%;
  padding: 0.3%;
  color: black;
  background-color: black;
}
/* changement de couleur*/
thead tr td {
  background-color: #44566c;
}
/* style de l'image de la rubrique experience*/
.imgcv{
  display: block;
  width: 50%;
  margin-left: 25%;
  border: solid;
  border-radius: 3%;
  border-style: dashed;
  margin-top: 5%;
}
/* style titre experience*/
#expe{
  color: #ececec;
  text-align: center;
  border: solid;
  border-color: #2f435e;
  border-width: 5px;
  background-color: #4b5e65;
}
/* je voulais un peu d'espace entre les listes et l'image (rubrique experience)*/
.espace1peu{
  margin: 5%;
}
/* design des ol vue que j'avais fait des conerie (jetai jeune)*/
.RRR{
  background-color: #ececec;
}
/*nom des stage desing */
.titrexpe{
  color: #4b5e65;
  text-decoration: underline;
  font-weight: bold;
}
/* style legendes experience*/
.legendexpe{
  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* style de beaucoup de picto*/
.picto{
  width: 27px;
  margin-bottom: 1%;
}
/*style du txt de la rubrique langue*/
#txtlangue{
  color: white;
  text-align: center;
  border: solid;
  border-width: 2px;
  -webkit-text-stroke: 1px white;
  background-color: #4b5e65;
}
/* pagination de l'image du cv pour les langues*/
#imgcvl{
  margin-left: 20%;
  width: 60%;
  border: solid;
  border-width: 20px;
  border-color: #2f435e;
}
/* style police anglais txt*/
#Anglais{
  color: black;
  font-size: 18pt;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin-left: 5%;
  text-decoration: underline;
  text-emphasis: none;
  font-weight: bold;

}
/* style de mon lvl en langue*/
#niveaulan{
  color:#2f435e;
  font-weight: bold;
}

/*style de la 2eme image*/
#img2{
  width: 50%;
  display: block;
  margin-bottom: 30px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  border: solid;
  border-style: ridge;
  border-color: #4b5e65;
  border-width: 5px;
}
/*style du titre de centre d'interet*/
#titlecen{
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%;
  font-size: 35px;
  background-color: #44566c;
  color: white;
  border: solid;
  border-width: 5px;
  border-color: #4b5e65;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/*style du tableau des passion (c'est une liste deguiser)*/
.passion{
  background-color: white;
  border-color: #4b5e65;
  border-style: dashed;
  list-style-type: none;
}
/*style du txt des passion titre ex: cuisine*/
.txtpassion{
  margin-top: 10px;
  text-decoration: underline;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}
/*style du txt des passion pas titre ex: jaimr la cuisine car .....*/
.txtpassionstyle{
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}
/*style title de atout*/
#titleatout{
  text-align: center;
  margin-top: 5%;
  background-color: #2f435e;
  color: white;
  border: solid;
  border-style: groove;
  border-color: #4b5e65;
  font-family: serif;
}
/*laisse une petite marge a la fin du cv */
#fincv{
  margin-bottom: 15%;
}
/*style du block sommaire car je lai fait a la fin */
#Sommaire{
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background-color: #ececec;
  border: solid;
  border-style: dashed;
}



/*style liste a puce formation*/

.last{
  background-color: #ececec;
  color: #2f435e;
  border: none;
}

.monparcours{
  text-align: left;
}




/* page de contact */
/*style des grand picto*/
.pictogrand{
  margin-top: 10%;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* leger diff boutons*/
.btncont{
  background-color: #ececec;
  color: white;
  border: solid;
  border-width: 15px;
  border-color: #2f435e;
  margin: 25%;
  margin-top: 30%;
  margin-bottom: 25%;
  text-align: center;
  border-radius: 10%;
  
}
.btncont:hover{
  border: solid;
  border-width: 10px;
  border-color: #44566c;
  

}
/* style bouton de nav*/
.btnc2{
  color: black;

}
.btnc2:hover{
  color: #4b5e65;
}
/*style titre page*/
#titlecontact{
  text-align: center;
  font-family: serif;
  color: #44566c;
}
/*style sous titre page*/
.textecont{
  font-size: 20px;
  text-align: center;
  color: #2f435e;
}
/* bord du haut de page*/
#formecont{
  background-color: #ececec;
  border: solid;
  border-width: 8px;
}
/*style de la table de contact*/
#tablecont{
  display: block;
  justify-content: center;
  margin-top: 10%;
  margin-bottom: 8%;
  margin-left: auto;
  margin-right: auto;
  border: solid;
  border-style: dashed;
  width: 75%;
}
/* allignement de likedin vue que la page est differente*/
#linke2{
  display: block;
  width: 30px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: 30%;
}
/*c'est pas beau je vais supp(style fleche)*/
.pictocont{
  width: 10%;
  margin-left: 40%;
  margin-right: 20%;
  margin-bottom: 20%;
}
/*pas beau non plus masi c'est le txt en dessus de la fleche*/
#resecont{
  font-size: 22px;
  margin-left: 40%;
  margin-bottom: 0%;
  color: #4b5e65;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/*style du mailto*/
#mailcontact{
  color: #ececec;
}
/* mise en page de l'image en bas de la page*/

.imgcontact{
  width: 30%;
  margin-left: 35%;
  margin-bottom: 10%;
  border: solid;
  border-color: #44566c;
}







/*page mention legale*/
/*style titre de la page */
#titlelegale{
  text-align: center;
  font-family: serif;
  color: #44566c;

}
/*style sous titre de la page */
.txtlegale{
  text-align: center;
  padding: 1%;
}
/*style bas de la page */
#baslegal{
  margin-bottom: 0%;
  margin-top: 40%;
}

/* mise en page du texte (alignement)*/
.formelegale{
  display: block;
  margin-top: 8%;
}
/* mise en forme de l'image */
.imglegale{
  width: 30%;
  margin-bottom: 0%;
  margin-left: 43%;
  margin-top: 0%;
}









/* page zoom sur  */
/*bouton page zoom*/
.btnz{
  background-color: #ececec;
  color: white;
  border: solid;
  border-width: 15px;
  border-color: #44566c ;
  margin: 25%;
  margin-top: 30%;
  margin-bottom: 25%;
  text-align: center;
  border-radius: 10%;
  
}
.btnz:hover{
  border: solid;
  border-width: 10px;
  border-color: #666606;
}
/*style titre page zoom*/
#titlez{
  color: white;
  font-family: serif;
}
/*style sous titre page zoom*/
#subtitlez{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: white;
}
/*style haut page zoom*/
#hautz{
  background-color: #4b5e65;
  border: solid;
  border-width: 8px;
  border-color: #44566c;
  border-style: double;
}

/* legende des photos*/
.legende {
  font-family: monospace;
  font-size: small;
  color: gray;
  padding-top: 10pt;
  text-align: center;
  
}
/* style texte page zoom*/
#txtz{
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 5%;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  border: solid;
  padding: 1%;
  border-style: dotted;
  border-color: #4b5e65;
}
/* mise en page image*/
.imgz{
  width: 70%;
  display: block;
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-style:dotted;
}
/*forme de la liste j'ai appris*/
#listez{
  margin-left: 10%;
  margin-right: 10%;
}
/*texte competence développer (style et mise ne page)*/
#jaiappris{
  margin-left: 10%;
  font-size: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*class pour personaliser la liste a puce et contrer une autre règles css (erreur de jeunesse)*/
.RRRz{
  background-color: #ececec;
  text-align: left;
  margin: 2%;
  padding-left: 2%;
}







/*page sae105*/
/*style du font title*/
#blockduhaut{
  background-color: #ececec;
  border: solid;
  border-width: 5px;
  border-style: double;
}

/*style de la premiere image de la page*/
.imgsae1{
  width: 80%;
}
/*style de la 2eme image de la page*/
.imgsae2{
  width: 60%;
  display: block;
  margin-left: 20%;
  margin-right: auto;
}
/*style du big titre*/
.bigtitlesae{
  color: black;
  font-family:serif;
}
/*style du titre de la page*/
.titlesae1{
  color: #4b5e65;
  font-family:Georgia, 'Times New Roman', Times, serif;
  margin-top: 3%;
}
/*style du 2eme titre sae105?*/
.titlesae{
  color: #4b5e65;
  text-align: center;
  font-family:Georgia, 'Times New Roman', Times, serif;
  margin-top: 5%;
}
/*style du texte de la page*/
.txtsae{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  border-style: dashed;
  border-width: 1px;
  padding: 2%;
}
/*style des btn de gauche */
.btnsae{
  color: black;
  background-color: #ececec;
  border: none;
}
/*mini picto toute au debut*/
.minipicto{
  width: 12px;
}
.minipicto2{
  width: 15px;
  margin-left: 1%;
}
.minipicto3{
  width: 30px;
  margin-left: 0.3%;
  margin-bottom: 1%;
}
.minipicto4{
  width: 30px;
}
.minipicto5{
  width: 40px;
}
/*style des images*/
.imgexsae{
  width: 60%;
  display: block;
  margin-left: 20%;
}
.imgexsae3{
  width: 90%;
}
#imgsae4{
  width: 50%;
  display: block;
  margin-left: 25%;
}

/*style menue de gauche titre*/
#menueg{
  text-align: center;
  color: black;
  font-family: serif;
}





* {
  margin:0;
  padding:0;
}
body {
  background-color:#0088ff;
  font-family: 'Raleway', sans-serif;
}
#ribbon {
  position:absolute;
  background-color:red;
  color:white;
  top:40px;
  left:-30px;
  width:160px;
  transform:rotate(-45deg);
  text-align:center;
}
#container {
  position:relative;
  width:80%;
  margin:5% auto;
  background-color:black;
  box-shadow: -2px -2px 5px white,2px -2px 5px white;
}
#container > nav {
  width:100%;
  display:flex;
  max-height:60px;
}
#logo {
  line-height:60px;
  font-size:30px;
  padding: 0 50px;
  color: white;
  width:40%;
  letter-spacing:2px;
  text-shadow:2px 2px 5px;
}
#container > nav > ul {
  margin:0;
  padding:0;
  list-style-type:none;
  display:flex;
  position:absolute;
    right:50px;
/*   min-width:60%; */
}
#container > nav > ul > li {
  line-height:60px;
  margin: 0 0px;
  padding:0;
  text-align:center;
  display:inline-block;
  
/*   background-color:green; */
  min-width:120px;

} 
#container > nav > ul > li > a {
  position:relative;
/*   background-color:red; */
  margin: 0 20px;
    color:white;
}









* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'Segoe UI', sans-serif;
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-header {
  display: flex;
  align-items: center;
}

.nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.logo {
  width: 50px;
  height: auto;
}

.nav-btn {
  display: none;
}

.nav-links {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  gap: 20px;
  margin-right: 10%;  /* alignement  */
}

.nav-links a {
  display: inline-block;
  padding: 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav-links a:hover {
  background-color: white;
  border-radius: 2px;
}

/* Menu mobile */
#nav-check {
  display: none;
}

@media (max-width: 1000px) {
  .nav-links {
    padding-top: 0.5%;
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .orbit {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    width: 0px;
  }
}

@media (max-width: 600px) {
  .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav-btn label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav-btn label:hover,
  #nav-check:checked ~ .nav-btn label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav-btn label span {
    display: block;
    width: 25px;
    height: 2px;
    background: #eee;
    margin: 6px 0;
  }
  .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0;
    flex-direction: column;
  }
  .nav-links a {
    display: block;
    width: 100%;
  }
  #nav-check:not(:checked) ~ .nav-links {
    height: 0;
  }
  #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

#mlk {
  height: auto;
  background-color: #2f435e;
  margin-bottom: 2%;
}

.comp {
  color: white;
  text-align: center;
}




#stgetxt{
  text-align: center;
}












/* page accsae  */

.titresae{
  text-align: center;
  padding-bottom: 10%;
}

#SAES{
  display: inline-flex;
  margin-bottom: 20%;
}



#texe2{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#thumbnail2{
  width: 230px;
}
#thumbnail3{
  width: 230px;
}






/* page sae101 */
.imgsae101{
  width: 50%;
  display: block;
  margin-left: 30%;
  margin-right: auto;
}
/* page cyber */
.imghydra{
  width: 90%;
  display: block;
  margin-left: 15%;
  margin-right: auto;
}

/* page sae102 */
.imagesae102{
  width: 90%;
  margin-left: 10%;
}
.pbmenue{
  margin-bottom: 5%;
  margin-top: 5%;
}




.fade-in-image {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.fade-in-image.loaded {
  opacity: 1;
}