/* Donne à la barre de recherche le même style que les autres inputs */

    body { font-family: system-ui, Arial, sans-serif; margin:0; background:#f7f7fb; color:#222; }
    .container { max-width: 980px; margin: 32px auto; background:#fff; padding: 24px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
    h1 { margin-top: 0; }
    fieldset { border: 1px solid #e5e5ea; padding: 16px; border-radius: 8px; margin-bottom: 20px; }
    legend { font-weight: 600; padding: 0 8px; }
    label { display:block; font-size: 14px; margin: 10px 0 4px; }
    input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
      width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; box-sizing: border-box;
    }
    .row { display:flex; gap:12px; }
    .col { flex:1; }
    .help { font-size: 12px; color:#666; margin-top:4px; }
    .actions { display:flex; gap: 10px; margin-top: 18px; align-items:center; }
    .btn { padding: 10px 16px; border-radius: 6px; border: 1px solid #1b5e20; background:#2e7d32; color:#fff; cursor: pointer; }
    .btn.secondary { border-color: #aaa; background:#f0f0f0; color:#222; }
    .note { font-size: 13px; color:#333; }
    .feedback { margin-top: 12px; padding:10px; border-radius:6px; display:none; }
    .feedback.ok { background:#e8f5e9; border:1px solid #c8e6c9; color:#2e7d32; }
    .feedback.err { background:#ffebee; border:1px solid #ffcdd2; color:#c62828; }
    .feedback .fb-title{ font-weight:600; margin-bottom:4px; }
    .feedback .fb-text { line-height:1.4; }
    .inline-icon svg{ width:0.2em; height:0.2em; vertical-align:-0.15em; margin-left:.25em; }
    .inline-img{ width:0.2em; height:0.2em; vertical-align:-0.15em; margin-left:.25em; }
    .muted { color:#666; font-size: 13px; }
.near-note{ padding-left:.25rem; border-left:3px solid rgba(25,135,84,.25); }
.req-star {
  color: #c62828;
  font-weight: bold;
  margin-left: 2px;
}
/* Optionnel : affiner l’alignement vertical et la responsivité */
/* si le bouton semble trop haut/bas sur certains navigateurs */
@media (max-width: 767px) { /* empile proprement sur mobile */
  #btn-locate-form-address { margin-top: 25px !important; }
}


/* Griser tous les champs et boutons désactivés */
input[disabled],
button[disabled],
select[disabled],
textarea[disabled] {
  background-color: #e9ecef !important;  /* gris clair */
  color: #6c757d !important;              /* texte gris */
  cursor: not-allowed !important;
  opacity: 1 !important;                 /* garde le contraste lisible */
}

/* Ajustement esthétique spécifique aux boutons */
button[disabled] {
  border-color: #ccc !important;
  box-shadow: none !important;
}
#address-search {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}
#address-search:focus {
  border-color: #2e7d32;
  box-shadow: 0 0 0 2px rgba(46,125,50,0.15);
}

/* Harmonise le menu des suggestions jQuery UI avec ton thème */
.ui-autocomplete {
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  font-size: 14px;
  z-index: 10000; /* au-dessus des fieldsets */
}
.ui-autocomplete .ui-menu-item-wrapper {
  padding: 8px 10px;
}
.ui-autocomplete .ui-state-active {
  background: #e8f5e9 !important;
  color: #1b5e20 !important;
  border: none !important;
}
#mapdiv .leaflet-container { border-radius: 12px; }

.custom-marker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: white;
  border: 2px solid blue;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  color: black;
  }
  .custom-svg-marker {
      position: relative;
      width: 40px;
      height: 40px;
      }

      .custom-svg-marker svg {
      width: 100%;
      height: 100%;
      }

  .custom-svg-marker span {
      position: absolute;
      top: 36%; /* Adjusted to align perfectly within the white circle */
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 10px;
      font-weight: bold;
      color: black; /* Black text for ID */
      pointer-events: none;
      }
  .sidebar-section {
        padding: 10px;
    }

    .table {
        font-size: 14px;
        width: 100%;
    }

    .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    @media (max-width: 768px) {
        .sidebar-header {
            font-size: 18px;
        }

        .table {
            font-size: 12px;
        }

        .button-group {
            flex-direction: column;
        }

        .btn {
            width: 100%;
        }

        #logo_current_mun {
            width: 150px;
            margin: auto;
        }
    }

    /* optionnel */
.locate-btn {
  width: 34px; height: 34px; line-height: 34px;
  text-align: center; font-size: 18px; cursor: pointer;
  background: #fff; border: none;
}
.locate-btn:focus { outline: none; }


/* Barre d'adresse pleine largeur sur la carte */
.address-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;   /* ou top:12px; si tu préfères en haut */
  z-index: 1000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.address-bar .row { display:flex; gap:8px; }
.address-bar input[type="text"] { flex:1; width:100%; }
.address-bar .clear-btn {
  width: 34px; height: 34px; border:0; background:#fff; cursor:pointer;
}

.address-bar .ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  z-index: 2000; /* au-dessus de Leaflet */
  border-radius: 6px;
}
.address-bar {
  position:absolute; left:12px; right:12px; bottom:12px;
  z-index:1000; background:#fff; border:1px solid #ddd; border-radius:8px;
  padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.address-bar .row { display:flex; gap:8px; align-items:center; }
.address-bar input[type="text"] { flex:1; min-width:0; }

.collapse-btn, .clear-btn {
  width:34px; height:34px; border:0; background:#fff; cursor:pointer;
  border-radius:6px;
}

/* Mode réduit: ne laisse que le bouton d’expansion */
.address-bar.collapsed { padding:6px; width:auto; right:auto; }
.address-bar.collapsed .clear-btn,
.address-bar.collapsed input[type="text"] { display:none; }
.address-bar.collapsed .row { gap:0; }

/* Base: tailles tactiles et lisibilité */
:root { --pad:12px; --btn:44px; --radius:10px; }
.address-bar {
  position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad);
  z-index:1000; background:#fff; border:1px solid #ddd; border-radius:var(--radius);
  padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  font-size:16px; /* évite le zoom iOS à la saisie */
}
.address-bar .row { display:flex; gap:8px; align-items:center; }
.address-bar input[type="text"]{ flex:1; min-width:0; height:var(--btn); padding:0 10px; }
.collapse-btn,.clear-btn{
  width:var(--btn); height:var(--btn); border:0; background:#fff; border-radius:8px; cursor:pointer;
}

/* Menu de suggestions */
.address-bar .ui-autocomplete{
  max-height:min(40vh, 320px); overflow-y:auto; z-index:2000;
  -webkit-overflow-scrolling:touch; border-radius:8px;
}

/* Carte: hauteur min pour mobiles */
#mapdiv, .leaflet-container{ min-height:360px; }

/* État réduit */
.address-bar.collapsed{ padding:6px; width:auto; right:auto; }
.address-bar.collapsed .clear-btn,
.address-bar.collapsed input[type="text"]{ display:none; }
.address-bar.collapsed .row{ gap:0; }

/* Petits écrans (≤ 576px) */
@media (max-width:576px){
  :root{ --pad:8px; --radius:8px; }
  .address-bar{ left:var(--pad); right:var(--pad); bottom:auto; top:var(--pad); }
  .address-bar .ui-autocomplete{ max-height:45vh; }
  /* Par défaut compacte sur mobile */
  .address-bar.mobile-default-collapsed:not(.force-open){
    padding:6px; width:auto; right:auto;
  }
  .address-bar.mobile-default-collapsed:not(.force-open) .clear-btn,
  .address-bar.mobile-default-collapsed:not(.force-open) input[type="text"]{ display:none; }
}

/* Moyens écrans (≤ 768px): largeur contrôlée si la carte est petite */
@media (max-width:768px){
  .address-bar{ font-size:16px; }
}

/* Evite les scroll chains avec la carte sous le menu */
.address-bar .ui-autocomplete{ overscroll-behavior:contain; }

/* Assure les boutons Leaflet cliquables au-dessus du menu si besoin */
.leaflet-top, .leaflet-bottom{ z-index:500; }

/* Honeypot */
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Bloc pièces bac / conteneur */
.section6-details .piece-label {
  display: flex;
  align-items: center;
}

.section6-details .piece-label-text {
  flex: 1;              /* prend tout l'espace dispo côté gauche */
}

.section6-details .piece-thumb {
  max-width: 60px;      /* taille de l’icône */
  height: auto;
  margin-left: 1rem;    /* petit espace entre texte et image */
  flex-shrink: 0;       /* ne pas rapetisser l’image */
}
.bac-types-gallery {
  margin-top: 1rem;
}

.bac-type-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: .5rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.bac-type-img {
  width: 75%;
  height: auto;
  border-radius: 4px;
}

.bac-type-caption {
  margin-top: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: #333;
}