/* ----------------------------codes génériques  ---------------------------------------------------------- */
.titre	{ font-size: 40px; padding-left: 2mm; text-align: center; font-family:"Brush Script Std"; }	
.titre2	{ font-size: 18px; padding-left: 2mm; text-align: center; font-family: "Brush Script Std"; line-height: 1.5;}
.titre3	{ font-size: 15px; padding-left: 2mm; text-align: center; font-family: "Comic Sans MS", cursive; line-height: 1.5; font-style: normal; }
.titre4 { font-size: 24px; padding-left: 2mm; text-align: left; font-family: "Arial Black"; line-height: 1.5;}
.titre5 { font-size: 25px; padding-left: 2mm; text-align: center; font-family: "Brush Script Std", cursive; line-height: 1.5; font-style: normal;}

.ferm_window   { position: absolute; top: 1px; left: 322px; width: 213px; height: 40px; padding: 4px; font-size: 18px; line-height: 20px; text-align: center; font-family: "Arial"; color: #FFFF00; background-color: #666666; z-index: 500; }

div1   { position: absolute; left: 400px; width: 300px; height: 100px; top: 13px; z-index: 1; background-color: #9F3;  }

/* ----------------------------codes presentation menu_1  ------------------------------------------------- */
.container	{ height: 70px; width:300px;display: flex; justify-content: center; align-items: center; height: 70px;  border: 1px solid black; padding: 1px;  margin-bottom: 5px;}
.sauter		   { height: 70px; width:300px;display: flex; justify-content: center; align-items: center; height: 30px;  margin-bottom: 5px;}

.genre	   	{ height:30px; width:270px; text-align: center; font-family:Arial; font-size:30px; font-weight:bold; font-style:normal;  padding:15px; background-color: #FFF;}
.icone			{ height: 50px ; width50px; text-align:center; }
.texte			{ height:30px; width:270px; text-align: center; font-family:Arial; font-size:18px; font-weight:bold; font-style:italic; line-height: 20px; padding:15px; background-color:#CCC}
.visiteur   	{ height:30px; width:270px; text-align: center; font-family:Arial; font-size:20px; font-weight:bold; font-style:normal;  padding:15px; background-color:#CCC;}
.affiche   	{ height:30px; width:270px; text-align: center; font-family:Arial; font-size:30px; font-weight:bold; font-style:normal;  padding:15px; background-color:#CCC;}

.iframe-container iframe { position: absolute; top: 100; left: 0; width: 100%; height: 100%; }
.iframe-container		 { position: relative; padding-bottom: x%;/*aspect ratio x */ height: 0; overflow: hidden; }
.conteneur				 { position: relative; }

/*---------------------------- codes presentation menu_2  ----------------------------------------------------- */
.explication	{ font-family: "Comic Sans MS", cursive; font-size: 20px; padding-left: 0.5mm; text-align: center; line-height: 1.1; font-style: normal; }
.designe   	{ font-family:"Brush Script Std"; font-size: 20px; word-spacing: 17em; text-align: center;line-height: 0.3;}/*designation des fleurs*/
.description   { position: fixed; top: 82px; left: 388px; width: 1500px; height: 1200px;overflow-y: scroll; z-index: 100; text-align: center; background-color: #CCC; }

/*---------------------------- barre titre   ----------------------------------------------------- */
.fenetre	{ position: absolute; left: 666px; width: 1000px; height: 40px; top: -5px; font-size: 40px; justify-content: center; align-items: center; font-family: "titre4"; z-index: 1; background-color: #9F3; padding-bottom : 30px; }
.center		{ height : 100px; height : 100px; border : 1px solid black; }
.image		{ display: grid; grid-template-columns: 1fr ; grid-column-gap: 40px; align-items: center; }
.c1			{ text-align: center; }

/*---------------------------- media querries   ----------------------------------------------------- */
@media (max-width: 600px) {
    body { background-color lightblue;  }
} 
@media (max-width: 768px) {
    h1 {
        font-size: 24px;
    }
}