/* ═══════════════════════════════════════════════════════════
   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.
     .fr-sim (simulateur) gardait 36px de padding sur mobile : c'etait le
     conteneur le plus etroit de la page (278px utiles), ce qui aggravait la
     troncature des options de <select>. Le reduire rend ~36px aux champs. */
  .pa-contact, .av-form-wrap, .fr-form-card, .ag-resa-body, .in-card,
  .pu-modal-card, .fr-sim {
    padding: 24px 18px !important;
  }

  /* min-width:240px faisait passer l'emoji (::before) seul sur sa ligne. */
  .fr-redirect-card-text { min-width: 0 !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(5, 150, 105, 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;
  }
}

/* ══════ 7 bis. Selects : look unifié + optgroup lisibles ══════
   Auparavant ce bloc ne ciblait que [data-africa]/[data-regions-fr] : dans un
   MEME formulaire, ces selects avaient un chevron vert custom (padding-right 40)
   pendant que les autres (ex. #fret-type) gardaient la flèche brute de l'OS
   (padding-right 16) — deux styles, deux hauteurs. D'où le "pas fini". On unifie
   sur TOUS les <select>.
   color-scheme:dark est le SEUL levier qui agit sur mobile : iOS/Android ignorent
   le style des <option>/<optgroup> (picker natif), mais respectent color-scheme —
   sans lui, la liste d'options s'ouvre en BLANC sur un site sombre. */
/* NB : color-scheme:dark est applique PLUS BAS, uniquement aux selects poses sur
   une surface sombre. Globalement, il rendait le fond natif du select sombre sur
   les pages a theme CLAIR (devis.html, newsletter.html : color:#1F2937 sans
   background) -> texte fonce sur fond fonce, illisible. Le chevron, lui, est sans
   danger partout. */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2310B981' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  text-overflow: ellipsis;
}
/* Panneau d'options natif en sombre — SEULEMENT sur les selects a fond sombre.
   C'est le seul levier qui agit sur mobile (iOS/Android ignorent le style des
   <option>/<optgroup>) : sans lui la liste s'ouvre en BLANC sur un site sombre. */
select[data-africa], select[data-regions-fr],
.fr-form-select, .fr-sim-field select,
.dashboard-main select, .rl-main select,
/* Pages de prise de rendez-vous : leurs selects sont sur fond sombre et
   n’etaient pas couverts — la liste d’options s’ouvrait en blanc. */
.ag-field select, .form-group select {
  color-scheme: dark;
}

select[data-africa] optgroup, select[data-regions-fr] optgroup {
  background: #0D1117;
  color: #059669;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 8px 0;
}
select[data-africa] option, select[data-regions-fr] option {
  background: #161B22;
  color: #E5E7EB;
  padding: 10px;
  font-weight: 500;
}
select[data-africa] option:checked, select[data-regions-fr] option:checked {
  background: linear-gradient(90deg, rgba(5, 150, 105,0.2), rgba(5, 150, 105,0.05));
  color: #fff;
}

/* ══════ 8. Pages avec .wrap (FAQ, objets-interdits, guide, assurance, sav, carrieres, documents-douane) ══════ */
@media (max-width: 768px) {
  .wrap {
    padding-top: 90px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 60px !important;
  }
  .wrap .hero h1 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }
  .wrap .hero p {
    font-size: 15px !important;
  }
}

/* ══════ 9. FAQ : nav-tabs scrollable horizontal ══════ */
@media (max-width: 600px) {
  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ══════ 10. Guide d'emballage: steps en colonne sur mobile ══════ */
@media (max-width: 600px) {
  .step {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 20px !important;
  }
  .step-num {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .dim-table th, .dim-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ══════ 11. Documents douane: form-grid 1 col + items resp ══════ */
@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .items-head, .item {
    grid-template-columns: 1fr 60px 80px 90px 36px !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .item input { font-size: 14px !important; padding: 7px 8px !important; }
  .preview { padding: 24px 16px !important; }
  .preview .two-col { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ══════ 12. Carrieres: job-h en colonne ══════ */
@media (max-width: 600px) {
  .job-h { flex-direction: column !important; gap: 8px !important; }
  .job { padding: 18px !important; }
  .values { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .val { padding: 16px !important; }
}

/* ══════ 13. Assurance : plans en colonne ══════ */
@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr !important; }
  .plan { padding: 22px !important; }
}

/* ══════ 14. SAV : type-grid + form responsive ══════ */
@media (max-width: 600px) {
  .type-grid { grid-template-columns: 1fr 1fr !important; }
  .row { grid-template-columns: 1fr !important; }
  .form { padding: 24px 18px !important; }
}

/* ══════ 15. Dashboard admin africapost: layout responsive ══════ */
@media (max-width: 900px) {
  .sidebar, aside.sidebar, #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  .sidebar.open, aside.sidebar.open, #sidebar.open {
    transform: translateX(0);
  }
  /* La sidebar est masquée dès 900px : on doit donc afficher le bouton qui la
     rouvre ET retirer la marge gauche, sinon entre 769 et 900px la navigation
     dashboard devient inaccessible (sidebar cachée, aucun toggle). */
  .sidebar-toggle { display: block !important; }
  .dashboard-main { margin-left: 0 !important; padding-top: 60px !important; }
}

/* Saisie de code OTP : 6 cases ne doivent pas déborder sur très petit écran */
@media (max-width: 380px) {
  .code-input { gap: 6px !important; }
  .code-input input { width: 40px !important; height: 48px !important; font-size: 1.2rem !important; }
}

/* ══════ 16. Dashboard messages admin: responsive ══════ */
@media (max-width: 768px) {
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat { padding: 14px !important; }
  .stat .val { font-size: 22px !important; }
  .msg-actions { gap: 6px !important; }
  .btn-sm { padding: 6px 10px !important; font-size: 11px !important; }
  .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .filter { flex-shrink: 0; white-space: nowrap; }
}

/* ══════ 17. Banniere navbar mobile (header.js) : padding ajuste ══════ */
@media (max-width: 600px) {
  body { padding-top: 60px !important; }
  nav#ap-navbar { height: 60px !important; padding: 0 16px !important; }
}

/* ══════ 18. Touch targets — Apple HIG 44x44 / Material 48x48 ══════ */
/* Applique a tous les elements interactifs sur mobile/tablette pour eviter touch fail */
@media (max-width: 900px) {
  button:not(.no-touch-min):not([class*="ap-tl-"]):not([class*="step-num"]),
  a.btn-primary, a.btn-ghost, a.btn-wa,
  a.btn, button.btn,
  .nav-tab, .filter,
  input[type="submit"], input[type="button"], input[type="reset"],
  .ap-link-btn, .sv-link-btn, .ed-btn, .rl-btn,
  [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Inputs/select : hauteur minimale confortable */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select, textarea {
    min-height: 44px !important;
  }
  /* Liens dans listes (cards cliquables) : padding interne minimum */
  .sv-list-card, .ap-card-link, .ed-card-link {
    min-height: 88px;
  }
  /* Espacement minimum entre 2 actions cote a cote */
  .sv-cta-row, .ael-hero-cta, .fr-hero-cta, .ag-hero-cta,
  .pa-hero-cta, .av-hero-cta, .cv-hero-cta, .ap-hero-cta,
  .fr-cta-row, .ag-cta-row, .pu-cta-row, .ael-cta-row,
  .av-cta-row, .pa-cta-row {
    gap: 12px !important;
  }
}

/* ══════ 19. Anti debordement horizontal — securite supplementaire ══════ */
/* Tables, codes, et longues references ne doivent jamais creer un scroll horizontal global */
@media (max-width: 768px) {
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  /* Containers globaux : largeur safe */
  .sv-main, .ap-main, .ed-main, .rl-main, .container, main, section {
    max-width: 100vw;
    overflow-x: clip;
  }
  /* Empeche les longs strings (ref, token) de tout casser */
  .sv-list-card .ref, .sv-result-header h2 {
    overflow-wrap: anywhere;
  }
}

/* ══════ 20. GARDE-FOU STRUCTUREL — "cartes coupées" ══════
   Cause racine recurrente sur le site : un enfant de grille/flex a par defaut
   min-width:auto, donc il NE PEUT PAS descendre sous la largeur de son contenu.
   Un contenu large (un <select> dont l'option la plus longue fait 300px+, un mot
   insecable, une <table>, un badge) elargit alors sa colonne, la grille deborde
   du viewport et les cartes apparaissent coupees.
   min-width:0 leve ce plancher et laisse la grille s'adapter. C'est sans risque :
   la regle n'autorise QUE le retrecissement, elle n'impose aucune taille. */
@media (max-width: 900px) {
  [class*="grid"] > *,
  [class*="cards"] > *,
  [class*="cols"] > * {
    min-width: 0;
  }

  /* Les champs de formulaire sont le declencheur n°1 (un <select> ne retrecit
     jamais sous son option la plus longue). */
  select, input, textarea {
    max-width: 100%;
    min-width: 0;
  }
  select {
    text-overflow: ellipsis;
  }

  /* Un titre/mot long (nom de marchand, reference, URL) ne doit pas elargir sa carte. */
  h1, h2, h3, h4 {
    overflow-wrap: anywhere;
  }
}

/* ══════ 21. ANCRES SOUS LE HEADER FIXE ══════
   Le header (topbar 30px + navbar 60px) est en position:fixed. Sans
   scroll-padding, une ancre (#simulateur, #demande, #tarifs...) amene la section
   a y=0, donc SOUS le header : son titre est masque et la section parait coupee.
   scroll-padding-top decale le point d'arrivee du scroll de la hauteur du header. */
html {
  scroll-padding-top: 100px;
}
@media (min-width: 901px) {
  html { scroll-padding-top: 110px; }
}

/* ══════ 22. FILET — GRILLES INLINE 3+ COLONNES ══════
   Anti-pattern recurrent du site : des <div style="display:grid;
   grid-template-columns:repeat(4,1fr)"> SANS CLASSE. Un style inline l'emporte
   sur toute regle @media, ces grilles restaient donc a 3/4/5 colonnes sur mobile
   (~85px par carte a 390px) et les cartes etaient ecrasees.
   Seul un !important sur un selecteur d'attribut peut les rattraper.
   Concerne : index.html (badges de confiance, infos), service-marketplace,
   service-regie, service-routier. */
@media (max-width: 700px) {
  [style*="repeat(3"], [style*="repeat(4"],
  [style*="repeat(5"], [style*="repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 430px) {
  [style*="repeat(3"], [style*="repeat(4"],
  [style*="repeat(5"], [style*="repeat(6"] {
    grid-template-columns: 1fr !important;
  }
}