/*
script pour les écrans d'ordinateurs
*/


/*typographie*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400&display=swap');

@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap');

@font-face {
  font-family: "Disclaimer";
  font-style: bold;
  src: url("fonts/Disclaimer-Classic.woff2") format("woff.2"),
    url("fonts/Disclaimer-Classic.woff") format("woff");
}


/*

______                _                          
| ___ \              | |                         
| |_/ / __ ___ ______| |__   ___  _ __ ___   ___ 
|  __/ '__/ _ \______| '_ \ / _ \| '_ ` _ \ / _ \
| |  | | |  __/      | | | | (_) | | | | | |  __/  typo Doom ASCII
\_|  |_|  \___|      |_| |_|\___/|_| |_| |_|\___|



*/     

.body_gris {
  background-color: #f2f3f5;
}


.body_noir {
  background-color: #1d1d1d;
  background-size: cover;
  height: 100vh;
  background-attachment: fixed;
}


body {
  overflow-x : hidden;
}


#logoanim {
  text-align: center;
}

#logoanim img {
  width: 70vw;
}                                        



#conteneur_logo {
  width: 100vw;
  background-color: #1b1b1b;
  height: 100vh;
  padding: 0;
  border: 0;
}



#logo1 {
  margin: auto;
  width: 400px;
}



#logo1 img {
  width: 400px;
  transition: 3s ease ease-in-out;
  opacity: 1;
  margin-top: 25vh;
}



.fleche {
  width: 80px;
}



#plus {
  position: absolute;
  bottom: 2vh;
  left:47vw;
}


#logotraver {
  width: 100vw;
  height: 142vw;
}


#logotraver img {
  width: 100vw;
}



/*

 _   _             
| \ | |            
|  \| | __ ___   __
| . ` |/ _` \ \ / /
| |\  | (_| |\ V / 
\_| \_/\__,_| \_/  

                   

*/ 

section {
  height: 100vh;
}

#accueil_page {
  width: 100vw;
  height: 100vh;
}   

#nav2 {
  display: none;
}


#nav0 {
  width: 90vw;
  height: 150px;
  margin: 40px auto 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#nav1 {
  width: 90vw;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}



#logo {
  display: flex;
  align-items: center;
}



#logo h1{
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1em;
  margin-left: 30px;
}



#logo p{
  margin-top: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 70, italic;
  font-size: 0.8em;
  margin-left: 30px;
}



#logo img {
  width: 150px;
  opacity: 1;
  transition: 0.3s ease all;
}

#logo :hover img{ /*transition hover pour le logo*/
  opacity: 0.5;
}


/*fil d'ariane du site*/

#fil_ariane {

  width: 70vw;
  margin-right: 20px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;

}



#fil_ariane a {

  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  padding: 5px;

}



#fil_ariane2 {

  width: 70vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;

}



#fil_ariane2 a {

  text-decoration: none;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  padding: 5px;

}


/*partie contacts*/

#contacts {

  width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

#contacts img {

  height: 25px;

}



/*

 _                          
| |                         
| |__   ___  _ __ ___   ___ 
| '_ \ / _ \| '_ ` _ \ / _ \
| | | | (_) | | | | | |  __/
|_| |_|\___/|_| |_| |_|\___|

    */                        


                       

#index {

  width: 90vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  height:calc(100vh - 200px);

}


.dismoi img {

  height: 500px;
  margin-top: 51px;

}


.banane img {

  height: 570px;
  margin-top: -20px;

}




/*

                 _      _       
                (_)    | |      
 _ __  _ __ ___  _  ___| |_ ___ 
| '_ \| '__/ _ \| |/ _ \ __/ __|
| |_) | | | (_) | |  __/ |_\__ \
| .__/|_|  \___/| |\___|\__|___/
| |            _/ |             
|_|           |__/              

*/



#indexprojets {

   margin: auto;
   margin-top: 11vh;
   line-height: 20px;
   width: 500px;

}



#indexprojets a {

   text-decoration: none;
   font-family: 'Roboto', sans-serif;
   font-weight: 900;
   font-size: 2.2em;
   line-height: 130%;
   color: #818181;
   text-align: center;
   transition: all ease 0.3s;

}


#indexprojets a:hover{

  color: white;

}




/*

  ___                                    
 / _ \                                   
/ /_\ \  _ __  _ __ ___  _ __   ___  ___ 
|  _  | | '_ \| '__/ _ \| '_ \ / _ \/ __|
| | | | | |_) | | | (_) | |_) | (_) \__ \
\_| |_/ | .__/|_|  \___/| .__/ \___/|___/
        | |             | |              
        |_|             |_|              

*/



#apropos_texte {

  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  line-height: 120%;
  margin-top: 150px;

}

/*texte à propos*/

#apropos_texte h1 {

  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 3em;

}



#apropos_texte p {
  margin-top: 40px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1em;

}


#apropos_texte h2 {

  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.1em;

}

#apropos_texte a {
  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}


#apropos1 {

  width: 500px;

}



#apropos2 {

  margin-top: 110px;
  width: 300px;

}


#apropos3 {
  width: 300px;
}




/*
______          _            
|  ___|        | |           
| |_ ___   ___ | |_ ___ _ __ 
|  _/ _ \ / _ \| __/ _ \ '__|
| || (_) | (_) | ||  __/ |   
\_| \___/ \___/ \__\___|_| 

*/

#footer {
  position: absolute;
  left: 5vw;
  bottom: 30px;
}


.footap {
  display: none;
}


#footer2 {
  left: 5vw;
  bottom: 30px;
}



#footer h3 {

  font-size: 0.6em;
  font-family: 'Roboto', sans-serif;
   font-weight: 400;
}

#footer2 {

  height: 40px;

}


#footer2 h3 {

  font-size: 0.6em;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.f2 { /*footer projets*/
  color: white;
  position: absolute;

}

.f1 {
    margin-left: 5vw;
}

footer {

  overflow: hidden;
  margin-left: -10px;
  padding: 115px;
  width: 90vw;
  line-height: 50px;
  text-align: center;
}

#footer_dm {
  background-image: url("../images/index_trace.jpg");
}

#footer_tr {
  background-image: url("../images/index_edward.jpg");
}

#footer_ed {
    background-image: url("../images/index_portraits.jpg");
}

#footer_cro {
  width: 100vw;
  height: 400px;
  background-image: url("../images/index_jpo.jpg");
}

#footer_jpo {
  background-image: url("../images/index_phportraits.jpg");
}

#footer_por {
    width: 100vw;
    height: 400px;
    background-image: url("../images/index_stopmotion.jpg");
}

#footer_stop {
    background-image: url("../images/index_packshot.jpg");
}

#footer_pac {
    width: 100vw;
    height: 400px;
    background-image: url("../images/index_dmdm.jpg");
}



footer a {
  margin-top: -100px;
  text-decoration: none;
  color: #818181;
  font-size: 8em;
  font-family: "Disclaimer";
}

footer p {
  text-decoration: none;
  color: #b3b3b3;
  font-size: 1.5em;
  font-family: 'Roboto', sans-serif;
   font-weight: 600;
}

footer a:hover{
  color: white;
   }



/*

______                
| ___ \               
| |_/ /_ _  __ _  ___ 
|  __/ _` |/ _` |/ _ \
| | | (_| | (_| |  __/
\_|  \__,_|\__, |\___|
            __/ |     
           |___/      

*/


#page {
  width: 90vw;
  margin : auto;
  display: flex;
  margin-top: 60px;
  justify-content: space-between;
  align-items: flex-end;
}

#photo_titre img {

  width: 59vw;
}



#description {

   width: 200px;
}

#description h1 {

  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 1.2em;
}



#description p {
  margin-top: 10px;
  line-height: 120%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.8em;
}



#description h2 {
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 0.8em;

}



#description a {

  text-decoration: none;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size:1em;

}



#images {

  margin: auto;
  margin-top: 200px;
  margin-bottom: 100px;
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-around;

}

#image_affiche img {

  height: 700px;

}



#video_affiche iframe {
  height: 700px;
  width: 400px;
}


#images_trace {

  margin: auto;
  margin-top: 200px;
  margin-bottom: 100px;
  width: 70vw;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;

}



#images p {

  margin-top: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 0.8em;

}



#images1 {

  margin: auto;
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-between;

}



#images1 img{

  margin-top: 100px;
  margin-bottom: 100px;
  width: 30vw;

}



#images2 img {

  width: 30vw;

}



#images_ed1 img {

  margin-top: 5px;
  width: 70vw;

}



#images_ed2 {

  text-align: center;

}



#images_ed2 img {

  width: 50vw;
  margin-top: 100px;

}



#video_jpo iframe {
  width: 1400px;
  height: 800px;

}



#conteneur {

  margin : auto;
  margin-top: 295px;

}


/*carousel*/


#imagescarousel {

  margin: auto;
  margin-top: 150px;
  margin-bottom: 100px;
  width: 90vw;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: space-around;

}



#carouselExampleControls {

width: 400px;

}



#carouselExampleControls2 {

width: 400px;

}



#carouselExampleControls3 {

width: 400px;

}



#carouselExampleControls4 {

width: 70vw;

}



#carouselExampleControls5 {

width: 70vw;

}



#carouselExampleControls6 {

width: 70vw;

}



.carousel-control-prev-icon{



  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")}



.carousel-control-next-icon{

  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")}