/* ============================================================
   mobile-polish.css — Africa Post (v2 conservateur)
   Règles strictement mobile (@media ≤ 768px uniquement).
   Zéro règle globale pour éviter les effets de bord.

   CE FICHIER EST CELUI QUE LE SITE CHARGE. Le modifier suffit.

   Jusqu'au 2026-08-30 les pages chargeaient une copie minifiée
   maintenue à la main, et ce fichier-ci n'était lu par personne :
   on pouvait l'éditer sans que rien ne change à l'écran, sans la
   moindre erreur pour le signaler. La copie a été supprimée — il
   n'y a plus qu'un seul fichier, et c'est celui-ci. Les 800 octets
   économisés par la minification ne valaient pas ce piège.
   ============================================================ */

@media (max-width: 768px) {

  /* Inputs 16px — empêche le zoom auto iOS et améliore la lisibilité
     Android. Scopé aux inputs texte uniquement pour ne pas casser
     les checkbox/radio. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Touch target 48x48 — sur les boutons d'action AP. */
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-green,
  .btn-orange,
  .btn-submit,
  .btn-action,
  .btn-payer,
  .btn-rdv,
  .btn-devis {
    min-height: 48px;
  }

  /* Feedback tactile + suppression délai 300ms. Tap-highlight vert AP. */
  a, button, [role="button"], input[type="submit"], input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(5, 150, 105, 0.18);
  }

  /* Images responsives — pas d'overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES TABLEAUX NE FONT PLUS PARTIR LA PAGE DE TRAVERS — 2026-09-04

   Mesure du jour : six pages publiques portent un tableau et AUCUN conteneur
   scrollable. Le pire est le comparatif transporteurs de
   `blog-dhl-vs-africa-post.html` — CINQ colonnes (transporteur, prix, délai,
   dédouanement, couverture). Sur un téléphone de 375 px, ce n'est pas le
   tableau qui déborde : c'est le BODY qui se met à défiler horizontalement,
   et tout le reste de la page glisse avec lui. L'en-tête part, le texte se
   décale, et le lecteur croit la page cassée.

   Pourquoi ici et pas dans chaque page : le défaut est le même partout, et il
   reviendra sur la prochaine page qui porte un tableau. Une correction par
   page, c'est six corrections aujourd'hui et une oubliée demain.

   `display: block` sur un `<table>` engendre une boîte de tableau anonyme :
   l'alignement des colonnes est conservé, et l'élément devient un conteneur
   de défilement autonome. C'est le motif employé par les rendus Markdown de
   GitHub, pour exactement cette raison.

   Pas de `white-space: nowrap` : il forcerait chaque cellule sur une ligne et
   ferait déborder un tableau qui, autrement, tiendrait très bien.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Une colonne trop étroite rend le tableau illisible avant de le rendre
     défilable. On donne un plancher aux cellules pour que le défilement soit
     un vrai défilement, pas un empilement de mots coupés. */
  th, td {
    min-width: 8ch;
  }
}