:root{
    --bg:#0b3a6e;
    --bg2:#1267b2;
    --line:#e5e7eb;
    --muted:#64748b;
    --ink:#0f172a;
    --card:#fff;
    --shadow:0 10px 24px rgba(15,23,42,.08);
    --radius:16px;

    --info:#3b82f6;
    --jaune:#f59e0b;
    --orange:#f97316;
    --rouge:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
    margin:0;
    background:#f3f6fb;
    color:var(--ink);
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}

.wrap{max-width:1800px;margin:0 auto;padding:14px 18px}

/* Topbar */
.topbar{
    background:linear-gradient(90deg,var(--bg),var(--bg2));
    color:#fff;
    box-shadow:0 6px 18px rgba(2,6,23,.18);
}
.topbarInner{
    display:flex;
    gap:14px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
}
.topTitle{font-weight:1000;font-size:18px}
.topPills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    padding:6px 10px;
    font-weight:900;
    font-size:12px;
    white-space:nowrap;
}
.topActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline{display:inline;margin:0}

/* Cards */
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    box-shadow:var(--shadow);
}
.h3{margin:0 0 10px}
.cardTitle{font-weight:1000}
.muted{color:var(--muted);font-weight:800;font-size:12px}
.hint{font-size:12px;color:var(--muted);font-weight:800}
.mt{margin-top:10px}
.mt2{margin-top:8px}

/* Messages */
.msg{border-radius:12px;padding:10px 12px;font-weight:900;margin-top:12px}
.msg.ok{background:#eafff1;border:1px solid #b7f3cf;color:#0a7a2f}
.msg.err{background:#fff0f0;border:1px solid #ffd0d0;color:#b00020}

/* Buttons */
.btn{
    border:0;
    border-radius:12px;
    padding:10px 12px;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.btn.small{padding:8px 10px;border-radius:10px;font-size:13px}
.primary{background:#1e88e5;color:#fff}
.ghost{background:#eef6ff;color:#0b4aa2;border:1px solid #cde6ff}
.danger{background:#ffecec;color:#7a0a0a;border:1px solid #ffd0d0}

/* Inputs */
input,select,textarea{
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    width:100%;
    background:#fff;
}
textarea{min-height:90px}
.codebox{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:12px;
    line-height:1.35;
}

/* Tags */
.tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#f8fafc;
    font-weight:900;
    font-size:12px;
}
.tagBtn{cursor:pointer}
.tagBtn:hover{filter:brightness(.98)}
.tagBtn:active{transform:translateY(1px)}

/* Motifs */
.motifs{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}
.motifsTags{display:flex;gap:8px;flex-wrap:wrap}

/* Grid */
.grid{
    display:grid;
    grid-template-columns: minmax(0, 3fr) minmax(320px, 1.15fr);
    gap:16px;
    align-items:start;
}

/* Rows */
.rowBtns{
    display:flex;
    gap:8px;
    flex-wrap:wrap; /* important pour éviter le débordement */
    align-items:center;
}
.rowBetween{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* Checkbox */
.checkLabel{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:900;
}
.checkLabel input{margin:0;transform:translateY(1px)}
.activeField{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    min-width:0;
}
.activeField .checkLabel{justify-content:flex-start;align-items:center;gap:10px}

/* OSM row */
.rowOSM{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    flex-wrap:wrap;
}
.rowOSM .rowBtns{margin-left:auto}

/* Map */
.map{
    height:340px;
    border-radius:14px;
    border:1px solid var(--line);
    overflow:hidden;
    background:#f8fafc;
    margin-top:10px;
}

/* Right column */
.right{
    position:sticky;
    top:12px;
    max-height:calc(100vh - 24px);
    overflow:auto;
    padding-right:2px;
}
.rightPanel{padding:12px;font-size:13px}
.rightPanel h3{margin:0 0 6px;font-size:15px}
.right .section{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.sectionTitle{cursor:pointer;font-weight:1000}

/* Alerts list */
.alertsList{max-height:260px;overflow:auto}
.alertItem{
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    background:#fff;
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;

    /* couleur par défaut */
    border-left:10px solid #cbd5e1;
}
.alertItem .title{font-weight:1000}
.lvlBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    font-weight:1000;
    font-size:12px;
    background:#fff;
}

/* Couleurs par niveau */
.alertItem.level-info{border-left-color:var(--info); background:rgba(59,130,246,.06)}
.alertItem.level-jaune{border-left-color:var(--jaune); background:rgba(245,158,11,.06)}
.alertItem.level-orange{border-left-color:var(--orange); background:rgba(249,115,22,.06)}
.alertItem.level-rouge{border-left-color:var(--rouge); background:rgba(239,68,68,.06)}

/* Tables (UNIQUE) */
.tableWrap{
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;

    overflow-x:auto;
    overflow-y:hidden;              /* ✅ évite boutons coupés + bugs sticky */
    -webkit-overflow-scrolling:touch;
    padding:2px;                    /* ✅ évite coupe par border-radius */
}
.tableWrap, .tableWrap *{min-width:0}

table{
    border-collapse:collapse;
    width:100%;
    min-width:620px;                /* ✅ évite écrasement */
}
th,td{
    padding:8px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top;
    font-size:12px;
    white-space:nowrap;
}
th{
    background:#f8fafc;
    position:sticky;
    top:0;
    z-index:2;
}
td:first-child{white-space:normal}

/* Actions sticky (toujours visibles) */
.tableWrap th:last-child,
.tableWrap td:last-child{
    position:sticky;
    right:0;
    background:#fff;
    text-align:right;
    box-shadow:-10px 0 12px rgba(15,23,42,.06);
}

/* Boutons dans les tables */
.tableActions{
    display:inline-flex;
    flex-wrap:nowrap;
    gap:8px;
    justify-content:flex-end;
    align-items:center;
}
.tableActions .btn.small{padding:7px 9px}

/* Stats */
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.miniCard{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}

/* Modal */
.modalBack{position:fixed;inset:0;background:rgba(2,6,23,.62);display:none;z-index:9999;}
.modalBack.open{display:block}
.modal{
    position:absolute;
    inset:10px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.modalHead{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:#f8fafc;
}
.modalTitle{font-weight:1000}
.modalBody{flex:1;min-height:0}
.modalMap{width:100%;height:100%}
.errTxt{margin-top:6px;color:#b00020;font-weight:900}

/* Fix shrink */
.grid > *, .split > *, .right, .rightPanel, .card, .tableWrap{min-width:0}

/* Responsive */
@media(max-width:1200px){
    .grid{grid-template-columns:1fr}
    .right{position:static;max-height:none;overflow:visible;padding-right:0}
    .split{grid-template-columns:1fr}
}
@media(max-width:760px){
    .wrap{padding:12px}
    .topTitle{font-size:16px}
    .pill{font-size:11px}
    .row2,.row3{grid-template-columns:1fr}
    .map{height:280px}
    .modal{inset:0;border-radius:0}
    .btn{padding:9px 10px}
    .btn.small{padding:7px 9px}
}
@media(max-width:420px){
    .wrap{padding:10px}
    .card{padding:12px}
    .btn{width:100%;justify-content:center}
    .topActions{width:100%}
    .topActions .btn, .topActions button{flex:1}
}
/* Motifs: icônes + couleurs */
.motif{
    border:1px solid transparent;
    padding:6px 10px;
}

.m-inondation{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25); color:#0b4aa2; }
.m-tempete  { background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.25); color:#334155; }
.m-voirie   { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.25);  color:#92400e; }
.m-canicule { background: rgba(239,68,68,.10);   border-color: rgba(239,68,68,.25);   color:#991b1b; }
.m-accident { background: rgba(249,115,22,.10);  border-color: rgba(249,115,22,.25);  color:#9a3412; }
.m-cyber    { background: rgba(168,85,247,.10);  border-color: rgba(168,85,247,.25);  color:#6b21a8; }
.m-info     { background: rgba(14,165,233,.10);  border-color: rgba(14,165,233,.25);  color:#075985; }
.m-convoi   { background: rgba(20,184,166,.10); border-color: rgba(20,184,166,.25); color:#0f766e; }

.motif:hover{ filter:brightness(.98); }
.motif:active{ transform:translateY(1px); }
/* === Backups: actions toujours visibles === */
.tableWrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:2px;                 /* évite coupe par border-radius */
}

.tableBackups{ width:100%; border-collapse:collapse; }
.tableBackups th, .tableBackups td{ vertical-align:middle; }

.thActions, .tdActions{
    width:1%;
    white-space:normal;          /* autorise retour à la ligne */
}

.tableActions{
    display:flex;
    flex-wrap:wrap;              /* ✅ les boutons passent à la ligne */
    gap:8px;
    justify-content:flex-end;
    align-items:center;
}

.tableActions form{ margin:0; } /* sécurité */

.tableActions .btn{
    max-width:100%;
    flex:0 0 auto;
}
/* =========================
   STATS (UI + mini chart)
   ========================= */

.statsToolbar{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.statsToolbar select{width:auto;min-width:120px}

.statsMini{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10px;
}
.kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.kpi{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#f8fafc;
}
.kpiVal{font-weight:1000;font-size:18px}

/* Mini bar chart (sans lib) */
.bars{
  height:140px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 4px 6px;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  background:#fbfdff;
  margin-top:10px;
}
.barCol{width:100%;max-width:30px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{
  width:100%;
  border-radius:10px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  min-height:4px;
}
.barLbl{font-size:11px;color:var(--muted);font-weight:900}
.barVal{font-size:11px;font-weight:900}

/* Responsive stats */
@media(max-width:1200px){
  .statsMini{grid-template-columns:1fr}
}
/* =========================
   MOTIFS (boutons topbar)
   ========================= */
.motifBtn{
  border:1px solid var(--line);
  background:#f8fafc;
  color:var(--ink);
  padding:8px 10px;
  border-radius:999px;
  font-weight:1000;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.motifBtn:hover{filter:brightness(.98)}
.motifBtn:active{transform:translateY(1px)}

/* Forcer les boutons motifs à rester "auto" même en mobile
   (car tu as .btn{width:100%} en <=420px) */
@media(max-width:420px){
  .motifBtn{width:auto !important; justify-content:center;}
}

/* Optionnel : rendre le bouton "Convoi" un peu plus visible */
.motifBtn.m-convoi{
  background: rgba(20,184,166,.12);
  border-color: rgba(20,184,166,.25);
  color:#0f766e;
}

/* =========================
   Compat classes (si tu utilises .row/.pills dans topbar.php)
   ========================= */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}