/* mobile.css — lot N-mobile (décision X88, 15/10/2026) : le logiciel s'utilise au doigt, sur téléphone (390 px) et sur iPad
   (820 px portrait, 1024 px paysage), pas seulement sur ordinateur. Chargé EN DERNIER (après tous les autres .css) : il corrige
   ce que les écrans ont de trop étroit ou de trop petit, sans changer leur style (mêmes variables que app.css : la palette de
   l'artisan, L17, s'applique d'elle-même).

   Règles tenues partout (contrôle : `node scripts/controle-mobile.mjs`, voir docs/MOBILE.md) :
   1. aucun défilement horizontal de la page ; un tableau large défile dans SON conteneur ;
   2. cibles tactiles de 44 px au moins (--cible) ;
   3. aucune action qui n'existe qu'au survol (un :hover n'ajoute que de la couleur) ;
   4. champs de formulaire à 16 px au moins (sous 16 px, iOS zoome la page au toucher) ;
   5. menus et dialogues dans l'écran, jamais sous la barre du bas (env(safe-area-inset-*)) ;
   6. clavier numérique (inputmode="decimal" ou "numeric") sur les quantités, prix et pourcentages. */

/* ---------- Tactile : pas de zoom au double toucher, pas de délai ---------- */
a, button, input, select, textarea, summary, label, [role="button"] { touch-action: manipulation; }

/* ---------- Champs : 16 px au moins sur téléphone et tablette (iOS zoomerait sinon) ---------- */
@media (max-width: 1024px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px !important; }
  :root { --hc: 48px; }   /* cellule de tableau éditable : 44 px de champ + 2 × 2 px de marge */
  .btn, .btn.petit, .seg button, .chip { min-height: var(--cible); }
  .btn.icone { min-width: var(--cible); }
  /* Champ « fichier » visible (le champ masqué dans un <label class="btn"> garde son style en ligne et n'est pas touché). */
  input[type="file"]:not([style]) { min-height: var(--cible); padding: 6px 8px; }
  input[type="file"]:not([style])::file-selector-button { min-height: 32px; margin-right: 10px; }
  summary { min-height: var(--cible); padding-block: 10px; box-sizing: border-box; cursor: pointer; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  .nav-sous .nav-sous-lien { min-height: var(--cible); }
  a.retour, .ch-titre a.retour, .etat-tete .retour { display: inline-flex; align-items: center; min-height: var(--cible); min-width: var(--cible); }
  .t-liens a, .rdvl-lien a { display: inline-flex; align-items: center; min-height: var(--cible); }
  .rdvl-case, .rdvl-envoi { min-height: var(--cible); }
  .pl-chantiers .chip > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-chantiers .chip .n { flex: none; white-space: nowrap; }
  input:not([type]), input[type="time"], input[type="month"], input[type="datetime-local"] { min-height: var(--cible); }
  .ia-pagination { flex-wrap: wrap; }
  table.devis thead th, .th-plier { height: var(--cible); }
  .bascule { width: var(--cible); }
  .chap-in .tout input { min-height: var(--cible); }
  a[href^="mailto:"], a[href^="tel:"], dd > a, h2 > a, h3 > a { display: inline-flex; align-items: center; min-height: var(--cible); }
  /* Les boutons d'un dialogue restent visibles quand le formulaire défile (dialogue plus haut que l'écran). */
  dialog .pied-dlg { position: sticky; bottom: 0; z-index: 1; margin: 0 -22px; padding: 10px 22px 4px; background: var(--s1); border-top: 1px solid var(--trait); }
  dialog form { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}

/* Lien du client dans l'en-tête d'un chantier : masqué sur téléphone (app.css), cible de 44 px ailleurs. */
@media (min-width: 761px) and (max-width: 1024px) { .ch-titre a.cl { display: inline-flex; align-items: center; min-height: var(--cible); } }

/* Encoches (iPhone en paysage, iPad) : le contenu reste hors des zones coupées. */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.haut { padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: 56px; }
@media (max-width: 760px) { .haut { min-height: 52px; } }
/* fix-parcours-v3 (D3) : sur téléphone, l'en-tête (logo, loupe, micro, « ● Enregistré », cloche) dépassait de ~75 px dès que
   l'indicateur s'affichait (après un envoi) : la page s'élargissait (465 px pour 390) et tout dialogue ouvert alors (« Compléter la
   dépense ») partait à droite, coupé. L'indicateur et le logo rétrécissent (texte coupé, le point reste) ; rien ne dépasse. */
@media (max-width: 760px) {
  .haut { gap: 8px; overflow-x: clip; }
  .haut .logo-mobile { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .haut .indic { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; padding: 0 6px; }
}

/* ---------- Téléphone : barre du bas à six entrées, lisibles et assez larges pour le doigt ----------
   La barre ne garde que Accueil, Contacts, Planning, Chantiers, Mails et Plus ; Tâches, Relances, Mes prix, Actions en attente,
   Notes vocales, Factures… sont dans « Plus » (plus.js), sans libellé qui passe à la ligne. */
@media (max-width: 760px) {
  .bas .nav-lien:not([data-cle="accueil"]):not([data-cle="contacts"]):not([data-cle="planning"]):not([data-cle="chantiers"]):not([data-cle="messages"]):not([data-cle="plus"]) { display: none; }
  .bas .nav-lien { min-width: var(--cible); font-size: 11.5px; line-height: 1.15; }
  .page { padding-bottom: calc(var(--bulle-place, 88px) + 16px); }
  .panneau { padding-bottom: calc(var(--bulle-place, 88px) + 16px); }
}

/* ---------- Devis et états d'avancement : un poste = une carte (téléphone et iPad portrait) ---------- */
@media (max-width: 1100px) {
  /* L'écran du devis défile d'un seul tenant : barre d'outils, postes, puis totaux collés en bas. */
  .ch-corps.plein { overflow-y: auto; overflow-x: hidden; }
  .devis-wrap { flex: none; overflow: visible; min-height: 0; }
  .barre-outils { padding: 10px 12px; gap: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .barre-outils .recherche { grid-column: 1 / -1; flex: none; min-width: 0; max-width: none; }
  .barre-outils > .btn { padding: 0 8px; font-size: 14px; }
  .barre-outils > .chip-actif { grid-column: 1 / -1; }
  .barre-outils > #b-type { grid-column: span 2; } /* N-devis-types : « Enregistrer comme devis type » ne tient pas dans une colonne */
  .pied { position: sticky; bottom: 0; }

  table.devis, table.etat { display: block; min-width: 0; width: 100%; table-layout: auto; }
  table.devis colgroup, table.devis thead, table.etat colgroup, table.etat thead { display: none; }
  table.devis tbody, table.etat tbody { display: block; padding: 6px 12px; }
  table.devis tr, table.etat tr { display: grid; position: relative; margin: 0 0 10px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--trait); border-radius: 10px; }
  table.devis td, table.etat td { display: block; min-width: 0; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; position: static !important; }
  table.devis td.c-in, table.etat td.c-in { padding: 0; }
  tbody.replie tr:not(.ch-ligne) { display: none !important; }
  tr.ligne.active, table.etat tr.mod { background: var(--ligne-active); border-color: var(--or-bord2); }
  table.devis tr.ch-ligne, table.etat tr.chap { background: var(--ligne-chapitre); border-color: var(--trait2); }
  table.devis tr.bandeau { background: #0F1A1F; border-color: rgba(127, 178, 201, .35); display: block; }
  table.devis tr.strip { background: #1A1A1E; border-color: var(--or); display: block; }
  table.devis tr.supp-ligne { border-left: 4px solid var(--supp); }
  table.devis tr.supp-ligne.active { border-left-color: var(--or); }
  table.etat tr.baisse { border-left: 4px solid var(--err); }
  .bandeau-in, .strip-in, .chap-in { position: static; width: auto; padding: 0; }
  .strip-in .sep { display: none; }
  .strip-in .btn, .bandeau-in .btn { min-height: var(--cible); }

  /* Champs d'une carte : visibles comme des champs (plus de « tableur » transparent). */
  table.devis .c-in input, table.devis .c-in textarea { min-height: var(--cible); height: auto; padding: 0 10px; border-color: var(--trait2); background: var(--s2); }
  table.devis .c-in textarea { padding: 10px; }
  table.devis .c-in input.n { text-align: right; }
  table.devis td::before, table.etat td::before { display: block; margin-bottom: 2px; font-size: 12px; line-height: 1.2; color: var(--txt3); }
  table.devis tr.ch-ligne td::before, table.devis tr.n-sous-titre td::before, table.devis tr.n-texte td::before { content: none; }

  /* Ligne de poste : code et total, désignation, puis unité / quantité / prix, puis les trois dimensions. */
  table.devis tr.n-poste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  table.devis tr.n-poste td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: center; }
  table.devis tr.n-poste td:nth-child(9) { grid-column: 2 / 4; grid-row: 1; align-self: center; text-align: right; font-family: var(--titre); font-weight: 700; font-size: 18px; line-height: 1.2; }
  table.devis tr.n-poste td:nth-child(9)::before { content: none; }
  table.devis tr.n-poste td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  table.devis tr.n-poste td:nth-child(3) { grid-column: 1; grid-row: 3; }
  table.devis tr.n-poste td:nth-child(7) { grid-column: 2; grid-row: 3; }
  table.devis tr.n-poste td:nth-child(8) { grid-column: 3; grid-row: 3; }
  table.devis tr.n-poste td:nth-child(4) { grid-column: 1; grid-row: 4; }
  table.devis tr.n-poste td:nth-child(5) { grid-column: 2; grid-row: 4; }
  table.devis tr.n-poste td:nth-child(6) { grid-column: 3; grid-row: 4; }
  /* Les trois dimensions (calcul de la quantité) ne prennent de la place que si elles servent ou si la ligne est touchée. */
  table.devis tr.n-poste:not(.active):not(.a-dim) td:nth-child(4), table.devis tr.n-poste:not(.active):not(.a-dim) td:nth-child(5), table.devis tr.n-poste:not(.active):not(.a-dim) td:nth-child(6) { display: none; }
  table.devis tr.n-poste td:nth-child(3)::before { content: "Unité"; }
  table.devis tr.n-poste td:nth-child(4)::before { content: "Dimension 1"; }
  table.devis tr.n-poste td:nth-child(5)::before { content: "Dimension 2"; }
  table.devis tr.n-poste td:nth-child(6)::before { content: "Dimension 3"; }
  table.devis tr.n-poste td:nth-child(7)::before { content: "Quantité"; }
  table.devis tr.n-poste td:nth-child(8)::before { content: "Prix unitaire HTVA"; }
  table.devis tr.n-poste td:nth-child(1)::before, table.devis tr.n-poste td:nth-child(2)::before { content: none; }
  table.devis td.c-tot { line-height: 1.2; white-space: normal; }
  table.devis td.c-tot.hors { font-size: 14px; }
  table.devis tr.n-poste td:nth-child(2) .alertes { padding: 6px 0 0; }

  /* Chapitre : code et sous-total sur une ligne, titre dessous. */
  table.devis tr.ch-ligne { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  table.devis tr.ch-ligne td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.devis tr.ch-ligne td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: center; padding: 0; line-height: 1.2; }
  table.devis tr.ch-ligne td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  table.devis tr.ch-ligne .ch-code { gap: 4px; }
  /* Texte et sous-titre : code étroit, texte à côté. */
  table.devis tr.n-texte, table.devis tr.n-sous-titre { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }

  /* État d'avancement : code et désignation, curseur de pourcentage, puis les montants. */
  table.etat tr.ligne-e { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  table.etat tr.ligne-e td.cd { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  table.etat tr.ligne-e td.des { grid-column: 1 / -1; grid-row: 2; padding: 0; }
  table.etat tr.ligne-e td.des .txt { display: block; -webkit-line-clamp: unset; overflow: visible; }
  table.etat tr.ligne-e td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
  table.etat tr.ligne-e td:nth-child(3) { grid-column: 1; grid-row: 4; text-align: left; }
  table.etat tr.ligne-e td:nth-child(4) { grid-column: 2; grid-row: 4; text-align: left; }
  table.etat tr.ligne-e td:nth-child(6) { grid-column: 1; grid-row: 5; text-align: left; }
  table.etat tr.ligne-e td:nth-child(7) { grid-column: 2; grid-row: 5; text-align: left; }
  table.etat tr.ligne-e td:nth-child(3)::before { content: "Total du poste"; }
  table.etat tr.ligne-e td:nth-child(4)::before { content: "% précédent"; }
  table.etat tr.ligne-e td:nth-child(5)::before { content: "% cumulé à cet état"; }
  table.etat tr.ligne-e td:nth-child(6)::before { content: "Montant cumulé"; }
  table.etat tr.ligne-e td:nth-child(7)::before { content: "Montant de la période"; }
  table.etat tr.ligne-e td:nth-child(5):has(.ctrl-lecture)::before, table.etat tr.ligne-e td.ctrl-lecture::before { content: "% cumulé"; }
  table.etat tr.ligne-e td.ctrl-lecture { text-align: left; }
  table.etat td.m, table.etat td.prec { padding: 0; font-size: 15px; }
  table.etat td.prec { background: transparent !important; }
  .ctrl { justify-content: flex-start; padding: 2px 0 0; flex-wrap: wrap; }
  .ctrl .avec-suffixe { width: 96px; margin-left: auto; }
  table.etat tr.chap .chap-in { min-height: 0; padding: 0; }
}

/* iPad portrait : les cartes de poste se rangent sur deux lignes (pas de pile de champs étroits). */
@media (min-width: 601px) and (max-width: 1100px) {
  table.devis tr.n-poste { grid-template-columns: 100px repeat(6, minmax(0, 1fr)) 140px; }
  table.devis tr.n-poste td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.devis tr.n-poste td:nth-child(2) { grid-column: 2 / 8; grid-row: 1; }
  table.devis tr.n-poste td:nth-child(9) { grid-column: 8; grid-row: 1; }
  table.devis tr.n-poste td:nth-child(3) { grid-column: 2; grid-row: 2; }
  table.devis tr.n-poste td:nth-child(4) { grid-column: 3; grid-row: 2; }
  table.devis tr.n-poste td:nth-child(5) { grid-column: 4; grid-row: 2; }
  table.devis tr.n-poste td:nth-child(6) { grid-column: 5; grid-row: 2; }
  table.devis tr.n-poste td:nth-child(7) { grid-column: 6; grid-row: 2; }
  table.devis tr.n-poste td:nth-child(8) { grid-column: 7 / 9; grid-row: 2; }
  table.etat tr.ligne-e { grid-template-columns: 80px repeat(4, minmax(0, 1fr)); }
  table.etat tr.ligne-e td.cd { grid-column: 1; grid-row: 1; }
  table.etat tr.ligne-e td.des { grid-column: 2 / -1; grid-row: 1; }
  table.etat tr.ligne-e td:nth-child(3) { grid-column: 2; grid-row: 2; }
  table.etat tr.ligne-e td:nth-child(4) { grid-column: 3; grid-row: 2; }
  table.etat tr.ligne-e td:nth-child(6) { grid-column: 4; grid-row: 2; }
  table.etat tr.ligne-e td:nth-child(7) { grid-column: 5; grid-row: 2; }
  table.etat tr.ligne-e td:nth-child(5) { grid-column: 2 / -1; grid-row: 3; }
  table.devis tr.ch-ligne { grid-template-columns: 220px minmax(0, 1fr) auto; }
  table.devis tr.ch-ligne td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.devis tr.ch-ligne td:nth-child(2) { grid-column: 2; grid-row: 1; }
  table.devis tr.ch-ligne td:nth-child(3) { grid-column: 3; grid-row: 1; }
}

/* Pied de totaux du devis et de l'état : compact sur téléphone (la bulle occupe déjà le coin droit). */
@media (max-width: 760px) {
  .pied { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 6px 12px; padding: 8px 76px 8px 14px; }
  .pied .m .v, .pied.etat-pied .m .v { font-size: 16px; }
  .pied .m.grand .v { font-size: 20px; }
  .pied > .btn, .pied > .alerte-btn { grid-column: 1 / -1; }
  .pied .alerte-btn:disabled { display: none; }
  .pied .m .l { font-size: 12px; }
  .pied .av { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .pied .av .barre { flex: 1; margin-top: 0; }
  .pied.etat-pied { position: static; }   /* les totaux de l'état se lisent au bout de la liste : la barre collée prendrait la moitié de l'écran */
  .etat-tete { padding: 10px 14px; }
  .etat-tete .btn { flex: 1 1 calc(50% - 8px); }
  .ch-code .c-in { flex: 0 1 140px !important; }
  .pied > .btn.or { grid-column: 1 / 3; }
  .pied > .btn:not(.or) { grid-column: 3; padding: 0 12px; }
}

/* « Plus » : les rangées qui doublent la barre latérale ne servent que sur téléphone. */
.plus-mobile { display: none; }
@media (max-width: 760px) { .rangee.plus-mobile { display: flex; } }

/* Planning : la grille de sept jours est trop étroite sous 1280 px (iPad paysage avec la barre latérale) : deux colonnes de jours. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pl-semaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-jour { min-height: 0; padding: 12px 12px 6px; display: block; }
  .pl-item { flex-direction: row; gap: 10px; padding: 8px 10px; }
  .pl-moment, .pl-heure { min-width: 64px; }
  .pl-heure { min-width: 48px; }
  .pl-ajout { margin: 4px -6px 0; flex-direction: row; }
  .pl-ajout .btn { justify-content: center; padding: 0 12px; }
  .pl-jour-titre .pill { display: inline-flex; }
  .pl-jour.we.vide .pl-ajout { display: none; }
}

/* Liste des états d'un chantier : une carte par état sur téléphone (le tableau de six colonnes défilait de côté). */
@media (max-width: 760px) {
  table.liste:has(tr.cliquable), table.liste:has(tr.cliquable) tbody { display: block; width: 100%; }
  table.liste:has(tr.cliquable) thead { display: none; }
  table.liste tr.cliquable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 12px 8px; border-bottom: 1px solid var(--trait); }
  table.liste tr.cliquable td { display: block; height: auto; padding: 0; border: 0; white-space: normal; min-width: 0; }
  table.liste tr.cliquable td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.liste tr.cliquable td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  table.liste tr.cliquable td:nth-child(2) { grid-column: 1; grid-row: 2; }
  table.liste tr.cliquable td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; color: var(--txt2); }
  table.liste tr.cliquable td:nth-child(5) { grid-column: 1; grid-row: 3; text-align: left; }
  table.liste tr.cliquable td:nth-child(6) { grid-column: 2; grid-row: 3; text-align: right; }
  table.liste tr.cliquable td:nth-child(5)::before { content: "Montant HTVA : "; color: var(--txt3); font-size: 13px; }
  table.liste tr.cliquable td:nth-child(6)::before { content: "À payer TTC : "; color: var(--txt3); font-size: 13px; }
}