body {
  font-family: system-ui, sans-serif;
  background: #B9D9EB;
  color: white;
  margin: 0;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-wrapper { /* AVEC LE POINT AU DÉBUT */
  width: 100%;
  max-width: 700px;
  padding: 40px; /* Le padding est optionnel ici, mais bon à avoir */
  margin-left: auto; /* Pour assurer le centrage avec max-width */
  margin-right: auto;/* Pour assurer le centrage avec max-width */
}
#map {
  height: 50vh;         
  width: 90%;           
  max-width: 700px;     
  margin: 20px auto;
  border: 2px solid white;
  border-radius: 12px;
}
.form-card {
  background-color: white;
  border-radius: 8px;
  padding: 30px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  color: black;
}

.form-header {
  background-color: #003456;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 15px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin: -30px -40px 20px -40px;
  text-align: center;
}
.leaflet-popup-content {
  max-height: 200px; /* Adjust as needed */
  overflow-y: auto;
}
form label {
  font-weight: 600;
  display: block;
  margin: 20px 0 5px;
}

input,
textarea {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid;
  box-sizing: border-box;
}

button {
  background-color: #003456;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  margin-top: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #B9D9EB; 
}

table, th, td {
  border: 1px solid black;
  color: black;
}
#pin-summary {
  margin-top: 20px;
  background: white;
  padding: 10px;
  border-radius: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-size: 1rem;
}


#pin-summary table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

#pin-summary th, #pin-summary td {
  border: 1px solid;
  padding: 8px;
  color: black;
}

.instructions {
  font-size: 1rem;
  margin-bottom: 20px;
}
.instructions-title {
  font-size: 1.2rem;
  font-weight: bold; 
}

.optional-comment-label {
  font-size: 1.2rem;
}
.resumes {
  font-size: 1.2rem;
}

.image-container {
    background-color: #003456;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}
.logo {
  max-width: 150px;
  height: auto;
}
.pin-label {
  background: black;
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.intro-text {
  margin-bottom: 20px; /* Espace en dessous du bloc de texte */
  line-height: 1.6;    /* Hauteur de ligne pour meilleure lisibilité */
  text-indent: 0;      /* Assure qu'il n'y a pas d'indentation au début du bloc */
  text-align: justify; /* Justifie le texte */
}
.questions-generales h3 {
  margin-bottom: 15px; /* Espace sous le titre de la section */
}

.questions-generales label {
  margin-top: 20px; /* Marge par défaut pour les labels DANS cette section */
  margin-bottom: 5px;
  display: block;
  font-weight: 600;
}

/* Réduit la marge pour le PREMIER label APRÈS le h3 DANS CETTE SECTION */
.questions-generales h3 + label {
  margin-top: 0px;
}
.questions-generales .radio-group label {
  display: block;
  margin-top: 0px;     
  margin-bottom: 0px; 
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;    /* Ajustez cette valeur (ex: 1.2, 1.3, 1.4, normal) */
  font-weight: normal; /* Généralement, les options ne sont pas en gras */
}
.popup-radio-group label {
  display: block;
  margin-bottom: 3px;
  font-weight: normal; /* Options radio en texte normal */
}
/* Style pour les labels principaux dans la popup */
#map .leaflet-popup-content-wrapper label {
    font-weight: bold; /* Garder les questions en gras */
    margin-bottom: 3px;
    display: inline-block; /* Pour que le <br> fonctionne bien après */
}
#map .leaflet-popup-content-wrapper select,
#map .leaflet-popup-content-wrapper textarea,
#map .leaflet-popup-content-wrapper input[type="number"] { /* Si vous réintroduisez un input number */
    width: calc(100% - 10px); /* Un peu moins que 100% pour le padding */
    margin-bottom: 8px;
}
#map .leaflet-popup-content-wrapper .popup-radio-group {
    margin-top: 3px;
    margin-bottom: 8px;
}

.leaflet-popup-content .popup-title {
  font-size: 1.3em;   /* Augmenté par rapport à 1.15em */
  font-weight: bold;
  color: #003456;
  margin-top: 0;
  margin-bottom: 8px;  /* Réduit (était 12px) */
  padding-bottom: 5px; /* Réduit (était 8px) */
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

/* Ajustement pour le premier label après le nouveau titre */
.leaflet-popup-content .popup-title + label {
  margin-top: 6px;   /* Réduit (était 8px) */
}

.info.legend {
  padding: 10px 15px; /* Légère augmentation du padding pour un meilleur espacement */
  font: 14px/1.5 Arial, Helvetica, sans-serif; /* Augmentation de line-height pour lisibilité */
  background: #f8f9fa; /* Fond clair opaque (gris très clair) */
  border: 1px solid #cccccc; /* Bordure grise claire pour définir le cadre */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre portée plus subtile */
  border-radius: 6px; /* Coins arrondis */
  color: #212529; /* Couleur de texte foncée pour un bon contraste */
}

.info.legend h4 {
  margin: 0 0 10px; /* Espace sous le titre augmenté */
  color: #003456; /* Couleur du titre, assortie à votre thème */
  font-size: 1.1em;
  font-weight: bold;
  padding-bottom: 8px; /* Espace sous la ligne de séparation */
  border-bottom: 1px solid #dee2e6; /* Ligne de séparation plus claire */
}

/* Le style pour .info.legend i peut rester le même si la ligne pointillée vous convient toujours */
.info.legend i {
  width: 20px; /* Assurez-vous que cela correspond à la largeur dans le JS si vous l'avez modifiée */
  height: 1px; /* Hauteur de la ligne pour border-top */
  /* float: left; enlevé car vertical-align gère mieux l'alignement avec le texte */
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle; /* Bon alignement vertical avec le texte */
  /* Le style de la ligne (border-top) est appliqué directement dans le JS */
}