/* Style global du formulaire */
.custom-textfield, .custom-radios input[type="radio"], .custom-checkbox input[type="checkbox"], .custom-date, .custom-number, .custom-tel, .custom-textarea {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease; /* Animation fluide lors des interactions */
  margin-left: 20px; /* Marge à gauche pour espacer du bord */
}

/* Conteneur pour centrer les champs */
.form-container {
  max-width: 800px;  /* Limite la largeur des champs */
  margin: 0 auto;  /* Centre horizontalement */
  padding: 20px;
}

/* Textfield (Nom, Lieu, etc.) */
.custom-textfield, .custom-date, .custom-number, .custom-tel {
  background-color: #F7F9F7;  /* Blanc cassé élégant */
  border: 1px solid #B3BCC7;  /* Gris clair */
  color: #333;
  padding: 12px;
  width: 100%; /* 100% de la largeur de son conteneur */
  box-sizing: border-box;
  margin-bottom: 20px;
  max-width: 600px;  /* Limite la largeur des champs à 600px */
  margin-left: 20px; /* Ajout d'une marge à gauche */
}

.custom-textfield:focus, .custom-date:focus, .custom-number:focus, .custom-tel:focus {
  border-color: #4E6896;  /* Bleu clair au focus */
  box-shadow: 0 0 8px rgba(78, 104, 150, 0.2);  /* Légère ombre au focus */
  outline: none;
}

/* Animations d'apparition pour les inputs */
.custom-textfield, .custom-date, .custom-number, .custom-tel, .custom-textarea {
  opacity: 0;
  animation: fadeIn 0.8s forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Radios (Statut du plaignant) */
.custom-radios input[type="radio"] {
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.custom-radios input[type="radio"]:hover {
  transform: scale(1.1); /* Agrandissement léger lors du survol */
}

.custom-radios label {
  font-size: 16px;
  color: #4E6896;  /* Bleu clair */
  display: inline-block;
  margin-bottom: 5px;
}

/* Checkbox (Retard, Mauvais comportement, etc.) */
/* General styles for the checkbox section */
.custom-checkbox {
  display: inline-block; /* Makes the checkbox appear inline with the label */
  margin-right: 20px;  /* Adds space between checkboxes */
  margin-bottom: 10px; /* Adds some space between each group */
}

.custom-checkbox input[type="checkbox"] {
  margin-right: 10px;  /* Adds space between the checkbox and the label */
  accent-color: #4E6896;  /* Custom color for checkboxes to match the palette */
}

/* Label styling */
.custom-checkbox label {
  font-size: 16px;
  color: #4E6896;  /* Blue color for labels */
  display: inline-block;
  vertical-align: middle; /* Ensures labels are aligned nicely with checkboxes */
  margin-left: 8px;
  line-height: 1.5;  /* Improves readability of multi-line labels */
  text-transform: capitalize;
}

/* Flexbox for aligning checkboxes horizontally */
.custom-checkbox-wrapper {
  display: flex;
  flex-wrap: wrap;  /* Allows wrapping to the next line on small screens */
  gap: 20px;  /* Adds space between checkbox items */
  justify-content: flex-start;  /* Aligns the items to the left */
  margin-bottom: 25px;  /* Adds spacing between this group and the next section */
}

/* Focus and hover effects */
.custom-checkbox input[type="checkbox"]:focus + label,
.custom-checkbox input[type="checkbox"]:hover + label {
  color: #557196;  /* Darker blue when hovered or focused */
  font-weight: bold;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Label customization for longer text */
.custom-checkbox input[type="checkbox"]:checked + label {
  color: #557196;  /* Color change when checkbox is selected */
  font-weight: bold;
}

/* Responsiveness: Making checkboxes stack vertically on smaller screens */
@media screen and (max-width: 768px) {
  .custom-checkbox-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Textarea (Description de la plainte, Attentes) */
.custom-textarea {
  background-color: #F7F9F7;  /* Blanc cassé */
  border: 1px solid #B3BCC7;  /* Gris clair */
  color: #333;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  height: 150px;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  max-width: 600px;  /* Limite la largeur des champs à 600px */
  margin-left: 20px; /* Marge à gauche pour espacer du bord */
}

.custom-textarea:focus {
  border-color: #4E6896;  /* Bleu clair au focus */
  box-shadow: 0 0 8px rgba(78, 104, 150, 0.2);  /* Légère ombre au focus */
  outline: none;
}

/* Boutons ou éléments de soumission */
input[type="submit"] {
  background-color: #4E6896;  /* Bleu clair */
  color: white;
  padding: 14px 30px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 20px; /* Marge à gauche pour l'aligner avec les autres champs */
}

input[type="submit"]:hover {
  background-color: #557196;  /* Bleu foncé au survol */
}

/* Amélioration des bordures et transitions globales */
input[type="submit"], .custom-textfield, .custom-date, .custom-number, .custom-tel, .custom-textarea {
  border: 1px solid #B3BCC7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Focus sur le label lors du focus sur les champs */
label:focus-within {
  color: #4E6896;  /* Met en valeur le label */
  font-weight: bold;
  margin-left: 20px;
}

/* Section de formulaire et alignement */
.webform-submission .form-item {
  margin-bottom: 25px; /* Espace entre chaque champ */
}

/* Lorsque l'utilisateur est en focus sur un champ, mettre en valeur le label */
input[type="text"]:focus + label, 
input[type="tel"]:focus + label, 
input[type="number"]:focus + label, 
textarea:focus + label, 
select:focus + label {
  color: #557196;  /* Changer la couleur du label en bleu foncé */
  font-weight: bold;
}

/* Pour les labels de chaque champ de type textfield, textarea, etc. */
.custom-textfield + label,
.custom-number + label,
.custom-tel + label,
.custom-textarea + label,
.custom-date + label {
  font-size: 16px;
  color: #333;  /* Gris foncé pour les labels par défaut */
  margin-top: 20px;
  text-transform: uppercase;  /* Met en majuscule */
  letter-spacing: 1px;
}

/* Les labels des radios et des checkboxes */
.custom-radios label,
.custom-checkbox label {
  font-size: 16px;
  color: #4E6896;  /* Bleu clair */
  margin-right: 20px;
  display: inline-block;
  margin-bottom: 15px;
}

.custom-radios input[type="radio"]:checked + label,
.custom-checkbox input[type="checkbox"]:checked + label {
  color: #557196;  /* Bleu foncé lors de l'état sélectionné */
}