/* =====================================================================
   YES AFRICA — Rendu adaptatif partagé (PC · tablette · téléphone simple)
   Chargé après le <style> de chaque page ; media queries + !important
   pour un rendu fiable quel que soit l'appareil.
   ===================================================================== */

/* ---------- TABLETTE (≥ 640px) : on profite de la largeur ---------- */
@media (min-width: 640px){
  .grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .tiles { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- PC / GRAND ÉCRAN (≥ 1024px) ---------- */
@media (min-width: 1024px){
  .grid  { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
  .tiles { grid-template-columns: repeat(4, 1fr) !important; }
  .cards { grid-template-columns: 1fr 1fr !important; }
  .kpis  { grid-template-columns: repeat(4, 1fr) !important; }
  body   { font-size: 15px; }
}

/* ---------- TÉLÉPHONE CLASSIQUE / PETIT ÉCRAN (≤ 380px) ---------- */
@media (max-width: 380px){
  body   { font-size: 14px !important; }
  main   { padding: 12px !important; }
  header { padding-left: 12px !important; padding-right: 12px !important; }
  .grid  { gap: 10px !important; }
  .act   { min-height: 108px !important; padding: 14px 12px !important; border-radius: 15px !important; }
  .act .ic { font-size: 30px !important; }
  .act .lb { font-size: 14px !important; }
  .act .st { font-size: 10px !important; }
  .act .wm { font-size: 72px !important; }
  .tiles .ic, .tile .ic { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .k .v  { font-size: 18px !important; }
  .card h2, .card h3 { font-size: 12px !important; }
}

/* ---------- TRÈS PETIT (≤ 340px) : anti-débordement ---------- */
@media (max-width: 340px){
  .row > div { min-width: 0 !important; }
  .tiles { grid-template-columns: 1fr 1fr !important; }
  .k .v  { font-size: 16px !important; }
}

/* ---------- Confort tactile universel ---------- */
button, .act, .tab, .chip, .addrow, .btn { touch-action: manipulation; }
select, input, textarea { max-width: 100%; }
img { max-width: 100%; }