:root{--ink:#152e55;--muted:#687994;--teal:#073d7b;--teal2:#1067bf;--mint:#e8f2ff;--gold:#e5b95b;--cream:#f6f8fd;--paper:#fff;--line:#e4eaf4;--danger:#bd373e;--warn:#9b6f22;--shadow:0 18px 55px rgba(11,49,112,.08)}
*{box-sizing:border-box}html{font-size:15px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}a{color:var(--teal2);text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}h1,h2,h3,h4,p{margin-top:0}h1{font-size:2.25rem;line-height:1.16;letter-spacing:-.05em}h2{font-size:1.6rem;letter-spacing:-.035em;margin-bottom:9px}h3{font-size:1.07rem;margin-bottom:10px}p{line-height:1.55}.small{font-size:.82rem}.muted{color:var(--muted)}.hint{color:var(--muted);font-size:.82rem;line-height:1.55}.eyebrow{font-size:.72rem;font-weight:800;color:var(--teal2);letter-spacing:.14em;text-transform:uppercase}.app-shell{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}.sidebar{background:var(--teal);color:#fff;padding:28px 17px;display:flex;flex-direction:column;gap:25px}.brand{display:flex;align-items:center;gap:12px;padding:3px 11px}.brand-symbol{background:var(--gold);color:var(--teal);border-radius:13px;width:43px;height:43px;display:grid;place-items:center;font-size:23px}.brand b{font-size:1.1rem;letter-spacing:.02em}.brand small{display:block;color:#d6e9e5;font-size:.71rem;margin-top:2px}.sidebar nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:0;border-radius:11px;color:#d1e3df;background:none;text-align:start;width:100%;font-weight:600}.nav-item span{font-size:18px}.nav-item.active,.nav-item:hover{background:#2b6b67;color:#fff}.sidebar-foot{margin-top:auto;border-top:1px solid #3c7370;padding:18px 10px 4px;font-size:.78rem;color:#d4e7e2}.sidebar-foot b{display:block;color:#fff;margin:6px 0;line-height:1.3;overflow-wrap:anywhere}.main{min-width:0}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 38px;background:#fff;border-bottom:1px solid var(--line)}.topbar h2{margin:0;font-size:1.06rem;letter-spacing:0}.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:6px 10px;font-size:.72rem;font-weight:750;background:var(--mint);color:var(--teal)}.pill.demo{background:#fff4de;color:#77501b}.pill.danger{background:#fbe6e4;color:var(--danger)}.pill.warn{background:#fff0d7;color:#8d5a13}.pill.grey{background:#edf2ef;color:#5b6b68}.content{max-width:1360px;margin:auto;padding:32px 38px 70px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}.section-head p{margin:0;color:var(--muted)}.grid{display:grid;gap:18px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{border:1px solid var(--line);background:var(--paper);border-radius:17px;padding:23px;box-shadow:0 8px 35px rgba(20,54,49,.035)}.stat-card{padding:21px}.stat-icon{width:39px;height:39px;background:var(--mint);border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:20px}.stat-number{font-weight:850;font-size:2rem;letter-spacing:-.04em;line-height:1.15;margin:5px 0}.stat-label{font-size:.82rem;color:var(--muted);font-weight:600}.callout{border:1px solid #e7d6aa;background:#fffaf0;border-radius:12px;padding:14px 18px;color:#77602a;font-size:.85rem;line-height:1.45}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:10px;padding:11px 16px;border:1px solid transparent;background:var(--teal);color:#fff;font-weight:700;line-height:1.2;white-space:normal;text-align:center;min-height:43px}.btn:hover{filter:brightness(1.11)}.btn.ghost{background:#fff;border-color:#cddbd4;color:var(--teal)}.btn.soft{background:var(--mint);color:var(--teal)}.btn.danger{background:var(--danger)}.btn.small{padding:7px 10px;min-height:32px;font-size:.76rem}.btn.full{width:100%}.btn.link{background:none;color:var(--teal);padding:7px}.subtle-action{border:none;background:none;color:var(--teal2);font-size:.81rem;font-weight:750;padding:7px}.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;text-align:start;white-space:nowrap}th,td{text-align:start;padding:13px 14px;border-bottom:1px solid var(--line);font-size:.86rem;vertical-align:middle}th{background:#f3f7f5;color:#60736f;font-size:.73rem;letter-spacing:.05em;text-transform:uppercase;font-weight:800}tr:last-child td{border-bottom:0}td strong{color:var(--ink)}.empty{text-align:center;padding:30px 15px;color:var(--muted);font-size:.86rem}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:.79rem;font-weight:750}.field input,.field select{width:100%;border:1px solid #d4e1dc;border-radius:10px;padding:12px 12px;background:#fff;color:var(--ink);min-width:0;outline:none}.field input:focus,.field select:focus{border-color:var(--teal2);box-shadow:0 0 0 3px #d7eee7}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:17px}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:14px}.stack{display:grid;gap:15px}.item-row{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}.item-row:last-child{border-bottom:0}.avatar{width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--teal);display:grid;place-items:center;font-weight:800}.map{height:450px;min-height:300px;border-radius:13px;border:1px solid var(--line);overflow:hidden;background:#d7e7df;position:relative}.map-sm{height:355px}.map-fallback{display:grid;place-items:center;text-align:center;height:100%;padding:25px;color:#4f7067}.map-legend{display:flex;flex-wrap:wrap;gap:16px;margin:15px 0 0;color:var(--muted);font-size:.8rem}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#168b70;margin-inline-end:6px}.dot.old{background:#d59a40}.dot.sos{background:#c94f49}.alert-row{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:9px;background:#fff}.alert-row.critical{border-inline-start:4px solid #c94f49}.alert-row.warning{border-inline-start:4px solid #d6a050}.alert-row .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.alert-row p{margin:6px 0;color:var(--muted);font-size:.8rem}.alert-row .actions{display:flex;gap:6px;flex-wrap:wrap}.spacer{height:10px}.toast-box{position:fixed;bottom:25px;right:25px;z-index:2000;display:grid;gap:8px;max-width:min(420px,90vw)}.toast{background:#113f3d;color:#fff;border-radius:12px;padding:14px 17px;box-shadow:var(--shadow);line-height:1.4}.toast.err{background:#8e3030}.boot{height:100vh;display:grid;align-content:center;justify-items:center;color:var(--teal)}.logo-mark{font-size:40px;color:var(--gold)}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,1fr)}.login-visual{background:radial-gradient(circle at 25% 5%,#3a8372 0,transparent 42%),linear-gradient(145deg,#0a3335,#0e625c);color:white;display:flex;flex-direction:column;justify-content:center;padding:10%;min-height:440px}.login-visual h1{font-size:clamp(2.8rem,4.2vw,5rem);max-width:550px;line-height:1.09;margin:24px 0}.login-visual p{max-width:500px;color:#d5e9e4;font-size:1.06rem}.login-art{width:min(390px,100%);aspect-ratio:1.65;background:linear-gradient(45deg,#ffffff18,#ffffff04);border:1px solid #ffffff38;border-radius:22px;margin-top:37px;padding:22px;transform:rotate(-3deg)}.login-art .line{height:11px;border-radius:10px;background:#ffffff4f;margin:22px 0;width:75%}.login-art .line:nth-child(2){width:50%}.login-art .line:nth-child(3){width:92%}.login-form-side{display:flex;align-items:center;justify-content:center;padding:45px}.login-form-side .inner{width:min(420px,100%)}.login-form-side h2{font-size:2.1rem}.demo-users{border-radius:12px;border:1px dashed #c6d9d1;background:#f4f9f6;padding:17px;margin-top:26px}.demo-users code{color:#0a5451;font-size:.79rem}.demo-users button{border:1px solid #cadbd2;background:white;border-radius:7px;padding:5px 7px;font-size:.75rem;margin:4px 3px 4px 0;color:var(--teal)}.sos-wrap{min-height:calc(100vh - 210px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:17px}.sos-button{width:min(280px,65vw);aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#d33e3e,#b62b30);border:10px solid #f5d8d7;box-shadow:0 17px 45px #b9363640;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;font-size:3.4rem;font-weight:900;letter-spacing:.06em}.sos-button small{font-size:.87rem;font-weight:550;letter-spacing:0}.sos-button:active{transform:scale(.98)}.consent-panel{max-width:650px;text-align:start;width:100%;margin:22px auto 0}.check{display:flex;gap:10px;align-items:flex-start;line-height:1.5;font-size:.85rem}.check input{accent-color:var(--teal);margin-top:4px}.privacy-status{font-size:.81rem;color:var(--muted);margin-top:9px}.focusbar{background:#e8f2ed;border-radius:14px;padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.support-link{background:#eef6f2;border-radius:12px;padding:14px;margin-top:20px;overflow-wrap:anywhere}.modal-backdrop{position:fixed;inset:0;background:#071a1db8;display:grid;place-items:center;z-index:2500;padding:18px}.modal{width:min(560px,96vw);max-height:95vh;overflow:auto;border-radius:17px;background:#fff;padding:25px;box-shadow:0 25px 70px #001b1840}.modal code{overflow-wrap:anywhere}.leaflet-container{font:inherit}.leaflet-popup-content{line-height:1.6}.rtl{font-family:Tahoma,"Segoe UI",Arial,sans-serif}.rtl .toast-box{right:auto;left:25px}
@media(max-width:1050px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.content{padding:26px}.topbar{padding:0 25px}.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.app-shell{display:block;padding-bottom:68px}.sidebar{position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:7px 4px;background:var(--teal);display:block;box-shadow:0 -6px 20px #102d2b21}.sidebar .brand,.sidebar-foot{display:none}.sidebar nav{display:flex;justify-content:space-around;gap:3px}.nav-item{display:grid;justify-items:center;gap:0;flex:1;padding:8px 2px;font-size:.65rem;line-height:1.2}.nav-item span{font-size:20px}.topbar{height:auto;min-height:70px;padding:12px 16px;flex-wrap:wrap}.topbar h2{font-size:.9rem}.content{padding:22px 14px 44px}.grid.cols-2,.grid.cols-3,.grid.cols-4,.fields{grid-template-columns:1fr}.grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:17px}.section-head{align-items:flex-start}.login-page{display:block}.login-visual{min-height:250px;padding:35px 25px}.login-visual h1{font-size:2.5rem;margin:12px 0}.login-art{display:none}.login-form-side{padding:35px 22px}.alert-row{display:block}.alert-row .actions{margin-top:12px}.map{height:350px}.sos-wrap{min-height:calc(100vh - 250px)}.top-right{gap:5px}}

/* Identité visuelle officielle — أسفار الرواق للحج و العمرة, inspirée de l'image 1 */
.brand-logo{display:block;width:44px;height:44px;flex:none;object-fit:cover;border-radius:13px;box-shadow:0 2px 8px #00182d36}
.brand-logo-sm{width:34px;height:34px;border-radius:10px}
.startup-logo{width:86px;height:86px;object-fit:cover;border-radius:20px;box-shadow:0 12px 40px #0a356d30}
.boot{gap:9px;text-align:center}.boot h1{font-size:1.75rem;letter-spacing:0}
.login-visual{background:radial-gradient(circle at 20% 5%,#227bc1 0,transparent 45%),linear-gradient(135deg,#05244f,#084d9c)}
.login-visual p{color:#ddeaff}.nav-item{color:#d4e5fb}.nav-item.active,.nav-item:hover{background:#1b5b9b}
.sidebar-foot{border-top-color:#3a68a6;color:#dbe8ff}
.sidebar-foot b{color:#fff}.sidebar{background:linear-gradient(180deg,#07336f,#052957)}
.btn:not(.ghost){background:var(--teal)}
.btn:not(.ghost):hover{background:#0c5aaa}
.brand b{font-family:Tahoma,'Segoe UI',Arial,sans-serif;font-size:.91rem;line-height:1.4}
.eyebrow{letter-spacing:.05em}
.callout{border-inline-start:4px solid var(--gold)}
@media(max-width:760px){.sidebar{background:#073d7b}.brand-logo{width:38px;height:38px}.login-visual{min-height:270px}}

:root {
  --teal: #1447a2;
  --teal2: #174a9b;
  --muted: #526382;
  --cream: #f4f6fb;
  --gold: #e7be69;
}
html { font-size: 16px; }
body { font-family: "DM Sans", system-ui, -apple-system, sans-serif; }
:focus-visible { outline: 3px solid #996718; outline-offset: 3px; }
.sidebar { background: #0b2249; }
.nav-item.active { background: #1c488c; border-inline-start: 3px solid var(--gold); }
.topbar { min-height: 70px; }
.topbar h2 { font-size: 1rem; }
.card { border-radius: 14px; }
.btn.small { min-height: 40px; }
.field label { font-size: .88rem; }
.login-page { grid-template-columns: minmax(0,1.05fr) minmax(400px,1fr); }
.login-visual {
  background: radial-gradient(ellipse at 18% 10%, #194c94 0, transparent 61%), #0b2249;
  min-height: 0;
  padding: clamp(34px, 7vw, 124px);
}
.login-identity { display: flex; align-items: center; gap: 16px; color: #f3d38d; }
.login-logo { width: 64px; height: 64px; border-radius: 15px; }
.login-visual h1 { font-size: clamp(2.35rem, 4.6vw, 4.8rem); max-width: 680px; }
.login-visual p { max-width: 440px; }
.login-form-side { background: #fff; }
.login-language { display: flex; justify-content: flex-end; margin-bottom: 22px; }
.login-form-side h2 { margin-bottom: 26px; }
.demo-users { border-color: #b7c7e2; background: #f1f5fe; }
.demo-users button { padding: 7px 9px; min-height: 36px; }
.inline-form select { min-height: 38px; max-width: 12rem; }
.map { background: #eaf0fa repeating-linear-gradient(0deg, transparent 0 31px, #d5e0f2 31px 32px); isolation: isolate; }
.map::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 31px, #d5e0f2 31px 32px);
}
.map-zone { position: absolute; border: 2px solid #184eae; background: #6b98e829; border-radius: 50%; transform: translate(-50%, -50%); }
.map-pin {
  position: absolute; z-index: 2; width: 32px; height: 32px; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: transparent;
}
.map-pin::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid white;
  background: #1548a2; box-shadow: 0 1px 8px #172e50a6;
}
.map-pin.older::after { background: #9a6211; }
.map-pin:hover::after, .map-pin:focus-visible::after { background: #3b65b0; box-shadow: 0 0 0 4px #25478c44; }
.map-north { position: absolute; top: 10px; left: 12px; font-size: .85rem; font-weight: 750; }
.map-selection {
  position: absolute; z-index: 3; bottom: 9px; inset-inline: 12px; margin: 0;
  padding: 7px 12px; border-radius: 7px; background: #fffffff0; pointer-events: none;
  font-size: .8rem; text-align: center;
}
.dot { background: #1548a2; }
.dot.old { background: #9a6211; }
.sos-wrap { padding-block: 20px; min-height: auto; }
.sos-button { width: min(239px, 65vw); }
.sos-history { padding: 7px 14px; background: #e9effb; border-radius: 8px; }
.check { min-height: 38px; align-items: center; font-size: 1rem; }
.check input { width: 22px; height: 22px; flex: none; }
@media (max-width: 760px) {
  .login-page { display: block; }
  .login-visual { min-height: 225px; padding: 28px 24px; }
  .login-logo { height: 48px; width: 48px; }
}