/* ═══════════════════════════════════════════════════════════
   AFRICA POST — Fix mobile global (applique a toutes les pages)
   Charge apres le CSS de chaque page
   ═══════════════════════════════════════════════════════════ */

/* ══════ 1. Empeche scroll horizontal systematique ══════ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
* {
  max-width: 100%;
}
img, iframe, video, svg {
  max-width: 100%;
  height: auto;
}

/* ══════ 2. Tablette & mobile (< 900px) ══════ */
@media (max-width: 900px) {
  /* Grilles 3+ col -> 2 col */
  .pu-programs-grid,
  .pa-programs-grid,
  .ag-cards,
  .ag-afr,
  .pa-why,
  .pa-process,
  .fr-guarantees,
  .ael-guarantees,
  .sv-help,
  .cv-steps,
  .cv-usecases,
  .av-values,
  .ael-steps,
  .fr-steps,
  .pu-help {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Splits 2 col -> 1 col */
  .pa-detail,
  .ap-story,
  .ael-hero-inner,
  .fr-hero-inner,
  .ag-hero-inner,
  .sv-hero-inner,
  .pu-layout,
  .av-widgets,
  .cv-compare,
  .ael-tarifs,
  .fr-tarifs,
  .ag-opts,
  .fr-network,
  .ael-merch,
  .ap-vision {
    grid-template-columns: 1fr !important;
  }
  .pa-detail.reverse .pa-detail-photo,
  .ap-story.reverse .ap-story-photo {
    order: 0 !important;
  }

  /* Layout 3 col (publications) masque sidebars */
  .pu-layout .pu-left,
  .pu-layout .pu-right {
    display: none;
  }
  .pu-layout {
    max-width: 640px !important;
  }

  /* Reduit padding sections */
  .ael-section, .fr-section, .ag-section, .sv-section, .pu-section,
  .pa-section, .av-section, .cv-section, .ap-section {
    padding: 50px 20px !important;
  }

  /* Heros : padding reduit, min-height auto */
  .ael-hero, .fr-hero, .ag-hero, .sv-hero, .pa-hero, .av-hero, .cv-hero, .ap-hero {
    min-height: auto !important;
    padding: 110px 20px 50px !important;
  }

  /* Section heads : texte plus petit */
  .ael-section-head h2, .fr-section-head h2, .ag-section-head h2,
  .sv-section-head h2, .pa-section-head h2, .av-section-head h2,
  .cv-section-head h2, .ap-section-head h2 {
    font-size: clamp(26px, 7vw, 34px) !important;
  }

  /* Hero h1 plus petit */
  .ael-hero h1, .fr-hero h1, .ag-hero h1, .sv-hero h1,
  .pa-hero h1, .av-hero h1, .cv-hero h1, .ap-hero h1 {
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.1 !important;
  }
}

/* ══════ 3. Mobile strict (< 768px) ══════ */
@media (max-width: 768px) {
  /* Tout en 1 colonne */
  .pu-programs-grid, .pa-programs-grid, .ag-cards, .ag-afr, .pa-why,
  .pa-process, .fr-guarantees, .ael-guarantees, .sv-help, .cv-steps,
  .cv-usecases, .av-values, .ael-steps, .fr-steps, .pu-help,
  .ag-slots, .ael-custom-row, .ael-calc-grid, .fr-sim-grid, .ag-grid,
  .ael-form-row, .fr-form-row, .av-form-row, .pa-form-row, .in-row,
  .pu-compose, .ael-addr-grid, .in-roles {
    grid-template-columns: 1fr !important;
  }

  /* Slots horaires 3 col */
  .ag-slots { grid-template-columns: repeat(3, 1fr) !important; }

  /* Champs bouton stacks */
  .ael-custom-row, .sv-search, .calc-custom-row {
    flex-direction: column !important;
  }
  .sv-search input, .sv-search button,
  .ael-custom-row input, .ael-custom-row button {
    width: 100% !important;
  }

  /* Nav brand logo responsive */
  nav, #ap-navbar, .ed-nav, .rl-nav {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Btn Retour nav : masque le texte */
  .btn-nav-back span, .ap-btn-nav-back span {
    display: none !important;
  }
  .btn-nav-back, .ap-btn-nav-back {
    padding: 8px 10px !important;
  }

  /* Tarif blocks padding reduit */
  .ael-tarif, .fr-tarif, .cv-comp-card, .ap-vision-card {
    padding: 28px 22px !important;
  }
  .ael-tarif-price, .fr-tarif-price, .cv-comp-price, .ap-vision-year {
    font-size: 48px !important;
  }

  /* Simulateurs sliders full width */
  .ael-calc-slider, .fr-sim-slider { max-width: 100%; }
  .ael-calc-result-value, .fr-sim-result-value { font-size: 36px !important; }

  /* Modal padding reduit */
  .pa-contact, .av-form-wrap, .fr-form-card, .ag-resa-body, .in-card,
  .pu-modal-card {
    padding: 24px 18px !important;
  }

  /* Tables scroll horizontal */
  .rl-table, .ag-resa table, table {
    font-size: 13px !important;
  }
  .table-wrapper, .ag-map-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Boutons CTA full width */
  .ael-hero-cta a, .fr-hero-cta a, .ag-hero-cta a, .sv-hero-cta a,
  .pa-hero-cta a, .av-hero-cta a, .cv-hero-cta a, .ap-hero-cta a,
  .fr-cta-row a, .ag-cta-row a, .sv-cta-row a, .pu-cta-row a,
  .ael-cta-row a, .av-cta-row a, .pa-cta-row a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Stat cards en carte pleine */
  .ap-stats-inner, .stats-inner {
    grid-template-columns: 1fr 1fr !important;
    padding: 22px 16px !important;
    gap: 14px !important;
  }
  .ap-stat, .stat {
    border-right: none !important;
    padding: 10px !important;
  }
  .ap-stat-val { font-size: 32px !important; }

  /* Calendrier flottant mobile */
  .cal-float {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    bottom: 90px !important;
  }

  /* Chatbot flottant */
  #chatbot-btn { right: 16px !important; bottom: 20px !important; }
  #chatbot-window {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 90px !important;
    max-height: calc(100vh - 110px) !important;
  }

  /* Bouton WhatsApp */
  #ap-whatsapp {
    bottom: 20px !important;
    left: 12px !important;
    width: 48px !important;
    height: 48px !important;
  }
  #ap-whatsapp .ap-wa-label { display: none !important; }

  /* Login cards */
  .card, .rl-card, .in-card {
    padding: 28px 22px !important;
  }

  /* Dashboard relais KPIs stack */
  .rl-kpis { grid-template-columns: 1fr !important; }
  .rl-kpi.money { flex-direction: column !important; align-items: stretch !important; }
  .rl-kpi-next { text-align: left !important; min-width: 0 !important; }
  .rl-nav { flex-wrap: wrap !important; gap: 10px !important; padding: 12px 16px !important; }
  .rl-nav-info h1 { font-size: 15px !important; }
  .rl-nav-info span { font-size: 10.5px !important; }

  /* Timeline mobile */
  .ap-timeline, .timeline { padding-left: 26px !important; }
  .ap-tl-item::before, .step::before { left: -26px !important; width: 16px !important; height: 16px !important; }

  /* Footer grid */
  .footer-grid, .ed-footer-grid, .ael-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom, .ed-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* Container padding mobile */
  .container, .ed-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero card stat (En bref) : devient plein largeur en dessous */
  .ael-hero-stat, .fr-hero-stat, .sv-hero-stat, .cv-hero-stat {
    padding: 20px !important;
  }
  .ael-hero-stat-row, .fr-hero-stat-row,
  .sv-hero-stat-row, .cv-hero-stat-row {
    font-size: 13px !important;
  }

  /* Prevent overly large text */
  h1, h2, h3 {
    word-break: break-word;
  }
}

/* ══════ 4. Tres petits ecrans (< 400px) ══════ */
@media (max-width: 400px) {
  .ag-slots, .ag-slots { grid-template-columns: repeat(2, 1fr) !important; }
  .cv-dest-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ap-timeline { padding-left: 22px !important; }
  .pa-prog-kpi, .pa-prog-body { padding: 20px !important; }
  .ael-tarif h3, .fr-tarif h3 { font-size: 20px !important; }
}

/* ══════ 5. Assure que les modals ne debordent jamais ══════ */
.pu-modal, .modal-overlay, .modal {
  padding: 16px !important;
}
.pu-modal-card, .modal-content {
  max-width: 100% !important;
  max-height: 92vh !important;
  overflow-y: auto;
}

/* ══════ 6. Empeche le tap-highlight blue sur tous les elements cliquables ══════ */
a, button {
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.15);
}

/* ══════ 7. Inputs iOS: empeche zoom auto (font >= 16px) ══════ */
@media (max-width: 768px) {
  input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),
  select, textarea {
    font-size: 16px !important;
  }
}