:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1c1e21;
  --muted:#6b7280;
  --border:#e8e8ef;
  --primary:#2563eb;
  --primary-soft:#e7f1ff;
  --success:#0f9d58;
  --danger:#c62828;
  --shadow:0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}
a{color:var(--primary)}
.page{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

/* HERO identique à l'annuaire */
.hero{
  margin:18px 0 12px;
  padding:18px;
  border-radius:14px;
  background:
    radial-gradient(80% 120% at 100% -10%, #dbeafe 0%, rgba(219,234,254,0) 60%),
    linear-gradient(180deg,#ffffff, #f9fafb);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero h1{margin:0 0 6px;font-size:26px}
.hero p{margin:0;color:var(--muted)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 18px 20px;
  margin-bottom:16px;
  box-shadow:0 8px 20px rgba(15,23,42,0.05);
}
.card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
h2{
  margin:0;
  font-size:20px;
}
.muted{color:var(--muted);}
.form .field{margin-bottom:12px;}
label{display:block;font-weight:600;margin-bottom:4px;color:#1f2937;}
input[type=text], select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:15px;
  background:#fff;
  color:var(--text);
}
textarea{resize:vertical; min-height:120px; font-family:"SFMono-Regular",Consolas,ui-monospace;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:8px;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:transform .05s ease, box-shadow .1s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 16px rgba(26,115,232,0.25);}
.btn:active{transform:translateY(0);}
.alert{
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:10px;
  border:1px solid var(--border);
  background:#f8fafc;
}
.alert.success{border-color:#b7e3c5; color:#0b6b32; background:#eef8f1;}
.alert.danger{border-color:#f6c7c7; color:#a32525; background:#fff1f1;}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:6px 0 10px;
  align-items:flex-end;
}
.filters label{font-weight:600;}
.filters select, .filters input{width:220px;}
.filters .grow input{width:100%;}
.grow{flex:1; min-width:200px;}
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:10px;}
table{width:100%; border-collapse:collapse; min-width:720px;}
th, td{padding:10px 12px; text-align:left;}
th{
  background:var(--primary-soft);
  color:#0f172a;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
tr:nth-child(even){background:#fafbff;}
tr:nth-child(odd){background:#fff;}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:#0f172a;
  font-weight:700;
  font-size:13px;
}
.city-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  margin:2px 0;
  border-radius:999px;
  background:var(--primary-soft);
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
}
.city-chip:hover{
  background:#d8e7ff;
}
.city-content{
  white-space:normal;
  margin-top:8px;
  line-height:1.55;
}
.city-content p{margin:0 0 6px;}
.city-content p:last-child{margin-bottom:0;}

.article-card{
  margin-bottom:16px;
}
@media (max-width:720px){
  .filters select, .filters input{width:100%;}
  .table-wrap{min-width:0;}
  table{min-width:0;}
  th, td{font-size:14px;}
  thead{display:none;}
  table, tbody, tr, td{display:block; width:100%;}
  tr{
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:10px;
    background:#fff;
  }
  td{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
    padding:10px 12px;
  }
  td::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--muted);
    min-width:110px;
  }
}