/* =========================================================
   My Outdoor Experience — Theme (style flyer unifié)
   ========================================================= */
/* -------- Palette principale -------- */
:root {
  --brand: #2e4a36;   /* Vert forêt - couleur principale (boutons, accents) */
  --accent: #4b6b4b;  /* Vert clair - titres */
  --bg: #f4efe5;      /* Beige fond global */
  --muted: #f8f5ef;   /* Beige clair - blocs secondaires */
  --text: #121416;    /* Noir doux - texte courant */
  --white: #ffffff;   /* Blanc pur */
}

/* =========================================================
   TYPOGRAPHIE ET BASE
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: "Merriweather", Georgia, serif;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn-dark {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-dark:hover {
  background: #22392b;
  border-color: #22392b;
}

.btn-outline-dark {
  color: #22392b;
  border-color: #22392b;
}

.btn-outline-dark:hover {
  background: #22392b;
  color: #fff;
}

/* Bouton principal de marque (menu Connexion/Inscription) */
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  border-radius: .6rem;
  padding: .4rem .7rem;
}

.btn-brand:hover {
  background: #22392b;
  border-color: #22392b;
}

/* =========================================================
   NAVBAR — propre, compacte, moderne
   ========================================================= */
/* Conteneur global avec flou + fine bordure */
.site-header{
  position: sticky; top: 0; z-index: 1020;
  backdrop-filter: saturate(130%) blur(6px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Navbar compacte et centrée */
.navbar { padding-block: .45rem; background: transparent; }
.navbar-centered .navbar-brand span{ font-size: .95rem; letter-spacing: .02em; font-weight: 700; }
.navbar .nav-link{ padding:.35rem .6rem; color:#222; }
.navbar .nav-link:hover{ color: var(--brand); }

/* Logo (visible desktop, raisonnable mobile) */
.navbar-brand .brand-logo{
  height: clamp(48px, 3.5vw, 64px);
  width:auto !important; margin-right:.5rem; vertical-align: middle;
}

/* Menus déroulants au survol (desktop) */
@media (min-width: 992px){
  .dropdown-hover:hover > .dropdown-menu{ display:block; margin-top:0; }
  .dropdown-hover > .dropdown-toggle:focus + .dropdown-menu{ display:block; }
}

.dropdown-menu {
  border-radius:.75rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.dropdown-item { 
  padding:.55rem .9rem;
}

/* Espace sous header */
main { 
  padding-top: 1.2rem;
}

/* Espacement du contenu principal sous la navbar */
main {
  padding-top: 1.2rem;
}

/* Style pour le Lien Actif */
.navbar .nav-link.active {
    color: var(--brand) !important; 
    font-weight: 700;
    border-bottom: 2px solid var(--brand); 
    padding-bottom: 2px !important;
}

/* =========================================================
   ÉLÉMENTS GÉNÉRAUX (tags, cartes, sections)
   ========================================================= */
.tag {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--muted);
  font-size: .75rem;
  margin-right: .5rem;
}

/* Cartes d’article du blog */
.card-article {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}

.card-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

.card-article img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-article .title {
  font-weight: 700;
}

/* Titre de section */
.section-title {
  font-weight: 700;
  /*  border-left: 4px solid var(--accent); */
  padding-left: .5rem;
}

.brand-text span:first-child {
  letter-spacing: 1px;
  font-family: "Merriweather", Georgia, serif;
}

.brand-text span:last-child {
  font-family: Inter, sans-serif;
  letter-spacing: 0.5px;
}

/* Modale événements (calendrier) */
.modal-content {
  border-radius: 1rem;
}

.modal-header {
  border-bottom-color: rgba(0,0,0,.06);
}

.modal-title {
  color: var(--accent);
  font-family: "Merriweather", Georgia, serif;
}