:root {
  --brand: #0d2956;
  --accent: #2ab55c;
  --radius: 14px;
}

/* Couleurs */
.text-brand {
  color: var(--brand) !important;
}
.bg-brand {
  background: var(--brand) !important;
}

/* Base typographique : plus grand sur mobile */
html {
  font-size: 16px;
}
@media (max-width: 575.98px) {
  html {
    font-size: 18px;
  } /* ✅ boost global */
  body {
    -webkit-text-size-adjust: 100%;
  } /* iOS */
}

/* Titres/texte : variantes mobile */
.h3-sm {
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
}
.small-sm {
  font-size: clamp(0.95rem, 3.8vw, 1.05rem);
}

/* Boutons/champs “grands” sur mobile */
.btn-lg-mobile,
.form-control-lg-mobile,
.form-select-lg-mobile {
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
}
@media (min-width: 576px) {
  .btn-lg-mobile,
  .form-control-lg-mobile,
  .form-select-lg-mobile {
    font-size: 0.95rem;
    padding: 0.625rem 0.85rem;
  }
}

/* Carte : occupe la hauteur utile de l’écran sur mobile */
#map {
  height: 560px;
  background: #e9ecef;
  border-radius: var(--radius);
}
@media (max-width: 575.98px) {
  #map {
    height: calc(100vh - 260px);
  } /* Ajuste selon tes barres/entêtes */
}

/* Card sites */
.site-card {
  border: 1px solid #e9ecef;
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: #fff;
}
.site-card:hover {
  background: #f8f9fa;
}

/* Badges doux */
.badge-soft {
  background: rgba(13, 41, 86, 0.08);
  color: var(--brand);
  border: 1px solid rgba(13, 41, 86, 0.15);
}

/* Tooltips Leaflet plus lisibles */
.leaflet-tooltip {
  background: #fff;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
}

/* Contrôles zoom Leaflet : plus gros sur mobile */
@media (max-width: 575.98px) {
  .leaflet-control-zoom a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 1.2rem;
  }
  .leaflet-control-attribution {
    font-size: 0.85rem;
  }
}

/* Modals : arrondis et padding confort */
.modal-content {
  border-radius: 18px;
}
.modal-header,
.modal-footer {
  padding: 0.9rem 1rem;
}
.modal-body {
  padding: 1rem;
}

/* Inputs : bord arrondi */
.form-control,
.form-select {
  border-radius: var(--radius);
}