label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 1.2rem;
  padding: 2px 5px;
}

.formfield-select {
	position: relative;
}

.formfield-select–container {
	position: relative; 
	
	background-color: #fff;
	border: #777 1px solid;
	margin: 0 0 1.5em 0;
	
	overflow: hidden; 
	/* 
		Le select natif pourra 
		dépasser sans être vu 
	*/
	
	.formfield-select–container select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: 110%; 
	/* 
		On est sûr de ne plus voir
		la flèche native 
	*/
	
	height: auto;
	border: 0; 
	margin: 0;
	padding: .75em;
	border-radius: 0;
	

	overflow: hidden;
	text-overflow: ellipsis;
	/* 
		On empêche le texte d’aller
		jusqu’au bout s’il est trop long
	*/

a img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: transform 0.3s;
}
a img:hover{
opacity:0.7;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transform: scale(1.1);
}

#avertissement {
	display: none;
}
 @media only screen and (orientation:portrait) and (max-width: 591px) {
#wrapper {
	display: none;
}
#avertissement {
	display: block;
	opacity: 0.9;
	width: 100%;
	height: 100%;
}

 entetes
{
	width: 70%;
}	
}
 @media only screen and (orientation:landscape) and (max-width: 591px) {
#avertissement {
	display: none;
}
}


.text-clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

label, #toggle
{
    display: none;
}
 
@media all and (max-width: 791px), (orientation: portrait)
{
    nav
    {
        height: 60px;
    }
 
    div#main_pages 
    {
        display: none;

    }
	
	    td .affich 
    {
        display: none;

    }
	    table .affich 
    {
        display: none;

    }
	    affich 
    {
        display: none;

    }
 
    div .main_pages a {
        width: 50%;
    }
 
    label 
    {
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        cursor: pointer;
    }
 
    #toggle:checked + .main_pages {
        display: flex;
    }
#entetes
{
	width: 70%;
}	
	
}

body {
background:  #142a38;
font-size: 10pt;
width: 100%;
height : 100%;
font-family: trebuchet MS;
text-align: center;
     font: 1.2em "Verdana",Arial,sans-serif ;
}



 /* unvisited link */
a:link {
  color: darkblue;
}

/* visited link */
a:visited {
  color: darkblue;
}

/* mouse over link */
a:hover {
  color: gray;
}

/* selected link */
a:active {
  color: blue;
} 

input[type=submit], input[type=reset] {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

input[type=submit]:hover, input[type=reset]:hover {
     background-color: rgba(255, 0, 0, 1);
  color: #ffffff;
 }
input[type=submit]:active, input[type=reset]:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  color: #ffffff;
 } 

      
 input[type=submit], input[type=reset] {
  border: 0;
  line-height: 1.9;
  padding: 0 16px;
  font-size: 0.9rem;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: skyblue;
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px skyblue,
    inset -2px -2px 3px darkblue;
}

input[type=submit]:hover, input[type=reset]:hover {
     background-color: blue;
  color: #ffffff;
 }
input[type=submit]:active, input[type=reset]:active {
  box-shadow:
    inset -2px -2px 3px skyblue,
    inset 2px 2px 3px darkblue;
  color: #ffffff;
 } 


input[type=text] {
  height: 30px;
  padding: 8px 8px;
  margin: 10px 0;
  box-sizing: border-box;
   border:1px solid black;
 background-color:  #fef5da ;
      font: 1.2em "Verdana",Arial,sans-serif ;
}
      
      input[type=password] {
  height: 30px;
  padding: 8px 8px;
  margin: 10px 0;
  box-sizing: border-box;
   border:1px solid black;
 background-color:  #fef5da ;
      font: 1.2em "Verdana",Arial,sans-serif ;
}
      
      input[type=email] {
  height: 30px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
   border:1px solid black;
 background-color:  #fef5da ;
      font: 1.2em "Verdana",Arial,sans-serif ;
}

textarea  {
	
	  padding: 8px 8px;
  margin: 10px 0;
  box-sizing: border-box;
   border:1px solid black;
 background-color:  #fef5da ;
      font: 1.2em "Verdana",Arial,sans-serif ;
}

input[type=email] {
  height: 30px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
       font: 1.2em "Verdana",Arial,sans-serif ;
}
     
      
  
div.enhaut{
  background-color: #cccccc;
  color: white;
    width: 200px;
    height: 70px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid red;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.liste{
  background-color: #ffffff;
  color: black;
    width: 95%;
    height: 30px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
 font size: 14px;
    border: 1px solid red;
    border-radius: 6px;
    box-shadow: -1px 5px 10px black;
	opacity: 0.7;
}

div.nok{
  background-color: #FF6262;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}

div.ok{
  background-color: #95E8A1;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}

.entetes
{
	width: 70%;
}


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: inline; /* placement du menu, à modifier selon vos besoins */
top: 5px;
left: 10%;
}
#menu {
width: 80%;
align: center;
margin-left: 20px;
}
#menu dt {
cursor: pointer;
margin: 1px;
height: 19px;
line-height: 15px;
text-align: center;
vertical-align: middle;
font-weight: bold;
border: 2px solid black;
background: rgb(237, 219, 186);
}
#menu dd {
border: 1px solid gray;
vertical-align: middle;
}
#menu li {
text-align: center;
vertical-align: middle;
margin: 1px;
background: #f2f2f2;
border: 1px solid gray;
height: 22px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #ccc;
}




p,
label {
  font:
    1rem 'Fira Sans',
    sans-serif;
	  color: black;
}


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>




dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: inline; /* placement du menu, à modifier selon vos besoins */
top: 5px;
left: 10%;
}
#menu {
width: 80%;
align: center;
margin-left: 20px;
}
#menu dt {
cursor: pointer;
margin: 1px;
height: 19px;
line-height: 15px;
text-align: center;
vertical-align: middle;
font-weight: bold;
border: 2px solid black;
background: rgb(237, 219, 186);
}
#menu dd {
border: 1px solid gray;
vertical-align: middle;
}
#menu li {
text-align: center;
vertical-align: middle;
margin: 1px;
background: #f2f2f2;
border: 1px solid gray;
height: 22px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #ccc;
}