body    {background-color: white;
         font-family: Arial, Helvetica, sans-serif;
         margin: 0px;
         padding: 0px;
}

header  {text-align: center;
         margin-bottom: 0px;
         padding-top: 10px;
         width: 100%;
         height: 110px;
         background-image: url('./img/Bandeau1920x125.jpg');
         background-repeat: no-repeat;
}

.headerMamie  {background-image: url('./img/BandeauCahierMamie1920.jpg');
               background-repeat: no-repeat;
               height: 270px;
}

/* menu du haut ------------------------------------------- */
nav     {width: 100%;
         margin: 0 auto;
         font-size: 14px;
         background-color: Gainsboro;  
}
nav ul  {list-style-type: none;
         margin-top: 0px;
         margin-bottom: 20px;
}
nav li  {float: left;
         width: 25%;
         text-align: center;
}
nav ul::after {content: "";
               display: table;
               clear: both;
}

 
/* titre de la page ---------------------*/
h1      {font-size: 32px;
         margin-top: 20px;
         margin-bottom: 20px;
         color: darkblue;
}
.headerMamie h1 {color: white;}


/* ------------------------------------------------- */
h3          {padding: 0px; 
             margin: 0px;
             margin-top: 5px;
}

.div1    {width: 1500px;
         margin: auto;
         background-color: white;
}

.div2    {width: 700px;  
          height: 200px;
          display: inline-block;
}

.div2::after    {content: "";        /* pour éviter le collapse de l'élément div2 non flottant qui ne contient que des div3L et R flottants */   
                 display: table;              /* dans la doc, cela s'appelle ClearFix */   
                 clear: both;
}   

.div3L   {float: left;
          width: 30%;
          height: 200px;  
}

.div3R   {float: left;
          width: 66%;
          padding-left: 10px;
}

.imgLegal   {margin: auto;}

.img1   {width: 200px;
         height: 200px;   
}

.pTexte {padding-left: 10px;
         padding-right: 10px;
}
.pTitre {margin-top: 70px;
}

.gras   {font-weight: bold;}

.bordure   {border: 3px solid grey;

}

/* liens dans le texte (page blockchain, recettes de mamie) ------------------ */
.lien1  {text-decoration: underline;
         color: black;
}      
.lien1:hover  {text-decoration: none;
          font-weight: bold;
          color: black;
}     

/* mentions légales dans une image pour éviter les robots qui récupèrent les adresses */
.imgLegal   {display: block;
}

/*  gestion du "lire la suite ... https://jsfiddle.net/PBfDa/   */
#hidden-first {display:none;    /* texte caché pour lire la suite   */
}
#read-more  {text-decoration: none;
             color: #2C3E50;     
}
#read-more:hover {font-weight: bold;
                  color: black;
}

/* liste des recettes ---------------------------------------- */
.h4Recettes {color: darkblue;
}
.filtres    {background-color: SkyBlue;
}
.label1     {width: 70px; display: inline-block;}

.liste-recettes ul {list-style-type: none;
}

/* .A      {display: block;    /* Apero      */  /* j'ai enlevé la classe Apéro parce que il n'y a pas de recette Apero seulement et si on */
/*         padding-top: 5px;                     /* range une recette dans 2 classes, le filtre ne marche pas bien  */
/* }  */
.E      {display: block;    /* Entrees    */
         padding-top: 5px;
}
.P      {display: block;    /* Plats      */    
         padding-top: 5px;  
}
.D      {display: block;    /* Desserts   */
         padding-top: 5px;
}

.lienR  {width: 560px;
         text-decoration: none;
         color: darkblue;
         display: block;
}
.lienR:hover  {background-color: aqua;
}

/* page recette ---------------------------------------------- */
.div4    {width: 100%;  
    display: inline-block;
    padding: 10px;
    /* background-color: bisque;    */
}

.div4::after    {content: "";        /* pour éviter le collapse de l'élément div2 non flottant qui ne contient que des div3L et R flottants */   
           display: table;              /* dans la doc, cela s'appelle ClearFix */   
           clear: both;
} 
.div4L  {width: 520px;
         float: left;
         text-align: center;
         background-color: lightblue; 
         padding-top: 0px; 
}
.div4R  {float: left;
    padding-left: 15px;
         width: 60%; 
         background-image: url(./img/carreaux.jpg);
         min-height: 600px;
         /* background-color: lightgreen;   */
}
.h3Recette  {color: darkblue;
             margin-top: 8px; margin-bottom: 16px;
}
.pRecette   {color: black;     /* paragraphe texte recette */
             margin-top: 8px; margin-bottom: 8px;
}
.hRecette   {color: black;    /* paragraphe sous-titre recette */
             font-weight: bold;
             margin-top: 12px; margin-bottom: 4px;
}
.ulIngredients  {list-style-type: circle;

}
.photosRecette  {display: inline-block;
                 margin-top: 20px;
}

.imgCahier {float: left;
    width: 500px;
    margin-top: 10px; margin-left: 10px; margin-bottom: 10px;
}
.imgRecette {float: left;
             width: 420px;
             margin-top: 10px; margin-left: 10px;
}

.boutonsRecette  {display: inline-block;
    margin-top: 10px;
}

.btnAction  {cursor: pointer;         /* boutons de bas de page : back, print, ...   */
}   

/* pied de page ---------------------------------------------- */
footer   {text-align: center;
          font-size: 14px;
          margin-top: 20px;
}

footer a, nav a    {text-decoration: none;
             color: #2C3E50;     
             display: inline-block;
             margin-left: 20px;
             margin-right: 20px;
}

footer a:hover, nav a:hover  {font-weight: bold;
                 color: black;
}

.divBoutons  {text-align: center;
             /* margin: auto;  */
}


/* =================================================================================================== */
/* RESPONSIVE DESIGN : on considère qu'en dessous de 781 pixels de large, on a affaire à un smartphone */

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

    header      {padding:  15px 5px 0px 5px;
                 width: 100%;
                 height: 60px;
                 /* border-bottom: solid 1px grey;  */
                 /* background-image: none;
                 background-color: lightgrey; */
                 margin-bottom: 0px;
    }

    nav         {width: 100%;}

    h1          {font-size: 20px;
                 margin-top: 5px;
                 margin-bottom: 40px;
    }

    .div1   {width: 100%;}

    .div2   {height: 100px;
             width: 100%;
             border-bottom: solid 1px grey;
             padding-top: 5px;
             padding-bottom: 5px;
    }

    .div3L  {clear: left;
             width: 25%;
    }
    .div3R  {width: 70%;
    }

    .div4R  {width: 100%;}

    .img1   {width: 100%;
             height: auto;
    }

    .imgLegal   {width: 100%;}

    .pTitre {margin-top: 10px;
             border-top: solid 1px grey;
             padding-top: 10px;
    }
    

    footer  {margin-top: 10px;
             width: 100%;
    }

    .headerMamie  {background-image: url('./img/BandeauCahierMamie600.jpg');
                   background-repeat: no-repeat;
                   height: 110px;
                   padding-top: 5px;
    }   

    .headerMamie h1   {font-size: 20px;
                       margin-top: 0px;
    }
}