:root {
  --bg: #0b1220;
  --card-bg: #121b2e;
  --accent: #0e7c66;
  --accent-light: #1aa88a;
  --danger: #d9483c;
  --warning: #d9a63c;
  --text: #eef2f5;
  --text-muted: #9fb0c3;
  --border: #223047;
}

* { box-sizing: border-box; }

/* L'attribut HTML hidden doit toujours masquer l'élément, même lorsqu'une
   classe comme .selected-zone lui impose display:flex. Sans cette règle,
   le cadre de sélection pouvait apparaître vide avec seulement “Changer”. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 3rem;
}

.topbar {
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, var(--accent), #0a5c4d);
}
.topbar-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; }
.brand { font-size: 1.4rem; font-weight: 700; }
.subtitle { font-size: 0.85rem; color: #d5f0ea; margin-top: 0.2rem; }

.lang-switcher { display: flex; gap: 0.3rem; flex-shrink: 0; }
.kw-lang-btn {
  background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px; padding: 0.35rem 0.6rem; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.kw-lang-btn.active { background: #fff; color: var(--accent); border-color: #fff; }

/* Arabe (RTL) : quelques ajustements ciblés - la plupart de la mise en page
   suit automatiquement l'attribut dir="rtl" posé par i18n.js, mais les
   éléments à direction explicite (icônes de statut, disposition en grille
   desktop) ont besoin d'un coup de pouce. */
html[dir="rtl"] .dot { margin-right: 0; margin-left: 0.3em; }
html[dir="rtl"] .zone-row { flex-direction: row-reverse; }
@media (min-width: 900px) {
  html[dir="rtl"] main {
    grid-template-areas:
      "map report"
      "map incidents"
      "map allzones"
      "muted muted";
    grid-template-columns: 1fr 380px;
  }
}

main { max-width: 640px; margin: 0 auto; padding: 1rem; }

/* Tres petits telephones (320-360px, ex. Android d'entree de gamme) :
   marges et boutons plus compacts pour eviter tout debordement. */
@media (max-width: 360px) {
  main { padding: 0.6rem; }
  .card { padding: 0.85rem; }
  .btn { flex: 1 1 100%; }
  .btn-row { flex-direction: column; }
}

/* Écrans larges (PC) : la mise en page mobile-first ne doit pas laisser
   d'immenses marges vides - on élargit progressivement plutôt que de
   rester bloqué à 640px sur un moniteur de bureau. */
@media (min-width: 900px) {
  main {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-areas:
      "report      map"
      "incidents   map"
      "allzones    map"
      "muted       muted";
    gap: 1rem;
    align-items: start;
  }
  #report-panel { grid-area: report; }
  #incidents-panel { grid-area: incidents; }
  #all-zones-panel { grid-area: allzones; }
  #map-panel { grid-area: map; }
  .muted-card { grid-area: muted; }
  #map { height: 560px; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem;
  margin-bottom: 1rem;
}
.card h2 { margin: 0 0 0.8rem 0; font-size: 1.05rem; }
.muted-card { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.muted-card a { color: var(--accent-light); }

label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; }

.feedback { min-height: 1.4em; margin-top: 0.7rem; font-size: 0.9rem; color: var(--text-muted); }

.field-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.muted-inline { font-size: 0.78rem; color: var(--text-muted); }

.btn-location {
  width: 100%; padding: 0.85rem; border: 1px solid var(--accent-light); border-radius: 10px;
  background: rgba(26,168,138,0.1); color: var(--accent-light); font-size: 0.95rem; font-weight: 600;
  cursor: pointer; margin-bottom: 0.3rem;
}
.btn-location:active { transform: scale(0.98); }
.btn-location:disabled { opacity: 0.5; cursor: wait; }
#location-status { min-height: 1.2em; margin: 0.2rem 0 0.6rem; }
.or-divider {
  text-align: center; font-size: 0.78rem; color: var(--text-muted); margin: 0.6rem 0;
  position: relative;
}
.or-divider::before, .or-divider::after {
  content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border);
}
.or-divider::before { left: 0; }
.or-divider::after { right: 0; }

/* --- Recherche de quartier (autocomplete simple, filtrage local) --- */
.search-wrap { position: relative; margin-bottom: 0.7rem; }
#quartier-search, #all-quartiers-search {
  width: 100%; padding: 0.75rem; border-radius: 10px; border: 1px solid var(--border);
  background: #0f1830; color: var(--text); font-size: 1rem;
}
.search-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.3rem);
  background: #0f1830; border: 1px solid var(--border); border-radius: 10px;
  max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 0.3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.search-results li {
  padding: 0.6rem 0.7rem; border-radius: 8px; cursor: pointer; font-size: 0.92rem;
}
.search-results li:hover, .search-results li.active { background: rgba(26,168,138,0.15); }
.search-results .result-parent { color: var(--text-muted); font-size: 0.76rem; margin-left: 0.4em; }

.selected-zone {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: rgba(26,168,138,0.1); border: 1px solid var(--accent-light);
  border-radius: 10px; padding: 0.8rem 0.9rem; margin-bottom: 0.7rem;
}
.selected-zone-text { display: flex; flex-direction: column; min-width: 0; }
.selected-zone-text strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.selected-zone-text .muted-inline { margin-top: 0.1rem; }
#selected-quartier .link-btn { flex: 0 0 auto; padding: 0.25rem 0; }

.link-btn {
  background: none; border: none; color: var(--accent-light); font-size: 0.85rem;
  cursor: pointer; padding: 0.4rem 0; text-decoration: underline; text-align: left;
}
html[dir="rtl"] .link-btn { text-align: right; }

#manual-select-panel { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }

select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f1830;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }
.btn {
  flex: 1 1 45%;
  padding: 0.9rem 0.6rem;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: white;
  min-height: 3.2rem;
}
.btn-danger { background: var(--danger); }
.btn-success { background: var(--accent-light); }
.btn-secondary { background: #2a3752; color: var(--text); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
#select-zone-hint { margin-top: 0.5rem; text-align: center; }
#select-zone-hint[hidden] { display: none; }

/* --- Etape de confirmation avant envoi --- */
.confirm-panel {
  margin-top: 0.8rem; padding: 0.9rem; border-radius: 10px;
  background: rgba(217,72,60,0.08); border: 1px solid var(--danger);
}
.confirm-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; }

#map { height: 280px; border-radius: 10px; overflow: hidden; margin-bottom: 0.7rem; }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 0.3em; }
.dot-incertain { background: var(--warning); }
.dot-probable { background: #e07a3f; }
.dot-coupure { background: var(--danger); }
.dot-resolved { background: var(--accent-light); }

/* --- Listes de zones (incidents, toutes zones, detail arrondissement) --- */
.zone-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.2rem; border-bottom: 1px solid var(--border); font-size: 0.9rem;
  list-style: none;
}
.zone-row:last-child { border-bottom: none; }
.zone-row .zone-name-block { display: flex; flex-direction: column; }
.recent-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }

#incidents-list, #all-quartiers-list, #arrondissements-list, #arrondissement-detail-list {
  list-style: none; padding: 0; margin: 0;
}
.zone-list-scrollable { max-height: 360px; overflow-y: auto; margin-top: 0.6rem; }

.badge {
  font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 600;
  white-space: nowrap; margin-left: 0.6rem;
}
html[dir="rtl"] .badge { margin-left: 0; margin-right: 0.6rem; }
.badge-normal { background: rgba(26,168,138,0.18); color: var(--accent-light); }
.badge-incertain { background: rgba(217,166,60,0.18); color: var(--warning); }
.badge-probable { background: rgba(224,122,63,0.18); color: #e07a3f; }
.badge-coupure { background: rgba(217,72,60,0.18); color: var(--danger); }
.badge-resolved { background: rgba(26,168,138,0.12); color: var(--accent-light); }

/* --- Onglets (Quartiers / Arrondissements) --- */
.tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: none; border: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 600;
  padding: 0.6rem 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn.active { color: var(--accent-light); border-bottom-color: var(--accent-light); }

footer { text-align: center; padding: 1rem; }
#offline-indicator {
  display: inline-block; background: var(--warning); color: #24160a;
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
}
/* Bug corrigé : le sélecteur d'ID ci-dessus a une spécificité plus forte que
   la règle par défaut du navigateur [hidden] { display: none }, donc
   l'attribut "hidden" posé par le JavaScript n'avait AUCUN effet visuel -
   le bandeau restait affiché en permanence quoi que fasse le code.
   Cette règle, plus spécifique encore, rétablit le comportement attendu. */
#offline-indicator[hidden] {
  display: none;
}