/* Trouve une borne — disposition « application de carte » (CE). Les couleurs et polices viennent
   de theme.css ; ce fichier ne porte que la mise en page et l'habillage des composants. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--map-bg);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.nojs { padding: 16px; font-size: 15px; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(button) { cursor: pointer; }

/* ---------- carte plein écran ---------- */
.carte { position: fixed; inset: 0; z-index: 0; }
#map { position: absolute; inset: 0; background: var(--map-bg); }
.pins { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
/* C113 : au toucher, les bulles laissent passer les gestes (pincement, double tape) à la carte ; une tape simple est
   rattrapée par test de position dans app.js. À la souris (pointeur fin, pas de pincement), elles restent cliquables. */
.pins .pin { pointer-events: none; outline: none; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(20,22,30,.28)); }
@media (hover: hover) and (pointer: fine) { .pins .pin { pointer-events: auto; } }
.pins .pin text { font-family: var(--font-ui); pointer-events: none; }
.pins .halo { fill: transparent; }
.pins .pin:focus-visible .halo, .pins .pin:hover .halo { fill: var(--accent-soft); }
.pins .pin.sel .halo { fill: var(--accent-soft); }
/* Position du visiteur (groupe #pos, posé sous les bulles). Ces deux classes avaient perdu leur style à la refonte :
   un cercle SVG sans remplissage retombe au noir plein, d'où le grand disque noir signalé sur iPhone. Jetons de theme.css,
   clair et sombre. Le halo (--accent-soft) est déjà très transparent, il ne masque pas les bulles. */
.pins .pos-precision { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; stroke-opacity: .6; }
.pins .pos-point { fill: var(--accent); stroke: var(--pin-ring); stroke-width: 2.5; }
.carte-note { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); margin: 0; z-index: 3;
  background: var(--surface); color: var(--ink2); font-size: 13px; padding: 7px 14px; border-radius: 999px; box-shadow: var(--ombre); }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right { display: none; }
.maplibregl-ctrl-attrib { background: transparent !important; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--ink3); }

/* ---------- barre du haut, posée sur la carte ---------- */
.haut { position: fixed; left: 0; right: 0; top: 0; z-index: 5;
  padding: max(10px, env(safe-area-inset-top)) 12px 0; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.cherchebar { pointer-events: auto; height: 52px; padding: 0 8px 0 12px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 26px; box-shadow: var(--ombre); }
.logo-mini { flex: 0 0 auto; }
.cherche { position: relative; flex: 1 1 auto; min-width: 0; }
.cherche input { width: 100%; height: 40px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.cherche input::placeholder { color: var(--ink3); }
#q-res { position: absolute; left: -40px; right: -8px; top: 46px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border-radius: 16px; box-shadow: var(--ombre-forte); max-height: 50vh; overflow: auto; }
#q-res li { padding: 10px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
#q-res li:hover, #q-res li[aria-selected="true"] { background: var(--surface2); }
.ftog { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 20px;
  background: var(--surface2); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ftog .fbadge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.pastilles { pointer-events: auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pastilles::-webkit-scrollbar { display: none; }
.pill { flex: 0 0 auto; height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: var(--ombre); }
.pill.actif { background: var(--accent); color: var(--accent-ink); }

/* ---------- commandes de carte ---------- */
/* E49-4 : le bouton remonte avec la feuille du bas (var posée par ui.js) au lieu d'être recouvert par elle */
.commandes { position: fixed; right: 14px; bottom: calc(var(--feuille-h, 196px) + 16px + env(safe-area-inset-bottom)); z-index: 7;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end; transition: bottom .28s cubic-bezier(.4,0,.2,1), opacity .18s; }
/* E-C100/2 : au-delà de la mi-hauteur de la feuille, les commandes disparaissent (elles passeraient sur la fiche) */
.feuille-haute .commandes { opacity: 0; pointer-events: none; }
.rond { width: 48px; height: 48px; border: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--ombre);
  display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.rond.petit { width: 40px; height: 40px; }
.zoomstack { display: flex; flex-direction: column; background: var(--surface); border-radius: 24px; box-shadow: var(--ombre); }
.zoomstack button { width: 48px; height: 48px; border: 0; background: transparent; font-size: 22px; color: var(--ink); cursor: pointer; }
.zoomstack button + button { border-top: 1px solid var(--line); }
/* téléphone : ni zoom ni recadrage, on zoome aux doigts (E49-4) ; seul le bouton de position reste */
.zoomstack, #z-reset { display: none; }

/* bouton de position : flèche de navigation, trois états lisibles sans la couleur (E49-4) */
.geo .geo-fleche path { fill: none; stroke: var(--accent); stroke-width: 2.2px; stroke-linejoin: round; stroke-linecap: round; }
.geo[data-geo="active"] .geo-fleche path { fill: var(--accent); }
.geo[data-geo="searching"] .geo-fleche { display: none; }
.geo[data-geo="denied"] .geo-fleche path { stroke: var(--ink3); }
.geo .geo-attente { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--ring); border-top-color: var(--accent); }
.geo[data-geo="searching"] .geo-attente { display: block; animation: geo-tourne .8s linear infinite; }
.geo[data-geo="denied"]::after { content: ""; position: absolute; width: 30px; height: 3px; border-radius: 2px; background: var(--hs); transform: rotate(-45deg); }
@keyframes geo-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .geo[data-geo="searching"] .geo-attente { animation: none; } }

/* ---------- feuille du bas (téléphone) ---------- */
.feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -2px 16px rgba(20,22,30,.14);
  display: flex; flex-direction: column; transition: height .28s cubic-bezier(.4,0,.2,1);
  height: 196px; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); }
.feuille[data-etat="moitie"] { height: 56vh; }
.feuille[data-etat="pleine"] { height: 92vh; }
.poignee { align-self: center; width: 44px; height: 24px; margin: 6px 0 2px; border: 0; background: transparent; position: relative; touch-action: none; }
.poignee::before { content: ""; position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: var(--ring); }
.feuille-corps { flex: 1 1 auto; overflow: hidden; position: relative; }
.liste { position: absolute; inset: 0; overflow-y: auto; padding: 0 18px 16px; -webkit-overflow-scrolling: touch; }
.listhead { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.count { line-height: 1.3; }
.count b { color: var(--accent); }
/* E-C100/3 : les points libres en titre, le total en dessous plus petit */
.c-titre { display: block; font-size: 17px; font-weight: 800; }
.c-sous { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink3); margin-top: 1px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); white-space: nowrap; flex: 0 0 auto; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--libre); }
.live .dot.late { background: var(--occupe); }
.tri-lig { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); margin: 8px 0 4px; }
.tri-lig select { border: 1px solid var(--ring); border-radius: 8px; padding: 2px 6px; background: var(--surface); color: var(--ink); font-size: 12px; }
.reset { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: underline; }

/* lignes de la liste : bouton [icône, bloc nom/sous-titre, bloc note/âge] */
#rows { display: flex; flex-direction: column; }
.row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line);
  width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0; background: transparent; }
.row[aria-current="true"] { background: var(--accent-soft); border-radius: 12px; padding: 12px; margin: 0 -12px; }
.row > svg { flex: 0 0 auto; }
.row > div:not(.age) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .nm { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sansdecl { font-size: 11.5px; color: var(--ink3); }
.row .end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row .where { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.row .conf-lig { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.row .meter rect.on { fill: var(--ink3); }
.row .meter rect.off { fill: var(--line); }
.rien { padding: 24px 0; color: var(--ink3); font-size: 14px; text-align: center; }

/* invitation publicitaire + mentions */
/* C97 : invitation commerçant, en bas de la fiche d'une borne (encadré pointillé, comme telephone-bas-de-fiche.html) */
/* C99 : « Autour de la borne » — liste des commerces partenaires puis l'invitation, en bas de la fiche */
.det .autour { display: flex; flex-direction: column; gap: 10px; }
.det .autour-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.det .commerce { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.det .commerce-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.det .commerce-nom { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.det .partenaire { flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 8px; border: 1px solid var(--ring); color: var(--ink3); }
.det .commerce-act { font-size: 13px; color: var(--ink2); }
.det .commerce-dist { flex: none; font-size: 14px; font-weight: 700; }
.det .invit { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1.5px dashed var(--ring); border-radius: 16px; }
.det .invit-t { font-size: 15px; font-weight: 700; }
.det .invit-p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.det .invit-a { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
#mentions { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.5; color: var(--ink3); }
#mentions .prive { margin-top: 4px; }

/* ---------- fiche ---------- */
.fiche { position: absolute; inset: 0; overflow-y: auto; padding: 8px 20px 20px; background: var(--surface); display: flex; flex-direction: column; }
/* E49-1 : le retour ne flotte plus (il rognait la largeur du titre et des blocs) ; sa propre ligne, collée en haut au défilement */
.fiche .det-close { position: sticky; top: 0; align-self: flex-end; flex: none; margin-bottom: -6px; z-index: 2; background: var(--surface2); }
.det { display: flex; flex-direction: column; gap: 14px; padding-top: 0; }
.det .vide { color: var(--ink3); font-size: 14px; }
.det h2, .det h3 { margin: 0; }
.det .tete { font-size: 21px; font-weight: 800; }
.det .sub, .det .where { font-size: 14px; color: var(--ink2); }
.det .conf-head, .det .ch-top { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface3); border-radius: 16px; }
.det .ch-lab, .det .ch-val { font-size: 15px; font-weight: 700; }
.det .ch-why { font-size: 13px; line-height: 1.4; color: var(--ink2); }
.det .iti { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 24px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
/* E49-1 : répartition des états en grille (deux colonnes quand la largeur le permet, une seule sinon) ;
   symbole, libellé puis nombre sur une ligne, avec un espace, sans jamais sortir de l'écran */
.det .brk { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.det .brk > div { display: flex; align-items: center; gap: 7px; font-size: 14px; min-width: 0; }
.det .brk > div > svg { flex: none; }
.det .brk > div > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.det .brk b { font-weight: 700; color: var(--ink); }
.det .zoomer { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 22px; font-weight: 700; }
.det dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.det dt { color: var(--ink3); }
.det dd { margin: 0; color: var(--ink); }
.det .mono { font-variant-numeric: tabular-nums; }
.det .prises-detail { display: flex; flex-wrap: wrap; gap: 6px; }
.det .prise-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--surface2); font-size: 13px; }
.det .sansdecl { font-size: 12px; color: var(--ink3); }
.det .ref-point { font-size: 12px; color: var(--ink3); padding-top: 2px; }
.det .profil { padding: 12px 0; font-size: 13.5px; color: var(--ink2); line-height: 1.45; }
.det .profil b { display: block; margin-bottom: 2px; color: var(--ink); }
.det .mini { font-size: 12px; color: var(--ink3); }
.det .plus { color: var(--accent); }

/* fiche rapprochée de la maquette : titre, boutons, encart de confiance, liste des points */
.det h2 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.det .actions { display: flex; gap: 10px; }
.det .b-go { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border-radius: 24px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.det .b-share { width: 48px; height: 48px; flex: none; border: 0; border-radius: 24px; background: var(--surface2);
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.det .conf-box { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface3); border-radius: 16px; }
.det .conf-bars { flex: none; }
.det .conf-bars rect.on { fill: var(--ink); }
.det .conf-bars rect.off { fill: var(--line); }
.det .conf-txt { display: flex; flex-direction: column; gap: 2px; }
.det .conf-forte { font-size: 15px; font-weight: 700; }
.det .conf-why { font-size: 13px; line-height: 1.4; color: var(--ink2); }
.det .state { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: var(--surface2); border-left: 4px solid var(--nodata); }
.det .state strong { font-size: 16px; font-weight: 700; }
.det .state .sub { font-size: 13px; color: var(--ink2); }
.det .pts { display: flex; flex-direction: column; }
.det .pts-head { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); padding-bottom: 4px; }
.det .pt { display: flex; gap: 12px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; width: 100%; cursor: pointer; color: var(--ink); }
.det .pt:last-child { border-bottom: 0; }
.det .pt > svg { flex: none; }
.det .pt-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.det .pt-etat { font-size: 15px; font-weight: 600; }
.det .pt-dep { font-size: 13px; color: var(--ink3); }
.det .pt-prise { font-size: 14px; color: var(--ink2); white-space: nowrap; }
.det .adr { display: flex; flex-direction: column; gap: 2px; }
.det .adr-lab { font-size: 13px; color: var(--ink3); }
.det .adr a { color: var(--accent); text-decoration: none; font-size: 14px; }
.det .adr a.vide { color: var(--ink3); }
.det .adr-note { font-size: 12px; color: var(--ink3); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); z-index: 30;
  background: var(--ink); color: var(--surface); font-size: 14px; padding: 10px 16px; border-radius: 999px;
  box-shadow: var(--ombre-forte); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- panneau de filtres (surimpression) ---------- */
.fpanel-fond { position: fixed; inset: 0; z-index: 8; background: rgba(20,22,30,.35); }
.fpanel { position: fixed; z-index: 9; right: 12px; left: 12px; top: 12px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px; box-shadow: var(--ombre-forte); padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.fp-tete { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 800; }
.fp-x { border: 0; background: transparent; font-size: 18px; color: var(--ink3); }
.grp { display: flex; flex-direction: column; gap: 8px; }
.grp > span { font-size: 13px; font-weight: 700; color: var(--ink3); }
.chips, .etats { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding: 0 14px; border: 1px solid var(--ring); border-radius: 17px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.etat { display: inline-flex; align-items: center; gap: 6px; }
.chip.etat .puce { width: 12px; height: 12px; border-radius: 50%; }
.repart { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.repart > span { display: block; }
.grp select, #f-op { height: 38px; border: 1px solid var(--ring); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); font-size: 14px; }
#f-conf { width: 100%; accent-color: var(--accent); }
.swi { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.swi input { accent-color: var(--accent); width: 18px; height: 18px; }
.note2 { font-size: 12.5px; color: var(--ink2); line-height: 1.4; }
.theme { display: inline-flex; border: 1px solid var(--ring); border-radius: 12px; overflow: hidden; }
.theme button { border: 0; background: transparent; color: var(--ink2); font-size: 13px; padding: 7px 12px; }
.theme button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 700; }

.fiche-ouverte .liste { display: none; }
body:not(.fiche-ouverte) .fiche { display: none; }

/* ---------- grand écran : panneau flottant à gauche ---------- */
@media (min-width: 860px) {
  .haut { left: 20px; right: auto; width: 400px; padding-top: 20px; }
  .cherchebar { height: 48px; }
  .pastilles { flex-wrap: wrap; overflow: visible; }
  /* ordinateur : la feuille est un panneau à gauche, les commandes reprennent leur place fixe, zoom et recadrage reviennent */
  .commandes { bottom: 28px; }
  .feuille-haute .commandes { opacity: 1; pointer-events: auto; }   /* le panneau gauche ne masque pas les commandes */
  .zoomstack { display: flex; }
  #z-reset { display: flex; }
  /* panneau gauche : colonne de hauteur fixe, la liste défile dedans, la fiche la recouvre.
     Sélecteur par id pour l'emporter sans ambiguïté sur les hauteurs de la feuille téléphone. */
  #feuille { left: 20px; right: auto; bottom: auto; top: 150px; width: 400px;
    height: calc(100vh - 172px); max-height: none;
    border-radius: 22px; box-shadow: var(--ombre-forte); transition: none; overflow: hidden; }
  .poignee { display: none; }
  .liste { padding-top: 12px; }
  .fiche { border-radius: 22px; }
  .fpanel { left: 20px; right: auto; width: 400px; top: 80px; }
  .fpanel-fond { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .feuille, .commandes { transition: none; } }