/* ============================================================================
   CRM JUST — socle mobile (étape 0 de la refonte téléphone, 17.09.2026)
   Chargé EN FIN DE PAGE par lib/layout.php, après style.css et après les <style> propres à
   chaque page : il a donc le dernier mot sur téléphone. Il ne contient QUE des media queries,
   rien ne change sur un écran ≥ 860 px (desktop intact).
   Trois seuils, les mêmes que style.css : 859 px (menu latéral replié), 640 px (une colonne),
   plus 600 px déjà utilisé pour l'en-tête.
   ============================================================================ */

/* ---------- Téléphone et tablette en portrait (< 860 px) ---------- */
@media (max-width:859px){

  /* 1. Champs de saisie : 16 px minimum, sinon iOS zoome automatiquement au premier tap
        (mesuré le 17.09 : 24 champs sous 16 px sur client_new). Hauteur tactile 44 px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),
  select, textarea{font-size:16px !important;min-height:44px}
  textarea{min-height:88px}
  /* les petits champs de service (aller à la page, quantité) gardent leur largeur, pas leur taille */
  .pg-go input[type=number]{min-height:40px}

  /* 2. Cibles tactiles : un bouton ne descend pas sous 40 px de haut (ceux du menu et de
        l'en-tête : 44 px). Les boutons restent sobres : seule la hauteur change. */
  button,.btn,input[type=submit],input[type=button]{min-height:40px}
  .rte-toolbar button{min-height:36px}

  /* 3. En-tête : burger de 44 px, recherche globale en 16 px sur toute la largeur restante */
  .topbar{gap:8px;padding-left:8px;padding-right:8px}
  .burger{min-width:44px;min-height:44px;font-size:24px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .brand{font-size:18px;flex:0 0 auto}
  .gsearch{max-width:none;margin-left:0;min-width:0}
  #gsearch{font-size:16px !important;height:40px;min-height:40px;padding:0 12px}
  .topbar-bell{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0}

  /* 4. Tiroir (menu complet) : ses dernières entrées ne se cachent plus sous la barre basse */
  .sidenav{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .sidenav a{min-height:44px}

  /* 5. Barre basse par rôle (layout.php) : 5 ou 6 onglets, libellés jamais coupés */
  .tabbar{height:calc(60px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--line)}
  .tabbar a{min-height:44px;min-width:0;padding:0 2px}
  .tabbar a b{font-size:10.5px;white-space:nowrap;letter-spacing:-.01em}
  .tabbar.n6 a b{font-size:10px}
  .tabbar a.on{color:var(--navy)}
  .tabbar a.on span{transform:translateY(-1px)}
  .tabbar a.on b{font-weight:800}
  body.nav-open .tabbar a.tb-plus{color:var(--navy)}
  /* pastille rouge : à côté de l'icône, pas dessus */
  .tabbar .nav-badge{top:3px;left:50%;margin-left:7px;font-size:10px;min-width:16px;height:16px;padding:0 4px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}

/* ---------- Téléphone (< 640 px) ---------- */
@media (max-width:640px){

  /* 6. Composant « tableau → cartes ».
        Une <table class="t-cards"> devient une pile de cartes : une carte = une ligne, chaque
        cellule affiche le libellé de sa colonne (data-label, posé par app.js depuis le <thead>)
        puis sa valeur. Les cellules vides (.t-vide) disparaissent. Sur desktop : tableau normal.
        Opt-in page par page (étape 5) : rien ne change pour un tableau sans la classe. */
  table.t-cards{display:block;width:100%;min-width:0 !important;border-collapse:collapse;border-spacing:0;font-size:14px}
  table.t-cards>thead,table.t-cards>colgroup{display:none}
  table.t-cards>tbody,table.t-cards>tfoot,table.t-cards tr{display:block;width:100%}
  table.t-cards>tbody>tr{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:6px 12px;margin:0 0 10px;box-shadow:var(--shadow)}
  table.t-cards>tbody>tr:hover td{background:transparent}
  table.t-cards td,table.t-cards>tbody th{display:block;position:relative;width:100%;min-width:0;
    padding:5px 0 5px 36% !important;border:0 !important;background:transparent !important;
    text-align:left !important;white-space:normal !important;max-width:none !important;line-height:1.4}
  table.t-cards td+td,table.t-cards>tbody th+td{border-top:1px solid #f1f4f8 !important}
  table.t-cards td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:6px;width:33%;
    font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
    line-height:1.35;white-space:normal;overflow-wrap:anywhere}
  table.t-cards td.t-vide{display:none}
  table.t-cards td:not([data-label]){padding-left:0 !important}
  /* première colonne = le titre de la carte (nom du client, de la police…) */
  table.t-cards td:first-child{font-size:15px;padding-top:7px !important}
  table.t-cards td:first-child a,table.t-cards td:first-child b{font-weight:700}
  /* les cellules d'action (boutons) passent à la ligne, alignées à droite */
  table.t-cards td.t-actions{padding-left:0 !important;text-align:right !important}
  table.t-cards td.t-actions::before{display:none}
  /* un bouton d'envoi dans une carte ne prend pas toute la largeur (style.css le met à 100 %) */
  table.t-cards td button[type=submit]{width:auto;padding:8px 14px;font-size:14px}
  /* un petit formulaire dans une carte (reporter une échéance…) passe à la ligne au lieu de déborder */
  table.t-cards td form{flex-wrap:wrap;max-width:100%}
  table.t-cards td input,table.t-cards td select{max-width:100%;min-width:0}
  /* le conteneur défilant n'a plus lieu d'être : fond et ombre retirés, pas de défilement */
  .tablewrap:has(> table.t-cards),.tbl-wrap:has(> table.t-cards),.twrap:has(> table.t-cards),.org-scroll:has(> table.t-cards){overflow:visible;background:transparent;box-shadow:none;border:0;border-radius:0}

  /* 7. Formulaires (étape 6) : le bouton principal d'un formulaire de page prend toute la largeur,
        48 px, lisible au pouce. Les petits boutons (.sm) et ceux des cartes ne bougent pas. */
  form > .btn.primary[type=submit],form > button.primary[type=submit],
  form .prod-actions .btn.primary,form .form-actions .btn.primary{width:100%;min-height:48px;font-size:16px}
}

/* ---------- Hors media query, à dessein : le bouton « 📷 Photo » n'existe que sur un appareil
   tactile (app.js le crée après le champ fichier), y compris une tablette en paysage ---------- */
.btn-photo{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;margin:6px 8px 6px 0;border:1px solid #1e8a4c;
           border-radius:10px;background:#eafaf0;color:#1a6b3c;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.btn-photo-info{font-size:12.5px;color:#1a6b3c}