@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: #FFEFD5;
    margin: 0;
    padding: 0;

    font-family: "Roboto", sans-serif;      /* choix d'une police de caractère       */
    font-optical-sizing: auto;              /* ajuster automatiquement la perception visuelle d'une police de caractères en fonction de sa taille.    */
    font-weight: 400;                       /* Epaisseur de la Font +/- le milieu    */
    font-style: normal;                     /* Style normal */
    font-variation-settings: "width" 100;    /* contrôler les caractéristiques des polices variables, comme le gras, la largeur ou l'inclinaison */
}
#site {
    display: grid;                                                  /* On définit la grille                 */
    /*    grid-template-columns: 1fr 5fr;                           /* les colonnes = 1part 5 parts         */
    /*    grid-template-rows: 150px clamp(20px, 3vw, 50px);         /* on spécifie les hauteurs de lignes   */
    /*    grid-template-areas:                                      /* on spécifie les colonnes             */
    /*          "header header"
                "section section"
                "nav nav"
                "article article"
                "footer footer"  ;                         */
    grid-template-columns: 1fr;
    grid-template-areas: 
                "header"
                "section"
                "nav"
                "article"
                "footer"  ;
    /* *************************************************************************** */
    height: 100%;
    grid-template-rows: clamp(50px, 15vw, 140px)
                        auto
                        50px
                        auto   
                        30px;    /* hauteur des lignes de la grille  clamp(10px, 5vw, 50px)  */

                    /* Ligne    1ere  140px                     header   
                                2eme  40px                      section
                                3eme  de 10 à 50px              clamp(10px, 5vw, 50px)   nav
                                4eme  auto celon les besoins    article
                                5eme  30px                      footer
    /* *************************************************************************** */
}


/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN COMPRIS ENTRE  500 et 900 px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 501px) and  (max-width: 900px)  {
#site{
    grid-template-areas:
                "header"
                "nav"
                "article"
                "footer"  ;
    grid-template-rows: clamp(50px, 15vw, 140px)
                        6.5vw
                        auto   
                        30px;    /* hauteur des lignes de la grille clamp(10px, 5vw, 50px)   */
}  
}


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

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

#site{
    grid-template-areas:
                "section"
                "nav"
                "article"
                "footer"  ;
    grid-template-rows: 40px
                        7.5vw
                        auto   
                        30px;    /* hauteur des lignes de la grille clamp(10px, 5vw, 50px)   */

}
}