/* =====================================================================
   Collectivités Conseils - Références
   Charte graphique : bleu #19445F (primaire), vert #6AA643 (complémentaire),
   gris-bleus #8CA1AF / #BAC7CF / #D9EBCD (secondaires), typographie Arial.
   ===================================================================== */

:root{
  --bg:#eaeef1;            /* fond clair (charte) */
  --panel:#ffffff;         /* panneau latéral blanc */
  --panel-2:#f3f7f9;       /* cartes / surfaces légères */
  --ink:#19445F;           /* bleu primaire - titres */
  --text:#233039;          /* texte courant */
  --muted:#5d7280;         /* texte secondaire */
  --border:#dbe3e8;        /* bordures claires */
  --green:#6AA643;         /* vert complémentaire (accent) */
  --green-d:#5b9139;       /* vert foncé (hover) */
  --blue:#19445F;          /* bleu primaire */
  --blue-grey:#8CA1AF;     /* secondaire */
  --chip-bg:#eef2f5;       /* chip inactif */
  --chip-active:#6AA643;   /* chip actif par défaut */
  --shadow:0 10px 30px rgba(25,68,95,.12);
  --shadow-sm:0 4px 14px rgba(25,68,95,.10);
  --panel-width:380px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Arial, "Arial Nova", Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow:hidden;
}

/* --- Vue plein écran --- */
.view{ position:relative; height:100%; display:none }
.view.active{ display:block }
#refApp{ position:relative; height:100% }

/* --- Carte --- */
#refMap{
  position:absolute; inset:0;
  background:#e4ebee;
}
/* Tuiles claires et désaturées : les marqueurs ressortent */
.leaflet-tile-pane{ filter: grayscale(100%) opacity(.55); }

/* --- Panneau latéral --- */
#refPanel{
  position:absolute; top:0; right:0; bottom:0; width:var(--panel-width);
  background:var(--panel);
  border-left:1px solid var(--border);
  box-shadow:-14px 0 34px rgba(25,68,95,.10);
  display:flex; flex-direction:column;
  transform:translateX(0);
  transition:transform .35s ease;
  z-index:1000;
}

.panel-header{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
}

/* Logo + sous-titre */
.brand{ display:flex; flex-direction:column; gap:0; align-items:flex-start }
.brand-logo{ height:50px; width:auto; max-width:100%; object-fit:contain; display:block }
.brand-sub{ margin:6px 0 0; font-size:12px; font-weight:700; color:var(--muted) }

/* Boutons d'export */
.export-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.export-actions button{ font-size:11px; padding:5px 9px; white-space:nowrap }

/* --- Contrôles --- */
.controls{ padding:12px; border-bottom:1px solid var(--border) }
.search-row{ display:flex; gap:8px; align-items:center }
#refSearch{
  flex:1; width:100%;
  padding:12px 14px 12px 42px; border-radius:12px;
  border:1.5px solid #c3d2db; outline:none;
  background:#fff url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2218%22%20height=%2218%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2319445F%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%227%22/%3E%3Cline%20x1=%2221%22%20y1=%2221%22%20x2=%2216.65%22%20y2=%2216.65%22/%3E%3C/svg%3E") no-repeat 14px center;
  background-size:18px 18px;
  color:var(--text); font-size:14px;
  box-shadow:0 1px 2px rgba(25,68,95,.06), 0 6px 16px rgba(25,68,95,.07);
  transition:border-color .18s ease, box-shadow .18s ease;
}
#refSearch::placeholder{ color:#8295a0 }
#refSearch:hover{ border-color:#9fb3bf }
#refSearch:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(106,166,67,.18), 0 6px 18px rgba(25,68,95,.10);
}

.soft{
  border:1px solid var(--border); background:#fff; color:var(--ink);
  border-radius:8px; padding:6px 10px; cursor:pointer; font-weight:600;
  transition:background .18s ease, border-color .18s ease;
}
.soft:hover{ background:#eef4f1; border-color:#bfd3c2 }

.btn-primary{
  border:none; background:var(--green); color:#fff;
  border-radius:10px; padding:8px 14px; cursor:pointer; font-weight:800;
}
.btn-primary:hover{ background:var(--green-d) }

/* --- Bloc Filtres (repli) --- */
.filters{ margin-top:10px }
.filters-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.filters-head strong{ font-size:14px; color:var(--ink) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }

.filters-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; margin-top:12px; padding:10px 12px;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:10px; color:var(--ink); cursor:pointer;
  font-size:14px; font-weight:700; text-align:left;
  transition:background .2s ease, border-color .2s ease, border-radius .2s ease;
}
.filters-toggle:hover{ background:#e9f0f3; border-color:#c4d0d7 }
.filters-toggle:not(.collapsed){
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-bottom-color:transparent;
}
.filters-toggle-chevron{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(25,68,95,.10);
  transition:transform .25s ease, background .2s ease;
}
.filters-toggle-chevron::before{
  content:""; display:block;
  width:7px; height:7px; margin-top:-3px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}
.filters-toggle:hover .filters-toggle-chevron{ background:rgba(25,68,95,.18) }
.filters-toggle.collapsed .filters-toggle-chevron{ transform:rotate(-90deg) }

.filters-collapsible{
  background:var(--panel-2);
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 10px 10px;
  padding:4px 12px 12px;
}
.filters-collapsible.collapsed{ display:none }
.filters-collapsible .filters:first-child{ margin-top:6px }

/* --- Chips Domaines (l'aspect en chips est conservé) --- */
.chip{
  display:inline-flex; align-items:center;
  border:1px solid var(--border); border-radius:999px; padding:6px 12px;
  background:var(--chip-bg); color:var(--text); cursor:pointer;
  font-weight:600; font-size:13px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.chip::before{
  content:""; display:inline-block; width:.66em; height:.66em; border-radius:50%;
  background:var(--chip-color, var(--green)); margin-right:.5em;
  box-shadow:0 0 0 2px rgba(255,255,255,.7) inset, 0 0 0 1px rgba(0,0,0,.12);
}
.chip:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm) }
.chip.active{
  background:var(--chip-color, var(--chip-active));
  color:#fff; border-color:transparent;
}
.chip.active::before{ background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12) }

/* "Tout actif" = aucun filtre → apparence neutre (seul le point reste coloré) */
.chips.all-active .chip.active{
  background:var(--chip-bg); color:var(--text); border-color:var(--border);
}
.chips.all-active .chip.active::before{
  background:var(--chip-color, var(--green));
  box-shadow:0 0 0 2px rgba(255,255,255,.7) inset, 0 0 0 1px rgba(0,0,0,.12);
}

/* --- Filtre années --- */
.year-filter-row{ display:flex; flex-direction:column; gap:8px }
.year-filter{
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; font-size:13px; cursor:pointer; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.year-filter:hover{ border-color:#c4d0d7 }
.year-filter:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(106,166,67,.16) }
.year-filter option{ background:#fff; color:var(--text) }
.year-custom{ display:flex; gap:8px; align-items:center }
.year-custom.hidden{ display:none }
.year-range-label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); flex:1 }
.year-range-label .year-filter{ flex:1 }

/* --- Compteur + liste --- */
.ref-count{
  padding:8px 12px; font-size:13px; font-weight:700;
  color:var(--ink); border-bottom:1px solid var(--border);
}
#refList{ overflow:auto; height:100% }
ul#refItems{ padding:8px 10px; margin:0; display:grid; gap:8px; list-style:none }

#refItems .person{
  display:flex; flex-direction:column; gap:0; align-items:flex-start;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#refItems .person:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
  border-color:#c4d0d7;
}
#refItems .person-main{ display:flex; gap:12px; align-items:center; padding:10px; width:100% }
#refItems .person-body{ display:flex; flex-direction:column; gap:2px }
.person .meta{ font-size:12px; color:var(--muted) }
.person .meta a{ color:var(--green-d) }

/* --- Pastille Territoire --- */
.territory-pill{
  display:block; width:100%; box-sizing:border-box;
  padding:6px 12px; border-radius:11px;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; text-align:center;
  border-end-start-radius:0; border-end-end-radius:0;
}
#refPanel .territory-pill{ background:var(--blue); color:#fff }
.rich-popup .territory-pill{ background:#e8eef2; color:var(--ink) }
.ref-popup-card .territory-pill{ padding:8px 12px }

/* --- Chips "Intitulé mission" --- */
.intitule-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px }
.intitule-chip{
  display:inline-block; padding:4px 10px; border-radius:6px;
  background:rgba(25,68,95,.07); border:1px solid rgba(25,68,95,.16);
  font-size:11px; color:var(--ink); line-height:1.3; font-weight:600;
  transition:background .2s ease, border-color .2s ease;
}
.intitule-chip:hover{ background:rgba(25,68,95,.12); border-color:rgba(25,68,95,.28) }

/* --- Bouton repli du panneau --- */
#refPanelToggle{
  position:absolute; top:18px; right:calc(var(--panel-width) + 4px); z-index:1001;
  width:36px; height:36px; border-radius:999px;
  border:none; background:var(--green); color:#fff; cursor:pointer;
  font-size:16px; box-shadow:var(--shadow);
  transition:transform .35s ease, right .35s ease, background .2s ease;
}
#refPanelToggle:hover{ background:var(--green-d) }
body.ref-panel-collapsed #refPanel{ transform:translateX(100%) }
body.ref-panel-collapsed #refPanelToggle{ right:16px }

/* --- Popups / tooltips Leaflet --- */
.leaflet-popup-content-wrapper{ border-radius:12px }
#refMap .leaflet-popup-content-wrapper{ padding:0; text-align:left; border-radius:12px }
#refMap .leaflet-popup-content{ margin:0; line-height:1.3; font-size:13px; min-height:1px }

.popup-card{ color:var(--text) }
.popup-card .meta{ font-size:12px; color:var(--muted) }
.popup-card .meta a{ color:var(--green-d) }
.ref-popup-card{ display:flex; flex-direction:column; gap:0 }
.ref-popup-main{ display:flex; gap:10px; align-items:flex-start; padding:10px }
.ref-popup-body{ display:flex; flex-direction:column; gap:2px }

/* Pour les popups : chips intitulé sur fond clair */
.popup-card .intitule-chip{
  background:rgba(106,166,67,.12); border-color:rgba(106,166,67,.35); color:var(--ink);
}

/* Tooltip survol marqueur */
.leaflet-tooltip.ref-tip{
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; box-shadow:var(--shadow); pointer-events:none;
}
.leaflet-tooltip.ref-tip::before{ display:none }
.leaflet-tooltip{
  width:max-content !important;
  max-width:320px !important;
  white-space:normal !important;
  word-break:break-word;
  writing-mode:horizontal-tb !important;
}
.leaflet-tooltip .leaflet-tooltip-content{
  writing-mode:horizontal-tb !important;
  white-space:inherit;
}
.leaflet-tooltip .intitule-chips{ gap:4px; margin-top:0 }
.leaflet-tooltip .intitule-chip{
  background:rgba(25,68,95,.08); border-color:rgba(25,68,95,.22);
  color:var(--ink); font-size:10px; padding:3px 8px;
}

.hidden{ display:none }