/**
 * ═══════════════════════════════════════════════════════════════
 * DESIGN INSTITUTIONNEL ÉPURÉ - NZÉRÉKORÉ
 * Version 2.0 - Septembre 2026
 * Inspiration : gov.uk, service-public.fr, canada.ca
 * ═══════════════════════════════════════════════════════════════
 */

/* Import retiré : Public Sans est déjà chargée depuis l'en-tête, et un
   @import enchaîne deux allers-retours supplémentaires. Inter faisait
   doublon avec elle pour 47 ko, sur un site dont 90 % des visites se
   font au téléphone. */

/* ═══════════════════════════════════════════════════════════════
   TOKENS DE DESIGN ÉPURÉ
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette institutionnelle guinéenne */
  --white: #ffffff;
  --slate-50: #f8fafc;
  --slate-100: #ffffff;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #3a3a3a;
  --slate-600: #3a3a3a;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #171c22;

  /* Accents nationaux */
  --blue-primary: #305074;
  --blue-hover: #233c57;
  --red-guinea: #974d48;
  --green-guinea: #455951;
  --green-hover: #35453f;
  --yellow-guinea: #b97559;

  /* Tokens sémantiques */
  --ground: var(--white);
  --ground-subtle: var(--slate-50);
  --text: var(--slate-800);
  --text-muted: var(--slate-600);
  --text-subtle: var(--slate-500);
  --accent: var(--blue-primary);
  --accent-hover: var(--blue-hover);
  --border: var(--slate-200);
  --border-subtle: var(--slate-100);

  /* Grille baseline 8px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Typographie */
  --font-display: 'Public Sans', -apple-system, system-ui, sans-serif;
  --font-body: 'Public Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* Aucun thème sombre : les surfaces du site sont blanches en dur, basculer
   --text vers une teinte claire rendait les textes illisibles chez les
   visiteurs dont le système est en mode sombre. */

/* ═══════════════════════════════════════════════════════════════
   HEADER INSTITUTIONNEL ÉPURÉ
   ═══════════════════════════════════════════════════════════════ */

.official-bar {
  background: var(--slate-900) !important;
  color: var(--white) !important;
  border-bottom: none !important;
  padding: var(--space-2) 0 !important;
  text-align: center !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.site-top-wrapper {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}

.site-header {
  background: var(--white) !important;
  color: var(--text) !important;
  padding: var(--space-4) 0 !important;
}

/* Logo raffiné */
.brand {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  transition: color 0.15s ease !important;
  letter-spacing: -0.01em !important;
}

.brand:hover {
  color: var(--accent) !important;
}

.brand-badge {
  background: var(--green-guinea) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  padding: var(--space-1) var(--space-3) !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION ÉPURÉE - CLASSE MONDIALE
   ═══════════════════════════════════════════════════════════════ */

/* Liens navigation principaux */
.navlink,
.navlink-dropdown,
.nav a,
.nav button {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  padding: var(--space-3) var(--space-5) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Animation hover sophistiquée */
.navlink::before,
.navlink-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--slate-50) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  z-index: -1 !important;
}

.navlink:hover,
.navlink-dropdown:hover {
  color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

.navlink:hover::before,
.navlink-dropdown:hover::before {
  opacity: 1 !important;
}

/* État actif avec indicateur */
.navlink.active,
.navlink-dropdown.active {
  background: var(--accent) !important;
  color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(0, 85, 164, 0.25), 0 1px 3px rgba(0, 85, 164, 0.15) !important;
  font-weight: 600 !important;
  transform: none !important;
}

.navlink.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: var(--space-5) !important;
  right: var(--space-5) !important;
  height: 3px !important;
  background: var(--white) !important;
  border-radius: 3px 3px 0 0 !important;
}

/* Bouton CTA premium */
.navlink--invest {
  background: linear-gradient(135deg, var(--green-guinea) 0%, var(--green-hover) 100%) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}

.navlink--invest::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.5s ease !important;
}

.navlink--invest:hover {
  transform: translateY(-2px) !important;
}

.navlink--invest:hover::before {
  left: 100% !important;
}

.navlink--invest:active {
  transform: translateY(0) !important;
}

/* Recherche premium */
.search-form {
  background: var(--white) !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.search-form:hover {
  border-color: var(--slate-300) !important;
}

.search-form:focus-within {
  background: var(--white) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 4px rgba(0, 85, 164, 0.1),
    0 4px 12px rgba(0,0,0,0.1) !important;
  transform: translateY(-1px) !important;
}

.search-input {
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  width: 100% !important;
}

.search-input::placeholder {
  color: var(--slate-400) !important;
  font-weight: 400 !important;
}

.search-input:focus {
  outline: none !important;
}

.search-form button,
.search-form .search-icon {
  color: var(--text-subtle) !important;
  transition: color 0.2s ease !important;
}

.search-form:focus-within button,
.search-form:focus-within .search-icon {
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MEGA MENUS ÉPURÉS - CLASSE MONDIALE
   ═══════════════════════════════════════════════════════════════ */

.nav-dropdown-menu {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,0.08),
    0 10px 20px -5px rgba(0,0,0,0.04),
    0 0 0 1px rgba(0,0,0,0.02) !important;
  padding: var(--space-10) !important;
  margin-top: var(--space-3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Contraintes viewport */
  max-width: min(1200px, calc(100vw - 2rem)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;

  /* Animation d'apparition */
  animation: megaMenuFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: top center !important;
}

@keyframes megaMenuFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Titres colonnes avec icône décorative - CONTRASTE FORT */
.nav-mega-col__heading {
  color: #171c22 !important; /* Slate-900 forcé */
  font-family: var(--font-display) !important;
  font-weight: 800 !important; /* Extra bold */
  font-size: 0.875rem !important; /* Légèrement plus grand */
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 4px solid var(--accent) !important; /* Bordure plus épaisse */
  padding: var(--space-2) var(--space-4) !important;
  padding-bottom: var(--space-3) !important;
  margin-bottom: var(--space-5) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background: var(--slate-50) !important; /* Fond subtil */
  border-radius: 6px 6px 0 0 !important;
}

.nav-mega-col__heading::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 0 2px rgba(0, 85, 164, 0.2) !important;
}

/* Colonnes mega menu avec séparateurs */
.nav-mega-col {
  position: relative !important;
  padding-right: var(--space-6) !important;
}

.nav-mega-col:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border) 10%,
    var(--border) 90%,
    transparent 100%
  ) !important;
}

/* Liens mega menu avec micro-interactions */
.nav-mega-col__link,
.nav-dropdown-link,
.nav-mega-col a,
.nav-dropdown a {
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: 1.6 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  margin-bottom: var(--space-2) !important;
  position: relative !important;
  border-left: 3px solid transparent !important;
}

/* Icônes dans liens */
.nav-mega-col__link i,
.nav-dropdown-link i {
  color: var(--text-subtle) !important;
  font-size: 1.125rem !important;
  width: 1.5rem !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

/* Hover state premium */
.nav-mega-col__link:hover,
.nav-dropdown-link:hover,
.nav-mega-col a:hover,
.nav-dropdown a:hover {
  background: var(--slate-50) !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  transform: translateX(2px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.nav-mega-col__link:hover i,
.nav-dropdown-link:hover i {
  color: var(--accent) !important;
  transform: scale(1.1) !important;
}

/* État actif/current */
.nav-mega-col__link.is-current,
.nav-dropdown-link.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--blue-hover) 100%) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  border-left-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 85, 164, 0.25) !important;
}

.nav-mega-col__link.is-current i,
.nav-dropdown-link.active i {
  color: var(--white) !important;
}

/* Badge "Nouveau" */
.nav-mega-col__link .badge-new,
.nav-dropdown-link .badge-new {
  background: var(--green-guinea) !important;
  color: var(--white) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 3px !important;
  margin-left: auto !important;
}

/* Séparateurs entre groupes */
.nav-mega-col hr,
.nav-dropdown hr {
  border: none !important;
  height: 1px !important;
  background: var(--border-subtle) !important;
  margin: var(--space-4) 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER ÉPURÉ
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--slate-900) !important;
  color: var(--slate-400) !important;
  border-top: none !important;
  padding-top: var(--space-16) !important;
}

.site-footer * {
  color: var(--slate-400) !important;
}

.site-footer h3,
.site-footer h4 {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: var(--space-5) !important;
}

.site-footer a {
  color: var(--slate-400) !important;
  transition: color 0.15s ease !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 0.9375rem !important;
}

.site-footer a:hover {
  color: var(--white) !important;
}

/* Boutons footer */
.site-footer .btn,
.site-footer button {
  background: var(--green-guinea) !important;
  color: var(--white) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.site-footer .btn:hover,
.site-footer button:hover {
  background: var(--green-hover) !important;
  transform: translateY(-2px) !important;
}

/* Footer bottom */
.footer-bottom,
.site-footer__bottom {
  background: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--slate-500) !important;
  padding: var(--space-6) 0 !important;
  margin-top: var(--space-12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.mobile-nav-backdrop {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mobile-nav-backdrop.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 991px) {
  .site-nav-shell {
    background: var(--white) !important;
    box-shadow:
      0 20px 40px -10px rgba(0,0,0,0.15),
      0 0 0 1px rgba(0,0,0,0.05) !important;
    border-right: none !important;
    animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  @keyframes slideInFromLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .site-nav-shell .navlink,
  .site-nav-shell .navlink-dropdown {
    color: var(--text) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: var(--space-5) var(--space-6) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
  }

  .site-nav-shell .navlink::before,
  .site-nav-shell .navlink-dropdown::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 0 !important;
    background: var(--accent) !important;
    transition: width 0.2s ease !important;
  }

  .site-nav-shell .navlink:hover,
  .site-nav-shell .navlink-dropdown:hover {
    background: var(--slate-50) !important;
    color: var(--accent) !important;
    padding-left: calc(var(--space-6) + var(--space-2)) !important;
  }

  .site-nav-shell .navlink:hover::before,
  .site-nav-shell .navlink-dropdown:hover::before {
    width: 4px !important;
  }

  .site-nav-shell .navlink.active,
  .site-nav-shell .navlink-dropdown.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--blue-hover) 100%) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    border-left: none !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
  }

  .site-nav-shell .navlink.active::before,
  .site-nav-shell .navlink-dropdown.active::before {
    width: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER STICKY PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.site-header {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.site-header.is-scrolled {
  border-bottom: 1px solid var(--border) !important;
  box-shadow:
    0 10px 25px -5px rgba(0,0,0,0.08),
    0 4px 12px -2px rgba(0,0,0,0.04) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Effet de compression au scroll */
.site-header.is-scrolled .brand {
  font-size: 1rem !important;
  transition: font-size 0.3s ease !important;
}

.site-header.is-scrolled .navlink,
.site-header.is-scrolled .navlink-dropdown {
  padding: var(--space-2) var(--space-4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ - FOCUS ÉLÉGANT
   ═══════════════════════════════════════════════════════════════ */

*:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 6px rgba(0, 85, 164, 0.15) !important;
}

/* Focus pour navigation */
.navlink:focus-visible,
.navlink-dropdown:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(0, 85, 164, 0.1) !important;
}

/* Focus pour liens mega menu */
.nav-mega-col__link:focus-visible,
.nav-dropdown-link:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 85, 164, 0.1) !important;
}

/* Skip to main content */
.skip-to-main {
  position: absolute !important;
  top: -100px !important;
  left: var(--space-4) !important;
  background: var(--accent) !important;
  color: white !important;
  padding: var(--space-3) var(--space-6) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  z-index: 10000 !important;
  transition: top 0.2s ease !important;
}

.skip-to-main:focus {
  top: var(--space-4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU TOGGLE PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.mobile-nav-toggle {
  background: var(--white) !important;
  color: var(--text) !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  padding: var(--space-3) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.mobile-nav-toggle:hover {
  background: var(--slate-50) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.mobile-nav-toggle:active {
  transform: scale(0.98) !important;
}

/* Animation hamburger */
.mobile-nav-toggle .hamburger-line {
  transition: all 0.3s ease !important;
}

.mobile-nav-toggle.is-open .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}

.mobile-nav-toggle.is-open .hamburger-line:nth-child(2) {
  opacity: 0 !important;
}

.mobile-nav-toggle.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}