/*
 * Confort mobile — n'ajoute que sous petit ecran, ne retire rien ailleurs.
 *
 * Les gabarits datent de 2014 : tableaux non prevus pour le telephone, pied de
 * page aux marges negatives non contenues, interrupteur de plafond trop large.
 * Cette feuille corrige sans toucher aux gabarits.
 */
@media (max-width: 767px) {

  /* Aucune image ne pousse la page au-dela de l'ecran. */
  img, embed, object, video, svg { max-width: 100%; height: auto; }

  /* Les lignes Bootstrap portent des marges negatives de -15px destinees a
     etre absorbees par le padding d'un conteneur. Plusieurs gabarits imbriquent
     des .row sans conteneur intermediaire -> debordement. Sur mobile, ou les
     colonnes s'empilent, on neutralise ces marges et on pose un padding modere
     et uniforme sur les colonnes. */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; }
  .custom-footer, .bs-docs-footer { margin-left: 0 !important; margin-right: 0 !important; }

  /* L'interrupteur de plafond (bootstrap-toggle) se rendait a plus de 600px. */
  .toggle.btn, .toggle-group, #span-modify-plafond, #toggle-plafond { max-width: 100% !important; }
  #span-modify-plafond { float: none !important; display: inline-block; }

  /* Le bloc telephone du pied (#hotline) portait une largeur fixe de 300px qui
     debordait l'ecran. On le recentre et on le laisse s'adapter. */
  #hotline, #hotline > div, #hotline h5 { width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center; }

  /* Longues references, e-mails, codes : on coupe plutot que de pousser. */
  td, th, .panel-body, .breadcrumb, .alert, .facture-vignette, .vignette-projet { word-wrap: break-word; overflow-wrap: break-word; }

  /* Les tableaux defilent horizontalement dans leur cadre au lieu de deborder :
     ceux equipes par DataTables via leur enveloppe, les autres via la classe
     table-responsive posee par mobile.js. */
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive { border: 0; margin-bottom: 0; }

  /* Un peu plus d'air sur les boutons, cibles tactiles trop petites en 2014. */
  .btn { padding-top: 8px; padding-bottom: 8px; }

  /* Filet de securite : la page entiere ne defile jamais lateralement. Les
     tableaux, eux, defilent dans leur propre cadre (regles ci-dessus), donc
     rien d'utile n'est masque. */
  html, body { overflow-x: hidden; max-width: 100%; }
}