/* =====================================================================
   Moulin de l'Esquirol — système de design v1 (08/11/2026)
   Remplace public/style.css. Vanilla CSS, mode clair uniquement.
   Garde les noms de classes et d'id de la v0 (app.js n'a pas à changer
   pour que l'écran s'affiche) ; les ajouts sont marqués (v1).
   Polices : voir polices.css (Atkinson Hyperlegible, auto-hébergée).
   ===================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --fond: #F4F2EB;            /* fond des écrans (crème clair) */
  --surface: #FFFFFF;         /* cartes, champs, tableaux */
  --surface-calme: #ECE9DF;   /* en-têtes de tableau, zones secondaires */
  --trait: #D5D0C2;           /* séparateurs, bordures de carte */
  --trait-champ: #8C8676;     /* bordure de champ et de bouton (≥ 3:1 sur blanc) */

  /* ---------- Encre ---------- */
  --encre: #1B1E16;           /* texte principal (16,9:1 sur blanc) */
  --encre-2: #464B3F;         /* texte secondaire (9:1) */
  --encre-3: #5C6155;         /* légendes, unités (6,3:1 sur blanc, 5,7:1 sur fond) */

  /* ---------- Olive : action principale, sélection, succès ---------- */
  --olive: #3B5A1B;           /* 7,9:1 avec du blanc */
  --olive-fonce: #2A4210;
  --olive-pale: #E3EAD2;
  --olive-voile: #F1F4E9;

  /* ---------- Ocre : lot séparé, à surveiller ---------- */
  --ocre: #8A4F00;            /* 6,6:1 avec du blanc */
  --ocre-pale: #FBE9C8;

  /* ---------- Rouge : erreur, suppression ---------- */
  --rouge: #A4251C;           /* 7,3:1 avec du blanc */
  --rouge-pale: #FBE6E3;

  /* ---------- Bleu : information, lien, focus clavier ---------- */
  --bleu: #1F5788;
  --bleu-pale: #E0EBF5;

  /* ---------- Violet : facturé ---------- */
  --violet: #5A3A80;
  --violet-pale: #ECE5F5;

  /* ---------- Graphiques : 4 couleurs fixes, validées daltonisme le 08/11/2026 ---------- */
  --serie-1: #2a78d6;  /* bleu */
  --serie-2: #eb6834;  /* orange */
  --serie-3: #1baf7a;  /* vert d'eau */
  --serie-4: #eda100;  /* jaune */

  /* ---------- Typographie ---------- */
  --police: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  --police-chiffres: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", system-ui, sans-serif;   /* chiffres tabulaires de la même famille */
  --t-legende: 15px;   /* étiquettes, en-têtes de colonne — jamais pour une phrase à lire */
  --t-corps: 17px;     /* texte courant, minimum */
  --t-fort: 20px;      /* sous-titres, récapitulatif */
  --t-titre: 24px;     /* titres d'écran et de panneau */
  --t-grand: 32px;     /* chiffres clés */
  --t-poids: 44px;     /* brut, tare, kg d'huile */
  --t-net: 104px;      /* poids net : lisible à deux mètres */

  /* ---------- Espacements (base 4) ---------- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  /* ---------- Rayons ---------- */
  --r-petit: 8px; --r: 12px; --r-grand: 16px; --r-rond: 999px;

  /* ---------- Ombres ---------- */
  --ombre-1: 0 1px 2px rgb(27 30 22 / .08);
  --ombre-2: 0 4px 14px rgb(27 30 22 / .12);
  --ombre-3: 0 16px 48px rgb(27 30 22 / .28);

  /* ---------- Tactile ---------- */
  --touche: 56px;           /* zone tactile minimale */
  --touche-grande: 72px;    /* actions principales */
  --barre-h: 64px;
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--bleu);

  /* ---------- Compatibilité v0 (anciens noms encore utilisés dans le JS) ---------- */
  --vert: var(--olive); --vert-fonce: var(--olive-fonce); --olive-v0: #8a9a5b;
  --creme: var(--fond); --blanc: #fff; --texte: var(--encre); --gris: var(--encre-3);
  --bord: var(--trait); --orange: var(--ocre); --rayon: var(--r);
}

/* =====================================================================
   Base
   ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body, .app {
  font-family: var(--police); font-size: var(--t-corps); line-height: 1.35;
  color: var(--encre); background: var(--fond);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
/* (v1) .app = la fenêtre de l'appli ; en production : <body class="app">. Sert de conteneur aux requêtes @container. */
.app { container: app / inline-size; overflow: hidden; position: relative; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.cache { display: none !important; }
/* Droits (gérante, 08/11/2026) : dès que le rôle est connu et n'est pas « gerante », tout élément .gerante-seulement disparaît,
   y compris ceux rendus plus tard par le JS (Supprimer un apport, Annuler une facture, Supprimer un règlement). Le serveur refuse aussi (403). */
body[data-role]:not([data-role="gerante"]) .gerante-seulement { display: none !important; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }   /* (v1) */
:focus-visible { outline: none; box-shadow: var(--focus); }
b, strong { font-weight: 700; }
code { font-family: var(--police-chiffres); font-size: .92em; }

/* =====================================================================
   Barre d'onglets
   iPad (< 1560 px) : 5 onglets « comptoir » + bouton « Bureau » qui ouvre
   les 4 écrans de bureau. PC (≥ 1560 px) : les 10 onglets en ligne (10e = Verger, 09/11/2026 : à 1440 px la barre débordait).
   ===================================================================== */
.barre {
  flex: none; height: var(--barre-h); display: flex; align-items: stretch; gap: var(--e3);
  background: var(--surface); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-1);
  padding-right: var(--e3); position: relative; z-index: 20;
}
.onglets { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.onglet {
  position: relative; display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--barre-h); padding: 0 16px; border: 0; background: transparent;
  color: var(--encre-2); font-size: 18px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.onglet::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; }
.onglet:hover { background: var(--olive-voile); color: var(--encre); }
.onglet.actif { color: var(--olive-fonce); background: var(--olive-voile); font-weight: 700; }
.onglet.actif::after { background: var(--olive); }
.badge {
  min-width: 30px; height: 28px; padding: 0 8px; border-radius: var(--r-rond);
  background: var(--olive); color: #fff; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.badge:empty { display: none; }

/* (v1) groupe Bureau */
.bureau { position: relative; display: flex; align-items: stretch; }
.onglet-bureau .chevron { font-size: 14px; }
.onglet-bureau[aria-expanded="true"] { background: var(--olive-voile); color: var(--encre); }
.onglet-bureau.actif-dedans { color: var(--olive-fonce); background: var(--olive-voile); }
.onglet-bureau.actif-dedans::after { background: var(--olive); }
.groupe-bureau {
  display: none; position: absolute; top: calc(var(--barre-h) + 6px); left: 0; min-width: 280px;
  flex-direction: column; gap: var(--e1); padding: var(--e2);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); box-shadow: var(--ombre-2);
}
.groupe-bureau.ouvert { display: flex; }
.groupe-bureau .onglet { min-height: var(--touche-grande); padding: 0 var(--e5); border-radius: var(--r); justify-content: flex-start; font-size: 19px; }
.groupe-bureau .onglet::after { left: 0; right: auto; top: 16px; bottom: 16px; width: 4px; height: auto; border-radius: 0 4px 4px 0; }

.barre-info { flex: none; display: flex; align-items: center; gap: var(--e3); font-size: var(--t-legende); color: var(--encre-2); }
.barre-campagne { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.barre-campagne b { color: var(--encre); font-size: 16px; }
#etat-reseau.hors-ligne, .hors-ligne-puce {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-rond);
  background: var(--rouge); color: #fff; font-weight: 700; font-size: 15px;
}
#etat-reseau.hors-ligne::after { content: "Hors ligne"; }
.btn-barre {
  min-height: 48px; height: 48px; padding: 0 16px; border-radius: var(--r); border: 2px solid var(--trait-champ);
  background: var(--surface); color: var(--encre); font-size: 16px; font-weight: 600; cursor: pointer; align-self: center;
}
.btn-barre:hover { background: var(--olive-voile); border-color: var(--olive); }

@container app (min-width: 1560px) {
  .onglet-bureau { display: none; }
  .groupe-bureau, .groupe-bureau.ouvert {
    display: flex; position: static; flex-direction: row; gap: 0; padding: 0; min-width: 0;
    background: none; border: 0; border-left: 1px solid var(--trait); border-radius: 0; box-shadow: none; margin-left: var(--e2);
  }
  .groupe-bureau .onglet { min-height: var(--barre-h); padding: 0 16px; border-radius: 0; font-size: 18px; }
  .groupe-bureau .onglet::after { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 4px; border-radius: 4px 4px 0 0; }
}

/* =====================================================================
   Écrans et mise en page
   ===================================================================== */
.ecran { display: none; flex: 1; min-height: 0; overflow: auto; padding: var(--e4); gap: var(--e4); }
.ecran.actif { display: flex; flex-direction: column; }
.colonne { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; min-height: 0; overflow: auto; }
.ligne { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.ligne > input { flex: 1; width: auto; min-width: 160px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.grille2 .pleine { grid-column: 1 / -1; }
.grille2 label { display: flex; flex-direction: column; gap: var(--e1); font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); }
.etiquette { font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); letter-spacing: .01em; }
.etiquette small { font-weight: 400; color: var(--encre-3); }
.sous { color: var(--encre-3); font-size: var(--t-legende); }
.titre-section { font-size: var(--t-titre); font-weight: 700; margin: var(--e2) 0 0; display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.titre-section .sous { font-weight: 400; }
.entete-ecran { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.entete-ecran h2 { font-size: var(--t-titre); font-weight: 700; }
.entete-ecran input[type=date] { width: auto; }
.total { margin-left: auto; font-weight: 700; font-size: var(--t-fort); font-variant-numeric: tabular-nums; }
.total .sous { font-weight: 400; }

/* =====================================================================
   Champs
   ===================================================================== */
input[type=search], input[type=text], input[type=number], input[type=date], input[type=password],
input[type=email], input[type=tel], input:not([type]), select, textarea {
  height: var(--touche); min-height: var(--touche); width: 100%; min-width: 0;
  padding: 0 var(--e4); background: var(--surface); color: var(--encre);
  border: 2px solid var(--trait-champ); border-radius: var(--r); font-size: var(--t-corps);
}
textarea { height: auto; padding: var(--e3) var(--e4); }
select { padding-right: 40px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: #6A6E62; opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 4px var(--olive-pale); }
input:disabled, select:disabled { background: var(--surface-calme); color: var(--encre-3); border-color: var(--trait); }
input[aria-invalid="true"], input.erreur, select.erreur { border-color: var(--rouge); background: var(--rouge-pale); }
.aide-champ { font-size: var(--t-legende); color: var(--encre-3); }                 /* (v1) */
.erreur-champ { font-size: var(--t-legende); color: var(--rouge); font-weight: 700; }  /* (v1) */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=checkbox], input[type=radio] { width: 28px; height: 28px; accent-color: var(--olive); margin: 0; cursor: pointer; flex: none; }
.case { display: inline-flex; align-items: center; gap: var(--e3); min-height: var(--touche); padding: 0 var(--e3); cursor: pointer; font-weight: 600; }
.lien {
  display: inline-flex; align-items: center; min-height: var(--touche); padding: 0 var(--e2);
  background: none; border: 0; color: var(--bleu); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; font-size: var(--t-corps); font-weight: 600;
}

/* (v1) recherche client : champ de 64 px */
#recherche, #rest-recherche, .champ-recherche { height: 64px; font-size: var(--t-fort); padding-left: var(--e4); }

/* =====================================================================
   Boutons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--touche); padding: 0 var(--e5); border-radius: var(--r);
  border: 2px solid var(--trait-champ); background: var(--surface); color: var(--encre);
  font-size: var(--t-corps); font-weight: 600; line-height: 1.15; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: background-color .08s, border-color .08s;
}
.btn:hover, .btn.est-survol { background: var(--olive-voile); border-color: var(--olive); }
.btn:active, .btn.est-presse { background: var(--olive-pale); transform: translateY(1px); }
.btn:disabled, .btn.est-desactive, .btn-choix:disabled {
  background: var(--surface-calme); border-color: var(--trait); color: #6E7266; cursor: not-allowed; transform: none;
}
.btn.est-focus { box-shadow: var(--focus); }

.btn-primaire { background: var(--olive); border-color: var(--olive); color: #fff; }
.btn-primaire:hover, .btn-primaire.est-survol { background: var(--olive-fonce); border-color: var(--olive-fonce); }
.btn-primaire:active, .btn-primaire.est-presse { background: #1E300B; border-color: #1E300B; }

.btn-secondaire { background: var(--olive-pale); border-color: #B9C69B; color: var(--olive-fonce); }
.btn-secondaire:hover, .btn-secondaire.est-survol { background: #D6E0BF; border-color: var(--olive); }

.btn-discret { background: transparent; border-color: transparent; color: var(--olive-fonce); text-decoration: underline; text-underline-offset: 3px; }
.btn-discret:hover { background: var(--olive-voile); border-color: transparent; }

.btn-danger { color: var(--rouge); border-color: #D9A29C; }
.btn-danger:hover, .btn-danger.est-survol { background: var(--rouge-pale); border-color: var(--rouge); }

.btn-grand { min-height: var(--touche-grande); font-size: 22px; padding: 0 var(--e6); width: 100%; }
.btn-petit { padding: 0 var(--e4); }   /* garde 56 px de haut : seule la largeur diminue */
.boutons { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Bouton de choix (variété, état, mode, mode de règlement) */
.btn-choix {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--touche); min-height: var(--touche); padding: 0 var(--e4);
  border-radius: var(--r); border: 2px solid var(--trait-champ); background: var(--surface);
  color: var(--encre); font-size: 18px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-choix:hover, .btn-choix.est-survol { border-color: var(--olive); background: var(--olive-voile); }
.btn-choix.actif { background: var(--olive); border-color: var(--olive); color: #fff; }
.btn-choix.actif::before { content: "✓"; font-weight: 800; }   /* la sélection ne repose pas que sur la couleur */
.btn-choix.libre { border-style: dashed; }
.btn-choix[data-valeur="SEPARE"].actif, .btn-choix.separe.actif { background: var(--ocre); border-color: var(--ocre); }
.boutons-palox .btn-choix { min-width: var(--touche); }
.btn-palox { min-height: var(--touche); }   /* (11/11) sur sa propre ligne « Palox », ouvre le dialogue des repères */
/* les cinq variétés et « Autre… » tiennent sur une ligne à la largeur de l'iPad en paysage */
#varietes { gap: 4px; }
#varietes .btn-choix { padding: 0 6px; font-size: 15px; gap: 3px; }   /* six variétés et « Autre… » (Bouteillan ajoutée le 11/11/2026) */
.btn-palox.actif { background: var(--olive, #3B5A1B); border-color: var(--olive, #3B5A1B); color: #fff; font-weight: 700; }
#dlg-palox .boutons-palox { max-width: 640px; }
.boutons-palox .btn-choix.couleur-R { border-color: #c0392b; } .boutons-palox .btn-choix.couleur-V { border-color: #27ae60; }
.boutons-palox .btn-choix.couleur-O { border-color: #e67e22; } .boutons-palox .btn-choix.couleur-GRIS { border-color: #7f8c8d; }

/* =====================================================================
   Pastilles
   ===================================================================== */
.puce {   /* (v1) information neutre : type de client, tarif spécial… */
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 12px;
  border-radius: var(--r-rond); background: var(--surface-calme); color: var(--encre-2);
  font-size: var(--t-legende); font-weight: 700; white-space: nowrap;
}
.puce-ocre { background: var(--ocre-pale); color: var(--ocre); }
.puce-olive { background: var(--olive-pale); color: var(--olive-fonce); }
.puce-bleu { background: var(--bleu-pale); color: var(--bleu); }

/* Statut d'apport et de facture : toujours un libellé, la couleur ne fait que doubler */
.statut {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 12px 2px 10px;
  border-radius: var(--r-rond); border: 1px solid transparent;
  background: var(--surface-calme); color: var(--encre-2);
  font-size: var(--t-legende); font-weight: 700; white-space: nowrap;
}
.statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.statut-recu        { background: #E5EAF0; color: #34475B; }
.statut-en_attente  { background: var(--ocre-pale); color: var(--ocre); }
.statut-triture     { background: var(--olive-pale); color: var(--olive-fonce); }
.statut-huile_prete { background: #FFF0BF; color: #6B4700; border-color: #DDBE5F; }
.statut-restitue    { background: var(--bleu-pale); color: var(--bleu); }
.statut-facture     { background: var(--violet-pale); color: var(--violet); }
.statut-paye        { background: var(--olive-fonce); color: #fff; }
.statut-paye::before, .statut-payee::before { content: "✓"; width: auto; height: auto; background: none; font-weight: 800; }
.statut-emise   { background: var(--ocre-pale); color: var(--ocre); }
.statut-payee   { background: var(--olive-fonce); color: #fff; }
.statut-annulee { background: var(--surface-calme); color: var(--encre-3); text-decoration: line-through; }
.statut-annulee::before { content: "×"; width: auto; height: auto; background: none; font-weight: 800; text-decoration: none; }
.statut-ouvert  { background: #E5EAF0; color: #34475B; }
.statut-clos    { background: var(--surface-calme); color: var(--encre-2); }
select.statut, .statut-select {
  min-height: 48px; height: 48px; width: auto; border-radius: var(--r); padding: 0 36px 0 12px; font-size: 16px;
}
select.statut::before { display: none; }
.mode-SEPARE { color: var(--ocre); font-weight: 700; }
.pastille-retard {
  display: inline-flex; align-items: center; min-height: 26px; margin-left: var(--e2); padding: 0 10px;
  border-radius: var(--r-rond); background: var(--ocre-pale); color: var(--ocre); font-size: 14px; font-weight: 700; vertical-align: middle;
}

/* =====================================================================
   Réception
   ===================================================================== */
#ecran-reception.actif {
  display: grid; grid-template-columns: minmax(380px, .62fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: var(--e4); overflow: hidden;
}
.colonne-pesee { overflow: hidden auto; }   /* (11/11) écran moins haut que 820 px (iPad 1 024 × 768) : la colonne défile au lieu de couper « Enregistrer » */

/* Client : résultats de recherche */
.resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); overflow: auto; min-height: 0; }
.resultats li {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e2) var(--e4); background: var(--surface); border: 2px solid var(--trait); border-radius: var(--r); cursor: pointer;
}
.resultats li:hover { border-color: var(--olive); background: var(--olive-voile); }
.resultats li.focus { border-color: var(--olive); box-shadow: inset 0 0 0 1px var(--olive); }
.resultats li.inactif { background: var(--fond); }
.resultats li.inactif .nom { color: var(--encre-2); }
.resultats .nom { font-weight: 700; font-size: 19px; }
.resultats .sous { font-size: var(--t-legende); color: var(--encre-3); }
.resultats .vide { cursor: default; border-style: dashed; border-color: var(--trait-champ); flex-direction: column; align-items: stretch; gap: var(--e3); padding: var(--e4); background: var(--surface); }
.resultats .vide:hover { background: var(--surface); border-color: var(--trait-champ); }
.resultats .vide b { font-size: var(--t-fort); }
.entree-clavier { font-size: 14px; font-weight: 700; color: var(--olive-fonce); background: var(--olive-pale); border-radius: var(--r-petit); padding: 2px 8px; white-space: nowrap; }   /* (v1) */

/* Client choisi */
.client-choisi {
  display: flex; flex-direction: column; gap: var(--e3);
  background: var(--surface); border: 2px solid var(--olive); border-radius: var(--r-grand); padding: var(--e4); box-shadow: var(--ombre-1);
}
.client-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }   /* (v1) */
.client-nom { font-size: 28px; font-weight: 700; line-height: 1.15; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.client-detail { color: var(--encre-2); font-size: var(--t-corps); margin-top: -4px; }
.client-actions { display: flex; gap: var(--e2); flex-wrap: wrap; }   /* (v1) */
.client-resume { font-weight: 600; }                                  /* (v1) */
.client-historique { font-size: var(--t-corps); }
.client-historique table { width: 100%; border-collapse: collapse; margin-top: var(--e2); }
.client-historique th { text-align: left; font-size: var(--t-legende); color: var(--encre-2); font-weight: 700; padding: 6px 8px; border-bottom: 2px solid var(--trait); }
.client-historique td { padding: 8px; border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; }
.client-historique tr:last-child td { border-bottom: 0; }
.client-historique tr.courante td { font-weight: 700; background: var(--olive-voile); }

/* Nouveau client */
.form-nouveau {
  display: flex; flex-direction: column; gap: var(--e3);
  background: var(--surface); border: 2px solid var(--olive); border-radius: var(--r-grand); padding: var(--e4); box-shadow: var(--ombre-1);
}
.form-titre { font-weight: 700; font-size: var(--t-fort); }

/* Pesée : champ de poids en gros chiffres */
.pesee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.champ-poids {
  position: relative; display: flex; align-items: center; gap: var(--e3);
  height: 92px; padding: 0 var(--e4); cursor: text;
  background: var(--surface); border: 2px solid var(--trait-champ); border-radius: var(--r-grand);
}
.champ-poids label { flex: none; margin: 0; font-size: var(--t-corps); font-weight: 700; color: var(--encre-2); white-space: nowrap; }
.champ-poids input[type=number], .champ-poids input {
  flex: 1; height: 100%; min-height: 0; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  text-align: right; font-family: var(--police-chiffres); font-size: var(--t-poids); font-weight: 600; color: var(--encre);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.champ-poids input:focus { box-shadow: none; }
.champ-poids input::placeholder { color: #8C8676; }
.champ-poids .unite { flex: none; font-size: var(--t-fort); font-weight: 700; color: var(--encre-3); }   /* (v1) */
.champ-poids:focus-within, .champ-poids.est-focus { border-color: var(--olive); box-shadow: 0 0 0 4px var(--olive-pale); }
.champ-net { grid-column: 1 / -1; height: 140px; background: var(--olive-voile); border-color: var(--olive); padding: 0 var(--e5); }
.champ-net label { font-size: var(--t-fort); color: var(--olive-fonce); display: flex; flex-direction: column; gap: 2px; }
.champ-net label small { font-size: var(--t-legende); font-weight: 600; color: var(--encre-3); }
.champ-net input[type=number], .champ-net input { font-size: var(--t-net); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.champ-net .unite { font-size: var(--t-grand); color: var(--olive-fonce); }
.champ-poids.erreur { border-color: var(--rouge); background: var(--rouge-pale); }
.champ-poids.erreur label { color: var(--rouge); }
.champ-poids.erreur input { color: var(--rouge); }
.champ-poids .message-champ {   /* (v1) message sous le libellé, dans la case */
  position: absolute; left: var(--e5); bottom: 14px; font-size: var(--t-corps); font-weight: 700; color: var(--rouge);
}

/* (11/11/2026) plusieurs pesées sur un bon : pesées déjà rangées (touche = retirer), total, bouton « + Autre pesée » */
.pesees-ligne { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e3); min-height: var(--touche); }
.pesees-liste { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.pesee-puce {
  min-height: var(--touche); padding: 0 var(--e4); border: 2px solid var(--trait-champ); border-radius: var(--r); background: var(--surface);
  font-size: var(--t-corps); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); cursor: pointer; white-space: nowrap;
}
.pesee-puce span { margin-left: 6px; color: var(--encre-3); font-weight: 400; }
.pesee-puce:hover { border-color: var(--rouge); }
.pesees-total { margin-left: var(--e2); font-size: var(--t-fort); font-weight: 700; color: var(--olive-fonce); font-variant-numeric: tabular-nums; white-space: nowrap; }
#btn-pesee-plus { flex: none; align-self: flex-start; }

/* Lignes de choix : étiquette à gauche, boutons à droite (mode, variété, état, remarque) */
.mode, .choix, .ligne-choix { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--e3); align-items: start; }
.mode { grid-template-columns: 92px auto minmax(0, 1fr); align-items: center; }
.mode-libelle, .choix > .etiquette, .ligne-choix > .etiquette { font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); padding-top: 18px; }
.mode .mode-libelle { padding-top: 0; }
.mode small, #mode-info { font-size: var(--t-legende); color: var(--encre-3); line-height: 1.3; }
.mode small b { color: var(--encre); }
.ligne-choix > input { width: 100%; }

/* Récapitulatif et actions : en bas à droite, sous la main */
.actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--e3); padding-top: var(--e2); }
.actions .recap { grid-column: 1 / -1; }
.actions .btn-grand { width: 100%; }
/* décision gérante 08/11/2026 : « Enregistrer » principal à droite (72 px), « Enregistrer + imprimer » secondaire à gauche */
#btn-enregistrer-seul { order: 2; min-height: var(--touche-grande); font-size: 22px; }
#btn-enregistrer { order: 1; font-size: 20px; }
.recap {
  min-height: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: var(--t-fort); font-weight: 700; color: var(--encre);
}
.recap .sep { color: var(--trait-champ); font-weight: 400; }   /* (v1) */
.recap .prix { margin-left: auto; color: var(--olive-fonce); font-variant-numeric: tabular-nums; }   /* (v1) */
.recap .ko { color: var(--rouge); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.recap .ko::before { content: "!"; width: 24px; height: 24px; border-radius: 50%; background: var(--rouge); color: #fff; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }

/* =====================================================================
   Tableaux
   ===================================================================== */
.tableau {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); font-size: var(--t-corps);
}
.tableau th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  background: var(--surface-calme); color: var(--encre-2); font-size: var(--t-legende); font-weight: 700;
  padding: 12px 12px; border-bottom: 1px solid var(--trait);
}
.tableau thead th:first-child { border-top-left-radius: var(--r-grand); }
.tableau thead th:last-child { border-top-right-radius: var(--r-grand); }
.tableau td { height: 60px; padding: 6px 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover td { background: #FAF9F4; }
.tableau tr.selectionne td { background: var(--olive-voile); }
.tableau tr.selectionne td:first-child { box-shadow: inset 4px 0 0 var(--olive); }
.tableau td.actions-ligne { white-space: nowrap; text-align: right; }          /* (v1) */
.tableau td.actions-ligne .btn { margin-left: var(--e1); }
.tableau td .btn, .tableau td .btn-choix { min-height: 48px; }                  /* rangée de 60 px : la zone tactile reste ≥ 56 avec le padding */
.tableau input[type=checkbox] { width: 32px; height: 32px; }
.tableau td.case-cocher { width: 64px; text-align: center; }                    /* (v1) toute la cellule est cliquable */
.tableau td .principal, .tableau td.principal { font-weight: 700; white-space: nowrap; }                                    /* (v1) */
.tableau td .chiffre-fort { font-weight: 700; font-size: var(--t-fort); }        /* (v1) */
.tableau-compact td { height: 48px; padding: 4px 10px; }
.tableau-compact th { padding: 10px; }
.tableau th[data-tri] { cursor: pointer; user-select: none; }
.tableau th[data-tri]:hover { color: var(--encre); text-decoration: underline; }
.tableau th.tri-asc::after { content: " ▲"; font-size: 11px; } .tableau th.tri-desc::after { content: " ▼"; font-size: 11px; }
.tableau tfoot td, tfoot td { font-weight: 700; background: var(--surface-calme); border-top: 2px solid var(--trait-champ); border-bottom: 0; }
.tableau tfoot tr:last-child td:first-child { border-bottom-left-radius: var(--r-grand); }
.tableau tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--r-grand); }
.tableau-defilant { overflow-x: auto; border-radius: var(--r-grand); }
.tableau .vide-ligne td { height: auto; padding: 0; }   /* (v1) contient un .etat-vide */
#hist-table td.client, .client-cliquable { cursor: pointer; }
#hist-table td.client:hover, .client-cliquable:hover { text-decoration: underline; color: var(--bleu); }
#suivi-table a.tel, a.tel {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--bleu); font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums;
}
.tableau .ligne-modifiee td, .ligne-modifiee td { background: #FFF7E3; }
.tableau input.cellule-edit { height: 48px; min-height: 48px; padding: 0 10px; font-size: var(--t-corps); width: 100%; min-width: 64px; border-width: 1px; }
.tableau input.cellule-edit.num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau td.libelle input.cellule-edit { min-width: 170px; }
.panneau .tableau-defilant { margin: 0 -2px; }

/* =====================================================================
   États vides, messages, dialogues
   ===================================================================== */
.etat-vide {   /* (v1) */
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--e3);
  padding: var(--e7) var(--e5); background: var(--surface); border: 2px dashed var(--trait-champ); border-radius: var(--r-grand); color: var(--encre-2);
}
.etat-vide h3 { font-size: var(--t-fort); color: var(--encre); }
.etat-vide p { max-width: 46ch; }

.message, .avert, .info {   /* .avert = v0 */
  display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4);
  border-radius: var(--r); border: 2px solid; font-size: var(--t-corps);
}
.avert, .message-erreur { background: var(--rouge-pale); border-color: var(--rouge); color: #6E1710; }
.info, .message-info { background: var(--bleu-pale); border-color: var(--bleu); color: #163E61; }
.message-succes { background: var(--olive-voile); border-color: var(--olive); color: var(--olive-fonce); }
.message-attention { background: var(--ocre-pale); border-color: var(--ocre); color: #5E3600; }
.message .titre-message, .avert > b:first-child { font-weight: 700; font-size: var(--t-fort); }
.avert label { display: flex; gap: var(--e3); align-items: center; min-height: var(--touche); font-weight: 700; cursor: pointer; }
.avert input[type=checkbox] { width: 32px; height: 32px; accent-color: var(--rouge); }
.bandeau-erreur {   /* (v1) erreur qui concerne tout l'écran : serveur injoignable… */
  display: flex; align-items: center; gap: var(--e4); padding: var(--e3) var(--e4);
  background: var(--rouge); color: #fff; border-radius: var(--r); font-weight: 600;
}
.bandeau-erreur .btn { margin-left: auto; background: #fff; color: var(--rouge); border-color: #fff; }

dialog, .dialogue {
  border: 0; border-radius: var(--r-grand); padding: var(--e5); width: min(720px, 94vw); max-height: 90vh; overflow: auto;
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre-3);
}
dialog::backdrop { background: rgb(27 30 22 / .55); }
.voile { position: absolute; inset: 0; background: rgb(27 30 22 / .55); display: flex; align-items: center; justify-content: center; z-index: 40; }   /* (v1) maquettes */
dialog h3, .dialogue h3 { font-size: var(--t-titre); font-weight: 700; margin: 0 0 var(--e4); }
dialog .ligne, .dialogue .ligne { margin-top: var(--e3); }
.dialogue-actions { display: flex; gap: var(--e3); justify-content: flex-end; margin-top: var(--e5); flex-wrap: wrap; }   /* (v1) */
.dialogue-actions .btn-grand { width: auto; flex: 1 1 320px; }   /* (v1) bouton principal large, à droite, sans rejeter les autres à la ligne */
.dl-unite { display: flex; gap: var(--e2); margin-top: var(--e4); }
.dl-unite .btn-choix { flex: 1 1 0; }
.dl-huile { display: grid; grid-template-columns: auto minmax(200px, 260px) 1fr; gap: var(--e4); align-items: center; margin: var(--e4) 0; }
.dl-huile label { font-size: var(--t-fort); font-weight: 700; }
.dl-huile input {
  height: 92px; font-family: var(--police-chiffres); font-size: var(--t-poids); font-weight: 700; text-align: right; border-radius: var(--r-grand);
}
.dl-calc { font-size: var(--t-fort); display: flex; flex-direction: column; gap: 2px; }
.dl-calc b { font-variant-numeric: tabular-nums; }

/* Message de succès ou d'erreur (toast) : en bas à gauche, loin de la zone de pesée et des boutons d'enregistrement */
.toast {
  position: fixed; left: var(--e4); bottom: var(--e4); transform: translateY(8px);
  display: flex; align-items: center; gap: var(--e3); min-height: 60px; max-width: min(520px, 35%);
  padding: var(--e3) var(--e5); border-radius: var(--r-grand); background: var(--olive-fonce); color: #fff;
  font-size: var(--t-fort); font-weight: 600; box-shadow: var(--ombre-3);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60;
}
.toast::before {
  content: "✓"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--olive-fonce);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.toast.visible { opacity: 1; transform: none; pointer-events: auto; }
.toast.erreur { background: var(--rouge); }
.toast.erreur::before { content: "!"; color: var(--rouge); }

/* =====================================================================
   Tuile indicateur (Suivi clients, Caisse)
   ===================================================================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 132px; text-align: left;
  padding: var(--e4); background: var(--surface); border: 2px solid var(--trait); border-radius: var(--r-grand); color: var(--encre);
}
.kpi-titre { font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); }
.kpi-valeur { font-size: 36px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-valeur small { font-size: var(--t-corps); font-weight: 600; color: var(--encre-3); }
.kpi-sous { font-size: var(--t-legende); color: var(--encre-3); }
.kpi-ecart { font-weight: 700; }                                 /* (v1) */
.kpi-ecart.plus { color: var(--olive-fonce); } .kpi-ecart.plus::before { content: "▲ "; }
.kpi-ecart.moins { color: var(--rouge); } .kpi-ecart.moins::before { content: "▼ "; }
.kpi.cliquable { cursor: pointer; transition: border-color .08s, background-color .08s; }
.kpi.cliquable::after { content: "Voir la liste →"; margin-top: auto; padding-top: var(--e2); font-size: var(--t-legende); font-weight: 700; color: var(--olive-fonce); }
.kpi.cliquable:hover, .kpi.cliquable.est-survol { border-color: var(--olive); background: var(--olive-voile); }
.kpi.actif { border-color: var(--olive); background: var(--olive-voile); box-shadow: inset 0 0 0 2px var(--olive); }
.kpi.actif::after { content: "✓ Liste affichée ci-dessous"; }
.kpi-attention .kpi-valeur { color: var(--ocre); }               /* (v1) */

/* =====================================================================
   Lots
   ===================================================================== */
.lots-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e4); flex: 1; min-height: 0; }
.lots-liste { display: flex; flex-direction: column; gap: var(--e2); }
.lot-carte {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 4px var(--e4); align-items: center;
  min-height: 92px; padding: var(--e3) var(--e4); text-align: left; cursor: pointer; width: 100%;
  background: var(--surface); border: 2px solid var(--trait); border-radius: var(--r-grand); color: var(--encre);
}
.lot-carte:hover { border-color: var(--olive); background: var(--olive-voile); }
.lot-carte .lot-num { font-family: var(--police-chiffres); font-size: 26px; font-weight: 700; }
.lot-carte .lot-type-SEPARE { color: var(--ocre); }
.lot-carte .lot-info { display: flex; flex-direction: column; gap: 4px; }
.lot-carte .lot-info .ligne { gap: var(--e2); }
.lot-carte .lot-clients { font-size: var(--t-corps); font-weight: 700; color: var(--encre); text-align: left; overflow-wrap: anywhere; }
.lot-carte .lot-chiffres { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.lot-carte .lot-chiffres .rdt { display: block; font-size: var(--t-titre); font-weight: 700; }
.lot-carte.clos { background: var(--fond); }
.lot-carte.ouvert { border-style: dashed; border-color: var(--trait-champ); }

/* =====================================================================
   Restitution · Facture
   ===================================================================== */
.rest-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--e4); align-items: start; }
.sous-titre { font-size: var(--t-fort); font-weight: 700; margin: var(--e3) 0 0; color: var(--encre); }
.panneau {
  display: flex; flex-direction: column; gap: var(--e3);
  background: var(--surface); border: 2px solid var(--olive); border-radius: var(--r-grand); padding: var(--e4); box-shadow: var(--ombre-1);
}
.panneau h3 { font-size: var(--t-titre); font-weight: 700; display: flex; align-items: baseline; gap: var(--e3); }
.totaux { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 6px var(--e6); font-size: var(--t-corps); font-variant-numeric: tabular-nums; }
.totaux .ttc { font-size: var(--t-titre); font-weight: 700; color: var(--encre); padding-top: var(--e2); border-top: 2px solid var(--encre); }
.paiement-immediat { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--trait); }
.liste-factures { display: flex; flex-direction: column; gap: var(--e2); }
.facture-carte {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; min-height: 64px; padding: var(--e2) var(--e4);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
}
.facture-carte .num-facture { font-family: var(--police-chiffres); font-weight: 700; }
.facture-carte .actions-facture { margin-left: auto; display: flex; gap: var(--e2); }
.fnc-avance input { font-size: var(--t-corps); }
#par-table input { height: 48px; min-height: 48px; max-width: 320px; }

/* =====================================================================
   Caisse
   ===================================================================== */
.modes-caisse { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e3); }   /* (v1) */
.tuile-mode { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); padding: var(--e3) var(--e4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tuile-mode .kpi-titre { font-size: var(--t-legende); }
.tuile-mode .montant { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tuile-mode.total-jour { background: var(--olive); border-color: var(--olive); color: #fff; }
.tuile-mode.total-jour .kpi-titre, .tuile-mode.total-jour .kpi-sous { color: #E3EAD2; }

/* =====================================================================
   Filtres (Historique, Suivi)
   ===================================================================== */
.filtres {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end;
  padding: var(--e3) var(--e4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand);
}
.filtres label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); }
.filtres input, .filtres select { width: auto; min-width: 150px; }
.filtres input[type=search] { min-width: 220px; }
.filtres label.case { flex-direction: row; align-items: center; gap: var(--e3); min-height: var(--touche); font-size: var(--t-corps); color: var(--encre); font-weight: 600; }
.filtres label.case input { width: 28px; height: 28px; min-width: 0; }
.filtres .pousse { margin-left: auto; }   /* (v1) */

/* =====================================================================
   Statistiques et graphiques (SVG sans bibliothèque)
   ===================================================================== */
.cartes-graph { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.carte-graph { min-width: 0; padding: var(--e4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); display: flex; flex-direction: column; gap: var(--e2); }
.carte-graph h3 { font-size: var(--t-fort); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.carte-graph .tableau { border: 0; }
.select-inline { height: 48px; min-height: 48px; width: auto; font-size: 16px; }
.graph { position: relative; width: 100%; }
.graph svg { width: 100%; height: auto; display: block; font-family: var(--police); overflow: visible; }
.graph text { fill: var(--encre-3); font-size: 13px; }
.graph .axe { stroke: var(--trait-champ); stroke-width: 1; }
.graph .grille { stroke: #E7E4DA; stroke-width: 1; }
.graph .barre { fill: var(--olive); } .graph .barre.active { fill: var(--olive-fonce); } .graph .barre:hover { fill: #6B8A3F; }
.graph .etiquette-valeur { fill: var(--encre); font-size: 13px; font-weight: 700; }
.graph .ligne-serie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graph .point { stroke: #fff; stroke-width: 2; }
.graph .nom-serie { font-size: 13px; font-weight: 700; }
.graph .cible { stroke: var(--encre-3); stroke-dasharray: 4 4; }
.legende { display: flex; flex-wrap: wrap; gap: 6px var(--e4); font-size: var(--t-legende); color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende span::before { content: ""; width: 16px; height: 4px; border-radius: 2px; background: var(--c); }
.graph-tooltip { position: fixed; z-index: 60; background: var(--encre); color: #fff; padding: 8px 12px; border-radius: var(--r-petit); font-size: var(--t-legende); pointer-events: none; white-space: nowrap; box-shadow: var(--ombre-2); }
.graph-tooltip b { color: #fff; }
.choix-camp {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--touche); padding: 0 var(--e4);
  border: 2px solid var(--trait-champ); border-radius: var(--r-rond); background: var(--surface); cursor: pointer; font-weight: 600;
}
.choix-camp input { width: 24px; height: 24px; }
.choix-camp.actif { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.choix-camp.actif::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
#stats-table tr.active td { background: var(--olive-voile); font-weight: 700; }

/* =====================================================================
   Connexion
   ===================================================================== */
body.page-connexion { justify-content: center; align-items: center; padding: var(--e4); }
.connexion {
  display: flex; flex-direction: column; gap: var(--e4); width: min(460px, 100%); padding: var(--e6) var(--e5);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); box-shadow: var(--ombre-2);
}
.connexion h1 { font-size: 26px; color: var(--encre); display: flex; align-items: center; gap: var(--e3); }
.connexion h1 img { width: 44px; height: 44px; }
.connexion .sous-titre { color: var(--encre-2); font-size: var(--t-corps); font-weight: 600; margin: 0; }
.comptes { display: flex; flex-direction: column; gap: var(--e2); }
.comptes .btn-choix { min-height: 64px; font-size: var(--t-fort); justify-content: space-between; padding: 0 var(--e5); }
.comptes .btn-choix small { font-size: var(--t-legende); font-weight: 400; opacity: .85; }
.connexion input[type=password] { height: 64px; font-size: 24px; letter-spacing: .12em; }
.connexion .erreur { color: var(--rouge); min-height: 24px; font-weight: 700; }
.connexion .aide { color: var(--encre-3); font-size: var(--t-legende); }

/* =====================================================================
   Écrans plus étroits (iPad en portrait : hors cible, reste utilisable)
   ===================================================================== */
@container app (max-width: 1000px) {
  #ecran-reception.actif { grid-template-columns: 1fr; overflow: auto; }
  .lots-grille, .rest-grille, .cartes-graph { grid-template-columns: 1fr; }
  .modes-caisse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   Fiche client (08/11/2026) : écran hors barre d'onglets, ouvert depuis les autres écrans, imprimable
   ===================================================================== */
#ecran-client.actif > * { flex: none; }   /* l'écran défile ; aucun bloc (tableaux défilants compris) ne doit s'écraser à 0 px */
.fiche-entete { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fiche-titre { font-size: var(--t-titre); font-weight: 700; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; min-width: 0; }
.fiche-titre #fc-nom { font-size: 30px; }
.fiche-actions { display: flex; gap: var(--e2); flex-wrap: wrap; margin-left: auto; }
.puce-rouge { background: var(--rouge-pale); color: var(--rouge); }
.fiche-grille { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr); gap: var(--e4); align-items: start; }
.fiche-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiche-kpis .kpi { min-height: 112px; }
.fiche-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e2) var(--e4); margin: 0; font-size: var(--t-corps); }
.fiche-dl dt { font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); padding-top: 2px; }
.fiche-dl dd { margin: 0; overflow-wrap: anywhere; }
.fiche-dl .manque { color: var(--encre-3); font-style: italic; }
.fiche-dl a { color: var(--bleu); font-weight: 600; }
#fc-historique tr.courante td { background: var(--olive-voile); font-weight: 600; }
.lien-petit { min-height: 36px; padding: 0 6px; font-size: var(--t-legende); }   /* lien « fiche » dans une cellule compacte */
@container app (max-width: 1200px) {
  .fiche-grille { grid-template-columns: 1fr; }
  .fiche-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   Impression d'un écran (liste du jour, récap caisse, liste d'appel, fiche client)
   ===================================================================== */
@media print {
  body, .app { background: #fff; }
  .barre, .actions, .filtres, .entete-ecran .btn, .entete-ecran input, .entete-ecran select { display: none !important; }
  #ecran-client .fiche-actions, #fc-retour, #fc-camp, #ecran-client .actions-ligne, #fc-apports th:last-child, .lien-petit { display: none !important; }
  .fiche-grille { grid-template-columns: 1fr 2fr; }
  .fiche-kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi, .carte-graph { border-color: #999; break-inside: avoid; }
  .titre-section { break-after: avoid; }
  .ecran { padding: 0; overflow: visible; }
  .tableau { border-color: #767676; }
  .tableau th { background: #fff; border-bottom: 2px solid #000; color: #000; }
  .tableau td { height: auto; padding: 4px 8px; border-bottom: 1px solid #999; }
  .statut { background: none !important; color: #000 !important; border: 1px solid #000; }
  #ecran-suivi .filtres, #suivi-table .actions-col, #suivi-table td:last-child { display: none !important; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Écran Verger (agronomie du domaine) ---- */
.verger-phrase { font-size: var(--t-corps); color: var(--encre); margin: 0; }
.verger-note { margin: 0; max-width: 110ch; }
.verger-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.verger-carte { padding: var(--e4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand); display: flex; flex-direction: column; gap: var(--e2); }
.verger-carte h3 { font-size: var(--t-fort); font-weight: 700; display: flex; justify-content: space-between; gap: var(--e2); align-items: baseline; }
.verger-carte .indice { font-family: var(--police-chiffres); font-size: 28px; font-weight: 700; }
.verger-jauge { height: 10px; border-radius: 5px; background: var(--surface-calme); overflow: hidden; }
.verger-jauge i { display: block; height: 100%; background: var(--olive); }
.verger-carte p { margin: 0; }
.tableau td.cell-forte { background: var(--olive-pale); font-weight: 700; }
.tableau td.cell-faible { color: var(--encre-2); }
.tableau td.cell-vide { color: var(--encre-3); }
.tableau td.cell-encours { box-shadow: inset 0 0 0 2px var(--bleu); }
.verger-pistes ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--e1); }
.graph .point-lot { fill: var(--olive); fill-opacity: .55; stroke: var(--olive-fonce); stroke-width: 1; }
.graph .tendance { stroke: var(--ocre); stroke-width: 2.5; stroke-dasharray: 6 4; }
.cartes-3-2 { grid-template-columns: 3fr 2fr; }
@container app (max-width: 1000px) { .cartes-3-2 { grid-template-columns: 1fr; } }
#ecran-verger > * { flex: none; }   /* l'écran défile : aucune section ne doit être écrasée */

/* =====================================================================
   Téléphone (11/11/2026, demande de Stéphane : « adapte selon le terminal utilisé »)
   Sous 1 000 px (iPad en portrait) : barre d'onglets qui défile au doigt, Réception en une colonne. Sous 700 px (téléphone) : étiquettes au-dessus des boutons,
   tableaux qui défilent sur place, dialogues pleine largeur. Les zones tactiles restent ≥ 56 px.
   iPad en paysage et PC : rien ne change.
   ===================================================================== */
@container app (max-width: 1000px) {
  /* une colonne : l'écran défile en entier, les deux colonnes gardent leur hauteur naturelle (la grille écrasait la colonne client) */
  #ecran-reception.actif { display: flex; flex-direction: column; overflow: auto; }
  #ecran-reception .colonne { overflow: visible; flex: none; }
  #ecran-reception .resultats { overflow: visible; }
  /* Lots : les deux panneaux l'un sous l'autre, à leur hauteur naturelle (sinon la liste des apports en attente était écrasée) */
  .lots-grille { display: flex; flex-direction: column; flex: none; }
  .lots-grille > .colonne, .rest-grille > .colonne { overflow: visible; flex: none; }
}
@container app (max-width: 1100px) {   /* 1 100 et non 1 000 : sur un iPad de 1 024 px en paysage, onglets + campagne ne tenaient pas non plus */
  /* barre : les onglets défilent au doigt, le menu Bureau s'ouvre sous la barre à droite, la campagne et l'heure laissent la place aux onglets */
  .onglets { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { flex: none; }
  .bureau { position: static; flex: none; }
  .groupe-bureau { position: fixed; top: calc(var(--barre-h) + 6px); left: auto; right: var(--e2); min-width: 0; width: min(320px, calc(100% - 16px)); }
  .barre-campagne { display: none; }
}
/* iPad en paysage : la Liste du jour (12 colonnes) et l'Historique (14) dépassaient la largeur de l'écran, le dernier bouton était hors champ */
@container app (max-width: 1300px) {
  #jour-table :is(th, td) { padding-left: 4px; padding-right: 4px; }   /* 4 px depuis l'ajout du bouton « Dernier » (11/11/2026) */
  #hist-table :is(th, td) { padding-left: 4px; padding-right: 4px; }
  #jour-table .statut-select { width: 116px; min-width: 0; }
  #jour-table td.actions-ligne .btn { padding-left: 8px; padding-right: 8px; margin-left: 2px; }
}
/* iPad en portrait et petit iPad en paysage (1 024 px) : ces deux listes larges passent en cartes sur 4 colonnes (mêmes règles que les cartes du téléphone, plus bas) */
@container app (max-width: 1100px) {
  table.tableau.cartes-tab, .tableau-defilant > table.tableau.cartes-tab { display: block; overflow: visible; background: none; border: 0; border-radius: 0; }
  .cartes-tab thead { display: none; }
  .cartes-tab tbody, .cartes-tab tfoot { display: flex; flex-direction: column; gap: var(--e2); }
  .cartes-tab tfoot { margin-top: var(--e2); }
  .cartes-tab tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2) var(--e3); align-items: start;
    padding: var(--e3); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand);
  }
  .cartes-tab tr.selectionne { border-color: var(--olive); background: var(--olive-voile); }
  .cartes-tab tr.courante { border-color: var(--olive); }
  .cartes-tab td, .cartes-tab tfoot td {
    display: flex; flex-direction: column; gap: 2px; height: auto; min-width: 0; padding: 0; border: 0; background: none !important; box-shadow: none !important;
    text-align: left; white-space: normal; overflow-wrap: anywhere; border-radius: 0;
  }
  .cartes-tab td::before { content: attr(data-titre); font-size: var(--t-legende); font-weight: 700; color: var(--encre-3); }
  .cartes-tab td[data-titre=""]::before, .cartes-tab td:not([data-titre])::before { content: none; }
  .cartes-tab td:empty { display: none; }
  .cartes-tab td.num { text-align: left; white-space: normal; }
  .cartes-tab td > .statut, .cartes-tab td > .puce, .cartes-tab td > .pastille-retard { align-self: flex-start; }
  .cartes-tab td[colspan] { grid-column: 1 / -1; }
  .cartes-tab td.actions-ligne, .cartes-tab td:last-child:has(button) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--e2); text-align: left; }
  .cartes-tab td.actions-ligne .btn { margin-left: 0; flex: 1 1 auto; }
  .cartes-tab td .btn, .cartes-tab td .btn-choix { min-height: var(--touche); }
  .cartes-tab td.case-cocher, .cartes-tab td:first-child:has(input[type=checkbox]) { width: auto; text-align: left; grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .cartes-tab td select, .cartes-tab td input:not([type=checkbox]) { width: 100%; min-width: 0; }
  .cartes-tab .etat-vide { padding: var(--e3) 0; }
}
@container app (max-width: 700px) {
  /* barre */
  .barre { gap: var(--e2); padding-right: var(--e2); }
  .onglet { padding: 0 12px; font-size: 16px; }
  .groupe-bureau .onglet { font-size: 18px; }
  .btn-barre { padding: 0 10px; font-size: 15px; }

  /* écrans */
  .ecran { padding: var(--e3); gap: var(--e3); }
  .entete-ecran { gap: var(--e2); }
  .ecran .btn { max-width: 100%; white-space: normal; text-align: center; }   /* un libellé long passe sur deux lignes au lieu d'élargir l'écran */
  #btn-lot-melange, #btn-attente-tous { flex: 1 1 100%; }
  .entete-ecran h2, .titre-section { font-size: var(--t-fort); }

  /* Réception */
  .champ-poids { height: 76px; padding: 0 var(--e3); gap: var(--e2); }
  .champ-poids input[type=number], .champ-poids input { font-size: 32px; }
  .champ-net { height: 108px; padding: 0 var(--e4); }
  .champ-net input[type=number], .champ-net input { font-size: 60px; }
  .champ-poids .message-champ { left: var(--e4); bottom: 8px; font-size: var(--t-legende); }
  .mode, .choix, .ligne-choix { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .mode-libelle, .choix > .etiquette, .ligne-choix > .etiquette { padding-top: 0; }
  .btn-palox { margin-left: 0; }
  .pesees-ligne { flex-wrap: wrap; gap: var(--e2); }
  .pesees-liste:empty { display: none; }
  #btn-pesee-plus { flex: 1 1 100%; }
  .actions {
    position: sticky; bottom: calc(-1 * var(--e3)); z-index: 5; margin-top: var(--e3);
    grid-template-columns: 1fr 1.3fr; gap: var(--e2); padding: var(--e2) 0 var(--e3); background: var(--fond);
  }
  #btn-enregistrer { font-size: 16px; padding-left: var(--e2); padding-right: var(--e2); }
  #btn-enregistrer-seul { font-size: 20px; }
  .recap { font-size: var(--t-corps); }
  .recap .prix { margin-left: 0; }

  /* grilles */
  .grille2, .dl-huile, .fiche-grille { grid-template-columns: minmax(0, 1fr); }
  .modes-caisse, .fiche-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis, .verger-cartes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .fiche-titre #fc-nom { font-size: 24px; }
  .fiche-actions { margin-left: 0; }

  /* Lots : numéro et infos sur une ligne, chiffres (rendement, huile) dessous */
  .lot-carte { grid-template-columns: 72px minmax(0, 1fr); gap: var(--e2) var(--e3); padding: var(--e3); }
  .lot-carte .lot-chiffres { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
  .lot-carte .lot-chiffres .rdt { display: inline; }
  .verger-carte .indice { font-size: 24px; overflow-wrap: anywhere; }

  /* tableaux de chiffres (comparatif des campagnes, domaine, verger) : ils défilent sur place */
  table.tableau { display: block; max-width: 100%; overflow-x: auto; }
  .tableau-defilant > table.tableau { display: table; max-width: none; }

  /* listes : une carte par ligne, « titre : valeur » (les titres viennent de data-titre, posé par app.js) */
  table.tableau.cartes-tel, .tableau-defilant > table.tableau.cartes-tel { display: block; overflow: visible; background: none; border: 0; border-radius: 0; }
  .cartes-tel thead { display: none; }
  .cartes-tel tbody, .cartes-tel tfoot { display: flex; flex-direction: column; gap: var(--e2); }
  .cartes-tel tfoot { margin-top: var(--e2); }
  .cartes-tel tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e3); align-items: start;
    padding: var(--e3); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-grand);
  }
  .cartes-tel tr.selectionne { border-color: var(--olive); background: var(--olive-voile); }
  .cartes-tel tr.courante { border-color: var(--olive); }
  .cartes-tel td, .cartes-tel tfoot td {
    display: flex; flex-direction: column; gap: 2px; height: auto; min-width: 0; padding: 0; border: 0; background: none !important; box-shadow: none !important;
    text-align: left; white-space: normal; overflow-wrap: anywhere; border-radius: 0;
  }
  .cartes-tel td::before { content: attr(data-titre); font-size: var(--t-legende); font-weight: 700; color: var(--encre-3); }
  .cartes-tel td[data-titre=""]::before, .cartes-tel td:not([data-titre])::before { content: none; }
  .cartes-tel td:empty { display: none; }
  .cartes-tel td.num { text-align: left; white-space: normal; }
  .cartes-tel td > .statut, .cartes-tel td > .puce, .cartes-tel td > .pastille-retard { align-self: flex-start; }
  .cartes-tel td[colspan] { grid-column: 1 / -1; }
  .cartes-tel td.actions-ligne, .cartes-tel td:last-child:has(button) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--e2); text-align: left; }
  .cartes-tel td.actions-ligne .btn { margin-left: 0; flex: 1 1 auto; }
  .cartes-tel td .btn, .cartes-tel td .btn-choix { min-height: var(--touche); }
  .cartes-tel td.case-cocher, .cartes-tel td:first-child:has(input[type=checkbox]) { width: auto; text-align: left; grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .cartes-tel td select, .cartes-tel td input:not([type=checkbox]) { width: 100%; min-width: 0; }
  .cartes-tel .etat-vide { padding: var(--e3) 0; }
  .cartes-tab tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* filtres : deux par ligne, boutons en pleine largeur */
  .filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e3); padding: var(--e3); align-items: end; }
  .filtres input, .filtres select, .filtres input[type=search] { width: 100%; min-width: 0; }
  .filtres label.case, .filtres > .btn, .filtres > button, .filtres > .pousse, .filtres > div, .filtres > span { grid-column: 1 / -1; margin-left: 0; }

  /* recherche client : nom au-dessus, détail dessous */
  .resultats li { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--e3) var(--e4); }

  /* messages : toute la largeur, au-dessus des boutons du bas */
  .toast { left: var(--e3); right: var(--e3); bottom: var(--e3); max-width: none; font-size: var(--t-corps); padding: var(--e3) var(--e4); }

  /* dialogues et messages */
  dialog, .dialogue { width: calc(100vw - 16px); max-width: none; max-height: 92vh; padding: var(--e4); }
  .dialogue-actions { margin-top: var(--e4); }
  .dialogue-actions .btn { flex: 1 1 auto; }
  .dialogue-actions .btn-grand { flex: 1 1 100%; }
}

/* (11/11/2026) dernier client de la session : ligne en surbrillance dans la Liste du jour, les apports en attente et le lot */
.tableau tr.dernier-session > td { background: var(--ocre-pale); }
.tableau tr.dernier-session > td:first-child { box-shadow: inset 5px 0 0 var(--ocre); }
.pastille-dernier { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ocre); color: #fff; font-size: var(--t-legende); font-weight: 700; white-space: nowrap; }
.btn-cocher-dernier { border-color: var(--ocre); color: var(--ocre); font-weight: 700; }
.btn-dernier.actif { background: var(--ocre); border-color: var(--ocre); color: #fff; }
.bidons-notes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.bidons-notes > input { flex: 1 1 200px; min-width: 0; }
/* iPad en paysage : en tableau, le bouton « Dernier » se réduit au drapeau pour que la ligne tienne dans l'écran */
@container app (min-width: 1100.01px) and (max-width: 1500px) { #jour-table .btn-dernier .lib { display: none; } #jour-table .btn-dernier { padding-left: 12px; padding-right: 12px; } }
.ligne-palox { align-items: center; }
.groupe-session { display: inline-flex; align-items: center; gap: var(--e3); margin-left: var(--e4); }
.ligne-palox .etiquette-session { font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); }
.btn-dernier-bon.actif { background: var(--ocre); border-color: var(--ocre); color: #fff; }
small.bidons { font-weight: 700; color: var(--encre-2); white-space: nowrap; }
@container app (max-width: 1100px) { .cartes-tab tr.dernier-session, .cartes-tel tr.dernier-session { background: var(--ocre-pale); border-color: var(--ocre); border-width: 2px; } }
/* téléphone : « Actualiser » réduit à une flèche, pour laisser la place aux onglets */
@container app (max-width: 700px) { #btn-actualiser { font-size: 0; padding: 0 12px; } #btn-actualiser::before { content: "↻"; font-size: 22px; line-height: 1; } }

/* (11/11/2026) lot et huile en une seule étape : barre collée en bas de la liste dès qu'un apport est coché */
.lot-rapide { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); padding: var(--e3);
  background: var(--surface); border: 2px solid var(--olive); border-radius: var(--r-grand); box-shadow: 0 -4px 16px rgba(0, 0, 0, .14); }
.lr-tete { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: baseline; }
.lr-saisie { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.lr-saisie .boutons { flex-wrap: nowrap; }
.lr-saisie input { flex: 1 1 150px; min-width: 0; min-height: var(--touche); font-size: var(--t-fort); font-weight: 700; text-align: right; }
.lr-calc { font-variant-numeric: tabular-nums; color: var(--encre-2); }