body {
  background: #FFFFFF;
  font: 2.5em Arial, sans-serif;
  color: #000000;
  
 
}

nav {
  position: fixed;
  top: 40px;
  left: 10px;
  border-radius: 30px;
  z-index: 10;
  background: #1fe0  ;
  font-size: 2.5rem;
  
}

ul {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  padding: 0 0px;
  list-style-type: none;
  li:not(:last-child) {
    margin-right: 40px;
	
  }
  li {
    
    padding: 0px;
    transition: background 0.2s;
    a {
      color: #000000;
	  background: #ffac58;
      border: 15px solid #ffac58;
      border-right: 15px solid #ffac58;
      border-bottom: 15px solid #ffac58;
      border-radius: 30px;
      text-decoration: none;
      transition: color 0.2s;
    }
    ul {
	  color: #000000;	
      visibility: hidden;
      opacity: 0;
      position: absolute;
      display: block;
      margin: 12px -12px;
      padding: 0;
      background: #1fe0;
      border: 5px solid #ffffff;
      border-right: 0px solid #1fe0;
      border-bottom: 5px solid #1fe0;
      transition: opacity 0.2s, visibility 0.2s;
      li {
        margin: -2px 0 0 -2px;
        width: calc(100% - 20px);
        line-height: 2.5;
        a {
      color: #000000;
	  background: #F7DC6F ;
      border: 15px solid #F7DC6F ;
      border-right: 15px solid #F7DC6F ;
      border-bottom: 15px solid #F7DC6F ;
      border-radius: 30px;
      text-decoration: none;
      
    }
      }
    }
    &:hover {
	
      background: #1fe0;
	  
     
      a {
        color: #ffffff;
      }
      ul {
		color: #000000;
        visibility: visible;
        opacity: 1;
        box-shadow: 0px 0x 0px 0px #1fe0;
        li {
          a {
            color: #000000;
			 &:hover {
			color: #ffffff;
			}
          }
        }
      }
    }
  }
}

@keyframes slide-in {
  0% {
    top: -50px;
  }
  40% {
    top: 20px;
  }
  70% {
    top: 10px;
  }
  100% {
    top: 15px;
  }
}
#contenu2 {

	background: #fff;
	width: 100%; 
	position: relative;
	top: 120px;
	height: 1200px;
	z-index: 5;
	margin: 0px 0px 0px 0px;
	font: 1.0em Arial, sans-serif;
	color: #000000;
}

a {
	color: #ffa500;
	text-decoration: none;
}
	a:hover {
		color: #808080;
	
	
}
h2 {
	font-size: 15px; 	
}
#cadre { /* taille du cadre, à titre d'exemple */
position: relative;
width: 950px ;
background-color: #c0c0c0;
margin-left:auto;
margin-right:auto;

}
#cadregenre { /* taille du cadre, à titre d'exemple */
position: relative;
width: 400px ;
background-color: #c0c0c0;
margin-left: 5px;
margin-right: auto;

}
#cadregenre2 { /* taille du cadre, à titre d'exemple */
position: relative;
width: 400px ;
background-color: #c0c0c0;
top: -125px;
margin-left: 500px;
margin-right:auto;

}
#tourgris {
   opacity: 10;
   z-index: 0;
   position: relative;
   width: 100px;
   height: 80px;
   top: -150px;
   left: 800px;
   border: 0px dashed #990000;
   background-color: #DCD4D2;
   text-align: left;
   padding-left: 10px;
}
   
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(../hautgauche.gif);
}
#hautdroit {
float: right;
background: url(../hautdroit.gif);
}
#basgauche {
background: url(../basgauche.gif);
}
#basdroit {
float: right;
background: url(../basdroit.gif);
}
     
#contenu p {
color: white;
margin: 0 0.5em; /*gestion des espaces interparagraphes */

}
#contenu a {
}
  p {
 font-size:38px;
 
}

DIV.ascensseurhori {
BORDER-RIGHT: black 0px inset; BORDER-TOP: black 0px inset; OVERFLOW-Y: hidden; OVERFLOW-X: scroll; BORDER-LEFT: black 0px inset; WIDTH: 95%; BORDER-BOTTOM: black 0px inset; HEIGHT: 380px; background-color: #ffffff; scrollbar-face-color: #c0c0c0; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #C0C0C0; scrollbar-darkshadow-color: #646464; scrollbar-track-color: #DDDDDD; scrollbar-arrow-color: #000000;

}
#zonebas { 
background-color: #fe642e;
height: 100%;
font-size:20px;
}
DIV.ascensseurdesclef {
BORDER-RIGHT: black 0px inset; BORDER-TOP: black 0px inset; OVERFLOW-Y: hidden; OVERFLOW-X: scroll; BORDER-LEFT: black 0px inset; WIDTH: 42%; BORDER-BOTTOM: black 0px inset; HEIGHT: 380px; background-color: #ffffff; scrollbar-face-color: #c0c0c0; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #C0C0C0; scrollbar-darkshadow-color: #646464; scrollbar-track-color: #DDDDDD; scrollbar-arrow-color: #000000;
}
div#colonne1 {
    float: left;
    width: 305px;
    }
div#colonne2 {
    float: left;
    width: 305px;
    }
div#centre {
    float: left;
    width: 305px;
    }
#cle1 {
   height: 30px;
   position: relative;
   top: -60px;
   left: 0px;
   border: 0px dashed #ffffff;
   padding-left: 5px;
}
#expression {
   border-radius: 30px;
   display: content;
   opacity: 10;
   z-index: 0,33;
   position: fixed;
   width: 0px;
   height: 0px;
   top: 1560px;
   left: 5px;
   border: 0px dashed #990000;
   background-color: #ffac58;
   padding-left: 0px;
}
#expression2 {
   border-radius: 30px;
   display: content;
   opacity: 10;
   z-index: 0,33;
   position: fixed;
   width: 0px;
   height: 0px;
   top: 660px;
   left: 430px;
   border: 0px dashed #990000;
   background-color: #ffac58;
   padding-left: 0px;
}