/* « Où est Arthur ? » — page publique.
   La carte Lovelace réutilisée telle quelle ne connaît que quatre variables de
   thème de Home Assistant ; on les redéfinit ici, dans les deux modes, et elle
   suit le reste de la page sans être modifiée. */

:root {
  color-scheme: light dark;

  --fond: #f4f1ea;
  --encre: #1b1d21;
  --encre-douce: #6b7078;
  --surface: #fffefb;
  --bord: rgba(27, 29, 33, .1);
  --ombre: 0 2px 6px rgba(20, 22, 28, .06), 0 12px 32px rgba(20, 22, 28, .1);
  --verre: rgba(255, 254, 251, .82);

  --vert: #0ca30c;
  --rouge: #e66767;
  --ambre: #c98500;

  /* Variables attendues par van-battery-sql-card.js */
  --primary-text-color: var(--encre);
  --secondary-text-color: var(--encre-douce);
  --divider-color: var(--bord);
  --card-background-color: var(--surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14161c;
    --encre: #e9eaec;
    --encre-douce: #979ba4;
    --surface: #1e2129;
    --bord: rgba(233, 234, 236, .13);
    --ombre: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
    --verre: rgba(30, 33, 41, .82);
    --rouge: #ef8080;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#carte { position: fixed; inset: 0; background: var(--fond); }

/* Le fond Esri est déjà sobre : un léger voile suffit à le faire reculer
   derrière Arthur, sans le délaver. En sombre, c'est un jeu de tuiles à part
   qui est chargé (cf. app.js), et l'inversion ne sert plus qu'au fond de
   secours, qui n'a pas de variante nocturne. */
.leaflet-tile-pane { filter: saturate(.85) brightness(1.02) contrast(.98); }
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: saturate(.92) brightness(.98); }
}
body.carte-inversee .leaflet-tile-pane {
  filter: invert(.92) hue-rotate(180deg) saturate(.5) brightness(.92) contrast(.92);
}

.leaflet-container { font: inherit; background: var(--fond); }
.leaflet-control-attribution {
  background: var(--verre) !important;
  color: var(--encre-douce) !important;
  backdrop-filter: blur(8px);
  font-size: 10px; padding: 2px 7px; border-radius: 8px 0 0 0;
}
.leaflet-control-attribution a { color: var(--encre-douce) !important; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--ombre); border-radius: 10px; overflow: hidden; }
.leaflet-control-zoom a {
  background: var(--verre) !important; color: var(--encre) !important;
  border-color: var(--bord) !important; backdrop-filter: blur(8px);
}
/* Bouton « voir le trajet », sous les commandes de zoom. */
a.trajet {
  display: grid; place-items: center; width: 30px; height: 30px;
  margin-top: 8px; border-radius: 10px;
  background: var(--verre) !important; color: var(--encre-douce);
  border: 1px solid var(--bord); box-shadow: var(--ombre);
  backdrop-filter: blur(8px);
}
a.trajet svg { width: 17px; fill: currentColor; }
a.trajet:hover { color: var(--encre); }
a.trajet.actif { color: var(--vert); border-color: var(--vert); }

.leaflet-control-scale-line {
  background: var(--verre) !important; color: var(--encre-douce) !important;
  border-color: var(--bord) !important; backdrop-filter: blur(8px);
  border-radius: 0 6px 6px 0; padding: 1px 6px; font-size: 10px;
}

/* ------------------------------------------------------------------ titre */

/* Les deux pastilles s'empilent dans un conteneur : caler la seconde sur un
   décalage fixe la faisait chevaucher le titre dès qu'il passait à trois lignes. */
.haut {
  position: fixed; z-index: 500;
  top: max(14px, env(safe-area-inset-top)); left: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}

.titre {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px 9px 11px;
  background: var(--verre); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--bord); border-radius: 999px; box-shadow: var(--ombre);
  max-width: min(84vw, 420px);
}
.logo { display: grid; place-items: center; width: 30px; color: var(--vert); flex: none; }
.logo svg { width: 28px; fill: currentColor; }
.titre-txt { min-width: 0; }
.titre h1 {
  margin: 0; font-size: 15px; font-weight: 640; letter-spacing: -.01em;
  white-space: nowrap;
}
.titre p {
  /* Le lieu et l'âge du relevé peuvent être longs : deux lignes valent mieux
     qu'un « relevé il y … » coupé. */
  margin: 1px 0 0; font-size: 12px; color: var(--encre-douce); line-height: 1.3;
}

/* --------------------------------------------------------------- destination */

.cap {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 15px 8px 12px;
  background: var(--verre); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--bord); border-radius: 999px; box-shadow: var(--ombre);
  max-width: min(84vw, 420px);
}
.cap-fleche { font-size: 17px; color: var(--vert); flex: none; line-height: 1; }
.cap b { display: block; font-size: 13.5px; font-weight: 620; letter-spacing: -.01em; }
.cap small { display: block; font-size: 11.5px; color: var(--encre-douce);
             font-variant-numeric: tabular-nums; }

/* Le drapeau d'arrivée. */
.but {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: var(--vert);
  background: var(--surface); border: 2.5px solid var(--vert);
  box-shadow: 0 3px 12px rgba(10, 12, 16, .28);
}
.but svg { width: 18px; }

/* ------------------------------------------------------------------ badge */

.badge {
  position: fixed; z-index: 500;
  left: 50%; transform: translateX(-50%);
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 11px 16px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--verre); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--bord); border-radius: 18px; box-shadow: var(--ombre);
  transition: transform .18s ease, box-shadow .18s ease;
}
.badge:hover { transform: translateX(-50%) translateY(-2px); }
.badge:active { transform: translateX(-50%) translateY(0) scale(.985); }
.badge:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }

.pile { display: flex; align-items: center; gap: 2px; flex: none; }
.pile-corps {
  display: block; width: 32px; height: 17px; padding: 2.5px;
  border: 1.8px solid currentColor; border-radius: 5px; color: var(--encre-douce);
}
.pile-corps i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--encre-douce); transition: width .6s ease, background .3s ease;
}
.pile-borne {
  display: block; width: 3px; height: 7px; border-radius: 0 2px 2px 0;
  background: var(--encre-douce);
}
.badge.charge .pile-corps, .badge.charge .pile-borne { color: var(--vert); }
.badge.charge .pile-corps i, .badge.charge .pile-borne { background: var(--vert); }
.badge.bas .pile-corps, .badge.bas .pile-borne { color: var(--rouge); }
.badge.bas .pile-corps i, .badge.bas .pile-borne { background: var(--rouge); }

.soc { display: flex; align-items: baseline; gap: 1px; }
.soc b { font-size: 27px; font-weight: 660; letter-spacing: -.03em;
         font-variant-numeric: tabular-nums; }
.soc i { font-style: normal; font-size: 14px; color: var(--encre-douce); }

.trait { width: 1px; align-self: stretch; margin: 2px 0; background: var(--bord); }

.flux { display: grid; gap: 1px; min-width: 92px; }
.flux b { font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums;
          white-space: nowrap; }
.flux small { font-size: 11px; color: var(--encre-douce); white-space: nowrap; }
.badge.charge .flux b { color: var(--vert); }
.badge.decharge .flux b { color: var(--rouge); }

.chev { display: grid; place-items: center; width: 16px; color: var(--encre-douce); flex: none; }
.chev svg { width: 16px; transition: transform .2s ease; }
.badge[aria-expanded="true"] .chev svg { transform: rotate(90deg); }

.badge.dort { opacity: .82; }
.badge.dort .flux b { color: var(--encre-douce); }

/* ------------------------------------------------------------------ volet */

.voile {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10, 12, 16, .42); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
}
.voile.ouvert { opacity: 1; }

.volet {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: 90dvh;
  background: var(--fond);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(10, 12, 16, .3);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22, .68, .3, 1);
}
.volet.ouvert { transform: translateY(0); }

.poignee {
  width: 38px; height: 4px; margin: 9px auto 0; flex: none;
  border-radius: 999px; background: var(--bord);
}
.volet-tete {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px 10px; flex: none;
}
.volet-tete h2 { margin: 0; font-size: 18px; font-weight: 640; letter-spacing: -.015em; }
.volet-tete p { margin: 2px 0 0; font-size: 12.5px; color: var(--encre-douce); }
.fermer {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  color: var(--encre-douce); background: transparent;
  border: 1px solid var(--bord); border-radius: 50%;
}
.fermer svg { width: 17px; }
.fermer:hover { color: var(--encre); background: var(--surface); }

.cartes {
  /* Sans min-height, l'élément flexible refuse de rétrécir et rien ne défile. */
  min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 14px 4px;
  display: grid; gap: 12px;
}
.cartes van-battery-sql-card { display: block; }

.volet-pied {
  flex: none; padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  font-size: 11.5px; color: var(--encre-douce);
}

/* Écran large : le volet devient un tiroir latéral, la carte reste visible. */
@media (min-width: 860px) {
  .volet {
    left: auto; top: 0; right: 0; width: 460px;
    max-height: none; border-radius: 22px 0 0 22px;
    transform: translateX(105%);
  }
  .volet.ouvert { transform: translateX(0); }
  .poignee { display: none; }
  .volet-tete { padding-top: 22px; }
  /* Le tiroir mange la droite de l'écran : le badge se recentre sur ce qu'il
     reste de carte au lieu de passer dessous. */
  body.volet-ouvert .badge { transform: translateX(calc(-50% - 230px)); }
  body.volet-ouvert .badge:hover { transform: translateX(calc(-50% - 230px)) translateY(-2px); }
}

/* ------------------------------------------------------------- marqueur */

.arthur { display: grid; place-items: center; }
.arthur .halo {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: var(--vert); opacity: .22; animation: pouls 2.6s ease-out infinite;
}
.arthur .pastille {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); color: var(--vert);
  border: 2.5px solid var(--vert);
  box-shadow: 0 3px 12px rgba(10, 12, 16, .28);
}
.arthur .pastille svg { width: 22px; fill: currentColor; }
.arthur.dort .halo { display: none; }
.arthur.dort .pastille { color: var(--encre-douce); border-color: var(--encre-douce); }

@keyframes pouls {
  0%   { transform: scale(.7); opacity: .3; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}