/* Outil carte — page autonome (comme commande.html) : les jetons du site redits
   ici, aucune couleur nouvelle. Mobile d'abord : barre en haut, carte plein
   écran, fiche en tiroir bas ; à partir de 900 px la fiche devient un volet à
   gauche et les couches restent en haut à droite. */
:root {
  --paper: #fcfcfa;
  --paper-soft: #f4f4f0;
  --ink: #101623;
  --ink-soft: #5c6470;
  --line: #e6e6df;
  --line-strong: #d5d5cc;
  --accent: #ff6b1a;
  --accent-ink: #b84700;
  --blue: #0038b8;
  --heb: "Noto Sans Hebrew", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-sm: 0 1px 2px rgba(16, 22, 35, .05);
  --shadow-md: 0 1px 2px rgba(16, 22, 35, .05), 0 8px 24px rgba(16, 22, 35, .06);
  --shadow-lg: 0 2px 4px rgba(16, 22, 35, .06), 0 24px 64px rgba(16, 22, 35, .12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "General Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden;
}
a { color: inherit; }
.he { font-family: var(--heb); direction: rtl; unicode-bidi: isolate; font-size: .92em; }
.soft { color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ Barre : logo + recherche ═══ */
.barre {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: var(--paper);
  z-index: 30; flex: none;
}
.logo {
  font-weight: 700; font-size: 1rem; letter-spacing: -.02em; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; flex: none; white-space: nowrap;
}
.logo img { height: 1.8rem; width: auto; display: block; }
.logo span { color: var(--accent-ink); }
.recherche { display: flex; flex: 1; min-width: 0; gap: .4rem; }
.recherche input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.recherche input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.recherche button {
  font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; flex: none;
  padding: .55rem .9rem; border-radius: 10px; border: 1px solid rgba(16, 22, 35, .9);
  background: var(--ink); color: var(--paper);
}
.recherche button:hover { box-shadow: var(--shadow-md); }
.recherche button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .logo { font-size: 0; gap: 0; } .logo img { height: 1.9rem; } }

/* ═══ Messages sous la barre ═══ */
.etat, .bandeau { margin: 0; padding: .45rem .9rem; font-size: .9rem; flex: none; z-index: 20; }
.etat { background: var(--paper-soft); color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.bandeau { background: #fff1e8; color: var(--accent-ink); border-bottom: 1px solid #ffd2b8; }
.etat[hidden], .bandeau[hidden] { display: none; }

/* ═══ La scène : carte plein écran, couches, aide, fiche ═══ */
.scene { position: relative; flex: 1; min-height: 0; }
.carte { position: absolute; inset: 0; background: var(--paper-soft); }
.carte.sans-fond {
  background-color: #f6f6f1;
  background-image:
    linear-gradient(to right, rgba(16, 22, 35, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 22, 35, .06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.leaflet-container { font-family: inherit; font-size: .9rem; }
.leaflet-container a { color: var(--blue); }
.leaflet-control-attribution { font-size: .68rem; background: rgba(252, 252, 250, .8); }
.leaflet-popup-content { margin: .8rem .95rem; line-height: 1.45; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow-md); }
.leaflet-bar { border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.leaflet-bar a { color: var(--ink); }

.couches {
  position: absolute; top: .7rem; right: .7rem; z-index: 1050; max-width: min(19rem, calc(100% - 1.4rem));
  background: rgba(252, 252, 250, .94); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  font-size: .86rem;
}
.couches summary {
  cursor: pointer; padding: .5rem .8rem; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: .4rem;
}
.couches summary::-webkit-details-marker { display: none; }
.couches summary::after { content: "–"; margin-inline-start: auto; color: var(--accent-ink); font-weight: 600; }
.couches details:not([open]) summary::after { content: "+"; }
.couches label, .couches .legende {
  display: flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .8rem; cursor: pointer;
}
.couches label[hidden] { display: none; }
.couches .legende { cursor: default; color: var(--ink-soft); border-top: 1px dashed var(--line); margin-top: .2rem; padding-top: .45rem; }
.couches .legende.fond { border-top: none; margin-top: 0; padding-top: .1rem; font-size: .8rem; }
.couches .legende[hidden] { display: none; }
.couches input { margin: 0; accent-color: var(--blue); }
.couches label .he { white-space: nowrap; }
.couches details > :last-child { padding-bottom: .5rem; }
.pastille { display: inline-block; width: 1.15rem; height: .75rem; border-radius: 3px; flex: none; }
.pastille.per { border: 2px dashed var(--blue); background: rgba(0, 56, 184, .08); }
.pastille.plan { border: 2px solid #3a6fd8; background: rgba(58, 111, 216, .12); }
.pastille.lim { border: 1px solid #6b7280; }
.pastille.parc { border: 2px solid var(--accent-ink); background: rgba(255, 107, 26, .3); }
.note { margin: 0; padding: .35rem .8rem .1rem; color: var(--accent-ink); font-size: .82rem; }
.note[hidden] { display: none; }

.aide {
  position: absolute; left: .7rem; right: 3.8rem; bottom: .7rem; z-index: 1050;
  margin: 0; padding: .55rem .85rem; text-align: center;
  background: rgba(16, 22, 35, .88); color: var(--paper); font-size: .84rem; line-height: 1.4; border-radius: 12px;
  box-shadow: var(--shadow-md); pointer-events: none;
}
.aide[hidden] { display: none; }

/* ═══ La fiche : tiroir bas sur mobile ═══ */
.fiche {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100; /* au-dessus des commandes Leaflet (1000) */
  max-height: 58%; display: flex; flex-direction: column;
  background: var(--paper); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
}
.fiche[hidden] { display: none; }
.fiche:focus { outline: none; }
.fiche:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) { .fiche { animation: fiche-in .4s var(--ease); } }
@keyframes fiche-in { from { opacity: 0; transform: translateY(16px); } }
.fiche-tete {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .6rem .5rem 1rem;
  border-bottom: 1px solid var(--line); flex: none;
}
.fiche-tete h2 {
  margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; /* un titre hébreu se lit de droite à gauche */
}
.fiche-tete button {
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-soft); color: var(--ink);
}
.fiche-tete button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fiche-corps { overflow: auto; padding: .6rem 1rem 1rem; -webkit-overflow-scrolling: touch; }
.fiche-corps h3 {
  margin: .9rem 0 .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: .5rem;
}
.fiche-corps h3 .he { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.fl { margin: .25rem 0; font-size: .95rem; }
.fl.parcelle { font-size: 1.02rem; }
.fl.parcelle .he, .fl.adresse .he { display: inline-block; margin-inline-start: .35rem; }
.fl.adresse .he { font-size: 1.02rem; }
.fl.vide { color: var(--ink-soft); }
.fl.panne { color: var(--accent-ink); }
.fl.attente { color: var(--ink-soft); font-style: italic; }
.fl.dedans { color: var(--blue); font-weight: 500; }
.fliste { list-style: none; margin: .2rem 0 0; padding: 0; }
.fliste li { padding: .45rem 0; border-top: 1px solid var(--line); font-size: .93rem; }
.fliste li:first-child { border-top: none; }
.fliste a { color: var(--blue); text-decoration: none; font-weight: 500; }
.fliste a:hover { text-decoration: underline; }
.fchoix li { padding: .2rem 0; }
.fbtn {
  font: inherit; font-size: .93rem; font-weight: 500; cursor: pointer; text-align: start;
  padding: .5rem .85rem; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  width: 100%;
}
.fbtn:hover { border-color: var(--blue); }
.fbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.factions { margin: .6rem 0 .2rem; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  font-weight: 500; font-size: .98rem; padding: .55rem 1.05rem; border-radius: 10px;
  background: var(--ink); color: var(--paper); border: 1px solid rgba(16, 22, 35, .9); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn.orange { background: var(--accent); color: #17181c; border-color: rgba(184, 71, 0, .55); }
.btn.orange:hover { box-shadow: 0 8px 24px rgba(255, 107, 26, .25); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ═══ Large écran : la fiche devient un volet à gauche ═══ */
@media (min-width: 900px) {
  body { font-size: 17px; }
  .barre { padding: .65rem 1.2rem; gap: 1.2rem; }
  .logo { font-size: 1.12rem; }
  .logo img { height: 2.1rem; }
  .recherche { max-width: 40rem; }
  .fiche {
    left: 1rem; right: auto; top: 1rem; bottom: auto; width: 24rem; max-height: calc(100% - 2rem);
    border: 1px solid var(--line); border-radius: 14px;
  }
  @keyframes fiche-in { from { opacity: 0; transform: translateX(-12px); } }
  .aide { left: 50%; right: auto; bottom: 1.4rem; transform: translateX(-50%); width: min(32rem, calc(100% - 8rem)); }
  .couches { top: 1rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .fiche, .btn, .btn .arr { animation: none; transition: none; } }