/* ============================================================
   Portfolio Noël Koutohou Jahways — Responsive CSS
   Breakpoints : < 576 | 576-991 | ≥ 992 | ≥ 1200
   ============================================================ */

/* ─── Large desktop (≥ 1200px) ──────────────────────────────── */
@media (min-width: 1200px) {
  .container { padding: 0 48px; }
}

/* ─── Tablette (576–991px) ───────────────────────────────────── */
@media (max-width: 991px) {
  /* Nav */
  .hamburger { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 4px solid var(--vert-foret);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: var(--md);
    z-index: 200;
  }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; gap: 4px; align-items: stretch; }
  .nav-link { padding: 12px 16px; border-radius: 4px; }
  .site-header { position: sticky; }

  /* Hero */
  .hero {
    min-height: 0;
    padding: 40px 0 34px;
  }
  .hero::after {
    width: 78%;
    right: -36%;
    top: -25%;
  }
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-content { max-width: none; }
  .hero-stats { gap: 10px; }
  .hero-stat {
    min-width: 145px;
    flex: 1;
  }
  .hero-visual {
    min-height: 0;
    justify-content: flex-start;
  }
  .hero-blob {
    width: min(460px, 100%);
    height: 430px;
  }
  .hero-title { font-size: clamp(32px, 5vw, 52px); }

  /* Grilles */
  .axes-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--md); }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .ong-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .missions-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--xl); }
}

/* ─── Mobile (< 576px) ───────────────────────────────────────── */
@media (max-width: 575px) {
  section { padding: var(--2xl) 0; }
  .container { padding: 0 var(--md); }

  /* Header */
  .logo-subtitle { display: none; }
  .header-inner { height: 64px; }

  /* Hero */
  .hero {
    padding: 28px 0 26px;
    min-height: 0;
  }
  .hero::after {
    width: 96%;
    height: 76%;
    right: -56%;
    top: 12%;
    transform: rotate(-2deg);
  }
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 1.4px;
  }
  .hero-title  { font-size: clamp(32px, 8vw, 44px); }
  .hero-role {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .hero-bio {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .hero-socials { margin-bottom: 14px; }
  .hero-main-cta {
    width: 100%;
    justify-content: center;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero-stat {
    min-width: 0;
    padding: 10px 12px;
  }
  .hero-stat strong { font-size: 22px; }
  .hero-visual { justify-content: center; }
  .hero-blob {
    width: 100%;
    max-width: 320px;
    height: 300px;
  }

  /* Grilles */
  .axes-grid    { grid-template-columns: 1fr; }
  .stats-grid   { grid-template-columns: 1fr 1fr; }
  .projects-grid { grid-template-columns: 1fr; overflow-x: auto; }
  .project-card-media { height: 180px; }
  .blog-grid    { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .footer-grid  { grid-template-columns: 1fr; }
  .missions-grid { grid-template-columns: 1fr 1fr; }

  /* Blockquote */
  blockquote { font-size: 18px; }

  /* Stats */
  .stat-number { font-size: 40px; }

  /* Lightbox nav */
  .lightbox-prev { left: -48px; }
  .lightbox-next { right: -48px; }

  /* Contact */
  .contact-form { padding: var(--md); }

  /* Footer */
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Cookie */
  #cookie-banner { flex-direction: column; text-align: center; }
}

/* ─── Galerie : 2 colonnes sur tablette ──────────────────────── */
@media (max-width: 991px) and (min-width: 576px) {
  .gallery-grid { columns: 2; }
}

/* ─── Accessibilité : réduction de mouvement ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .fade-in { opacity: 1; transform: none; }
}