/* ============================================================
   Atlas Connect · Filet de sécurité très petit écran (320–480 px)
   ------------------------------------------------------------
   Passe responsive ciblée (audit §13/§17). Le socle responsive
   des 3 apps est déjà solide (drawer + bottom-nav, grilles → 1
   colonne ≤980, tables → cartes ≤768, Dispatch 768/480). Ce
   fichier n'ajoute QUE des garde-fous conservateurs contre les
   deux causes de débordement horizontal qu'un audit statique ne
   peut pas écarter sur 40+ vues :
     1) chaînes insécables (e-mails, réf., URL, IBAN) dans les
        cartes / cellules / bulles de message ;
     2) médias sans contrainte de largeur.
   Aucune règle ne modifie la mise en page aux largeurs normales.
   ============================================================ */
@media (max-width: 480px) {

  /* 1 · Médias jamais plus larges que leur conteneur */
  img, video, canvas, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }
  /* (les <svg> d'icônes gardent leur taille : on ne les touche pas) */

  /* 2 · Chaînes longues insécables : coupe plutôt que déborder.
     Ciblé sur les surfaces de contenu, pas sur les libellés courts. */
  .card p, .card h3, .card h4,
  .tbl td, .lcard p, .lcard h4,
  .m-bubble, .mg-bubble, .mga-bubble,
  .ac-blk p, .ac-tl-row p,
  .kpi-sub, .t-name, .t-sub {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 3 · Repli scroll pour toute table qui n'aurait pas été
     convertie en cartes (garde-fou ; la conversion ≤768 gagne
     déjà via !important quand elle s'applique). */
  .tbl-wrap { max-width: 100%; }

  /* 4 · Rien ne force la page à défiler horizontalement à cause
     d'un enfant décoratif hors-flux mal borné. */
  .card, .lcard, .kpi, .sec { max-width: 100%; }
}