* {margin: 0; padding: 0}
body {background-color: #9e9e9e; padding-bottom: 20px;}
a:link , a:active, a:visited  {color: #00f}
a:hover {color: #f60}
button:hover {color: #f60}
ul {list-style-position: inside}
button {padding: 2px 3px}
#global {width: 1260px; margin-left: auto; margin-right: auto; font-size: 13px; font-family: Arial, Helvetica, sans-serif; background-color: #fff; line-height: 18px;}
#pubhaut {background-color: #9e9e9e; min-height: 100px; text-align: center}
#haut {position: relative}
#mybutton {position: absolute; left: 10px; top: 30px; z-index: 10;}
#banniere {display: block; background: url("../images/bann.jpg"); text-decoration: none; height: 200px; position: relative}
#banniere p {position: absolute; top: 125px; color: #ffa; text-shadow: 2px 0 0 #800000, -2px 0 0 #800000, 0 2px 0 #800000, 0 -2px 0 #800000, 1px 1px #800000, -1px -1px 0 #800000, 1px -1px 0 #800000, -1px 1px 0 #800000; font-size: 4.5rem; left: 70px; font-weight: bold}
form[name="fchville"] {padding: 15px 10px 12px 10px; border: 1px solid lightgrey; box-shadow: 0 5px 10px #AAA; position: absolute; left: 660px; top: 150px; width: 550px; background: linear-gradient(#fff, #f2f2f2); z-index: 20}
form[name="fchville"] label {margin-right: 6px; font-weight: bold; font-size: 16px; color: #f60}
form[name="fchville"] input[type=text] {padding: 2px; width: 280px}
form[name="fchville"] input[type=submit] {padding: 3px 4px; margin-left: 10px}
form[name="fchville"] input[type=submit]:hover {cursor: pointer}
#selvilles {width: 280px; position: absolute; border: 1px solid grey; background-color: #fff; display: none; text-align: left; margin-left: 220px; line-height: 20px; margin-top: -25px; z-index: 100}
#selvilles p {margin: 0 3px; border-bottom: 1px dashed lightgrey; cursor: pointer; font-size: 14px}
#colleft {float: left; padding-left: 30px; width: 880px}
#colright {margin-left: 935px; width: 300px; padding-top: 30px}
.inv {display: none}
.cp {float: right}
.gris {background-color: #fafafa}
.grisfonce {background-color: #f5f5f5}
.nomsite {font-size: 16px; font-weight: bold; color: #f60}
#aecdv {text-align: center; border: 1px solid #aaa; margin-bottom: 10px; margin-top : 10px; padding: 3px; background-color: #f2f2f2}
#aecdv img {vertical-align: middle; margin-right: 20px}
.tabnotes {border: 1px solid #aaa; width: 100%; margin-bottom: 10px}
.titretab {background: linear-gradient(#fff, #e6e6e6); padding: 5px; color: #f60}
.titretab p:first-child {color: #000}
.titretab select {margin-top: 5px}
.mini {font-weight: normal; font-size: 11px; color: #aaa}
.ville {padding: 3px 0}
.num  {width: 20px}
.note {width: 23px; padding-right: 5px}
.notengris {color: #aaa; font-size: 12px}
.date {padding-left: 5px}
#menu {height: 50px; width: 600px; margin-left: 10px}
#menu a {height: 18px; text-decoration: none; background: linear-gradient(#fff, #f2f2f2); padding: 5px 10px; border-right: 1px solid lightgrey; border-bottom: 1px solid lightgrey; border-left: 1px solid lightgrey; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; font-weight: bold; color: #000!important}
#menu a:hover {color: #f60!important; background: linear-gradient(#f2f2f2, #fff)}
.instructs {padding-top: 7px; font-size: 14px}
#footer {padding: 10px 0 10px 80px; background-color: #D3DCE3; height: 120px}
.aaa {color: #aaa}
#cookies {background-color: #d8d8d8; position: absolute; width: 100%; z-index: 20; font-size: 1.3em; text-align: center; padding: 5px 0}
#cookies a {margin-left: 10px}
#cookies button {padding: 0px 5px; margin-left: 50px; font-size: 1em}
#privacy {padding-top: 10px; position: absolute; right: 20px; z-index: 20}
#cpdh {min-height: 600px}
#dpdh {min-height: 600px}
#bas {clear: left; position: relative; height: 100px; padding-top: 10px}
#bas a {position: absolute; right: 100px; top: 30px; text-decoration: none; padding: 4px 7px; font-weight: bold; border: 1px solid lightgrey; background: linear-gradient(#fff, #f2f2f2); color: #000!important}
#bas a:hover {background: linear-gradient(#f2f2f2, #fff); color: #f60!important}
.flexdiv {display: flex; justify-content: space-around}

@media only screen and (max-device-width:480px) {
	#cookies {font-size: 1.1em; right: 0; width: 100%; text-align: center}
	#global {width: 100%}
	#pubhaut {width: 100%; position: fixed; top: 0px}
	#banniere {background: no-repeat url("../images/bannmob.jpg"); background-size: 100% 200px}
	#banniere p {font-size: 3rem; left: 40px}
	#menu {width: 100%; margin-left: 0}
	#menu a {padding: 6px; height: 16px}
	form[name="fchville"] {position: relative; top: 0; left: 0; width: 330px; margin-left: auto; margin-right: auto; padding: 10px}
	#selvilles {margin-left: 0}
	#colleft {float: none; margin-top: 30px; width: 100%; padding-left: 0;}
	.tabnotes {width: 300px; margin: 20px auto}
	#nbnotes, #podium, #mcltcrit {margin-right: auto; margin-left: auto}
	#bas {width: 100%; text-align: center; height: 0} /* j'ai changé height pour sticky, 0 au lieu de auto*/
	#footer {padding: 10px; margin-top: 10px; height: 150px} /* pour sticky ai ajouté height */
	#footer p {text-align: center}
	#aecdv {margin: 20px auto 0 auto; width: 300px}
}