body{
    display: grid;
    width:100%;
    height: 100vh;
    grid-template:
    "header header" var(--header-height)
    "nav nav"   var(--nav-height)
    "Article Article" auto
    "Aside Main" auto
    "Article1 Article1" auto
    "Article2 Article2"auto
    "footer footer" var(--footer-height)
    / 1fr  1fr ;
}   

/*  La définition des zones de la page  */

#pageHeader{grid-area: header;}
#mainNav{grid-area: nav}
#PetitDejeuner {grid-area: Article;}
#PdContenu{GRID-area: Aside;}
#PdImage{grid-area: Main;}
#PdProvenance{grid-area:Article1 ;}
#RepasDuSoir{grid-area:Article2 ;}
#pageFooter{grid-area: footer;}

/*  La définition des zones de la page pour un mobile */
@media screen AND (max-width: 760px){
    body{
    grid-template:
    "header" var(--header-height)
    "nav"   auto
    "Article" auto
    "Aside" auto
    "Main" auto
    "Article1" auto
    "Article2"auto
    "footer" var(--footer-height)
    / 1fr;   }
    nav{
        margin: .5 0;
        
    }
    header{border:none;}
    main{margin-top:5px;}
}
/*  Les Styles du site  */
article, aside, main, article1, article2{
    border-radius: 15px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    border: 1px inset var(--grisfonce);
    padding-bottom: 10px;
    margin-top:5px;
}
.ImagePD{
    width: 98%;
    height: 14em;
    margin: auto auto;
    background-image: url("../Medias/images/PD/Omelette1.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}