/*-------------------------------------------------------------------------------- */
/*-- JCcorp.net
/*-------------------------------------------------------------------------------- */
/*-- File name        :   menu.js
/*-------------------------------------------------------------------------------- */
/*-- Date             :   16/08/2020
/*-- Author           :   JC COFFE
/*-- Revision         :   v1.0
/*-------------------------------------------------------------------------------- */
/* Tous droits réservés à monsieur Jean-Charles COFFE. Copie interdite !
/*-------------------------------------------------------------------------------- */
/*-- Description:
/*--    Script Javascript pour gérer la partie nav
/*-------------------------------------------------------------------------------- */
/*-- Nota:
/*--    Obligation d'avoir page sans bord avec cette page
/*-------------------------------------------------------------------------------- */
/*-- Revision History :
/*-------------------------------------------------------------------------------- */
/*--
/*--
/*-------------------------------------------------------------------------------- */
html,body{
    margin          : 0px;
    padding         : 0px;
    outline         : 0px;
    height          : 100%;
    width           : 100%;
    min-height      : 300px;
    min-width       : 800px;
    background-color: white;
    font            : 20px "American Typewriter", "Jazz LET", Blippo, "Comic Sans MS";
    cursor          : grab;
}

/************************************************************/
/*                        Icone Menu                        */
/************************************************************/
.icone_menu{
     position       : fixed;
     top            : 10px;
     left           : 10px;
     z-index        : 25;
     cursor         : pointer;
     border         : 1px solid white;
     border-radius  : 8px;
}
.icone_menu:hover{
     box-shadow     : 3px 3px 0 rgba( 0, 0, 0, 0.5);
}


/************************************************************/
/*                           Menu                           */
/************************************************************/
#MENU {
    height          : 100%;
    width           : 100%;
    /* min-width       : 500px; */
    position        : fixed;
    top             : 0;
    z-index         : 20;
    display         : flex;
    flex-direction  : row;   /* alignement vertical */
    flex-wrap       : nonwrap;     /* retour à la ligne lorsqu'il n'y a plus la place */
    justify-content : space-between;   /* aligne dans le sens de l'axe principal (vertical) */
    align-items     : stretch;   /* aligne dans le sens de l'axe secondaire (horizontal) */
    overflow        : auto;
}

.element_menu:nth-child(1) {
    min-height      : 500px;
    flex            : 1;
    display         : flex;
    flex-direction  : column;   /* alignement vertical */
    flex-wrap       : nonwrap;  /* retour à la ligne lorsqu'il n'y a plus la place */
    justify-content : flex-end; /* aligne dans le sens de l'axe principal (vertical) */
    align-items     : flex-end; /* aligne dans le sens de l'axe secondaire (horizontal) */
    border-radius   : 0 10px 10px 0;
}
.element_menu:nth-child(2) {
    flex            : 5;
    padding-top     : 4%;
    padding-left    : 10%;
    padding-right   : 4%;
    z-index         : 12;
    text-shadow     : 1px 1px 0px rgba(0,0,0,0.4); /* ombre noir à 40% */

}
.element_menu:nth-child(3) {
    flex    : 3;
}

.zone2_rub{
    color   : #1A4366;
    cursor  : pointer;
}
.zone2_rub:hover{
    color   : #3399FF;
}

.zone3_rub{
    position: fixed;
    bottom  : 20px;
    right   : 20px;
}

.menu_volet_1{
    background      : #163AC3;
    writing-mode    : vertical-rl;
    text-orientation: mixed;
    font            : 5vh 'Brush Script MT', 'Brush Script Std', 'Jazz LET', Blippo, 'Comic Sans MS';
    letter-spacing  : 2px;
    color           : white;
    padding         : 1vh;
}


/************************************************************/
/*                          FENETRE                         */
/************************************************************/
#FENETRE{
    height          :100%;
    width           :100%;
    position        :relative;
    display         :flex;
    flex-direction  :column;   /* alignement vertical */
    flex-wrap       :wrap;     /* retour à la ligne lorsqu'il n'y a plus la place */
    justify-content :center;   /* aligne dans le sens de l'axe principal (vertical) */
    align-items     :center;   /* aligne dans le sens de l'axe secondaire (horizontal) */
    margin          :0;
    padding         :0;
    z-index         :17;
    color           :black;
    background      :#1E5799;  /* ancien navigateur */
    background      :-moz-linear-gradient(45deg, #1Z5799 0%, #2989D8 50%, #0096D7 71%); /* FF3.6-15 */
    background      :-webkit-linear-gradient(45deg, #1E5799 0%,#2989D8 50%,#0096D7 71%); /* Chrome10-25,Safari5.1-6 */
    background      :linear-gradient(45deg, #1E5799 0%,#2989D8 50%,#0096D7 71%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter          :progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#0096D7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    filter          :progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0096d7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color           :black;
}

.conteneur_fenetre_main{
    height          : 80%;
    width           : 80%;
    background      : white;
    border-radius   : 10px;
    overflow        : auto;
    box-shadow      : 1px 1px 0 rgba( 0, 0, 0, 0.6);  /* ombre noir à 60% */
    display         : flex;
    flex-direction  : column;   /* alignement vertical */
    flex-wrap       : nonwrap;     /* retour à la ligne lorsqu'il n'y a plus la place */
    justify-content : top;   /* aligne dans le sens de l'axe principal (vertical) */
    align-items     : center;   /* aligne dans le sens de l'axe secondaire (horizontal) */
    padding         : 20px;
}

/************************************************************/
/*                     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           :white;
}


/************************************************************/
/*                         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;
}

#p_titre{
    font                : bold 30px "American Typewriter", "Jazz LET", Blippo, "Comic Sans MS";
    /* -webkit-text-stroke : 1px black; */
    letter-spacing      : 2px;
    background          : rgba(255,255,255,0.7);
    border-radius       : 5px;
    padding             : 5px;
    margin              : 5px;
    text-align          : center;
    color               : #163AC3;
}

#p_texte{
    /* text-shadow     : #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px; */
    letter-spacing  : 1px;
    background      : rgba(255,255,255,0.7);
    border-radius   : 5px;
    padding         : 5px;
    text-align      : center;
    color           : #163AC3;
}


/************************************************************/
/*                           Input                          */
/************************************************************/
#TABLE_CONTACT{
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    background      : rgba(255,255,255,0.7);
    border-radius   : 5px;
    padding         : 5px;
    color           : #1A4244;
}


input[type=email], input[type=text]{
    background          : none;
    border              : none;
    font                : bold 15px "Jazz LET", Blippo, "Comic Sans MS";
    color               : #163AC3;
    /* -webkit-text-stroke : 1px black; */
    letter-spacing      : 1px;
    border-bottom       : dotted 3px black;
}
input[type=submit]{
    color           : white;
    /* background      : #2989D8; */
    background      : #163AC3;
    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);
}

label{
    font                : bold 20px "American Typewriter", "Jazz LET", Blippo, "Comic Sans MS";
    /* -webkit-text-stroke : 1px black; */
    color               : #163AC3;
    letter-spacing      : 1px;
    text-align          : center;
}

/************************************************************/
/*                        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;
}