/* ==========================================================================
   responsive.css — Mise en page adaptative (téléphones, tablettes, ordinateurs)
   Chargée en fin de <head> sur toutes les pages.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------ Tablettes ------------------------------- */
@media (max-width: 1024px) {
  /* Fenêtres modales de l'application */
  .ret1 {
    width: 92% !important;
    margin-left: 4% !important;
  }

  #myInput {
    width: 85% !important;
    margin-left: 2% !important;
  }

  .tete {
    margin-left: 0 !important;
  }
}

/* ------------------- Mobiles et petites tablettes ----------------------- */
@media (max-width: 768px) {
  /* Tableaux de données : défilement horizontal au lieu de déformer la page */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  th, td {
    font-size: 14px !important;
    padding: 6px !important;
    white-space: nowrap;
  }

  h1 { font-size: 1.4em !important; }
  h2 { font-size: 1.2em !important; }

  /* Taille min. 16px : évite le zoom automatique sur iOS */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Boutons adaptés au tactile (min. ~44px de haut) */
  button, .btn, .but, .commande {
    min-height: 44px;
    font-size: 16px !important;
  }

  .ret1 {
    width: 96% !important;
    margin-left: 2% !important;
    height: 92% !important;
  }

  form {
    max-width: 100% !important;
  }
}