/* AAB Tourisme — Charte graphique (palette restreinte à 3 couleurs)
   Vert Bénin #1B5E3A · Or doré #D9A62E · Blanc #FFFFFF
   (nuances/teintes de ces 3 couleurs uniquement — aucune autre teinte)
   Display: Fraunces · Texte: Work Sans · Données: IBM Plex Mono
*/

:root {
  --aab-vert: #1B5E3A;
  --aab-vert-nuit: #0E3623;
  --aab-vert-clair: #2F7A50;
  --aab-vert-pale: #EAF3EC;   /* teinte très claire de vert, tient lieu de fond "blanc cassé» */
  --aab-or: #C9971F;
  --aab-or-clair: #E8C468;
  --aab-or-pale: #FBF3DE;
  --aab-blanc: #FFFFFF;
  --aab-texte: #1A2620;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Surcharge des variables Bootstrap */
  --bs-primary: var(--aab-vert);
  --bs-primary-rgb: 27, 94, 58;
  --bs-secondary: var(--aab-or);
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--aab-texte);
  --bs-body-bg: var(--aab-blanc);
}

body {
  font-family: var(--font-body);
  background-color: var(--aab-blanc);
  color: var(--aab-texte);
}

h1, h2, h3, h4, .display-titre {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--aab-vert-nuit);
}

.font-mono, .prix, .duree-badge { font-family: var(--font-mono); }

/* --- Bandeau utilitaire secondaire (menu secondaire) --- */
.topbar-aab {
  background-color: var(--aab-vert-nuit);
  color: var(--aab-or-pale);
  font-size: .8rem;
}
.topbar-aab a {
  color: var(--aab-or-pale);
  text-decoration: none;
}
.topbar-aab a:hover { color: var(--aab-or-clair); }

/* --- Navbar --- */
.navbar-aab {
  background-color: var(--aab-vert);
}
.navbar-aab .nav-link {
  color: var(--aab-blanc);
  font-weight: 500;
}
.navbar-aab .nav-link:hover,
.navbar-aab .nav-link.active {
  color: var(--aab-or-clair);
}
.navbar-aab .navbar-brand {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--aab-blanc) !important;
  letter-spacing: .02em;
}
.navbar-aab .dropdown-menu {
  border: none;
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(14,54,35,.18);
}
.navbar-aab .dropdown-item:hover {
  background-color: var(--aab-vert-pale);
  color: var(--aab-vert-nuit);
}

/* --- Boutons --- */
.btn-aab-primary {
  background-color: var(--aab-vert);
  border-color: var(--aab-vert);
  color: var(--aab-blanc);
  font-weight: 600;
}
.btn-aab-primary:hover {
  background-color: var(--aab-vert-nuit);
  border-color: var(--aab-vert-nuit);
  color: var(--aab-or-clair);
}
.btn-aab-or {
  background-color: var(--aab-or);
  border-color: var(--aab-or);
  color: var(--aab-vert-nuit);
  font-weight: 700;
}
.btn-aab-or:hover {
  background-color: var(--aab-or-clair);
  border-color: var(--aab-or-clair);
  color: var(--aab-vert-nuit);
}
.btn-outline-aab {
  border: 1px solid var(--aab-vert);
  color: var(--aab-vert);
  font-weight: 600;
  background: var(--aab-blanc);
}
.btn-outline-aab:hover {
  background-color: var(--aab-vert);
  color: var(--aab-blanc);
}

/* --- Hero --- */
.hero-aab {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(14,54,35,.60) 0%, rgba(14,54,35,.82) 100%),
    center/cover no-repeat;
  color: var(--aab-blanc);
}
.hero-aab .eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--aab-or-clair);
  font-size: .8rem;
}
.hero-aab h1 {
  color: var(--aab-blanc);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
}

/* --- Motif signature : frise géométrique inspirée des textiles béninois ---
   Utilisée comme séparateur de section, en alternance or/vert. */
.frise-aab {
  height: 14px;
  width: 100%;
  background-image: repeating-linear-gradient(
    135deg,
    var(--aab-or) 0px, var(--aab-or) 10px,
    var(--aab-vert) 10px, var(--aab-vert) 20px
  );
  clip-path: polygon(0% 50%, 5% 0%, 10% 50%, 15% 0%, 20% 50%, 25% 0%, 30% 50%, 35% 0%, 40% 50%, 45% 0%, 50% 50%, 55% 0%, 60% 50%, 65% 0%, 70% 50%, 75% 0%, 80% 50%, 85% 0%, 90% 50%, 95% 0%, 100% 50%, 100% 100%, 0% 100%);
  opacity: .9;
}

/* --- Cartes destination / circuit / hébergement --- */
.carte-aab {
  border: 1px solid var(--aab-vert-pale);
  border-radius: .75rem;
  overflow: hidden;
  background: var(--aab-blanc);
  box-shadow: 0 2px 14px rgba(14,54,35,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte-aab:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(14,54,35,.14);
}
.carte-aab .badge-categorie {
  background-color: var(--aab-or);
  color: var(--aab-vert-nuit);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Bandeau Vodoun Day (vert profond + or, sans rouge/terracotta) --- */
.bandeau-vodoun {
  background: linear-gradient(120deg, var(--aab-vert-nuit) 0%, var(--aab-vert) 100%);
  color: var(--aab-blanc);
  border-top: 3px solid var(--aab-or);
  border-bottom: 3px solid var(--aab-or);
}

/* --- Fonds de section --- */
.section-pale { background-color: var(--aab-vert-pale); }
.section-or-pale { background-color: var(--aab-or-pale); }

/* --- Footer --- */
.footer-aab {
  background-color: var(--aab-vert-nuit);
  color: var(--aab-or-pale);
}
.footer-aab a { color: var(--aab-or-pale); }
.footer-aab a:hover { color: var(--aab-or-clair); }

/* Accessibilité : focus visible clavier */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--aab-or);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .carte-aab { transition: none; }
}