*{
    /* on met les marge interne et externe à = */
    margin: 0px;
    padding: 0px;
}
#tablette{
    /* on désactive le contenu de la page game play téléphone pour le PC */
    display: none;
}
#PageHistoire{
    /* Couleur du textes et du fond avecla taille de la police pour la page Histoire */
    background-color: #FFB9C8;
    font-size: 20px;   
    color: #523852;
}
.titre{
    /* on metla taille de la police pour tout les titres du site avec une marge à gauche */
    font-size: 55px;
    margin-left: 20px;
}
#menu{
    /* on centre le menu déroulant pour téléphone */
    text-align: center;
}
.Photomenu{
    /* marges pour les photo du menu dérpoulant */
    margin-left: 5px;
}
#Logo{
    /* On centre le logo du menu */
    margin: 0 auto;
}
/* CSS pour le menu déroulant pris sur internet. */
#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    list-style: none;
    width: 60px;
    height: 40px;
}
#menu-deroulant li {
    /* on place les liens du menu horizontalement */
    display: inline-block;
    height: 40px;
    margin-bottom: 5px;
}
#menu-deroulant ul li {
    /* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
    color:#000;
}
#menu-deroulant ul {
    position: absolute;
    /* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
}
#menu-deroulant li:hover ul {
    /* Au survol des li du menu on replace les sous menus */
    left: auto;
}
#MenuDeroulant{
    /* on ajour un inline blocke pour que les 3 image reste ensemble */
    display: inline-block;
    text-align: center;
    /* Fin du CSS pour le menu déroulant */
}
#PremierePhoto {
    /* Rajout d'un pixel pour centré la photo pour la page galerie du menu déroulant.*/
    margin-left: 1px;
}
.contenu{
    /* Text de la page histoire avec une margetoute au toure et la bonne police*/
    margin-top: 20px;
    margin-left: 120px;
    margin-right: 150px;
    padding-bottom: 50px;
    font-family: Indie Flower, sans-serif;
}
.contenuimg1{
    /* Images de la page histoire qu'on met à droite avecune largeur et une marge à gauche */
    width: 350px;
    margin-left: 15px;
    float: right;
}
.contenuimg2{
     /* Images de la page histoire qu'on met à gauche avec une largeur et une marge à droite */
    width: 350px;
    margin-right: 15px;
    float: left;
}
h1{
    /* pour toutes les balises "h1" du site, on met la bonne police, on met une marge externe à gauch, et des marge interne en haut et en bas, et on aligne le texte à gauche. */
    font-family: amatic sc, sans-serif;
    margin-left: 15px;
    padding-top: 30px;
    text-align: left;
    padding-bottom: 20px;
}
/* déclaration des polices utilisé */
@font-face{
    font-family: amatic sc;
    src: url('AmaticSC-Regular.ttf');
}
@font-face{
    font-family: Indie Flower;
    src: url('IindieFlower.ttf')
}
#PageGalerie{
    /* Couleur du textes et du fond avec la taille de la police pour la page Galerie */
    background: #FFCCAC;
    color: #523852; 
    font-size: 30px; 
}
#Galerie{
    /* On centre tout la galerie, et on rajoute une marge intérieur. */
    padding-top: 40px;
    text-align: center;
}
.PhotoGalerie12deg{
    /*On fait la rotation des photo de 12°on ajoute des margeset on met une hauteur et une largeur*/
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;  
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    transform: rotate(12deg);
    width: 300px;
    height: 175px;
}
.PhotoGalerie-16deg{
    /*On fait la rotation des photo  de -16° on ajoute des margeset on met une hauteur et une largeur*/
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 50px;
    -webkit-transform: rotate(-16deg);
    -moz-transform: rotate(-16deg);
    -o-transform: rotate(-16deg);
    transform: rotate(-16deg);
    width: 300px;
    height: 175px;
}
.PhotoGalerie8{
    /*On fait la rotation des photo de 8° on ajoute des margeset on met une hauteur et une largeur*/
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 50px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
    width: 300px;
    height: 175px;
}
.PhotoGalerie-9{
    /*On fait la rotation des photo de -9°, on ajoute des margeset on met une hauteur et une largeur */
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 50px;
    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    transform: rotate(-9deg);
    width: 300px;
    height: 175px;
}
.PhotoGalerie18{
    /*On fait la rotation des photo de 18° on ajoute des margeset on met une hauteur et une largeur*/
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 50px;
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
    width: 300px;
    height: 175px;
}
#PagePersonnage{
    /* Couleur du textes et du fond avec la taille de la police pour la page personnages */
    background: #FFCCAC;
    color: #523852; 
    font-size: 30px; 
}
#personnage{
    /* on met la taille de police et la bonne police au contenu de la page des perssonages */
    font-size: 26px;
    font-family: Indie Flower, sans-serif;
}
.Portrait{
   /* on met une largeur et une hauteur ansi qu'une mârge à gauche au photo de la page des personages */ 
    width: 200px;
    height: 200px;
    margin-left: 90px;
}
.Description{
    /* on met au texte de la page des perssonages une bordure et une marge à gauche, et on lui demande de ce mettre là ou il a de la place (inline-block)*/
    display: inline-block;
    border-bottom: 5px #523852 double;
    margin-left: 50px;
}
.Photo{
   /*On lui demande de ce mettre là ou il a de la place (inline-block) et on lui met des marge tout au tour*/
    display: inline-block;
    margin: 15px;
}
#PageGameplay{
    /* Couleur du textes et du fond avec la taille de la police pour la page Gameplay */
    background-color: #E8A99D;
    font-size: 25px;   
    color: #523852; 
}
video{
    /* on met des marges à droite en hauteten bas, on met une largeuretune haute, et  on lui demande de ce mettre là ou il a de la place (inline-block) */
    margin-right: 15px;
    margin-top: 50px;
    margin-bottom: 100px;
    width: 400px;
    height: 225px;
    display: inline-table;
}
#video{
    /* Partie Vidéo pour pc, on lui demande de ce mettre là ou il a de la place (inline-block), on le met à droite, et on lui met une couleur de fond. */
    display: inline-block;
    float: right;
    background-color: #E8A99D;
}
#Question{
    /* Partie Question pour pc, on lui demande de ce mettre là ou il a de la place (inline-block), on le met à droite, et on lui met une couleur de fond. */
    display: inline-block;
    float: left;
    background-color: #E8A99D;
}
.reponse{
    /* Partie réponse pour pc, on lui met des marges tout au tour, on met la bonne policeetune bordure */
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 150px;
    padding-bottom: 140px;
    font-family: Indie Flower, sans-serif;
    border-bottom: 5px #523852 double;
} 
#telephone{
    /* on désactive la partie téléphone sur pc. */
    display: none;
}
#menu-hamburger{
    /* on désactive le menu hambruger sur pc */
    display:none;
}
/* css pour le menu hamburger*/
* {
    box-sizing: border-box;
}

body {
    font-size: 16px;
}

#page-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#title {
    color: #f6f6f6;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2em;
}

#btn {
    position: absolute;
    z-index: 5;
    top: 15px;
    left: 15px;
    cursor: pointer;
    -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
    width: 35px;
    height: 2px;
    margin-bottom: 8px;
    background-color: #523852;
    -webkit-transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn.active {
    left: 230px;
}
#btn.active div {
    background-color: #523852;
}
#btn.active #top {
    -webkit-transform: translateY(10px) rotate(-135deg);
    transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
    opacity: 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#btn.active #bottom {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
}

#box {
    position: fixed;
    z-index: 4;
    overflow: auto;
    top: 0px;
    left: -275px;
    width: 275px;
    opacity: 0;
    padding: 20px 0px;
    height: 85%;
    background-color: #FFDD9F;
    color: #523852;
    -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    font-family: amatic sc, sans-serif;
}

#box.active {
    left: 0px;
    opacity: 1;
}

#items {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); 
}
#items .item {
    position: relative;
    cursor: pointer;
    font-size: 40px;
    padding: 15px 30px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
    border-bottom: double 3px #523852;
}
#items .item:hover {
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
    /* Fin du CSS pour le menu hamburger */
}
a{
    /* on enlève le souligemnet des lien et on met la bonne coleur à la police */
    text-decoration: none;
    color: #523852;

}
@media screen and (max-width: 800px){
    /* CSS pour téléphone */
    #menu{
        /* On désactive le menu déroulant sur téléphone */
        display: none;
    }
    .contenu{
        /* On met une marge tout au tour dutexte de la page histoire et un met un aligment justifé */
        margin: 20px;
        text-align: justify;
    }
    .contenuimg1{
        /* Images de la page histoire qu'on met à droite, on définit la largeure et on metune marge tout au toure */
        width: 300px;
        margin: 15px;
        float: right;
    }
    .contenuimg2{
        /* Images de la page histoire qu'on met à gauche, on définit la largeure et on metune marge tout au toure */
        width: 300px;
        margin: 15px;
        float: left;
    }
    #menu-hamburger{
        /* On active le menu hambourger pour téléphone */
        display: block;
    }
    #personnage{
        /* on met la taille de police et la bonne police au contenu de la page des perssonages, on met une marge à gauche et à droite et on met le text justifié*/
        margin-left: 15px;
        margin-right: 15px;
        font-size: 26px;
        font-family: Indie Flower, sans-serif;
        text-align: justify;
    }
    .Description{
        /* on met au texte de la page des perssonages une bordure en haut et on enlève celle du bas et une marge à gauche, et on lui demande de ce mettre là ou il a de la place (inline-block)*/
        display: inline-block;
        border-top: 5px #523852 double;
        margin-left: 15px;
        border-bottom: none
    }
    video{
        /* on met des marges à droite en haut et  une marge intérieur en bas, on met une largeur et une hauteur, et  on lui demande de ce mettre là ou il a de la place (inline-block), et on met une bordure en bas */
        margin-left: 20px;
        padding-bottom: 40px;
        width: 290px;
        height: 220px;
        display: inline-table;
        border-bottom: 5px #523852 double;
    }
    #video{
        /* on désactive les vidéo PC pour le téléphone */
        display: none;
    }
    #Question{
        /* on désactive les question PC pour le téléphone */
        display: none;
    }
    #telephone{
        /* on active le contenu de la page gameplay pour téphone et on lui met une mageintérieur */
        display: block;
        padding: 20px;
    }
    .reponse{
        /* Partie réponse pour téléphone, on lui met des marges tout au tour, on met la bonne police la bonne taille de police et on enlève la bordure */
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
        padding-bottom: 5px;
        font-family: Indie Flower, sans-serif;
        border:none;
        font-size: 22px;
    } 
    .Portrait{
        /* on met une largeur et une hauteur ansi qu'une mârge à gauche au photo de la page des pessonages */ 
        width: 200px;
        height: 200px;
        margin-left: 30px;
    }
    #PageGameplay{
        /* Couleur du textes et du fond avec la taille de la police pour la page Gameplay, on metque le texte soit aie unaligment justifié, et on suppime la scroll bar. */
        background-color: #E8A99D;
        font-size: 20px;   
        color: #523852; 
        text-align: justify;
        overflow: hidden;
    }
    .titre{
        /* on met une marge en haut aux titres de toutes les pages surtélépnone */
        margin-top: 15px;
    }
    h1{
         /* pour toutes les balises "h1" du site sur téléphone, on met une marge externe à gauche, et on metla bonne taille de police */
        margin-left: 10px;
        font-size: 28px;
    }
    #Decision{
        /* pour la première vidéo sur téléphone on met une margeexterne en bas */
        margin-bottom: 90px;
    }
    .retour{
        /* Pour le bouton retour de la page gameplay, on met une couleur de fond et une margeinterne tout au tour */
        background: #FFCCAC;
        padding: 3px;
    }
}
@media screen and (max-width: 1700px)and (min-width: 801px){
    /* CSS pour les tablette */
    video{
         /* on centre les vidéos avec des marge tout au toure, on met une marge intérieur en bas, on met une largeur et une hauteur, on lui demande de ce mettre là ou il a de la place (inline-block), et on enlève  une bordure*/
        margin: 0 auto;
        padding-bottom: 40px;
        width: 400px;
        height: 300px;
        display: inline-table;
        border:none;
    }
    #video{
        /* on enlève les vidéo pour pc sur les tablettes */
        display: none;
    }
    #Question{
        /* on enlèves les question pour Pc sur tablette*/
        display: none;
    }
    #tablette{
        /* on active le contenu pour tablette de la page gameplay et on met une marge interne */
        display: block;
        padding: 20px;
    }
    .reponse{
        /* Partie réponse pour tablette, on lui met des marges tout au tour, on met la bonne police et on enlève la bordure */
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
        padding-bottom: 20px;
        font-family: Indie Flower, sans-serif;
        border:none;
    }
    #menu-hamburger{
        /* on active le menu hambourgeursur tablette */
        display: block;
    }
    #menu{
        /* on désactive le menu déroulant sur tablette */
        display: none;
    }
    .separation{
        /* on met une bordure en bas de chaque vidéo de la page gameplay */ 
        border-bottom: 5px #523852 double;
    }
    #telephone{
        /* on désactive le contenue de la page gameplay pour téléphone sur tablette */
        display: none;
    }
}