@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@700&display=swap');
body{
    background-color: #d3e8e9;
    margin: 0;
    padding:  0;
    width: 100%;
    font-family: 'roboto',sans-serif;
    font-size: 16px;

  }

header {
    width: 100%;
    position: fixed;/*Permet de maintenir la barre de navigation*/
    overflow: hidden;/*permet de d'évincer les flottant sur son passage*/
    top: 0;
    }
.navigateur {
  background-color: #333;
  overflow: hidden;
}
h1{    font-family: 'ubuntu',sans-serif;
    font-size: 30px;
}
h2{
    font-family: 'ubuntu', sans-serif;
    font-size: 20px;
}
h3{
    font-family: 'ubuntu', sans-serif;
    font-size: 18px;
}
ul {
    list-style-type: none;
}
.navigateur a {
  float: left;
  display: block;
  width: 100px;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

/* change la couleur pour hover*/
.navigateur a:hover {
  background-color: #ddd;
  color: black;
}


.navigateur a.active {
  background-color: #91b9ef;
  color: white;
}

.navigateur .icon {
  display: none;
} 


@media screen and (max-width: 1080px) {
  .navigateur a:not(:first-child) {display: none;}
  .navigateur a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1080px) {
  .navigateur.responsive {position: relative;}
  .navigateur.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navigateur.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
                                                    /*body general*/



.pagew{/*page blanche*/
      width: 100%;
      height: 100%;
      background-color: white;
      padding:  2% 0 2% 0;
    }
#blockvidenav {
  width: 100% ;
  height: 15%;
}
#espacetitre{
    height: 165px;
    width: 100%;
}
@media screen and (max-width: 1080px) {
  #espacetitre {
        height: 65px;
        }
                    }
                                /*fin du body general*/
                                                                                /*home*/

#blockhome{
      display: flex;
      width: 100%;
      height: 100%;
      }
      .presentoire{
        grid-area: 1 / 1 / 6 / 3; 
        object-fit: contain;
        max-height: 90%;
        margin-block-start: auto;
            }
      .presentoire img{
            max-width: 100%;
            }
      .menucolumn{
        flex: 35%;
        max-width: 35%;
        padding: 10px;
        text-align: center;
     object-fit: contain;

      }
            .menucolumn a{
                text-decoration: none;
                color: #91b9ef;
      }
      .boxlink:hover{
        background-color: #ddd;

      }
      .menucolumn img{
        height: 10em;
      }
@media screen and (max-width: 1080px) {
  .presentoire{
display: none;        }
                    }
@media screen and (max-width: 1080px) {
  .menucolumn{
flex: 50%;
max-width: 50%;        }
                    }
                                            /*home*/

                                            /*CV*/
                                            /*box vide de la section CV*/
#boxvideA{/*espace vide*/

      height: 5em;
    }

#boxvideB{/*espace vide*/

      height: 10em;
    }

#emptybox{/*espace vide*/
      width: 6em;
    }

#boxvideC{
      margin:  3em 0 3em 0;
      width: 100%;
      height: 1em;
      background-color: #91b9ef;
      padding: 1%;
      }
                                            /*fin de la box vide de la section CV*/
                                            /*1er page "about me"cv + quality*/


#sectionabout { /*Box identification + espace*/
  
          display: flex;
            flex-direction: column;
        }
.titre {/*titre générique de la page*/
    text-align: center;
    background-color:#1F253E;
    color: white;
    font-size: 2em;
    padding: 1.5em;
    grid-area: 1 / 1 / 2 / 4;
    }


#boxabout{/*boite avec la section information about me*/
      display: flex;
      margin: auto;
      width: 50%;
    }

    #boxabout img{
            height: 30em;
            object-fit: contain;
          }

#questionbox{/*colonne blue question*/
        display: flex;
        flex-direction: column;
        background-color: #91b9ef;
        width: 8em;
        padding: 1%;
        text-align: center;
      }

    
#answerbox{/*colonne reponse AM = Answer margin*/ 
      display: flex;
      flex-direction: column;
      margin-left: 1em;
      }

.AM1{margin-top: 1.6em;}
.AM2{margin-top: 1.6em;}
.AM3{margin-top: 1.8em;}
.AM4{margin-top: 1.5em;}
    
      
#boxlook{/*boite looking to be graphic designer LookM = Lookmargin*/
      display: flex;
    }

.LookM {/*aide au placement margin*/
      margin-left: 0.5em;
      margin-top: 0.8em;
    }

#boxhighlight{/*box de soulignement*/
        display: flex;
      }

#highlight{/*barre blue de soulignement*/
        width: 18em;
        height: 1em;
        background-color: #91b9ef;
    }

@media screen and (max-width: 800px) {
  #boxabout {
          width: 100%;
flex-wrap: wrap;   
       }
                    }


@media screen and (max-width: 800px) {
  #boxabout img{

          width: 100%;
          }
                    }
@media screen and (max-width: 800px) {
  #questionbox{
          max-width: 30%;
          }
                    }
@media screen and (max-width: 800px) {
  #answerbox{
        max-width: 30%;
        }
                    }
@media screen and (max-width: 800px) {
  #boxvideB{
        display: none;
        }
                    }
                                          /*fin about me*/
                                          /*quality box*/
  #boxquality {/*boite ligne bleu qualité*/
          display: flex;
          width: 100%;
          height: 3em;
          padding: 1%;
          background-color: #91b9ef;
          justify-content: space-evenly;

        }

                                          /*fin quality box*/
                                          /*ligne du temps 2022*/

.timeline{/*ligne du temps*/
      display: flex;
      flex-direction: column;
      margin: 10em 5% 20em 5%;
    }
  
.dateline{/*ligne des box des dates*/
      display: flex;
      justify-content: space-between;
    }
    
.datebox{/*boite des dates*/
      display: flex;
      width: 21%;
      height: 5em;
      text-align: center;
      border: solid 2px #91b9ef ;
    }
.dateboxFull{/*boite des dates*/
      display: flex;
      width: 100%;
      height: 5em;
      text-align: center;
      border: solid 2px #91b9ef ;
    }

.date{
    display: flex;
    flex-direction: column;
    width: 15%;
    background-color: #91b9ef;
    margin: auto;
    height: 100%;
    justify-content: space-around;
  }
.Boxcolumndescription{
   display: flex;
   width: 100%;
}
.colondescription{
    display: flex;
    flex-direction: column;
    width: 50%;
}


.periode{
      display: flex;
      flex-direction: column;
      width: 85%;
      margin: auto;
      background-color: #fffff7;
      height: 100%;
      justify-content: space-around;
    }

.yearline{/*ligne des années en bleu*/  
      display: flex;
      height: 5%;
      width: 100%;
      background-color: #91b9ef;
      margin: 2em 0 2em 0;
    }
  .yearline p {
    margin: auto;
        }

.eventline{/*box contenant les evenements de la ligne du temps*/
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

      }
    
.labeltimeline{/*box contenant l'event + description*/
          display: flex;
          width: 23%;
          height: 35%;
          border: solid 1px #91b9ef ;
        }
.labeltimelineFull{/*box contenant l'event + description*/
          display: flex;
          width: 100%;
          height: 35%;
          border: solid 1px #91b9ef ;
        }
      
.columnevent{/*colonne des intitulés de l'event*/ 
        display: flex;
        flex-direction: column;
        width: 35%;
        background-color: #91b9ef;
        height: 25em;
        text-align: center;
        justify-content: space-around;
      }
      
.columndescription{/* colonne contenant la description */
            display: flex;
            flex-direction: column;
            width: 65%;
            height: 25em;
            text-align: center;
            justify-content: space-around;
            background-color: #fffff7;
          }
        
.boxvideD{/*ligne bleu full*/
      width: 100%;
      height: 1em;
      background-color: #91b9ef;
    }
        
.boxvideE{/* ligne bleu partiel */
        width: 75%;
        height: 1em;
        background-color: #91b9ef;
        margin:  0 2em 0 2em;
      }

.extraperiode{/*apparait a responsive*/
        display: none;
        flex-direction: column;
        width: 25%;
        height: 25em;
        text-align: center;
        justify-content: space-around;
        background-color: #fffff7;
        }

@media screen and (max-width: 800px) {
  .yearline{
        display: none;
        }
                    }
@media screen and (max-width: 800px) {
  .dateline{
        display: none;
        }
                    }
@media screen and (max-width: 800px) {
  .labeltimeline{
        width: 100%;
        margin-bottom: 1em;
        }
                    }

@media screen and (max-width: 800px) {
  .extraperiode{
          display: flex;
          margin: 0;
          height: 28em;
        }
                    }
@media screen and (max-width: 800px) {
  .columndescription{
          width: 45%;
          height: 28em;
        }
                    }
@media screen and (max-width: 800px) {
  .columnevent{
          height: 28em;
        }
                    }
                                      /* fin ligne du temps 2022*/
                                /*boite school disposition batonnet horizontal*/
#graphstickbox {/*boite school disposition batonnet horizontal*/
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

#graphstickA{/*ligne 1*/
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 15em;

}

#boxHEAJ{/*boite HEAJ*/
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 100%;
    justify-content: space-around;
              text-align: center;
      border: solid  1px #91b9ef;
            background-color: #91b9ef;



}
.capital{
      display: flex;
      justify-content: space-around;
      }

#graphstickC{/*ligne 2*/
        display: flex;
        width: 60%; 
      }

#boxTFEdesc{/*boite tfe description*/
        display: flex;
        flex-direction: column;
        width: 33%;
        justify-content: space-around;
        text-align: center;
      }
#boxTFEinfo{/*boite TFE information*/
        display: flex;
        flex-direction: column;
        width: 33%;
        justify-content: space-around;
                    text-align: center;
      }

#PhotoTFE{/*photo lien TFE*/
      display: flex;
      width: 33%;
      }

#PhotoTFE img{
        width: 100%;
        height: 100%;
      }

#graphstickD{/*ligne 3*/  
        display: flex;
        height: 16em;
        width: 80%;
        justify-content: space-around;
        border: solid  1px #91b9ef;
        background-color: #91b9ef;
      }

#boxskillA{/*skill school boite 1 ligne 4 */
      display: flex;
      flex-direction: column;
      width: 20%;
      height: 25%;
    }

#boxskillB{ /*skill school boite 2 ligne 4 */
      display: flex;
      flex-direction: column;
      width: 20%;
      height: 25%;
      }

#boxskillC{/*skill school boite 3 ligne 4 */
      display: flex;
      flex-direction: column;
      width: 20%;
      height: 25%;
      }

#boxskillD{/*skill school boite 4 ligne 4 */
      display: flex;
      flex-direction: column;
      width: 20%;
      height: 25%;
      }
#boxCNDB{/*boite CNDB*/
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      justify-content: space-around;
      text-align: center;
    }
                                        /*school responsive*/
@media screen and (max-width: 800px) {
  #graphstickA{
          width: 100%;
        }
                    }
@media screen and (max-width: 800px) {
  #boxHEAJ{
          width: 100%;
        }
                    }

@media screen and (max-width: 800px) {
  #graphstickC{
          width: 100%;
        }
                    }
@media screen and (max-width: 800px) {
  #graphstickD{
          flex-wrap: wrap;
          width: 100%;
          height: 100%;
          margin: 0.3em;

        }
                    }
@media screen and (max-width: 800px) {
  #boxskillA{
          width: 50%;

        }
                    }
@media screen and (max-width: 600px) {
  #boxTFEdesc{
display: none;
        }
                    }
@media screen and (max-width: 600px) {
  #PhotoTFE{
width: 50%;        }
                    }
@media screen and (max-width: 600px) {
  #boxTFEinfo{
width: 50%;        }
                    }
@media screen and (max-width: 800px) {
  #boxskillB{
          width: 50%;

        }
                    }
@media screen and (max-width: 800px) {
  #boxskillC{
          width: 50%;

        }
                    }
@media screen and (max-width: 800px) {
  #boxskillD{
          width: 50%;

        }
                    }


                                /*fin boite school disposition batonnet horizontal*/                                          
                                          
                                        /* feuille de skill */

#tableauskill{/* tableau de skill */
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        width: 80%;
        height: 20%;
      }

.columnskill{/*colonne du tableau skill*/
        display: flex;
        flex-direction: column;
        width: 12.5%;
        height: 20em;
      }

  .skill{/*skill haut du tableau*/
        display: flex;
        border: solid  1px #91b9ef;
        justify-content: space-around;
        text-align: center;
        flex-direction: column;
        height: 30%;
      }
          .skill img {/*skill haut du tableau bleu*/
            height: 70%;
            margin: auto;     
            }

  .skillblue{/*skill haut du tableau bleu*/
          background-color: #91b9ef;
          display: flex;
          border: solid  1px #91b9ef;
          flex-direction: column;
          justify-content: space-around;
          text-align: center;
          height: 30%;
        }
    .skillblue img {/*skill haut du tableau bleu*/
            height: 70%;
            margin: auto;     
            }
  .skilldescription{/*skill bas du tableau*/

            display: flex;
            border: solid  1px #91b9ef;
            justify-content: space-around;
            flex-direction: column;
            text-align: center;
            height: 100%;
          }

.sectiontitre{/*titre de la section*/
        display: flex;
        height: 3em;
        }

.label{/*label des deux derniere section*/
      height: 15em;
      width: 25%;
      display: flex;
      flex-direction: column;
      text-align: center;
      border: solid  1px #91b9ef;
      margin: auto;
      justify-content: space-around;
    }

@media screen and (max-width: 800px) {
  .columnskill{
          width: 100%;
        }
                    }
@media screen and (max-width: 800px) {
  .label{
          width: 100%;
        }
                    }
                                        /*fin CV*/
                                        /* debut illu*/
                                        /* vitrine*/

#row {/*tableau image phototech*/
            height: 3240;
      display: flex;
      flex-wrap: wrap;
      margin:  5em;
    }

    #row img{
          width: 100%;
          height: fit-content;
        }

.boxvitrine{/*colonne photo tec*/
        height: fit-content;
        width: 16%;
        flex: 16%;
        padding: 4px;
      }
                                        /* fin vitrine/
                                        /* vitrine responsive*/
@media screen and (max-width : 1600px){
  .boxvitrine {
          flex: 20%;
          width: 20%;
        }
                    }

@media screen and (max-width : 1200px){
  .boxvitrine {
          flex: 25%;
          width: 25%;
        }
                    }

@media screen and (max-width : 800px){
  .boxvitrine {
          flex: 32%;
          width: 32%;
        }
                    }
@media screen and (max-width : 600px){
  .boxvitrine {
          flex: 100%;
          width: 100%;
          margin: 0 0 0 1em;
          }
                    }

                    

                                            /*fin illu*/
                                            /*photographie*/
                                            /*album*/
#albumconteneur{/*box Album photo*/
          display: flex;
          flex-wrap: wrap;
        }

    #albumconteneur img{
            
            width: 100%;
          }

.photo{/*<!-- photo de gauche-->*/
      flex: 31.75%;
      max-width: 31.75%;  
    }

.photopano{/*conteneur colone panorama*/
      flex: 68.25%;
      max-width: 68.25%;
    }


                                        /*fin album*/
                                        /*album responsive*/
@media screen and (max-width: 800px) {
  #albumconteneur{
          margin-bottom: 0;
        }
                    }

@media screen and (max-width: 800px) {
  .photo{
          flex: 100%;
          max-width: 100%;
        }
                    }
@media screen and (max-width: 800px) {
  .photopano{
          flex: 100%;
          max-width: 100%;
        }
                    }
                    



                                        /*fin photographie*/

                                        /*debut anime*/
                                        /*bibliothèque de navigation vidéo*/
#biblio{/*box bibliotèque de navigation*/
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 15em;
    }

    #biblio img{
            max-width: 45%;
            min-width: 15%;
          }

.blockbiblio{/*bibliotèque de navigation*/
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        flex: 33%;
        max-width: 33%;
        text-align: center;
        margin-bottom: 2rem ;

      }
.blockbiblio a {/*bibliotèque de navigation*/
       text-decoration: none;
      }
.blockbiblio h3 {/*bibliotèque de navigation*/
       text-decoration: none;
           background-color:#91b9ef ;
            color: white;
            font-size: 2em;
            padding: 1em;
      }

                                        /*fin de bibliothèque de navigation*/
                                        /*mini menu de navigation*/

article video {
          max-width: 60%;
          text-align: center;
        }

.menu {/*générique menu de naviagtion vidéo*/
    display: none;
      margin: 2em;
      text-align: center;
    }

    .menu img{
          width: 3%;
          margin: 1em;
          }
                                        /*fin de mini menu de navigation*/
                                        /*showreel*/

#showreel{/*Box showreel*/
      text-align: center;
      font-size: large;
      margin-top: 8rem;
      }

      #showreel h1{
            color: white;
    font-size: 2em;
              background-color:#91b9ef ;
              margin: 2em 0;
              padding: 1em;
            }
                                        /*fin showreel*/
                                        /*TFE*/

#amour{/*box film de find'étude*/
      text-align: center;
      font-size: large;
    }

    #amour h1{
        color: white;
         font-size: 2em;
          background-color:#91b9ef;
              margin: 1em 0;
              padding: 1em;

          }
                                        /*fin TFE*/
                                        /*TFA*/

#metronome{/*box Travail de fin d'année*/
        text-align: center;
        font-size: large;
      }

      #metronome h1{
                    color: white;
    font-size: 2em;
              background-color:#91b9ef ;
              margin: 1em 0;
              padding: 1em;
              }
                                        /*Fin TFA*/
                                        /*animation 2D responsive*/

@media screen and (max-width: 600px) {
  .blockbiblio{
          max-width: 100%;
          margin: 1em;
        }
                    }
@media screen and (max-width: 600px) {
  iframe{
          width: 100%;
       
        }
                    }
@media screen and (max-width: 600px) {
  #biblio{
        flex-direction: column; 
        height: 100%;
      }
                    }
@media screen and (max-width: 600px) {
  .menu{
        display: block;
        flex-direction: column; 
        height: 100%;
      }
                    }
                                          /*fin anime*/
                                          /* debut footer*/
#pageconteneur{
  position: relative;
    min-height: 100vh;
}
                                          /*logo*/
#boxlogo{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
}
                                            /*logo*/

                                            /*template*/
.front{
    background-color: white;
    font-size: 1.4em;
    padding: 1em;
}
#boxtemplate{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}
#boxloupe{
    margin: auto;
    width: 90%;
    display: flex;
    flex-direction: column;
}
#boxloupe img{
    margin: 3em;
}
#boxtemplate img{
    width: 100%;
    margin: 0;
}
.box-test{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1%;
}
.box-test img {
    width: 25%;
}
                                            /*template*/
                                            /*map*/
#boxmap{
  display: flex;
  width: 100%;
  flex-wrap: wrap;

}
.mapligne{
flex: 20%;
max-width: 20%;


}
.boxmontage{
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: center;
  margin-top: 5rem;
}
.mapligne img{
    width: 100%;
margin-top: 2em;    
}
.mapligne:hover{
  opacity: 50%;
}
@media screen and (max-width: 800px){
    .mapligne{
        flex: 100%;
        max-width: 100%;
    }
}

                  /*fin map*/
#boxlogo img{
  max-width: 45%;
  margin: auto;
  padding: 1% 0 1% 0;
}

@media screen and (max-width: 600px) {
  #boxlogo img{
width: 100%;      }
                    }
footer
{
  color: white;
  background-color:#1F253E;
  text-align: center;
  height: 35%;
  padding: 1%;
  width: 100%;
margin-block-start: auto;
  grid-area: 5 / 1 / 6 / 4; 
  z-index: -2;

}

footer a {
    text-decoration: none;
    color: white;
}

 @media screen and (max-width : 800px){
          footer  { 
                  margin: 0;
                  margin-right: 1em;
                  width: 100%;
                 }
                            }


                                            /*fin footer*/





                                            .hexa__column{
                                              display: flex;
                                              flex-direction: column;              gap: 2rem;                                
                                            }
                                            .poly{
                                              width: 15rem;
                                              grid-area: 1 / 1 / 2 / 2;
                                              z-index: -1;
                                            }
                                            .droite{
                                              display: flex;
                                              flex-direction: column;
                                              margin-block: auto;
                                              margin-inline-end: 0;
                                              gap: 2rem;  
                                            }
                                            .gauche{
                                              display: flex;
                                              flex-direction: column;
                                              margin-block: auto;
                                              margin-inline-start: 0;
                                              gap: 2rem;  
                                            }
                                            .centre{
                                              display: flex;
                                              grid-area:  1 / 3 / 6 / 4;
                                              width: 100%;
                                              margin-inline: auto;
                                              margin-block-start: 10%;
                                            }
.poly__box{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 15rem;
height: 15rem;
}
.poly__box :hover{
opacity: 75%;
}
.poly__text{
  grid-area: 1 / 1 / 2 / 2;
  z-index: 1;
  margin: auto;
  font-family: 'ubuntu', sans-serif;
  font-size: 18px;
  padding-block-end:1rem ;
}

.block__head{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100vh;
}


#black{
  color: #91b9ef;
}
@media screen and (max-width : 800px){
  .poly{
    width: 10rem;
  }
  .poly__box{
    width: 10rem;
  }
  .centre{
    display: flex;
    grid-area:  1 / 1 / 6 / 4;
    margin-inline: auto;
    width: auto;
    margin-block: 30%;
  }
  .hexa__column{            
    gap: .5rem;                                
  }
  .droite{
    gap: .5rem; 
   }
  .gauche{
    gap: .5rem;
    }
    #black{
      color: black;
    }
.titre{
  height: 30%;
}
footer{
  margin-block-start: auto;
}
                    }

@media screen and (max-width : 500px){
  .poly{
    width: 7rem;
  }
  .poly__box{
    width: 7rem;
    height: 50%;
  }
  .poly__box a {
    height: 50%;
  }
  .poly__text{
    display: none;
    height: 0;
  }
  .centre{
    display: flex;
    grid-area:  1 / 1 / 6 / 4;
    margin-inline: auto;
    width: auto;
    margin-block: auto;
    padding-block: 3rem;
  }
  .hexa__column{            
    gap: .5rem;  
    margin-block: auto;                              
  }
  .droite{
    gap: .5rem; 
   }
  .gauche{
    gap: .5rem;
    }
    #black{
      color: black;
    }
.titre{
  height: 30%;
  margin-inline: auto;
  width: 60%;
}
footer{
  margin-block-start: auto;
  height: 50%;
}

                    }