/* 
############################################################################
#                                                                          #
# Description: CSS du message de notification                              #
#                                                                          #
############################################################################ 
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
*/


.show_notif {
    left: 2em;
}

/* Div de la notification */
aside {
    z-index:           2;                       /* Position en profondeur */
    position:          fixed;                   /* Comment vas être positionné l'élément */
    left:              -75%;                    /* position à gauche de l'écran (démarre masqué) */
    bottom:            2em;                     /* position en bas de l'écran */
    width:             350px;                   /* largeur de la div définie selon le contenu */
    padding:           0.3em;                   /* marge interne de 1 fois la taille du texte */
    background-color:  var(--notifAsideBg);     /* couleur du fond */
    border:            var(--notifAsideBorder); /* taille type et couleur de la bordure */
    border-radius:     10px;                    /* arrondie des angles de la bordure */
    text-align:        center;                  /* le texte est centré */
    box-shadow:        4px 4px 9px black;     /* Ombre, déportation x, deportation y, diffusion, couleur */
    transition:        all 0.6s ease-in-out;    /* ajout d'un effet acceleration/decerelation de l'animation */
}

/* Zone clickable */ 
aside a {
    cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
}

/* Boutton pour fermer */
aside button {
    position:          absolute; /* Position fixe relative */
    right:             0px;      /* tout à droite */
    top:               0px;      /* tout en haut */
    border:            none;     /* sans bordure*/
    padding:           0px;
    margin-top:        4px;
    margin-right:      4px;
    color:             var(--notifButtonCloseColor);
    background-color:  var(--notifButtonCloseBg);
    border-radius:     4px;
    font-size:         19px;
    width:             23px;
    line-height:       23px;
    height:            23px;
    border:            var(--notifButtonCloseBorder);
    transition:        all 0.05s ease-in-out;
}

aside button:hover {
    cursor:            pointer; /* le curseur deviens un pointeur quand on le survole */
    color:            var(--notifButtonCloseHoverColor);
    background-color: var(--notifButtonCloseHoverBg);
}

aside span {
    float:                     left;                      /* float à gauche */
    position:                  absolute;                  /* position fixe relative  */
    left:                      0.5em;                     /* distance a gauche */
                                                          /* (espace totale(h3, p pad & marg + font-size) - cloche font-size) / 2*/
    top:                       calc((52.8px - 32px) / 2); /* centré  */
    font-size:                 32px;                      /* taille de la cloche */
    animation-name:            cloche;                    /* nom animation keyframe */
    animation-timing-function: ease-in-out;               /* vitesse et style de transition */
    animation-iteration-count: infinite;                  /* répété à l'infini */
    animation-duration:        2.7s;                      /* duréé de l'animation */
}

/* Titre de la fenetre */
aside h3 {
    font-size:     17px;
    margin-top:    0px;   /* on supprime la marge du haut */
    padding-top:   0.3em; /* on la remplace avec du padding pour que la zone soit clickable */
    margin-bottom: 0.3em;
}

/* Contenu */
aside p {
    font-style:      italic; /* le texte est en italic */
    text-decoration: underline;
    margin-bottom:   0px;
    padding-bottom:  0.3em;
    margin-top:      0.3em;
}

/* Etapes de l'animation */
@keyframes cloche {
    0% {transform:   rotate(5deg)   scale(1.1);}
    4% {transform:   rotate(-10deg) scale(1.2);}
    8% {transform:   rotate(10deg)  scale(1.2);}
    12% {transform:  rotate(-10deg) scale(1.2);}
    16% {transform:  rotate(10deg)  scale(1.2);}
    20% {transform:  rotate(-10deg) scale(1.2);}
    24% {transform:  rotate(10deg)  scale(1.2);}
    28% {transform:  rotate(-10deg) scale(1.2);}
    32% {transform:  rotate(10deg)  scale(1.2);}
    36% {transform:  rotate(-5deg)  scale(1.1);}
    40%  {transform: rotate(0deg)   scale(1);}
    100% {transform: rotate(0deg);}
}

/* MOBILE */
@media screen and (max-width: 768px) {
    .show_notif {
        bottom: 1em;
        left:   calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
    }
    
    /* Div de la notification */
    aside {
        bottom: -300px; 
        width:  90%;
        left:   calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
    }
}