/* GÉO-FONCIER LIBREVILLE · base & composants
   SIG municipal — shell navy, actions bleues, marque verte.
   Statuts fonciers colorés, une élévation, focus clavier visible. */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chiffres tabulaires (données alignées) */
.tnum, table, .kpi-value, .mono { font-variant-numeric: tabular-nums; }

/* Marque : « LIBREVILLE » en vert */
.brand-accent { color: #16A34A; }

/* Focus clavier visible (jamais supprimé) */
:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 4px; }
a, button, input, select, textarea { outline: none; }

/* Scrollbar custom sobre */
* { scrollbar-width: thin; scrollbar-color: #C7D2E0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C7D2E0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; }

/* ---- Sidebar (shell navy) ---- */
.sidebar-bg { background: linear-gradient(180deg, #0C1E45 0%, #0A1A3E 55%, #081332 100%); }
.nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: .625rem;
  font-size: .875rem; font-weight: 500; color: #B9C6DD;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.is-active { background: #2563EB; color: #fff; box-shadow: 0 2px 8px -2px rgba(37,99,235,.6); }
.nav-link.is-active .nav-ico { color: #fff; }
.nav-ico { width: 18px; height: 18px; flex: none; color: #7E93B4; }
.nav-link:hover .nav-ico { color: #cbd5e1; }

/* ---- Pastilles de statut : couleur + texte + point ---- */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; display: inline-block; }
.pill-success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.pill-warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.pill-danger  { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.pill-neutral { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.pill-info    { background: #EFF4FF; color: #1D4ED8; border-color: #DBE7FE; }
.pill-violet  { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.pill-gold    { background: #FFFBEB; color: #92580B; border-color: #FDE68A; }

/* Statuts fonciers dédiés (code couleur du CDC) */
.pill-libre       { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }  /* vert : libre */
.pill-occupe      { background: #EFF4FF; color: #1D4ED8; border-color: #DBE7FE; }  /* bleu : occupé */
.pill-partiel     { background: #FEFCE8; color: #A16207; border-color: #FEF08A; }  /* jaune : occupation partielle */
.pill-litige      { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }  /* orange : en litige */
.pill-affecte     { background: #EFF4FF; color: #1E40AF; border-color: #DBE7FE; }  /* bleu : affecté */
.pill-strategique { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }  /* violet : réserve stratégique */
.pill-verifier    { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }  /* gris : à vérifier */
.pill-irregulier  { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }  /* rouge : occupation irrégulière */

/* ---- Boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: .625rem; font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: #2563EB; color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.25); }  /* BLEU */
.btn-primary:hover { background: #1D4ED8; }
.btn-green { background: #16A34A; color: #fff; box-shadow: 0 1px 2px rgba(22,163,74,.25); }      /* VERT (valider) */
.btn-green:hover { background: #15803D; }
.btn-outline { background: #fff; color: #0F1B2D; border-color: #E2E8F0; }
.btn-outline:hover { background: #F8FAFC; border-color: #CBD5E1; }
.btn-ghost { background: transparent; color: #64748B; }
.btn-ghost:hover { background: #EEF2F7; color: #0F1B2D; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: .4rem .65rem; font-size: .8125rem; border-radius: .5rem; }
.btn-lg { padding: .7rem 1.1rem; font-size: .9375rem; }

/* ---- Carte ---- */
.card { background: #fff; border: 1px solid #E7ECF3; border-radius: .875rem; box-shadow: 0 1px 2px 0 rgba(12,30,69,.05), 0 1px 3px 0 rgba(12,30,69,.04); }
.card-hover { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card-hover:hover { box-shadow: 0 8px 24px -6px rgba(12,30,69,.14); border-color: #DBE7FE; }

/* ---- KPI ---- */
.kpi-ico { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; flex: none; }

/* ---- Champs de formulaire ---- */
.field-label { display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .35rem; }
.field-req::after { content: " *"; color: #DC2626; }
.input, .select, .textarea {
  width: 100%; background: #fff; border: 1px solid #CBD5E1; border-radius: .625rem;
  padding: .6rem .8rem; font-size: .875rem; color: #0F1B2D;
  transition: border-color .15s ease, box-shadow .15s ease; min-height: 44px; }
.input::placeholder, .textarea::placeholder { color: #94A3B8; }
.input:focus, .select:focus, .textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.input.has-error { border-color: #DC2626; }
.field-help { font-size: .75rem; color: #64748B; margin-top: .3rem; }

/* Radio "segmenté" (recherche par …) */
.seg { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem; border:1px solid #CBD5E1; border-radius:.625rem;
  font-size:.875rem; font-weight:600; color:#475569; cursor:pointer; background:#fff; transition:.15s ease; }
.seg:hover { border-color:#94A3B8; }
.seg.is-on { border-color:#2563EB; background:#EFF4FF; color:#1D4ED8; box-shadow: inset 0 0 0 1px #2563EB; }

/* ---- Tableau de données ---- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.tbl thead th { position: sticky; top: 0; background: #F5F7FB; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748B;
  padding: .7rem .9rem; border-bottom: 1px solid #E7ECF3; z-index: 1; }
.tbl tbody td { padding: .8rem .9rem; border-bottom: 1px solid #EEF2F7; color: #334155; vertical-align: middle; }
.tbl tbody tr { transition: background-color .12s ease; }
.tbl tbody tr:hover { background: #F8FAFC; }
/* Variante compacte (cartes étroites : réserves stratégiques…) */
.tbl-compact thead th, .tbl-compact tbody td { padding-left: .55rem; padding-right: .55rem; }
.tbl-compact tbody td:first-child, .tbl-compact thead th:first-child { padding-left: 0; }
.tbl-compact tbody td:last-child, .tbl-compact thead th:last-child { padding-right: 0; }

/* Onglets */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid #E7ECF3; }
.tab { padding: .6rem .2rem; margin: 0 .8rem; font-size: .875rem; font-weight: 600; color: #64748B; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; }
.tab:first-child { margin-left: 0; }
.tab:hover { color: #0F1B2D; }
.tab.is-on { color: #2563EB; border-bottom-color: #2563EB; }

/* Matrice de permissions (utilisateurs) */
.perm-yes { color: #16A34A; }
.perm-no  { color: #CBD5E1; }

/* Cartes Leaflet arrondies */
.leaflet-container { border-radius: .75rem; font-family: Inter, sans-serif; }
.map-shell { border-radius: .75rem; overflow: hidden; border: 1px solid #E7ECF3; }

/* Animation apparition douce */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .4s ease both; }

/* Animations respectueuses */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}