body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  text-align: left;
  background-color: #343a40;
  
}


html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}




.button {
text-decoration: none;
padding: 10px;
font-family: verdana;
font-size: 1em;
color: #ffffff;
background-color: #b3d9eb;
border-radius: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: 2px groove #000000;
box-shadow: 1px 6px 8px #444444;
-webkit-box-shadow: 1px 6px 8px #444444;
-moz-box-shadow: 1px 6px 8px #444444;
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.button:hover {
padding: 10px;
color: #000000;
background-color: #f2f2f2;
border: 4px groove #000000;
box-shadow: 1px 6px 15px #7f7f7f;
-webkit-box-shadow: 1px 6px 15px #7f7f7f;
-moz-box-shadow: 1px 6px 15px #7f7f7f;
}

.button:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);

}




 /* unvisited link */
a:link {
  color: black;
    text-decoration: underline ; 
}

/* visited link */
a:visited {
  color: black;
    text-decoration: underline ; 
}

/* mouse over link */
a:hover {
  color: gray;
    text-decoration: none ; 
}

/* selected link */
a:active {
  color: gray;
    text-decoration: none ; 
} 






#progressbar
{
width:300px;
padding:2px;
background-color:white;
border:2px solid black;
text-align:center
}
#indicator0
{
width:0%;
background-color:green;
}
#indicator1
{
width:20%;
background-color:green;
}
#indicator2
{
width:40%;
background-color:green;
}
#indicator3
{
width:60%;
background-color:orange;
}
#indicator4
{
width:80%;
background-color:green;
}
#indicator5
{
width:100%;
background-color:red;
}



progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;

  width: 200px;
  height: 20px;
}






article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}



	table,
	td,
	code,
	pre,
	samp {
				-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word;
	}



    div#logo 
    {
        width: 60%;

    }

.containeur2{
  width: 60% ;
  text-decoration: none;
}

div.scrollmenu {
  background-color: #ccc;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  width:120px;
  border-weigth: 1px;
  border-color:white;
  border-style: solid;

 
}

div.scrollmenu a:hover {
  background-color: #777;  
}







.containaxel {
    margin: 0 auto;
    padding: 0 0px;
    max-width: 70%;
}

.navBar {
    background: #455A64;
	width: 80%;
	height: 80px;
	border-radius: 20px;
}

.nav {
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.nav > li > a {
    padding: 20px 0px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}






fieldset
{
  background-color:#CCC;
  max-width:80%;
  padding:16px;	
}











code {
  font-size: 1.1em;
  color: #ff214f;
  word-break: break-word;
  overflow-x: scroll;
  
}

a > code {
  color: inherit;
  overflow-x: scroll;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.1rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #ff5477;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: auto
  width: 400px;
  overflow-x: scroll;
}

.pre-scrollable {
  max-height: 300px;
  overflow-y: scroll;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.1em;
}

div.menuaxel{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.menuaxel2{
  background-color: #ffffff;
  color: black;
    width: 90%;
    height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #cccccc;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}











div.cats{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 110px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}


	.containeur
	{
	width: 80%;
	align: center;


#c2carrousel{text-align:center;}
#c2carrousel img{max-width:250px;max-height:250px;}
</style>









<style type="text/css">


.hljs {
  padding: 0.6rem 2rem;
  background: black;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  transition: all 0.2s;
}

.hljs:hover {
  border-color: #ff4754;
}


  



	
	
	html,table,td,pre,code,th,p,div,span,iframe{
	font-size: 14pt;	
		
	}
	

	
	table{
		
		
	}

	code,pre{
		
	width: 100%;	
	max-width: 500px;
	
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}

	

	.containeur
	{
	width: 70%;
	align: center;

	
	
		
	}	
	
	
	
	
}

  

.imagefond  {width: 100%; height: 100% }


body {
font-size: 25pt;
width: 100%;
height : 100%;
font-family: trebuchet MS;
 visibility : visible;
}


	code,pre{
		font-size: 13pt;
		
	}


     .box {
        width: 400px;
        height: 20px;
        border: 3px solid #cc0000;
        font-size: 25px;
        color: #000000;
        background-color: #cccccc;
opacity: 0.83;
    border-radius:0 17px 17px 0;
  box-shadow:inset 10px 0 0 rgba(255,255,255,.1),-10px 0 0 rgba(255,255,255,.1);

  /* CSS3 Browser */
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* IE only */
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  border-radius:7px;
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.7);


      }
	  

	.entetes
{
	width: 40%;
}




input[type=text] {
    padding:5px; 
    border:1px solid #FF6666; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}



.bouton_perso {
background:url('img/Valide.PNG');
}

button {
  display : inline-block;
  height : 55px;
  width : 210px;
  background-image : url(/img/bt.png);
  text-align : center; 
  vertical-align : top;
  filter : alpha(opacity=40);
  top : 0;
}


footer {
  text-align: center;
  padding: 0px;
  background-color: #CCCCCC;
  width: 100%;
  height: 280px;
  color: #000;
opacity: 0.83;
    vertical-align : top;
  
}

  
  .dropbtn {
  background-color: #f2f2f2;
  color: black;
    width: 80px;
  padding: 14px;
  font-size: 16px;
  border: 1px solid gray;
      box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.5);
}

.dropdown {
  position: relative;
  display: inline-block;
    font-size: 16px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #cccccc;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
    font-size: 16px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    font-size: 16px;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #ffffff;}

  


  
  

 
  
  
  
  
  
  
  
  
  
 html {
font-size: 16pt;

 }	 
  
  
.fond_table{
	
 background: rgb(255,255,255);
background: linear-gradient(139deg, rgba(255,255,255,1) 0%, rgba(244,244,247,1) 51%, rgba(235,231,179,1) 100%); }	
  
  

  
  


.fond_image{
display:inline-block;
}
.fond_image img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
}
.fond_image img:hover{
opacity:0.6;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
}



.loupe{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: transform 0.3s;
}
.loupe:hover{
opacity:0.9;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transform: scale(1.05);
}





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);
}








	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
	
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	

	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}

code, pre {
	width: 80%;
	  overflow: scroll;
  white-space: nowrap;
	
}








    div#logo 
    {
        width: 70%;

    }



.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 query pour les écrans de petite taille (smartphones) */

@media all and (max-width: 480px)
{
	
	
	
	
	
	.entetes
{
	width: 70%;
}
	
	
	
	
    nav
    {
        height: 60px;
    }
 
    div#main_pages 
    {
        display: none;

    }
	
    div#logo 
    {
        width: 70%;

    }	
	
	    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;
    }
	
	
	table .containeur
	{
	width: 95%;
	align: center;
	}
	
	
	body {

font-size: 22pt;
width: 95%;
height : 95%;
font-family: trebuchet MS;
 visibility : visible;
}

		/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
	
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	
.containeur2{
  width: 60% ;
  text-decoration: none;
}

div.scrollmenu {
  background-color: #ccc;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  width:120px;
  border-weigth: 1px;
  border-color:white;
  border-style: solid;

 
}

div.scrollmenu a:hover {
  background-color: #777;  
}







.containaxel {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 70%;
}

.navBar {
    background: #455A64;
	width: 80%;
	height: 80px;
	border-radius: 20px;
}

.nav {
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.nav > li > a {
    padding: 20px 0px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}






fieldset
{
  background-color:#CCC;
  max-width:80%;
  padding:16px;	
}











code {
  font-size: 1.1em;
  color: #ff214f;
  word-break: break-word;
  overflow-x: scroll;
  
}

a > code {
  color: inherit;
  overflow-x: scroll;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.1rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #ff5477;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: auto
  width: 400px;
  overflow-x: scroll;
}

.pre-scrollable {
  max-height: 300px;
  overflow-y: scroll;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.1em;
}

div.menuaxel{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.menuaxel2{
  background-color: #ffffff;
  color: black;
    width: 90%;
    height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #cccccc;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}











div.cats{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 110px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
	
	
	
	
}




/*#############################################################*/
/* Media query pour les écrans de taille moyenne (tablettes) */
@media screen and (min-width: 701px) and (max-width: 1224px) {
  
	.entetes
{
	width: 60%;
}
	
.containeur2{
  width: 60% ;
  text-decoration: none;
}

div.scrollmenu {
  background-color: #ccc;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  width:120px;
  border-weigth: 1px;
  border-color:white;
  border-style: solid;

 
}

div.scrollmenu a:hover {
  background-color: #777;  
}







.containaxel {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 70%;
}

.navBar {
    background: #455A64;
	width: 80%;
	height: 80px;
	border-radius: 20px;
}

.nav {
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.nav > li > a {
    padding: 20px 0px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}






fieldset
{
  background-color:#CCC;
  max-width:80%;
  padding:16px;	
}











code {
  font-size: 1.1em;
  color: #ff214f;
  word-break: break-word;
  overflow-x: scroll;
  
}

a > code {
  color: inherit;
  overflow-x: scroll;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.1rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #ff5477;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: auto
  width: 400px;
  overflow-x: scroll;
}

.pre-scrollable {
  max-height: 300px;
  overflow-y: scroll;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.1em;
}

div.menuaxel{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.menuaxel2{
  background-color: #ffffff;
  color: black;
    width: 90%;
    height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #cccccc;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}











div.cats{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    height: 110px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}


div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  width: 70%;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}






	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
	
		word-wrap: break-word; /* passage à la ligne forcé */
	}












hr {
    border: 0;
    height: 5px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}





.button {
text-decoration: none;
padding: 10px;
font-family: verdana;
font-size: 1em;
color: #ffffff;
background-color: #b3d9eb;
border-radius: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: 2px groove #000000;
box-shadow: 1px 6px 8px #444444;
-webkit-box-shadow: 1px 6px 8px #444444;
-moz-box-shadow: 1px 6px 8px #444444;
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.button:hover {
padding: 10px;
color: #000000;
background-color: #f2f2f2;
border: 4px groove #000000;
box-shadow: 1px 6px 15px #7f7f7f;
-webkit-box-shadow: 1px 6px 15px #7f7f7f;
-moz-box-shadow: 1px 6px 15px #7f7f7f;
}

.button:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);

}




.image {
width: 95%;
height: 95%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1.5s ease; /* Safari et Chrome */
-moz-transition: all 1.5s ease; /* Firefox */
-ms-transition: all 1.5s ease; /* Internet Explorer 9 */
-o-transition: all 1.5s ease; /* Opera */
transition: all 1.5s ease;
	background-image: linear-gradient(#787878, #888 50%, #cc0000 50%,#666);
	    margin-left: auto;
    margin-right: auto;
    border-radius: 10px 10px 10px 10px;
			border:8px solid #cccccc;

}
.image:hover img {
/* L'image est grossie de 75% */
-webkit-transform:scale(2.25); /* Safari et Chrome */
-moz-transform:scale(2.25); /* Firefox */
-ms-transform:scale(2.25); /* Internet Explorer 9 */
-o-transform:scale(2.25); /* Opera */
transform:scale(2.25);
	background-image: linear-gradient(#787878, #888 50%, #cc0000 50%,#666);
	    margin-left: auto;
    margin-right: auto
	    border-radius: 10px 10px 10px 10px;
		border:8px solid  #000000;

}





 /* unvisited link */
a:link {
  color: black;
    text-decoration: none ; 
}

/* visited link */
a:visited {
  color: black;
    text-decoration: none ; 
}

/* mouse over link */
a:hover {
  color: gray;
    text-decoration: none ; 
}

/* selected link */
a:active {
  color: gray;
    text-decoration: none ; 
} 



.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #EDFAFD;
}

}


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: 6px;
  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: #6192c0;
  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: 0px 0px;
margin-top: 15px;
   border:1px solid blue;
  font: 1.4em "Verdana",Arial,sans-serif ;
 background-color: #fff3cd ;
}

textarea  {
	
	  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
   border:1px solid blue;
 background-color: #fff3cd ;
   font: 1.0em "Verdana",Arial,sans-serif ;
}

input[type=email] {
  height: 30px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
}

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;
}



.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

/*#############################################################*/
/* Media query pour les écrans de taille moyenne (tablettes) */
@media screen and (min-width: 1225px) and (max-width: 100224px) {
  
	.entetes
{
	width: 40%;
}
}