/*
 * Ajustements pour petits écrans.
 *
 * Le thème d'administration est prévu pour un bureau : sur un téléphone, le logo déborde sur
 * le contenu, la barre « Bienvenue / Se déconnecter » chevauche le reste, et les marges
 * mangent un quart de la largeur utile. Ces règles ne touchent qu'aux écrans étroits — le
 * rendu sur ordinateur est inchangé.
 */

@media only screen and (max-width: 767px) {

   /* --- En-tête ------------------------------------------------------------------------ */

   /* Le logo était affiché en pleine largeur et passait par-dessus le premier bloc. */
   .header-navbar .navbar-wrapper .navbar-logo img {
      max-height: 40px;
      width: auto;
      margin-top: 0 !important;
   }

   .header-navbar .navbar-wrapper .navbar-logo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      height: auto;
      min-height: 52px;
      width: 100%;
   }

   /* « Bienvenue … » et « Se déconnecter » : une ligne à eux, sans recouvrement. */
   .header-navbar .navbar-wrapper > span {
      display: block;
      padding: 6px 12px 0;
      font-size: 12px;
      line-height: 1.3;
   }

   .header-navbar .navbar-wrapper > a.float-right {
      float: none !important;
      display: inline-block;
      padding: 0 12px 6px;
      font-size: 12px;
   }

   .header-navbar { height: auto; position: relative; }

   /* --- Largeur utile ------------------------------------------------------------------- */

   /* Les marges du thème laissaient à peine 70 % de l'écran au contenu. */
   .main-body .page-wrapper { padding: 8px !important; }
   .pcoded-inner-content, .pcoded-content { padding: 0 !important; }
   .card { margin-bottom: 14px; }
   .card .card-header,
   .card .card-block,
   .card .card-block-big { padding: 14px !important; }

   /* Le bloc de page réservait 34 px de marge de chaque côté : un neuvième de l'écran
      perdu, alors que les tableaux manquent déjà de place. */
   .page-block { padding: 14px 10px !important; }

   /* La photo de fond passait sous les cartes translucides et rendait le texte difficile à
      lire ; elle est atténuée sur petit écran, où le contraste prime. */
   .page-block.full-bg {
      background-image: linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)), url("/img/login_fond.png");
      background-size: cover;
   }

   /* --- Tableaux ------------------------------------------------------------------------ */

   /* Un tableau de gestion ne rentre pas dans 390 px : il défile, et on le voit. */
   .table-responsive {
      -webkit-overflow-scrolling: touch;
      overflow-x: auto;
      background:
         linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
         linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
         radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left / 10px 100% no-repeat,
         radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right / 10px 100% no-repeat;
      background-attachment: local, local, scroll, scroll;
   }
   .table td, .table th { white-space: nowrap; }

   /* L'écran des mails fixe des colonnes en pourcentage : sur 310 px la colonne « Mail »
      tombe à 140 px et les mots se coupent au milieu. On rend la largeur au contenu et on
      fait défiler le tableau, comme les autres listes. */
   .card-block.table-border-style { overflow-x: auto; -webkit-overflow-scrolling: touch; }
   .mail-table { table-layout: auto !important; min-width: 560px; }
   .mail-table th, .mail-table td { width: auto !important; }

   /* Les tuiles de l'espace colocataire portent du texte blanc sur des pastels à demi
      transparents : lisible sur un grand écran, limite au soleil sur un téléphone. */
   .web-num-card .text-white h3,
   .web-num-card .text-white h4 { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

   /* --- Menu principal -------------------------------------------------------------------- */

   /* Sur téléphone le thème bascule `vertical-nav-type` de `offcanvas` à `expanded` quand on
      touche le bouton hamburger, mais aucune règle ne ramène le panneau dans l'écran : il
      restait à gauche hors champ et le menu était donc inaccessible sur mobile. */
   .pcoded[pcoded-device-type="phone"][vertical-nav-type="expanded"] .pcoded-navbar {
      position: fixed !important;
      top: 0 !important;
      height: 100% !important;
      z-index: 1031 !important;
      /* Le thème sort le panneau de l'écran par une marge gauche de -250 px que rien ne
         remet à zéro à l'ouverture ; on le ramène au bord gauche. */
      left: 0 !important;
      margin-left: 0 !important;
      width: 250px !important;
      opacity: 1 !important;
      visibility: visible !important;
      box-shadow: 2px 0 12px rgba(0, 0, 0, .35);
   }
   .pcoded[pcoded-device-type="phone"][vertical-nav-type="expanded"] .pcoded-navbar .nav-list,
   .pcoded[pcoded-device-type="phone"][vertical-nav-type="expanded"] .pcoded-navbar .main-menu {
      height: 100%;
      overflow-y: auto;
   }

   /* --- Lecture et signature du bail ------------------------------------------------------ */

   /* Le contrat est mis en page pour du A4 : les images de signature et le tableau qui les
      porte ne tiennent pas dans la largeur d'un téléphone. On les laisse retomber les uns
      sous les autres plutôt que d'imposer un défilement horizontal au lecteur. */
   #lectureBail { overflow-x: auto; }
   #lectureBail img { max-width: 100% !important; height: auto; }
   #lectureBail table.signatures,
   #lectureBail table.signatures tbody,
   #lectureBail table.signatures tr,
   #lectureBail table.signatures td { display: block; width: 100% !important; white-space: normal !important; }

   /* Le canevas garde ses proportions : sans cela le tracé est étiré en hauteur, et une
      signature étirée ne ressemble plus à celle qu'on vient de faire. */
   #signaturePad { width: 100%; height: auto; }

   /* --- Actions ------------------------------------------------------------------------- */

   /* Les boutons se chevauchaient faute de place ; ils s'alignent et gardent une cible
      confortable au doigt. */
   .card-header .btn:not(.dropdown-item),
   .card-block .btn:not(.dropdown-item),
   td .btn:not(.dropdown-item),
   .btn-sm:not(.dropdown-item),
   /* Certains boutons du thème portent `btn-primary` sans `btn` : ils restaient hauts de
      27 px, sous le seuil confortable au doigt. */
   button[class*="btn-"]:not(.dropdown-item) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 38px;
      margin: 0 4px 6px 0;
      white-space: nowrap;
   }

   /* Les entrées d'un menu « Actions » portent aussi la classe `btn` : mises en ligne comme
      les autres boutons, elles se rangeaient côte à côte et sortaient de la boîte du menu —
      une seule restait visible. Elles restent donc empilées, sur toute la largeur. */
   .dropdown-menu .dropdown-item {
      display: block;
      width: 100%;
      text-align: left;
      min-height: 44px;
      line-height: 1.7;
      margin: 0;
      white-space: normal;
   }
   .dropdown-menu form {
      margin: 0;
   }

   .card-header .float-right,
   .card-block .float-right { float: none !important; display: inline-block; }

   /* Les champs à moins de 16 px déclenchent un zoom automatique sur iOS à la saisie. */
   input, select, textarea, .form-control { font-size: 16px !important; }

   /* Cases à cocher : 13 px de haut par défaut, c'est trop peu pour un doigt — et sur
      l'écran des mails c'est la commande principale (colonne « Envoi »). */
   input[type="checkbox"], input[type="radio"] {
      width: 22px;
      height: 22px;
      vertical-align: middle;
   }
   td input[type="checkbox"], td input[type="radio"] { margin: 6px 0; }

   /* Le fond photo du thème passait sous les blocs translucides et rendait le texte
      difficile à lire. */
   body { background-image: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)); }
}