:root {
  --msas-vert: #00693E;
  --msas-vert-fonce: #004d2e;
  --msas-vert-clair: #e6f3ec;
  --msas-or: #FDB913;
  --msas-gris: #4a4f54;
  --msas-fond: #f7f9f8;
  --radius: 10px;
}

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--msas-fond);
  color: #222;
}

a { color: var(--msas-vert); text-decoration: none; }
a:hover { color: var(--msas-vert-fonce); }

/* --- Bandeau top --- */
.top-bar {
  background: var(--msas-vert-fonce);
  color: #fff;
  font-size: 0.85rem;
  padding: 6px 0;
}
.top-bar a { color: #fff; opacity: .9; margin-left: 14px; }

/* --- Navbar --- */
.navbar-msas {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 12px 0;
}
.navbar-msas .brand-title {
  font-weight: 700;
  color: var(--msas-vert-fonce);
  font-size: 1.05rem;
  line-height: 1.2;
}
.navbar-msas .brand-sub { font-size: .75rem; color: var(--msas-gris); }
.navbar-msas .nav-link { color: #222; font-weight: 500; }
.navbar-msas .nav-link:hover, .navbar-msas .nav-link.active { color: var(--msas-vert); }

/* --- Hero / Slider --- */
.hero-slide {
  background-size: cover;
  background-position: center;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hero-slide .overlay {
  background: linear-gradient(180deg, rgba(0,77,46,0) 0%, rgba(0,50,30,.85) 100%);
  width: 100%;
  padding: 40px;
}

/* --- Quick access cards --- */
.quick-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  border: 1px solid #e7ece9;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.quick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,105,62,.12);
}
.quick-card .icon {
  width: 56px; height: 56px;
  background: var(--msas-vert-clair);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.6rem;
  color: var(--msas-vert);
}

/* --- Section titles --- */
.section-title {
  font-weight: 700;
  color: var(--msas-vert-fonce);
  border-left: 5px solid var(--msas-or);
  padding-left: 12px;
  margin-bottom: 24px;
}

/* --- Cards actu / direction / document --- */
.card-msas { border: 1px solid #e7ece9; border-radius: var(--radius); overflow: hidden; height: 100%; }
.card-msas img { height: 180px; object-fit: cover; width: 100%; }
.badge-msas { background: var(--msas-vert-clair); color: var(--msas-vert-fonce); font-weight: 600; }

/* --- Footer --- */
footer.footer-msas {
  background: var(--msas-vert-fonce);
  color: #e9f3ee;
  padding: 40px 0 20px;
  margin-top: 60px;
}
footer.footer-msas a { color: #fff; }
footer.footer-msas h6 { color: var(--msas-or); font-weight: 700; }

/* --- Map --- */
#carte-sanitaire, #carte-pharmacies { height: 600px; border-radius: var(--radius); }

.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.status-disponible { background:#28a745; }
.status-limitee { background:#ffc107; }
.status-rupture, .status-rupture_temp { background:#dc3545; }
.status-reapprovisionnement { background:#17a2b8; }
.status-inconnu { background:#6c757d; }

.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--msas-vert-fonce); color: #fff; padding: 8px 16px; z-index: 2000;
}
.skip-link:focus { left: 10px; top: 10px; }