/* ============================================================================
   sogedi-ui.css  —  Design system & polish du WebSIG SOGEDI
   Charge APRES Tailwind CDN. Conserve l'identite : vert #3E8E41 / orange #F18E00.
   Additif : n'ecrase pas le comportement existant, enrichit les classes en place
   (.sogedi-header, .module-*, .leaflet-*) et ajoute des composants reutilisables.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS  (nuanciers derives des couleurs officielles SOGEDI)
   --------------------------------------------------------------------------- */
:root {
  /* Couleurs historiques conservees (compat avec l'existant) */
  --sogedi-green: #3E8E41;
  --sogedi-orange: #F18E00;
  --sogedi-white: #ffffff;
  --sogedi-dark: #222222;

  /* Nuancier vert SOGEDI */
  --sg-green-50:  #edf7ee;
  --sg-green-100: #d3ebd5;
  --sg-green-200: #a9d7ad;
  --sg-green-300: #7cc081;
  --sg-green-400: #57a85d;
  --sg-green-500: #3E8E41;   /* base */
  --sg-green-600: #347836;
  --sg-green-700: #2a602c;
  --sg-green-800: #214a23;
  --sg-green-900: #173518;

  /* Nuancier orange SOGEDI */
  --sg-orange-50:  #fff6e8;
  --sg-orange-100: #ffe7c2;
  --sg-orange-200: #ffd089;
  --sg-orange-300: #ffb74d;
  --sg-orange-400: #fa9f1e;
  --sg-orange-500: #F18E00;  /* base */
  --sg-orange-600: #cc7700;
  --sg-orange-700: #a35f00;
  --sg-orange-800: #7d4900;
  --sg-orange-900: #5c3600;

  /* Neutres */
  --sg-ink:      #1f2933;
  --sg-muted:    #6b7280;
  --sg-line:     #e5e7eb;
  --sg-surface:  #ffffff;
  --sg-bg:       #f7f8fa;

  /* Rayons & ombres */
  --sg-radius-sm: 8px;
  --sg-radius:    14px;
  --sg-radius-lg: 20px;
  --sg-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sg-shadow:    0 8px 24px rgba(16,24,40,.08);
  --sg-shadow-lg: 0 18px 48px rgba(16,24,40,.16);
  --sg-ring:      0 0 0 3px rgba(241,142,0,.45);

  /* Transitions (neutralisees plus bas si prefers-reduced-motion) */
  --sg-ease:      cubic-bezier(.4, 0, .2, 1);
  --sg-dur-fast:  120ms;
  --sg-dur:       220ms;
  --sg-dur-slow:  360ms;
}

/* ---------------------------------------------------------------------------
   2. BASE / TYPO
   --------------------------------------------------------------------------- */
body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Alpine : masque les elements en attente d'initialisation (evite le flash) */
[x-cloak] { display: none !important; }

/* Harmonise l'ombre douce historique avec le nouveau token */
.shadow-soft { box-shadow: var(--sg-shadow) !important; }

/* Scrollbars discretes (modules, panneaux) */
.sg-scroll, .module-list, .module-shell {
  scrollbar-width: thin;
  scrollbar-color: var(--sg-green-300) transparent;
}
.sg-scroll::-webkit-scrollbar,
.module-list::-webkit-scrollbar { width: 8px; height: 8px; }
.sg-scroll::-webkit-scrollbar-thumb,
.module-list::-webkit-scrollbar-thumb {
  background: var(--sg-green-300); border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   3. ACCESSIBILITE — focus visible homogene (WCAG 2.4.7)
   --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sg-ring);
  border-radius: var(--sg-radius-sm);
}
/* Lien d'evitement (skip link) revele au focus clavier */
.sg-skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 2000;
  background: var(--sg-green-600); color: #fff;
  padding: .55rem .9rem; border-radius: var(--sg-radius-sm);
  font-size: .85rem; font-weight: 600;
  transition: top var(--sg-dur) var(--sg-ease);
}
.sg-skip-link:focus { top: 8px; }
.sg-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   4. HEADER  (conserve le degrade vert -> orange, raffine)
   --------------------------------------------------------------------------- */
.sogedi-header {
  background: linear-gradient(95deg,
              var(--sg-green-600) 0%,
              var(--sg-green-500) 38%,
              var(--sg-orange-500) 100%) !important;
  border-bottom: 2px solid var(--sg-orange-500);
  box-shadow: var(--sg-shadow-sm);
  backdrop-filter: saturate(1.1);
}
.sogedi-header .sg-header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sg-radius);
  transition: background var(--sg-dur-fast) var(--sg-ease),
              transform var(--sg-dur-fast) var(--sg-ease);
}
.sogedi-header .sg-header-btn:hover { background: rgba(255,255,255,.14); }
.sogedi-header .sg-header-btn:active { transform: scale(.94); }

/* Bouton bascule de langue FR/EN */
.sg-lang {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 9999px; padding: .2rem .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: rgba(255,255,255,.08);
  transition: background var(--sg-dur-fast) var(--sg-ease);
}
.sg-lang:hover { background: rgba(255,255,255,.2); }
.sg-lang [data-lang-current] { text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   5. COMPOSANTS — cartes module & boutons (enrichit l'existant home37)
   --------------------------------------------------------------------------- */
/* Adoucit le contenant des panneaux : on remplace la bordure+ring orange
   criarde par une bordure neutre, une ombre douce et un fin liseré d'accent. */
.module-shell {
  border: 1px solid var(--sg-line) !important;
  box-shadow: var(--sg-shadow) !important;   /* annule le ring orange */
  border-radius: var(--sg-radius-lg);
  position: relative; overflow: hidden;
}
.module-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sg-green-500), var(--sg-orange-500));
}
.module-header { border-bottom-color: var(--sg-line) !important; }

.js-module-link {
  transition: border-color var(--sg-dur) var(--sg-ease),
              box-shadow var(--sg-dur) var(--sg-ease),
              transform var(--sg-dur-fast) var(--sg-ease),
              background var(--sg-dur) var(--sg-ease);
}
.js-module-link:hover { transform: translateY(-1px); }
.js-module-link.is-active {
  background: linear-gradient(180deg, var(--sg-orange-50), #fff) !important;
}
.module-icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--sg-radius-sm);
  background: var(--sg-green-50); color: var(--sg-green-700);
  transition: background var(--sg-dur) var(--sg-ease), color var(--sg-dur) var(--sg-ease);
}
.js-module-link.is-active .module-icon-wrap {
  background: var(--sg-orange-100); color: var(--sg-orange-700);
}
.module-desc { font-size: .78rem; color: var(--sg-muted); line-height: 1.3; }
.module-subtitle { font-size: .78rem; color: var(--sg-muted); }

/* Boutons generiques module (.module-btn existe deja dans home37) */
.module-btn {
  border-radius: 9999px; font-weight: 600; font-size: .85rem;
  padding: .5rem .9rem; cursor: pointer;
  transition: transform var(--sg-dur-fast) var(--sg-ease),
              box-shadow var(--sg-dur) var(--sg-ease),
              filter var(--sg-dur-fast) var(--sg-ease);
}
.module-btn:hover { filter: brightness(1.03); }
.module-btn:active { transform: translateY(1px); }
.module-btn--primary {
  background: linear-gradient(135deg, var(--sg-orange-500), var(--sg-orange-600));
  color: #fff; box-shadow: var(--sg-shadow-sm);
}
.module-btn--secondary {
  background: var(--sg-green-50); color: var(--sg-green-700);
  border: 1px solid var(--sg-green-200);
}

/* ---------------------------------------------------------------------------
   6. POPUPS LEAFLET — repris de sogedi.css, harmonises avec les tokens
   (sogedi.css reste charge ; ces regles affinent sans casser)
   --------------------------------------------------------------------------- */
.leaflet-popup-content-wrapper.sogedi-popup-wrapper {
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow-lg);
}
.sogedi-popup-title { color: var(--sg-orange-600); }

/* ---------------------------------------------------------------------------
   7. ANIMATIONS & TRANSITIONS  (Etape B)
   --------------------------------------------------------------------------- */
@keyframes sg-fade-in     { from { opacity: 0 } to { opacity: 1 } }
@keyframes sg-fade-in-up  { from { opacity: 0; transform: translateY(10px) }
                            to   { opacity: 1; transform: none } }
@keyframes sg-spin        { to { transform: rotate(360deg) } }
@keyframes sg-shimmer     { 100% { transform: translateX(100%) } }

/* Entree de page : le contenu principal apparait en douceur */
.sg-anim-main { animation: sg-fade-in-up var(--sg-dur-slow) var(--sg-ease) both; }

/* Overlay de chargement (masque l'ecran au boot, disparait au window.load) */
@keyframes sg-breathe {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .82; transform: scale(.975); }
}
@keyframes sg-indeterminate {
  0%   { left: -42%; width: 42%; }
  50%  { width: 56%; }
  100% { left: 100%; width: 42%; }
}
.sg-page-loader {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background:
    radial-gradient(120% 90% at 50% 38%, #ffffff 0%, #ffffff 55%, var(--sg-green-50) 100%);
  transition: opacity var(--sg-dur-slow) var(--sg-ease),
              visibility var(--sg-dur-slow) var(--sg-ease);
}
.sg-page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.sg-page-loader__logo {
  width: clamp(190px, 52vw, 320px); height: auto;
  filter: drop-shadow(0 10px 22px rgba(16,24,40,.12));
  animation: sg-breathe 1.8s var(--sg-ease) infinite;
}
/* Piste + segment animé sous le logo */
.sg-page-loader__bar {
  position: relative; width: clamp(150px, 42vw, 220px); height: 4px;
  border-radius: 9999px; overflow: hidden;
  background: var(--sg-green-100);
}
.sg-page-loader__bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 42%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--sg-green-500), var(--sg-orange-500));
  animation: sg-indeterminate 1.25s var(--sg-ease) infinite;
}

/* Barre de progression fine en haut (chargement de tuiles / requetes) */
.sg-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 5000; pointer-events: none;
  background: linear-gradient(90deg, var(--sg-green-500), var(--sg-orange-500));
  box-shadow: 0 0 8px rgba(241,142,0,.6);
  transition: width var(--sg-dur) var(--sg-ease), opacity var(--sg-dur) var(--sg-ease);
  opacity: 0;
}
.sg-progress.is-active { opacity: 1; }

/* Placeholder shimmer reutilisable */
.sg-skeleton {
  position: relative; overflow: hidden; background: var(--sg-line);
  border-radius: var(--sg-radius-sm);
}
.sg-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: sg-shimmer 1.4s infinite;
}

/* ---------------------------------------------------------------------------
   8. RESPONSIVE  (Etape B) — drawers mobiles, cibles tactiles
   Desktop (>= 768px) : layout grille d'origine inchange.
   --------------------------------------------------------------------------- */

/* Backdrop des drawers (mobile uniquement) */
.sg-drawer-backdrop {
  position: fixed; inset: 4rem 0 0 0; z-index: 1450;
  background: rgba(16,24,40,.45); backdrop-filter: blur(1px);
}

/* Sous 1024px (mobile + tablette) : la carte occupe tout l'ecran,
   les panneaux deviennent des tiroirs en superposition. */
@media (max-width: 1023.98px) {
  /* La grille tombe en pleine largeur ; la carte reste toujours visible */
  main.sg-shell { gap: .5rem !important; padding: .5rem !important; }

  main > .sg-aside {
    position: fixed; top: 4rem; bottom: 0; z-index: 1500;
    width: min(88vw, 360px); max-width: 94vw;
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-lg);
    overflow-y: auto; padding: .5rem;
  }
  main > .sg-aside--left  { left: 0;  border-right: 2px solid var(--sg-orange-500); }
  main > .sg-aside--right { right: 0; border-left:  2px solid var(--sg-orange-500); }
}

/* Cibles tactiles confortables pour les controles Leaflet (>= 44px) */
@media (pointer: coarse) {
  .leaflet-bar a, .leaflet-touch .leaflet-bar a {
    width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  }
  .map-panel-toggle { width: 44px !important; height: 44px !important; }
}

/* Le backdrop ne s'affiche qu'en mode tiroir (< 1024px) */
@media (min-width: 1024px) { .sg-drawer-backdrop { display: none !important; } }

/* ---------------------------------------------------------------------------
   9. PREFERS-REDUCED-MOTION  (WCAG 2.3.3) — on coupe tout mouvement non essentiel
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .sg-page-loader__logo,
  .sg-page-loader__bar::before { animation: none !important; }
}

/* ===========================================================================
   10. THEME "ECLAT" SOGEDI  (couleurs denses + profondeur + etats vifs)
   Charge en dernier : surcharge base2 inline + home37. Identite vert/orange
   conservee, contrastes renforces (lisibilite WCAG : texte fonce, orange = accent).
   =========================================================================== */

/* --- Fond d'application : halos vert/orange tres doux pour faire ressortir
       les panneaux blancs (visible dans les gouttieres / derriere les cartes) --- */
body.bg-white {
  background:
    radial-gradient(1100px 560px at 102% -8%, var(--sg-orange-50) 0%, transparent 58%),
    radial-gradient(950px 640px at -8% 112%, var(--sg-green-50) 0%, transparent 52%),
    #eef1f4 !important;
}

/* --- HEADER : degrade plus profond + brillance + ombre coloree --- */
.sogedi-header {
  background: linear-gradient(108deg,
              var(--sg-green-700) 0%,
              var(--sg-green-500) 44%,
              var(--sg-orange-500) 100%);
  border-bottom: 2px solid var(--sg-orange-500);
  box-shadow: 0 8px 26px rgba(20,83,45,.30);
  position: relative;
  /* overflow:hidden retire : il coupait le menu deroulant Profil/Deconnexion.
     z-index releve au-dessus des controles carte (lx-mini 1100, toggle 1200)
     pour que le menu s'affiche par-dessus la carte. */
  z-index: 1300;
}
/* Le menu deroulant utilisateur passe au-dessus de tout le contenu carto */
.sogedi-header .relative > div[x-show] { z-index: 1400 !important; }
.sogedi-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 45%);
}
.sogedi-header > .mx-auto { position: relative; z-index: 1; }

/* --- PANNEAUX (module-shell) : surface nette, ombre marquee, liseré accent --- */
.module-shell {
  border: 1px solid rgba(20,83,45,.10) !important;
  box-shadow: 0 14px 38px rgba(16,24,40,.12) !important;
  border-radius: var(--sg-radius-lg);
  position: relative; overflow: hidden;
  background: #fff;
}
.module-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sg-green-600), var(--sg-orange-500));
}
.module-header h2 { color: var(--sg-green-800) !important; letter-spacing: -.01em; }
.module-subtitle, .module-desc { color: #5b6573 !important; }

/* --- CARTES MODULE : etat actif vif (rempli orange) + hover dynamique --- */
.js-module-link {
  border-radius: var(--sg-radius) !important;
  border: 1px solid var(--sg-line) !important;
  background: #fff;
}
.js-module-link:hover {
  border-color: var(--sg-green-300) !important;
  box-shadow: 0 8px 20px rgba(20,83,45,.12);
  transform: translateY(-2px);
}
.js-module-link.is-active {
  border-color: var(--sg-orange-400) !important;
  background: linear-gradient(180deg, var(--sg-orange-50), #fff) !important;
  box-shadow: 0 10px 24px rgba(241,142,0,.22);
}
.module-icon-wrap {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--sg-green-50), #fff);
  border: 1px solid rgba(20,83,45,.12);
  color: var(--sg-green-700);
}
.js-module-link:hover .module-icon-wrap {
  background: linear-gradient(135deg, var(--sg-green-500), var(--sg-green-600));
  color: #fff; border-color: transparent;
}
.js-module-link.is-active .module-icon-wrap {
  background: linear-gradient(135deg, var(--sg-orange-500), var(--sg-orange-600)) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 6px 14px rgba(241,142,0,.35);
}
.module-title-label { font-weight: 700; color: var(--sg-green-900); }
.js-module-link.is-active .module-title-label { color: var(--sg-orange-700) !important; }
.module-active-badge {
  background: linear-gradient(135deg, var(--sg-orange-500), var(--sg-orange-600)) !important;
  box-shadow: 0 2px 8px rgba(241,142,0,.4);
}

/* --- BOUTONS : primaire orange punchy, secondaire vert net --- */
.module-btn--primary {
  background: linear-gradient(135deg, var(--sg-orange-400), var(--sg-orange-600)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 8px 20px rgba(241,142,0,.32);
}
.module-btn--primary:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(241,142,0,.42); }
.module-btn--secondary {
  background: #fff !important; color: var(--sg-green-700) !important;
  border: 1.5px solid var(--sg-green-300) !important;
}
.module-btn--secondary:hover { background: var(--sg-green-50) !important; border-color: var(--sg-green-500) !important; }

/* --- PANNEAU "COUCHES CARTOGRAPHIQUES" (lx-mini) : en-tete degrade vif --- */
.lx-mini .lx-panel {
  border: 1px solid rgba(20,83,45,.14) !important;
  box-shadow: 0 18px 44px rgba(16,24,40,.20) !important;
}
.lx-mini .lx-header {
  background: linear-gradient(125deg,
              var(--sg-green-600) 0%, var(--sg-green-500) 52%, var(--sg-orange-500) 100%) !important;
  border-bottom: none !important;
}
.lx-mini .lx-header .title { color: #fff !important; }
.lx-mini .lx-subtitle { color: rgba(255,255,255,.88) !important; }
.lx-mini .lx-toggle-btn {
  background: rgba(255,255,255,.18) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.45) !important;
}
.lx-mini .lx-toggle-btn:hover { background: rgba(255,255,255,.32) !important; }
.lx-mini .lx-section-title {
  color: var(--sg-green-800) !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .04em;
}

/* --- TOGGLE PANNEAU carte (bouton couches en haut a droite) : plus visible --- */
.map-panel-toggle {
  background: linear-gradient(135deg, var(--sg-orange-500), var(--sg-orange-600)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 8px 20px rgba(241,142,0,.4) !important;
}
.map-panel-toggle:hover { filter: brightness(1.06); }

/* ===========================================================================
   11. PAGES AUTH (login / signup) — alignement identite SOGEDI + eclat
   sogedi-ui.css charge apres le <style> de login/signup -> surcharge propre.
   =========================================================================== */
.auth-overlay {
  background: radial-gradient(circle at top, rgba(20,83,45,.32), rgba(0,0,0,.82)) !important;
}
.auth-card {
  max-width: 380px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 26px 64px rgba(16,24,40,.45) !important;
  border-width: 4px 0 0 0 !important; border-style: solid !important;
  border-image: linear-gradient(90deg, var(--sg-green-500), var(--sg-orange-500)) 1 !important;
  animation: sg-fade-in-up var(--sg-dur-slow) var(--sg-ease) both;
}
.auth-header span { color: var(--sg-orange-600) !important; }
.auth-title { color: var(--sg-green-800) !important; }
.auth-subtitle { color: #5b6573 !important; }

/* Champs : .auth-input (login) + champs Django (signup via form.as_p) */
.auth-input,
.auth-card form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.auth-card form select {
  width: 100% !important;
  padding: .6rem .85rem !important;
  border: 1.5px solid var(--sg-line) !important;
  border-radius: 12px !important;
  font-size: .95rem !important;
  margin-bottom: .6rem !important;
  transition: border-color var(--sg-dur) var(--sg-ease), box-shadow var(--sg-dur) var(--sg-ease);
}
.auth-input:focus,
.auth-card form input:focus,
.auth-card form select:focus {
  outline: none !important;
  border-color: var(--sg-orange-400) !important;
  box-shadow: var(--sg-ring) !important;
}
.auth-card form label {
  display: block; margin-bottom: .2rem;
  font-size: .8rem; font-weight: 600; color: var(--sg-green-800);
}
.auth-card form ul.errorlist,
.auth-card form .errorlist {
  list-style: none; padding: 0; margin: .1rem 0 .5rem;
  color: #b91c1c; font-size: .75rem;
}
.auth-card form .helptext {
  display: block; color: #6b7280; font-size: .72rem; margin: -.3rem 0 .6rem;
}

.auth-btn-primary {
  background: linear-gradient(135deg, var(--sg-orange-400), var(--sg-orange-600)) !important;
  box-shadow: 0 10px 24px rgba(241,142,0,.4) !important;
  transition: filter var(--sg-dur-fast) var(--sg-ease), box-shadow var(--sg-dur) var(--sg-ease);
}
.auth-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 30px rgba(241,142,0,.5) !important; }
.auth-link { color: var(--sg-orange-600) !important; }
.auth-link:hover { color: var(--sg-orange-700) !important; text-decoration: underline; }

/* ===========================================================================
   12. POLISH ETENDU — modules (Analyse/Export), legende Couches, popups, inputs
   =========================================================================== */

/* Couleur d'accent des controles natifs (radios fonds de carte, sliders, cases) */
input[type="radio"], input[type="checkbox"] { accent-color: var(--sg-orange-500); }
.lx-mini input[type="range"], .lx-mini .lx-range, input[type="range"].lx-range { accent-color: var(--sg-orange-500); }

/* --- Cartes & sections internes des modules (Analyse, Export, Recherche) --- */
.module-card {
  border: 1px solid var(--sg-line) !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: var(--sg-shadow-sm) !important;
}
.module-card--soft { background: linear-gradient(180deg, var(--sg-green-50), #fff) !important; }
.module-card__title { color: var(--sg-green-800) !important; font-weight: 700 !important; }
.module-card__desc  { color: #5b6573 !important; }
.module-section-label {
  color: var(--sg-orange-600) !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .05em; font-size: .65rem !important;
}
.module-kpi, .module-fold__pill {
  background: var(--sg-green-50) !important; color: var(--sg-green-700) !important;
  border: 1px solid var(--sg-green-200) !important; border-radius: 9999px !important;
}
.module-fold > summary { font-weight: 700; color: var(--sg-green-800); }
.module-fold > summary:hover { color: var(--sg-orange-600); }
.module-note { color: #6b7280 !important; }

/* --- Sections de filtres (panneau Recherche) --- */
.fp-compact-section, .filter-panel .fp-compact-section {
  border: 1px solid var(--sg-line) !important; border-radius: 12px !important;
  background: #fff; box-shadow: var(--sg-shadow-sm);
}
.fp-summary-tag {
  background: linear-gradient(135deg, var(--sg-green-500), var(--sg-green-600)) !important;
  color: #fff !important;
}
.fp-badge {
  background: var(--sg-orange-50) !important; color: var(--sg-orange-700) !important;
  border: 1px solid var(--sg-orange-200) !important;
}
.fp-chip {
  background: var(--sg-green-50) !important; color: var(--sg-green-800) !important;
  border: 1px solid var(--sg-green-200) !important; border-radius: 9999px !important;
}
.fp-chip b { color: var(--sg-orange-700) !important; }
.fp-btn-reset {
  background: #fff !important; color: var(--sg-orange-700) !important;
  border: 1.5px solid var(--sg-orange-300) !important; border-radius: 9999px !important;
  transition: background var(--sg-dur) var(--sg-ease);
}
.fp-btn-reset:hover { background: var(--sg-orange-50) !important; }

/* --- Legende du panneau "Couches cartographiques" --- */
.lx-mini .lx-row {
  border-radius: 8px;
  transition: background var(--sg-dur) var(--sg-ease);
}
.lx-mini .lx-row:hover { background: var(--sg-green-50); }
.lx-mini .lx-swatch, .lx-mini .lx-dot, .lx-mini .lx-dot--base {
  box-shadow: 0 0 0 1px rgba(16,24,40,.08);
}
.lx-mini .lx-legend-item { padding: 3px 2px; }
.lx-mini .lx-opacity-text { color: var(--sg-green-700) !important; font-weight: 600; }

/* --- Popups Leaflet : titre souligne d'un accent --- */
.leaflet-popup-content-wrapper.sogedi-popup-wrapper { border-color: var(--sg-orange-400); }
.sogedi-popup-title {
  color: var(--sg-orange-600); border-bottom: 1px solid var(--sg-line);
  padding-bottom: 5px; margin-bottom: 7px;
}