/* Ecran carte : carte plein ecran, reperes des personnes, feuille du bas. */
.carte { position: absolute; inset: 0; background: var(--surface-2); }
.leaflet-container { font: 400 13px var(--police); background: var(--surface-2); }
.leaflet-container a { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .carte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.86) saturate(0.55); }
}
.leaflet-top { top: calc(var(--s-haut) + 66px); }
.leaflet-control-attribution {
  margin: 0 0 0 calc(8px + var(--s-gauche)) !important; padding: 2px 8px !important; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--encre-2) !important; font-size: 11px;
}

/* Haut : le lien entre vous deux, puis Lieux et Reglages */
.haut-carte {
  position: absolute; z-index: 800; left: 0; right: 0; top: 0;
  padding: calc(10px + var(--s-haut)) calc(12px + var(--s-droite)) 0 calc(12px + var(--s-gauche));
  display: flex; align-items: flex-start; gap: 10px; pointer-events: none;
}
.haut-carte > * { pointer-events: auto; }
.lien {
  margin-right: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1);
  font: 600 15px var(--police-ronde); font-variant-numeric: tabular-nums;
}
.lien .ic { width: 18px; height: 18px; color: var(--esma); fill: color-mix(in srgb, var(--esma) 22%, transparent); }
.lien.ensemble .ic { fill: var(--esma); animation: bat 1.6s var(--sortie) 2; }
@keyframes bat { 30% { transform: scale(1.22); } 60% { transform: scale(1); } }
.boutons-haut { margin-left: auto; display: flex; gap: 10px; }
.bouton-flottant {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1);
  transition: transform 160ms var(--sortie), background-color 160ms, color 160ms;
}
.bouton-flottant:active { transform: scale(0.92); }
.bouton-flottant[aria-pressed="false"] { color: var(--encre-3); }
.bouton-flottant[aria-pressed="true"] { color: var(--accent); }

.consigne {
  position: absolute; z-index: 850; left: 12px; right: 12px; top: calc(70px + var(--s-haut));
  margin: 0 auto; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
  border-radius: 999px; background: var(--encre); color: var(--fond); font-weight: 600; font-size: 15px; box-shadow: var(--ombre-2);
  animation: descend 320ms var(--sortie);
}
.consigne span { flex: 1; }
.consigne .bouton-mini { background: color-mix(in srgb, var(--fond) 18%, transparent); color: var(--fond); }
.ajout-lieu .leaflet-container { cursor: crosshair; }

/* Feuille du bas */
.feuille {
  position: absolute; z-index: 800; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
}
.feuille-boutons {
  position: absolute; right: calc(12px + var(--s-droite)); bottom: calc(100% + 12px);
  display: flex; flex-direction: column; gap: 10px;
}
.feuille-corps {
  max-height: min(58vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 10px calc(10px + var(--s-bas));
  background: var(--surface); border-radius: var(--r-grand) var(--r-grand) 0 0; box-shadow: var(--ombre-feuille);
}
.personnes { display: flex; flex-direction: column; }
.personne + .personne { border-top: 1px solid var(--trait); }
.personne-tete {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 8px;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-moyen);
}
.personne-tete:active { background: var(--surface-2); }
.avatar {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: var(--c); color: #fff; font: 700 21px var(--police-ronde);
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 5px var(--c);
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.personne.vieux .avatar, .personne.attente .avatar { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 5px var(--encre-3); }
.personne.attente .avatar img { filter: grayscale(1); opacity: 0.75; }
.personne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.personne-nom { display: flex; align-items: baseline; gap: 8px; font: 700 18px var(--police-ronde); }
.fraicheur { font: 500 14px var(--police); color: var(--succes); font-variant-numeric: tabular-nums; white-space: nowrap; }
.personne.vieux .fraicheur, .personne.attente .fraicheur { color: var(--encre-3); }
.personne-etat { font-size: 16px; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personne.attente .personne-etat { color: var(--encre-2); }
.personne-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.personne-meta .ic { width: 18px; height: 18px; }
.batterie { display: inline-flex; align-items: center; gap: 4px; }
.batterie.faible { color: var(--danger); font-weight: 600; }
.personne-tete > .ic { color: var(--encre-3); transition: transform 240ms var(--sortie); }
.personne-tete[aria-expanded="true"] > .ic { transform: rotate(90deg); }

/* Chronologie du jour */
.chrono { list-style: none; margin: 0; padding: 0 12px 14px 74px; display: grid; gap: 0; }
.chrono li { position: relative; display: flex; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--encre); }
.chrono li::before {
  content: ""; position: absolute; left: -24px; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 2.5px var(--c);
}
.chrono li.arrivee::before { background: var(--c); }
.chrono li + li::after {
  content: ""; position: absolute; left: -20px; top: -8px; height: 22px; width: 1.5px; background: color-mix(in srgb, var(--c) 40%, transparent);
}
.chrono time { min-width: 64px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.chrono .rien { color: var(--encre-2); }
.chrono li.rien::before { display: none; }

.etat-reseau { margin: 4px 8px 6px; font-size: 14px; color: var(--encre-2); text-align: center; }

/* Reperes des personnes sur la carte */
.repere { background: none; border: 0; }
.pin { position: relative; width: 60px; height: 72px; }
.pin-rond {
  position: absolute; left: 4px; top: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--c); color: #fff; font: 700 21px var(--police-ronde);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 8px 18px rgb(20 10 24 / 0.35);
}
.pin-rond img { width: 100%; height: 100%; object-fit: cover; }
.pin-pointe {
  position: absolute; left: 24px; top: 54px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0;
  background: var(--c); transform: rotate(-45deg); box-shadow: -1px 1px 2px rgb(0 0 0 / 0.2);
}
.pin-halo {
  position: absolute; left: 4px; top: 0; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c); opacity: 0; animation: halo 2.6s var(--sortie) infinite;
}
@keyframes halo { 0% { transform: scale(1); opacity: 0.35; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.pin.vieux .pin-halo, .pin.attente .pin-halo { display: none; }
.pin.attente .pin-rond { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #9b8fa0, 0 8px 18px rgb(20 10 24 / 0.3); }
.pin.attente .pin-rond img { filter: grayscale(1); }
.pin.attente .pin-pointe { background: #9b8fa0; }
.pin-vitesse {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--encre);
  font: 600 12px var(--police); font-variant-numeric: tabular-nums; box-shadow: var(--ombre-1);
}

.etiquette-lieu { background: none; border: 0; }
.etiquette-lieu span {
  display: inline-flex; align-items: center; gap: 5px; transform: translate(-50%, 8px); white-space: nowrap;
  padding: 3px 10px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--encre); font: 600 13px var(--police); box-shadow: var(--ombre-1);
}
.etiquette-lieu b { font-size: 16px; font-weight: 400; }