#demande-devis { max-width: 800px; margin: 20px auto 60px auto; background-color: #fff; padding:80px 20px 20px 20px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
background-image:url(../design/oeillet.png); background-repeat:repeat-x; background-position:2px 20px; background-size:25px 22px

} 

#demande-devis * {transition-duration: 0.3s, 0.5s; transition-delay: 0.1s, 0s; } 
  

	#demande-devis h1 { text-align: center; color: #333; } 
	#demande-devis form { display: flex; flex-direction: column; }
	#demande-devis form >fieldset { border: 1px solid #ccc; }
	#demande-devis form >fieldset:hover{ border-color:#2399DC; background-color:#f7fafc } 
	#demande-devis form >fieldset:hover legend { color:#2399DC }
	#demande-devis form>fieldset> fieldset { border: 1px dotted #ccc; }
	#demande-devis fieldset { padding: 30px 20px 20px 20px; margin-bottom: 30px; } 
	#demande-devis legend { padding: 0 10px; font-weight: bold; text-transform:uppercase }
		
	#demande-devis label { display: block; margin-bottom: 10px; color: #333; }
		#demande-devis label a { color:#999; text-decoration:none}
		#demande-devis label a:hover { color:#EA504D;}
		#demande-devis label a span.material-icons { font-size:20px; top: 4px;  position: relative;}
		
		#demande-devis label > span.icon.material-icons { font-size:40px; top: 15px;  position: relative;} 
		
	
	/* Style optionnel pour l'astérisque */
	.asterisque {
	  color: red;
	}
	#demande-devis .new-invoice { display:flex; flex-direction:row; gap:10px}
	#demande-devis .new-invoice button { height:46px}
		
	#demande-devis input, #demande-devis select, #demande-devis textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; font-size:16px }
	#demande-devis input:hover, #demande-devis select:hover, #demande-devis textarea:hover, .liste-options > label:hover { background-color:#DAE9F2 }
	#demande-devis input:focus, #demande-devis select:focus, #demande-devis textarea:focus { background-color:	#DAE9F2; color:black; font-weight:bold }
	#demande-devis input.non-vide, #demande-devis select.non-vide, #demande-devis textarea.non-vide { background-color:#DAE9F2 !important	 }  
	#demande-devis input[type="radio"]:checked + span, #demande-devis input[type="radio"]:checked + span + span{ color:#2399DC}
	
	#demande-devis input[type="date"]{ max-width:283px; text-align:center}  
	
	/*#demande-devis input[type="radio"]:hover:not(:checked) + span, #demande-devis input[type="radio"]:hover:not(:checked) + span + span{ color:#EA504D}*/
	 
	#demande-devis textarea { width:100%; max-width: 718px; min-width: 100%; }
	
	#demande-devis button {background-color: #EA504D; padding: 10px 20px; background-image: linear-gradient(135deg, #eb514d, #f6ab9d), linear-gradient(90deg, #ffb629, #ffda56 50%, #ffd7a6); color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; line-height:1 ;transition-duration: 0 0}
	#demande-devis button[type="submit"]{ font-size: 24px; width:100%; max-width:350px; margin:25px auto 50px auto; padding:20px 40px }
	#demande-devis button:not(:disabled):hover { background: #EA504D; }
	
	
	#customs-code.invalid, #email.invalid { border-color: red;}
	
	span.asterisque { color:#EA504D;}
	.liste-options { display:flex; gap:20px;  }
		#list-arrivals { margin-bottom:20px}
		
		.liste-options > label { display:block; flex:1; flex-basis:50px; text-align:center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color:white; cursor:pointer }   
		.liste-options > label span { display:block}
		.liste-options > label span.material-icons { font-size:50px; margin-bottom:10px}
	
	#demande-devis blockquote { background-color:#EA504D; border-radius:6px}

@media (max-width: 600px) {
	#demande-devis { padding: 10px; }
    #demande-devis input, #demande-devis select, #demande-devis textarea { padding: 8px; }
    #demande-devis button { padding: 8px 16px;     font-size: 14px; }
	
	

	
	
}

@media (min-width: 800px) {
	#demande-devis 	.nom-prenom {
  display: flex; /* Active Flexbox pour le conteneur */
  flex-direction: row; /* Aligne les éléments verticalement */
  gap:20px
}

#demande-devis .nom-prenom > div {
 flex:1
}



	
}