:root{--c-primary:#1e3a5f;--c-primary-dark:#132847;--c-accent:#f59e0b;--c-accent-dark:#d97706;--c-ok:#16a34a;--c-err:#dc2626;--c-warn:#d97706;--c-info:#0284c7;--c-bg:#f0f4f8;--c-surface:#ffffff;--c-border:#d1d9e0;--c-text:#1a202c;--c-text-muted:#64748b;--c-nav-bg:#1e3a5f;--c-nav-text:#ffffff;--radius:10px;--shadow:0 2px 8px rgba(0,0,0,.10);--shadow-lg:0 4px 20px rgba(0,0,0,.15);--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--tap:44px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);min-height:100vh;line-height:1.5}
a{color:var(--c-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.nav{background:var(--c-nav-bg);color:var(--c-nav-text);display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-brand{display:flex;align-items:center;gap:.875rem}
.nav-logo{font-size:1.125rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.nav-logo:hover{text-decoration:none;opacity:.85}
.nav-user{font-size:.875rem;color:rgba(255,255,255,.7)}
.nav-menu{display:none;align-items:center;gap:.25rem}
.nav-menu a{color:rgba(255,255,255,.85);padding:.4rem .7rem;border-radius:6px;font-size:.875rem;transition:background .15s}
.nav-menu a:hover,.nav-menu a[aria-current]{background:rgba(255,255,255,.15);color:#fff;text-decoration:none}
.nav-alerte-btn{background:#dc2626 !important;color:#fff !important;font-weight:600;padding:.35rem .75rem;border-radius:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.75}}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem;min-width:var(--tap);min-height:var(--tap)}
.nav-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s}
.nav-drawer{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--c-primary-dark);z-index:99;padding:5rem 1.5rem 2rem;display:flex;flex-direction:column;gap:.5rem}
.nav-drawer a{color:rgba(255,255,255,.9);font-size:1.125rem;padding:.75rem 1rem;border-radius:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drawer a:hover{background:rgba(255,255,255,.1);text-decoration:none}
@media(min-width:768px){.nav-menu{display:flex}.nav-burger{display:none}.nav-drawer{display:none !important}}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.page{max-width:960px;margin:0 auto;padding:1.25rem 1rem 3rem}
.page-coord{max-width:1200px}
.page-titre{font-size:1.375rem;font-weight:700;color:var(--c-primary);margin-bottom:1.25rem}
.page-titre small{font-size:.875rem;font-weight:400;color:var(--c-text-muted);margin-left:.5rem}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.carte{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1rem}
.carte-titre{font-size:1rem;font-weight:600;color:var(--c-primary);margin-bottom:.875rem}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}

/* ── Missions ─────────────────────────────────────────────────────────────── */
.mission-carte{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.25rem;border-left:4px solid var(--c-border);display:flex;flex-direction:column;gap:.5rem;cursor:pointer;transition:box-shadow .15s,transform .1s}
.mission-carte:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.mission-carte.statut-en-route{border-left-color:var(--c-info)}
.mission-carte.statut-sur-place{border-left-color:#6366f1}
.mission-carte.statut-embarque{border-left-color:var(--c-accent)}
.mission-carte.statut-livre{border-left-color:var(--c-ok);opacity:.75}
.mission-carte.statut-probleme{border-left-color:var(--c-err)}
.mission-carte.statut-annule{border-left-color:var(--c-border);opacity:.55}
.mission-route{font-size:1rem;font-weight:600;color:var(--c-text)}
.mission-meta{font-size:.8125rem;color:var(--c-text-muted);display:flex;flex-wrap:wrap;gap:.5rem}
.mission-runner{font-size:.875rem;color:var(--c-primary);font-weight:500}

/* ── Statuts badges ───────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:600;line-height:1.4}
.badge-attente{background:#fef3c7;color:#92400e}
.badge-en-route{background:#dbeafe;color:#1e40af}
.badge-sur-place{background:#e0e7ff;color:#3730a3}
.badge-embarque{background:#fef9c3;color:#854d0e}
.badge-livre{background:#dcfce7;color:#166534}
.badge-probleme{background:#fee2e2;color:#991b1b}
.badge-annule{background:#f1f5f9;color:#64748b}
.badge-prevu{background:#fef3c7;color:#92400e}
.badge-arrive{background:#dcfce7;color:#166534}
.badge-parti{background:#dcfce7;color:#166534}
.badge-inconnu{background:#f1f5f9;color:#64748b}
.badge-urgent{background:#dc2626;color:#fff}
.badge-info{background:#dbeafe;color:#1e40af}

/* ── Alertes / Flash ──────────────────────────────────────────────────────── */
.alerte{padding:.875rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9375rem;line-height:1.5}
.alerte-erreur{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.alerte-succes{background:#dcfce7;color:#166534;border:1px solid #86efac}
.alerte-warning{background:#fef9c3;color:#854d0e;border:1px solid #fde047}
.alerte-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.alerte-urgent{background:#dc2626;color:#fff;border:none;font-weight:600;text-align:center}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.groupe{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}
.groupe label{font-size:.875rem;font-weight:500;color:var(--c-text)}
.groupe input,.groupe select,.groupe textarea{padding:.7rem .875rem;border:1.5px solid var(--c-border);border-radius:8px;font-size:1rem;font-family:var(--font);background:#fff;color:var(--c-text);transition:border-color .15s;width:100%;min-height:var(--tap)}
.groupe input:focus,.groupe select:focus,.groupe textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(30,58,95,.12)}
.groupe textarea{resize:vertical;min-height:100px}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;font-family:var(--font);cursor:pointer;border:none;transition:background .15s,transform .1s;min-height:var(--tap);text-align:center}
.btn:active{transform:scale(.97)}
.btn-primaire{background:var(--c-primary);color:#fff}
.btn-primaire:hover{background:var(--c-primary-dark)}
.btn-accent{background:var(--c-accent);color:#1a202c}
.btn-accent:hover{background:var(--c-accent-dark)}
.btn-ok{background:var(--c-ok);color:#fff}
.btn-ok:hover{background:#15803d}
.btn-danger{background:var(--c-err);color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-outline{background:transparent;color:var(--c-primary);border:1.5px solid var(--c-primary)}
.btn-outline:hover{background:rgba(30,58,95,.06)}
.btn-sm{padding:.45rem .875rem;font-size:.875rem;min-height:36px}
.btn-bloc{width:100%}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}

/* ── Tableau (desktop) ───────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.625rem .875rem;text-align:left;border-bottom:1px solid var(--c-border)}
th{background:var(--c-bg);font-weight:600;color:var(--c-text-muted);font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(30,58,95,.03)}

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.auth-page{background:var(--c-primary);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.auth-wrap{width:100%;max-width:420px}
.auth-card{background:var(--c-surface);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.auth-head{background:var(--c-primary);color:#fff;padding:2rem 1.75rem 1.5rem;text-align:center}
.auth-head h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.auth-head p{font-size:.9rem;color:rgba(255,255,255,.7);margin-top:.375rem}
.auth-body{padding:2rem 1.75rem}
.auth-liens{margin-top:1.25rem;text-align:center;font-size:.875rem}
.auth-liens a{color:var(--c-text-muted)}

/* ── Vide / état zéro ─────────────────────────────────────────────────────── */
.vide{text-align:center;padding:3rem 1.5rem;color:var(--c-text-muted)}
.vide p{font-size:1rem;margin-top:.5rem}

/* ── Responsive ajustements ───────────────────────────────────────────────── */
@media(max-width:480px){.page{padding:1rem .75rem 4rem}.page-titre{font-size:1.2rem}.btn-row{flex-direction:column}.carte{padding:1rem}}
@media(min-width:768px){.page{padding:1.5rem 2rem 3rem}}