/* ═══════════════════════════════════════════════════════════════════
   TowerMap v2 (test) · style.css
   "Nuit hertzienne" — surfaces opaques, signature spectrale,
   animations spring. États synchronisés avec app.js :
   #sidebar.open · #sb-overlay.active · #search-results.open ·
   #detail-panel.open
   ═══════════════════════════════════════════════════════════════════ */
/* Polices hébergées avec le site (paquets @fontsource-variable, licence
   SIL Open Font License) : aucune requête vers Google, donc aucune adresse IP
   de visiteur transmise à un tiers. Graisses variables : un fichier par
   famille et par jeu de caractères, chargé seulement si nécessaire. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('vendor/fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('vendor/fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('vendor/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations'),
       url('vendor/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('vendor/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('vendor/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('vendor/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'),
       url('vendor/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  --bg:        #06080f;
  --bg-panel:  #0d1220;
  --bg-raised: #121829;
  --bg-input:  #161d31;
  --bg-hover:  #1b2338;
  --bg-active: #221d45;
  --border:    #232c44;
  --border-hi: #33406a;

  --t1: #eef1fb;
  --t2: #9aa5c4;
  --t3: #5d6884;

  --c-accent:   #6d5ef2;
  --c-accent-2: #3fd0e0;
  --spectral: linear-gradient(90deg, #8b5cf6 0%, #6d5ef2 30%, #3fd0e0 65%, #34d399 100%);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-1: 0 2px 12px rgba(0, 0, 0, .4);
  --shadow-2: 0 14px 44px rgba(0, 0, 0, .55);
  --glow-accent: 0 0 0 1px rgba(109, 94, 242, .4), 0 4px 22px rgba(109, 94, 242, .22);

  --dur: .22s;
  --ease: cubic-bezier(.33, 1, .68, 1);
  --spring: cubic-bezier(.34, 1.4, .48, 1);

  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="light"] {
  --bg:        #eef1f8;
  --bg-panel:  #ffffff;
  --bg-raised: #f5f7fc;
  --bg-input:  #eef1f8;
  --bg-hover:  #e4e9f4;
  --bg-active: #e6e2fb;
  --border:    #dbe1ef;
  --border-hi: #b9c4e0;
  --t1: #131a2c;
  --t2: #4a5678;
  --t3: #8b96b4;
  --shadow-1: 0 2px 12px rgba(19, 26, 44, .08);
  --shadow-2: 0 14px 44px rgba(19, 26, 44, .16);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Teinte des zones système (encoche, barre d'accueil) : celle de l'en-tête. */
/* Fond du document : teinte de l'en-tête et de la barre basse, car c'est
   cette couleur que Safari applique aux zones système (barre d'état en haut,
   zone de la barre d'outils en bas). La carte couvre tout le reste. */
html { background: var(--bg-panel); }
/* L'attribut hidden doit toujours masquer, même sur un élément stylé en flex */
[hidden] { display: none !important; }
/* Empêche le rebond élastique qui découvre le fond au-delà de la page */
body { overscroll-behavior: none; }
body {
  font-family: var(--font-ui);
  background: var(--bg-panel);
  color: var(--t1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit; color: inherit; background: none; border: none; cursor: pointer;
  /* Supprime le rectangle gris au toucher (Android/iOS) et la sélection
     accidentelle du libellé lors d'un appui prolongé. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;          /* supprime le délai de 300 ms au tap */
}
input  { font: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════
   ÉCRAN DE CHARGEMENT
   ═══════════════════════════════════════════════════════════════════ */
#loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(109, 94, 242, .15), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 110%, rgba(63, 208, 224, .09), transparent 55%),
    var(--bg);
  transition: opacity .6s var(--ease), visibility .6s;
}
#loading-screen.fade-out { opacity: 0; visibility: hidden; }

.loading-inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  animation: rise-in .7s var(--spring) both;
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.loading-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.load-tower { margin-bottom: 4px; }

.load-brand-name {
  font-size: 40px; font-weight: 700; letter-spacing: -1.5px;
  background: var(--spectral);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: spectral-sweep 5s ease-in-out infinite alternate;
}
@keyframes spectral-sweep {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

.load-brand-sub {
  font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--t3);
}

.load-wave { width: 240px; height: 34px; overflow: visible; opacity: .85; margin-top: 6px; }
.load-wave path {
  fill: none; stroke: url(#waveGrad); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: wave-draw 2.6s var(--ease) infinite;
}
@keyframes wave-draw {
  0%   { stroke-dashoffset: 320; opacity: 0; }
  25%  { opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -320; opacity: 0; }
}

.loading-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(320px, 78vw); }
#loading-status { font-size: 13px; color: var(--t2); text-align: center; min-height: 18px; }

.progress-track {
  width: 100%; height: 5px; border-radius: 99px;
  background: var(--bg-input); overflow: hidden;
}
#progress-fill {
  height: 100%; width: 0%;
  background: var(--spectral);
  background-size: 200% 100%;
  border-radius: 99px;
  transition: width .45s var(--ease);
  animation: spectral-sweep 3s linear infinite alternate;
}
.loading-pct {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 600; text-align: center;
  color: var(--c-accent-2);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
/* L'application est ancrée sur la fenêtre elle-même. 100dvh suit le repli des
   barres du navigateur mobile avec un temps de retard : pendant ce décalage,
   le fond de page apparaît en haut et en bas. Un ancrage fixe supprime le
   problème, la zone visible étant toujours exactement couverte. */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}
#body-row { flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════ */
#header {
  position: relative;             /* requis pour que z-index s'applique */
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  /* L'en-tête peint lui-même la zone de l'encoche ; le padding empêche son
     contenu de passer dessous. */
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 950;                   /* au-dessus de tout #body-row : le dropdown de recherche vit dans ce contexte */
}

.hdr-brand {
  display: flex; align-items: baseline;
  font-size: 19px; font-weight: 700; letter-spacing: -.6px;
  user-select: none;
  /* Bouton, mais sans aucun habillage : l'apparence reste celle du logo. */
  padding: 4px 6px; margin-left: -6px;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.hdr-brand:hover  { background: var(--bg-hover); }
.hdr-brand:active { transform: scale(.96); }
.hdr-brand-text { color: var(--t1); }
.hdr-brand-accent {
  background: var(--spectral);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Recherche */
.search-wrap { position: relative; flex: 1; max-width: 440px; margin-left: 8px; }
.search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--t3); pointer-events: none;
  transition: color var(--dur) var(--ease);
}
#search-input {
  width: 100%; padding: 9px 14px 9px 38px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--t1); font-size: 13.5px;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#search-input::placeholder { color: var(--t3); }
#search-input:focus { border-color: var(--c-accent); box-shadow: var(--glow-accent); }
.search-wrap:focus-within .search-ico { color: var(--c-accent); }

#search-results {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  max-height: 380px; overflow-y: auto;
  z-index: 1000;
}
#search-results.open { display: block; animation: pop-in .18s var(--spring) both; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.sr-section {
  padding: 9px 13px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.1px; color: var(--t3);
}
.sr-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 13px; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.sr-item:hover { background: var(--bg-hover); }
.sr-icon { flex-shrink: 0; color: var(--t3); }
.sr-main { font-size: 13px; font-weight: 500; }
.sr-sub  { font-size: 11px; color: var(--t3); }
.sr-msg  { padding: 14px; font-size: 12.5px; color: var(--t3); text-align: center; }

#coord-display {
  display: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--t3);
  letter-spacing: .4px; white-space: nowrap;
}
@media (min-width: 1024px) { #coord-display { display: block; } }

.hdr-right { display: flex; align-items: center; gap: 5px; margin-left: auto; }

/* Bouton loupe et bouton fermer : mobile uniquement */
#search-btn, #search-close { display: none; }

/* ── Recherche plein écran sur mobile ──────────────────────────────────────
   Sous 768px, la barre de recherche est masquée derrière une loupe. Au clic,
   elle s'ouvre en panneau plein écran : le champ en haut, les propositions
   en dessous sur toute la hauteur — lisibles même sur petit écran. */
@media (max-width: 767px) {
  #search-btn { display: flex; }

  .search-wrap { display: none; }

  body.search-open .search-wrap {
    display: block;
    position: fixed; inset: 0;
    z-index: 1050;
    margin: 0; max-width: none;
    background: var(--bg);
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0;
    animation: search-in .22s var(--ease) both;
  }
  @keyframes search-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }

  body.search-open .search-ico { left: 26px; top: calc(28px + env(safe-area-inset-top, 0px)); transform: none; }

  body.search-open #search-input {
    font-size: 16px;                 /* ≥16px : évite le zoom automatique iOS */
    padding: 15px 52px 15px 46px;
    border-color: var(--border-hi);
  }

  body.search-open #search-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 22px; top: calc(18px + env(safe-area-inset-top, 0px));
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--t2); background: var(--bg-hover);
  }
  body.search-open #search-close:active { transform: scale(.92); }

  /* Les propositions occupent tout l'espace restant */
  body.search-open #search-results {
    position: absolute; top: calc(74px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; bottom: 0;
    max-height: none; border: none; border-radius: 0;
    background: transparent; box-shadow: none;
    overflow-y: auto;
    padding-bottom: 20px;
  }
  body.search-open #search-results.open { animation: none; }
  body.search-open .sr-item {
    padding: 15px 10px;
    border-bottom: 1px solid var(--border);
  }
  body.search-open .sr-main { font-size: 15px; }
  body.search-open .sr-sub  { font-size: 12.5px; }
  body.search-open .sr-section { padding: 14px 10px 6px; }
}

.icon-btn {
  width: 37px; height: 37px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--t2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--spring), box-shadow var(--dur) var(--ease);
}
.icon-btn:hover  { background: var(--bg-hover); color: var(--t1); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.94); }
.icon-btn.active {
  background: var(--bg-active); color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.icon-btn.loading { color: var(--c-accent-2); animation: locate-pulse 1s ease-in-out infinite; }
.icon-btn:disabled { cursor: wait; }
@keyframes locate-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — états synchronisés avec app.js (.open / #sb-overlay.active)
   Desktop ≥900px : dans le flux, rabattue via margin négatif.
   Mobile <900px  : tiroir en overlay.
   ═══════════════════════════════════════════════════════════════════ */
#sidebar {
  width: 288px; flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 880;
}

@media (min-width: 900px) {
  #sidebar {
    margin-left: -288px;                 /* rabattue par défaut */
    transition: margin-left .3s var(--spring);
  }
  #sidebar.open { margin-left: 0; }      /* showApp() l'ouvre au boot desktop */
}

@media (max-width: 899px) {
  #sidebar {
    position: absolute; top: 0; bottom: 0; left: 0;
    transform: translateX(-103%);
    transition: transform .32s var(--spring);
    box-shadow: var(--shadow-2);
  }
  #sidebar.open { transform: none; }
}

#sb-overlay {
  position: absolute; inset: 0; z-index: 820;
  background: rgba(3, 5, 10, .6);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
#sb-overlay.active { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { #sb-overlay { display: none !important; } }

.sidebar-scroll {
  flex: 1; overflow-y: auto;
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
}

.sb-section { margin-bottom: 14px; }

/* En-tête de section dépliable */
.sb-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--t2);
  transition: color var(--dur) var(--ease);
}
.sb-head:hover { color: var(--t1); }
.sb-caret {
  flex-shrink: 0; color: var(--t3);
  transform: rotate(-90deg);
  transition: transform var(--dur) var(--spring);
}
.sb-head[aria-expanded="true"] .sb-caret { transform: rotate(0); }
.sb-head .sb-title { flex: 1; text-align: left; }
.sb-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--t3); background: var(--bg-input);
  border-radius: 99px; padding: 2px 8px;
}
.sb-count.partial { color: var(--c-accent); background: var(--bg-active); }

/* Corps de section : replié par défaut */
.sb-body { display: none; padding-top: 10px; }
.sb-body.open { display: block; animation: rise-in .28s var(--spring) both; }

/* Recherche interne aux longues listes */
.sb-search {
  width: 100%; margin-bottom: 8px;
  padding: 7px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--t1); font-size: 12px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.sb-search::placeholder { color: var(--t3); }
.sb-search:focus { border-color: var(--c-accent); }

/* Sous-filtres rattachés à une ligne (état de déploiement sous « mobiles ») */
.sub-filters {
  margin: 0 0 6px 26px; padding-left: 10px;
  border-left: 2px solid var(--border);
}
.sub-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 2px; font-size: 11.5px; font-weight: 600; color: var(--t3);
  transition: color var(--dur) var(--ease);
}
.sub-head:hover { color: var(--t1); }
.sub-head .sb-caret { transform: rotate(-90deg); transition: transform var(--dur) var(--spring); }
.sub-head[aria-expanded="true"] .sb-caret { transform: rotate(0); }
.sub-head .sb-count { margin-left: auto; }
.sub-body { display: none; padding: 6px 0 4px; }
.sub-body.open { display: block; animation: rise-in .25s var(--spring) both; }

/* Note explicative d'une section de filtres */
.sb-note {
  margin: 0 0 10px; font-size: 10.5px; line-height: 1.5;
  color: var(--t3); font-style: italic;
}

/* État de déploiement : vert en service, ambre allumé, gris projeté */
.depl-dot-0 { background: #475569; }
.depl-dot-1 { background: #22c55e; }
.depl-dot-2 { background: #f59e0b; }
.depl-dot-3 { background: #94a3b8; }

.depl-badge {
  display: inline-block; margin-top: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 99px;
  border-bottom: none !important;
}
.depl-1 { background: rgba(34, 197, 94, .15);  color: #4ade80; }
.depl-2 { background: rgba(245, 158, 11, .15); color: #fbbf24; }
.depl-3 { background: rgba(148, 163, 184, .15); color: #94a3b8; }
[data-theme="light"] .depl-1 { background: rgba(21, 128, 61, .1);  color: #15803d; }
[data-theme="light"] .depl-2 { background: rgba(180, 83, 9, .1);   color: #b45309; }
[data-theme="light"] .depl-3 { background: rgba(100, 116, 139, .1); color: #475569; }

/* Nombre de sites par ligne de filtre */
.frow-n {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; color: var(--t3);
}
.sb-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sb-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3);
}
.mini-btns { display: flex; gap: 5px; margin-bottom: 8px; }
.mini-btn {
  font-size: 10.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 99px; color: var(--t2);
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.mini-btn:hover { background: var(--bg-active); color: var(--c-accent); border-color: var(--c-accent); transform: translateY(-1px); }
.mini-btn-clr:hover { background: rgba(239, 68, 68, .12); color: #f87171; border-color: #f87171; }

.filter-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-sm);
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--t2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.filter-row:hover { background: var(--bg-hover); color: var(--t1); transform: translateX(2px); }
.filter-row input { accent-color: var(--c-accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.fdot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.stats-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 15px;
  display: flex; flex-direction: column; gap: 8px;
}
.stat-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--t2);
}
.stat-num {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--c-accent-2);
}

/* Mention de source — Licence Ouverte 2.0 (Etalab) */
.sb-credit {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; line-height: 1.6; color: var(--t3);
}
.sb-credit a {
  color: var(--t2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sb-credit a:hover { color: var(--c-accent-2); border-bottom-color: currentColor; }

/* ═══════════════════════════════════════════════════════════════════
   CARTE + OVERLAYS
   ═══════════════════════════════════════════════════════════════════ */
#map-wrap { flex: 1; position: relative; min-width: 0; }
#map {
  position: absolute; inset: 0;
  background: var(--bg);
  /* Contexte d'empilement propre : Leaflet place ses contrôles à z-index 1000,
     ce qui les faisait passer devant la légende et les panneaux. Confinés ici,
     ils restent au-dessus de la carte mais sous toute l'interface. */
  z-index: 1;
}

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

/* Coutures entre tuiles : au zoom, l'arrondi au pixel peut laisser une ligne
   d'un pixel entre deux tuiles. Ce qui apparaît alors est le fond situé
   DERRIÈRE les tuiles — d'où un trait blanc si ce fond est clair.
   On l'accorde donc à l'imagerie affichée (piloté par app.js, pas par le
   thème de l'interface) : sombre en satellite, ton papier en vue plan. */
.leaflet-tile-pane { background: #0b1018; }
.leaflet-control-zoom {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: var(--r-sm) !important; overflow: hidden;
}
.leaflet-control-zoom a {
  background: var(--bg-panel) !important;
  color: var(--t1) !important;
  border-color: var(--border) !important;
  transition: background var(--dur) var(--ease);
}
.leaflet-control-zoom a:hover { background: var(--bg-hover) !important; }
.leaflet-control-attribution {
  background: var(--bg-panel) !important;
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  color: var(--t3) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--t2) !important; }

/* Légende — barre de chips, en bas à droite près des contrôles de zoom */
#legend {
  position: absolute; left: 14px; right: auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));  /* bord gauche : pas d'attribution dessous */
  z-index: 750;
  transition: left .38s var(--spring), right .38s var(--spring), opacity var(--dur) var(--ease);
  display: flex; gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-1);
  padding: 6px 10px;
  animation: pop-in .35s var(--spring) both;
  max-width: calc(100% - 84px);
  overflow-x: auto;
  scrollbar-width: none;
}
#legend::-webkit-scrollbar { display: none; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--t2);
  padding: 3px 10px; border-radius: 99px;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.legend-chip {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.legend-chip:hover  { background: var(--bg-hover); color: var(--t1); transform: translateY(-1px); }
.legend-chip:active { transform: translateY(0) scale(.96); }
.legend-chip.active {
  background: var(--bg-active); color: var(--c-accent);
  border-color: var(--c-accent);
}

/* Bouton de dépliage (petit écran) */
#legend-toggle {
  display: none;
  position: absolute; right: 14px;
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  z-index: 751;
  width: 38px; height: 38px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--t2);
}
#legend-toggle:active { transform: scale(.93); }
.ldot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

/* Bandeau « orientation affichée » — fermeture rapide depuis la carte */
#beam-close {
  display: none;
  /* Empilés sous le compteur, alignés sur lui à droite */
  position: absolute; right: 14px; left: auto; top: 60px;
  transition: right .38s var(--spring), background var(--dur) var(--ease),
              transform var(--dur) var(--spring);
  z-index: 760;
  align-items: center; gap: 8px;
  background: var(--bg-active);
  border: 1px solid var(--c-accent);
  border-radius: 99px;
  box-shadow: var(--shadow-1);
  padding: 7px 16px;
  font-size: 12px; font-weight: 600; color: var(--c-accent);
  white-space: nowrap;
  transition: transform var(--dur) var(--spring), background var(--dur) var(--ease);
}
#beam-close.visible { display: flex; animation: pop-in .25s var(--spring) both; }
#beam-close:hover  { background: var(--bg-hover); }
#beam-close:active { transform: scale(.95); }
/* Si les deux bandeaux sont actifs, le second se place sous le premier */
#beam-close.visible ~ #search-reset.visible { top: 104px; }

/* Bandeau « filtre de recherche actif » */
#search-reset {
  display: none;
  position: absolute; right: 14px; left: auto; top: 60px;
  z-index: 760;
  align-items: center; gap: 8px;
  background: var(--bg-active);
  border: 1px solid var(--c-accent);
  border-radius: 99px;
  box-shadow: var(--shadow-1);
  padding: 7px 16px;
  font-size: 12px; font-weight: 600; color: var(--c-accent);
  white-space: nowrap;
  transition: transform var(--dur) var(--spring), background var(--dur) var(--ease);
}
#search-reset.visible { display: flex; animation: pop-in .25s var(--spring) both; }
#search-reset:hover { background: var(--bg-hover); }
#search-reset:active { transform: scale(.95); }

/* Résultat « critères combinés » : mis en avant */
.sr-filter {
  background: var(--bg-active);
  border-left: 3px solid var(--c-accent);
}
.sr-filter .sr-main { color: var(--c-accent); }

/* Panneau de détail ouvert : la légende glisse à sa gauche pour rester lisible */
/* La légende est à gauche, le panneau de détail à droite : sur écran étroit,
   on limite simplement sa largeur pour éviter qu'ils ne se recouvrent. */
#map-wrap.detail-open #legend { max-width: calc(100% - 400px); }

/* Compteur flottant */
#statusbar {
  position: absolute; right: 14px; top: 14px; z-index: 750;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-1);
  padding: 8px 18px;
  font-size: 12px; color: var(--t2);
  white-space: nowrap;
  transition: right .38s var(--spring);
}
/* Panneau de détail ouvert → glisse à sa gauche pour rester lisible */
#map-wrap.detail-open #statusbar,
#map-wrap.detail-open #beam-close,
#map-wrap.detail-open #search-reset { right: 386px; }
#statusbar .sn { font-family: var(--font-mono); font-weight: 600; color: var(--c-accent-2); }
@media (max-width: 899px) {
  #statusbar { display: none; }
  /* Bandeaux placés juste au-dessus de la barre d'actions : ils étaient
     invisibles en haut d'écran, masqués par l'en-tête. */
  /* Bandeaux : à gauche du bouton de légende, sur la même ligne */
  #beam-close, #search-reset {
    top: auto; left: 10px; right: auto;
    transform: none;
    bottom: 22px;
    max-width: calc(100% - 78px);
    overflow: hidden; text-overflow: ellipsis;
  }
  #beam-close:active, #search-reset:active { transform: scale(.95); }
  #beam-close.visible ~ #search-reset.visible { bottom: 66px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PANNEAU « AUTOUR DE MOI »
   Même gabarit que les statistiques : latéral sur ordinateur,
   tiroir montant sur téléphone.
   ═══════════════════════════════════════════════════════════════════ */
#near-panel {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 872;
  width: 400px; max-width: 94vw;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  transform: translateX(-103%);
  transition: transform .38s var(--spring);
}
#near-panel.open { transform: none; }

@media (max-width: 767px) {
  #near-panel {
    top: auto; right: 0; bottom: 0;
    width: 100%; max-width: none;
    height: 70vh;
    height: calc(var(--app-h, 100vh) * 0.72);
    border-right: none; border-top: 1px solid var(--border-hi);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(104%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #near-panel.open { transform: none; }
}

#near-close {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
#near-close:hover { background: var(--bg-hover); color: var(--t1); transform: rotate(90deg); }

/* Choix du rayon */
.near-radius {
  display: flex; gap: 6px; align-items: center;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border);
}
.near-r {
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 99px;
  color: var(--t2); background: var(--bg-input);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.near-r:hover { border-color: var(--border-hi); color: var(--t1); }
.near-n {
  margin-left: 6px; padding-left: 6px;
  border-left: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; opacity: .8;
}
.near-r:empty .near-n, .near-n:empty { display: none; }
.near-r.active {
  background: var(--bg-active); color: var(--c-accent); border-color: var(--c-accent);
}

#near-content { flex: 1; overflow-y: auto; padding: 12px 16px 26px; }

.near-summary {
  font-size: 11.5px; line-height: 1.5; color: var(--t3);
  margin-bottom: 10px;
}

/* Une ligne par site */
.near-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 11px 10px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.near-row:last-child { border-bottom: none; }
.near-row:hover  { background: var(--bg-hover); transform: translateX(2px); }
.near-row:active { transform: scale(.99); }

.near-dist {
  flex-shrink: 0; width: 58px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--c-accent-2);
}
.near-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.near-name {
  font-size: 13px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.near-sub  { font-size: 11px; color: var(--t3); }

.near-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.near-bearing {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--t2); white-space: nowrap;
}
.near-arrow {
  display: inline-block; font-size: 13px; color: var(--c-accent);
  transform-origin: 50% 50%;
}
.near-dots { display: flex; gap: 3px; }
.near-dot  { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 4px currentColor; }

@media (max-width: 767px) {
  .near-row { padding: 14px 10px; }
  .near-r { min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PANNEAU DE STATISTIQUES + FRISE
   ═══════════════════════════════════════════════════════════════════ */
#stats-panel {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 870;
  width: 460px; max-width: 94vw;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  transform: translateX(-103%);
  transition: transform .38s var(--spring);
}
#stats-panel.open { transform: none; }

@media (max-width: 767px) {
  #stats-panel {
    top: auto; right: 0; bottom: 0;
    width: 100%; max-width: none;
    height: 76vh;
    height: calc(var(--app-h, 100vh) * 0.78);
    border-right: none; border-top: 1px solid var(--border-hi);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(104%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #stats-panel.open { transform: none; }
}

.stats-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.stats-hdr-ttl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3);
}
#stats-close {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
#stats-close:hover { background: var(--bg-hover); color: var(--t1); transform: rotate(90deg); }

#stats-content { flex: 1; overflow-y: auto; padding: 0 16px 26px; }

.st-block { margin-bottom: 24px; animation: rise-in .4s var(--spring) both; }

.st-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 420px) { .st-kpis { grid-template-columns: repeat(2, 1fr); } }
.st-kpi {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.st-kpi-n {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600;
  color: var(--c-accent-2);
}
.st-kpi-l {
  font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--t3); text-align: center;
}

.st-row {
  display: grid; grid-template-columns: 104px 1fr auto;
  align-items: center; gap: 9px; margin-bottom: 7px;
  font-size: 12px;
}
.st-label { color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-track { height: 7px; border-radius: 99px; background: var(--bg-input); overflow: hidden; }
.st-fill  { display: block; height: 100%; border-radius: 99px; transition: width .5s var(--ease); }
.st-val   { font-family: var(--font-mono); font-size: 11px; color: var(--t3); }

/* Phrase de lecture sous un graphique */
.st-note {
  margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--t3);
}
.st-note b { color: var(--t2); font-weight: 600; }

/* Frise temporelle */
.tl-chart {
  display: flex; align-items: flex-end; gap: 1px;
  height: 84px; margin-bottom: 10px;
  padding: 0 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.tl-bar {
  flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, var(--c-accent), var(--c-accent-2));
  opacity: .85;
}
/* Sens du filtre temporel */
.tl-dir { display: flex; gap: 5px; margin-bottom: 8px; }
.tl-d {
  flex: 1; font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 99px;
  color: var(--t2); background: var(--bg-input);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.tl-d:hover  { border-color: var(--border-hi); color: var(--t1); }
.tl-d.active { background: var(--bg-active); color: var(--c-accent); border-color: var(--c-accent); }

#tl-range { width: 100%; accent-color: var(--c-accent); cursor: pointer; }
.tl-legend {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--t3);
  margin-top: 4px;
}
.tl-current { color: var(--t2); }
.tl-current b { color: var(--c-accent-2); }
#tl-reset { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   POPUP DE SÉLECTION
   ═══════════════════════════════════════════════════════════════════ */
.sel-popup {
  position: absolute; z-index: 850;
  width: 265px; max-height: 330px;
  display: flex; flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  /* Animation dédiée : n'anime QUE l'opacité. L'ancienne (pop-in) se terminait
     sur « transform: none » et écrasait le positionnement piloté par app.js,
     d'où des popups qui s'ouvraient hors écran. */
  animation: sel-pop-in .18s var(--ease) both;
}
@keyframes sel-pop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--t2);
}
.sel-close {
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sel-close:hover { background: var(--bg-hover); color: var(--t1); }
.sel-scroll { overflow-y: auto; }
.sel-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.sel-item:last-child { border-bottom: none; }
.sel-item:hover { background: var(--bg-hover); padding-left: 17px; }
.sel-type { font-size: 13px; font-weight: 600; flex: 1; }
.sel-meta { font-size: 11px; color: var(--t3); white-space: nowrap; }
.sel-dots { display: flex; gap: 3px; }
.sel-dot  { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 5px currentColor; }

/* ═══════════════════════════════════════════════════════════════════
   PANNEAU DE DÉTAIL — latéral desktop / bottom sheet mobile
   ═══════════════════════════════════════════════════════════════════ */
#detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 860;
  width: 372px; max-width: 94vw;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  transform: translateX(103%);
  transition: transform .38s var(--spring);
}
#detail-panel.open { transform: none; }

@media (max-width: 767px) {
  #detail-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none;
    height: calc(68vh + env(safe-area-inset-bottom, 0px));
    /* Hauteur pilotée par --app-h, mesurée en JavaScript : plus fiable que
       vh ou dvh, dont l'interprétation varie selon les navigateurs. */
    height: 50vh;
    height: calc(var(--app-h, 100vh) * 0.5);
    transition: transform .38s var(--spring), height .32s var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-left: none;
    border-top: 1px solid var(--border-hi);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(104%);
  }
  #detail-panel.open { transform: none; }
  #detail-panel.sheet-peek { height: 168px; }
  #detail-panel.sheet-half { height: calc(var(--app-h, 100vh) * 0.52); }
  #detail-panel.sheet-full { height: calc(var(--app-h, 100vh) * 0.92); }

  /* Poignée : zone de préhension généreuse pour le pouce */
  #detail-panel .detail-hdr { touch-action: none; cursor: grab; }
  #detail-panel::before {
    content: '';
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 99px;
    background: var(--t3); opacity: .45;
  }
}

.detail-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.detail-hdr-ttl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3);
}
#detail-close {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
#detail-close:hover { background: var(--bg-hover); color: var(--t1); transform: rotate(90deg); }

#detail-content { flex: 1; overflow-y: auto; padding: 0 16px 26px; }

/* Rappel de la hiérarchie support → station → émetteurs → antennes */
.detail-intro {
  margin-bottom: 16px; padding: 10px 13px;
  background: var(--bg-input);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 11.5px; line-height: 1.6; color: var(--t3);
}
.detail-intro b { color: var(--t2); font-weight: 600; }

/* Sous-titre explicatif d'un bloc */
.block-sub {
  margin: -5px 0 9px; font-size: 11px; color: var(--t3); font-style: italic;
}

/* Les intitulés porteurs d'une explication sont discrètement soulignés */
.info-grid dt[data-tt] { border-bottom: 1px dotted var(--t3); cursor: help; }

.detail-hero { margin-bottom: 16px; animation: rise-in .4s var(--spring) both; }
.detail-hero h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -.3px;
  line-height: 1.25; margin-bottom: 8px;
}
.detail-hero .sys-tags { margin-top: 11px; }

.detail-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 99px;
  letter-spacing: .3px;
}
.cat-TV       { background: rgba(168, 85, 247, .15); color: #c084fc; }
.cat-RADIO    { background: rgba(249, 115, 22, .15); color: #fb923c; }
.cat-MOBILE   { background: rgba(34, 197, 94, .15);  color: #4ade80; }
.cat-SECURITY { background: rgba(239, 68, 68, .15);  color: #f87171; }
.cat-FH       { background: rgba(59, 130, 246, .15); color: #60a5fa; }
.cat-OTHER    { background: rgba(148, 163, 184, .13); color: #94a3b8; }

.detail-cats-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.multi-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 99px;
}

.type-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0 4px; }
.type-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 99px;
  color: var(--t2); background: var(--bg-input);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.type-tab:hover { transform: translateY(-1px); border-color: var(--border-hi); }
.type-tab.active {
  background: var(--bg-active); color: var(--c-accent);
  border-color: var(--c-accent);
}
.tab-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 5px currentColor; }
.tab-count { font-family: var(--font-mono); font-size: 10px; opacity: .75; }

.info-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
  font-size: 12.5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 16px;
}
.info-grid dt { color: var(--t3); font-weight: 500; }
.info-grid dd { color: var(--t1); }

.gmaps-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 99px;
  background: var(--spectral);
  background-size: 200% 100%;
  color: #fff;
  margin-bottom: 20px;
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--ease), background-position .5s var(--ease);
  box-shadow: 0 4px 18px rgba(109, 94, 242, .35);
}
.gmaps-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(109, 94, 242, .45);
  background-position: 100% 0;
}
.gmaps-btn:active { transform: translateY(0) scale(.97); }

.detail-block { margin-bottom: 20px; animation: rise-in .45s var(--spring) both; }
.block-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--t2); margin-bottom: 9px;
}
.count-badge {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  background: var(--bg-active); color: var(--c-accent);
  border-radius: 99px; padding: 1px 8px;
}

.emitter-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 13px; margin-bottom: 8px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--spring), box-shadow var(--dur) var(--ease);
}
.emitter-card:hover {
  border-color: var(--c-accent);
  transform: translateX(3px);
  box-shadow: -3px 0 0 0 rgba(109, 94, 242, .45);
}
.emitter-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emitter-sys  { font-size: 13px; font-weight: 600; }
.emitter-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--t3); }

.bands-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.band-chip {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 2.5px 9px; border-radius: 99px;
  background: rgba(63, 208, 224, .1);
  border: 1px solid rgba(63, 208, 224, .28);
  color: var(--c-accent-2);
}

/* Échec de chargement du détail d'un site */
.load-error {
  padding: 14px 15px; border-radius: var(--r-md);
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .3);
}
.load-error p {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--t2);
}
.detail-retry {
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 99px;
  color: #f87171; background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .4);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.detail-retry:hover  { background: rgba(239, 68, 68, .2); }
.detail-retry:active { transform: scale(.96); }

/* Bouton d'affichage de l'orientation des antennes */
.beam-btn {
  display: block; width: 100%;
  margin-bottom: 10px; padding: 9px 13px;
  border-radius: var(--r-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--t2); font-size: 12px; font-weight: 600;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.beam-btn:hover  { border-color: var(--c-accent); color: var(--t1); }
.beam-btn.active {
  background: var(--bg-active); color: var(--c-accent);
  border-color: var(--c-accent);
}

/* Antenne directive : badge distinct de l'omnidirectionnelle */
.badge-dir { background: rgba(109, 94, 242, .15); color: #a99df8; }

/* Lien vers l'outil Arcom « Ma Couverture TNT » */
.tnt-link {
  display: block;
  margin-top: 10px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  background: var(--bg-input);
  border: 1px dashed var(--border-hi);
  font-size: 11.5px; color: var(--t2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tnt-link:hover { border-color: var(--c-accent); color: var(--t1); background: var(--bg-hover); }
.tnt-link-hint {
  display: block; margin-top: 3px;
  font-size: 10px; color: var(--t3);
}
[data-theme="light"] .band-chip {
  background: rgba(14, 145, 165, .08);
  border-color: rgba(14, 145, 165, .3);
  color: #0e91a5;
}

.antenna-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 12px;
  transition: background var(--dur) var(--ease);
}
.antenna-row:hover { background: var(--bg-hover); }
.ant-id  { font-weight: 600; flex: 1; min-width: 110px; }

/* Bouton d'orientation propre à une antenne */
.ant-beam {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--t3); font-size: 13px;
  transition: all var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.ant-beam:hover  { color: var(--c-accent-2); border-color: var(--c-accent-2); }
.ant-beam:active { transform: scale(.9); }
.ant-beam.active {
  background: rgba(63, 208, 224, .16); color: var(--c-accent-2);
  border-color: var(--c-accent-2);
  box-shadow: 0 0 0 3px rgba(63, 208, 224, .15);
}
@media (max-width: 767px) { .ant-beam { width: 38px; height: 38px; font-size: 15px; } }

/* Étiquette du faisceau sur la carte : azimut + systèmes émis */
.beam-label {
  background: var(--bg-panel) !important;
  border: 1px solid var(--c-accent-2) !important;
  color: var(--t1) !important;
  font-family: var(--font-mono); font-size: 11px;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 4px 9px !important;
}
.beam-label b { color: var(--c-accent-2); }
.beam-label::before { border-top-color: var(--c-accent-2) !important; }

/* Systèmes portés par l'antenne : ligne dédiée, sous les caractéristiques */
.ant-carries {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 5px; padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ant-sys {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  background: var(--bg-active); color: var(--c-accent);
}
.ant-val { font-family: var(--font-mono); font-size: 11px; color: var(--t2); }
.badge-ray {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 99px;
  background: rgba(52, 211, 153, .15); color: #34d399;
}
[data-theme="light"] .badge-ray { background: rgba(5, 150, 105, .1); color: #059669; }

.sys-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sys-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 3px 10px; border-radius: 99px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--t2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sys-tag:hover { border-color: var(--c-accent); color: var(--t1); }

.empty-note { font-size: 12px; color: var(--t3); font-style: italic; }
.load-error { color: #f87171; font-style: normal; line-height: 1.5; }
[data-theme="light"] .load-error { color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════════
   MARQUEURS
   ═══════════════════════════════════════════════════════════════════ */
.pulse-marker { position: absolute; z-index: 690; width: 0; height: 0; pointer-events: none; }
.pulse-ring {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--c-accent-2);
  border-radius: 50%;
  animation: pulse-out 1.8s var(--ease) infinite;
}
.pulse-ring:nth-child(2) { animation-delay: .9s; }
@keyframes pulse-out {
  from { transform: scale(.35); opacity: .9; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOOLTIPS + TOASTS
   ═══════════════════════════════════════════════════════════════════ */
.tt-popup {
  display: none;                /* piloté par app.js via style.display */
  position: fixed; z-index: 1200;
  max-width: 240px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  padding: 8px 11px;
  font-size: 11.5px; line-height: 1.45; color: var(--t2);
  pointer-events: none;
}
[data-tt] { border-bottom: 1px dotted var(--t3); cursor: help; }

#toast-root {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 1100;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hi);
  border-radius: 99px;
  box-shadow: var(--shadow-2);
  padding: 10px 20px;
  font-size: 13px; color: var(--t1);
  max-width: min(420px, 88vw);
  animation: toast-in .32s var(--spring) both;
}
.toast.leaving { animation: toast-out .28s var(--ease) both; }
.toast-err { border-color: rgba(248, 113, 113, .55); }
.toast-err svg { color: #f87171; }
@keyframes toast-in  {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.97); }
}

/* ═══════════════════════════════════════════════════════════════════
   BARRE D'ACTIONS BASSE (mobile)
   ═══════════════════════════════════════════════════════════════════ */
#mobile-bar { display: none; }

@media (max-width: 767px) {
  #mobile-bar {
    display: grid; grid-template-columns: repeat(6, 1fr);
    flex-shrink: 0;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 900;
  }
  .mb-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px 8px;
    min-height: 56px;
    color: var(--t3);
    font-size: 8.8px; font-weight: 600; letter-spacing: -.2px;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .mb-btn:active { background: var(--bg-hover); color: var(--c-accent); }
  .mb-btn.active { color: var(--c-accent); }

  /* L'en-tête se réduit à la seule marque, centrée : toutes les actions sont
     dans la barre basse, tous les réglages dans le panneau « Plus ». */
  #header { justify-content: center; padding: 7px 14px;
            padding-top: calc(7px + env(safe-area-inset-top, 0px)); }
  #header .hdr-right, #sidebar-btn, #search-btn, #coord-display { display: none; }
  .hdr-brand { margin: 0; }

  /* Compteur de sites : masqué, l'écran est trop précieux (info consultable
     dans le panneau de statistiques). */
  #statusbar { display: none; }

  /* Le bouton de légende passe à gauche, aligné sur les boutons de zoom :
     plus aucun risque de recouvrement, quel que soit le mode d'affichage. */
  /* Angle bas-droit : le bouton de légende prend la place des boutons de
     zoom, qui remontent juste au-dessus. */
  /* Aligné sur les boutons de zoom : même retrait (10 px, valeur de Leaflet)
     et même gabarit, pour que les bords droits coïncident exactement.
     Remonté au-dessus de la ligne d'attribution, qui occupe le bas de carte. */
  #legend-toggle {
    right: calc(10px + env(safe-area-inset-right, 0px)); left: auto;
    bottom: 20px;          /* juste au-dessus de la ligne d'attribution (~14 px) */
    width: 44px; height: 44px;
  }
  .leaflet-bottom.leaflet-right .leaflet-control-zoom {
    margin-bottom: 72px;   /* au-dessus du bouton de légende */
    margin-right: 10px;
  }
  /* Même gabarit que le bouton de légende : à largeurs égales et retrait égal,
     les centres des deux éléments coïncident forcément. Les boutons de zoom
     de Leaflet font 34 px par défaut sur écran tactile, d'où le décalage. */
  .leaflet-touch .leaflet-control-zoom a,
  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }

  /* Attribution Leaflet : compacte, pour ne pas déborder sur deux lignes */
  .leaflet-control-attribution {
    font-size: 9px !important;
    padding: 1px 6px !important;
    max-width: 78vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* La carte cède la place à la barre : plus de superposition */
}

/* ═══════════════════════════════════════════════════════════════════
   QUESTIONNAIRE DE RETOURS — affiché par-dessus la carte
   ═══════════════════════════════════════════════════════════════════ */
#feedback-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(3, 5, 10, .62);
  align-items: center; justify-content: center;
  padding: 24px;
}
#feedback-overlay.open { display: flex; animation: fade-in .2s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.fb-card {
  width: 100%; max-width: 680px; height: min(86vh, 860px);
  display: flex; flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: pop-in .28s var(--spring) both;
}
.fb-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.fb-ttl { flex: 1; font-size: 13px; font-weight: 600; color: var(--t1); }
.fb-ext, .fb-close {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 15px; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fb-ext:hover, .fb-close:hover { background: var(--bg-hover); color: var(--t1); }

/* Le questionnaire garde son propre fond clair : on l'encadre proprement */
.fb-body { position: relative; flex: 1; background: #ffffff; }
.fb-body iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity .3s var(--ease);
}
#feedback-overlay.loaded .fb-body iframe { opacity: 1; }
.fb-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #5d6884;
}
#feedback-overlay.loaded .fb-loading { display: none; }

@media (max-width: 767px) {
  /* Sur téléphone : plein écran, comme la recherche */
  #feedback-overlay { padding: 0; align-items: stretch; }
  .fb-card {
    max-width: none; height: 100%; border-radius: 0; border: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PANNEAU « PLUS » (mobile) — réglages secondaires
   ═══════════════════════════════════════════════════════════════════ */
#more-sheet {
  display: none;
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(3, 5, 10, .55);
}
#more-sheet.open { display: block; }
.more-inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-hi);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: sheet-up .28s var(--spring) both;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.more-grip {
  width: 40px; height: 4px; border-radius: 99px;
  background: var(--t3); opacity: .45;
  margin: 0 auto 14px;
}
.more-row {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 50px; padding: 12px 6px;
  color: var(--t1); font-size: 14px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.more-row:last-of-type { border-bottom: none; }
.more-row:active { background: var(--bg-hover); }
.more-row svg { color: var(--t3); flex-shrink: 0; }
.more-credit {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; line-height: 1.7; color: var(--t3);
}
.more-credit a { color: var(--t2); }
.more-ver, .sb-version {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--t3); opacity: .75;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBARS + RESPONSIVE + ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-hover); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--t3); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (max-width: 767px) {
  /* Zones tactiles : 44 px minimum (recommandation Apple et Google) */
  .icon-btn, .mini-btn, .legend-chip, .sb-head, .sel-item, .sr-item {
    min-height: 44px;
  }
  .mini-btn, .legend-chip { padding-top: 8px; padding-bottom: 8px; }
  .filter-row { padding-top: 11px; padding-bottom: 11px; }
  /* Évite le zoom automatique d'iOS à la saisie (déclenché sous 16 px) */
  input, select, textarea { font-size: 16px; }

  .search-wrap { max-width: none; }
  .hdr-brand { font-size: 17px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  /* Bottom sheet ouverte → escamoter la légende (le JS pose .detail-open sur #map-wrap) */
  #map-wrap.detail-open #legend { opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
}
@media (max-width: 767px) {
  /* La légende se replie derrière un bouton pour libérer la carte */
  #legend-toggle { display: flex; }
  /* Dépliée : petite carte verticale au-dessus du bouton, lisible d'un coup
     d'œil, au lieu d'une longue pilule qui s'enroulait sur deux lignes. */
  #legend {
    right: calc(10px + env(safe-area-inset-right, 0px)); left: auto;
    bottom: 72px;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    width: 218px; max-width: calc(100% - 28px);
    padding: 8px;
    border-radius: var(--r-md);
    overflow: visible;
    display: none;
    animation: legend-in .2s var(--spring) both;
  }
  #legend.open { display: flex; }
  @keyframes legend-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  #legend .legend-chip {
    justify-content: flex-start;
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-size: 12.5px;
  }
  #legend .ldot { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}