/* UI base utilities: reusable buttons, titles, and sections */

/* Container helper aligned with Tailwind design choices */
.content-container {
  max-width: 80rem; /* ~1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* 16px */
  padding-right: 1rem; /* 16px */
}

/* Améliorer le rendu du logo sur écrans mobiles (haute densité) */
.logo img {
  height: 2rem; /* h-8 équivaut à ~32px, garde la cohérence Tailwind */
  width: auto !important; /* éviter les width en % qui provoquent du resampling flou */
  max-width: none !important; /* annule les contraintes 100% héritées */
  image-rendering: -webkit-optimize-contrast; /* optimise le contraste (WebKit) */
  -webkit-transform: none !important;
  transform: none !important;
  filter: none !important;
}

/* Section spacing for vertical rhythm */
.section {
  padding-top: 2.5rem;  /* 40px */
  padding-bottom: 2.5rem; /* 40px */
}
.section-sm {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.section-lg {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Titles (compatible with existing markup) */
.section-title {
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem); /* 24 → 32 */
}
.sub-title {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18 → 22 */
}
.lead {
  font-size: 1.0625rem; /* ~17px */
  color: #374151; /* gray-700 */
}

/* Reusable buttons (no Tailwind @apply to keep CDN-only compatibility) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem; /* rounded-md */
  padding: 0.625rem 1.25rem; /* px-5 py-2.5 */
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: #15803d; /* brand */
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #166534; /* green-700 */
}

.btn-secondary {
  background-color: #ffffff;
  color: #111827; /* gray-900 */
  border: 1px solid #e5e7eb; /* gray-200 */
}
.btn-secondary:hover {
  background-color: #f9fafb; /* gray-50 */
}

/* Utility helpers */
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.text-justify { text-align: justify; }

/* Simple card components for consistent layout */
.card {
  border-radius: 0.75rem; /* rounded-xl */
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  overflow: hidden;
}
.card-body { padding: 1rem; }
.card-title { font-size: 1rem; font-weight: 600; }
.card-desc { font-size: 0.9375rem; color: #374151; }
.card-icon { font-size: 1.5rem; color: #15803d; }

/* Mobile menu (MeanMenu) overrides to ensure visibility and layering */
/* Put the mobile menu over the hero/H1 and make it readable */
.mean-container .mean-bar {
  z-index: 99999999; /* ensure the toggle bar stays above all content */
  position: fixed; /* keep the hamburger visible at the top */
  top: 0;
  left: 0;
  right: 0;
}

/* Raise the whole MeanMenu container above hero/H1 stacking contexts */
.mean-container {
  position: relative;
  z-index: 100000000; /* extremely high to beat hero overlays */
}

.mean-container .mean-nav {
  /* Use a dark background so white text is readable */
  background: #0b2a4a; /* deep navy */
  /* Keep it above any hero/H1 elements with huge z-index values */
  z-index: 99999999;
  /* Ensure the menu overlays the whole page and is clickable */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.mean-container .mean-nav ul li a {
  color: #ffffff !important; /* force readable text in mobile menu */
}

.mean-container .mean-nav ul li a:hover {
  color: #a7da42 !important; /* brand accent on hover */
  background: rgba(255,255,255,0.08);
}

/* Ensure the hamburger toggle is clickable and visible above hero */
.mean-container a.meanmenu-reveal {
  position: absolute; /* keep absolute to honor right positioning */
  z-index: 100000000; /* over everything */
  right: 1rem !important; /* place hamburger to the right */
  left: auto !important; /* cancel any default left alignment */
  top: 25px;
  margin-top: 0 !important; /* neutralize theme-specific negative margins */
}

/* Make the hamburger bars clearly visible */
.mean-container a.meanmenu-reveal span {
  background: #ffffff !important;
  border-top: none !important;
}

/* Prevent decorative header pseudo-elements from intercepting clicks */
.menu-area::before {
  pointer-events: none !important;
}