html {
  height: 100%;
  text-align: left;
  background-image:  url("logo1500fond.png");
}
body {
  /*height: 100%;*/
  margin: 0;
  padding: 0;
}
		@font-face {
    font-family: 'Exo';
	 src: local("Exo-VariableFont_wght"), url(fonts/Exo-VariableFont_wght.ttf) format("truetype");
	font-weight: normal;
    font-style: normal;
	
}
#index {text-align: center; background-color: rgba(255, 255, 255, 0.8); border-radius: 20px; max-width: 500px;}
#indexvip {display: flex; flex-flow: row wrap; justify-content: center; max-width: 1000px; margin: 0 auto;}
#accueilvip { padding: 10px; background-color: lightgreen; margin: 10px auto 0 10px; border-radius: 15px; bottom: 15px; position: relative;}
#cartevip {width: 300px; height: 194px; margin: auto; border-radius: 15px; padding: 10px; background-color: lightblue; border: solid 4px white; position: relative;}
#echo {font-size: 0.8em; padding: 3 20 3 20;}
html, body {
    padding: 0;
	font-family: 'Exo-VariableFont_wght', cursive;
	
}
.imgleft {
float: left;
}

.submit {
	cursor:pointer;
	border: solid darkgray;
	border-radius: 25% 10%;
	background-color: blue;
	color: white;
}

.bold {font-weight: bold;}
.subred {
	cursor:pointer;
	border: solid darkgray;
	border-radius: 25% 10%;
	background-color: red;
	color: white;
	font-size: 0.6em;
}

input[type="text"] {
    width: 200px;
}


#main {
	width: 90%;
}


#menu {
	flex-shrink: 1;
	width:20px;
	background: green; 
}
#contindex {
	color: black;
	background: NavajoWhite;
	padding: 10px;
	width: 100%;
} 
#contenu {
	color: black;
	background: NavajoWhite;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
} 
.annonces {
	color: black;
	background: Gainsboro;
	padding: 10px;
	border: solid 2px black;
	border-radius: 10px;
	min-height: 200px;
	display: flex;
    flex-direction: column;
	min-width: 150px;
	max-width: 250px;
	
}
.tableau {
	border: 8px solid blue; 
	margin-left:auto;
	margin-right:auto;
	border-style: ridge;
}
#rubrique {
	flex-shrink: 1;	
	width: 30px;
	height: 50%;
	margin-right: 20px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-align: center;
	/*padding: 4px;*/
	border: solid darkgray;
	border-radius: 25% 10%;
	color: black;
}

#footer {
	color: black;
	position: fixed; 
	padding: 10px 10px 10px 10px;
	border-radius: 35% 20%;	
	bottom: 0;
	left: 0;
	width: 100%; 
	height: 40px;
	border: 0.5rem solid darkgray;	
	background: grey; 
}
.footer {align-self: flex-end; font-size:0.6em; border-top:solid 1px black;}
.header {align-self: flex-start; font-size:0.8em; border-bottom:solid 1px black; line-height: 1.4em;}
.textinfo {font-style: italique; text-align: center; color: green; flex-grow: 1; /*overflow: hidden;*/}
.titrann {font-weight: bold; font-size: 1.2em; line-height: 2em; background: white; border-bottom: solid 2px blue; border-top: solid 1px black; padding: 10px;}
.pensee {color: yellow; max-width: 60%; margin: 0 auto; text-align: center; background-color: darkblue; border-radius: 5px;}
#accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
  position: absolute;
}
#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color: rgba(50, 50, 50, 0.5);
   /*background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   */border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40;
   
}
#jaune {background-color: rgba(255,255,0,0.5);
border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 10em;
}