/* Commentaire en CSS. Pour ne pas executer une commande css rajouter "!" devant  */
	/************************************************
	*												*
	*				MENU DU HAUT					*
	*												*
	*************************************************/
.topnav {
	z-index:50;
    background-color: rgba(254, 253, 224, 1); /*fond de couleur du menu haut */
    overflow: hidden;
	text-align:center;
	line-height: 40px; 
}
.topnav a {
	z-index:50;
    float: middle;
    !display: block;
    color: black;
    text-align: center;
    padding: 0px 20px;
    text-decoration: none;
    font-size: 20px;
	font-family: 'Dancing script', cursive;
	!width:80px;
	!height: 40px;
	!line-height: 40px;  
	text-decoration: none;
}
.topnav a:hover {
    !background-color: #1f4d79; transition:0.4s;
    color:green;   text-decoration:underline;
	!padding: 0px 20px;
	!border-radius: 5px 5px 5px 5px;
	!-moz-transition: all 1s ease;
	font-family: 'Dancing script', cursive;
}
.topnav .icon {
    display: none;
}
/* responsivité du menu */
@media screen and (max-width: 1200px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 1200px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}
	/************************************************
	*												*
	*				MISE EN PAGE GLOBALE			*
	*												*
	*************************************************/
#activer{color:green; text-decoration:underline;}
.ref{color: green;}.ref:hover{color:rgb(22,78,28)}
.refl{color:white;}.refl:hover{color:grey;}.refl1{color:black;}.refl1:hover{color:grey;}
.popn{color : #ce112d;}.popn:hover{color:black;}
.green{color: green ;}
.black{color: black;}
#antica{font-family:Book antica;}
#h2form{
	text-align:center; position:relative;
}
#presentation /* placement de qui suis je sous le logo taupette */
{
	position:absolute; 
	top: 130%; left: 23%;
}
p{
	color:black;
	font-size:115%;
	font-family: 'Dancing script', cursive;
}
article{
	position:relative; z-index: 4;
	!top:2%;
	!left:15%;
	min-height:750px;
	!width:80%;
	background: rgba(254, 253, 224, 0.9);
	max-width: 90%;
	margin: 0 0 14% 5%;
	margin-bottom:1%;
	!padding-left:8%;
	!border-radius: 10px 10px 10px 10px;
	animation: fadein 1s;
	-moz-animation: fadein 1s; /* Firefox */
}
.art{	
	position:absolute; z-index: 4;
	!top:8%; !bottom:1%; text-align:center; !margin-left:50px; !padding-right:24%;
	!left:15%;
	!min-height:750px;	!max-height:150%;	/*Hauteur de la totalité d'un carré d'article */
	width:90%;
	!background: rgba(254, 253, 224, 0.9);  /*couleur du fond de l'article modifier avec rgb ou rgba (a pour opacité) ou #*/ 
	max-width: 90%;
	margin: 0 0 14% 5%;
	margin-bottom:1%;
	!padding-left:8%;
	!border-radius: 10px 10px 10px 10px; !padding-bottom:5%; /* Marge en fin d'article */
	animation: fadein 1s;
	-moz-animation: fadein 1s; /* Firefox */
}
@keyframes fadein {
	from {opacity:0; !bottom:-500px;}
    to {opacity;1; !bottom:0px;}
}
@-moz-keyframes fadein { /* sur Firefox */
    from {opacity:0; !bottom:-500px;}
    to {opacity:1; !bottom:0px;}
}
h1{
	position:relative;	!top:-10px; color: #ce112d;
	text-align:center; font-family: 'Dancing script', cursive;
	font-size:200%;
}
h2{text-align:center; color: #ce112d; }
.pla {top:-20px; }
h8{
	position:relative;
	text-align:center; font-family: 'Dancing script', cursive;
}
.toph{top:20px;}
	/************************************************
	*												*
	*				PAGE PRESENTATION				*
	*												*
	*************************************************/
/* Mise en page 1er article page Presentation */
/* Photo du portfolio */
#idx{color:#009fc7; text-decoration:underline;}
#taupG{
	z-index:6;
	width:17%;
	position:relative; left:2%; !top:500px:
}
#taupD{
	z-index:6;
	width:17%;
	position:relative; left:88%; !top:500px:
}
#berry{position:absolute; left:2%; top:250px;}
#logobio{position:absolute; left:83%; bottom:7%;}
.mise_en_page{top:32px; !left:45%; position:absolute; text-align:center; padding-left:24%; 
background:rgba(254, 253, 224, 0.9); padding-right:24%; !height:1500px;}
.hum{background: blue; position:relative; height:auto; width:1900px;}
.parag2{!top:20px;!left:45%;position:absolute; text-align:center; !padding-top:5%; padding-left:24%; padding-right:24%;}
#env{top:40%;  position: absolute; float:middle; }
#taupetG{
	position:relative; z-index:5; opacity:1; transition:0,8s;
	max-width:320px; top:80px;
	width:100%; !background-color: rgba (254, 253, 224, 0.9);
	height:auto; border-radius: 50% 50% 50% 50%;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
}
#taupetG:hover{opacity:0; transition:0.5s}
#taupetG2{
	position:relative; z-index:5; opacity:1; transition:0,8s;
	max-width:320px; top:0px; margin-bottom:10%;
	width:100%; !background-color: rgba (254, 253, 224, 0.9);
	height:auto; border-radius: 50% 50% 50% 50%;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
}
#taupetD{
	position:absolute; z-index:5; opacity:1; transition:0,8s;
	max-width:320px; top:80px; left:465%;
	width:100%; !background-color: rgba (254, 253, 224, 0.9);
	height:auto; border-radius: 50% 50% 50% 50%;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
}
#moi2{
	position:absolute; z-index:1; left:0%;
	max-width:320px; top:80px;
	width:100%;
	height:auto; border-radius: 50% 50% 50% 50%;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
}
#cvp{position:relative; z-index:50; top:30px;}
.cv{position:relative; left:5%; width:10%; height:auto; transition:0.5s;}
.cv:hover{left:4%; width:12%; transition:0.5s;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
	box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);}
#cesi {
	position:relative; height:auto; width:38%; top:70px; !left:0%; 
	z-index:10; background:white;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#cesi:hover{
	width:40%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
	box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
}
#essi {
	position:relative; height:auto; width:40%; top:70px; float:right; 
	z-index:10; background:white;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}	
#essi:hover{
	width:42%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
	box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
}
/* intégration carte google map bar le duc  */
iframe {
	position:relative; z-index:10;
    width:100%;
    !height:100%;
	!left:40%;
	top:100px;
}
#bld{
	position:relative;
	width:auto; height:100%; !text-align:center;
}
/* style paragraphe de présentation */
#phome{
position:absolute; text-align:center; padding-left:24%; padding-right:24%; top:10%;}
#phome2{
	position:absolute; z-index:10; top: 200px ;left:25%; !height:10%; width:70%;
	!background:red; font-family: 'Dancing Script', cursive;
}
	/************************************************
	*												*
	*				PAGE PARCOURS					*
	*												*
	*************************************************/
.dateforme{position:absolute;  z-index:10; height:auto; width:6%; left:3%;
	padding-top:80px; max-width:90px; min-width:30px;}
.dateforme2{position:absolute;  z-index:10; height:auto; width:6%; left:3%;
	padding-top:80px; max-width:90px; min-width:30px;}
.lienpro{position:absolute;  z-index:100; height:auto; width:15%; left:82%;
	padding-top:5px; transform:0.5s; max-width:260px; !min-width:200px;}
.lienpro:hover{width:16%; left:81%; transition:0.5s;}

#rts{position:relative; top:100px;} #poste{position:relative; top:200px;}
#evobus{position:relative; top:300px;}
#silor{position:absolute; height:auto; width:28%; left:70%; top:30%;}
#silor:hover{width:29%; left:69%;}

@media (max-width: 1500px) {.date!forme1{padding-top:120px;}}
@media (max-width: 1300px) {.datef!orme{padding-top:140px;}}
@media (max-width: 1200px) {.datef!orme{padding-top:160px;}}

.rectangle{position: relative; width:90%; left:5%; height:400px; 
!background:rgba(100, 100, 100, 0.8); !border:solid 1px;
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9); margin-bottom:20px; padding-top:1px; transition:0.5s;}
.rectangle:hover{transition:0.5s; width:95%; left:2.5%; height:410px;
	zoom:105%; background:#347c99;}
.h3form{
	text-align:center;
}
.pform{
	position:relative; top:15px; left:24%; !height:10%; width:60%;
	!background:red; padding-bottom:6%;
}
#pform2{position:absolute; top:5px;}
#form {position:relative; height:auto; width:40%;
z-index:10;}
#forme {position:relative; padding:1%; z-index:10; text-align:center;}
#CESI{
	position: absolute; z-index:10; width:18%; top:40%; left:80%;}
#CESI:hover{width:19%; left:79%;}
#cesiform{
	position:relative; height:auto; width:100%;
	z-index:10;
}
#richier{
	position: absolute; z-index:10; width:18%; top:30%; left:80%;
}
@media (max-width: 1400px) {.pform{left:20%;}.lienpro{padding-top:20px;}}
@media (max-width: 1200px) {.pform{left:15%; font-size:14px;}.h3form{font-size:16px;}#silor{left:35%; top:65%;}}
@media (max-width: 1000px) {.pform{left:10%; width:70%;}.lienpro{padding-top:140px;}#rts{top:50px;}#poste{top:100px;}#evobus{top:150px;}}
@media (max-width: 800px) {.pform{width:75%;}#CESI{top:10%; left:40%;}#richier{top:10%; left:40%;}}
@media (max-width: 700px) {.pform{font-size:12px;}#CESI{top:20%; left:40%;}.dateforme{padding-top:160px;}.dateforme2{padding-top:220px;}}
@media (max-width: 550px) {#richier{top:15%; left:40%;}}
@media (max-width: 400px) {.pform{font-size:10px;}#richier{top:20%; left:40%;}}
@media (max-width: 300px) {.pform{font-size:9px;}#silor{top:80%;}}
	/************************************************
	*												*
	*				PAGE COMPETENCES				*
	*												*
	*************************************************/
#cpt{color:#009fc7; text-decoration:underline;}

.gauche2{position:absolute; top:12%; width:50%; height:70%; !background:red;}
.droite2{position:absolute; top:12%; left:50%; width:50%; height:70%; !background:blue;}
.gauche3{position:absolute; top:-20%; width:50%; height:70%; !background:red;}
.droite3{position:relative; top:0px; left:50%; width:50%; height:70%; !background:blue; min-height:150px;}
.descendre{position:relative; margin:2%;}
#microsoft{position:relative; left:25%;}
#linux{position:relative; left:25%; top:40%; line-height:22px;}
#imicro{position:absolute; width:18%; height:auto; !left:-100px; !top:10px;}
#ilinux{position:absolute; width:18%; height:auto; !top:0px; !left:-10px;}
#mcrsft{position:relative; left:10%; top:20px;}
#linx{position:relative; left:60%;top:-225px; background:red; max-width:800px;}
.micro{position:relative; top:-40px; left:150px;}
.hdroit{position:relative; !left:25%; text-align:center;}
progress{
width:20%; animation-name: prog; animation-duration: 3s;
    animation-delay: 0.1s;}
@keyframes prog {
	from {width:0%;}
    to {width:20%;}
}
.h3line{line-height:22px;}
.box{position:relative; left:25%; height:20px; !background:red;}
#part1{position:relative; left:10%; top:20px;}
#part2{position:relative; left:60%; top:-400px;}
.pa2{position:absolute; left:150px; !top:0px;}
.rectangle2{position: relative; width:90%; left:5%; height:600px; 
!background:rgba(100, 100, 100, 0.8); !border:solid 1px;
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9); margin-bottom:20px; padding-top:1px; transition:0.5s;}
.rectangle2:hover{transition:0.5s; width:95%; left:2.5%; height:610px;
	zoom:105%; background:#347c99;}
	
@media (max-width: 1500px) {#imicro,#ilinux{width:23%;}#linux,#microsoft{left:30%;}}
@media (max-width: 1450px) {#imicro,#ilinux{width:24%;}}
@media (max-width: 1400px) {#imicro,#ilinux{width:25%;}}
@media (max-width: 1350px) {#imicro,#ilinux{width:26%;}}
@media (max-width: 1300px) {#imicro,#ilinux{width:23%;}.h3line{line-height:10px;}.rectangle2{height:500px;}}
@media (max-width: 1250px) {#imicro,#ilinux{width:24%;}}
@media (max-width: 1200px) {#imicro,#ilinux{width:25%;}}
@media (max-width: 1150px) {#imicro,#ilinux{width:26%;}}
@media (max-width: 1100px) {#imicro,#ilinux{width:27%;}}
@media (max-width: 1050px) {#imicro,#ilinux{width:28%;}}
@media (max-width: 1000px) {#imicro,#ilinux{width:25%;}.h3line{line-height:0px;}progress{height:10px; width:50%;}.micro{top:0px; left:0px;!width:50%;}@keyframes prog {from {width:0%;}to {width:50%;}}.pa2{left:0px; top:20px;}.rectangle2{height:430px;}}.gauche2{top:18%;}.droite2{top:18%;}}
@media (max-width: 950px) {#imicro,#ilinux{width:23%;}}
@media (max-width: 900px) {#imicro,#ilinux{width:23%;}}
@media (max-width: 850px) {#imicro,#ilinux{width:23%;}}
@media (max-width: 500px) {#imicro,#ilinux{width:22%;}.h3line{font-size:16px;}.rectangle2{height:400px;}}
@media (max-width: 400px) {#imicro,#ilinux{width:22%;}.h3line{font-size:14px;}.rectangle2{height:350px;}}


	/************************************************
	*												*
	*				PAGE PRODUIT					*
	*												*
	*************************************************/
.cont1{position:absolute; width:50%; !max-height:100px; ; !background:red; top:50px; text-align:center; !padding-top:20px;}
.cont2{position:absolute; width:50%; left:50%; top: 50px; text-align:center;}
#prj{color:#009fc7; text-decoration:underline;}
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg); z-index:50;
	}

.flip-container, .front, .back {
	min-width:20px;
	min-height:500px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative; z-index:50;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	z-index:50;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	float:center; z-index:50;
}
.proj{
	position:relative; z-index:70; top:-70px;
	text-decoration:none; color:white;
	padding: 2% 8%; background: blue;
}
.proj:hover{
	position:relative; z-index:80; background: green;}
fieldset{
	display: block;
	margin-left: 8%;
	margin-right: 5%;
	!height: 300px;
	margin-bottom: 10%; 
	position:relative;
	!top:30px; float:top;
	text-align:center;
	height:auto; width:80%; border:none; transition: 1s;
}
fieldset:hover{
	transition: 1s;
	background:#347c99;
}
.colonne {
  column-count: 3;
  column-gap: 1px; top:30px;
  !margin: auto;
  position:relative;
}
@media (max-width: 1900px) {.flip-container, .front, .back { min-height:450px;}}
@media (max-width: 1800px) {.flip-container, .front, .back { min-height:430px;}}
@media (max-width: 1700px) {.flip-container, .front, .back { min-height:410px;}}
@media (max-width: 1600px) {.flip-container, .front, .back { min-height:390px;}}
@media (max-width: 1500px) {.flip-container, .front, .back { min-height:370px;}}
@media (max-width: 1400px) {.flip-container, .front, .back { min-height:350px;}}
@media (max-width: 1300px) {.flip-container, .front, .back { min-height:310px;}}
@media (max-width: 1200px) {.flip-container, .front, .back { min-height:285px;}}
@media (max-width: 1100px) {.flip-container, .front, .back { min-height:265px;}}
@media (max-width: 1000px) {.flip-container, .front, .back { min-height:245px;}.flip-container:hover .flipper{width:120%; height:auto; left:-10%;}fieldset {width:70%;}}
@media (max-width: 900px) {.flip-container, .front, .back {	min-height:220px;}}
@media (max-width: 800px) {.flip-container, .front, .back {	min-height:195px;}.proj{top:-60px}}
@media (max-width: 700px) {.flip-container, .front, .back {	min-height:170px;}.proj{top:-50px}}
@media (max-width: 600px) {.flip-container, .front, .back {	min-height:150px;}.proj{top:-45px}}
@media (max-width: 500px) {.flip-container, .front, .back {	min-height:130px;}.txtresp{font-size: 14px;}.proj{font-size: 14px;}} 
@media (max-width: 450px) {.flip-container, .front, .back {	min-height:100px;}.txtresp{font-size: 12px;}.proj{font-size: 12px;}fieldset {width:60%;}}
@media (max-width: 400px) {.flip-container, .front, .back {	min-height:80px;}.txtresp{font-size: 8px;}.proj{font-size: 8px; top:-40px}fieldset {width:58%;}}
@media (max-width: 300px) {.flip-container, .front, .back {	min-height:50px;}.txtresp{font-size: 7px;}.proj{font-size: 7px; top:-35px}fieldset {width:40%;}}
@media (max-width: 250px) {.flip-container, .front, .back {	min-height:50px;}.txtresp{font-size: 6px;}.proj{font-size: 6px;}}
	/************************************************
	*												*
	*				PAGE LOISIRS					*
	*												*
	*************************************************/
#lsr{color:#009fc7; text-decoration:underline;}

.rectangleresp{position: relative; width:90%; left:5%; !height:800px;
!background:rgba(100, 100, 100, 0.8); !border:solid 1px;
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9); margin-bottom:20px; padding-top:1px;
	padding-bottom:2%; transition:0.5s;}
.rectangleresp:hover{transition:0.5s; width:95%; left:2.5%; !height:810px;
	zoom:105%; background:#347c99;}
.archi1{position:relative; !background:red; text-align:center;}
.archi2{position:relative; !background:blue; text-align:center;}


.fermer{position:fixed; text-decoration:none; color:blue; width:100%;
	top:0px; float:right; z-index:201; font-size:25px;}
#retour{position:absolute; z-index:200; color:red;}
.tab div{
    display: none; 
}
.tab div:target {
    display: block; position:relative;
}
.imglsr{position:relative; margin:1%; width:30%; max-width:500px;
	-webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);}
.imglsr:hover{
	box-shadow: 0px 0px 15px 10px #000000; 
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);}
@keyframes zoom {
	from {transform:scale(1);}
    to {transform:scale(1.1);}
}
.grande{position:fixed; z-index:200; top:5%; left:10%; width:80%;
	 max-width:1920px;}
.fondnoir{position:fixed; width:500%; left:-300px; top:-500px; height:500%; z-index:199; background:rgba(0,0,0,0.9);}

	/************************************************
	*												*
	*				PAGE CONTACT					*
	*												*
	*************************************************/
#ctt{color:#009fc7; text-decoration:underline;}
.centrer {
	position: relative;
	text-align:center;
}
#pcontact {
	position: relative; margin-top:2%; text-align:center;
}

#contactez{
	width:80%; height:200px;
}
/* Menu latéral gauche */
.men_g{
	transition: 1s;
	top: 60px;
	position: fixed;
    width: 400px;
	height: 50px;
	background-repeat:no-repeat;
	background: url(../img/menug11.jpg);
	color: #ffffff;
	z-index:20;
	left: -370px;
	border-radius: 100px 100px 100px 100px;
	border: solid grey 1px;
}
.men_g:hover{
	transition: 1s;
	top: 60px;
	position: fixed;
    width: 200px;
	height: 80%;
/* 	background: #222035; */
	color: #ffffff	;
	z-index:5;
	left: 10px;
/* 	background-size:200px 600px; */
	background-repeat:no-repeat;
	background: url(../img/menug2.jpg);
	z-index:20;
	border-radius: 10px 10px 10px 10px;
}
.btn_men_g	{
	color: #ffffff;
	text-decoration: none;
}
.btn_men_g:hover{
	color:#347c99;
	text-decoration: underline;
}
footer{
	position:relative;
	top:70%; width:100%;
	text-align:center;
}
#pied{
color: white; text-align:center; font-family:book antica;
}

/* Mise en page et image de fond de site */
body{
	display:table;
	width:98%;
	background-image: url("../img/background_home.jpg");
	background-repeat:no-repeat;
	background-position:center;
	-webkit-background-position:center;
	background-attachment:fixed;
	-webkit-background-attachment:fixed;
	background-size:cover;
	-webkit-background-size: cover; color: black; font-family: 'Dancing script', cursive;
}
#top{position:absolute; top:-20px; left:10%;}
.facebook{ position:fixed; z-index:80; top:90%; right:5%; !padding:1%;
text-decoration:none; !text-align:center; !max-width:20px;}
#face {max-width:180px;}
.haut {position:fixed; z-index:100; top:90%; left:5%; padding:1%; color:white;
	background:black; text-decoration:none; !text-align:center; border:red;}
	
.haut:hover{position:fixed;
	background:#009fc7; z-index:20; 
	text-decoration:underline;}