/*
 * Ter@conso : feuille de style commune des écrans (F84).
 *
 * Reprise des maquettes (docs/maquettes/terconso-accueil.html et
 * terconso-preparation-commande.html) : couleurs de la terre et de la pomme de
 * terre, titres et chiffres en Archivo à largeur variable, texte courant en
 * Atkinson Hyperlegible, lisible au soleil. Tout se fait au doigt, sur tablette :
 * aucune cible tactile de moins de 44 px. Sobre et chaleureux : ni dégradé, ni
 * animation gratuite ; une ombre à peine visible sous les cartes.
 *
 * Le guide des écrans (docs/guide-des-ecrans.md) décrit les jetons et les composants
 * de cette feuille, avec leurs classes : c'est lui que suivent les nouveaux écrans.
 *
 * Aucune ressource tierce : les polices sont servies par le serveur lui-même
 * (static/fonts/, licences OFL à côté des fichiers), les icônes aussi (static/icones/).
 *
 * Sommaire
 *   1. Polices
 *   2. Jetons : couleurs (clair, sombre), typographie, espacements, rayons, ombres
 *   3. Base
 *   4. Mise en page
 *   5. Bandeau, choix du site et de la campagne, intervention du support
 *   6. Boutons et gestes du jour
 *   7. Pastilles et filtres
 *   8. Cartes et listes
 *   9. Tableaux
 *  10. Formulaires
 *  11. Messages et alertes
 *  12. Connexion et pages d'erreur
 *  13. Utilitaires
 *  14. Référentiels : recherche, fenêtre superposée
 *  15. Petits écrans, contraste renforcé, mouvement, impression
 */

/* 1. Polices ------------------------------------------------------------------ */

/* Archivo, police variable : graisse 100 à 900, largeur 62 % à 125 % (font-stretch). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Atkinson Hyperlegible : normal et gras, droit et italique. Le jeu « latin »
   couvre le français (é, œ, €, espace insécable U+00A0 des milliers, celle du format
   de Django en français, pour les prix comme pour les poids) ; « latin-ext » n'est
   téléchargé que si un nom en a besoin. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-ext-700-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Jetons ------------------------------------------------------------------- */

/* Couleurs des maquettes. Le thème suit le réglage de la tablette ; l'attribut
   data-theme="light" ou "dark" sur <html> l'impose. Un écran n'écrit jamais une
   couleur en dur : il prend un jeton. */
:root {
  --terre: #3a2a1f;        /* sol labouré : bandeau, texte fort, bouton fort */
  --chair: #f2cf6b;        /* chair de pomme de terre : action principale, site choisi */
  --peau: #b8895a;         /* peau et bois du palox : accents, liens secondaires */
  --fane: #3f6b35;         /* fane : stock disponible, réussite, état actif */
  --sillon: #eceee4;       /* fond des pages, gris vert de terre sèche */
  --gel: #b42318;          /* alerte : stock négatif, erreur, action dangereuse */
  --surface: #ffffff;      /* cartes, champs, tableaux */
  --surface-2: #f5f5ee;    /* en-têtes de tableau, survol des lignes, codes */
  --texte: #2b2019;
  --doux: #6a5d52;         /* texte secondaire, aides, libellés discrets */
  --trait: #d6d3c4;        /* bordures fines */
  --peau-pale: #e8d9c4;    /* pastille neutre, message d'information, préfixe */
  --fane-pale: #dfe8d6;    /* réussite */
  --gel-pale: #f8e1dd;     /* erreur */
  --chair-pale: #fbefc9;   /* avertissement, ligne nouvelle */
  --chair-fonce: #e8c55a;  /* survol de l'action principale */
  --sur-terre: #f6efe4;    /* texte sur le bandeau */
  --sur-terre-doux: #cdbba6; /* texte secondaire sur le bandeau */
  --terre-trait: #5b4636;  /* contour des pastilles du bandeau, filet du bandeau */
  --terre-support: #4a1f14; /* bandeau du support de l'éditeur */
  --sur-chair: #3a2a1f;    /* texte sur la couleur chair, dans les deux thèmes */
  --contour: var(--terre); /* contour des boutons secondaires et des tuiles */
  --anneau: var(--terre);  /* anneau de focus hors du bandeau */
  --ombre: 0 1px 2px rgb(58 42 31 / .06), 0 3px 10px rgb(58 42 31 / .05); /* cartes */
  --ombre-fenetre: 0 18px 48px rgb(28 21 16 / .35);
  --chevron: url("../icones/chevron.svg"); /* flèche des listes de choix */

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --corps: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  /* Échelle des textes : petit (aides, pastilles, en-têtes), courant, grand (saisies). */
  --texte-petit: 15px;
  --texte-courant: 17px;
  --texte-grand: 19px;

  /* Espacements : 4, 8, 12, 16, 24, 32. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --rayon: 12px;           /* boutons, champs, tableaux, messages */
  --rayon-petit: 8px;      /* chips, codes */
  --rayon-grand: 16px;     /* cartes, tuiles, fenêtres */
  --cible: 44px;           /* cible tactile minimale */
  --cible-champ: 52px;     /* hauteur des champs de saisie et des boutons */
  --largeur: 1120px;       /* largeur utile des écrans */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --terre: #1c1510; --chair: #f2cf6b; --peau: #c89a6a; --fane: #7fb06d; --sillon: #231c16;
    --gel: #f0857a; --surface: #2e241c; --surface-2: #392e25; --texte: #f3ebdf; --doux: #bfae9c;
    --trait: #4a3c30; --peau-pale: #4a3a2b; --fane-pale: #2f4029; --gel-pale: #4a2420;
    --chair-pale: #4d4122; --chair-fonce: #e8c55a; --sur-terre: #f6efe4; --terre-support: #2c110b;
    --contour: #8a7360; --anneau: #f2cf6b;
    --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 3px 10px rgb(0 0 0 / .2);
    --chevron: url("../icones/chevron-clair.svg");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --terre: #1c1510; --chair: #f2cf6b; --peau: #c89a6a; --fane: #7fb06d; --sillon: #231c16;
  --gel: #f0857a; --surface: #2e241c; --surface-2: #392e25; --texte: #f3ebdf; --doux: #bfae9c;
  --trait: #4a3c30; --peau-pale: #4a3a2b; --fane-pale: #2f4029; --gel-pale: #4a2420;
  --chair-pale: #4d4122; --chair-fonce: #e8c55a; --sur-terre: #f6efe4; --terre-support: #2c110b;
  --contour: #8a7360; --anneau: #f2cf6b;
  --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 3px 10px rgb(0 0 0 / .2);
  --chevron: url("../icones/chevron-clair.svg");
  color-scheme: dark;
}

/* 3. Base --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--sillon);
  color: var(--texte);
  font: var(--texte-courant)/1.5 var(--corps);
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--anneau); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--peau); }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-stretch: 112%; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0; }
/* Chiffres : alignés en colonnes, dans la police des titres. */
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
/* Identifiants et codes (fermea.alice, S1) : une puce discrète, en Archivo. */
code {
  font-family: var(--display);
  font-size: .95em;
  padding: 1px 6px;
  border-radius: var(--rayon-petit);
  background: var(--surface-2);
}
h1 code { padding-inline: 10px; }
del { color: var(--doux); }
ins { text-decoration: none; font-weight: 700; }
details > summary { cursor: pointer; font-weight: 700; min-height: var(--cible); display: flex; align-items: center; }

/* 4. Mise en page ------------------------------------------------------------- */

.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-inline: var(--esp-4);
  padding-block: 28px calc(56px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 28px;
}
.page > * { min-width: 0; }
/* En-tête d'écran : fil d'Ariane ou contexte (sur-titre), titre, phrase d'aide. */
.entete-page { display: grid; gap: var(--esp-2); }
.entete-page .sur-titre { color: var(--doux); font-size: var(--texte-petit); }
.entete-page .sur-titre a { text-decoration-color: var(--peau); }
.entete-page .sur-titre a::before { content: "\2039\00a0"; color: var(--peau); }
.entete-page .sur-titre a:hover { color: var(--texte); }
.entete-page > .aide { max-width: 72ch; }
.pile { display: grid; gap: var(--esp-4); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--esp-5); align-items: start; }

/* Lien d'évitement : visible seulement au clavier. */
.evitement {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--chair); color: var(--sur-chair); padding: 12px 18px; border-radius: 10px;
  font-weight: 700;
}
.evitement:focus { top: 12px; }

/* 5. Bandeau ------------------------------------------------------------------ */

/* Deux rangées séparées d'un filet : le service et qui est connecté (marque, compte,
   liens), puis où l'on travaille (exploitation, campagne, site). */
.bandeau {
  --anneau: var(--chair);
  background: var(--terre);
  color: var(--sur-terre);
  padding-inline: var(--esp-4);
  padding-top: env(safe-area-inset-top, 0px);
}
.bandeau-in {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-block: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}
.contexte {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-block: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  border-top: 1px solid var(--terre-trait);
}
.marque {
  font: 800 22px/1 var(--display);
  font-stretch: 125%;
  letter-spacing: .01em;
  color: var(--sur-terre);
  text-decoration: none;
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
}
.marque span { color: var(--chair); }
.exploitation { font: 700 17px/1.2 var(--display); font-stretch: 112%; margin-right: 8px; }
.campagne { color: var(--sur-terre-doux); font-size: var(--texte-petit); display: flex; gap: 8px; align-items: center; }
.campagne select {
  min-height: var(--cible);
  border: 2px solid var(--terre-trait);
  border-radius: 999px;
  background: var(--terre) url("../icones/chevron-clair.svg") no-repeat right 14px center / 14px;
  color: var(--sur-terre);
  padding: 6px 38px 6px 16px;
  font-weight: 700;
  font-size: var(--texte-petit);
  appearance: none;
}
.compte { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.qui { font-size: var(--texte-petit); color: var(--sur-terre-doux); }
.qui strong { color: var(--sur-terre); font-weight: 700; }
.deconnexion { margin: 0; }

/* Navigation principale (Accueil, Lots, Commandes, Référentiels ; l'espace du support pour le
   support sans exploitation) : des pastilles du bandeau, l'écran courant en chair. Sur
   téléphone, elle devient une barre en bas de l'écran (section 15). */
.navigation { display: flex; gap: 6px; flex-wrap: wrap; }

/* Menu du compte : un <details> replié (sans JavaScript) dont le résumé dit qui est
   connecté ; ouvert, un petit panneau clair sous lui (Utilisateurs, Mon compte…). */
.menu-compte { position: relative; }
.menu-compte > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: block;
  min-height: var(--cible);
  line-height: 22px;
  padding: 11px 24px 11px 4px;
  border-radius: 999px;
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: url("../icones/chevron-clair.svg") center / contain no-repeat;
  transform: translateY(-50%);
  transition: transform .15s;
}
.menu-compte[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.menu-liens {
  --anneau: var(--contour);
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 220px;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-fenetre);
}
.menu-liens a {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: 6px 14px;
  border-radius: var(--rayon-petit);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--texte-petit);
  white-space: nowrap;
}
.menu-liens a:hover { background: var(--surface-2); }
.menu-liens a[aria-current="page"] { background: var(--peau-pale); }

/* Boutons du bandeau (maquettes : .retour, pastilles de site) et navigation. */
.bouton-bandeau, .sites button, .navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--terre-trait);
  color: var(--sur-terre);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: var(--cible);
  font-weight: 700;
  font-size: var(--texte-petit);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.bouton-bandeau:hover, .sites button:hover, .navigation a:hover { border-color: var(--sur-terre-doux); background: rgb(255 255 255 / .06); }
.bouton-bandeau[aria-current="page"], .navigation a[aria-current="page"] { border-color: var(--chair); color: var(--chair); }

/* Pastilles de site : une par site actif, plus « Tous les sites ». */
.sites { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.sites button[aria-pressed="true"] { background: var(--chair); border-color: var(--chair); color: var(--sur-chair); }
.sites button small { font-weight: 400; margin-left: 6px; opacity: .8; }
.site-seul { font-size: var(--texte-petit); color: var(--sur-terre-doux); }
.site-seul strong { color: var(--sur-terre); }

/* Support de l'éditeur : le bandeau change de teinte, et une bande jaune rappelle
   sur chaque écran que l'on intervient sur une exploitation cliente. */
.bandeau.support { background: var(--terre-support); }
.marque-support {
  font: 800 13px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--chair);
  color: var(--sur-chair);
  padding: 6px 10px;
  border-radius: 6px;
}
.intervention {
  --anneau: var(--terre);
  background: var(--chair);
  color: var(--sur-chair);
  border-bottom: 4px solid var(--terre-support);
  padding-inline: var(--esp-4);
}
.intervention-in {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-block: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: 16px;
}
.intervention strong { font-weight: 700; }
/* « Terminer l'intervention », à droite de la bande (sous le texte sur petit écran). */
.intervention-in > p { flex: 1 1 320px; }
.fin-intervention { margin: 0; }
.fin-intervention .bouton { min-height: var(--cible); }

/* 6. Boutons ------------------------------------------------------------------ */

/* Secondaire par défaut (contour terre, fond blanc) ; principal (chair, un seul par
   écran), fort (terre plein : action de second rang à mettre en avant), alerte
   (contour rouge : désactiver, supprimer), discret (lien souligné). */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cible-champ);
  padding: 8px 22px;
  border-radius: var(--rayon);
  border: 2px solid var(--contour);
  background: var(--surface);
  color: var(--texte);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--surface-2); }
.bouton:active, .geste:active { transform: translateY(1px); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Action principale de l'écran : une seule par écran. */
.bouton-principal {
  background: var(--chair);
  border-color: var(--chair);
  color: var(--sur-chair);
  font-family: var(--display);
  font-stretch: 112%;
  font-size: var(--texte-grand);
}
.bouton-principal:hover { background: var(--chair-fonce); border-color: var(--chair-fonce); }
.bouton-fort { background: var(--terre); border-color: var(--terre); color: var(--sur-terre); }
.bouton-fort:hover { background: var(--terre-trait); border-color: var(--terre-trait); }
.bouton-alerte { background: transparent; border-color: var(--gel); color: var(--gel); }
.bouton-alerte:hover { background: var(--gel-pale); }
.bouton-discret { background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.bouton-discret:hover { background: transparent; text-decoration-color: var(--peau); }
.champ > .bouton-discret { justify-self: start; padding-inline: 4px; }
/* Bouton d'une cellule de tableau ou d'une pagination : plus bas, toujours 44 px. */
.bouton-petit { min-height: var(--cible); padding: 4px 16px; font-size: var(--texte-petit); border-radius: 10px; }
.bouton-large { width: 100%; min-height: 64px; font-size: 21px; }
.boutons { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }

/* Gestes du jour : grandes tuiles d'action de l'accueil, et tuiles des référentiels. */
.gestes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--esp-3); }
.geste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  min-height: 96px;
  padding: 18px 20px;
  border-radius: var(--rayon-grand);
  border: 2px solid var(--contour);
  background: var(--surface);
  color: var(--texte);
  text-decoration: none;
  transition: background-color .15s, box-shadow .15s;
}
.geste:hover { background: var(--surface-2); box-shadow: var(--ombre); }
.geste strong { font: 700 21px/1.2 var(--display); font-stretch: 112%; }
.geste span { color: var(--doux); font-size: var(--texte-petit); }
.geste.principal { background: var(--chair); border-color: var(--chair); color: var(--sur-chair); }
.geste.principal:hover { background: var(--chair-fonce); border-color: var(--chair-fonce); }
.geste.principal span { color: #5b4636; }

/* 7. Pastilles et filtres ----------------------------------------------------- */

/* Pastille d'état : neutre (peau), fane (actif, réussite), gel (désactivé, erreur),
   chair (à noter : « vous », « site affiché », « obligatoire »). */
.pastille {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--peau-pale);
  color: var(--texte);
  white-space: nowrap;
  vertical-align: middle;
}
.pastille.gel { background: var(--gel-pale); color: var(--gel); }
.pastille.fane { background: var(--fane-pale); color: var(--fane); }
.pastille.chair { background: var(--chair-pale); color: var(--texte); }

/* Filtres en pastilles, sur fond clair (Actifs / Désactivés / Tous, variétés de
   l'accueil, navigation de l'espace du support). */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.filtres button, .filtres a {
  display: inline-flex; align-items: center;
  border: 2px solid var(--trait); background: var(--surface); color: var(--texte);
  border-radius: 999px; padding: 8px 16px; min-height: var(--cible);
  font-size: var(--texte-petit); font-weight: 700; text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.filtres button:hover, .filtres a:hover { border-color: var(--peau); }
.filtres [aria-pressed="true"], .filtres [aria-current="true"], .filtres [aria-current="page"] {
  border-color: var(--terre); background: var(--terre); color: var(--sur-terre);
}

/* 8. Cartes et listes --------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: var(--esp-5);
  display: grid;
  gap: var(--esp-4);
  align-content: start;
}
.carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.carte-tete .aide { margin-left: auto; }
.carte-tete .bouton { margin-left: auto; }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartes > li {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}
.cartes .code { font: 800 23px/1 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.cartes .actuel { box-shadow: inset 6px 0 0 var(--chair); border-color: var(--contour); }
/* Une carte dans une carte (liste de sites de l'accueil) : fond légèrement teinté. */
.carte .cartes > li { background: var(--surface-2); }

/* Étapes numérotées d'un écran (préparation de commande). */
.etape { display: grid; gap: 14px; }
.etape h2 { display: flex; gap: 12px; align-items: center; }
.etape h2 .n {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--terre); color: var(--sur-terre); font-size: 18px;
}

/* Liste de termes et valeurs chiffrées (bilan de l'accueil, d'un import). */
.bilan { display: grid; gap: 2px; margin: 0; }
.bilan > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 10px; border-bottom: 1px solid var(--trait);
}
.bilan > div:last-child { border-bottom: 0; }
.bilan dt { color: var(--doux); }
.bilan dd { margin: 0; font-size: 22px; font-weight: 700; }

/* Fiche : libellés et valeurs (Mon compte, fiche d'un utilisateur, historique). */
.fiche { display: grid; margin: 0; }
.fiche > div {
  display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 4px 16px;
  padding-block: 10px; border-bottom: 1px solid var(--trait);
}
.fiche > div:last-child { border-bottom: 0; }
.fiche dt { color: var(--doux); }
.fiche dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* État vide : une phrase accueillante, et le geste qui remplit la liste. */
.vide {
  padding: var(--esp-6) var(--esp-5);
  text-align: center;
  color: var(--doux);
  background: var(--surface);
  border-radius: var(--rayon);
  border: 1px dashed var(--trait);
  display: grid;
  gap: 14px;
  justify-items: center;
}
.vide .bouton { color: var(--texte); }

/* 9. Tableaux ----------------------------------------------------------------- */

/* Dans .table-wrap : bords arrondis, défilement horizontal sur petit écran plutôt
   qu'un tableau écrasé. En-tête discret sur fond teinté ; les chiffres (classe n) à
   droite, en chiffres tabulaires ; une ligne cliquable se touche en entier (a.ligne). */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table-wrap table { min-width: 560px; }
caption { text-align: left; padding: 12px 16px 0; font-weight: 700; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: 14px; color: var(--doux); font-weight: 700; }
thead th { background: var(--surface-2); padding-block: 10px; white-space: nowrap; }
td.n, th.n { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:has(a.ligne):hover td { background: var(--surface-2); }
tfoot td { font-weight: 700; border-top: 2px solid var(--trait); border-bottom: 0; }
tr.nouveau td { background: var(--chair-pale); }
tr.annule td { color: var(--doux); text-decoration: line-through; }
tr.inactif td { color: var(--doux); }
tr.desactivee td { color: var(--doux); }
/* Ligne cliquable : toute la cellule est une cible tactile. */
td a.ligne { display: block; min-height: var(--cible); margin: -12px -16px; padding: 12px 16px; text-decoration: none; }
td a.ligne:hover { text-decoration: underline; text-decoration-color: var(--peau); }
td .bouton { margin-block: -6px; }

/* 10. Formulaires ------------------------------------------------------------- */

.formulaire { display: grid; gap: 20px; }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ > label, .champ > .libelle, fieldset > legend { font-weight: 700; font-size: var(--texte-petit); }
.champ.en-erreur > label, fieldset.en-erreur > legend { color: var(--gel); }
.champ input:not([type="checkbox"], [type="radio"]),
.champ select,
.champ textarea {
  min-height: var(--cible-champ);
  width: 100%;
  border: 2px solid var(--trait);
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--surface);
  font-size: var(--texte-grand);
  transition: border-color .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--contour); outline-offset: 2px; }
.champ textarea { min-height: 120px; }
.champ select {
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 44px;
}
.champ input[type="file"] { padding-block: 12px; font-size: 16px; }
.champ input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; color: var(--texte); background: var(--surface-2);
  border: 2px solid var(--contour); border-radius: 10px; padding: 4px 14px; margin-right: 12px;
  min-height: 36px; cursor: pointer;
}
.champ [aria-invalid="true"], .champ.en-erreur input, .champ.en-erreur select { border-color: var(--gel); }
.aide { color: var(--doux); font-size: var(--texte-petit); }
.aide b, .aide code { color: var(--texte); }
/* Aide en liste (règles des mots de passe, par exemple). */
.aide ul { margin: 4px 0 0; padding-left: 20px; }
/* Filtre d'une liste (journal du support) : le choix, puis le bouton. */
.filtre-journal { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.erreur { color: var(--gel); font-weight: 700; font-size: var(--texte-petit); }
.erreur ul, ul.errorlist { margin: 0; padding: 0; list-style: none; }
ul.errorlist { color: var(--gel); font-weight: 700; font-size: var(--texte-petit); display: grid; gap: 2px; }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.facultatif { font-weight: 400; color: var(--doux); }

/* Saisie précédée d'un préfixe fixe : le code de l'exploitation devant le nom d'un
   identifiant (« fermea. » alice). */
.saisie-prefixee { display: flex; min-width: 0; }
.saisie-prefixee .prefixe {
  display: inline-flex; align-items: center; flex: none;
  padding-inline: 14px; border: 2px solid var(--trait); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--peau-pale);
  font: 700 19px var(--display); white-space: nowrap;
}
.champ .saisie-prefixee input { flex: 1 1 auto; min-width: 0; border-radius: 0 10px 10px 0; }

/* Case à cocher au doigt. */
.coche { display: flex; gap: 12px; align-items: center; min-height: var(--cible); cursor: pointer; }
.coche input { width: 24px; height: 24px; accent-color: var(--terre); flex: none; }

/* Choix parmi des cartes (profil d'un compte, lot à servir) : toute la carte se touche. */
.choix { display: grid; gap: 10px; }
.choix label {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  background: var(--surface); border: 2px solid var(--trait); border-radius: var(--rayon);
  padding: 14px 16px; cursor: pointer; min-height: 64px;
  transition: border-color .15s;
}
.choix label:hover { border-color: var(--peau); }
.choix label:has(input:checked) { border-color: var(--contour); box-shadow: inset 6px 0 0 var(--chair); }
.choix input { width: 24px; height: 24px; accent-color: var(--terre); }
.choix label > span { font-weight: 700; }

/* Compteur − / + pour un nombre de contenants. */
.compteur { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; }
.compteur button {
  min-height: 60px; border-radius: 10px; border: 2px solid var(--contour); background: var(--surface);
  font: 800 28px/1 var(--display);
}
.compteur button:hover { background: var(--surface-2); }
.champ .compteur input { text-align: center; font: 800 30px var(--display); font-variant-numeric: tabular-nums; }

/* 11. Messages et alertes ----------------------------------------------------- */

/* Message de Django ou d'un écran : information (peau), réussite (fane), avertissement
   (chair), erreur (gel). Un bouton peut suivre le texte. */
.messages { display: grid; gap: 10px; }
.message, .alerte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--rayon);
  border-left: 6px solid var(--peau);
  background: var(--peau-pale);
  color: var(--texte);
}
.message > p, .alerte > p { flex: 1 1 280px; }
.message-success { background: var(--fane-pale); border-left-color: var(--fane); }
.message-warning { background: var(--chair-pale); border-left-color: var(--chair); }
.message-error, .alerte { background: var(--gel-pale); border-left-color: var(--gel); }
.message-error strong, .alerte strong { color: var(--gel); }
.alerte .bouton { margin-left: auto; min-height: var(--cible); }
.message .bouton { min-height: var(--cible); }

/* Message bref en bas d'écran. */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--terre); color: var(--sur-terre); padding: 12px 20px; border-radius: 10px;
  font-size: var(--texte-petit); max-width: calc(100% - 32px); box-shadow: var(--ombre-fenetre);
}

/* 12. Connexion et pages d'erreur --------------------------------------------- */

.page-connexion { max-width: 520px; padding-top: 48px; }
.connexion { padding: 32px 28px; gap: 22px; }
.connexion h1 { font-size: clamp(30px, 6vw, 40px); }
.connexion .accroche { margin-top: -12px; }
.connexion .champ input { font-size: 21px; }
.page-erreur { max-width: 640px; padding-top: 48px; }
.page-erreur .carte { gap: 20px; }

/* 13. Utilitaires ------------------------------------------------------------- */

/* Texte lu par les lecteurs d'écran, invisible à l'œil. */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Bouton de validation d'un choix, inutile quand htmx envoie le choix de lui-même
   (classe posée sur <html> par terconso.js une fois htmx chargé). */
.htmx .sans-htmx { display: none; }
/* Indicateur de chargement htmx (les styles intégrés de htmx sont désactivés). */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request [type="submit"], .htmx-request.bouton { opacity: .7; }

/* 14. Référentiels ------------------------------------------------------------ */

/* Recherche d'une liste : la saisie, puis le bouton (masqué par rien : sans htmx, il
   envoie la recherche ; avec, la liste suit la frappe et Entrée garde son effet). */
.recherche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.recherche input[type="search"] { -webkit-appearance: none; appearance: none; }
/* Champ en lecture seule (consultation d'une fiche sans le droit de la modifier). */
.champ input:disabled, .champ select:disabled, .champ textarea:disabled {
  background-color: var(--sillon); color: var(--texte); border-style: dashed; opacity: 1;
}
.champ select:disabled { background-image: none; padding-right: 14px; }
/* Lien de création à la volée, sous la liste de choix qu'il complète. */
.champ > .a-la-volee { justify-self: start; padding-inline: 4px; }

/* Fenêtre superposée (création à la volée, F03, F08, F18), ouverte par terconso.js. */
dialog.fenetre {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  border: 0;
  border-radius: var(--rayon-grand);
  padding: 28px;
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--ombre-fenetre);
}
dialog.fenetre::backdrop { background: rgb(28 21 16 / .6); }
dialog.fenetre h2 { padding-bottom: 12px; border-bottom: 1px solid var(--trait); }

/* 15. Petits écrans, contraste renforcé, mouvement, impression ---------------- */

@media (max-width: 760px) {
  .page { padding-block: 20px 48px; gap: 22px; }
  .carte { padding: 18px 16px; }
  .bandeau-in, .contexte { gap: 6px 14px; }
  .recherche { grid-template-columns: minmax(0, 1fr); }
  /* Bandeau : « Se déconnecter » à droite de la marque, le menu du compte en dessous
     sur toute la largeur ; la navigation, en barre fixe en bas de l'écran, sous le pouce
     (la page et le message bref lui laissent la place). */
  .compte { display: contents; }
  .deconnexion { margin-left: auto; order: 1; }
  .menu-compte { order: 2; width: 100%; }
  .menu-compte > summary { padding-left: 0; }
  .menu-liens { left: 0; right: auto; }
  .sites button small { display: none; }
  .navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--terre);
    border-top: 1px solid var(--terre-trait);
  }
  .bandeau.support .navigation { background: var(--terre-support); }
  .navigation a { border-color: transparent; border-radius: 10px; min-height: 48px; padding-inline: 8px; }
  .navigation a[aria-current="page"] { background: var(--chair); border-color: var(--chair); color: var(--sur-chair); }
  body:has(.navigation) .page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(.navigation) .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .deux { grid-template-columns: minmax(0, 1fr); }
  .fiche > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .filtre-journal { grid-template-columns: minmax(0, 1fr); }
  .geste { min-height: 72px; }
  .alerte .bouton { margin-left: 0; }
  .carte-tete .aide, .carte-tete .bouton { margin-left: 0; }
  h2 { font-size: 20px; }
  dialog.fenetre { padding: 20px 16px; }
}
@media (max-width: 520px) {
  /* Boutons en pleine largeur, faciles à toucher d'un pouce. */
  .boutons > .bouton, .boutons > form, .boutons > form > .bouton { flex: 1 1 auto; width: 100%; }
  .page-connexion, .page-erreur { padding-top: 20px; }
}
@media (prefers-contrast: more) {
  :root { --trait: #8f8676; --doux: #4d4239; --surface-2: #ecece4; }
  .champ input:not([type="checkbox"], [type="radio"]), .champ select, .champ textarea { border-color: var(--doux); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bouton:active, .geste:active { transform: none; }
}
@media print {
  .bandeau, .intervention, .evitement, .boutons, .sans-htmx, .filtre-journal, .recherche, .navigation { display: none !important; }
  body { background: #fff; color: #000; }
  .page { padding: 0; }
  .carte, .table-wrap { box-shadow: none; }
}

/* --- Accueil et navigation (phase 2) --- */

/* Accueil de l'exploitation (stock/accueil.html, maquette terconso-accueil.html) : le
   chiffre du jour et son bilan côte à côte, les gestes du jour, puis les lots par variété,
   chacun dessiné en carrés : une tonne par carré (fane : disponible ; clair : déjà partie ;
   contour rouge : manquante, stock négatif). L'échelle de la légende est celle de la page. */
.page-accueil { gap: 32px; }
.jour { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.titre-stock { font: 500 19px/1.3 var(--corps); color: var(--doux); letter-spacing: 0; margin-bottom: 4px; }
.stock-total { font: 800 clamp(64px, 11vw, 124px)/.9 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.stock-total small { font-size: .32em; font-stretch: 112%; font-weight: 700; margin-left: 8px; color: var(--doux); letter-spacing: 0; }
.stock-total.negatif, .var-dispo.negatif, .dispo.negatif { color: var(--gel); }
.heure { margin-top: 10px; color: var(--doux); font-size: var(--texte-petit); max-width: 60ch; }
.stock-varietes { display: grid; gap: var(--esp-4); }
.lots-tete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.lots-tete h2 { font-size: 26px; }
.legende { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--doux); }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legende .d { background: var(--fane); }
.legende .e { background: var(--peau-pale); border: 1px solid var(--peau); }
.variete { display: grid; gap: 10px; }
.variete + .variete { margin-top: 18px; }
.var-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0 4px 8px; border-bottom: 3px solid var(--terre); }
.var-tete h3 { font: 800 28px/1.1 var(--display); font-stretch: 112%; }
.var-tete .n-lots { color: var(--doux); font-size: var(--texte-petit); }
.var-dispo { margin-left: auto; font: 800 30px/1 var(--display); font-stretch: 112%; color: var(--fane); }
.var-dispo small, .dispo small { font-size: 15px; font-weight: 700; color: var(--doux); margin-left: 4px; }
.lots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lot {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 150px;
  gap: 8px 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px 20px;
}
.lot-num { font: 800 23px/1 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
/* Le numéro mène à la fiche du lot : une cible de 44 px, soulignée au survol. */
.lot-num a { display: inline-block; padding-block: 11px; margin-block: -11px; text-decoration-color: transparent; }
.lot-num a:hover { text-decoration-color: var(--peau); }
.lot-num small { display: block; margin-top: 6px; font: 400 13px/1.2 var(--corps); color: var(--doux); }
.lot-info { min-width: 0; display: grid; gap: 8px; }
.lot-titre { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; color: var(--doux); font-size: var(--texte-petit); }
.palox { display: flex; flex-wrap: wrap; gap: 3px; }
.palox i { width: 11px; height: 11px; border-radius: 2px; background: var(--fane); }
.palox i.parti { background: var(--peau-pale); box-shadow: inset 0 0 0 1px var(--peau); }
.palox i.manque { background: transparent; box-shadow: inset 0 0 0 2px var(--gel); }
.lot-chiffres { text-align: right; }
.dispo { font: 800 30px/1 var(--display); font-stretch: 112%; color: var(--fane); }
.lot-chiffres p { margin-top: 6px; font-size: 14px; color: var(--doux); }
.accueil-vide p { max-width: 60ch; }

@media (max-width: 760px) {
  .page-accueil { gap: 24px; }
  .jour { grid-template-columns: minmax(0, 1fr); }
  .lots-tete h2 { font-size: 22px; }
  .lot { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .lot-num { grid-column: 1; white-space: nowrap; }
  .lot-chiffres { grid-column: 2; grid-row: 1; }
  .lot-info { grid-column: 1 / -1; }
  .legende { margin-left: 0; }
}

/* --- Écrans des lots (phase 2) --- */

/* Fiche d'un lot : le résumé sous le titre (variété en gros, site, campagne, producteur,
   pastilles), et le grand chiffre du stock disponible, en fane, en gel s'il est négatif. */
.lot-resume { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; color: var(--doux); }
.lot-resume strong { color: var(--texte); font: 700 21px/1.2 var(--display); font-stretch: 112%; }
.stock-lot { display: grid; gap: 4px; }
.stock-lot .dispo {
  font: 800 clamp(44px, 7vw, 68px)/1 var(--display); font-stretch: 112%; letter-spacing: -.01em;
  color: var(--fane);
}
.stock-lot .dispo.negatif { color: var(--gel); }
.stock-lot .dispo small { font-size: .36em; font-weight: 700; color: var(--doux); margin-left: 8px; letter-spacing: 0; }
/* Chiffre négatif dans un tableau (stock négatif, RG11). */
td.negatif { color: var(--gel); font-weight: 700; }
/* Formulaire d'ajout au bas d'une section de la fiche (parcelle, emplacement) : séparé de
   la liste par un filet ; trois champs côte à côte (travée, rangée, hauteur). */
.ajout { padding-top: var(--esp-4); border-top: 1px solid var(--trait); }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) {
  .trois { grid-template-columns: minmax(0, 1fr); }
}
/* Les deux cartes du haut de la fiche (stock, renseignements) : côte à côte au bureau,
   empilées dès la tablette portrait, où la liste des renseignements serait trop étroite. */
@media (max-width: 900px) {
  .colonnes-lot { grid-template-columns: minmax(0, 1fr); }
}
/* Dans un tableau, un numéro de lot et une pastille ne se coupent pas : le tableau défile
   dans son .table-wrap plutôt que de les plier sur trois lignes. */
.table-wrap .num, .table-wrap .pastille { white-space: nowrap; }

/* --- Saisie des entrées (phase 2) --- */

/* Saisie sur un lot, freinte d'un lot : la saisie à gauche, le lot et ce qui est déjà
   rentré à droite ; une seule colonne sur un écran étroit (stock/entrees/). */
.saisie-entree { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--esp-5); align-items: start; }
.saisie-entree > * { min-width: 0; }
/* Variété à côté du numéro de lot dans un titre d'écran. */
.titre-variete { display: block; font-size: .6em; font-weight: 500; color: var(--doux); letter-spacing: 0; }
/* Le lot en résumé : son numéro en grand, des libellés courts pour laisser la place aux
   parcelles. */
.carte-du-lot .lot-numero { font: 800 clamp(30px, 5vw, 40px)/1.1 var(--display); font-stretch: 112%; letter-spacing: -.01em; }
.carte-du-lot .fiche > div { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); }
/* Compteur sans ses boutons (JavaScript absent) : la saisie seule, toujours en grand. */
.compteur:not(:has(button)) { grid-template-columns: minmax(0, 1fr); }
.champ .compteur input { min-height: 60px; }
/* Poids saisi ou proposé : gros chiffres, lisibles au bâtiment. */
.poids-saisi .champ input { font: 800 30px var(--display); font-variant-numeric: tabular-nums; min-height: 64px; }
/* Options repliées d'une saisie (tare terre, pesée brute, nature). */
.options-saisie { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 4px 16px 0; }
.options-saisie[open] { padding-bottom: 16px; }
.options-saisie > summary { color: var(--doux); font-size: var(--texte-petit); }
.options-saisie > .pile { margin-top: 12px; }
/* Le repli montre son état : « + » fermé, « − » ouvert (le résumé en flex n'a plus de
   triangle). */
.options-saisie > summary::before {
  content: "+"; display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; margin-right: 12px;
  border: 2px solid var(--trait); border-radius: 8px; color: var(--texte); font-size: 18px; line-height: 1;
}
.options-saisie[open] > summary::before { content: "−"; }
/* Bilans et récapitulatifs : la ligne du total, un complément en petit, un stock négatif. */
.bilan .total { border-top: 2px solid var(--trait); margin-top: 4px; }
.bilan .total dt { color: var(--texte); font-weight: 700; }
.bilan dd small { font-size: var(--texte-petit); font-weight: 400; color: var(--doux); margin-left: 6px; }
.bilan dd.negatif { color: var(--gel); }
.chiffres-entree dd { font-size: 26px; }
/* Cartes des lots à choisir avant une saisie : toute la carte se touche. */
.lots-a-choisir > li { padding: 0; }
.lots-a-choisir > li:hover { background: var(--surface-2); border-color: var(--peau); }
.lots-a-choisir .lot-lien {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "code variete stock" "code detail stock";
  gap: 2px 16px; align-items: center; width: 100%; min-height: 72px;
  padding: 16px 20px; text-decoration: none;
}
.lots-a-choisir .code { grid-area: code; }
.lots-a-choisir strong { grid-area: variete; }
.lots-a-choisir .lot-detail { grid-area: detail; color: var(--doux); font-size: var(--texte-petit); }
.lots-a-choisir .lot-stock { grid-area: stock; display: grid; justify-items: end; font-size: 22px; font-weight: 700; }
.lots-a-choisir .lot-stock small { font-size: 13px; font-weight: 400; color: var(--doux); }
.lots-a-choisir .stock-negatif .lot-stock { color: var(--gel); }
/* Tablette en portrait : la saisie prend toute la largeur, le lot vient dessous. */
@media (max-width: 900px) {
  .saisie-entree { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lots-a-choisir .lot-lien { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "code variete" "code detail" "stock stock"; }
  .lots-a-choisir .lot-stock { justify-items: start; }
}

/* --- Tarifs (phase 3, lot « tarifs et prix proposé ») --- */

/* Filtres d'une liste par des listes de choix (client, famille, variété des tarifs) et la
   recherche : autant de colonnes que la largeur en tient ; le bouton, utile sans
   JavaScript, disparaît quand htmx met la liste à jour à chaque choix. */
.filtres-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.filtres-liste > .bouton { justify-self: start; }
/* Deux champs côte à côte dont l'un porte une erreur : l'autre garde sa hauteur, ses
   éléments en haut, au lieu de s'étirer sur la hauteur de la rangée. */
.deux > .champ, .deux > div > .champ { align-content: start; }
/* Le tarif s'applique à un client ou à une famille : deux cartes côte à côte. Seule la
   liste de choix qui correspond reste visible ; sans :has(), les deux restent, et l'autre
   est ignorée à l'envoi. */
.tarif-pour .choix { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.formulaire:has(.tarif-pour input[value="client"]:checked) .tarif-famille,
.formulaire:has(.tarif-pour input[value="famille"]:checked) .tarif-client { display: none; }
/* Le prix se saisit en grands chiffres, comme un poids (champ de moitié de largeur). */
.tarif-prix input { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; }
.formulaire > .tarif-prix { max-width: calc(50% - 7px); }
/* Tableau des tarifs (liste, fiche d'un client ou d'une famille) : valeurs courtes sur une
   ligne (« Catégorie I », une période) ; sur un petit écran, le tableau défile. */
.liste-tarifs td:not(:first-child) { white-space: nowrap; }
/* Fiche d'un tarif : le prix en grand, la période à côté. */
.tarif-resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.tarif-resume p { margin: 0; }
.tarif-prix-grand {
  font: 800 clamp(34px, 5vw, 48px)/1 var(--display); font-stretch: 112%;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 520px) {
  .formulaire > .tarif-prix { max-width: none; }
}

/* --- Accueil et navigation (phase 3, lot « accueil, navigation et démonstration ») --- */

/* Sous le chiffre du jour : la dernière sortie, puis la dernière entrée, chacune sur sa
   ligne. */
.heure.derniers { margin-top: 6px; }
.derniers > span { display: block; }
@media (max-width: 760px) {
  /* Barre du bas à quatre entrées (Accueil, Lots, Commandes, Référentiels) : le texte se
     resserre pour tenir sur un téléphone de 360 px, sans rien couper. */
  .navigation { gap: 4px; padding-inline: 6px; }
  .navigation a { padding-inline: 2px; font-size: clamp(13px, 3.6vw, 15px); white-space: nowrap; }
}

/* --- Commandes (phase 3, lot « commandes » : liste, saisie, fiche, annulation) --- */

/* Liste : le numéro et sa date, le client et son code, la variété avec son calibre et sa
   catégorie, le poids avec le nombre de contenants, sur deux lignes dans la même case ; le
   nom du client seul se plie. */
.liste-commandes td small {
  display: block; margin-top: 2px; font: 400 14px/1.35 var(--corps); color: var(--doux);
}
.liste-commandes td { white-space: nowrap; }
.liste-commandes td:nth-child(2) { white-space: normal; min-width: 10em; }
.liste-commandes .article { font-weight: 700; }
/* Le libellé caché de la colonne « Préparer » est placé dans sa case : il ne déborde pas de
   la page quand le tableau défile (tablette en portrait). */
.liste-commandes th { position: relative; }
.liste-commandes tr.annule td small { text-decoration: line-through; }
.filtres-commandes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
/* Site du lot à côté de son numéro (sorties d'une commande). */
.site-du-lot { color: var(--doux); font-size: 14px; }

/* Saisie : deux colonnes au bureau (le client et l'article ; la quantité, le prix et
   l'observation), une seule sur la tablette en portrait. */
.saisie-commande-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
.saisie-commande-colonnes > * { min-width: 0; }
.saisie-commande .etape h2 { font-size: 21px; }
/* Le prix se saisit en grands chiffres, comme le poids ; l'aide dit le tarif. */
.champ-prix .champ input { font: 800 30px var(--display); font-variant-numeric: tabular-nums; min-height: 64px; }
.proposition-prix b { font-weight: 700; color: var(--texte); white-space: nowrap; }
.champ-prix .bouton-discret { justify-self: start; padding-inline: 4px; min-height: var(--cible); }

/* Fiche : le client et l'article à gauche, la jauge à droite (maquette de la préparation). */
.commande-tete { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 32px; align-items: end; }
.commande-tete > * { min-width: 0; }
.commande-numero { color: var(--doux); }
.commande-numero strong { color: var(--texte); }
.commande-article { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.commande-article li {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  padding: 6px 12px; font-size: var(--texte-petit);
}
.commande-article b { font-weight: 700; }
.commande-jauge { display: grid; gap: 10px; }
.commande-jauge .jauge-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.commande-jauge .grand { font: 800 clamp(48px, 8vw, 76px)/.9 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.commande-jauge .sur { font: 700 22px var(--display); font-stretch: 112%; color: var(--doux); }
.commande-jauge .jauge-chiffres .pastille { margin-left: auto; font-size: var(--texte-petit); padding: 4px 12px; }
/* Un carré par tonne (ou par dix) : servi en peau, reste à servir en creux. */
.avancement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; max-width: 560px; }
.avancement i { aspect-ratio: 1.3; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--trait); }
.avancement i.servi { background: var(--peau); box-shadow: none; }
.commande-jauge .legende { margin-left: 0; }
.commande-jauge .legende i { box-shadow: inset 0 0 0 2px var(--trait); }
.commande-jauge .legende i.servi { background: var(--peau); box-shadow: none; }
@media (max-width: 900px) {
  .saisie-commande-colonnes, .commande-tete, .colonnes-commande { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .avancement { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Annulation (RG23) : la liste des lots ne se montre que pour « dans un autre lot » ; sans
   :has(), elle reste visible et n'est lue que pour ce choix. */
.annulation .choix { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.formulaire:has(.reintegration input[type="radio"]) .lot-de-retour { display: none; }
.formulaire:has(.reintegration input[value="autre"]:checked) .lot-de-retour,
.formulaire:has(.lot-de-retour .en-erreur) .lot-de-retour { display: block; }

/* --- Préparation des commandes (phase 3, lot « préparation ») --- */

/* Écrans de ventes/preparation/ (maquette terconso-preparation-commande.html) : la page
   porte .page-preparation (plus .page-a-preparer pour la liste, .page-sortie pour une
   sortie). Les noms de la maquette (.cde, .jauge, .cases…) sont rangés dessous : ils ne
   touchent pas les autres écrans. */

/* La commande à gauche (numéro, client, article en pastilles), sa jauge à droite. */
.page-preparation .cde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: end; }
.page-preparation .cde-tete { gap: 0; }
.page-preparation .cde-num { margin-top: var(--esp-2); color: var(--doux); font-size: 16px; }
.page-preparation .cde-num strong { color: var(--texte); }
.page-preparation .cde h1 { margin: 2px 0 10px; font-size: clamp(30px, 5vw, 44px); }
.page-preparation .cde-client { color: var(--doux); }
.page-preparation .specs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-preparation .spec {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  padding: 6px 12px; font-size: var(--texte-petit);
}
/* Jauge : le servi en très grand, sur le commandé ; l'état ; une case par tonne (ou à
   l'échelle de la légende) : déjà sorti (peau), en cours de saisie (chair), reste (contour). */
.page-preparation .jauge { display: grid; gap: 10px; }
.page-preparation .jauge-chiffres { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.page-preparation .jauge-chiffres .grand { font: 800 clamp(48px, 8vw, 76px)/.9 var(--display); font-stretch: 125%; }
.page-preparation .jauge-chiffres .sur { font: 700 22px var(--display); font-stretch: 112%; color: var(--doux); }
.page-preparation .etat {
  margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--peau-pale);
  font-size: var(--texte-petit); font-weight: 700;
}
.page-preparation .etat.partielle { background: var(--chair-pale); }
.page-preparation .etat.solde { background: var(--fane-pale); color: var(--fane); }
.page-preparation .etat.annulee { background: var(--gel-pale); color: var(--gel); }
.page-preparation .cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.page-preparation .cases i { aspect-ratio: 1.3; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--trait); }
.page-preparation .cases i.servi, .page-preparation .barre i.servi { background: var(--peau); box-shadow: none; }
.page-preparation .cases i.encours { background: var(--chair); box-shadow: none; }
.page-preparation .jauge .legende { margin: 0; }
.page-preparation .jauge .legende i { width: 13px; height: 10px; }
.page-preparation .legende .s { background: var(--peau); }
.page-preparation .legende .c { background: var(--chair); }
.page-preparation .legende .r { box-shadow: inset 0 0 0 2px var(--trait); }
@media (prefers-reduced-motion: no-preference) {
  .page-preparation .cases i.encours { animation: preparation-en-cours 1.6s ease-in-out infinite; }
}
@keyframes preparation-en-cours { 50% { opacity: .55; } }

/* Les deux étapes côte à côte : choisir le lot (cartes à toucher), saisir ce qui sort. */
.page-preparation .travail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
.page-preparation .travail > * { min-width: 0; }
/* Numéro d'étape : un anneau, qui ne se voit que dans le thème sombre (fond terre). */
.page-preparation .etape h2 .n { box-shadow: inset 0 0 0 2px var(--contour); }
.page-preparation .saisie {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-grand);
  box-shadow: var(--ombre); padding: 20px; display: grid; gap: 18px;
}
.page-preparation .choix-lot { display: grid; gap: 4px; font-weight: 400; min-width: 0; }
.page-preparation .choix-numero { font: 800 22px/1.1 var(--display); font-stretch: 112%; }
.page-preparation .choix-lot small, .page-preparation .choix label small {
  display: block; font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--doux);
}
.page-preparation .choix-lot .pastille { justify-self: start; margin-top: 2px; }
.page-preparation .choix-dispo {
  display: grid; justify-items: end; text-align: right;
  font: 800 24px/1 var(--display); font-stretch: 112%; color: var(--fane); white-space: nowrap;
}
.page-preparation .choix-dispo small { margin-top: 6px; font-family: var(--corps); }
.page-preparation .choix-dispo.negatif { color: var(--gel); }
.page-preparation .choix-nouveau { border-style: dashed; }
/* Le site d'un lot à créer ne se montre qu'une fois ce choix fait (sans :has(), il reste). */
.page-preparation .choix-lots:not(:has(input[value="nouveau"]:checked)) .site-nouveau-lot { display: none; }
.page-preparation .alerte-stock:empty { display: none; }
.page-preparation .recap-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.page-preparation .recap td .pastille { margin-left: 6px; }

/* Question de RG23 (correction, annulation) : un cadre, la question en titre, trois
   réponses en cartes ; la liste des lots ne paraît que pour « dans un autre lot ». */
.page-preparation .reintegration { border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-4); gap: var(--esp-3); }
.page-preparation .reintegration > legend { padding-inline: 6px; font: 700 19px/1.2 var(--display); font-stretch: 112%; }
.page-preparation .reintegration.en-erreur { border-color: var(--gel); }
.page-preparation .reintegration:not(:has(input[value="autre"]:checked)) .lot-de-retour { display: none; }

/* Commandes à préparer : une carte par commande, l'avancement en barre de cases, le gros
   bouton « Préparer » à droite (dessous sur téléphone). */
.page-a-preparer .commandes-a-preparer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.page-a-preparer .commandes-a-preparer > li {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 12px 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-grand);
  box-shadow: var(--ombre); padding: 18px 20px;
}
.page-a-preparer .cap-num { color: var(--doux); font-size: var(--texte-petit); }
.page-a-preparer .cap-num strong { color: var(--texte); }
.page-a-preparer .cap-client { margin-top: 2px; font-size: 24px; }
.page-a-preparer .specs { margin-top: 10px; }
.page-a-preparer .cap-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font: 700 18px var(--display); color: var(--doux); }
.page-a-preparer .cap-servi { font: 800 34px/1 var(--display); font-stretch: 112%; color: var(--texte); }
.page-a-preparer .barre { display: flex; gap: 2px; height: 14px; margin-top: 10px; }
.page-a-preparer .barre i { flex: 1 1 0; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--trait); }
.page-a-preparer .cap-preparer { min-height: 60px; padding-inline: 32px; font-family: var(--display); font-stretch: 112%; font-size: var(--texte-grand); }

/* Tablette en portrait : la jauge sous la commande, la saisie sous les lots. */
@media (max-width: 900px) {
  .page-preparation .cde, .page-preparation .travail { grid-template-columns: minmax(0, 1fr); }
  .page-a-preparer .commandes-a-preparer > li { grid-template-columns: minmax(0, 1fr) auto; }
  .page-a-preparer .cap-avancement { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .page-a-preparer .commandes-a-preparer > li { grid-template-columns: minmax(0, 1fr); }
  .page-a-preparer .cap-avancement { grid-row: auto; }
  .page-a-preparer .cap-preparer { width: 100%; }
}
@media (max-width: 460px) {
  .page-preparation .cases { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media print {
  .page-preparation .travail, .page-a-preparer .recherche { display: none !important; }
}

/* --- Expédition directe (phase 4, lot « expédition directe ») --- */

/* ventes/directe/expedier.html : la page porte .page-preparation (étapes, cartes des lots,
   saisie, alerte de stock, site d'un lot à créer) et .page-directe pour ce qui suit. */
.page-directe .saisie-directe { gap: var(--esp-4); }
.page-directe .saisie h2 { font-size: 21px; }
/* La variété d'un lot, à côté de son numéro : c'est celle de la vente (F57). */
.page-directe .choix-variete {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px;
  border-radius: 999px; background: var(--fane-pale); color: var(--texte);
  font: 700 15px/1.4 var(--corps); letter-spacing: 0;
}
/* Le lot choisi (F57, F60) : son bilan en deux chiffres, puis ce qui en est déjà sorti. */
.page-directe .lot-choisi {
  display: grid; gap: 12px; padding: 16px 20px; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon-grand); box-shadow: var(--ombre);
}
.page-directe .lot-choisi:not(:has(*)) { display: none; }
.page-directe .lot-choisi-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.page-directe .lot-choisi h3 { font: 800 22px/1.2 var(--display); font-stretch: 112%; }
.page-directe .lot-choisi .bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.page-directe .lot-choisi .bilan > div { border-bottom: 0; padding-block: 4px; }
.page-directe .lot-choisi .bilan dd.negatif { color: var(--gel); }
.page-directe .lot-choisi .table-wrap { box-shadow: none; }
.page-directe .lot-choisi .table-wrap table { min-width: 420px; }
.page-directe .lot-choisi .bouton-discret { min-height: var(--cible); padding-inline: 4px; }
@media (max-width: 460px) {
  .page-directe .lot-choisi .bilan { grid-template-columns: minmax(0, 1fr); }
}

/* --- Table des expéditions (phase 4, lot « table des expéditions, accueil et démonstration ») --- */

/* ventes/expeditions/table.html (F53) : les filtres, le poids total en grands chiffres, puis
   la table, deux lignes par case comme la liste des commandes. */
/* Quatre colonnes au bureau et sur la tablette (la recherche en prend deux) ; deux sur un
   téléphone, la recherche sur toute la largeur. */
.filtres-expeditions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filtres-expeditions .filtre-recherche { grid-column: span 2; }
/* La case « avec bon de livraison seulement » s'aligne sur le bas des champs. */
.filtres-expeditions .coche { align-self: end; min-height: var(--cible-champ); font-size: var(--texte-petit); font-weight: 700; }
@media (max-width: 760px) {
  .filtres-expeditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtres-expeditions .filtre-recherche, .filtres-expeditions .coche { grid-column: 1 / -1; }
}
.resume-expeditions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--doux); }
.resume-expeditions .total { font: 800 34px/1 var(--display); font-stretch: 112%; color: var(--texte); }
/* Quatre colonnes (cinq avec le prix) : chaque case dit l'essentiel sur sa première ligne
   (date, client, lot et variété, poids), le détail dessous, en petit. */
.table-expeditions td small {
  display: block; margin-top: 2px; font: 400 14px/1.35 var(--corps); color: var(--doux);
}
.table-expeditions td { white-space: nowrap; }
/* Le client et les parcelles du lot se plient ; la date, le poids et le prix non. */
.table-expeditions td:nth-child(2), .table-expeditions td:nth-child(3) { white-space: normal; min-width: 9em; }
.table-expeditions .commande, .table-expeditions .article + small { white-space: nowrap; }
/* Tablette en portrait : les cases se resserrent pour que le prix reste à l'écran. */
@media (max-width: 900px) {
  .table-expeditions th, .table-expeditions td { padding-inline: 10px; }
  .table-expeditions .commande { white-space: normal; }
}
.table-expeditions .date { font-variant-numeric: tabular-nums; }
.table-expeditions .bon { color: var(--texte); font-weight: 700; }
.table-expeditions .bon b, .table-expeditions .numero-lot, .table-expeditions .poids { font-family: var(--display); font-weight: 700; }
.table-expeditions .article { margin-left: 4px; font-weight: 700; }
.table-expeditions .pastille { margin-left: 4px; }
/* Bon, commande, lot : des liens dans le texte, mais des cibles de 44 px au doigt. */
.table-expeditions td a {
  display: inline-block; min-height: var(--cible); padding-block: 11px; margin-block: -11px;
  font-weight: 700; text-decoration-color: var(--peau);
}

/* --- Bons de livraison et étiquettes (phase 4, lot « documents ») --- */

/* ventes/documents/*.html (.page-documents) ; les boutons du chargement sous le
   récapitulatif de la préparation (.documents-chargement) ; la section « Bons de
   livraison » de la fiche d'une commande (tableau standard). */

/* Le contenu d'un bon : les parties côte à côte, l'article, les lignes. */
.bl-contenu { display: grid; gap: var(--esp-4); min-width: 0; }
.bl-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--esp-4); }
.bl-colonne { display: grid; gap: var(--esp-3); align-content: start; min-width: 0; }
.bl-partie { padding: 4px 0; overflow-wrap: anywhere; }
.bl-partie.principale {
  padding: 12px 16px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface-2);
}
.bl-partie h3, .bl-article dt {
  font: 700 13px/1.4 var(--corps); letter-spacing: .06em; text-transform: uppercase;
  color: var(--doux);
}
.bl-partie strong { font-size: 18px; }
.bl-article {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0;
  padding-block: 12px; border-block: 1px solid var(--trait);
}
.bl-article dd { margin: 0; font-weight: 700; font-size: 18px; }
.bl-article .bl-denomination { flex: 1 1 240px; }
.bl-article .bl-remplace dd { color: var(--gel); }
.bl-contenu td .pastille { margin-left: 6px; }

/* L'écran du bon : l'aperçu, puis la date de livraison et le geste d'édition. */
.bl-apercu { border-left: 6px solid var(--chair); }
.bl-date { max-width: 320px; }

/* Étiquettes : le choix de la planche, l'aperçu d'une étiquette. */
.gabarits label { grid-template-columns: auto minmax(0, 1fr) auto; }
.gabarits .gabarit-nom { font: 800 20px/1.2 var(--display); font-stretch: 112%; }
.gabarits small { display: block; font-weight: 400; font-size: var(--texte-petit); color: var(--doux); }
.gabarits .gabarit-feuilles { font-size: var(--texte-petit); color: var(--doux); white-space: nowrap; }
.etiquette-apercu {
  display: grid; gap: 8px; padding: 18px 20px; max-width: 460px;
  background: var(--surface); color: var(--texte); border: 2px dashed var(--trait); border-radius: var(--rayon-petit);
}
.etiquette-denomination {
  display: flex; justify-content: space-between; gap: 12px;
  font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
}
.etiquette-repere { font-size: 13px; color: var(--doux); letter-spacing: 0; white-space: nowrap; }
.etiquette-variete { font: 800 34px/1.05 var(--display); font-stretch: 112%; overflow-wrap: anywhere; }
.etiquette-caracteristiques, .etiquette-identification { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; }
.etiquette-identification { justify-content: space-between; padding-top: 8px; border-top: 2px solid var(--contour); }
.etiquette-apercu dt { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.etiquette-apercu dd { margin: 0; font-weight: 700; font-size: 17px; }
.etiquette-identification dd { font: 800 24px/1.1 var(--display); font-stretch: 112%; }
.etiquette-expediteur { font-size: 14px; }
.etiquette-expediteur span { font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--doux); }
.etiquette-traitement {
  justify-self: start; padding: 2px 10px; border: 2px solid var(--texte); border-radius: 6px;
  font-weight: 700; font-size: 14px;
}

/* Sous le récapitulatif de la préparation (maquette : « Imprimer les étiquettes »,
   « Éditer le bon de livraison ») : des gestes de 56 px, au doigt. */
.documents-chargement { margin-top: var(--esp-2); }
.documents-chargement .bouton { min-height: 56px; padding-inline: 22px; }