form, legend, ol, li {
  margin: 0;
  padding: 0;
}


h3, h2.order{
text-align: center;
}

form#identification {
  background: #E2E2E2;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  width: auto;
}

form#identification legend {
  color: #384313;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px #c0d576;
}

form#identification fieldset fieldset legend {
  color: #111111;
  font-size: 13px;
  font-weight: normal;
  padding-bottom: 0;
}
form#identification select{
  background-color:#FFF;
}
.formfield-select {
	position: relative;
 }

.formfield-select--container {
	position: relative; 
	background-color: #fff;
	border: none;
	margin: 0 0 0 0;
	
	overflow: hidden;
 width:76%;
	/* 
		Le select natif pourra 
		dépasser sans être vu 
	*/
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}

.formfield-select--container select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

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

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

}

.formfield-select--container::after { 
	/* Le pointeur du select */
	content: '';
	position: absolute;
	top: 50%; 
	margin-top: -3px;
	right: .75em;  
	display: block; 
	width: 0; height: 0;
	border-color: transparent;
	border-top-color: #444; 
	border-width: 6px;
	border-style: solid;
	pointer-events: none;
}

form#identification ol li {
  background: #b9cf6a;
  background: rgba(255,255,255,.3);
  border-color: #e3ebc3;
  border-color: rgba(255,255,255,.6);
  border-style: none;
  border-width: 2px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  line-height: 30px;
  list-style: none;
  padding: 5px 10px;
  margin-bottom: 2px;
  
}

form#identification ol ol li {
  background: none;
  border: none;
  float: left;
 }
form#identification label {
  float: left;
  font-size: 13px;
  width: 15%;
  color:black;
}
form#identification fieldset fieldset label {
  background:none no-repeat left 50%;
  line-height: 20px;
  padding: 0 0 0 30px;
  width: auto;
}

form#identification input:not([type=radio]),
form#identification textarea {
  background: #ffffff;
  border: none;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -khtml-border-radius: 30px;
  border-radius: 30px;
  font-style: italic;
  outline: none;
  padding: 5px;
  width: 75%;
}

form#identification input:not([type=submit]):focus,
form#identification textarea:focus {
  background: #fff;
}
form#identification input[type=radio] {
  float: left;
  margin-right: 5px;
}
form#identification button {
 display:block;
 float:right;
 }


.obligatoire {
 color: red;
 font-size: small;
 }
.titrecommande{
  font-size: 1.5em;
  text-align:center;
}

@media screen and (max-width:800px) {
form#identification label {
  font-size: 10px;
}

form#identification label {
  color:black;
  width: 30%;
}

form#identification input:not([type=radio]),
form#identification option,
form#identification textarea {
  width: 50%;
 }
 


 
li#home-section {
  color="#494949";
 }


.grid-content  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 1px 1px;
  grid-template-areas: "introduction" "formulaire" "nextstep";
}

.introduction { grid-area: introduction; }

.formulaire { grid-area: formulaire; }

.nextstep { grid-area: nextstep; }

.grid-validbutton {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "content_button";
}

.content_button {
 grid-area: content_button;

 }

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display:-ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: repeat(3, 1fr);
  }

  .introduction {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .formulaire {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .nextstep {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

}
.msgerr{
  color:red;
  background-color:#FFF;
  text-decoration: none;
  font-size:1em;
  text-align: center;
  vertical-align: middle;
 /* width:100%;*/
  font-weight:bold;
  margin-top:10px;
  padding-top:0.3em;
  padding-bottom:0.3em;
  position: relative;
  border: 1px solid red;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -khtml-border-radius: 10px 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
 padding:10px;
 margin-bottom:10px;
 /*grid-column: 1 / 4;*/
  
}

.msgOK{
  color:green;
  background-color:#FFF;
  text-decoration: none;
  font-size:1em;
  text-align: center;
  vertical-align: middle;
  /*width:100%;*/
  font-weight:normal	;
  margin-top:10px;
  padding-top:0.3em;
  padding-bottom:0.3em;
  position: relative;
  border: 1px solid green;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -khtml-border-radius: 10px 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
 padding:10px;
 margin-bottom:10px;
 /*grid-column: 1 / 4;*/
  
}