footer {
        grid-area: footer;                              /* Nom de la zone GRILLE */
        background-color: transparent;
        background-color:aqua;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        display: flex;                                  /* je fais du "footer" un conteneur    */
                                                        /* => l'axe horizontal est le principal */
                                                        /*    et on s'aligne à gauche           */
        flex-direction: row;                            /* on s'aligne sur la ligne mais pas à gch donc à droite    */
                                                        /*  ROW  ==>  à gauche donc le texte à gch puis le logo (cf html) */
                                                        /*  ROW-REVERS ==> à droite donc le texte à droite et le logo à gch du text */
        align-items: center;                            /* ON CENTRE LE TEXTE verticalement     */   
        padding-top: 0px;
        justify-content: left;                          /* centrer horizontalement le texte                     */

    }

footer .Copyright{
        width: 100px;                           /* Largeur du C de Copyright  */
        height: auto;                           /* La hauteur est gérée par la largeur */
        padding-top: 5px;
        padding-bottom: 5px;

    }
.annee {
        font-family: 'roboto';                          /* Police ROBOTO */
        font-size: 15px;
        align-items: center;
        
}


/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN COMPRIS ENTRE  500 et 900 px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 501px) and  (max-width: 900px)  {

/************************************** FOOTER ******************************************************************/   
/* RIEN NE CHANGE  */
/************************************** FOOTER ******************************************************************/   
       
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN INFERIEUR A 500px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 500px)  {

/************************************** FOOTER ******************************************************************/   
footer {
        grid-area: footer ;                    /* Je nomme la partie de la grille     */
        display: none;
}
/************************************** FOOTER ******************************************************************/   


}