/* ═══════════════════════════════════════════════════════
   Mairie de Sermesse — Styles personnalisés
   Couleurs : vert #00543c, or #c9a84c
   ═══════════════════════════════════════════════════════ */

:root {
  --mairie-vert:       #00543c;
  --mairie-vert-clair: #2d7a5e;
  --mairie-vert-pale:  #e8f4ee;
  --mairie-or:         #c9a84c;
  --mairie-or-clair:   #f5e9c4;
}

/* ─── Corps ─────────────────────────────────────────── */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #2c2c2c;
  background-color: #fff;
}

/* ─── Couleurs utilitaires ───────────────────────────── */
.text-mairie       { color: var(--mairie-vert) !important; }
.text-or           { color: var(--mairie-or) !important; }
.bg-mairie         { background-color: var(--mairie-vert) !important; }
.bg-mairie-light   { background-color: var(--mairie-vert-pale) !important; }

/* ─── Navbar ─────────────────────────────────────────── */
.navbar-mairie {
  background-color: var(--mairie-vert);
}
.navbar-mairie .navbar-brand,
.navbar-mairie .nav-link {
  color: rgba(255,255,255,0.92) !important;
}
.navbar-mairie .nav-link:hover,
.navbar-mairie .nav-link.active {
  color: var(--mairie-or) !important;
}
.navbar-mairie .dropdown-menu {
  border: none;
  border-top: 3px solid var(--mairie-or);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.navbar-mairie .dropdown-item:hover,
.navbar-mairie .dropdown-item.active {
  background-color: var(--mairie-vert-pale);
  color: var(--mairie-vert);
}

/* ─── Boutons ────────────────────────────────────────── */
.btn-mairie {
  background-color: var(--mairie-vert);
  color: white;
  border-color: var(--mairie-vert);
}
.btn-mairie:hover {
  background-color: var(--mairie-vert-clair);
  border-color: var(--mairie-vert-clair);
  color: white;
}
.btn-outline-mairie {
  color: var(--mairie-vert);
  border-color: var(--mairie-vert);
}
.btn-outline-mairie:hover {
  background-color: var(--mairie-vert);
  color: white;
}

/* ─── Sections homepage ──────────────────────────────── */
.section-alaune {
  background-color: var(--mairie-vert-pale);
}
.section-title {
  color: var(--mairie-vert);
  font-weight: 700;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--mairie-or);
  display: inline-block;
  margin-bottom: 1.5rem;
}

/* ─── Cartes ─────────────────────────────────────────── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,84,60,0.15) !important;
}
.card-acces {
  background-color: white;
  transition: all 0.2s ease;
  color: #2c2c2c;
}
.card-acces:hover {
  background-color: var(--mairie-vert-pale);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,84,60,0.12) !important;
  color: var(--mairie-vert);
}

/* ─── Bandeau alerte urgente ─────────────────────────── */
.alert-annonce {
  color: white;
  border-radius: 0;
  border: none;
}
.alert-vert   { background-color: var(--mairie-vert); }
.alert-bleu   { background-color: #0d6efd; }
.alert-orange { background-color: #fd7e14; }
.alert-rouge  { background-color: #dc3545; }

/* ─── Hero homepage ──────────────────────────────────── */
.hero-home {
  background:
    linear-gradient(rgba(0, 40, 28, 0.45), rgba(0, 40, 28, 0.55)),
    url('/assets/images/banniere_accueil.jpg') center / cover no-repeat;
  color: white;
  padding: 5rem 0 4rem;
}
.hero-home h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
  color: white;
}
.hero-home .lead {
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-blason {
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
}

/* ─── Footer ─────────────────────────────────────────── */
.footer-mairie {
  background-color: var(--mairie-vert);
  color: rgba(255,255,255,0.8);
}
.footer-mairie h6  { color: white; }
.footer-mairie a   { color: var(--mairie-or); text-decoration: none; }
.footer-mairie a:hover { color: white; text-decoration: underline; }

/* ─── Titres des pages ───────────────────────────────── */
h1, h2, h3 { color: var(--mairie-vert); }
.page-content h2 { border-left: 4px solid var(--mairie-or); padding-left: 0.75rem; }

/* ─── Listes de documents ────────────────────────────── */
.list-group-item:hover { background-color: var(--mairie-vert-pale); }

/* ─── Badge personnalisé ─────────────────────────────── */
.badge.bg-mairie { background-color: var(--mairie-vert) !important; }

/* ─── Breadcrumb ─────────────────────────────────────── */
.breadcrumb-item a { color: var(--mairie-vert); }
.breadcrumb-item.active { color: #666; }