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

nav {
  position: absolute;
  width: 95%;
  border-radius: 30px;
  z-index: 10;
  background: #ffac58  ;
  font-size: 1.7rem;
  
}

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }

        nav ul li {
            position: relative;
        }

        nav a {
            color: black;
            text-decoration: none;
            padding: 14px 20px;
            display: block;
        }

        /* Sous-menu */
        .submenu {
            display: none;
            position: absolute;
			border-radius: 30px;
            top: 100%;
            left: 0;
            background-color: #ffac58;
            min-width: 200px;
            z-index: 10;
			font-size: 1.4rem;
        }

        .submenu a {
            padding: 10px;
			border-top: 300px ;
        }

        /* Afficher le sous-menu au survol */
        nav ul li:hover .submenu {
            display: block;
			box-shadow: 5px 5px 5px 5px #FFFFFF;
        }

        /* Styles pour les petits écrans */
        @media (max-width: 500px) {
            nav ul {
                flex-direction: column;
                align-items: center;
            }

            nav ul li {
                width: 100%;
                text-align: center;
            }

            /* Sous-menu pour petits écrans */
            .submenu {
                position: static;
                width: 100%;
            }

            .submenu a {
                text-align: left;
                padding: 14px;
                border-top: 1px solid #555;
            }

            /* Quand on clique sur l'onglet 1 sur petit écran */
            #submenu-toggle:checked + ul .submenu {
                display: block;
            }

            /* Masquer les sous-menus par défaut sur petits écrans */
            .submenu {
                display: none;
            }

            /* Toggle pour afficher les sous-menus */
            #submenu-toggle {
                display: none;
            }

            /* Affichage du toggle */
            .submenu-toggle {
                display: none;
            }

            .menu-item-1 {
                position: relative;
            }

            /* Lorsque le sous-menu doit apparaître sous l'onglet 5 */
            #submenu-toggle:checked + ul li:nth-child(5) + li .submenu {
                display: block;
            }
        }

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

	background: #fff;
	width: 100%; 
	position: relative;
	top: 80px;
	height: 6200px;
	z-index: 5;
	margin: 0px 0px 0px 0px;
	font: 1.7em 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: 800px ;
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:1.7rem;

}

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: 266px; 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: 95%; BORDER-BOTTOM: black 0px inset; HEIGHT: 266px; 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: -100px;
   left: 0px;
   border: 0px dashed #ffffff;
   padding-left: 5px;

}
#expression {
   border-radius: 30px;
   display: content;
   position: fixed; /* Positionnement fixe par rapport à la fenêtre */
            bottom: 200px;    /* 20px depuis le bas */
            right: 30px;     /* 20px depuis la droite */
            width: 600px;    /* Largeur de la div */
            height: 100px;   /* Hauteur de la div */
            color: white;    /* Couleur du texte */
            display: flex;
			z-index: 2;
            justify-content: center;
            align-items: center;
            font-size: 20px;
}
#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;
}

