/* Poste de gestion — ajouts au socle visuel (../passerelle/passerelle.css), en thème clair.
   Conditions : bureau ou Mac de la cuisine, assis, souris et clavier, lumière du jour, sessions longues
   (commande du mardi, révision des recettes). Plus dense que les tablettes : cibles de 40 px à la souris,
   texte de 14 à 16 px, tableaux larges. Mêmes jetons, mêmes mots, mêmes états. */

.poste {
  width: 1440px; height: 900px; margin: 0 auto var(--espace-6);
  background: var(--c-surface); color: var(--c-texte); border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 52px minmax(0, 1fr);
  grid-template-areas: "liaison liaison" "nav entete" "nav corps";
  box-shadow: 0 0 0 10px #000, 0 30px 80px rgba(0, 0, 0, .6);
}
.poste .liaison { grid-area: liaison; }
.poste .liaison[data-etat="agent"] { background: var(--c-rouge-fond); color: var(--c-texte); }
.poste .entete { grid-area: entete; background: var(--c-fond); border-bottom: 1px solid var(--c-filet); }
.poste .corps { grid-area: corps; padding: var(--espace-3) var(--espace-4); gap: var(--espace-3); }

/* Nom de l'application en tête de la navigation latérale */
.poste .nav::before { content: "Mission Control"; display: block; padding: 0 var(--espace-2) var(--espace-2); font-size: var(--taille-titre-3); font-weight: 700; letter-spacing: -.01em; color: var(--c-texte); }

/* Navigation latérale groupée */
.poste .nav {
  grid-area: nav; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--espace-4) var(--espace-3);
  background: var(--c-surface-2); border-top: 0; border-right: 1px solid var(--c-filet); overflow-y: auto;
}
.poste .nav .marque { display: flex; align-items: center; gap: var(--espace-2); padding: 0 var(--espace-2) var(--espace-3); font-weight: 700; font-size: var(--taille-corps-fort); }
/* Groupes : titre en retrait à gauche, filet au-dessus ; les écrans sont en retrait sous leur groupe.
   La différence tient à la structure (filet, retrait, graisse), pas à une couleur de plus. */
.poste .nav .groupe {
  margin: var(--espace-4) 0 var(--espace-1); padding: var(--espace-3) var(--espace-2) 0;
  border-top: 1px solid var(--c-contour); font-size: var(--taille-meta); font-weight: 700; letter-spacing: .01em; color: var(--c-texte);
} /* texte-2 sur surface-2 ne donne que 4,46:1 : le titre reste en texte, distingué par le filet et le retrait */
.poste .nav .groupe:first-of-type { margin-top: var(--espace-2); }
.poste .nav a {
  flex: none; min-height: var(--cible-minimum); justify-content: space-between; padding: 0 var(--espace-3) 0 var(--espace-5);
  border-radius: 9px; color: var(--c-texte); font-weight: 400; font-size: calc(var(--taille-corps) + 1px);
}
.poste .nav a:hover { background: var(--c-surface-active); }
.poste .nav a[aria-current="page"] { background: var(--c-texte); color: var(--c-fond); font-weight: 600; }
.poste .nav .pastille { color: var(--c-fond); }

/* Panneaux blancs sur fond crème */
.poste .panneau { background: var(--c-fond); border: 1px solid var(--c-filet); }

/* Liste et fiche (revue de design du 2026-11-04, docs/design.md) : la liste (data-zone="liste") est en retrait, sur le
   crème de la navigation ; la fiche (data-zone="fiche") est la feuille blanche, seule posée au-dessus. La ligne ouverte
   prend le blanc de la fiche et un filet orange : on voit d'un coup d'œil ce qui est ouvert à droite. */
.poste .panneau[data-zone="liste"] { background: var(--c-surface-2); border-color: transparent; }
.poste .panneau[data-zone="fiche"] { box-shadow: 0 1px 2px rgb(20 18 16 / .06), 0 8px 24px rgb(20 18 16 / .08); }
.poste .panneau[data-zone="liste"] .ligne:is([aria-selected="true"], [aria-current="true"]) > * { background: var(--c-fond); }
.poste .panneau[data-zone="liste"] .ligne:is([aria-selected="true"], [aria-current="true"]) > :first-child { box-shadow: inset 3px 0 0 var(--c-accent); }
/* Lignes-boutons des listes (et non les filtres, qui portent aussi aria-pressed) */
.poste .panneau[data-zone="liste"] :is(.rangee, .pers-e, .ligne-ingr, .ligne-item, .choisir-m25, .choisir-groupe-m25):is([aria-selected="true"], [aria-current="true"], [aria-pressed="true"]) {
  background: var(--c-fond); box-shadow: inset 3px 0 0 var(--c-accent);
}
.poste .panneau[data-zone="liste"] .grille .ligne:not([aria-selected="true"], [aria-current="true"]):hover > * { background: var(--c-surface); }

/* Boutons et contrôles à la souris */
.poste .btn { min-height: var(--cible-minimum); min-width: var(--cible-minimum); padding: 0 var(--espace-4); font-size: var(--taille-corps); }
.poste .btn-cuisine { min-height: var(--cible-minimum); }
.poste .filtres button, .poste .sous-onglets a, .poste .sous-onglets button, .poste .onglets button { min-height: var(--cible-minimum); }
.poste .grille .ligne > * { min-height: var(--cible-minimum); }
.poste .grille .ligne:hover > * { background: var(--c-surface); }

/* Navigation et panneau de droite repliables (panneaux.js) : replié, la colonne tombe à zéro et le contenu prend
   toute la largeur. L'écran marque data-droite sur l'enfant de .corps qui tient sa colonne de droite ; ce bouton ne
   paraît qu'avec un panneau de droite visible, hors écran réservé. Aucun bouton en colonne unique (900 px et moins). */
.poste :is(.replier-nav, .replier-droite) { display: none; width: var(--cible-minimum); padding: 0; flex: none; }
.poste :is(.replier-nav, .replier-droite)[aria-expanded="false"] .plein { display: none; }
@media (min-width: 901px) {
  .poste .replier-nav { display: inline-flex; }
  .poste[data-nav-repliee] { grid-template-columns: 0 minmax(0, 1fr); }
  .poste[data-nav-repliee] .nav { display: none; }
  body:not([data-reserve]) .poste:has(.corps > [data-droite]:not([hidden])) .replier-droite { display: inline-flex; }
  .poste[data-droite-repliee] .corps:has(> [data-droite]) { grid-template-columns: minmax(0, 1fr) 0; column-gap: 0; }
  .poste[data-droite-repliee] .corps > [data-droite] { display: none; }
}

/* Listes du bas jamais écrasées (demande d'Eric du 2026-10-30) : sur un écran dont .corps porte data-liste, la dernière
   rangée de la grille (la liste) garde au moins --liste-min et .corps défile quand le haut ne lui laisse pas cette place.
   Les rangées du haut sont en max-content : jamais écrasées sous leur contenu (en auto, la grille les rognait et les
   panneaux se chevauchaient). Sans défilement, le cadre de .poste coupait le bas de la page (Inventaire global : 8 px de
   liste à 1440 × 900). */
.poste { --liste-min: max(45vh, 320px); }
@media (min-width: 901px) { .poste .corps[data-liste] { overflow-y: auto; } }

/* Panneaux repliables (panneaux.js) : un panneau marqué data-repliable se réduit à sa ligne de titre ; le bouton, un
   chevron, se place avant le titre. Ce qui est dans l'en-tête (légende, total) reste visible une fois replié. */
.poste .replier-panneau { width: var(--cible-minimum); min-width: var(--cible-minimum); min-height: var(--cible-minimum); padding: 0; margin-left: calc(-1 * var(--espace-2)); flex: none;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--c-texte-2); cursor: pointer; }
.poste .replier-panneau:hover { background: var(--c-surface-2); color: var(--c-texte); }
.poste .replier-panneau svg { transition: transform .15s; }
.poste .replier-panneau[aria-expanded="false"] svg { transform: rotate(-90deg); }
.poste .panneau[data-replie] { min-height: 0 !important; }
.poste .panneau[data-replie] > :not(header) { display: none !important; }
.poste .panneau[data-replie] > header { padding-bottom: var(--espace-1); }
.poste .panneau[data-replie] > header .aide { display: none; }
@media (prefers-reduced-motion: reduce) { .poste .replier-panneau svg { transition: none; } }

/* Champs de saisie */
.poste input[type="text"], .poste input[type="number"], .poste input[type="search"], .poste select, .poste textarea {
  font: inherit; color: var(--c-texte); background: var(--c-fond); border: 1px solid var(--c-contour);
  border-radius: 8px; min-height: var(--cible-minimum); padding: 0 var(--espace-3);
}
.poste textarea { padding: var(--espace-2) var(--espace-3); }

/* Chiffres d'un tableau : alignés à droite, chiffres tabulaires (déjà globaux) */
.poste .nb { justify-content: flex-end; text-align: right; }

/* Largeur des colonnes d'une grille : le nom a une largeur plafonnée (--col-nom, 20rem au plus, même sur un grand
   écran) ; les chiffres, les dates et les puces, leur largeur naturelle sur une ligne (--col-court, --col-moyen), en
   français comme en anglais, puis le reste de la place. Panneau de droite ou navigation repliés, la place libérée va
   aux autres colonnes, pas au nom. Le nom passe sur deux lignes au plus (.nom-l), coupé au-delà ; le nom complet au
   survol (title). */
.poste { --col-nom: minmax(160px, 20rem); --col-court: minmax(max-content, .6fr); --col-moyen: minmax(max-content, .8fr); }
.poste .grille .nom-l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; max-width: 100%; }
/* Ce qui couvre toute la ligne (message, formulaire, note) n'élargit pas ces colonnes : sans cela, sa largeur
   naturelle se verse dans les colonnes en max-content */
.poste .grille > .plein { contain: inline-size; }
/* Rangée qui prend le focus du clavier (tabindex : Commandes, Produits) : en sous-grille, pas en display: contents,
   sans quoi elle n'a pas de boîte, ne reçoit pas le focus et n'en montre pas le contour */
@media (min-width: 901px) {
  .poste .grille .ligne[tabindex] { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .poste .grille .ligne[tabindex]:focus-visible { outline-offset: -3px; border-radius: 4px; }
}

/* Le prix orange en texte sur fond clair passe par accent-texte, jamais #FF5300 (3,24:1) */
.poste .prix, .poste .lien { color: var(--c-accent-texte); }

@media (max-width: 1500px) {
  .poste { width: auto; margin: 0 var(--espace-4) var(--espace-6); }
}
@media (max-width: 900px) {
  .poste { height: auto; min-height: 100vh; margin: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
  .poste .nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--c-filet); }
  .poste .nav .groupe, .poste .nav .marque, .poste .nav::before { display: none; }
}

/* Liens dans le texte et les en-têtes de tableau (B-13, Mission Control : cible ≥ 32 px) : la zone cliquable déborde
   le mot de quelques pixels, sans changer le dessin ni la hauteur des lignes */
.poste :is(.lien-t, .lien-produit, .lien-btn):not(.btn) { position: relative; }
.poste :is(.lien-t, .lien-produit, .lien-btn):not(.btn)::after { content: ""; position: absolute; inset: -6px -4px; }
/* Nom qui ouvre sa fiche dans un autre écran (produit, plat, recette : revue de design du 2026-11-04) : il garde la couleur
   du texte, avec un soulignement discret qui dit qu'il se clique ; au survol, le soulignement prend l'encre. Partout où un
   nom paraît et qu'une fiche existe, il est un lien. */
.poste .lien-produit { color: var(--c-texte); text-decoration: underline 1px var(--c-contour); text-underline-offset: 3px; }
.poste .lien-produit:hover, .poste .lien-produit:focus-visible { color: var(--c-accent-texte); text-decoration-color: currentColor; }

/* Listes modifiables (docs/design.md) : boutons de la ligne au bout, côte à côte. La confirmation sur place d'un retrait
   (retrait-ligne.js : « Oui, retirer » et « Garder ») prend la même zone, sans passer à la ligne. */
.ligne-actions, .retrait-confirme { display: inline-flex; align-items: center; gap: var(--ecart-minimum); white-space: nowrap; }
/* Dans un tableau, la confirmation ne l'élargit pas : elle couvre, le temps du choix, les boutons voisins de la ligne */
td .ligne-actions { position: relative; }
td .retrait-confirme { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; padding-left: var(--ecart-minimum); background: var(--c-fond); }

/* Conservation estimée (conservation.js : Inventaire global et fiche du produit) */
.puce.estime { background: var(--c-surface-2); color: var(--c-texte-2); font-weight: 500; }
/* Ligne de la fiche du produit sous son nom : nom anglais, conservation */
.ligne-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); margin-top: var(--espace-1); }

/* En-tête de Mission Control (revue finale, M-6) : titre, sous-titre (la personne) et boutons ; faute de place (portable
   de 1366 px avec la navigation ouverte, fenêtre étroite), les boutons passent sur une seconde ligne, alignés à droite,
   plutôt que d'écraser le sous-titre ou de se chevaucher. Ground Control et Apollo gardent leur en-tête. */
.poste { grid-template-rows: auto minmax(52px, auto) minmax(0, 1fr); }
.poste .entete { flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); padding-block: var(--espace-1); }
.poste .entete .qui { flex: 1 1 auto; }
.poste .entete .droite { flex-wrap: wrap; justify-content: flex-end; gap: var(--espace-2) var(--espace-3); }

/* Menu de la personne dans l'en-tête (direct.js, Direct.creerMenuPersonne, mise à jour 181) : ses initiales ouvrent
   « Changer mon mot de passe » et « Nouveaux codes de secours » ; le nom entier est dans l'étiquette et la bulle du
   bouton, et dans le sous-titre de l'en-tête. Les libellés du menu passent à la ligne plutôt que de se tronquer. */
.menu-personne { position: relative; }
.menu-personne-bouton { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-minimum); padding-inline: var(--espace-2) var(--espace-3); }
.menu-personne-initiales {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-surface-2); font-size: var(--taille-meta); font-weight: 700; letter-spacing: .02em;
}
.menu-personne-bouton::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.menu-personne-bouton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.menu-personne-liste {
  position: absolute; top: calc(100% + var(--espace-1)); right: 0; z-index: 60; width: max-content; min-width: 14rem; max-width: min(22rem, calc(100vw - 2 * var(--espace-4)));
  margin: 0; padding: var(--espace-2); list-style: none; background: var(--c-surface); color: var(--c-texte);
  border: 1px solid var(--c-contour); border-radius: var(--rayon-bouton); box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}
.menu-personne-liste[hidden] { display: none; }
.menu-personne-liste button {
  display: block; width: 100%; min-height: var(--cible-minimum); padding: var(--espace-2) var(--espace-4); font: inherit; font-weight: 600; text-align: left;
  color: inherit; background: transparent; border: 0; border-radius: calc(var(--rayon-bouton) - 4px); cursor: pointer;
}
.menu-personne-liste button:hover, .menu-personne-liste button:focus-visible { background: var(--c-surface-2); }