/* Charte « Plan » — commune à l'app technicien et au dashboard */
:root{
  --paper:#EEF2F8; --grid:rgba(11,63,134,.07); --card:#FFFFFF;
  --navy:#0B3F86; --navy-deep:#072B5E; --ink:#0A2550; --mute:#5B6E8F; --line:#0B3F86; --soft:#C9D6EE; --soft-2:#DFE7F4;
  --red:#E1262F; --red-bg:#FDECEE; --ok:#14866A; --ok-bg:#E3F3EE; --warn:#B7791F; --warn-bg:#FBF1DF; --route:#6B4FBB; --route-bg:#EEEAF8;
  --font:"Familjen Grotesk",system-ui,sans-serif; --mono:"Martian Mono",ui-monospace,monospace;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background-color:var(--paper);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy)}
.mono{font-family:var(--mono)}
.muted{color:var(--mute)}
.hidden{display:none!important}

/* Motif carré-fenêtre */
.mod{display:inline-grid;grid-template-columns:1fr 1fr;gap:2px;width:18px;height:18px;vertical-align:middle;flex:none}
.mod i{background:var(--navy)}.mod i:nth-child(2){background:var(--soft)}
.mod.w i{background:#fff}.mod.w i:nth-child(2){background:rgba(255,255,255,.55)}

/* Libellés */
.lbl{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--font);border:1px solid var(--navy);background:var(--card);color:var(--navy);padding:12px 18px;border-radius:2px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.p{background:var(--navy);color:#fff}
.btn.p:hover{background:var(--navy-deep)}
.btn.r{background:var(--red);border-color:var(--red);color:#fff}
.btn.r:hover{background:#c41e27}
.btn.g:hover{background:var(--soft-2)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--soft-2)}
.btn.sm{padding:7px 11px;font-size:13px}
.btn.block{width:100%}

/* Statuts */
.st{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--mono);text-transform:uppercase;padding:4px 8px;border:1px solid currentColor;white-space:nowrap;line-height:1.2;background:var(--card)}
.st:before{content:"";width:7px;height:7px;background:currentColor;flex:none}
.st.a_planifier{color:var(--mute)}
.st.urgent,.st.a_planifier.urgente{color:var(--red);background:var(--red-bg)}
.st.planifiee{color:var(--navy)}
.st.en_route{color:var(--route);background:var(--route-bg)}
.st.en_cours{color:var(--warn);background:var(--warn-bg)}
.st.terminee{color:var(--ok);background:var(--ok-bg)}
.st.recu{color:var(--red);background:var(--red-bg)}
.st.traite{color:var(--navy)}
.st.facture{color:var(--ok);background:var(--ok-bg)}

/* Champs */
.field{display:flex;flex-direction:column;gap:5px}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:var(--card);padding:11px 12px;border-radius:2px;font-size:16px;outline:none}
.input:focus{box-shadow:0 0 0 3px var(--soft)}
textarea.input{resize:vertical;min-height:84px;line-height:1.45}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 13px var(--font);padding:7px 11px;border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:2px;user-select:none}
.chip.on{background:var(--navy);color:#fff}

/* Panneaux */
.panel{background:var(--card);border:1px solid var(--line)}
.panel>.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}

/* Toasts */
.toasts{position:fixed;z-index:2000;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 24px));pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 14px;font-size:14px;border-left:4px solid var(--soft);box-shadow:0 10px 30px -10px rgba(0,0,0,.4);animation:tin .25s ease-out;pointer-events:auto}
.toast.ok{border-color:#2BD484}.toast.err{border-color:var(--red)}.toast.hot{background:var(--red);border-color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}

/* Leaflet : marqueurs façon plan */
.pin{width:26px;height:26px;display:grid;place-items:center;font:600 11px var(--mono);color:#fff;background:var(--navy);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pin.urg{background:var(--red)}
.pin.done{background:var(--ok)}
.pin.cur{background:var(--warn)}
.pin.route{background:var(--route)}
.pin.sel{outline:3px solid var(--red);outline-offset:2px}
.me{width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--navy);box-shadow:0 0 0 8px rgba(11,63,134,.18)}
.techpin{display:flex;align-items:center;gap:4px;background:var(--ink);color:#fff;font:600 10px var(--mono);padding:3px 6px 3px 3px;white-space:nowrap;border:1px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.techpin b{width:16px;height:16px;display:grid;place-items:center;font-size:9px}
.leaflet-container{font-family:var(--font);background:#F2F4F7}
.leaflet-tile-pane{filter:saturate(.75) contrast(.96)}
.leaflet-control-attribution{font-size:9px}