/* ====================================================================
   MA VILLE — Thème « Lagune » (nouveau visage) — 01/10/2026
   --------------------------------------------------------------------
   Couche de style chargée APRÈS style.css. Elle ne change que l'apparence
   (couleurs, arrondis, ombres, espacements) : aucun bouton, aucune page,
   aucune fonction n'est retiré ou déplacé. Pour revenir à l'ancien visage,
   il suffit d'enlever la ligne <link … theme-lagune.css> de index.html.
   Le mode sombre garde ses propres couleurs (règles limitées au mode clair).
   ==================================================================== */

:root {
  --lg-sand: #F2F8F4;
  --lg-sand-2: #EFE7D8;
  --lg-navy: #0C5424;
  --lg-navy-ink: #10202E;
  --lg-teal: #1E9E5A;
  --lg-teal-deep: #0C6C3C;
  --lg-saffron: #FFC22E;
  --lg-muted: #4A5A52;
  --lg-card-shadow: 0 6px 20px rgba(12,84,36, 0.08);
  --lg-radius: 20px;
  --radius: 18px;
  --radius-lg: 24px;
}

/* ---------- Fond et texte (mode clair) ---------- */
body:not(.dark-mode) {
  background: var(--lg-sand);
  color: var(--lg-navy-ink);
}
body:not(.dark-mode) .layout,
body:not(.dark-mode) .main-panel { background: transparent; }

/* ---------- En-tête ---------- */
header.topbar {
  background: var(--lg-navy);
  border-bottom: 0;
  border-radius: 0 0 22px 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0 8px 24px rgba(12,84,36, 0.18);
}
header.topbar select,
header.topbar .selectors select {
  border-radius: 999px !important;
}
.global-ticker-wrap {
  background: #0F7A45;
  border-bottom: 0;
  margin: 8px 12px 0;
  border-radius: 999px;
  padding: 7px 16px;
}

/* Bandeau « Le pouls de votre quartier » : carte arrondie */
.pulse-hero {
  margin: 8px 12px 0;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--lg-navy) 0%, #0F7A45 70%, var(--lg-teal-deep) 100%);
  box-shadow: var(--lg-card-shadow);
  padding: 10px 16px;
}
.pulse-card { border-radius: 12px; }

/* ---------- Onglets du haut (Quartier / Sécurité / Institutions…) ---------- */
.tabs-bar {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 10px 0 2px;
}
.tabs-bar .tabs-inner { gap: 8px; padding: 0 12px; }
.tabs-bar .tab-btn.tab-cat-btn {
  background: #FFFFFF;
  border: 1.5px solid #D8DEE3;
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--lg-navy-ink);
  font-weight: 700;
  min-height: 42px;
}
.tabs-bar .tab-btn.tab-cat-btn.active,
body.cat-quartier .tabs-bar .tab-cat-btn.active,
body.cat-securite .tabs-bar .tab-cat-btn.active,
body.cat-institutions .tabs-bar .tab-cat-btn.active,
body.cat-services .tabs-bar .tab-cat-btn.active {
  background: var(--lg-navy);
  border-color: var(--lg-navy);
  color: #FFFFFF;
}
body.dark-mode .tabs-bar .tab-btn.tab-cat-btn:not(.active) {
  background: var(--paper-card);
  border-color: var(--line);
  color: var(--ink);
}

/* Sous-onglets : pastilles */
.subtabs-bar {
  background: transparent;
  border-bottom: 0;
  padding: 6px 0 4px;
}
.subtabs-bar .tabs-inner { gap: 6px; padding: 0 12px; }
.subtabs-bar .tab-btn {
  border-radius: 999px;
  border-bottom: 0 !important;
  padding: 7px 14px;
  min-height: 36px;
  font-weight: 700;
  color: var(--lg-muted);
}
.subtabs-bar .tab-btn.active,
body.cat-quartier .subtabs-bar .tab-btn.active,
body.cat-securite .subtabs-bar .tab-btn.active,
body.cat-institutions .subtabs-bar .tab-btn.active,
body.cat-services .subtabs-bar .tab-btn.active {
  background: var(--lg-teal-deep);
  color: #FFFFFF;
}

/* ---------- Cartes ---------- */
body:not(.dark-mode) .card,
body:not(.dark-mode) .side-widget,
body:not(.dark-mode) .create-card,
body:not(.dark-mode) .market-item-card,
body:not(.dark-mode) .artisan-row-card,
body:not(.dark-mode) .goodplan-card,
body:not(.dark-mode) .mayor-big-card,
body:not(.dark-mode) .official-content-card {
  border-color: transparent;
  box-shadow: var(--lg-card-shadow);
}
.card,
.side-widget,
.create-card,
.market-item-card,
.artisan-row-card,
.goodplan-card { border-radius: var(--lg-radius); }
.mayor-big-card { border-radius: 24px; }

.alert-hero-box {
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--lg-navy) 0%, #0A2A40 100%);
  box-shadow: 0 10px 26px rgba(12,84,36, 0.22);
}

/* Titres de section */
.feed-section-title { letter-spacing: -0.01em; }

/* ---------- Boutons ---------- */
.btn-submit-green {
  background: var(--lg-teal-deep);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(12,108,60, 0.28);
}
.btn-submit-green:hover { background: #0B6B64; }
.btn-submit-outline { border-radius: 16px; }
.chip-filter,
.feed-filter-pill { min-height: 34px; }
.feed-filter-pill.active {
  background: var(--lg-navy);
  border-color: var(--lg-navy);
}
.chat-subnav-btn { min-height: 38px; }
.chat-subnav-btn.active {
  background: var(--lg-navy);
  border-color: var(--lg-navy);
}

/* Champs de saisie plus doux */
.form-input,
.form-select { border-radius: 12px; }

/* Fenêtres */
.modal-box { border-radius: 26px; }

/* ---------- Barre du bas (téléphone) : flottante et arrondie ---------- */
@media (max-width: 860px) {
  .bottom-bar {
    margin: 0 6px max(8px, env(safe-area-inset-bottom, 0px));
    border-top: 0;
    border-radius: 22px;
    background: var(--lg-navy);
    box-shadow: 0 10px 28px rgba(12,84,36, 0.35);
    padding: 8px 2px;
  }
  .b-item {
    color: #B7CBD8;
    border-radius: 14px;
    padding: 4px 3px;
  }
  .b-item span { font-weight: 600; white-space: nowrap; }
  .b-item.active {
    color: var(--lg-saffron);
    background: rgba(255, 255, 255, 0.08);
  }
  .b-item.active span { font-weight: 800; }
}

/* ---------- Discussions ---------- */
body:not(.dark-mode) .chat-row { border-bottom-color: rgba(12,84,36, 0.08); }

/* Mode sombre : sous-onglets lisibles */
body.dark-mode .subtabs-bar .tab-btn:not(.active) { color: var(--muted); }