/* ============================================================
   AFRO-ANTILLES — Design system
   Palette : Orange #E8921A · Vert #3D9B35 · Bleu #1E5B9E
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --aa-orange:      #E8921A;
  --aa-orange-dark: #C47A12;
  --aa-green:       #3D9B35;
  --aa-blue:        #1E5B9E;
  --aa-dark:        #1C1C1E;
  --aa-bg:          #F7F6F2;
  --aa-card:        #FFFFFF;
  --aa-border:      #E4E1D8;
  --aa-text:        #1C1C1E;
  --aa-muted:       #6B6860;
  --aa-radius:      10px;
  --aa-shadow:      0 1px 6px rgba(0,0,0,.07);
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--aa-bg);
  color: var(--aa-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

a { color: var(--aa-dark); }
a:hover { color: var(--aa-orange); }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar-aa {
  background: #fff;
  border-bottom: 1px solid var(--aa-border);
  padding: 0;
  min-height: 64px;
}

.navbar-aa .navbar-brand img {
  height: 44px;
  width: auto;
}

.navbar-aa .nav-link {
  color: var(--aa-text) !important;
  font-weight: 500;
  font-size: 14px;
  padding: .5rem .75rem !important;
  border-radius: 8px;
  transition: background .15s, color .15s;
}

.navbar-aa .nav-link:hover {
  background: var(--aa-bg);
  color: var(--aa-orange) !important;
}

.navbar-aa .nav-link.active {
  color: var(--aa-orange) !important;
}

.navbar-aa .dropdown-menu {
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: .5rem;
  min-width: 200px;
}

.navbar-aa .dropdown-item {
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  padding: .5rem .75rem;
  color: var(--aa-text);
}

.navbar-aa .dropdown-item:hover {
  background: var(--aa-bg);
  color: var(--aa-orange);
}

.navbar-aa .dropdown-divider {
  border-color: var(--aa-border);
  margin: .4rem .75rem;
}

.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--aa-border);
}

.nav-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--aa-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--aa-border);
}

.navbar-aa .btn-join {
  background: var(--aa-orange);
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: .4rem 1rem;
  border: none;
  transition: background .15s;
}

.navbar-aa .btn-join:hover {
  background: var(--aa-orange-dark);
  color: #fff !important;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--aa-border) !important;
  border-radius: var(--aa-radius) !important;
  box-shadow: var(--aa-shadow) !important;
  background: var(--aa-card);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 14px;
  transition: all .15s;
}

.btn-dark {
  background: var(--aa-dark) !important;
  border-color: var(--aa-dark) !important;
}

.btn-dark:hover {
  background: #333 !important;
  border-color: #333 !important;
}

.btn-primary, .btn-orange {
  background: var(--aa-orange) !important;
  border-color: var(--aa-orange) !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-orange:hover {
  background: var(--aa-orange-dark) !important;
  border-color: var(--aa-orange-dark) !important;
}

.btn-outline-dark {
  border-color: var(--aa-border) !important;
  color: var(--aa-text) !important;
}

.btn-outline-dark:hover {
  background: var(--aa-bg) !important;
  border-color: var(--aa-dark) !important;
  color: var(--aa-dark) !important;
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--aa-border);
  border-radius: 8px !important;
  font-size: 14px;
  padding: .55rem .85rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
  border-color: var(--aa-orange);
  box-shadow: 0 0 0 3px rgba(232,146,26,.15);
}

.form-label { font-weight: 500; font-size: 14px; margin-bottom: .35rem; }
.form-text  { font-size: 12px; color: var(--aa-muted); }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  font-size: 11px;
  border-radius: 6px;
  padding: .3em .6em;
}

.badge-verified {
  background: #E8F5E9;
  color: var(--aa-green);
  border: 1px solid #C8E6C9;
}

.badge-premium {
  background: linear-gradient(135deg, var(--aa-orange), var(--aa-orange-dark));
  color: #fff;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  border-radius: var(--aa-radius) !important;
  border: 1px solid transparent;
  font-size: 14px;
}

/* ── List group ────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--aa-border);
  font-size: 14px;
}

.list-group-item:first-child { border-top-left-radius: var(--aa-radius) !important; border-top-right-radius: var(--aa-radius) !important; }
.list-group-item:last-child  { border-bottom-left-radius: var(--aa-radius) !important; border-bottom-right-radius: var(--aa-radius) !important; }

.list-group-item-action:hover { background: var(--aa-bg); }

/* ── Pagination ────────────────────────────────────────────── */
.page-link {
  color: var(--aa-dark);
  border-color: var(--aa-border);
  border-radius: 8px !important;
  margin: 0 2px;
  font-size: 14px;
}

.page-link:hover { background: var(--aa-bg); color: var(--aa-orange); }
.page-item.active .page-link { background: var(--aa-orange); border-color: var(--aa-orange); }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: #fff;
  border-top: 1px solid var(--aa-border) !important;
  font-size: 13px;
}

/* ── Progress bar onboarding ───────────────────────────────── */
.onboarding-step-active {
  background: var(--aa-orange) !important;
  color: #fff !important;
}

/* ── Utility ───────────────────────────────────────────────── */
.text-orange { color: var(--aa-orange) !important; }
.bg-orange   { background: var(--aa-orange) !important; }
.border-aa   { border-color: var(--aa-border) !important; }