/* ═══════════════════════════════════════════════════════════════════════════
   CARTOGRAPHIE ÉCOSYSTÈME ESTRIE — Feuille de styles
   ═══════════════════════════════════════════════════════════════════════════

   STRUCTURE DU FICHIER (utilise Ctrl+F pour naviguer) :

     1. VARIABLES DE MARQUE        — couleurs, polices, palettes par catégorie
     2. ENCADRÉ RÉGION ESTRIE      — style du polygone (optionnel)
     3. RESET & BASE               — body, scrollbars
     4. HEADER                     — logo, recherche, dropdown type
     5. SIDEBAR & FILTRES          — panneau de gauche
     6. LISTE DES ORGANISMES       — cartes dans la sidebar
     7. CARTE LEAFLET              — popups, markers, légende
     8. ONGLETS & VUE LISTE        — Carte / Liste complète
     9. UI MOBILE                  — boutons flottants, drawer, bottom sheet
    10. RESPONSIVE                 — media queries (tablette, mobile)

   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. VARIABLES DE MARQUE ─────────────────────────────────────────────── */

:root {
  /* Fonds & surfaces */
  --bg:        #f5f5f3;
  --surface:   #ffffff;
  --surface2:  #ebebea;
  --border:    #e2e0dd;

  /* Texte */
  --text:      #231F20;
  --muted:     #9e9b98;

  /* Couleurs par catégorie d'acteur (palette Économie Estrie) */
  --c-fin:   #c05a00;  /* Financement       — orange */
  --c-rd:    #085C34;  /* R&D               — vert foncé */
  --c-rr:    #1455a4;  /* Réseau régional   — bleu */
  --c-sr:    #6b1fa0;  /* Soutien régional  — violet */
  --c-rsec:  #b52020;  /* Réseau sectoriel  — rouge */
  --c-ssec:  #00695c;  /* Soutien sectoriel — sarcelle */

  /* Versions claires (fond) des couleurs par catégorie */
  --bg-fin:  rgba(192, 90, 0,  .12);
  --bg-rd:   rgba(8,   92, 52, .12);
  --bg-rr:   rgba(20,  85, 164,.12);
  --bg-sr:   rgba(107, 31, 160,.12);
  --bg-rsec: rgba(181, 32, 32, .12);
  --bg-ssec: rgba(0,  105, 92, .12);

  /* Marqueurs sur la carte */
  --marker-bg:     #00CA80;
  --marker-border: #ffffff;

  /* Accent vert (boutons actifs, indicateurs) */
  --gv: #00CA80;
  --gd: #085C34;

  /* Ombre standard */
  --shadow: 0 0.25rem 1.5rem rgba(35, 31, 32, .12);

  /* Typographie */
  --font: 'Poppins', sans-serif;
}


/* ─── 2. ENCADRÉ RÉGION ESTRIE (optionnel) ───────────────────────────────── */

:root {
  --estrie-fill:           rgba(0, 202, 128, .15);
  --estrie-stroke:         #00CA80;
  --estrie-stroke-width:   1.5;
  --estrie-stroke-opacity: .8;
  --estrie-fill-opacity:   .15;
  --estrie-stroke-dash:    "";
}


/* ─── 3. RESET & BASE ────────────────────────────────────────────────────── */

* {
   box-sizing: border-box; margin: 0; padding: 0;
}

html {
   font-size: 110%; /* Augmente tout de 10% */
}

body {
   font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}


/* ─── 4. HEADER ──────────────────────────────────────────────────────────── */

header {
   display: flex; align-items: center; gap: 0.75rem; padding: 0.5625rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 1000;
   background-color: #eaf4ee; /* background: var(--surface); */
}

.logo {
   display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; margin-right: 20px;
}

.logo-img {
   height: 3.375rem; width: auto; display: block;
}

.logo-text {
   font-family: var(--font); font-size: 0.9375rem; line-height: 1.15;  display: none;
}

.logo-text span {
   display: block; font-size: 0.625rem; font-weight: 400; color: var(--muted); letter-spacing: 0.05625rem; text-transform: uppercase;
}

.search-wrap {
   flex: 1; max-width: 20rem; position: relative;
}

.search-wrap input {
   width: 100%; padding: 0.4375rem 0.625rem 0.4375rem 1.875rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.4375rem; color: var(--text); font-family: var(--font); font-size: 0.8125rem; outline: none; transition: border-color .2s;
}

.search-wrap input:focus {
   border-color: var(--c-rr);
}

.search-wrap input::placeholder {
   color: var(--muted);
}

.s-ico {
   position: absolute; left: 0.5625rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.8125rem; pointer-events: none;
}

.type-dropdown-wrap {
   position: relative; flex-shrink: 0;
}

.type-dropdown-btn {
   display: flex; align-items: center; gap: 0.375rem; padding: 0.6rem 0.6875rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 0.5rem; color: var(--text); font-family: var(--font); font-size: 0.8125rem; cursor: pointer; transition: all .15s; white-space: nowrap; min-width: 12.5rem; justify-content: space-between;
}

.type-dropdown-btn:hover {
   border-color: var(--c-rr);
}

.type-dropdown-btn.open {
   border-color: var(--c-rr); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

.type-dropdown-label {
   display: flex; align-items: center; gap: 0.375rem;
}

.type-dropdown-arrow {
   font-size: 0.6875rem; color: var(--muted); transition: transform .2s;
}

.type-dropdown-arrow.open {
   transform: rotate(180deg);
}

.type-dropdown-menu {
   position: absolute; top: 100%; left: 0; right: 0; background: var(--surface2); border: 1px solid var(--c-rr); border-top: none; border-radius: 0 0 0.5rem 0.5rem; z-index: 2000; overflow: hidden; display: none; box-shadow: var(--shadow);
}

.type-dropdown-menu.open {
   display: block;
}

.type-group-label {
   padding: 0.375rem 0.6875rem 0.1875rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05rem; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border);
}

.type-group-label:first-child {
   border-top: none;
}

.type-opt {
   display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.6875rem; cursor: pointer; font-size: 0.8125rem; color: var(--text); transition: background .12s;
}

.type-opt:hover {
   background: rgba(255, 255, 255, .05);
}

.type-opt.on {
   background: rgba(255, 255, 255, .04);
}

.type-opt .check {
   width: 0.875rem; height: 0.875rem; border-radius: 0.1875rem; border: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; transition: all .15s;
}

.type-opt.on .check {
   border-color: currentColor; background: currentColor; color: #000;
}

.opt-dot {
   width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0;
}

.type-selected-pills {
   display: flex; flex-wrap: wrap; gap: 0.25rem; margin-left: 0.25rem;
}

.sel-pill {
   padding: 0.125rem 0.4375rem; border-radius: 0.625rem; font-size: 0.6875rem; font-weight: 500; border: 1px solid;
}

.c-fin { color: var(--c-fin); } .bg-fin { background: var(--bg-fin); border-color: rgba(192, 90, 0, .3); }
.c-rd { color: var(--c-rd); } .bg-rd { background: var(--bg-rd); border-color: rgba(8, 92, 52, .3); }
.c-rr { color: var(--c-rr); } .bg-rr { background: var(--bg-rr); border-color: rgba(20, 85, 164, .3); }
.c-sr { color: var(--c-sr); } .bg-sr { background: var(--bg-sr); border-color: rgba(107, 31, 160, .3); }
.c-rsec { color: var(--c-rsec); } .bg-rsec { background: var(--bg-rsec); border-color: rgba(181, 32, 32, .3); }
.c-ssec { color: var(--c-ssec); } .bg-ssec { background: var(--bg-ssec); border-color: rgba(0, 105, 92, .3); }


/* ─── 5. SIDEBAR & FILTRES ───────────────────────────────────────────────── */

.main {
   display: flex; flex: 1; overflow: hidden; border-bottom: 10px solid #eaf4ee;
}

.sidebar {
   width: 18.4375rem; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;
}

.sidebar > .drawer-hdr {
   display: none;
}

.filters {
   padding: 0.5625rem 0.6875rem 0.9rem 0.6875rem; /* border-bottom: 1px solid var(--border); */ display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto;
}

.f-label {
   font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05625rem; text-transform: uppercase; color: var(--muted); margin-bottom: 0.1875rem; display: none;
}

.f-note {
   font-size: 0.5625rem; color: #ffab3c; margin-left: 0.25rem;
}

.filter-select {
   width: 100%; padding: 0.4375rem 1.75rem 0.4375rem 0.625rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.4375rem; color: var(--text); font-family: var(--font); font-size: 0.75rem; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239e9b98'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; transition: border-color .15s;
}

.filter-select:focus, .filter-select:hover {
   border-color: var(--c-rr);
}

.filter-select.active {
   border-color: var(--gv); background-color: rgba(0, 202, 128, .06); color: var(--gd); font-weight: 500;
}

.filter-select option {
   background: var(--surface); color: var(--text);
}

.reset-btn {
   width: 100%; padding: 0.3125rem; background: transparent; border: 1px solid var(--border); border-radius: 0.4375rem; color: var(--muted); font-family: var(--font); font-size: 0.75rem; cursor: pointer; transition: all .2s;
   display: none;
}

.reset-btn:hover {
   border-color: #aaa; color: var(--text);
}


/* ─── 6. LISTE DES ORGANISMES (sidebar) ──────────────────────────────────── */

.results-hdr {
   padding: 0.375rem 0.6875rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid var(--border);
}

.results-cnt {
   font-size: 0.75rem; color: var(--muted);
}

.results-cnt strong {
   /* color: var(--text); */ font-weight: 400;
}

.prov-badge {
   font-size: 0.59375rem; padding: 0.125rem 0.375rem; background: rgba(255, 171, 60, .1); border: 1px solid rgba(255, 171, 60, .3); border-radius: 0.5rem; color: #ffab3c;
}

.org-list {
   overflow-y: auto; flex: 1; padding: 0.25rem 0.3125rem 0.375rem;
}

.org-list::-webkit-scrollbar {
   width: 0.1875rem;
}

.org-list::-webkit-scrollbar-thumb {
   background: var(--border); border-radius: 0.1875rem;
}

.ocard {
   padding: 0.5rem 0.5625rem; border-radius: 0; cursor: pointer; border: 1px solid transparent; margin-bottom: 0.125rem; transition: all .12s;
   border-bottom: 1px solid #ccc;
}

.ocard:hover {
   background: var(--surface2); border-color: var(--border);
}

.ocard.sel {
   background: var(--surface2); border-color: var(--c-rr);
}

.ocard-top {
   display: flex; align-items: flex-start; justify-content: space-between; gap: 0.3125rem; margin-bottom: 0.5rem;
}

.oname {
   font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.3;
}

.obadge {
   padding: 0.0625rem 0.375rem; border-radius: 0.625rem; font-size: 0.625rem; font-weight: 600; flex-shrink: 0; margin-top: 0.0625rem;
}

.ometa {
   font-size: 0.6875rem; color: var(--muted);
}

.othemes {
   display: flex; flex-wrap: wrap; gap: 0.125rem; margin-top: 0.125rem;
}

.otag {
   font-size: 0.625rem; padding: 0.0625rem 0.3125rem; border-radius: 0.5rem; 
   color: #999; background-color: #f6f6f6; border: 1px solid #dedede;
   /*background: rgba(255, 171, 60, .08); border: 1px solid rgba(255, 171, 60, .2); color: #ffab3c;*/
}

.olink {
   display: inline-flex; align-items: center; gap: 0.1875rem; font-size: 0.6875rem; color: var(--c-rr); text-decoration: none; margin-top: 0.1875rem;
}

.olink:hover {
   text-decoration: underline;
}

.no-res {
   padding: 1.5rem 0.75rem; text-align: center; color: var(--muted); font-size: 0.8125rem; line-height: 1.7;
}


/* ─── 7. CARTE LEAFLET ───────────────────────────────────────────────────── */

.leaflet-container {
   background: var(--bg) !important; font-family: var(--font) !important;
}

.leaflet-tile-pane {
   filter: saturate(0) brightness(1.15) contrast(0.82);
}

.leaflet-popup-content-wrapper {
   background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 0.75rem !important; box-shadow: var(--shadow) !important; padding: 0 !important; overflow: hidden;
   /* border-top: 0.1875rem solid var(--gv) !important;*/
}

.leaflet-popup-tip {
   background: var(--surface) !important;
}

.leaflet-popup-close-button {
   color: var(--muted) !important; top: 0.5rem !important; right: 0.5rem !important;
}

.leaflet-popup-content {
   margin: 0 !important; width: 16.75rem !important; font-family: var(--font) !important; /* min-height: 100px; */
}

.leaflet-control-zoom a {
   background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important;
}

.pop-inner {
   padding: 0.75rem 0.875rem;
}

.pop-type {
   display: inline-block; padding: 0.125rem 0.4375rem; border-radius: 0.625rem; font-size: 0.65625rem; font-weight: 600; margin-bottom: 0.375rem;
}

.pop-name {
   font-size: 0.975rem; font-weight: 600; color: var(--text); margin-bottom: 0.125rem; line-height: 1.3;
}

.pop-sous {
   font-size: 0.71875rem; color: var(--muted); margin-bottom: 0.4375rem;
}

.pop-row {
   font-size: 0.75rem; color: var(--muted); margin-bottom: 0.1875rem;
}

.pop-row a {
   color: var(--c-rr); text-decoration: none;
}

.pop-row a:hover {
   text-decoration: underline;
}

.pop-div {
   height: 0.0625rem; background: var(--border); margin: 0.4375rem 0;
}

.pop-th-label {
   font-size: 0.59375rem; text-transform: uppercase; letter-spacing: 0.04375rem; color: var(--muted); margin-bottom: 0.1875rem;
}

.pop-tags {
   display: flex; flex-wrap: wrap; gap: 0.1875rem; margin-bottom: 0.25rem;
}

.pop-tag {
   font-size: 0.65625rem; padding: 0.0625rem 0.375rem; border-radius: 0.5rem; color: #999; background-color: #f6f6f6; border: 1px solid #dedede;  
   /* background: rgba(255, 171, 60, .1); border: 1px solid rgba(255, 171, 60, .3); color: #ffab3c; */
}

.map-legend {
   position: absolute; bottom: 1.125rem; right: 0.625rem; z-index: 999; background: var(--surface); border: 1px solid var(--border); border-radius: 0.625rem; padding: 0.5rem 0.75rem; box-shadow: var(--shadow);
}

.leg-title {
   font-weight: 600; color: var(--muted); margin-bottom: 0.3125rem; font-size: 0.625rem; letter-spacing: 0.04375rem; text-transform: uppercase;
}

.leg-row {
   display: flex; align-items: center; gap: 0.375rem; color: var(--text); margin-bottom: 0.1875rem; font-size: 0.6875rem;
}

.leg-dot {
   width: 0.6875rem; height: 0.6875rem; border-radius: 50%; flex-shrink: 0; background: var(--marker-bg); border: 0.125rem solid var(--marker-border); box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .2);
}

.pop-name-estrie-polygon {
   text-align: center; padding: 0 30px;
}


/* ─── 8. ONGLETS & VUE LISTE ─────────────────────────────────────────────── */

.tabs {
   display: flex; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0;
}

.tab {
   padding: 0.5rem 1rem; font-family: var(--font); font-size: 0.75rem; font-weight: 500; color: var(--muted); border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer;
}

.tab.active {
   color: var(--gd); border-bottom-color: var(--gv);
}

.list-view {
   flex: 1; overflow-y: auto; padding: 0.75rem; display: none; background: var(--bg);
}

.list-view.active {
   display: block;
}

.lv-card {
   background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 0.875rem; margin-bottom: 0.5rem;
}

.lv-card-top {
   display: flex; align-items: flex-start; justify-content: space-between; gap: 0.375rem; margin-bottom: 0.25rem;
}

.lv-name {
   font-size: 0.8125rem; font-weight: 600; color: var(--text);
}

.lv-meta {
   font-size: 0.6875rem; color: var(--muted); margin-bottom: 0.375rem;
}

.lv-grid {
   display: grid; grid-template-columns: 1fr 1fr; gap: 0.1875rem 0.625rem; font-size: 0.6875rem; color: var(--muted);
}

.lv-grid a {
   color: var(--gv); text-decoration: none;
}

.lv-themes {
   display: flex; flex-wrap: wrap; gap: 0.1875rem; margin-top: 0.375rem;
}

.lv-theme {
   font-size: 0.59375rem; padding: 0.0625rem 0.375rem; border-radius: 0.5rem;
   color: #999; background-color: #f6f6f6; border: 1px solid #dedede;
   /*background: #fffbeb;  border: 1px solid #fcd34d; color: #92400e;*/
}


/* ─── 9. UI MOBILE (boutons flottants, drawer, bottom sheet) ─────────────── */

.fab {
   position: fixed; z-index: 1100; display: none; align-items: center; gap: 0.375rem; padding: 0.625rem 0.875rem; background: var(--surface); border: 1px solid var(--border); border-radius: 62.4375rem; box-shadow: var(--shadow); font-family: var(--font); font-size: 0.8125rem; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}

.fab:active {
   background: var(--surface2);
}

.fab-filters {
   top: 4.375rem; left: auto; right: 0.75rem;
}

.fab-count {
   background: var(--gv); color: #fff; border-radius: 0.625rem; padding: 0.0625rem 0.4375rem; font-size: 0.75rem; font-weight: 600;
}

.backdrop {
   position: fixed; inset: 0; background: rgba(35, 31, 32, .35); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 1200;
}

.backdrop.show {
   opacity: 1; pointer-events: auto;
}

.drawer {
   position: fixed; top: 0; left: 0; right: 0; max-height: 85vh; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 0 0 1rem 1rem; box-shadow: var(--shadow); transform: translateY(-100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); z-index: 1300; display: flex; flex-direction: column;
}

.drawer.open {
   transform: translateY(0);
}

.drawer-hdr {
   display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border);
}

.drawer-title {
   font-size: 0.9375rem; font-weight: 600; color: var(--text);
}

.drawer-close {
   background: transparent; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem;
}

.drawer-close:hover {
   background: var(--surface2);
}

.drawer-body {
   padding: 1rem; overflow-y: auto; flex: 1;
}

.sheet {
   position: fixed; bottom: 0; left: 0; right: 0; height: 60vh; background: var(--surface); border-top: 1px solid var(--border); border-radius: 1rem 1rem 0 0; box-shadow: 0 -0.25rem 1.5rem rgba(35, 31, 32, .15); transform: translateY(calc(100% - 3.5rem)); transition: transform .28s cubic-bezier(.4, 0, .2, 1); z-index: 1250; display: none; flex-direction: column;
}

.sheet.open {
   transform: translateY(0);
}

.sheet-handle {
   padding: 0.625rem 1rem 0.5rem; display: flex; flex-direction: column; align-items: center; cursor: pointer; flex-shrink: 0;
}

.sheet-grip {
   width: 2.25rem; height: 0.25rem; background: var(--border); border-radius: 0.125rem; margin-bottom: 0.5rem;
}

.sheet-label {
   font-size: 0.8125rem; font-weight: 500; color: var(--text);
}

.sheet-label strong {
   color: var(--gd); font-weight: 700;
}

.sheet-body {
   overflow-y: auto; flex: 1; padding: 0.25rem 0.75rem 1rem;
}


/* ─── 10. RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .sidebar {
     position: fixed; top: 0; bottom: 0; left: 0; z-index: 1300; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); box-shadow: var(--shadow); width: 20rem; max-width: 88vw;
  }
  .sidebar.open { transform: translateX(0); }
  .fab-filters { display: inline-flex; }
  .type-dropdown-wrap { display: none; }
  .sidebar > .drawer-hdr { display: flex; }
}

@media (max-width: 767px) {
  header {
     padding: 0.5rem 0.625rem; gap: 0.5rem; /* flex-wrap: wrap; */
  }
  .logo-img { height: 2.375rem; }
  .logo-text { display: none; }
  .search-wrap {
     flex: 1 1 100%; max-width: none; order: 2;
  }
  .sidebar { width: 88vw; max-width: 20rem; }
  .sidebar .results-hdr, .sidebar .org-list { display: none; }
  .fab-filters { display: inline-flex; top: 4rem; right: 0.75rem; left: auto; }
  .sheet { display: flex; }
  .tabs { display: none; }
  
  /*
  .list-view { display: none !important; }
  .main { display: block; height: calc(100vh - 4.375rem); }
  */

  
  .map-view { width: 100%; height: 100%; }
  .map-legend {
     bottom: calc(3.75rem + 0.75rem); right: 0.625rem; padding: 0.375rem 0.5rem; font-size: 0.625rem; max-width: 8.75rem;
  }
  
  .leg-row { font-size: 0.625rem; margin-bottom: 0.125rem; }
  .leg-dot { width: 0.5625rem; height: 0.5625rem; }
  .leaflet-popup-content { width: 15rem !important; }
  .pop-name { font-size: 0.9375rem; }
  .pop-row { font-size: 0.8125rem; }
  .leaflet-popup-close-button {
     font-size: 1.5rem !important; width: 2rem !important; height: 2rem !important; line-height: 1.875rem !important;
  }
  .leaflet-touch .leaflet-control-zoom a {
     width: 2.25rem !important; height: 2.25rem !important; line-height: 2.125rem !important; font-size: 1.5rem !important;
  }
}

@media (max-width: 380px) {
  .fab { padding: 0.5625rem 0.75rem; font-size: 0.75rem; }
  .fab-filters { right: 0.5rem; }
  .map-legend { display: none; }
}