@charset "utf-8";
/* CSS Document */

body { margin:40px; }
/*------ style Flexbox menu-1 -------*/
.container{ height: 50px; width:310px;display: flex;  padding: 1px;  margin-bottom: 5px; border:solid 1px;}
.inline-container{  display: inline-flex;   padding: 2px; }
.texte{ height:30px; width:260px; text-align: center; font-family:Arial; font-size:18px; font-weight:bold; font-style:italic;  padding:15px}
.icone{	height: 50px ; width:50px; }
.genre { height:30px; width:350px; text-align: center; font-family:Arial; font-size:30px; font-weight:bold; font-style:normal;  padding:15px}
/*---------  configuration description abecedaire   -------------------*/ 
.description { position: absolute; top: 100px; left: 360px; width: 1650px; height: 90%; overflow-y: scroll; z-index: 200; text-align: center; background-color: #0F0;  }
entete { position:absolute;  top: -15px;left: 350px;  width: 1950px; height: 100%; line-height: 30px; font-family:"Brush Script Std";}
.wrapper { display: grid;  grid-gap: 10px;  grid-template-columns: [col] 300px [col] 1470px [col] 510px ; grid-template-rows: [row] auto [row] auto [row] auto [row]auto ; padding:25px; text-align:center; border:solid 2px; }
.box {    background-color: #444;    color: #fff;    border-radius: 5px;    padding: 20px;    font-size: 150%; z-index:10; }
  .a {    grid-column: col / span 3; height:50px;  grid-row: row ;text-align:center; font-family: "Arial Black"; font-size:24px; line-height:normal; background-color:#F00; padding:: 25px; border:3px solid black;  }		
  .b {    grid-column: col 1 ; grid-row: row 2; width: 440px;  height:270px; background-color:#999; text-align:center; padding:25px;  }	
  .c {    grid-column: col 2; grid-row: row 2 ;width: 440px;  height:270px; background-color:#999; text-align:center; padding:25px;  }
  .d {    grid-column: col 3; grid-row: row 2; width: 440px;  height:270px; background-color:#999; text-align:center ; padding:25px; }
  .e {    grid-column: col / span 3; height:auto;   grid-row: row 3; text-align:center; font-family: sans-serif; font-size:18px; line-height:normal; background-color:#FF0; padding:25px; }
  .f {    grid-column: col / span 3; height:50px;    grid-row: row 4; text-align:center; background-color: #0FF  ; padding : 25px ; }
/*------ style polices utilisées  -------*/
.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; }
.titre31{ font-size: 25px; 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;}