.imagedefond{  
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

h1, header{    /*applique une typographie*/
    font-weight: bold;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:white;
    text-decoration: none;
    -webkit-text-stroke:black 0.35px;
}

body{   /*supprime les bords du header et applique une couleur de fond*/
    margin:0; padding:0;
    background-color: #303030;
}

header{    /*met une ombre et applique la couleur blanche au header*/
    background-color: #EFEFEF;
    box-shadow: 0px 0px 5px black;
    width:100%;
}

.menu{    /*flexbox pour le menu de navigation*/
    display:flex;
    flex-direction: row ;
    justify-content: space-between ;
    width:100%;
}
.menu img{     /*règle la taille de l'image*/
    width:20%;
}

.margesuperieur{    /*décale légèrement le logo de WIT Studio*/  
    margin:2%;
}

nav{     /*centre le texte et applique un espacement*/  
    text-align:center;
    margin:10px;
    padding:10px;
}

nav>a{     /*applique une typographie au bouton du menu avec comme particularité l'espacement entre les boutons et le contour autour du texte*/
    color:white;
    font-size:x-large;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke:black 0.35px;
    padding-right:1vw;
    padding-left:1vw;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

a:hover{     /*applique la couleur noir au bouton quand on passe le curseur par dessus*/
    color:black;
}

h1{       /*centre le texte et y applique un espacement*/
    padding-top:3%;
    padding-bottom: 2%;
    text-align:center;
}

.flex{       /*flexbox avec une marge à 5% de chaque côté*/
    background-color: #EFEFEF;
    box-shadow: 0px 0px 5px black;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    margin-right: 5%;
    margin-left: 5%;
}

.flexespacement{     /*partie gauche de la flexbox appliquant une marge à gauche de 1.5%*/   
    padding:1%;
    font-size:0.825vw ;
    max-width: 50%;
    margin-left: 1.5%;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.flexespacementdroite{      /*partie droite de la flexbox appliquant une marge à droite de 1.5%*/  
    padding:1%;
    font-size:0.825vw ;
    max-width: 50%;
    margin-right: 1.5%;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

h2{       /*centre le texte*/  
    text-align: center;
}

.gif{       /*centre, crée un espacement et réduit la taille d'un gif*/  
    padding:5%;
    width: 20%;
    align-items: center;
}

.ecartement{        /*class permettant de créer un espace*/  
    padding:2%;
}

footer{         /*flexbox spécifique au footer*/ 
    display: flex;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
    background-color: #EFEFEF;
}

label{       /*règle la marge dans le formulaire du footer*/ 
    margin-left: 0.825vw ;
    margin-right: 0.825vw ;
}

.flexfooter{        /*flexbox spécifique au footer*/ 
    background-color: #EFEFEF;
    display: flex;
    flex-direction:row ;
    justify-content: space-around;
}

.flexcolonne{          /*flexbox qui met les flex-items en colonnes*/ 
    flex-direction: column;
    height: 100%;
}

.flexproduction{        /*flexbox relative à la partie production du site*/ 
    background-color: #EFEFEF;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    padding-top: 1%;
    margin-right: 30%;
    margin-left: 30%;
    padding-bottom: 1%;
}

.ecartementgrand{        /*class permettant de créer un grand espace*/
    padding:6%;
}

h3{         /*met le texte en italique*/
    font-style: italic;
}

.navversion2{       /*class réglant le menu de la page production*/
    color:white;
    font-size:x-large;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke:black 0.35px;
    padding-right:1vw;
    padding-left:1vw;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #EFEFEF;
    margin-left: 23%;
    margin-right: 23% ;
}

h4{         /*applique une certaine typographique avec en plus un contour noir */
    color:white;
    font-size:x-large;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke:black 0.35px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
}

h5{         /*applique une certaine typographique en italique */
    font-style:italic;
    color:white;
    font-size:medium;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke:black 0.35px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center; 
}

.flexona{       /*flexbox avec une marge à 20% de chaque côté*/
    background-color: #EFEFEF;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    margin-right: 20%;
    margin-left: 20%;
}


h6{         /*applique une certaine typographique en très gros*/
    font-style:italic;
    color:white;
    font-size:x-large;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke:black 0.35px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center; 
}

.typo{          /*applique une certaine typographique en gros*/
    color:black;
    font-size:large;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-text-stroke:black 0.35px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center; 
}

.textesympa{        /*met le texte en italique et en gras*/
    font-style: italic;
    font-weight: bold;
}

.flexhistoire{        /*flexbox avec une marge à 12% de chaque côté*/
    background-color: #EFEFEF;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    margin-right: 12%;
    margin-left: 12%;
}


.flexespacementhistoire{        /*partie gauche de la flexbox appliquant une marge à gauche de 1%*/ 
    padding:1%;
    font-size:0.825vw ;
    max-width: 50%;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.flexespacementdroitehistoire{        /*partie droite de la flexbox appliquant une marge à droite de 1%*/ 
    padding:1%;
    font-size:0.825vw ;
    max-width: 50%;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.flexfinal{         /*flexbox*/
    background-color: #EFEFEF;
    display: flex;
    flex-direction:row ;
    justify-content: center;
}

.video{         /*met au centre un élément*/
    align-items: center;
    text-align: center;
}

.taille{        /*règle la taille de toute mes images*/
    max-width: 100%;
}

.petitecartement{
    padding: 1%;
} 

.flexconcours{
    background-color: #EFEFEF;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    text-align: center;
    margin-right: 17%;
    margin-left: 17%;
}

.espacement{
    margin-left: 0%;
    margin-right: 0%;
}

.encadrementtexte h4{
    background-color: #EFEFEF;
    color: #303030;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    text-align: center;
    padding: 1%;
}

.flexadmin{
    background-color: #303030;
    border-radius: 10px;
    display: flex;
    flex-direction:row ;
    justify-content: center;
    text-align: center;
    margin: 2%;
}

.darkmod {
    color: #303030;
    background-color: #EFEFEF;
    transition-duration: 0.5s;
}

.darkmod body{
    color: #303030;
    background-color: #EFEFEF;
    transition-duration: 0.5s;
}

.darkmod h4{
    color:#303030;
    -webkit-text-stroke:#EFEFEF 0.35px;
    transition-duration: 0.5s;
}

.darkmod h5{
    color:#303030;
    -webkit-text-stroke:#EFEFEF 0.35px;
    transition-duration: 0.5s;
}

.darkmod a{
    color:#303030;
    -webkit-text-stroke:#EFEFEF 0.35px;
    transition-duration: 0.5s;
}

.darkmod a:hover{
    color:#EFEFEF;
    -webkit-text-stroke:#303030 0.35px;
}

.darkmod header{
    box-shadow: 0px 0px 0px;
}

.darkmod #soleil{
    transition: transform 0.5s;
    transform: rotate(90deg);
}

.no-darkmod {
    transition-duration: 0.5s;
}

.no-darkmod #soleil{
    transition-duration: 0.5s;
    transform: rotate(-90deg);
}

#nouvellediv{
    border: none;
    background-color: #303030;
    color: #EFEFEF;
    font-size: medium;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.darkmod #nouvellediv{
    background-color: #EFEFEF;
    color: #303030;
}

.no-darkmod #nouvellediv{
    background-color: #303030;
    color: #EFEFEF;
}

#soleil{
    border: none;
    background-color: none;
    width: 3%;
    cursor: pointer;
}

#divsoleil{
    display: flex;
    justify-content: center;
    align-items: center;
}

#maDiv img{
    width: 17%;
    margin-left: 3%;
}

#maDiv{
    padding-top: 1.5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexfigure{        /*flexbox avec une marge à 12% de chaque côté*/
    display: flex;
    flex-direction:row ;
    justify-content: center;
    margin-right: 20%;
    margin-left: 20%;
}


.flexespacementfigure{        /*partie gauche de la flexbox appliquant une marge à gauche de 1%*/ 
    padding:2%;
    font-size:0.825vw ;
    max-width: 46%;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.flexespacementdroitefigure{        /*partie droite de la flexbox appliquant une marge à droite de 1%*/ 
    padding:2%;
    font-size:0.825vw ;
    max-width: 46%;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.figure{
    font-size: x-large;
}

#precedent{
    transform: rotate(180deg);
}

#pause,#suivant,#precedent{
    width: 2.5%;
}

#pause:hover{
    width: 3%;
    transition-duration: 0.2s;
    cursor: pointer;
}

#suivant:hover{
    width: 3%;
    transition-duration: 0.2s;
    cursor: pointer;
}

#precedent:hover{
    width: 3%;
    transition-duration: 0.2s;
    cursor: pointer;
}

span{
    text-decoration: underline #EFEFEF;
}

.darkmod span{
    text-decoration: underline #303030;
}

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