/* Suivi GPS (public/suivi.js) : liste des appareils à gauche, carte à droite ; téléphone : liste puis carte */
.sv-page{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--esp-3);align-items:start}
.sv-liste{display:flex;flex-direction:column;gap:8px}
.sv-app{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-carte);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.sv-app:hover{border-color:var(--copper)}
.sv-pastille{flex:none;width:14px;height:14px;border-radius:50%;margin-top:3px;box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--line)}
.sv-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-alerte{color:var(--bad);font-weight:600}
.sv-carte-bloc{min-width:0}
.sv-carte{height:calc(100vh - 190px);min-height:360px;border-radius:var(--r-carte);border:1px solid var(--line);overflow:hidden;background:#e8e4dc}
.sv-note{margin:6px 2px 0}
.head .row input[type=date],.head .row select{width:auto;min-width:0}
@media (max-width:860px){.sv-page{grid-template-columns:minmax(0,1fr)}.sv-carte{height:60vh}}
.sv-app{width:100%}
.sv-titre{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
/* Étiquette avec le nom de l'appareil sur la carte (à la place d'un rond) : bulle au-dessus, pointe sur la position exacte */
.sv-etiq-wrap{background:none;border:0}
.sv-etiq{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 9px));white-space:nowrap;padding:4px 9px;border-radius:8px;background:var(--c,#b8752a);color:#fff;
  font:700 12.5px/1.2 Inter,system-ui,sans-serif;box-shadow:0 2px 8px #0005;border:2px solid #fff}
.sv-etiq::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.sv-etiq::before{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--c,#b8752a);border-bottom:0;z-index:1}
/* Fiches des appareils */
.svf-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--esp-3)}
.svf-carte{display:flex;flex-direction:column;gap:6px}
.svf-tete{display:flex;gap:10px;align-items:flex-start;margin-bottom:4px}
.svf-tete h2{margin:0}
.svf-l{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-petit);padding:4px 0;border-bottom:1px solid var(--line)}
.svf-l>span:last-child{text-align:right;min-width:0;overflow-wrap:anywhere}
.svf-note{margin:4px 0 0;padding:8px 10px;border-radius:8px;background:var(--panel2)}
.svf-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.svf-btns .btn{flex:1 1 140px;justify-content:center}
/* Option « Suivi rapide » dans la fiche : case + explication dessous ; fenêtre du code QR de Traccar */
.svf-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-carte);background:var(--panel2);cursor:pointer}
.svf-option input{margin-top:3px;width:18px;height:18px;flex:none}
.svf-option>span{display:flex;flex-direction:column;gap:3px}
.svf-qr-btn{width:100%;justify-content:center;margin-top:6px;border-color:var(--copper);color:var(--copper)}
.svq{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.svq-qr{flex:none;width:240px;max-width:100%;background:#fff;border-radius:10px;padding:6px}
.svq-qr svg{width:100%;height:auto;display:block}
.svq-etapes{flex:1 1 240px;margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.svq>p{flex:1 1 100%;margin:0}
/* Direct (2026-11-03) : témoin « En direct », état en route / à l'arrêt, bouton Suivre, alertes récentes, alertes dans la fiche */
.sv-gauche{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.sv-direct{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-petit);color:var(--muted);white-space:nowrap}
.sv-pt{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:svPouls 2s infinite}
.sv-pt.off{background:var(--muted);animation:none}
.sv-pt.err{background:var(--bad);animation:none}
@keyframes svPouls{0%{box-shadow:0 0 0 0 #23784a66}70%{box-shadow:0 0 0 7px #23784a00}100%{box-shadow:0 0 0 0 #23784a00}}
@media (prefers-reduced-motion:reduce){.sv-pt{animation:none}}
.sv-etat{font-weight:600}
.sv-roule{color:var(--ok)}
.sv-arret{color:var(--ink)}
.sv-btns{display:inline-flex;align-items:center;gap:8px;flex:none}
.sv-suivre{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 12px/1.4 inherit;font-family:inherit;cursor:pointer}
.sv-suivre:hover{border-color:var(--copper);color:var(--copper)}
.sv-suivre.on{background:var(--copper);border-color:var(--copper);color:#fff}
.sv-app.sv-suivi{border-color:var(--copper);box-shadow:0 0 0 1px var(--copper) inset}
.sv-etiq.roule{box-shadow:0 2px 10px #0006,0 0 0 3px #23784a88}
.sv-al{padding:10px 12px}
.sv-al-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sv-al ul,.sv-al-liste{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.sv-al li,.sv-al-liste li{display:flex;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:var(--t-petit);line-height:1.35}
.sv-al li::before,.sv-al-liste li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-top:5px}
.sv-al li.ok::before,.sv-al-liste li.ok::before{background:var(--ok)}
.sv-al-h{flex:none;width:72px;color:var(--muted);font-variant-numeric:tabular-nums}
.sv-al li>span:last-child,.sv-al-liste li>span:last-child{min-width:0;overflow-wrap:anywhere}
.svf-bas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--esp-3);margin-top:var(--esp-3);align-items:start}
.svf-bas h2{margin:0 0 6px}
@media (max-width:860px){.svf-bas{grid-template-columns:minmax(0,1fr)}}
.svf-al-bloc{display:flex;flex-direction:column;gap:6px}
.svf-al-bloc>b{margin-top:4px}
.svf-al{cursor:default}
.svf-al-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.svf-al-l label{cursor:pointer}
.svf-option .svf-al-v{width:76px;height:30px;padding:2px 8px;margin:0;flex:none}
.svf-al-n{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sv-al a,.sv-al-liste a,.svf-garage a{color:var(--copper);font-weight:600}
/* Téléphone : la carte juste sous les appareils, les alertes récentes après */
@media (max-width:860px){.sv-gauche{display:contents}.sv-liste{order:1}.sv-carte-bloc{order:2}#svAlertes{order:3}.svf-option .svf-al-v{width:64px}}
/* Fiches des appareils (refaites) : en-tête avec l'état à droite, infos sur deux colonnes, alertes en étiquettes, boutons sur une ligne */
.svf-grille{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));align-items:start}
.svf-carte{gap:10px}
.svf-tete{align-items:center;margin:0}
.svf-titre{flex:1;min-width:0}
.svf-titre h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svf-etat{flex:none;max-width:48%;white-space:normal;text-align:right}
.svf-infos{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svf-i{display:flex;flex-direction:column;gap:1px;min-width:0}
.svf-i>span{font-size:var(--t-etiq);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.svf-i>b{font-size:var(--t-petit);font-weight:600;overflow-wrap:anywhere}
.svf-alertes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.svf-btns{margin-top:0}
.svf-btns{flex-wrap:wrap}
.svf-btns .btn{flex:1 1 auto;min-width:max-content;white-space:nowrap} /* jamais rognés ni chevauchés : passent à la ligne si la carte est étroite (écran plus petit, zoom) */
/* Page Alertes GPS */
.sva-page{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:var(--esp-3);align-items:start}
.sva-page h2{margin:0 0 8px}
@media (max-width:860px){.sva-page{grid-template-columns:minmax(0,1fr)}.svf-grille{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.svf-btns{flex-wrap:wrap}.svf-btns .btn{flex:1 1 45%}}
@media (max-width:330px){.svf-infos{grid-template-columns:1fr}}
/* Pas de fines lignes blanches entre les morceaux de carte (écrans à zoom non entier : tablette, téléphone, Windows à 125 %) */
.sv-carte .leaflet-tile-container img{width:256.6px!important;height:256.6px!important;mix-blend-mode:normal!important} /* recouvrement de 0,6 px sans « plus-lighter » de Leaflet (qui rendait les jointures blanches) */
.sva-droite{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
/* Page Alertes GPS : deux cadres côte à côte en haut, puis pleine largeur */
.sva-haut{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3);align-items:stretch;margin-bottom:var(--esp-3)}
.sva-haut>.panel{margin:0}
.sva-haut h2,.sva-bloc h2{margin:0 0 8px}
.sva-bloc{margin-bottom:var(--esp-3)}
.svf-garage .svf-l:last-of-type{border-bottom:0}
.sva-apps{display:flex;flex-direction:column}
.sva-app{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.sva-app:last-child{border-bottom:0}
.sva-nom{flex:0 0 220px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sva-pills{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.sva-app .btn{flex:none}
@media (max-width:860px){.sva-haut{grid-template-columns:minmax(0,1fr)}.sva-app{flex-wrap:wrap}.sva-nom{flex:1 1 auto}.sva-pills{order:3;flex-basis:100%}}
/* Fenêtre « Qui reçoit les alertes GPS » */
.svd{display:flex;flex-direction:column;gap:10px}
.svd-liste{display:flex;flex-direction:column;gap:8px}
.svd-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.svd-groupe{padding:0 4px}
@media (max-width:420px){.svd-ligne{grid-template-columns:minmax(0,1fr) auto}.svd-ligne>:nth-child(2){grid-column:1}.svd-ligne>.btn{grid-row:1 / span 2;grid-column:2}}
/* Halo d'état autour du nom : un anneau de couleur séparé de l'étiquette par un fin trait blanc, qui s'allume et s'éteint (bien visible même sur une étiquette orange)
   vert = en route (rapide), jaune = à l'arrêt, rouge = hors ligne */
.sv-etiq.st-route{animation:sv-halo-vert .8s steps(1,end) infinite}
.sv-etiq.st-arret{animation:sv-halo-jaune 1.6s steps(1,end) infinite}
.sv-etiq.st-hors{animation:sv-halo-rouge 1.6s steps(1,end) infinite}
@keyframes sv-halo-vert{0%,45%{box-shadow:0 2px 8px #0005,0 0 0 2px #fff,0 0 0 5px #22d36b,0 0 10px 5px #22d36baa}55%,100%{box-shadow:0 2px 8px #0005,0 0 0 2px #fff,0 0 0 2px #fff0}}
@keyframes sv-halo-jaune{0%,45%{box-shadow:0 2px 8px #0005,0 0 0 2px #fff,0 0 0 5px #ffd400,0 0 10px 5px #ffd400aa}55%,100%{box-shadow:0 2px 8px #0005,0 0 0 2px #fff,0 0 0 2px #fff0}}
@keyframes sv-halo-rouge{0%,45%{box-shadow:0 2px 8px #0005,0 0 0 2px #fff,0 0 0 5px #ff2d2d,0 0 10px 5px #ff2d2daa}55%,100%{box-shadow:0 2px 8px #0005,0 0 0 2px #fff,0 0 0 2px #fff0}}
/* Liste de la Carte GPS : appareil choisi mis en avant, les autres pâlis */
.sv-app.sv-choisi{outline:2px solid var(--copper);outline-offset:-2px}
.sv-app.sv-pale{opacity:.55}
.sv-app.sv-pale:hover{opacity:.85}
/* Alertes GPS : effacer une alerte déjà vue */
.sva-titre{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sva-titre h2{margin:0}
.sv-al-liste li{align-items:flex-start}
.sv-al-c{flex:1;min-width:0}
.sv-al-x{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);width:28px;height:28px;border-radius:8px;font-size:17px;line-height:1;cursor:pointer}
.sv-al-x:hover{color:var(--bad);border-color:var(--bad)}
/* Étiquettes des appareils sur la carte : beige tout simple, texte foncé (choix de l'utilisateur, 2026-11-03) ; l'anneau d'état clignote toujours autour */
.sv-etiq{background:#f4ead8;color:#1c2428;border-color:#fff}
.sv-etiq::before{border-top-color:#f4ead8}
/* Nos repères (clients et lieux déjà visités) : rond cuivre + nom ; les noms se cachent quand on est loin (zoom < 15) */
.sv-rep-wrap{background:none;border:0}
.sv-rep{display:flex;align-items:center;gap:5px;white-space:nowrap;pointer-events:auto}
.sv-rep i{flex:none;width:12px;height:12px;border-radius:50%;background:#b8752a;border:2px solid #fff;box-shadow:0 1px 4px #0006}
.sv-rep b{font:600 11.5px/1.2 Inter,system-ui,sans-serif;color:#1c2428;padding:1px 6px;border-radius:5px;background:#fffffff0;box-shadow:0 1px 3px #0003}
.sv-loin .sv-rep b{display:none}
/* Garage : logo rond + nom, centré sur sa position */
.sv-garage{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.sv-garage img{width:34px;height:34px;border-radius:50%;border:2px solid #b8752a;background:#1c2428;box-shadow:0 2px 8px #0006}
.sv-garage b{font:800 11px/1.2 Inter,system-ui,sans-serif;color:#fff;background:#1c2428;padding:2px 7px;border-radius:6px;letter-spacing:.3px}
.sv-loin .sv-garage b{display:none}
/* Choix de la vue : bouton plus propre */
.sv-carte .leaflet-control-layers{border:0;border-radius:10px;box-shadow:0 2px 10px #0003;font:600 12.5px/1.4 Inter,system-ui,sans-serif;padding:6px 10px}
.sv-carte .leaflet-control-layers-separator{margin:4px -10px}
.sv-carte .leaflet-control-zoom a{border-radius:8px}
.sv-carte .leaflet-control-zoom{border:0;box-shadow:0 2px 10px #0003;border-radius:10px;overflow:hidden}
.sv-carte .leaflet-control-attribution{font-size:9.5px;line-height:1.3;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}