#form_box
{
  margin-top: 10px;
  position: relative;

overflow: hidden;
width: 100%;
  padding: 5px;
 height: 970px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #b5dda9;
  margin-bottom: 10px;
    border-top-left-radius: 30px 50px;
}

#form_incident .pannel_form
{

  position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 100%;
background-color: white;
    padding: 10px;
    right: 0px;
    transform: translateX(100%);  /* hors écran à droite */
opacity: 0;

transition: transform 0.8s ease;
  min-height: 100%;
}

#form_box .button_area {
	border-top: 2px solid #6a8c604f;
	position: absolute;
	width: 97%;
	bottom: 100px;
  padding: 10px;
  margin-bottom: 0px;
  min-height: 96px;
}
#form_incident .active
{
  transform: translateX(0);  /* glisse dans le viewport */
 opacity: 1;
}

  .pannel_form  input[type="text"] ,  .pannel_form  input[type="email"],  .pannel_form  input[type="tel"],  .pannel_form  input[type="date"]
{
display: block;
	border: none;
	background: #F4FFF0;
	border-bottom: 6px solid #6a8c60!important;
	box-shadow: -1px 8px 6px -4px #000;
	transition: all 0.5s ease-out;
  width: 50%;
  padding: 5px;
  color:#333;
}
input:hover,
input:focus,
input:focus-visible {
    outline: none !important;

}

  .pannel_form  input[type="text"]:focus , .pannel_form  input[type="email"]:focus,  .pannel_form  input[type="tel"]:focus,  .pannel_form  input[type="date"]:focus{
	background:#f6f6f6;
	border-bottom: 6px solid #cf8e12!important;
}

.pannel_form  textarea
{
display: block;
border: none;
background: #DFF7D8!important;
border-bottom: 6px solid #6a8c60;
box-shadow: -1px 8px 6px -4px #000;
transition: all 0.5s ease-out;
width: 50%;
color:#333;
}

.input_row_incident
{

  margin-bottom: 20px;
  position: relative;
}
.input_row_incident  span,.input_row_incident  label
{
  display: block;

  font-weight: bolder;
  font-size: 16px;
}
.pannel_form h2
{
  background-color:  #6a8c60;
  color:white;
  font-size: 14px;
  width: 16%;
  padding: 2px;
  text-align: center;
}

.pannel_form input[type="button"],.pannel_form input[type="submit"]{
  margin-top: 20px;
  background-color: #60C246;
  color:white;
cursor: pointer;

  padding: 15px 25px;
  box-shadow: -1px 8px 6px -4px #000;
  transition: all 0.5s ease-out;
  border-radius: 10px;

  border: 1px solid white;
  font-weight: bold;

}
#Informations_form input[type="submit"]{
text-align: center;

position: absolute;
right: 10px
}

.pannel_form input[type="button"]:hover{
box-shadow:  0px 1px 5px -4px #000;
  background-color: #6A8C60;
}


.pannel_form .input_row_incident .next
{
position: absolute;
  right:10px;
}


.pannel_form .input_row_incident .retour
{

  margin-left: 10px;
}


.ariane_incident ul li {
	text-align: center;
	width: 16%;

	font-weight: bold;
	padding: 10px;
	color: white;
	background-color: #72a16633;
  border-top-left-radius: 30% 50%;
    border-top-right-radius: 30% 50%;
    border-bottom-right-radius: 30% 50%;
	height: 50px;
	vertical-align: middle;
	/* float: left; */
	margin-left: 0px;
	/* display: none; */
	display: inline-flex;
	/* align-self: center; */
	align-content: center;
	align-items: center;
  font-size: small;
}
.ariane_incident ul
{
  text-align: center;
    margin: 0px;
    padding: 0px;
}
.ariane_incident ul li p
{
  text-align: center;
    width: 100%;
    font-size: 12px;
}

.ariane_incident ul .active
{

  background-color: #6a8c60;

}


 .pannel_form select {
    display: block;
    width: 50%;
    padding: 8px 12px;
    font-size: 16px;

    background: #DFF7D8 !important; /* même fond que tes inputs */
    border: none;                   /* supprime la bordure */
    box-shadow: -1px 8px 6px -4px #000;
    transition: all 0.5s ease-out;



    color: #000; /* contraste correct */


    /* espace pour la flèche */
    padding-right: 40px;




}

/* AU SURVOL / FOCUS — évite la bordure bleue ou un halo */
 .pannel_form select:focus {
    outline: none;
}

/* STYLE DU MENU DÉROULANT ("liste des options") */
 .pannel_form select option {
    background: #ffffff !important; /* fond blanc lisible */
    color: #000 !important;         /* texte lisible */
    padding: 6px 10px;
}




/* ===========================
   CADRE GLOBAL + CENTRAGE
=========================== */
#form_box_contact {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0 40px;

}

.basic_form_contact {
  width: 100%;
  max-width: 900px;                 /* même largeur visuelle que l’autre form */
  border: 1px solid #cfe6c2;        /* léger cadre vert pâle */
  border-radius: 4px;
  padding: 25px 30px 40px;
  box-sizing: border-box;
    border-top-left-radius: 30px 50px;
}

/* ===========================
   FORMULAIRE
=========================== */
.form_contact {
  width: 100%;
  font-family: "Nunito", Arial, sans-serif;
}

/* champ anti-bot caché */
.basic_input_contact_control {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* message succès / erreur si tu l’utilises */
.form_contact .ced_form_success,
.form_contact .ced_form_error {
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.ced_form_success {
  background: #d8ffda;
  color: #2e7d32;
}
.ced_form_error {
  background: #ffd7d7;
  color: #8d2c2c;
}

/* ===========================
   LISTE DES CHAMPS
=========================== */
ul.basic_contact_forms {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.basic_contact_forms li {
  margin-bottom: 18px;
}

/* ===========================
   LABELS (style comme l’autre form)
=========================== */
.basic_label_contact_form {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: #111;
}

/* ===========================
   INPUTS + TEXTAREA
   -> même style que ton formulaire de constat
=========================== */
.basic_input_contact_form,
.basic_contact_forms textarea,#form_box_contact input:read-write {
  display: block;
  border: none;
  background: #F4FFF0;             /* vert très clair */
  border-bottom: 6px solid #6a8c60;
  box-shadow: -1px 8px 6px -4px #000;
  transition: all 0.5s ease-out;
  width: 100%;                      /* comme sur ton formulaire multi-step */
  padding: 8px 10px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

.basic_input_contact_form::placeholder {
  color: #7d9472;
}

/* textarea : un peu plus haut et redimensionnable */
.basic_contact_forms textarea#commentaire {
  height: 150px;
  width: 100%;
  resize: vertical;
}

/* focus : même sensation que l’autre form (tu peux ajuster si besoin) */
.basic_input_contact_form:focus,
.basic_contact_forms textarea:focus {
  outline: none;
  border-bottom-color: #497ea2;
  box-shadow: -1px 10px 12px -6px rgba(0,0,0,0.35);
}

/* ===========================
   CHECKBOX CONDITIONS
=========================== */
.basic_contact_forms li.textarea input[type="checkbox"] {
  margin-right: 6px;
}

.basic_contact_forms li.textarea label {
  display: inline-block;

  font-weight: 500;
  color: #333;
}

/* ===========================
   BOUTON ENVOYER
   -> style comme “Suivant”
=========================== */
.basic_contact_subbmit {
  margin-top: 25px;
  text-align: right;
}

.basic_custom_form_contact_btn,#form_box_contact button[type="submit"] {
  margin-top: 20px;
  background-color: #60C246;
  color: white;
  cursor: pointer;
  padding: 15px 25px;
  box-shadow: -1px 8px 6px -4px #000;
  transition: all 0.5s ease-out;
  border-radius: 10px;
  border: 1px solid white;
  font-weight: bold;


}
input::placeholder,
textarea::placeholder {
    color:  #bfbfbf !important;
}
label[for="rule2"]
{
  font-size: smaller;
    width: 90%;
}


.basic_custom_form_contact_btn
{
  width: 100%;
}
.basic_custom_form_contact_btn:hover,#form_box_contact button[type="submit"]:hover {
  box-shadow: 0px 1px 5px -4px #000;
    background-color: #6A8C60;
}

.basic_custom_form_contact_btn:active {



}


#form_box_contact input[type=checkbox]:checked,#form_box input[type=checkbox]:checked,#form_box input[type=radio]:checked {

	background-color: #60C246;


}
.pannel_form input[type="checkbox"]:checked::before ,#form_box input[type=checkbox]:checked::before,#form_box input[type=radio]:checked::before{
  content: "";

}
#form_box_contact input[type=checkbox],#form_box input[type=checkbox],#form_box input[type=radio]
{

	border: 3px solid white;
background-color: #c1c1c1;
box-shadow: 0px 3px 3px -1px black,inset 0px 0px 3px 1px #3c3c3c9c;
}


#form_box_contact input[type=checkbox],#form_box input[type=checkbox],#form_box input[type=radio] {
  appearance: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;

  border-radius: 5px;
transform: translateY(5px);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
#form_box input[type=radio]
{
  transform: translateY(3px);
    border-radius: 50%;
}



* Style du champ fichier (zone globale) */
.input_row_incident input[type="file"] {
    font-family: inherit;
    font-size: 14px;
    background: #DFF7D8;                /* même vert clair que les autres inputs */
    border: none;
    border-bottom: 6px solid #6a8c60;   /* barre verte foncée */
    box-shadow: -1px 8px 6px -4px #000; /* ombre comme les autres */
    padding: 6px 10px;
    width: 80%;                         /* adapte si tu veux plus large/étroit */
    cursor: pointer;
}

/* Bouton "Parcourir…" – navigateurs basés sur Chromium + Edge */
.input_row_incident input[type="file"]::file-selector-button {
    background: #6a8c60;     /* vert foncé */
    color: #fff;
    border: none;
    padding: 6px 16px;
    margin-right: 12px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease-out, transform 0.1s ease-out;
}

.input_row_incident input[type="file"]::file-selector-button:hover {
    background: #55714f;
    transform: translateY(1px);
}

/* Compat Firefox (ancien pseudo-élément) */
.input_row_incident input[type="file"]::-moz-file-upload-button {
    background: #6a8c60;
    color: #fff;
    border: none;
    padding: 6px 16px;
    margin-right: 12px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease-out, transform 0.1s ease-out;
}

.input_row_incident input[type="file"]::-moz-file-upload-button:hover {
    background: #55714f;
    transform: translateY(1px);
}



.next:disabled,
.disabled_btn {
    background: #a5a5a5 !important;
    border-bottom: 6px solid #777 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}


#Coordonnee_form .input_row_incident .required::before,.basic_contact_forms .required::before
{
position: relative;
content: "* ";
width: 50px;
height: 50px;
color:red;

padding-left: 5px;

}


.error-bubble {
    background: #FFDDDD;
    color: #B20000;
    border: 1px solid #E08A8A;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(-3px);
    transition: 0.2s ease-in-out;
}

.error-bubble.visible {
    opacity: 1;
    transform: translateY(0);
}
.ariane_incident
{
  padding-bottom: 15px;
}
#form_box .input-error {
    border-color: #E63946 !important;
    background: #FFECEC !important;
}
.next.disabled_btn,
.next:disabled {
    background: #cccccc !important;
    color: #777 !important;
    cursor: not-allowed !important;
    border-color: #bbbbbb !important;
    opacity: 0.6;
}


label[for="rule2"]
{
  font-size: 12px!important;
    width: 88%!important;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  padding-left: 5px;
  margin-top: 20px;
}
#rule{
  transform: translateY(14px)!important;
}

input[type="file"] {
font-size: smaller;
}

@media (max-width: 754px) {
  .pannel_form input[type="text"],.pannel_form input[type="date"],.pannel_form input[type="email"],.pannel_form input[type="tel"]
  {
    width: 100%;
  }

.ariane_incident ul li
{
  width: 31%;
margin-left: -5px;
    padding: 0px;
    width: 33%;
    padding: 0px;

}
.ariane_incident ul li p {
	text-align: center;
	width: 100%;
	font-size: 10px;
  line-height: 1.5;
  padding: 5px;
    font-weight: inherit;

}
.pannel_form input[type="button"], .pannel_form input[type="submit"] {
	margin-top: 0px;

height: 50px;

	padding: 5px 22px;


font-size: small;
	font-weight: bold;
}

.basic_input_contact_form, .basic_contact_forms textarea, #form_box_contact input:read-write {

	width: 100%;

}
#form_box
{
  height: 950px;
}
#form_box .button_area {

  width: 90%;
      bottom: 110px;
padding-top: 16px;
}

input[type="file"] {
font-size: 12px!important;
}
 }