/* CSS Document */



.arrondi{
			border:1px solid #CCCCCC;
        	-moz-border-radius: 10px;
        	-webkit-border-radius: 10px;
        	border-radius: 10px;
			padding: 10px;

      }
.arrondi-centre {
			border:1px solid #CCCCCC;
        	-moz-border-radius: 10px;
        	-webkit-border-radius: 10px;
        	border-radius: 10px;
			width:46%; 
			padding: 10px;
			margin-left:250px; 
      }

.arrondi-gauche {
			border:1px solid #CCCCCC;
        	-moz-border-radius: 10px;
        	-webkit-border-radius: 10px;
        	border-radius: 10px;
			float:left; 
			width:46%; 
			padding: 10px;
			height :500px ;
      }

	.arrondi-droite {
				border:1px solid #CCCCCC;
	        	-moz-border-radius: 10px;
	        	-webkit-border-radius: 10px;
	        	border-radius: 10px;
				float:right; 
				width:46%; 
				padding: 10px;
				height :500px ;
	      }
	.arrondi-gauche-2 {
				border:1px solid #CCCCCC;
	        	-moz-border-radius: 10px;
	        	-webkit-border-radius: 10px;
	        	border-radius: 10px;
				float:left; 
				width:300; 
				padding: 10px;
				height : 560;
	
	      }

	.arrondi-droite-2 {
				border:1px solid #CCCCCC;
	        	-moz-border-radius: 10px;
	        	-webkit-border-radius: 10px;
	        	border-radius: 10px;
				float:right; 
				width:600; 
				padding: 10px;
				height : 560;
				
	      }


body         {
	font-family: Verdana;
/*	color:#0A50A1;*/
	color:#000000;
	font-size:8pt;
	margin: 0px;
	/*  display: flex;
  flex-direction: column;
  justify-content: center;*/
}
.titrecorps1 { font-size: 8pt; font-weight: bold }
.body2       {
	font-size: 8pt;
	text-align: justify;
	margin: 0px;

}



/*.input {color:#000000; background-color:#FFFFFF; font-size:10px;border-width:1pt}*/

/*a:link       { color: #FFFFFF;   text-decoration: none; }
a:visited    { color: #FFFFFF;   text-decoration: none; }
a:hover		 { color: #FF0000;   text-decoration: none; }*/
h2           { margin-right: 40 }
h1           { font-weight: bold }
h6           { font-weight: bold }

/*div.tabArea {
  font-family: Verdana;
	color: #FFFFFF;
	font-size:8pt;
}

div.bodylinkArea {
	font-family: Verdana;
	font-size:8pt;
}*/
a.bodylink { color: #000000;   text-decoration: none; }
a.bodylink:hover { color: #FF0000;   text-decoration: none; }


/*div.body2linkArea {
	font-family: Verdana;
	font-size:8pt;
}*/
a.body2link { color: #336600;   text-decoration: none; }
a.body2link:hover { color: #FF0000;   text-decoration: none; }

div.bodylinkuArea {
	font-family: Verdana;
	font-size:8pt;
}
a.bodylinku { color: #000000;  }
a.bodylinku:hover { color: #FF0000; }

/*
div.btn2Area {
  font-family: Verdana;
	color:#FFFFFF;
	font-size:8pt;
}*/

a.btn2 {
  background-color: #003300;  
  padding: 0px 1em;
  text-decoration: none;
  color: #FFFFFF;

}



a.btn2:hover {
  background-color: #00CC33;
  color: #FFFFFF;
}


a.btn2.activebtn, a.btn2.activebtn:hover, a.btn2.activebtn:visited {
  background-color: #c0c0c0;
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 0px 1em;
}

div.btn3Area {
  	font-family: Verdana;
	color: #FFFFFF;
	font-size:8pt;
	width : 150;
	background-color: #003300; 
}

a.btn3 {
   	color: #FFFFFF; 
  	width : 150;
  	background-color: #003300; 
	text-decoration: none;
}

a.btn3:link {
   	color: #FFFFFF; 
  	width : 150;
  	background-color: #003300; 
	text-decoration: none;

}

a.btn3:hover {
  background-color: #00CC33;
  color: #FFFFFF;
}


a.btn3.activebtn, a.btn2.activebtn:hover, a.btn2.activebtn:visited {
  
  background-color: #c0c0c0;
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 0px 1em;
}

/*div.btn4Area {
  	font-family: Verdana;
	color: #FFFFFF;
	font-size:8pt;
	width : 150;
	background-color: #003300; 
}*/

a.btn4 {
   	color: #FFFFFF; 
  	width : 57;
  	background-color: #003300; 
	text-decoration: none;
	text-align: center;
}

a.btn4:link {
   	color: #FFFFFF; 
  	background-color: #003300; 
	text-decoration: none;

}

a.btn4:hover {
  background-color: #00CC33;
  color: #FFFFFF;
}


a.btn4.activebtn, a.btn4.activebtn:hover, a.btn4.activebtn:visited {
  
  background-color: #c0c0c0;
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 0px 1em;
}

label
{

    display: block; /* La balise devient de type block. */
    width: 100%;
	margin-top: 5;
	font-size:8pt;

}

/*==============================*/
/* partie commune               */
/*==============================*/
input[type=range].custom-slider.custom-slider-bullet {
  height: 1em;
  color: #FFF;
  background: transparent;
  background-image: linear-gradient(to bottom, #FFF, #999, #FFF);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 25%;
}
/*==============================*/
/* le curseur                   */
/*==============================*/
input[type=range].custom-slider.custom-slider-bullet::-webkit-slider-thumb {
  width: 1em;
  padding: 0.25em;                                              /* largeur du bord */
  border: 1px solid #888;
  border-radius: 50%;
  box-shadow: 0 0 .5em #FFF inset;
  background: linear-gradient(#888, #FFF) content-box,          /* le centre */
              linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
}
input[type=range].custom-slider.custom-slider-bullet::-moz-range-thumb {
  width: 1em;
  height : 0.5em;
  padding: 0.25em;                                              /* largeur du bord */
  border: 1px solid #888;
  border-radius: 50%;
  box-shadow: 0 0 .5em #FFF inset;
  background: linear-gradient(#888, #FFF) content-box,          /* le centre */
              linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
}
input[type=range].custom-slider.custom-slider-bullet::-ms-thumb {
  width: 1em;
  padding: 0.25em;                                              /* largeur du bord */
  border: 1px solid #888;
  border-radius: 50%;
  box-shadow: 0 0 .5em #FFF inset;
  background: linear-gradient(#888, #FFF) content-box,          /* le centre */
              linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
}



.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 100% */
-webkit-transform:scale(2); /* Safari et Chrome */
-moz-transform:scale(2); /* Firefox */
-ms-transform:scale(2); /* Internet Explorer 9 */
-o-transform:scale(2); /* Opera */
transform:scale(2);
}

.zoom2 {
width: 40px;
height: 60px;
}

.zoom3 {
width: 180px;
height: 240px;
}
.image2 {
width: 100%;
height: 100%;
}
.image2 img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */

transition: all 1.5s  ease;
}
.image2:hover img {
/* L'image est grossie de 100% */

transform:scale(3);
}

tr.liste:hover{
     background-color: #EEE8AA;
}
 
tr.liste{
     background-color: #FFFFFF;
 }
 
 
 .inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 280px;
  border-radius: 3px;
  overflow: hidden;
}
.inp .label {
  position: absolute;
  top: 26px;
  left: 12px;
  font-size: 16px;
  color: grey;
  font-weight: 500;
  transform-origin: 0 0;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease;
  pointer-events: none;
}
.inp .focus-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
}
.inp input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 16px 12px 0px 12px;
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  background: 000;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: #000;
  transition: all 0.15s ease;
}
.inp input:hover {
  background: rgba(0, 0, 0, 0.04);

}
.inp input:not(:-moz-placeholder-shown) + .label {
  color: rgba(0, 0, 0, 0.5);
  transform: translate3d(0, -20px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder) + .label {
  color: rgba(0, 0, 0, 0.5);
  transform: translate3d(0, -20px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown) + .label {
  color: rgba(0, 0, 0, 0.5);
  transform: translate3d(0, -20px, 0) scale(0.75);
}
.inp input:focus {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
  box-shadow: inset 0 -2px 0 000;
}
.inp input:focus + .label {
  color: 000;
  transform: translate3d(0, -20px, 0) scale(0.75);
}
.inp input:focus + .label + .focus-bg {
  transform: scaleX(1);
  transition: all 0.1s ease;
}



.container {
      width: 100%;
      margin: 10px 0px 100px; 
	  
  }

  .progressbar {
      counter-reset: step;
  }
  .progressbar li {
      list-style-type: none;
      width: 33%;
      float: left;
      font-size: 10px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
	   font-weight: bold;
	  
  }
    .progressbar li.past {
		 color: green;
  }
  
      .progressbar li.past:before {
      content: "\002713";
	  border-color: #55b776;
	   transform: rotate(360deg);
	  transition: all 0.5s ease;
  }
  
        .progressbar li.past +li:after {

	  background-color: #55b776;
  }
  
  .progressbar li.active:before {
      font-weight: bold;
	  border-color: #55b776;
	  	  transform: rotate(360deg);
		  transition: all 0.5s ease;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  
      .button {
      padding: 10px 20px;
      margin:10px 4px;
      color: black;
	  background-color: limegreen;
      font-family: sans-serif;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      border:0px solid ;
	    border-radius: 10px;
		content: "\8594";
      }
      .button::before{
      content: "\8594";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      -webkit-transform: scaleY(.1);
      transform: scaleY(.1);
      transition: all .4s
      }
      .button:hover{
      color: black;  
	  background-color: lime;
	   box-shadow:  1px 1px rgba(0, 0, 0, 0.3);
      }
	  
	  
  }