/*-------------------------------------------------------------------------------- */
/*--  CCVB 91
/*-------------------------------------------------------------------------------- */
/*-- File name        :   index_css.css
/*-------------------------------------------------------------------------------- */
/*-- Date             :   26/01/2020
/*-- Author           :   JC COFFE
/*-- Revision         :   v1.0
/*-------------------------------------------------------------------------------- */
/*-- Tous droits réservés à Monsieur Jean-Charles COFFE
/*-------------------------------------------------------------------------------- */
/*-- Description:
/*--    Script CSS pour l'index
/*--
/*-------------------------------------------------------------------------------- */
/*-- Revision History :
/*-------------------------------------------------------------------------------- */
/*--
/*--
/*-------------------------------------------------------------------------------- */

html,body{
    margin          : 0px;
    padding         : 0px;
    outline         : 0px;
    height          : 100%;
    width           : 100%;
    min-height      : 300px;
    min-width       : 800px;
    background-color: white;
    font-size       : 20px;
    font-family     : arial,serif,sans-serif;
    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);
}

/************************************************************/
/*                       Icone Membre                       */
/************************************************************/
.icone_membre {
     position       : fixed;
     top            : 10px;
     right          : 10px;
     z-index        : 17;
     cursor         : pointer;
     border         : none;
}

/************************************************************/
/*                           Menu                           */
/************************************************************/
#MENU{
    height          : 100%;
    width           : 100%;
    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; */
    color           : rgb(255,0,0);
}


/************************************************************/
/*                     AFFICHAGE CONTACT                    */
/************************************************************/
#CONTACT_JCCOFFE{
    height          :100%;
    width           :100%;
    z-index         :99;
    position        :fixed;
    top             :0px;
    left            :0px;
    background      :black;  /* ancien navigateur */
    background      :rgba(0,0,0,0.8);
    color           :white;
    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) */
}


/************************************************************/
/*                    AFFICHAGE DIAPORAMA                   */
/************************************************************/
#DIAPORAMA {
    height          :100%;
    width           :100%;
    z-index         :50;
    position        :fixed;
    top             :0px;
    left            :0px;
    background      :black;  /* ancien navigateur */
    background      :rgba(0,0,0,0.8);
    color           :white;
    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) */
}


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

    background      : url("fonddecran.jpg") no-repeat center;
    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;
}

#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           :black;
}


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

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

/************************************************************/
/*                          Texte                           */
/************************************************************/
h1{
    color           : black;
    letter-spacing  : 2px;
    text-decoration : bold;
}

h3{
    color           : black;
    /* color           : #2989D8; */
    letter-spacing  : 1px;
}
h3:hover{
    color : rgb(255,0,0);
}

hr{
    border      : none;
    border-top  : 3px solid black;
    margin      : 0 30vw;
    height      : 5px;
}

p{
    cursor:text;
    text-align:justify;
}

#p_texte{
    letter-spacing  : 1px;
    background      : rgba(255,255,255,0.5);
    border-radius   : 5px;
    padding         : 5px;
    color           : black;
}


/************************************************************/
/*                           Input                          */
/************************************************************/
input[type=email], input[type=password]{
    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);
}
label{
    color           : #0096D7;
    font-weight     : bold;
}

/************************************************************/
/*                        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                         */
/************************************************************/
@-webkit-keyframes tangage {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(72deg);
    }
    40% {
        transform: rotate(144deg);
    }
    60% {
        transform: rotate(216deg);
    }
    80% {
        transform: rotate(288deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes tangage {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(72deg);
    }
    40% {
        transform: rotate(144deg);
    }
    60% {
        transform: rotate(216deg);
    }
    80% {
        transform: rotate(288deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.anim_tangage {
    -webkit-animation: tangage 2s linear infinite;
    animation: tangage 2s linear infinite;
}