html,body{
    margin          : 0px;
    padding         : 0px;
    outline         : 0px;
    height          : 100%;
    width           : 100%;
    min-height      : 300px;
    min-width       : 800px;
    background-color: white;
    font-size       : 25px;
    font-family     : serif,sans-serif;
    cursor          : grab;
}

/************************************************************/
/*                     Page fond d'écran                    */
/************************************************************/
#FONDECRAN{
    height          : 150%;
    width           : 150%;
    position        : fixed;
    display         : flex;
    flex-wrap       : nowrap;
    flex-direction  : column;
    justify-content : flex-start;
    align-items     : flex-start;
    z-index         : 0;
    overflow        : none;
    background      : url("fonddecran.jpg") no-repeat center;
    background-attachment : local;
    background-size : cover;
}

/************************************************************/
/*                      Page sans bord                      */
/************************************************************/
#PAGES{
    height          : 300%;
    width           : 300%;
    position        : fixed;
    display         : flex;
    flex-wrap       : nowrap;
    flex-direction  : column;
    justify-content : flex-start;
    align-items     : flex-start;
    z-index         : 1;
    overflow        : none;
    /* background      : url("fonddecran.jpg") no-repeat center; */
    /* background-attachment : local; */
    /* background-size : cover; */
}

#PAGES_HAUT, #PAGES_MILIEU, #PAGES_BAS{
    position        : relative;
    display         : flex;
    flex-wrap       : nowrap;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
}

#element_page{
    display         : flex;
    flex-wrap       : nowrap;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

#element_page_zone{
    max-height      : 90vh;
    max-width       : 90vw;
    display         : block;
    margin          : 5vw;
    padding         : 10px;
    overflow        : auto;
    border-radius   : 10px;
}

#element_page_zone_texte{
    display         : flex;
    flex-wrap       : nowrap;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    padding         : 50px;
    background-color:none;
    color           :rgb(0,48,132);
}


/************************************************************/
/*                         Flèches                          */
/************************************************************/
.fleche {
    width:5vw;
    max-width:100px;
}

.fleche:hover {
    width:6vw;
    max-width:200px;
}

/************************************************************/
/*                          Texte                           */
/************************************************************/
/* h1{
/*     color           : #2989D8; /* 1E5799;*/
/*     letter-spacing  : 2px;
/*     text-decoration : bold;
/* }
/* h1:hover{
/*     color : #0096D7;
/* }
/* 
/* h3{
/*     color           : #2989D8;
/*     letter-spacing  : 1px;
/* }
/* h3:hover{
/*     color : #0096D7;
/* }                        */


p{
    cursor:text;
}

#p_texte{
    /* text-shadow     : #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px; */
    letter-spacing  : 1px;
    font-weight     : bold;
}


/************************************************************/
/*                           Input                          */
/************************************************************/
input[type=email], input[type=text]{
    color           : #2989D8;
    background      : none;
    border          : none;
    border-bottom   : dotted 3px #0096D7;
}
input[type=submit]{
    color           : white;
    background      : #2989D8;
    border          : solid 1px #1E5799;
    border-radius   : 5px;
    padding         : 10px 15px 10px 15px;
    font-weight     : bold;
    letter-spacing  : 1px;
    cursor          : pointer;
}
input[type=submit]:hover{
    box-shadow      : 3px 3px 0 rgba( 0, 0, 0, 0.5);
    text-shadow     : 1px 1px 0 rgba( 0, 0, 0, 0.5);
}

/************************************************************/
/*                        Scrollbar                         */
/************************************************************/
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1A4366; 
    border-radius: 10px;
}

/************************************************************/
/*               Animation : logo chargement                */
/************************************************************/
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.rotation {
    -webkit-animation: rotating 5s linear infinite;
    animation: rotating 5s linear infinite;
}