html{background-color: #ddd}
body {font-family: Arial, sans-serif;background-color: #ddd;margin: auto; width: 1500px; padding: 10px 10px 10px 10px;} 
section h3{margin: 0 auto;text-align: center;}
/*CSS <body class="container"> la grille */
.container
{background-color:#ddd;
	display:grid;
	grid-template-rows: 50px auto auto auto;
	grid-template-columns: 310px 900px 290px;
	grid-template-areas: "img_logo entete entete"
						 "img_logo titre_site titre_site"
						 "principal re7 barre_droite"
						 "pied pied pied";

}

.section_1 ,.section_2,.section_3{padding: 20px;}
.bandeau{background-color:#ddd;color:#fff;grid-area: entete;z-index: 1000;}
.titre_1{background-color:#ddd;margin:auto;grid-area: img_logo;}
.titre_2{display: flex;background-color:#ddd;	grid-area: titre_site;}
.section_1{background-color:#eee;padding-left: 10px;	grid-area: principal;}
.section_2{background-color:#eee;	grid-area: re7;}
.section_3{background-color:#eee;	grid-area: barre_droite;}
footer{font-size:x-small;grid-area: pied;}

/*CSS  <section class="bandeau"> (entete) + fichier: re7_styles_menu_deroulant.css */
footer p , .etat-projet{display:inline;}

/*CSS <section class="titre_1"> (img_logo) */
.img-logo
{	max-width: 70%;
	height:auto ;
    border-radius: 50% 50% / 50% 50%;
    position:relative;
    left:40px;
}

/*CSS <section class="titre_2">  (titre_site) */
.div1_titre2,.div2_titre2{text-align: center;}
.div1_titre2{ width: 900px; }
.div2_titre2{ width: 290px; padding-top: 0px;font-weight: bold;background-color:#ddd; }
/*CSS  <section class="section_1"> (principal)*/
#section_1_div {position:relative; width: 310px ; height: 800px ; overflow-y: auto; }

li.puce_re7_off,li.puce_re7_on,li.puce_re7_modif{list-style: none;font-family: Helvetica, sans-serif;font-size: 14px;color:rgb(138, 10, 10);}
/*li.puce_re7{font-family: Helvetica, sans-serif;font-size: 14px;color:rgb(138, 10, 10);list-style-type: "\01F511";}*/
li.puce_re7_off:hover,li.puce_re7_on:hover,li.puce_re7_modif:hover{color:  rgb(255, 115, 0);font-weight:normal;font-style:oblique;text-decoration: underline rgb(255, 115, 0);cursor:pointer;}

li.puce_re7_off::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url('../images/state_off.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 0.5em -0.25em -1em;
}
li.puce_re7_on::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url('../images/state_on.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 0.5em -0.25em -1em;
}
li.puce_re7_modif::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url('../images/ic-visible.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 0.5em -0.25em -1em;
}

/*CSS  <section class="section_2"> (re7) iframe dimension Largeur 900px hauteur 800px*/
.cadre{
	margin-top: 10px;
	width: 100%;
	height: 800px;
	border: thick double rgb(225, 115, 0);
	border-radius: 10px;
}

/*CSS <section> section_3 (barre_droite) */
.parent_barre{position: relative;}
#levain{display:none;min-height: 350px;
	background-color:rgb(230, 200, 162);
	position:absolute;top: 0;left: 0;
	width: 100%; 
	z-index: 1;}
#levain p{text-align: center;}
#utilisation{position:absolute;top: 0;left: 0;height: 265px;background-color:#eee;}
#methode{ width: 100%; min-height: 125px;	font-family: Arial, sans-serif;}
details{text-align: left;padding: 20px 10px 10px 10px;}
.btn_nouvelle{ position:absolute;top: 775px;left: 45px;}


/* --------------------------------------- Réglages spécifiques (point de rupture) ---------------------------------------
si l'écran fait moins d'un nombre de pixels (pour les smartphones par exemple 568px )
Il est posible de définir le type de media: all tout les types (défaut) screen ou speetch ou print
exemple: @media screen and (max-width:600px)  and ou or ...
*/
@media(max-width:600px)
{
	body 
	{
		background-color: #bbb;
		color:blue
	}
	/* ici on passe tout sur  une colonne*/
	.container
	{
		grid-template-columns: 1fr;
		grid-template-areas: "img_logo"
							 "entete"		
							 "titre_site"
							 "principal"
							 "re7"
							 "barre_droite"
							 "pied";
	}	
}

/* --------------------------------------- Aide CSS ---------------------------------------
1) box-sizing: gestion de la prise en compte des marges intérieures des boites par défaut on peut avoir des chevauchements. Exemple: box-sizing:border-box ;
2) overflow: hidden; /*Masquer les Débordements de contenu
3) border-width: 1px; border-style: solid;
4) marging, padding: haut | droit | bas | gauche 
5)
 */