/* ============================================================
   Mobile : barre basse, cartes
   mobile.css · lignes 581-fin du fichier d'origine
   ============================================================ */
/* ===== MOBILE : barre de navigation basse + cartes ===== */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom,0)}
.tabbar-inner{display:flex}
.tabitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
  font-size:10.5px;font-weight:700;color:var(--ink-faint);background:none;position:relative}
.tabitem .ti{font-size:19px;line-height:1}
.tabitem.on{color:var(--accent)}
.tabitem.on::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2.5px;background:var(--accent);border-radius:0 0 3px 3px}
.tabitem .dot{position:absolute;top:6px;right:26%;min-width:15px;height:15px;border-radius:9px;background:var(--bad);
  color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 3px}

/* listes en cartes (remplacent les tableaux sur mobile) */
.mcards{display:grid;gap:10px}
.mcard{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:13px 14px;box-shadow:var(--shadow)}
.mcard:active{transform:scale(.995)}
.mc-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
/* ⚠️ SANS CE `flex:1`, LE POUSSOIR NE POUSSE RIEN. `.spacer` n'est pas une
   règle globale : chaque conteneur déclare la sienne (`.page-head .spacer`,
   `.panel-head .spacer`…). Dix-sept cartes mobiles posaient un `.spacer`
   entre le titre et le statut en croyant le renvoyer à droite ; il ne faisait
   rien, et le statut restait collé au libellé, à une distance différente sur
   chaque carte selon la longueur du texte. Vu le 19/09/2026
   (« remets un peu d'ordre au niveau des statuts »). */
.mc-top .spacer{flex:1}
.mc-title{font-weight:800;font-size:15px;letter-spacing:-.2px}
/* ⚠️ UN NOM LONG POUSSAIT L'AVATAR SUR SA PROPRE LIGNE. Sans `min-width:0`,
   un élément flex refuse de devenir plus étroit que son plus long MOT :
   « Jordane Bettina Vandekasteele Ciappina » réclamait toute la largeur, donc
   passait à la ligne en entier — l'avatar restait seul en haut, l'étiquette
   atterrissait en dessous à gauche, et la carte faisait trois lignes de
   bandeau. Avec une base de 140 px, le nom se replie SUR LUI-MÊME à côté de
   l'avatar, et ce n'est que sous 140 px d'espace utile que l'étiquette
   descend. Demandé le 20/09/2026. */
.mc-title{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
/* ⚠️ L'ÉTIQUETTE EST À DROITE, QU'ELLE SOIT SUR LA LIGNE DU NOM OU DESSOUS.
   Renvoyée à droite par le seul `.spacer`, elle repartait à gauche dès
   qu'elle changeait de ligne — sous l'avatar, comme si elle lui appartenait. */
.mc-top > .tag{margin-left:auto}
.mc-top{align-items:flex-start;row-gap:5px}
.mc-top .avatar{flex:0 0 auto;margin-top:1px}
.mc-sub{color:var(--ink-soft);font-size:12.5px}
.mc-rows{display:grid;gap:5px;margin-top:9px;font-size:12.5px}
.mc-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mc-row span:first-child{color:var(--ink-faint)}
/* ⚠️ UN STATUT NE DÉPLACE JAMAIS UN MONTANT — RÈGLE GÉNÉRALE.
   « Accepté » fait sept signes, « Espace consulté 85 fois, la dernière le
   19 sept. à 00:56 » en fait cinquante-six. Tant que l'étiquette et le
   chiffre partagent une ligne qui se replie, la position du chiffre dépend
   de ce que le client a fait — il saute d'une carte à l'autre, et l'œil ne
   peut plus les comparer en descendant la page.
   Ici, le libellé prend la place restante et la VALEUR est ancrée à droite :
   elle ne bouge pas, quoi qu'on mette en face. Et quand plusieurs étiquettes
   occupent la même valeur, elles passent l'une SOUS l'autre, toujours calées
   à droite. Demandé le 19/09/2026 :
   « les montants doivent toujours se trouver au même endroit ». */
.mc-row > span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mc-row > span:last-child{flex:0 1 auto;display:inline-flex;flex-wrap:wrap;gap:4px;
  justify-content:flex-end;align-items:center;text-align:right}
.mc-act{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.mc-act .btn{flex:1;min-width:110px}

/* écran « ma journée » */
.today-hero{background:linear-gradient(135deg,var(--accent),var(--accent-fonce));color:#fff;border-radius:16px;padding:18px;margin-bottom:14px}
.today-hero .lab{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}
.today-hero h3{font-size:20px;margin:6px 0 2px;font-weight:800}
.today-hero .adr{font-size:13px;opacity:.9}
.today-hero .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;margin-top:12px;width:100%}
.today-hero .btn:hover{background:rgba(255,255,255,.24)}
.big-action{width:100%;padding:15px;font-size:15px;font-weight:800;border-radius:14px;margin-bottom:12px}

input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=datetime-local]{-webkit-appearance:none;appearance:none;text-align:left;min-width:0}
.field input[type=date],.field input[type=datetime-local]{width:100%}
.field input,.field select,.field textarea,.lc-grid input{min-width:0}

/* saisie de lignes en cartes (mobile) */
.linecard{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:12px;margin-bottom:10px}
.lc-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lc-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:0 0 auto}
.lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.lc-grid label{display:block;font-size:10.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.lc-grid input{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:16px}
.lc-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:13px}
.lc-total b{font-size:15px;color:var(--accent)}
.linecard textarea,.linecard>input{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:16px}

/* barre d'action collante (pages de création) */
.actionbar{display:none}
@media(max-width:720px){
  .actionbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0));z-index:45;background:var(--surface);                                      padding:10px 12px;}
  .actionbar .btn{flex:1;min-height:46px}
  .content:has(.actionbar){padding-bottom:calc(160px + env(safe-area-inset-bottom,0)) !important}
  .page-head{flex-wrap:wrap;row-gap:10px}
  .page-head .spacer{display:none}
  .page-head > h2,.page-head > div:not(.spacer){flex:1 1 100%;min-width:0}
  .page-head > .btn{flex:1 1 calc(50% - 4px)}
  /* boutons d'en-tête « hbtn » : une seule ligne => même hauteur quel que soit le libellé */
  .page-head > .btn.hbtn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
    padding-left:10px;padding-right:10px;font-size:13px;min-height:44px;line-height:1.2}
  /* période facturation : les deux dates restent côte à côte */
  .toolbar .fac-range,.toolbar .fac-created{flex:1 1 100%;gap:6px}
  .toolbar .fac-range .datefr,.toolbar .fac-created .datefr{flex:1 1 0;min-width:0}
  .toolbar .fac-created > label{flex:1 1 100%}   /* « Créées du » sur sa propre ligne */
  .toolbar .fac-created > .btn{flex:0 0 auto}
  .page-head > .btn.wide{flex:1 1 100%;order:-1}
  .page-head > .btn.sm:first-child{flex:0 0 auto}
  .hide-mob{display:none !important}
  .toolbar{flex-wrap:wrap}
  .toolbar select,.toolbar input{flex:1 1 100%}
  /* navigation période (pointage) : reste groupée, le champ ne prend plus toute la ligne */
  .toolbar .pt-nav{width:100%;gap:6px}
  /* `flex-basis:auto` laissait un `input[type=date]` à sa largeur intrinsèque :
     sur iOS il ne grandissait pas, et la ligne s'arrêtait au milieu de l'écran.
     Avec une base à 0, l'espace libre lui revient entièrement. */
  .toolbar .pt-nav input,.toolbar .pt-nav .tag{flex:1 1 0;width:auto;min-width:0;text-align:center;justify-content:center}
  .toolbar .pt-nav .tag{min-height:38px;font-size:13px}
  .toolbar .pt-nav .btn{flex:0 0 auto}
  .toolbar .pt-nav .btn:last-child{flex:1 1 100%;margin-top:2px}
  .segbar{width:100%;display:flex}
  .segbar .seg{flex:1;text-align:center;white-space:nowrap;padding-left:4px;padding-right:4px}
  .tabsrow{width:100%}
  .tabsrow > .btn{flex:1}
  .grid-2{grid-template-columns:1fr}
  .deflist{grid-template-columns:1fr}
  .deflist dt{margin-top:8px}
}

@media(max-width:720px){
  .tabbar{display:block}
  /* ⚠️ CETTE PLACE EST RÉSERVÉE À LA BARRE D'ONGLETS DE L'APPLICATION
     INTERNE, celle qui est cachée dans l'espace client. Non exclue, elle
     laissait 80 px de vide sous la coque du portail — la barre du client
     flottait à un centimètre du bord de l'appareil, et le `!important`
     rendait le défaut incorrigible depuis la feuille du portail.
     `:root:not([data-portail])` dit ce que le nom de la règle sous-entendait
     déjà. Corrigé le 19/09/2026. */
  :root:not([data-portail]) .app{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
  :root:not([data-portail]) .content{padding-bottom:calc(80px + env(safe-area-inset-bottom,0)) !important}
  .menu-toggle{display:none !important}   /* doublon avec « Menu » en bas */
  /* listes de définitions : libellé au-dessus, valeur alignée */
  .deflist{display:block}
  .deflist dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);
    font-weight:700;margin:10px 0 2px;padding:0}
  .deflist dt:first-child{margin-top:0}
  .deflist dd{margin:0;padding:0 0 8px;font-size:14px;border-bottom:1px solid var(--line-soft)}
  .deflist dd:last-child{border-bottom:none}
  /* pieds de fenêtre : boutons réguliers, action principale pleine largeur */
  .modal-foot{display:flex;flex-wrap:wrap;gap:8px}
  .modal-foot .btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .modal-foot .btn:not(.ghost){flex-basis:100%;order:-1}
  .modal-foot .spacer{display:none}
  /* totaux et lignes toujours alignés */
  .sumbox{width:100%}
  .sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0}
  .sumrow span:first-child{color:var(--ink-soft);font-size:13px}
  .sumrow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
  .mc-row span:last-child{font-variant-numeric:tabular-nums;text-align:right}
  .mc-title{overflow-wrap:anywhere}
  .kpi .val{font-size:20px;overflow-wrap:anywhere}
  .panel-head{flex-wrap:wrap;row-gap:6px}
  .panel-head h3{font-size:14px}
  /* ⚠️ ET SUR TÉLÉPHONE, ELLES PRENNENT LEUR PROPRE RANGÉE, sous le titre.
     Serrées à droite elles le compriment ; renvoyées à la ligne une par une,
     elles partent en diagonale. Une rangée à elles, alignées à gauche : on
     les voit d'un coup, et elles gardent leur largeur naturelle — deux
     flèches de calendrier n'ont pas à s'étirer sur un demi-écran. */
  .panel-head .ph-act{flex:1 1 100%;margin-left:0}
  /* zones tactiles plus grandes */
  .chip{padding:8px 13px;font-size:13px}
  .seg{padding:10px 13px}
  /* modales en plein écran */
  .modal-bg{align-items:flex-end}
  .modal{max-width:100%;max-height:94vh;}
  .modal-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:calc(14px + env(safe-area-inset-bottom,0))}
}

@media(max-width:720px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:560px}
  .page-head{gap:10px}
  .kpi .val{font-size:24px}
  /* mobile : kanban glisser-déposer masqué (peu ergonomique au doigt) + son intitulé */
  .kanban{display:none}
  .kcap:has(+ .kanban){display:none}
  /* frise : tient sur la largeur de l'écran, sans scroll latéral */
  .ct-wrap{overflow-x:hidden;gap:4px}
  .ct-wrap .ltl-step{flex:1 1 0;min-width:0;padding:0 1px}
  .ct-wrap .ltl-dot{width:30px;height:30px;font-size:13px}
  .ct-wrap .ltl-step::before{top:15px;width:calc(100% + 4px)}
  .ct-wrap .ltl-lab{font-size:9.5px;max-width:none;width:100%;text-align:center;line-height:1.15;overflow-wrap:anywhere}
  .ct-wrap .ltl-step.ct-on .ltl-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
  .ct-wrap .ltl-step.ct-on .ltl-lab{color:var(--accent);font-weight:800}
  /* boutons d'action principaux (Nouveau lead / devis / facture…) : pleine largeur, épais, bien visibles */
  .page-head > .btn:not(.ghost){flex:1 1 100%;}
  /* journal des échanges : ergonomie mobile */
  .jquick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .jquick .chip{text-align:center;min-height:40px}
  .jform{grid-template-columns:1fr;gap:9px}
  .jform input,.jform select{width:100%;font-size:16px;padding:11px 12px}
  .jform .btn{min-height:46px}
  .jday-head{flex-wrap:wrap;row-gap:5px}
  .jd-resume{width:100%;order:6}
  .jitem{font-size:13.5px}
  /* chantier — postes : case + libellé + suppr sur une ligne, applicateurs pleine largeur dessous */
  .poste-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"check label del" "chips chips chips";align-items:center;gap:9px 10px;padding:12px 0}
  .poste-row > .pcheck{grid-area:check}
  .poste-row > .poste-lab{grid-area:label;min-width:0;overflow-wrap:anywhere}
  .poste-row > .chips{grid-area:chips;flex-wrap:wrap;gap:6px}
  .poste-row > .mini{grid-area:del}
  /* chantier — statut pleine largeur de l'écran, bien visible en haut */
  .statut-select{flex:1 1 100%;width:100%;               padding:13px 16px;}
  /* accueil mobile : uniquement salutation + date */
  .acc-sub{display:none}
  .acc-hero{padding-bottom:18px;margin-bottom:20px}
  .acc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  /* actions à réaliser — pleine largeur et tap confortable */
  .acts-grid{grid-template-columns:1fr}
  .act-item{padding:13px 4px}
  .actcat-head{padding:13px}
  .sev-chips{width:100%}
  /* tâches — formulaire empilé, grille pleine largeur */
  .tache-form{flex-direction:column;align-items:stretch}
  .tache-form #t_titre,.tache-form select,.tache-form input[type=date],.tache-form .btn{width:100%;font-size:16px;min-height:44px}
  .tache-form .t_prio{min-height:44px}
  .taches-grid{grid-template-columns:1fr}
  /* chantier — avenant empilé proprement */
  .av-row{flex-wrap:wrap;gap:9px 10px;padding:12px 14px}
  .av-row .av-ref{order:1}
  .av-row .av-stat{order:2;margin-left:auto}
  .av-row .av-title{order:3;flex:1 1 100%;white-space:normal;overflow:visible}
  .av-row .av-amt{order:4}
  .av-row .av-act{order:5;flex:1 1 100%;flex-wrap:wrap;margin-top:2px}
}
@media(max-width:560px){
  .content{padding:16px 12px 56px}
  .field.row{grid-template-columns:1fr}
  .modal-head,.modal-body,.modal-foot{padding-left:18px;padding-right:18px}
  .modal-foot{flex-wrap:wrap;gap:8px}
  .modal-foot .btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .modal-foot .btn:not(.ghost){flex-basis:100%;order:-1}
  .cal{gap:3px}
  .cal .dow{font-size:9px;letter-spacing:.2px;padding:2px 0}
  .cal .cell{min-height:58px;padding:3px;border-radius:7px}
  .cal .cell .d{font-size:10.5px}
  .cal .ev{font-size:8.5px;padding:1px 3px;margin-top:2px;border-radius:4px;letter-spacing:-.2px}
  .legend{flex-wrap:wrap;font-size:11px}
  .cards{grid-template-columns:1fr}
  .page-head h2{font-size:20px}
  .toolbar input[type=search]{min-width:0;width:100%}
  .toolbar{gap:8px}
}

/* ============================================================
   LE CATALOGUE SUR TÉLÉPHONE
   ============================================================
   ⚠️ Le tableau des prestations devient des CARTES (`.linecard`, les mêmes
   que les lignes de devis). Six colonnes dans 380 px donnaient des champs de
   quarante pixels et un défilement latéral, sur l'écran où l'on consulte
   justement un prix depuis le chantier. Signalé le 21/09/2026.
   ============================================================ */
@media(max-width:720px){
  /* La carte porte déjà son cadre : le panneau de détail s'y encastre. */
  .linecard .rec{margin:10px -4px 0;padding:11px 10px}
  /* ⚠️ Un composant tient sur DEUX lignes : le matériau prend toute la
     largeur, la quantité et les montants suivent dessous. Sur une seule, le
     sélecteur tombait à 60 px et on ne lisait plus le nom du produit — la
     seule information qui compte pour choisir. */
  .rec-l{flex-wrap:wrap;row-gap:6px}
  .rec-l > select{flex:1 1 100%;margin-right:0}
  .rec-l > input{flex:0 0 84px}
  .rec-u{flex:1 1 auto}
  .rec-s{flex:0 0 78px}
  .rec-head{flex-wrap:nowrap}
  .rec-bilan{gap:6px 12px}
  .rec-bilan .btn{margin-left:0!important;width:100%;justify-content:center}
}