/**
 * REVES Senegal Pro — mobile.css
 * Optimisation mobile-first complète
 * Breakpoints : 480 / 640 / 768 / 900 / 1024 / 1200
 */

/* ══════════════════════════════════════════════════════
   0. BASE MOBILE — appliqué partout
══════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Touch targets minimum 44px */
button, [role="button"], input[type="submit"],
input[type="button"], a.btn, .btn,
.menu-toggle, .slider-arrow,
.reves-hero__arrow, .back-to-top {
  min-height: 44px;
  min-width: 44px;
}

/* Éviter le débordement horizontal */
img, video, iframe, table {
  max-width: 100%;
}

/* Texte lisible partout */
p, li, td, th {
  font-size: clamp(.875rem, 2.5vw, 1rem);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════
   1. CONTAINER — adaptatif
══════════════════════════════════════════════════════ */
.container {
  width: 94%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 480px) { .container { width: 92%; } }

/* ══════════════════════════════════════════════════════
   2. HEADER MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Masquer topbar */
  .reves-topbar { display: none; }

  .site-header { position: sticky; top: 0; z-index: 1000; }
  .header-inner { height: 62px; }

  /* Logo compact */
  .site-logo__tagline { display: none; }
  .site-logo__name { font-size: .95rem; }
  .site-logo__mark { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 8px; }

  /* Navigation mobile en overlay plein écran — corrigé */
  .primary-nav {
    position: fixed;
    top: 62px; left: 0; right: 0; bottom: 0;
    background: #fff;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.5rem 0 env(safe-area-inset-bottom, 2rem);
    border-top: 3px solid var(--red, #c1121f);
    z-index: 999;
    /* Slide depuis la gauche — pas de display:none pour éviter le blocage */
    transform: translateX(-110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1),
                visibility .3s;
    visibility: hidden;
    /* Toujours flex, caché par transform */
    display: flex !important;
    align-items: stretch;
    justify-content: flex-start;
    will-change: transform;
  }
  .primary-nav.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 6px 0 32px rgba(0,0,0,.18);
  }

  .primary-nav__list { flex-direction: column; }
  .primary-nav__list > li > a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .primary-nav__list > li > a::after { display: none; }

  /* Sous-menus mobile */
  .primary-nav__list .sub-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none;
    background: var(--soft, #f8f9fa);
    border-radius: 0; padding: 0;
    display: none;
  }
  .primary-nav__list li.menu-open > .sub-menu { display: block; }
  .primary-nav__list .sub-menu li a {
    padding: 12px 36px;
    font-size: .9rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* Bouton don — texte visible sur mobile */
  .header-don-btn span { display: inline !important; }
  .header-don-btn { font-size: .82rem; padding: 8px 14px; }

  /* Cacher la recherche */
  .header-search-btn { display: none; }
}

@media (max-width: 480px) {
  .header-inner { height: 56px; }
  .site-logo__text { display: none; }
  .primary-nav { top: 56px; }
}

/* ══════════════════════════════════════════════════════
   3. HERO SLIDER MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .reves-hero { --hero-h: min(88vh, 580px); }

  .reves-hero__body { padding-bottom: 60px; padding-top: 1rem; }
  .reves-hero__inner { max-width: 100%; }

  .reves-hero__badge { font-size: .72rem; padding: 5px 14px 5px 10px; margin-bottom: 1rem; }
  .reves-hero__title { font-size: clamp(1.5rem, 5.5vw, 2.2rem); margin-bottom: 1rem; }
  .reves-hero__desc  { font-size: .9rem; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .reves-hero__actions { gap: .75rem; }
  .reves-btn { padding: 11px 20px; font-size: .88rem; }

  .reves-hero__arrow { width: 38px; height: 38px; font-size: .9rem; }
  .reves-hero__arrow--prev { left: 10px; }
  .reves-hero__arrow--next { right: 10px; }

  .reves-hero__dots   { bottom: 32px; }
  .reves-hero__counter { right: 12px; bottom: 32px; font-size: .75rem; }
  .reves-hero__scroll  { display: none; }
}

@media (max-width: 480px) {
  .reves-hero { --hero-h: min(92vh, 520px); }
  .reves-hero__title { font-size: 1.5rem; }
  .reves-hero__desc  { -webkit-line-clamp: 2; }
  .reves-hero__actions { flex-direction: column; width: 100%; }
  .reves-btn { width: 100%; justify-content: center; }
  .reves-hero__overlay {
    background: linear-gradient(180deg, rgba(10,12,20,.75) 0%, rgba(10,12,20,.6) 60%, rgba(10,12,20,.85) 100%);
  }
}

/* ══════════════════════════════════════════════════════
   4. INFOBAR MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .reves-infobar { padding: 8px 0; }
  .reves-infobar__slogan { display: none; }
  .reves-infobar__inner  { justify-content: center; }
  .reves-infobar__contacts { gap: .6rem; flex-wrap: wrap; justify-content: center; }
  .reves-infobar__item span { font-size: .75rem; }
}

/* ══════════════════════════════════════════════════════
   5. SECTIONS GÉNÉRALES
══════════════════════════════════════════════════════ */
.section { padding: 70px 0; }

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 2.5rem; }
  .section-title  { font-size: clamp(1.4rem, 5vw, 2rem); }
  .section-subtitle { font-size: .9rem; }
}

@media (max-width: 480px) {
  .section { padding: 44px 0; }
  .section-title { font-size: 1.4rem; }
}

/* ══════════════════════════════════════════════════════
   6. À PROPOS — HOME
══════════════════════════════════════════════════════ */
@media (max-width: 968px) {
  .reves-about { padding: 60px 0; }
  .reves-about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .reves-about__img  { height: 320px; }
  .reves-about__badge { bottom: -16px; left: 16px; padding: 16px 20px; }
  .reves-about__badge-year { font-size: 2rem; }
  .reves-about__float-card { right: 10px; top: 10px; padding: 8px 12px; }
  .reves-about__float-card i { font-size: 1.1rem; }
  .reves-about__float-title { font-size: .75rem; }
  .reves-about__float-sub   { font-size: .67rem; }
}

@media (max-width: 640px) {
  .reves-about__thumbs { grid-template-columns: repeat(3,1fr); gap: .5rem; }
  .reves-about__thumbs img { height: 80px; }
  .reves-about__values-grid { grid-template-columns: 1fr; }
  .reves-about__actions { flex-direction: column; }
  .reves-about__actions .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   7. STATS
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .reves-stats__grid { grid-template-columns: 1fr 1fr; }
  .reves-stats__item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .reves-stats__item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.06); }
  .reves-stats__item:last-child,
  .reves-stats__item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

@media (max-width: 480px) {
  .reves-stats { padding: 50px 0; }
  .reves-stats__number { font-size: 2.5rem; }
  .reves-stats__item   { padding: 1.75rem 1rem; }
}

/* ══════════════════════════════════════════════════════
   8. PROGRAMMES — HOME
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .reves-programmes__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
  .reves-programmes { padding: 56px 0; }
  .reves-programmes__grid   { grid-template-columns: 1fr; }
  .reves-programmes__header { flex-direction: column; align-items: flex-start; }
  .reves-programmes__all-btn { align-self: stretch; text-align: center; justify-content: center; }
  .reves-prog-card__top { height: 160px; }
}

/* ══════════════════════════════════════════════════════
   9. CIBLES + CTA
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .reves-cibles__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
  .reves-cibles       { padding: 56px 0; }
  .reves-cibles__grid { grid-template-columns: 1fr; }
  .reves-cta          { padding: 80px 0; }
  .reves-cta__title   { font-size: 1.6rem; }
  .reves-cta__actions { flex-direction: column; align-items: center; }
  .reves-cta__actions .reves-btn { width: 100%; max-width: 320px; justify-content: center; }
  .reves-cta__odds    { gap: .4rem; }
  .reves-cta__odd-badge { width: 30px; height: 30px; font-size: .78rem; border-radius: 5px; }
}

/* ══════════════════════════════════════════════════════
   10. ACTUALITÉS — HOME
══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .reves-news__grid { grid-template-columns: 1fr 1fr; }
  .reves-news-card--featured { grid-column: span 2; }
}

@media (max-width: 580px) {
  .reves-news         { padding: 56px 0; }
  .reves-news__grid   { grid-template-columns: 1fr; }
  .reves-news__header { flex-direction: column; align-items: flex-start; }
  .reves-news-card--featured { grid-column: span 1; }
  .reves-news-card--featured .reves-news-card__img { height: 220px; }
  .reves-news-card__img { height: 180px; }
}

/* ══════════════════════════════════════════════════════
   11. PARTENAIRES + NEWSLETTER
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .reves-partners__bottom { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .reves-partners         { padding: 60px 0; }
  .reves-partners__logos  { gap: .75rem; }
  .reves-partner-logo     { min-width: 130px; padding: 1rem 1.25rem; }
  .reves-newsletter-strip { padding: 30px 0; }
  .reves-newsletter-strip__inner  { flex-direction: column; gap: 1.5rem; }
  .reves-newsletter-strip__left   { flex-direction: column; text-align: center; }
  .reves-newsletter-strip__form   { width: 100%; flex-direction: column; }
  .reves-newsletter-strip__input  { width: 100%; }
  .reves-newsletter-strip__form .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   12. FOOTER MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .footer-grid   { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .75rem; }
  .footer-bottom > div:last-child { justify-content: center; }
  .newsletter-section { padding: 50px 0; }
  .newsletter-inner   { grid-template-columns: 1fr; gap: 1.5rem; }
  .newsletter-form    { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════
   13. PAGES INTÉRIEURES MOBILE
══════════════════════════════════════════════════════ */

/* Page hero */
.page-hero { padding: 60px 0 50px; min-height: auto; }
@media (max-width: 768px) {
  .page-hero { padding: 44px 0 36px; }
  .page-hero__title { font-size: clamp(1.4rem, 5vw, 2rem); }
}

/* À propos — template page */
@media (max-width: 968px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .about-content { padding-left: 0 !important; }
  .about-badge   { bottom: -16px !important; right: 16px !important; left: auto !important; }
  .timeline { padding: 0; }
  .timeline::before { left: 20px; }
  .timeline-item,
  .timeline-item--left,
  .timeline-item--right { flex-direction: column !important; padding-left: 50px !important; }
  .timeline-dot { left: 20px !important; }
  .timeline-content { width: 100% !important; margin: 0 !important; }
}

/* Missions — grille 2→1 */
@media (max-width: 768px) {
  .mission-block { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .mission-block > div { order: unset !important; }
}

/* Équipe — grille 4→2→1 */
@media (max-width: 900px) { #team-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { #team-grid { grid-template-columns: 1fr !important; } }

/* Contact — grille */
@media (max-width: 768px) {
  .contact-grid-top { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .contact-main-grid { grid-template-columns: 1fr !important; }
  .contact-location-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .contact-grid-top { grid-template-columns: 1fr !important; }
}

/* Don — niveaux */
@media (max-width: 768px) {
  .don-niveaux-grid { grid-template-columns: 1fr !important; }
  .don-modes-grid   { grid-template-columns: 1fr !important; }
  .don-impact-grid  { grid-template-columns: 1fr !important; }
}

/* Bénévolat — missions */
@media (max-width: 768px) {
  .missions-benevoles-grid { grid-template-columns: 1fr 1fr !important; }
  .benevole-form-grid      { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .missions-benevoles-grid { grid-template-columns: 1fr !important; }
}

/* Partenaires — cards */
@media (max-width: 768px) {
  .partenaire-card { grid-template-columns: 1fr !important; }
  .partenaire-card > div:first-child {
    flex-direction: row !important;
    padding: 1.25rem !important;
    gap: 1rem !important;
  }
  .partenaires-locaux-grid { grid-template-columns: 1fr !important; }
}

/* Blog sidebar */
@media (max-width: 768px) {
  .blog-layout { grid-template-columns: 1fr !important; }
  .blog-sidebar { position: static !important; }
}

/* Single programme/projet */
@media (max-width: 768px) {
  .single-grid { grid-template-columns: 1fr !important; }
  .single-aside { position: static !important; }
}

/* ══════════════════════════════════════════════════════
   14. GRILLES GÉNÉRALES RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .programmes-grid { grid-template-columns: 1fr 1fr; }
  .news-grid       { grid-template-columns: 1fr 1fr; }
  .stats-grid      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .programmes-grid,
  .news-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   15. TYPOGRAPHIE FLUIDE MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
  h4 { font-size: 1rem; }

  .btn-lg { padding: 13px 22px; font-size: .9rem; }
  .btn    { padding: 10px 18px; font-size: .88rem; }
}

/* ══════════════════════════════════════════════════════
   16. RETOUR EN HAUT — mobile
══════════════════════════════════════════════════════ */
/* ── Back-to-top : au-dessus de la bottom nav sur mobile ── */
@media (max-width: 768px) {
  .back-to-top {
    /* Au-dessus de la bottom nav (≈62px) + marge 12px + safe area */
    bottom: calc(62px + 12px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    width: 40px;
    height: 40px;
    font-size: .85rem;
    z-index: 997; /* sous la bottom nav (998) */
  }
}

@media (max-width: 640px) {
  /* Bottom nav présente : décaler encore plus */
  .back-to-top {
    bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px));
    right: 14px;
  }
}

@media (min-width: 641px) {
  /* Pas de bottom nav : position standard */
  .back-to-top {
    bottom: 28px;
    right: 28px;
  }
}

/* ══════════════════════════════════════════════════════
   17. FORMULAIRES MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* éviter le zoom iOS au focus */
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════
   18. IMAGES — lazy load placeholder
══════════════════════════════════════════════════════ */
img[loading="lazy"] {
  background: var(--soft, #f8f9fa);
}

/* ══════════════════════════════════════════════════════
   19. PWA — STANDALONE MODE
   Appliqué quand l'app est lancée depuis l'écran d'accueil
══════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top, 0); }
  .reves-topbar { display: none; }
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* iPhone X+ — safe area insets */
@supports (padding: max(0px)) {
  .site-header {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .container {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .back-to-top {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right:  max(16px, env(safe-area-inset-right,  16px));
  }
}

/* ══════════════════════════════════════════════════════
   20. PRINT
══════════════════════════════════════════════════════ */
@media print {
  .site-header, .reves-topbar, .back-to-top,
  .reves-hero__arrows, .reves-hero__dots,
  .reves-hero__scroll, .reves-hero__progress,
  .footer-social, nav, .header-actions { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .page-hero { background: #fff !important; color: #000 !important; padding: 20pt 0; }
}