/* =========================================================================
   MMEC — Coquille de l'application et écran Prise de commande
   ========================================================================= */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-largeur) 1fr;
  min-height: 100vh;
}

/* ---------- Barre latérale (brun fournil) ---------- */
.sidebar {
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__marque {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 20px;
  border-bottom: 1px solid rgba(243, 191, 76, 0.35);
  margin-bottom: 16px;
}
.sidebar__logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
}
.sidebar__nom {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--blanc-chignon);
  line-height: 1.15;
}
.sidebar__nom--app {
  font-size: 24px;
  letter-spacing: 4px;
}
.sidebar__sous { font-size: 11px; color: var(--dore-levain); }

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* le menu peut dépasser la hauteur de l'écran : il défile dans la colonne */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 191, 76, 0.45) transparent;
}
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: rgba(243, 191, 76, 0.45);
  border-radius: 3px;
}
.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--blanc-chignon);
  font-size: 14px;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.nav__item:hover { background: var(--brun-croute); }
.nav__item--actif {
  background: var(--brun-croute);
  border-left-color: var(--dore-levain);
}
/* La pastille d'icône (31/08/2026). Elle vit ICI et non dans le design
   system : app.css charge après lui, à spécificité égale la dernière règle
   gagne — la largeur 18px d'ici écrasait la pastille et dessinait une
   pilule difforme de 18×26 sur chaque entrée du menu. */
.nav__ico {
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(243, 191, 76, 0.13);
  font-size: 13px;
  text-align: center;
  opacity: 0.95;
  transition: background var(--allure), color var(--allure), transform var(--allure);
}
.nav__item:hover .nav__ico { background: rgba(243, 191, 76, 0.24); }
.nav__item--actif .nav__ico {
  background: var(--dore-levain);
  color: var(--brun-croute);
  transform: scale(1.06);
  opacity: 1;
}

.nav__groupe {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dore-levain);
  padding: 12px 12px 4px;
}
.nav__item--avenir { opacity: 0.5; cursor: default; }
.nav__item--avenir:hover { background: transparent; }
.nav__bientot {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--dore-levain);
}

.sidebar__pied {
  margin-top: auto;
  font-size: 11px;
  color: rgba(242, 242, 242, 0.7);
  padding-top: 16px;
  border-top: 1px solid rgba(243, 191, 76, 0.25);
}

/* ---------- Zone principale ---------- */
.main { padding: 26px 30px 40px; min-width: 0; }
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 20px;
}
.topbar__fil { font-size: 12px; color: var(--caramel); margin-bottom: 6px; }

/* Disposition prise de commande : catalogue + panier */
.pdc {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 22px;
  align-items: start;
}
/* Une colonne de grille refuse par défaut de descendre sous la largeur de
   son contenu : le ruban des sept jours poussait alors la page entière vers
   la droite sur téléphone. On l'autorise à rétrécir — ce qui dépasse glisse
   dans son propre ruban plutôt que d'emporter tout l'écran. */
.pdc > * { min-width: 0; }
@media (max-width: 1100px) { .pdc { grid-template-columns: 1fr; } }

/* En-tête de commande (client / date / type) */
.entete-commande {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 720px) { .entete-commande { grid-template-columns: 1fr; } }

/* Catalogue */
.cat-groupe { margin-bottom: 22px; }
.cat-groupe__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
}
.cat-groupe__compte {
  margin-left: auto;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  color: var(--dore-levain);
}
.cat-liste {
  border: 1px solid var(--caramel-clair);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.produit {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: #fff;
}
.produit:nth-child(even) { background: #fdf9ee; }
.produit__nom { font-size: 14px; color: var(--brun-croute); }
.produit__desc { font-size: 12px; color: var(--gris-texte); margin-top: 1px; }
.produit__meta { font-size: 11px; color: var(--caramel); margin-top: 3px; }
.produit__prix {
  font-size: 14px;
  color: var(--brun-fournil);
  white-space: nowrap;
  text-align: right;
  min-width: 92px;
}
.produit__prix span { display: block; font-size: 11px; color: var(--caramel); }
.produit__ajout {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qte {
  width: 58px;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  border: 1px solid var(--caramel-clair);
  border-radius: 7px;
  padding: 7px 6px;
}
.btn-ajout {
  border: none;
  background: var(--dore-levain);
  color: var(--brun-croute);
  border-radius: 7px;
  width: 34px; height: 34px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.btn-ajout:hover { background: #e7ad33; }
/* Bouton « retirer un », discret tant que rien n'est commandé. */
.btn-moins {
  border: 1px solid var(--caramel-clair);
  background: #fff;
  color: var(--brun-fournil);
  border-radius: 7px;
  width: 34px; height: 34px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.btn-moins:hover { background: var(--creme-mie); }
/* Quantité au panier mise en avant dès qu'elle dépasse zéro. */
.qte--active {
  border-color: var(--dore-levain) !important;
  background: var(--creme-mie);
  color: var(--brun-croute);
}

/* Panier */
.panier { position: sticky; top: 26px; }
.panier__titre {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.panier__client { font-size: 12px; color: var(--caramel); }
.panier__lignes { margin: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.pligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--creme-mie);
}
.pligne__nom { font-size: 13px; color: var(--brun-croute); }
.pligne__detail { font-size: 11px; color: var(--caramel); }
.pligne__total { font-size: 13px; color: var(--brun-fournil); white-space: nowrap; }
.pligne__x {
  border: none; background: none; color: var(--rose-sourire);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.panier__vide { color: var(--caramel); font-size: 13px; padding: 18px 0; text-align: center; }

.totaux { margin-top: 8px; font-size: 13px; }
.totaux__ligne { display: flex; justify-content: space-between; padding: 4px 0; color: var(--gris-texte); }
.totaux__ligne--fort {
  border-top: 1px solid var(--caramel-clair);
  margin-top: 6px; padding-top: 10px;
  font-family: "Lora", Georgia, serif;
  font-size: 18px;
  color: var(--brun-fournil);
}
.note-franco {
  font-size: 11px; color: var(--caramel);
  background: var(--creme-mie);
  border-radius: 7px; padding: 8px 10px; margin-top: 12px;
}
.panier__valider { width: 100%; margin-top: 14px; }

/* ---------- Vues (navigation) ---------- */
.vue[hidden] { display: none; }

/* ---------- Vue Catalogue ---------- */
.cat-resume { font-size: 13px; color: var(--caramel); padding-bottom: 4px; }

.cat-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.champ--recherche { max-width: 280px; }

.cat-onglets { display: flex; gap: 6px; }
.onglet {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13px;
  color: var(--brun-fournil);
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
}
.onglet:hover { border-color: var(--dore-levain); }
.onglet--actif {
  background: var(--brun-fournil);
  border-color: var(--brun-fournil);
  color: var(--blanc-chignon);
}

.cat-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 16px;
}

.fiche {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-carte);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fiche--incomplete { border-left-color: var(--caramel-clair); background: #fffdf6; }

.fiche__haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fiche__nom { font-size: 16px; }
.fiche__famille {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--brun-croute);
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 2px 8px;
}
.fiche__desc { font-size: 12px; color: var(--gris-texte); min-height: 32px; }
.fiche__prix {
  font-family: "Lora", Georgia, serif;
  font-size: 21px;
  color: var(--brun-fournil);
  margin-top: 2px;
}
.fiche__prix span {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
  color: var(--caramel);
  margin-left: 6px;
}
.fiche__prix--manquant {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13px;
  color: var(--rose-sourire);
}
.fiche__meta { font-size: 11px; color: var(--caramel); }
.fiche__allergenes { margin-top: 2px; }

.cat-vide {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--caramel);
  font-size: 14px;
  padding: 40px 0;
}

/* ---------- Photos produits (Catalogue) ---------- */
.fiche__photo-zone { position: relative; margin: -15px -16px 8px; }
.fiche__photo {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: calc(var(--rayon) - 2px) calc(var(--rayon) - 2px) 0 0;
}
.fiche__photo-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.fiche__photo-zone:hover .fiche__photo-actions { opacity: 1; }
.photo-btn {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
  color: var(--brun-croute);
  background: rgba(251, 246, 227, 0.95);
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.photo-btn:hover { border-color: var(--dore-levain); }
.photo-btn--retirer { color: var(--rose-sourire); }
.photo-ajout {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  color: var(--caramel);
  background: var(--creme-mie);
  border: 1px dashed var(--caramel-clair);
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  margin-bottom: 4px;
  text-align: center;
}
.photo-ajout:hover { color: var(--brun-fournil); border-color: var(--dore-levain); }

/* ---------- Vue Clients ---------- */
.clients {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1100px) { .clients { grid-template-columns: 1fr; } }

/* CRM : la fiche s'ouvre en accordéon sous la carte cliquée (comme le cahier) */
.cli-colonne { max-width: 760px; }
.cli-detail-inline {
  margin: 2px 0 12px 18px;
  border-left: 4px solid var(--dore-levain);
}

.cli-liste { display: flex; flex-direction: column; gap: 10px; }
.cli-carte {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--caramel-clair);
  box-shadow: var(--ombre-douce);
  padding: 13px 16px;
  cursor: pointer;
}
.cli-carte:hover { border-left-color: var(--dore-levain); }
.cli-carte--active {
  border-left-color: var(--dore-levain);
  box-shadow: 0 0 0 2px rgba(243, 191, 76, 0.45), var(--ombre-carte);
}
.cli-carte__haut { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cli-carte__nom { font-family: "Lora", Georgia, serif; font-size: 16px; color: var(--brun-fournil); }
.cli-carte__ligne { font-size: 12px; color: var(--gris-texte); margin-top: 2px; }

.cli-statut {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--caramel-clair);
  color: var(--brun-croute);
  background: var(--creme-mie);
}
.cli-statut--actif { background: var(--dore-levain); border-color: var(--dore-levain); color: var(--brun-croute); }
.cli-statut--prospect { background: var(--caramel-clair); border-color: var(--caramel-clair); color: var(--brun-croute); }
.cli-statut--inactif { opacity: 0.6; }

.cli-confidentiel { color: var(--rose-sourire); font-size: 11px; margin-left: 8px; }

.cli-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cli-form__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
/* le mot d'explication sous les cases « Jours de livraison » : ces cases
   commandent l'espace client, il faut le dire là où on coche */
.cli-aide {
  font-size: 12px;
  color: var(--gris-texte);
  margin-top: 6px;
  line-height: 1.4;
}
.cli-jours { display: flex; flex-wrap: wrap; gap: 6px; }
.cli-jour {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gris-texte);
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  margin: 0;
}
.cli-case {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gris-texte);
  margin: 0;
}
.cli-case--confidentiel { color: var(--rose-sourire); }

/* ---------- Tableau de bord ---------- */
.dash-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.dash-tuile {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-douce);
  padding: 14px 18px;
}
.dash-tuile__titre { font-size: 12px; color: var(--caramel); }
.dash-tuile__valeur {
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  color: var(--brun-fournil);
  margin: 2px 0;
  font-variant-numeric: tabular-nums;
}
.dash-tuile__detail { font-size: 11px; color: var(--gris-texte); }

.dash-colonnes {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}
@media (max-width: 1000px) { .dash-colonnes { grid-template-columns: 1fr; } }

.dash-bloc { border-left: none; }
.dash-bloc__titre { font-size: 14px; margin-bottom: 12px; }

/* Graphique en barres — une seule mesure, une seule teinte (caramel) */
.dash-graph {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 20px;
  border-bottom: 1px solid var(--caramel-clair);
}
.dash-barre-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  cursor: default;
}
.dash-barre {
  width: 60%;
  max-width: 42px;
  background: var(--caramel);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: background 0.12s ease;
}
.dash-barre-col:hover .dash-barre { background: var(--brun-fournil); }
.dash-barre-val {
  font-size: 10px;
  color: var(--gris-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-barre-jour { font-size: 11px; color: var(--caramel); padding: 5px 0 2px; }
.dash-tooltip {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  font-size: 11px;
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  pointer-events: none;
}

/* Bloc financier : camembert + courbe */
.dash-exemple {
  font-size: 12px;
  color: var(--rose-sourire);
  background: #fff;
  border: 1px dashed var(--rose-sourire);
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.dash-fin { margin-bottom: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 1250px) { .dash-fin { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .dash-fin { grid-template-columns: 1fr; } }

.dash-donut-flex { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dash-donut { width: 180px; height: 180px; flex: 0 0 auto; }
.dash-donut path { cursor: default; }
.dash-donut path:hover { opacity: 0.85; }
.dash-donut__centre-val {
  font-family: "Lora", Georgia, serif;
  font-size: 26px;
  fill: var(--brun-fournil);
}
.dash-donut__centre-label { font-size: 11px; fill: var(--caramel); letter-spacing: 1px; }
/* L'anneau « je ne sais pas » : un point d'interrogation, pas un zéro.
   (31/08/2026 — un chiffre inventé vaut moins qu'un aveu d'ignorance.) */
.dash-donut__inconnu { font-size: 40px; fill: var(--caramel); }
.dash-legende__note { font-size: 11px; color: var(--caramel); line-height: 1.45; }
/* L'objectif à côté du constaté — jamais à sa place (31/08/2026). */
.dash-vise { font-size: 11px; margin-left: 7px; opacity: .8; font-variant-numeric: tabular-nums; }
.dash-vise--bon { color: #1a7f4b; }
.dash-vise--loin { color: var(--caramel); }
.dash-cible {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--caramel-clair);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--gris-texte);
}
.dash-cible em { font-style: normal; opacity: .7; }
/* Point hebdo : les boutons « une feuille par personne » (31/08/2026). */
.ph-odj__gens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
/* Trajectoire d'EBE : trois colonnes de saisie côte à côte. */
.fin-cibles { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.fin-cible__col { flex: 1 1 200px; min-width: 190px; }
.fin-cible__titre {
  font-size: 12px; font-weight: 600; color: var(--brun-fournil);
  margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--caramel-clair);
}
.fin-cible__col label { display: block; font-size: 12px; color: var(--gris-texte); margin-bottom: 6px; }
.fin-cible__col .champ { margin-top: 2px; }
.fin-cible__somme { font-size: 11.5px; color: var(--caramel); margin-top: 4px; }
.fin-cible__somme--faux { color: var(--rose-sourire); font-weight: 600; }
/* La consigne de trancheuse, sous le produit au fournil (31/08/2026). */
.prod-tranche {
  font-size: 11.5px;
  color: var(--brun-croute);
  background: var(--dore-levain);
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  margin-top: 4px;
}
.ph-odj__n {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  background: rgba(0, 0, 0, .1);
  margin-left: 4px;
}
.dash-manque {
  margin-top: 12px;
  border-top: 1px dashed var(--caramel-clair);
  padding-top: 10px;
}
.dash-manque__titre {
  font-size: 12px;
  font-weight: 600;
  color: var(--brun-fournil);
  margin-bottom: 6px;
}
.dash-manque__liste {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gris-texte);
}
.dash-manque__liste li { margin-bottom: 4px; }

.dash-legende { display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.dash-legende--ligne { flex-direction: row; gap: 16px; min-width: 0; margin-bottom: 6px; }
.dash-legende__ligne { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-texte); }
.dash-legende__chip {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}
/* pastille des séries N-1 : évoque le trait pointillé */
.dash-legende__chip--pointille {
  height: 4px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,0.9) 2px 4px);
  background-size: 6px 100%;
}
.dash-legende__poste { flex: 1; }
.dash-legende__val {
  font-variant-numeric: tabular-nums;
  color: var(--brun-fournil);
}

.dash-courbe { position: relative; }
.dash-courbe__svg { width: 100%; height: auto; display: block; }
.dash-courbe__grad, .dash-courbe__mois {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 10px;
  fill: var(--caramel);
}

.dash-liste { display: flex; flex-direction: column; gap: 8px; }
.dash-cmd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--creme-mie);
  border-radius: 8px;
  padding: 9px 13px;
  cursor: pointer;
}
.dash-cmd:hover { background: #f5eed3; }
.dash-cmd__client { font-size: 13px; color: var(--brun-croute); }
.dash-cmd__detail { font-size: 11px; color: var(--caramel); }
.dash-statuts { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-fleche { color: var(--caramel); }
.dash-rappels { border-left: 4px solid var(--rose-sourire); }
.dash-rappels-ok { border-left: 4px solid var(--vert-petri); }
.dash-rappels-ok .dash-bloc__titre { color: var(--vert-petri); margin-bottom: 0; }
.dash-cmd--info { cursor: default; }
.dash-cmd--info:hover { background: var(--creme-mie); }

/* ---------- Vue Commandes ---------- */
#cmd-detail {
  position: sticky;
  top: 26px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
}
.cmd-carte { position: relative; }
.cmd-carte__total {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-fournil);
  margin-top: 4px;
}
.cmd-detail__client { font-size: 13px; color: var(--caramel); margin-top: 2px; }
.cmd-detail__valeur { font-size: 14px; color: var(--gris-texte); padding: 6px 0; }

.cmd-statut {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.cmd-statut--brouillon { background: var(--gris-carre); color: var(--gris-texte); }
.cmd-statut--confirmee { background: var(--dore-levain); color: var(--brun-croute); }
.cmd-statut--en-production { background: var(--caramel-clair); color: var(--brun-croute); }
.cmd-statut--livree { background: var(--vert-petri); color: #ffffff; }
.cmd-statut--facturee { background: var(--brun-fournil); color: var(--blanc-chignon); }
.cmd-statut--annulee { background: var(--rose-sourire); color: #ffffff; }

.cmd-lignes { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmd-lignes td { padding: 6px 4px; border-bottom: 1px solid var(--creme-mie); color: var(--gris-texte); }
.cmd-lignes__total { text-align: right; color: var(--brun-fournil); }

.cmd-dupliquer {
  border-top: 1px solid var(--caramel-clair);
  padding-top: 12px;
}
.cmd-dupliquer__ligne { display: flex; gap: 8px; }
.cmd-dupliquer__ligne .champ { max-width: 170px; }

/* ---------- Documents clients (CGV, SEPA) ---------- */
.cli-docs { display: flex; flex-direction: column; gap: 8px; }
.doc-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--creme-mie);
  border: 1px dashed var(--caramel-clair);
  border-radius: 7px;
  padding: 9px 11px;
}
.doc-ligne--present {
  background: #fff;
  border-style: solid;
  border-left: 3px solid var(--dore-levain);
}
.doc-ligne__ico { font-size: 17px; color: var(--brun-fournil); }
.doc-ligne__ico--vide { color: var(--caramel-clair); }
.doc-ligne__infos { flex: 1; min-width: 0; }
.doc-ligne__label { font-size: 13px; color: var(--brun-croute); }
.doc-ligne__fichier {
  font-size: 11px;
  color: var(--caramel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-ligne__actions { display: flex; gap: 5px; flex: 0 0 auto; }
.doc-note { font-size: 12px; color: var(--caramel); }

/* ---------- Confirmation de commande ---------- */
.pdc-confirmation {
  text-align: center;
  font-size: 14px;
  color: var(--brun-fournil);
  background: var(--creme-mie);
  border: 1px solid var(--dore-levain);
  border-radius: 7px;
  padding: 14px 10px;
}
.pdc-confirmation span { font-size: 12px; color: var(--caramel); }

/* ---------- Vue Production ---------- */
.prod-toolbar { display: flex; align-items: flex-end; gap: 12px; }
.prod-toolbar .champ { width: auto; }

.prod-resume { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.prod-chiffre {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-douce);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--gris-texte);
}
.prod-chiffre span {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  color: var(--brun-fournil);
  margin-right: 5px;
}

.prod-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  margin-bottom: 20px;
  font-size: 13px;
}
.prod-table th, .prod-table td { padding: 9px 13px; text-align: left; }
.prod-th-fam {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
}
.prod-table thead tr:nth-child(2) th {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--brun-croute);
  background: var(--caramel-clair);
}
.prod-table tbody tr:nth-child(even) { background: var(--creme-mie); }
.prod-qte {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--brun-fournil);
  white-space: nowrap;
}
.prod-detail { font-size: 12px; color: var(--caramel); }
.prod-th-fait, .prod-case { text-align: center; width: 52px; }
.prod-case input { width: 17px; height: 17px; accent-color: var(--brun-fournil); cursor: pointer; }
.prod-fait td { opacity: 0.45; }
.prod-fait td:first-child { text-decoration: line-through; }

.prod-chiffre--farine {
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
}

/* Consentement géolocalisation de la badgeuse (façon bandeau cookies) */
.badge-consent {
  background: var(--creme-mie);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.badge-consent__titre {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--brun-croute);
  margin-bottom: 8px;
}
.badge-consent__texte {
  font-size: 13px;
  color: var(--brun-croute);
  line-height: 1.5;
  margin-bottom: 8px;
}
.badge-consent__accepter {
  background: var(--vert-petri);
  color: #fff;
}
.badge-consent__retirer {
  border: none; background: none;
  color: var(--caramel);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}
.badge-consent__retirer:hover { color: var(--rose-sourire); }

/* Bouton « Je badge » du mode Joy : gros et vert, sous le nom JOY,
   pour que chaque salarié le repère au premier coup d'œil */
.joy-badge {
  display: block;
  margin: 6px 18px 16px;
  width: calc(100% - 36px);
  border: none;
  border-radius: 12px;
  background: var(--vert-petri);
  color: #fff;
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--ombre-douce);
}
.joy-badge:hover { filter: brightness(1.08); }
@media print { .joy-badge { display: none; } }

/* ---------- Bouton ← Retour (global en tête d'écran + retours locaux) ---------- */
/* hidden l'emporte sur l'affichage : sans cette règle, la déclaration
   display:inline-block ci-dessous battait le [hidden] du navigateur et un
   bouton « ← Retour » MORT restait en tête du premier écran — le premier
   bouton que voyait un boulanger ou un client, et il ne faisait rien. */
/* Une déclaration d'auteur display:… bat le [hidden] du navigateur : partout
   où l'on cache un élément par cet attribut, il faut le dire explicitement.
   Trois cas trouvés à l'audit, dont un sur l'écran du client. */
.btn-retour[hidden],
.ec-rebours-tete[hidden],
.cli-contact__droits[hidden],
.qte-noter-forme[hidden] { display: none !important; }
.btn-retour {
  display: inline-block;
  border: 1px solid var(--caramel-clair);
  background: #fff;
  color: var(--brun-croute);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 14px;
}
.btn-retour:hover { border-color: var(--dore-levain); background: var(--creme-mie); }
@media print { .btn-retour { display: none; } }

/* ---------- Dispatch (cuisson de nuit) ----------
   Le même tableau croisé que les Quantités de Thomas (classes qte-*),
   pensé tablette : la case entière est le bouton, un appui valide. */
.disp-cadre { margin-bottom: 16px; }

/* la colonne À cuire reste collée derrière la colonne des produits */
.disp-croise .qte-produit, .disp-croise thead .qte-coin:first-child { min-width: 150px; }
/* deux classes : la règle générale .qte-coin (min-width 180px) arrive plus
   tard dans la feuille et gagnerait la cascade à spécificité égale */
.disp-croise .disp-coin-cuire { left: auto; min-width: 64px; text-align: center; }
.disp-acuire {
  text-align: center;
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  color: var(--brun-croute);
  background: var(--creme-mie);
  border-bottom: 1px solid #f2efe6;
  padding: 3px 10px;
  white-space: nowrap;
}
.disp-acuire--fait { background: #e6efd9; color: var(--vert-petri); }

/* une case = un dépôt : grande, touchable, et parlante */
.disp-cell {
  cursor: pointer;
  min-width: 68px;
  height: 52px;
  padding: 2px 4px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.disp-cell__qte {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  color: var(--gris-fonce);
  line-height: 1.15;
}
.disp-cell__note { display: block; font-size: 9.5px; color: var(--rose-sourire); line-height: 1.1; }
.disp-cell__ok { display: block; font-size: 10px; color: var(--vert-petri); line-height: 1.2; }
.disp-vide { color: var(--beige-fonce); }
.disp-cell--val { background-color: #e6efd9; }
.disp-cell--val .disp-cell__qte { color: var(--vert-petri); }
.disp-cell--val.qte-cell--paire { background-color: #dfe9cf; }
.disp-cell--casse { box-shadow: inset 0 -2px 0 var(--rose-sourire); }

/* mode casse : tout le tableau prévient qu'un appui déclare une casse */
.disp-croise--casse .disp-cell { cursor: crosshair; }
.disp-croise--casse .disp-cell:hover { background-color: #f7e4e4; }
.disp-mode--actif {
  background: var(--rose-sourire);
  color: #fff;
  border-color: var(--rose-sourire);
}

/* le formulaire de casse, posé au-dessus du tableau */
.disp-casse-panneau { border: 1px solid var(--rose-sourire); margin-bottom: 14px; }
.disp-casse-titre { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-croute); margin-bottom: 8px; }
.disp-casse-nombre { width: 64px; text-align: center; font-size: 16px; }
.disp-pas { min-width: 44px; font-size: 17px; }

/* le choix d'impression, posé sous le bouton Imprimer */
.disp-impr { position: relative; }
.disp-impr-choix {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(95, 55, 17, 0.14);
  white-space: nowrap;
}

.disp-casse-liste { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.disp-casse-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--brun-croute);
  background: #fff; border-radius: 8px; padding: 6px 10px;
}
.disp-casse-vignette {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--caramel-clair);
}

/* ---------- Surbrillance croisée (Dispatch ET Quantités) ----------
   La ligne et la colonne survolées se teintent ; leur croisement — la
   case visée — ressort deux fois plus. Un voile posé PAR-DESSUS la
   couleur de la case (background-image), pour ne jamais effacer le vert
   d'une validation ou le rose d'une casse. */
/* Thomas, 14/09/2026 : « j'ai du mal à me repérer entre les colonnes
   horizontales et verticales ». Deux couleurs, jamais la même : la LIGNE
   (le produit) en chaud, la COLONNE (le point de vente) en froid, et leur
   croisement porte les deux. L'œil sait aussitôt dans quel sens il lit. */
.qte-tableau td.croise-ligne, .qte-tableau th.croise-ligne {
  background-image: linear-gradient(rgba(214, 160, 60, 0.18), rgba(214, 160, 60, 0.18));
}
.qte-tableau td.croise-col, .qte-tableau th.croise-col {
  background-image: linear-gradient(rgba(70, 120, 170, 0.14), rgba(70, 120, 170, 0.14));
}
.qte-tableau td.croise-ligne.croise-col, .qte-tableau th.croise-ligne.croise-col {
  background-image: linear-gradient(rgba(214, 160, 60, 0.22), rgba(214, 160, 60, 0.22)),
                    linear-gradient(rgba(70, 120, 170, 0.18), rgba(70, 120, 170, 0.18));
  outline: 2px solid rgba(90, 60, 20, 0.45);
  outline-offset: -2px;
}
/* et une ligne sur deux légèrement teintée, pour suivre l'horizontale
   même sans la souris */
.qte-tableau tbody tr.qte-ligne--paire td.qte-cell { background-color: #fbf6ee; }
.qte-tableau tbody tr.qte-ligne--paire th.qte-produit { background-color: #fbf6ee; }

/* ---------- Ma journée (écran du boulanger) ---------- */
.journee-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  align-items: start;
}
.journee-carte h2 {
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.journee-etat {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 10px;
  background: var(--gris-carre);
  color: var(--gris-texte);
  white-space: nowrap;
}
.journee-etat--ok { background: var(--vert-petri); color: #fff; }
.journee-liste { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 12px; }
.journee-ligne {
  font-size: 13px;
  color: var(--brun-croute);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--creme-mie);
  padding-bottom: 4px;
}
.journee-ligne span:last-child { color: var(--caramel); white-space: nowrap; }
.journee-carte--verrou .petri-liste { opacity: 0.45; }
.petri-ing--bloque { cursor: not-allowed; }
.journee-verrou {
  font-size: 13px;
  color: var(--gris-texte);
  background: var(--creme-mie);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.tour-note { font-size: 11px; color: var(--caramel); margin-top: 2px; }
.journee-fini {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--vert-pese-fond);
  color: var(--vert-petri);
  font-size: 14px;
}

/* ---------- Besoins matières premières ---------- */
.mat-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brun-croute);
  cursor: pointer;
}
.mat-detail input { width: 16px; height: 16px; accent-color: var(--brun-fournil); cursor: pointer; }

/* ---------- Espace Boulangerie : pesée et pétrissage ---------- */
:root {
  --vert-petri: #7A9455;      /* état "pétri" / ingrédient pesé */
  --vert-pese-fond: #EAF1DF;
  --gris-carre: #DFDACB;      /* carré "grisonnant" en attente */
}

.prod-onglets { margin-bottom: 20px; }

.petri-bandeau {
  font-size: 14px;
  color: var(--brun-croute);
  margin-bottom: 16px;
}
.petri-bandeau span {
  display: block;
  font-size: 12px;
  color: var(--caramel);
  margin-top: 2px;
}

/* ---------- PLF et tourage ---------- */
.petri-carre--plf { border: 1px dashed var(--caramel-clair); }
.plf-patons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plf-nb { width: 90px; text-align: center; font-size: 20px; font-family: "Lora", Georgia, serif; }
.plf-pas { min-width: 46px; font-size: 18px; }
.plf-patons__note { font-size: 12px; color: var(--gris-texte); }
/* La commande interne : une ligne par viennoiserie, le nombre de pâtons se
   calcule à droite. Les doigts du boulanger sont pris : cases larges. */
.tour-carte__attendu { font-size: 12px; color: var(--brun-croute); margin-top: 2px; }
.tour-carte__ecart { font-weight: 600; }

/* une recette écrite que le marquage achat-revente rend inopérante */
.cahier-revente-alerte {
  margin: 10px 0; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, #8a5a2b 10%, #fff);
  border-left: 3px solid #8a5a2b;
  font-size: 13px; line-height: 1.5;
}
.cahier-revente-alerte .btn { margin-top: 8px; }

/* une recette qui se calcule : ni « à écrire », ni « au cahier » */
.cahier-etat--calculee {
  background: color-mix(in srgb, var(--brun-croute) 12%, #fff);
  color: var(--brun-croute);
}

.plf-commande { display: grid; gap: 6px; }
.plf-cmd-ligne {
  display: grid; grid-template-columns: 1fr 96px minmax(88px, auto);
  align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--creme);
}
.plf-cmd-nom { font-size: 14px; display: flex; flex-direction: column; }
.plf-cmd-nb { text-align: center; font-size: 19px; font-family: "Lora", Georgia, serif; }
.plf-cmd-patons {
  font-size: 12px; color: var(--brun-croute); text-align: right; line-height: 1.35;
}
@media (max-width: 520px) {
  .plf-cmd-ligne { grid-template-columns: 1fr 76px; }
  .plf-cmd-patons { grid-column: 1 / -1; text-align: left; }
}

.plf-rendement {
  background: var(--creme-mie); border-radius: 10px; padding: 10px 14px;
  margin-top: 10px; font-size: 13px; color: var(--brun-croute);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
}
.plf-rendement__item { display: inline-flex; align-items: baseline; gap: 5px; }
.plf-rendement__n {
  font-family: "Lora", Georgia, serif; font-size: 19px; color: var(--brun-fournil);
}

.tour-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-top: 16px;
}
.tour-carte {
  background: var(--gris-carre); border-radius: 11px; padding: 14px 16px;
  box-shadow: var(--ombre-douce);
}
.tour-carte--faite { background: #e6efd9; }
.tour-carte__nom { font-family: "Lora", Georgia, serif; font-size: 16px; color: var(--brun-croute); }
.tour-carte__sous { font-size: 11px; color: var(--gris-texte); margin-top: 2px; }
.tour-carte__saisie { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tour-nb { width: 92px; text-align: center; font-size: 20px; font-family: "Lora", Georgia, serif; }
.tour-carte__unite { font-size: 12px; color: var(--gris-texte); }
.tour-carte__stock { font-size: 11px; color: var(--brun-fournil); margin-top: 8px; }
.tour-total {
  margin-top: 16px; font-size: 14px; color: var(--brun-croute);
  background: var(--creme-mie); border-radius: 10px; padding: 12px 16px;
}

/* ---------- Dispatch : correction des quantités ---------- */
.disp-mode--quantites {
  background: var(--dore-levain); color: var(--brun-croute); border-color: var(--dore-levain);
}
.disp-saisie { width: 58px; font-size: 15px; }
.disp-cell--commande { text-align: center; color: var(--gris-texte); }

/* ---------- Journée non ouverte : Joy grisé ----------
   Rien n'est caché : on voit son menu, il est simplement hors d'atteinte
   tant que la journée n'a pas commencé. Voir ce qu'on va retrouver vaut
   mieux qu'un écran vide. */
.joy-verrouille .nav__item--verrouille {
  opacity: 0.38;
  pointer-events: none;
  cursor: not-allowed;
}
.joy-verrou {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fdf2f4; border: 2px solid var(--rose-sourire);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;
}
.joy-verrou__ico { font-size: 26px; color: var(--rose-sourire); line-height: 1; }
.joy-verrou__titre { font-family: "Lora", Georgia, serif; font-size: 17px; color: var(--brun-croute); }
.joy-verrou__texte { font-size: 13px; color: var(--caramel); margin-top: 3px; max-width: 60ch; }
.joy-verrou .btn { margin-left: auto; }

/* ---------- Bouton et choix de langue (Joy production) ---------- */
.joy-langue {
  display: block; width: calc(100% - 32px); margin: 0 16px 12px;
  background: var(--brun-croute); color: var(--blanc-chignon);
  border: 1px solid var(--caramel); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; cursor: pointer; text-align: center;
}
.joy-langue:hover { border-color: var(--dore-levain); }

.lang-fond {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(60, 35, 12, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lang-carte {
  background: var(--blanc-chignon); border-radius: 16px; padding: 22px;
  width: min(420px, 100%); box-shadow: var(--ombre-carte);
}
.lang-carte__titre {
  font-family: "Lora", Georgia, serif; font-size: 18px;
  color: var(--brun-croute); margin-bottom: 14px; text-align: center;
}
.lang-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lang-choix {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--creme-mie); border: 1px solid var(--beige-fonce);
  border-radius: 11px; padding: 13px 16px; font-size: 15px;
  color: var(--brun-croute); cursor: pointer; text-align: left;
}
.lang-choix:hover { border-color: var(--dore-levain); }
.lang-choix--actif { background: var(--vert-petri); color: #fff; border-color: var(--vert-petri); }
.lang-choix__drapeau { font-size: 22px; line-height: 1; }
.lang-carte__note { font-size: 12px; color: var(--gris-texte); margin-bottom: 14px; }

/* ---------- Plan de nettoyage : qui fait quoi ----------
   Mêmes gestes que le garage de Thomas : on glisse, ou on touche puis on
   dépose. Les couleurs disent la fréquence d'un coup d'œil. */
.aff-barre { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.aff-nav { display: flex; align-items: center; gap: 8px; }
.aff-semaine { font-family: "Lora", Georgia, serif; font-size: 16px; color: var(--brun-croute); }
.aff-outils { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.aff-lecture { margin-left: auto; font-size: 12px; color: var(--gris-texte); }

.aff-pool {
  background: var(--creme-mie); border: 1px dashed var(--caramel-clair);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.aff-pool--active { border-color: var(--vert-petri); }
.aff-pool__titre { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
                   color: var(--brun-fournil); margin-bottom: 8px; }
.aff-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.aff-vide { font-size: 12px; color: var(--gris-texte); }

.aff-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--beige-fonce); border-left-width: 4px;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--brun-croute);
  cursor: grab; user-select: none; transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.aff-chip:hover { transform: translateY(-1px); box-shadow: var(--ombre-douce); }
.aff-chip--jour { border-left-color: var(--vert-petri); }
.aff-chip--semaine { border-left-color: var(--dore-levain); }
.aff-chip--mois { border-left-color: var(--caramel); }
.aff-chip--prise { background: var(--vert-petri); color: #fff; box-shadow: var(--ombre-carte); }
.aff-chip--prise .aff-chip__zone { color: rgba(255,255,255,0.8); }
.aff-chip__zone { font-size: 10px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: 0.04em; }
.aff-retirer {
  border: none; background: transparent; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px;
}

.aff-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.aff-personne {
  background: #fff; border: 1px solid var(--beige-fonce); border-radius: 12px;
  padding: 12px 14px; min-height: 112px; transition: border-color 0.12s ease, background 0.12s ease;
}
.aff-personne--cible { border-style: dashed; border-color: var(--dore-levain); }
.aff-personne.aff-survol, .aff-pool.aff-survol { border-color: var(--vert-petri); background: #f2f6ec; }
.aff-personne__tete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.aff-personne__nom { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-croute); flex: 1; }
.aff-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.aff-compte {
  background: var(--creme-mie); border-radius: 999px; padding: 2px 9px;
  font-size: 12px; color: var(--brun-fournil);
}

.hyg-tache__qui {
  font-size: 11px; color: var(--brun-fournil); background: rgba(255,255,255,0.55);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.hyg-tache--faite .hyg-tache__qui { color: var(--brun-croute); }
.hyg-tache__photo {
  width: 38px; height: 38px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--caramel-clair);
}
.hyg-bandeau-edition {
  background: var(--creme-mie); border-left: 4px solid var(--dore-levain);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--brun-croute);
}

/* ---------- Calendrier des rafraîchis de levain dur ---------- */
.regf-rafraichi { display: flex; flex-direction: column; gap: 6px; }
.regf-rafraichi__jour {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--creme-mie); border-radius: 10px; padding: 8px 12px;
}
.regf-rafraichi__jour--sans { opacity: 0.68; }
.regf-rafraichi__nom {
  min-width: 92px; font-family: "Lora", Georgia, serif;
  font-size: 15px; color: var(--brun-croute); text-transform: capitalize;
}
.regf-rafraichi__cibles { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.regf-rafraichi__marge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris-texte); }
.regf-rafraichi__marge .regf-nombre { width: 62px; }

/* ---------- L'avertissement des pesées particulières ----------
   Les pâtons de 1 300 g de la tradition 1 kg sortent du même pétrin que la
   tradition : ça ne se voit qu'à la division. Le bloc est donc large, cerclé
   de rose et le nombre de pièces se lit de loin — la hiérarchie passe par la
   taille et la couleur, jamais par du gras. */
.petri-alerte-pesee {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: #fdf2f4;
  border: 2px solid var(--rose-sourire);
  border-radius: 12px;
}
.petri-alerte-pesee__ico { font-size: 26px; color: var(--rose-sourire); line-height: 1; }
.petri-alerte-pesee__corps { display: flex; flex-direction: column; gap: 8px; }
.petri-alerte-pesee__ligne { display: flex; align-items: baseline; gap: 10px; }
.petri-alerte-pesee__n {
  font-family: "Lora", Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--rose-sourire);
}
.petri-alerte-pesee__txt { font-size: 16px; color: var(--brun-croute); }
.petri-alerte-pesee__sous {
  display: block;
  font-size: 12px;
  color: var(--caramel);
  margin-top: 2px;
}

.petri-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.petri-carre {
  aspect-ratio: 1 / 1;
  background: var(--gris-carre);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.petri-carre:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.petri-carre__nom { font-family: "Lora", Georgia, serif; font-size: 19px; color: var(--brun-croute); }
.petri-carre__qte { font-size: 13px; color: var(--gris-texte); }
.petri-carre__etat { font-size: 11px; letter-spacing: 0.5px; color: var(--brun-fournil); }
.petri-carre__manque { font-size: 10px; color: var(--rose-sourire); }

.petri-carre--petri { background: var(--vert-petri); }
.petri-carre--petri .petri-carre__nom,
.petri-carre--petri .petri-carre__qte,
.petri-carre--petri .petri-carre__etat { color: #ffffff; }

.petri-carre--vide { opacity: 0.55; }

/* Détail d'une recette */
.petri-retour {
  border: none;
  background: none;
  color: var(--brun-fournil);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}
.petri-retour:hover { color: var(--brun-croute); }

.petri-detail { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.petri-detail__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.petri-detail__nom { font-size: 24px; }
.petri-detail__qte .champ { width: 110px; }

.petri-exemple {
  font-size: 12px;
  color: var(--rose-sourire);
  background: #fff;
  border: 1px dashed var(--rose-sourire);
  border-radius: 7px;
  padding: 8px 12px;
}
.petri-deja {
  font-size: 13px;
  color: var(--brun-croute);
  background: var(--vert-pese-fond);
  border: 1px solid var(--vert-petri);
  border-radius: 7px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.petri-liste { display: flex; flex-direction: column; gap: 12px; }
/* Boutons ingrédients : même langage que les carrés — gris tant que
   non pesé, vert plein une fois pesé. Grands et tactiles pour le fournil. */
.petri-ing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--gris-carre);
  border: none;
  border-radius: 11px;
  box-shadow: var(--ombre-douce);
  padding: 22px 24px;
  font-size: 18px;
  color: var(--brun-croute);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
  user-select: none;
}
.petri-ing:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte); }
.petri-ing:active { transform: scale(0.99); }
.petri-ing__poids {
  font-family: "Lora", Georgia, serif;
  font-size: 24px;
  color: var(--brun-fournil);
  white-space: nowrap;
}
.petri-ing--pese {
  background: var(--vert-petri);
  color: #ffffff;
}
.petri-ing--pese .petri-ing__poids { color: #ffffff; }

.petri-total {
  font-size: 13px;
  color: var(--caramel);
  text-align: right;
}
.petri-btn-petrir {
  background: var(--vert-petri);
  color: #ffffff;
  font-size: 16px;
  padding: 13px 18px;
}
.petri-btn-petrir:hover:not(:disabled) { background: #668047; }
.petri-btn-petrir:disabled {
  background: var(--gris-carre);
  color: #9b9481;
  cursor: not-allowed;
}

/* ---------- Vue Livraison ---------- */
.livr-liste { display: flex; flex-direction: column; gap: 12px; }

.livr-carte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--gris-carre);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  padding: 14px 18px;
}
.livr-carte--livree { background: var(--vert-petri); }
.livr-carte--livree .livr-carte__client,
.livr-carte--livree .livr-carte__adresse,
.livr-carte--livree .livr-carte__produits,
.livr-carte--livree .livr-carte__ref,
.livr-carte--livree .livr-num { color: #ffffff; }

.livr-carte__ordre { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.livr-num {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  color: var(--brun-fournil);
}
.livr-fleche {
  border: none;
  background: none;
  color: var(--brun-croute);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
}
.livr-fleche:disabled { opacity: 0.25; cursor: default; }
.livr-carte--livree .livr-fleche { color: #ffffff; }

.livr-carte__tete { display: flex; align-items: baseline; gap: 12px; }
.livr-carte__client { font-family: "Lora", Georgia, serif; font-size: 18px; color: var(--brun-croute); }
.livr-carte__ref { font-size: 11px; color: var(--caramel); }
.livr-carte__adresse { font-size: 12px; color: var(--gris-texte); margin-top: 2px; }
.livr-carte__produits { font-size: 12px; color: var(--brun-croute); margin-top: 4px; }

.livr-carte__action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.livr-btn-livrer { background: var(--brun-fournil); color: var(--blanc-chignon); }
.livr-btn-livrer:hover { background: var(--brun-croute); }
.livr-fait { font-size: 12px; color: #ffffff; letter-spacing: 0.4px; }

/* B2C : gestion des points de vente */
.livr-b2c-actions { margin-bottom: 12px; }
.marche-form { margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.marche-form__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.livr-modifier {
  border: none;
  background: none;
  font-size: 11px;
  color: var(--caramel);
  cursor: pointer;
  padding: 0;
}
.livr-modifier:hover { color: var(--brun-fournil); }
.livr-carte--livree .livr-modifier { color: rgba(255, 255, 255, 0.8); }

.livr-livreur { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.livr-livreur label { margin: 0; font-size: 11px; white-space: nowrap; }
.livr-livreur .champ { max-width: 220px; padding: 5px 9px; font-size: 12px; }
.livr-carte--livree .livr-livreur label { color: #ffffff; }

.livr-sansjour {
  margin-top: 18px;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--caramel-clair);
  box-shadow: var(--ombre-douce);
}
.livr-sansjour__titre { font-size: 12px; color: var(--caramel); margin-bottom: 6px; }
.livr-sansjour__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--brun-croute);
  padding: 4px 0;
}

/* B2B : badge livreur interne + photo de preuve */
.livr-badge-interne {
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--brun-croute);
  background: var(--dore-levain);
  border-radius: 999px;
  padding: 2px 9px;
}
.livr-photo { display: flex; align-items: center; gap: 6px; }
.livr-photo img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 7px;
  border: 2px solid #ffffff;
  box-shadow: var(--ombre-douce);
  cursor: zoom-in;
}
.livr-photo-manque { font-size: 11px; color: var(--rose-sourire); }

/* ---------- Bons de livraison (impression) ---------- */
#bl-zone { display: none; }

body.print-bl .app { display: none !important; }
body.print-bl #bl-zone { display: block; }

.bl {
  page-break-after: always;
  background: #ffffff;
  color: var(--gris-texte);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11pt;
  padding: 36pt 42pt;
}
.bl__tete {
  display: flex;
  align-items: flex-start;
  gap: 16pt;
  border-bottom: 2pt solid var(--dore-levain);
  padding-bottom: 12pt;
}
.bl__logo { width: 64pt; height: 64pt; object-fit: contain; }
.bl__societe { font-size: 9pt; color: var(--brun-croute); line-height: 1.5; }
.bl__titre { margin-left: auto; text-align: right; }
.bl__nom-doc {
  font-family: "Lora", Georgia, serif;
  font-size: 20pt;
  color: var(--brun-fournil);
}
.bl__ref { font-size: 9pt; color: var(--caramel); margin-top: 4pt; }

.bl__client {
  margin: 16pt 0;
  padding: 10pt 14pt;
  background: var(--creme-mie);
  border-left: 3pt solid var(--dore-levain);
  border-radius: 6pt;
  font-size: 11pt;
  color: var(--brun-croute);
}
.bl__client-label { font-size: 8pt; letter-spacing: 0.5pt; color: var(--caramel); margin-bottom: 3pt; }

.bl__table { width: 100%; border-collapse: collapse; margin: 10pt 0 14pt; }
.bl__table th {
  font-weight: 400;
  text-align: left;
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  padding: 6pt 10pt;
  font-size: 10pt;
}
.bl__table td { padding: 6pt 10pt; font-size: 10.5pt; }
.bl__table tbody tr:nth-child(even) { background: var(--creme-mie); }

.bl__note { font-size: 8.5pt; color: var(--gris-texte); margin: 10pt 0 22pt; }

.livr-note-photos { font-size: 12px; color: var(--caramel); margin: -6px 0 14px; }

/* ---------- Plans de tournée ---------- */
.livr-tournees {
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.livr-tournees__titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
  margin-bottom: 10px;
}
.livr-tournee {
  border: 1px solid var(--creme-mie);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.livr-tournee--ouverte { border-color: var(--dore-levain); }
.livr-tournee__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.livr-tournee__camion { color: var(--brun-croute); font-size: 14px; }
.livr-tournee__resume { color: var(--caramel); font-size: 12px; }
.livr-tournee-badge {
  border: 1px solid var(--caramel-clair);
  background: var(--creme-mie);
  color: var(--brun-fournil);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.livr-tournee-badge:hover { border-color: var(--dore-levain); }
.livr-tournee__detail { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.livr-tournee__etape { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.livr-tournee__etape--b2b { color: var(--brun-fournil); }
.livr-tournee__adresse { display: block; font-size: 11.5px; color: var(--gris-texte); }

/* ---------- Le garage des tournées (vue ludique) ---------- */
.plan-camionnette { color: var(--dore-levain); }
.gar {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 14px;
  padding: 16px 18px;
}
.gar-jours { margin-bottom: 12px; }
.gar-nav-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gar-aller { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--caramel); }
.gar-aller .champ { width: auto; padding: 5px 8px; font-size: 12.5px; }

/* organigramme : les deux colonnes sous Thomas */
.orga__sous-colonnes { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.orga__sous-colonne { flex: 1; min-width: 0; }
.orga__sous-titre {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caramel);
  text-align: center;
  margin-bottom: 6px;
}
.gar-livreurs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--creme-mie);
  border-radius: 10px;
  margin-bottom: 16px;
}
.gar-livreurs__titre { font-size: 12px; color: var(--caramel); margin-right: 6px; }
.gar-livreur {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--caramel-clair);
  background: #fff;
  color: var(--brun-fournil);
  border-radius: 999px;
  padding: 4px 14px 4px 5px;
  font-size: 13px;
  font-family: inherit;
  cursor: grab;
}
.gar-livreur--place { background: var(--vert-pese-fond); border-color: var(--vert-petri); color: var(--vert-petri); }
.gar-livreur--fixe { cursor: default; background: var(--creme-mie); color: var(--caramel); }

/* le parc : cinq camions vus du ciel, cabine en haut, portes en bas */
.gar-parc {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .gar-parc { grid-template-columns: repeat(2, 1fr); } }
.gar-camion {
  position: relative;
  border: 2px solid var(--brun-fournil);
  border-radius: 18px 18px 8px 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(95, 55, 17, 0.12);
}
/* les roues, vues du ciel : deux essieux qui dépassent de la carrosserie */
.gar-roue {
  position: absolute;
  width: 7px;
  height: 26px;
  background: #33291D;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px #1E1812;
}
.gar-roue--avg { left: -7px; top: 44px; }
.gar-roue--avd { right: -7px; top: 44px; }
.gar-roue--arg { left: -7px; bottom: 22px; }
.gar-roue--ard { right: -7px; bottom: 22px; }
/* l'étoile sur la calandre, à l'avant */
.gar-etoile {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 0;
  background: #fff;
  border-radius: 50%;
}
/* la tête du livreur, format jeton */
.gar-avatar {
  width: 22px !important;
  height: 22px !important;
  margin-right: 6px;
  box-shadow: 0 0 0 1.5px var(--dore-levain);
}
.gar-avatar i { font-size: 9px !important; }
.gar-camion--plein { border-color: var(--vert-petri); }
.gar-camion--b2b { border-style: dashed; }
.gar-camion__nom {
  text-align: center;
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-croute);
  padding: 6px 4px 2px;
}
.gar-plein { color: var(--vert-petri); font-size: 11px; letter-spacing: 1px; }
/* cabine : pare-brise arrondi, volant, rétroviseurs */
.gar-cabine {
  position: relative;
  margin: 4px 10px 0;
  border: 1.5px solid var(--caramel);
  border-radius: 14px 14px 4px 4px;
  background: var(--creme-mie);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gar-cabine::before, .gar-cabine::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 8px;
  height: 3px;
  background: var(--caramel);
  border-radius: 2px;
}
.gar-cabine::before { left: -9px; }
.gar-cabine::after { right: -9px; }
.gar-volant { color: var(--caramel); font-size: 13px; }
.gar-conducteur { font-size: 12.5px; color: var(--brun-fournil); display: flex; align-items: center; gap: 4px; }
/* la benne, toit ouvert */
.gar-benne {
  margin: 6px 10px;
  border: 1.5px dashed var(--caramel-clair);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
}
.gar-camion--vito .gar-benne { min-height: 110px; }
.gar-camion--vito .gar-cabine { border-radius: 10px 10px 4px 4px; }
.gar-place {
  border: 1.5px dashed var(--gris-carre);
  border-radius: 8px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}
.gar-place--pleine { border-style: solid; border-color: var(--dore-levain); background: #FFFDF4; }
.gar-place__vide { font-size: 10.5px; color: var(--gris-texte); text-align: center; }
.gar-survol { border-color: var(--dore-levain); background: var(--creme-mie); }
.gar-b2b-zone {
  border: 1.5px dashed var(--caramel-clair);
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 30px;
}
.gar-b2b-zone__titre { width: 100%; font-size: 10px; letter-spacing: 0.5px; color: var(--caramel); text-transform: uppercase; }
/* portes arrière */
.gar-portes { display: flex; gap: 3px; padding: 0 10px 8px; }
.gar-portes span { flex: 1; height: 5px; background: var(--brun-fournil); border-radius: 2px; }

/* étiquettes à faire glisser */
.gar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  cursor: grab;
  border: 1px solid var(--caramel-clair);
  background: #fff;
  color: var(--brun-croute);
}
.gar-chip--marche { background: var(--creme-mie); }
.gar-chip--b2b { background: #F2EFF7; border-color: #C9C0DC; color: #55447A; }
.gar-prise { outline: 2px solid var(--dore-levain); outline-offset: 2px; }
.gar-retirer {
  border: 0;
  background: transparent;
  color: var(--rose-sourire);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  font-family: inherit;
}
/* le quai de chargement */
.gar-quai {
  background: var(--creme-mie);
  border-radius: 10px;
  padding: 10px 12px;
}
.gar-quai__titre { display: block; font-size: 12px; color: var(--caramel); margin-bottom: 8px; }
.gar-quai__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- Heures de départ et ordre de chargement ----------
   L'heure se fixe dans la cabine du garage ; le boulanger de nuit la lit
   en tête du Dispatch, dans l'ordre où il doit charger. */
.gar-depart {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 10px 0; padding: 3px 6px;
  border-radius: 7px; background: var(--creme-mie);
}
.gar-depart label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--caramel); }
.gar-depart .champ { padding: 2px 4px; font-size: 12px; width: auto; flex: 1; min-width: 0; }
.gar-depart--fixee { background: var(--vert-pese-fond); }
.gar-depart--lecture { justify-content: center; font-size: 12px; color: var(--brun-croute); }

.chg-panneau {
  background: #fff; border: 1px solid var(--caramel-clair);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.chg-panneau--vide { color: var(--gris-texte); font-size: 13.5px; }
.chg-panneau__titre {
  font-family: "Lora", Georgia, serif; font-size: 16px; color: var(--brun-croute);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.chg-panneau__sous { font-family: inherit; font-size: 12.5px; color: var(--caramel); }
.chg-liste { display: flex; flex-direction: column; gap: 8px; }
.chg-camion {
  display: flex; align-items: stretch; gap: 12px;
  border: 1px solid var(--creme-mie); border-radius: 11px; padding: 9px 12px;
}
.chg-camion__rang {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--creme-mie); color: var(--brun-croute);
  display: grid; place-items: center; font-family: "Lora", Georgia, serif;
}
.chg-camion__corps { flex: 1 1 auto; min-width: 0; }
.chg-camion__tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chg-camion__nom { font-size: 15px; color: var(--brun-croute); }
.chg-camion__livreur { font-size: 12.5px; color: var(--caramel); }
.chg-camion__heure {
  font-size: 14px; color: var(--brun-fournil);
  background: var(--creme-mie); border-radius: 999px; padding: 1px 10px;
}
.chg-camion__delai { font-size: 12.5px; color: var(--gris-texte); }
.chg-camion__sansheure { font-size: 12.5px; color: var(--gris-texte); }
.chg-camion__dest { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chg-dest {
  background: var(--creme-mie); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; color: var(--brun-croute);
}
/* l'urgence se lit à la couleur : imminent, proche, prévu, parti */
.chg-camion--imminent { border-color: var(--rose-sourire); background: #FDF3F3; }
.chg-camion--imminent .chg-camion__rang { background: var(--rose-sourire); color: #fff; }
.chg-camion--imminent .chg-camion__delai { color: #A63F3F; }
.chg-camion--proche { border-color: var(--dore-levain); background: #FFFDF4; }
.chg-camion--proche .chg-camion__rang { background: var(--dore-levain); color: var(--brun-croute); }
.chg-camion--parti { opacity: 0.55; }
.chg-camion--parti .chg-camion__rang { background: var(--vert-petri); color: #fff; }

/* ---------- L'alerte « départ dans une heure » ---------- */
#alerte-depart {
  position: fixed; inset: 0; z-index: 4200;
  background: rgba(31, 25, 18, 0.55);
  display: grid; place-items: center;
  animation: ad-fond 0.3s ease-out;
}
#alerte-depart.ad-sortie { opacity: 0; transition: opacity 0.4s ease; }
.ad-carte {
  background: var(--creme-mie); border-radius: 18px;
  padding: 26px 30px 22px; text-align: center; max-width: 420px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  animation: ad-monte 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ad-route { position: relative; height: 46px; margin-bottom: 12px; overflow: hidden; }
.ad-camion {
  position: absolute; top: 2px; font-size: 34px; line-height: 1;
  color: var(--brun-fournil);
  animation: ad-roule 2.4s cubic-bezier(0.3, 0, 0.4, 1) infinite;
}
.ad-bitume {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 3px;
  background: repeating-linear-gradient(to right,
    var(--caramel-clair) 0 14px, transparent 14px 26px);
}
.ad-titre {
  font-family: "Lora", Georgia, serif; font-size: 22px;
  color: var(--brun-croute); margin-bottom: 6px; text-wrap: balance;
}
.ad-sous { font-size: 13.5px; color: var(--caramel); margin-bottom: 16px; }
@keyframes ad-fond { from { opacity: 0; } }
@keyframes ad-monte { from { opacity: 0; transform: translateY(22px) scale(0.94); } }
@keyframes ad-roule {
  0% { left: -14%; }
  100% { left: 104%; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-camion { animation: none; left: 42%; }
  .ad-carte { animation: ad-fond 0.3s ease both; }
}

/* ---------- Le tour du camion (départ / retour) ----------
   Le camion est vu du ciel ; ses quatre côtés sont des carrés à remplir.
   Gris = à faire, vert = fait : le même langage que le pétrissage et la
   livraison. L'entrée de menu n'existe que dans Joy — dans OSMO, la
   direction y accède par le bouton de l'écran Camions. */
.nav__item--camion { display: none; }
body.mode-joy .nav__item--camion { display: flex; }

.etatcam-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.etatcam-camions { display: flex; gap: 6px; flex-wrap: wrap; }
.etatcam-signatures { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.etatcam-signature {
  background: var(--vert-pese-fond); border: 1px solid var(--vert-petri);
  color: var(--vert-petri); border-radius: 999px; padding: 5px 14px; font-size: 13px;
}
.etatcam-consigne {
  background: var(--creme-mie); border-radius: 10px;
  padding: 11px 14px; font-size: 13.5px; color: var(--brun-croute); margin-top: 14px;
}
.etatcam-scene { display: flex; justify-content: center; }
.etatcam-plan { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.etatcam-plan__milieu { display: flex; align-items: center; gap: 20px; }

/* le véhicule vu du ciel, comme dans le garage des tournées */
.etatcam-vehicule {
  position: relative;
  width: 118px; height: 190px;
  border: 2px solid var(--brun-fournil);
  border-radius: 18px 18px 8px 8px;
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(95, 55, 17, 0.12);
}
.etatcam-vehicule--court { height: 150px; }
.etatcam-cabine {
  margin: 6px 10px 0; border: 1.5px solid var(--caramel);
  border-radius: 12px 12px 4px 4px; background: var(--creme-mie);
  height: 34px; display: grid; place-items: center;
}
.etatcam-volant { color: var(--caramel); font-size: 13px; }
.etatcam-benne {
  flex: 1; margin: 6px 10px; border: 1.5px dashed var(--caramel-clair);
  border-radius: 6px; display: grid; place-items: center;
  font-family: "Lora", Georgia, serif; font-size: 13px; color: var(--brun-croute);
  text-align: center; padding: 4px;
}
.etatcam-portes { display: flex; gap: 3px; padding: 0 10px 8px; }
.etatcam-portes span { flex: 1; height: 5px; background: var(--brun-fournil); border-radius: 2px; }
.etatcam-roue {
  position: absolute; width: 7px; height: 26px;
  background: #33291D; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #1E1812;
}
.etatcam-roue--avg { left: -7px; top: 40px; }
.etatcam-roue--avd { right: -7px; top: 40px; }
.etatcam-roue--arg { left: -7px; bottom: 24px; }
.etatcam-roue--ard { right: -7px; bottom: 24px; }

/* les quatre côtés à photographier */
.etatcam-face {
  position: relative; overflow: hidden;
  width: 132px; height: 96px;
  border: 2px dashed var(--gris-carre); border-radius: 12px;
  background: var(--gris-carre);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; text-align: center;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.etatcam-face:hover { transform: translateY(-2px); border-color: var(--dore-levain); }
.etatcam-face:focus-visible { outline: 3px solid var(--dore-levain); outline-offset: 2px; }
.etatcam-face--fait {
  border-style: solid; border-color: var(--vert-petri); background: var(--vert-pese-fond);
}
.etatcam-face img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.etatcam-face__appareil { font-size: 22px; }
.etatcam-face__nom {
  position: relative; font-size: 12.5px; color: var(--brun-croute);
  background: rgba(255, 255, 255, 0.86); border-radius: 999px; padding: 2px 9px;
}
.etatcam-face--fait .etatcam-face__nom { color: var(--vert-petri); }
.etatcam-face__heure {
  position: relative; font-size: 10.5px; color: var(--brun-croute);
  background: rgba(255, 255, 255, 0.86); border-radius: 999px; padding: 1px 7px;
}
.etatcam-face__coche {
  position: absolute; top: 5px; right: 7px; color: #fff; font-size: 15px;
  background: var(--vert-petri); border-radius: 50%; width: 21px; height: 21px;
  display: grid; place-items: center;
}

/* départ / retour côte à côte, pour la direction */
.etatcam-compare { margin-top: 22px; }
.etatcam-compare__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.etatcam-compare__face {
  background: #fff; border: 1px solid var(--caramel-clair);
  border-radius: 12px; padding: 10px 12px;
}
.etatcam-compare__nom { font-size: 13px; color: var(--brun-croute); margin-bottom: 7px; }
.etatcam-compare__duo { display: flex; gap: 8px; }
.etatcam-compare__duo figure { flex: 1; margin: 0; }
.etatcam-compare__duo img {
  width: 100%; height: 92px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--creme-mie); cursor: zoom-in;
}
.etatcam-compare__duo figcaption { font-size: 11px; color: var(--caramel); margin-top: 3px; }
.etatcam-compare__vide span {
  display: grid; place-items: center; height: 92px;
  background: var(--creme-mie); border-radius: 8px;
  font-size: 11.5px; color: var(--gris-texte);
}

@media (max-width: 620px) {
  .etatcam-face { width: 104px; height: 82px; }
  .etatcam-vehicule { width: 96px; height: 160px; }
}

/* ---------- Ma tournée (livreurs extérieurs) ----------
   L'entrée de menu n'existe que dans Joy : dans OSMO complet, la direction
   suit les livraisons depuis Vente > Livraison. En Joy, ouvrirJoy pose
   display:none en ligne sur les vues interdites — l'inline gagne, donc
   seuls les livreurs extérieurs la voient. */
.nav__item--presta { display: none; }
body.mode-joy .nav__item--presta { display: flex; }

.presta-carte {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.presta-carte--livree { background: var(--vert-pese-fond); border-color: var(--vert-petri); }
.presta-carte__num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--creme-mie);
  color: var(--brun-croute);
  display: grid; place-items: center;
  font-family: "Lora", Georgia, serif;
}
.presta-carte--livree .presta-carte__num { background: var(--vert-petri); color: #fff; }
.presta-carte__corps { flex: 1 1 auto; min-width: 0; }
.presta-carte__tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.presta-carte__client { font-family: "Lora", Georgia, serif; font-size: 17px; color: var(--brun-croute); }
.presta-fait { color: var(--vert-petri); font-size: 13px; }
.presta-adresse, .presta-tel {
  display: inline-block;
  margin-top: 5px;
  margin-right: 14px;
  font-size: 13.5px;
  color: var(--brun-fournil);
  text-decoration: none;
  border-bottom: 1px dotted var(--caramel-clair);
}
.presta-adresse:hover, .presta-tel:hover { border-bottom-color: var(--dore-levain); }
.presta-adresse--vide { color: var(--gris-texte); border: 0; }
.presta-produits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.presta-produit {
  background: var(--creme-mie);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12.5px;
  color: var(--brun-croute);
}
.presta-note { margin-top: 8px; font-size: 12.5px; color: var(--gris-texte); }
.presta-carte__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  text-align: center;
}
.photo-btn--photo { border-color: var(--dore-levain); }

/* la société prestataire dans la fiche RH d'Antoine */
.presta-equipe { display: flex; flex-direction: column; gap: 7px; }
.presta-salarie {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--creme-mie);
  border-radius: 9px;
  padding: 8px 12px;
}
.presta-salarie__nom { color: var(--brun-croute); }
.presta-salarie__id { font-size: 12.5px; color: var(--caramel); }
.orga__membre--presta { border-left: 3px solid var(--dore-levain); padding-left: 7px; }

/* ---------- Écran de bienvenue à la connexion ---------- */
#bienvenue {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: var(--bv-fond, var(--creme-mie));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: bv-entree 0.35s ease-out;
}
#bienvenue.bv-sortie { opacity: 0; transition: opacity 0.45s ease; }
.bv-scene { position: relative; text-align: center; padding: 30px; }
.bv-logo {
  width: 130px;
  height: 130px;
  object-fit: contain;
  animation: bv-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
}
.bv-titre {
  font-family: "Lora", Georgia, serif;
  font-size: 34px;
  color: var(--bv-encre, var(--brun-croute));
  margin-top: 18px;
  animation: bv-monte 0.6s ease-out 0.45s both;
}
.bv-fete {
  font-size: 18px;
  color: var(--bv-encre, var(--brun-croute));
  margin-top: 10px;
  animation: bv-monte 0.6s ease-out 0.75s both;
}
.bv-anniv {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--dore-levain);
  color: var(--brun-croute);
  font-size: 14.5px;
  animation: bv-monte 0.6s ease-out 1s both;
}
.bv-sous {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bv-encre, var(--caramel));
  opacity: 0.7;
  margin-top: 12px;
  animation: bv-monte 0.6s ease-out 0.95s both;
}
.bv-eclats { position: absolute; left: 50%; top: 65px; }
.bv-eclat {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  animation: bv-eclate 1.5s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.bv-eclat--emoji { font-size: 21px; line-height: 1; background: transparent; }
@keyframes bv-entree { from { opacity: 0; } }
@keyframes bv-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes bv-monte {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bv-eclate {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  12% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(260deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bv-logo, .bv-titre, .bv-fete, .bv-sous { animation: bv-entree 0.4s ease both; }
  .bv-eclat { display: none; }
}

.gar-bravo {
  background: var(--vert-pese-fond);
  border: 1px solid var(--vert-petri);
  color: var(--vert-petri);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
}

/* photo de preuve jointe au bon */
.bl__photo { margin: 10pt 0 14pt; page-break-inside: avoid; }
.bl__photo img {
  display: block;
  max-width: 220pt;
  max-height: 160pt;
  border: 1pt solid var(--caramel-clair);
  border-radius: 6pt;
  margin-top: 4pt;
}
.bl__photo-legende { font-size: 8pt; color: var(--caramel); margin-top: 3pt; }

.bl__signatures {
  display: flex;
  gap: 24pt;
  margin-bottom: 26pt;
}
.bl__signatures div {
  flex: 1;
  border: 1pt solid var(--caramel-clair);
  border-radius: 6pt;
  min-height: 70pt;
  padding: 6pt 10pt;
  font-size: 8.5pt;
  color: var(--caramel);
}

.bl__pied {
  border-top: 1pt solid var(--dore-levain);
  padding-top: 6pt;
  font-size: 7.5pt;
  color: var(--brun-croute);
  text-align: center;
}

/* ---------- Cahier de recettes ---------- */
/* Éditeur en accordéon : s'ouvre sous la recette cliquée */
.cahier-editeur-inline {
  margin: 2px 0 12px 18px;
  border-left: 4px solid var(--dore-levain);
  max-width: 620px;
}
#cahier-liste { max-width: 760px; }
.cahier-groupe { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.cahier-carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
}
.cahier-carte__nom { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-croute); }
.cahier-etat {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.cahier-etat--ok { background: var(--vert-petri); color: #fff; }
.cahier-etat--vide { background: var(--gris-carre); color: var(--gris-texte); }
.cahier-etat--exemple { background: #fff; border: 1px dashed var(--rose-sourire); color: var(--rose-sourire); }
.cahier-etat--revente { background: var(--caramel-clair); color: var(--brun-croute); }
.cahier-carte__suppr {
  border: none; background: none;
  color: var(--gris-texte);
  opacity: 0.4;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  padding: 2px 6px;
}
.cahier-carte:hover .cahier-carte__suppr { opacity: 1; }
.cahier-carte__suppr:hover { color: var(--rose-sourire); }
.cahier-carte__poids {
  margin-left: auto;
  margin-right: 10px;
  font-size: 11px;
  color: var(--caramel);
  font-variant-numeric: tabular-nums;
}
.cahier-poids {
  font-size: 13px;
  color: var(--brun-fournil);
  text-align: right;
  padding-top: 4px;
}
.cahier-revente-note {
  font-size: 12px;
  color: var(--brun-croute);
  background: var(--creme-mie);
  border-left: 3px solid var(--caramel-clair);
  border-radius: 7px;
  padding: 8px 12px;
}

.cahier-base__unite { font-size: 11px; color: var(--caramel); align-self: center; }
.cahier-ingredients { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.cahier-ing { display: flex; align-items: center; gap: 7px; }
.cahier-ing__num {
  flex: 0 0 auto;
  width: 20px;
  font-size: 11px;
  color: var(--caramel);
  text-align: right;
}
.cahier-ing__g { max-width: 86px; text-align: right; }
.cahier-ing__unite { font-size: 12px; color: var(--caramel); }

/* ---------- Administratif ---------- */
.admin-note {
  font-size: 13px;
  color: var(--brun-croute);
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-douce);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.admin-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.admin-dossier {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-carte);
  padding: 18px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.admin-dossier:hover { transform: translateY(-2px); }
.admin-dossier__ico { font-size: 26px; color: var(--caramel); }
.admin-dossier__nom { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-fournil); margin-top: 6px; }
.admin-dossier__detail { font-size: 11px; color: var(--caramel); margin-top: 2px; }
.admin-dossier--nouveau {
  border-left-color: var(--caramel-clair);
  border-style: dashed;
  border-width: 1px;
  border-color: var(--caramel-clair);
  background: var(--creme-mie);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.admin-dossier--nouveau .admin-dossier__nom { color: var(--caramel); }

.admin-chemin {
  font-size: 13px;
  color: var(--caramel);
  margin-bottom: 14px;
}
.admin-chemin__lien {
  color: var(--brun-fournil);
  cursor: pointer;
}
.admin-chemin__lien:hover { color: var(--brun-croute); text-decoration: underline; }
.admin-chemin__courant { color: var(--gris-texte); }

/* ---------- Accès (OSMO / Joy) ---------- */
.acces-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--creme-mie);
  border-radius: 8px;
  padding: 11px 14px;
  flex-wrap: wrap;
}
.acces-ligne__nom { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-croute); }
.acces-ligne__poste { font-size: 12px; color: var(--caramel); }
.acces-ligne__infos { min-width: 150px; }
.acces-modules { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.acces-module {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gris-texte);
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  margin: 0;
}
.acces-module--actif {
  background: var(--brun-fournil);
  border-color: var(--brun-fournil);
  color: var(--blanc-chignon);
}
.acces-module input { accent-color: var(--dore-levain); margin: 0; }
.acces-actions { display: flex; align-items: center; gap: 8px; }

.joy-retour { margin-bottom: 14px; }

.acces-mdp { max-width: 170px; font-size: 12px; padding: 6px 10px; }

/* ---------- Verrou d'entrée ---------- */
#verrou {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--creme-mie);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.verrou__carte {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-carte);
  padding: 34px 38px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.verrou__logo { width: 84px; height: 84px; object-fit: contain; }
.verrou__titre {
  font-family: "Lora", Georgia, serif;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--brun-fournil);
  margin-top: 8px;
}
.verrou__sous { font-size: 12px; color: var(--caramel); }
.verrou__carte label { text-align: left; }
.verrou__erreur { font-size: 12px; color: var(--rose-sourire); }
.verrou__secours {
  border: none;
  background: none;
  color: var(--caramel);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.verrou__secours:hover { color: var(--brun-fournil); text-decoration: underline; }

.verrou__deco {
  border: none;
  background: none;
  color: var(--dore-levain);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  padding: 0;
  margin-bottom: 10px;
}
.verrou__deco:hover { color: var(--blanc-chignon); }
body.mode-joy .sidebar__sous { color: var(--blanc-chignon); }

/* ---------- RH : organigramme pyramidal ---------- */
.orga { display: flex; flex-direction: column; align-items: center; }
.orga__niveau-titre {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 8px;
}
.orga__direction {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  position: relative;
  margin-bottom: 10px; /* place pour les traits sous les cartes de direction */
}
/* petit trait qui descend de chaque personne de la direction */
.orga__carte--direction { position: relative; }
.orga__carte--direction::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: var(--dore-levain);
}
/* ligne qui relie les deux personnes de la direction */
.orga__lien-fratrie {
  position: absolute;
  bottom: -10px;
  height: 2px;
  background: var(--dore-levain);
}
.orga__lien-v { width: 2px; height: 22px; background: var(--dore-levain); }
.orga__lien-h {
  width: min(86%, 900px);
  height: 2px;
  background: var(--dore-levain);
}
.orga__lien-col { width: 2px; height: 16px; background: var(--dore-levain); margin: 0 auto 6px; }

.orga__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--caramel-clair);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff, var(--ombre-douce);
}
.orga__avatar--grande { width: 62px; height: 62px; box-shadow: 0 0 0 3px var(--dore-levain), var(--ombre-carte); }
.orga__avatar i {
  font-style: normal;
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
}
.orga__avatar--grande i { font-size: 21px; }
.orga__avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.orga__avatar--vide { background: var(--gris-carre); }

/* Modules protégés (Manager, Full accès) et accord du N+1 */
.acces-module--protege { border: 1px solid var(--dore-levain); }
.acces-module--protege.acces-module--actif { background: var(--brun-fournil); color: #fff; }
#accord-n1 {
  position: fixed;
  inset: 0;
  background: rgba(95, 55, 17, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 20px;
}
#accord-n1 .verrou__carte { max-width: 380px; width: 100%; }

/* Avatar réduit pour les listes (Équipe, Accès, sidebar) */
.orga__avatar--mini { width: 28px; height: 28px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--caramel-clair); }
.orga__avatar--mini i { font-size: 10px; }
.avec-avatar { display: inline-flex; align-items: center; gap: 8px; }

/* Fiche RH : en-tête avec la photo du collaborateur */
.rh-fiche__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rh-fiche__photo-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.orga__badge-resp {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brun-croute);
  background: var(--dore-levain);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: 5px;
  display: inline-block;
}
.orga__carte--resp, .orga__carte--vacant, .orga__carte--direction { text-align: center; }
.orga__carte--vacant { opacity: 0.7; border-left-style: dashed; }
.orga__carte--cliquable { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.orga__carte--cliquable:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.orga__compteur { font-size: 11px; color: var(--caramel); margin-top: 5px; }
.orga__nom--vacant { color: var(--caramel); }
.orga__membres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 2px solid var(--caramel-clair);
  margin-left: 14px;
  padding-left: 10px;
}
.orga__membre {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--ombre-douce);
  padding: 6px 10px;
}
.orga__equipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  width: 100%;
  align-items: start;
}
.orga__colonne {
  background: var(--creme-mie);
  border-radius: var(--rayon);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orga__equipe-titre {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-fournil);
  text-align: center;
  border-bottom: 2px solid var(--dore-levain);
  padding-bottom: 6px;
}
.orga__carte {
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid var(--caramel-clair);
  box-shadow: var(--ombre-douce);
  padding: 9px 12px;
}
.orga__carte--direction { border-left-color: var(--dore-levain); min-width: 170px; padding: 14px 18px; }
.orga__carte--direction .orga__nom { margin-top: 6px; }
.orga__nom { font-size: 14px; color: var(--brun-croute); }
.orga__poste { font-size: 11px; color: var(--caramel); }
.orga__vide { text-align: center; color: var(--caramel); font-size: 13px; }

/* ---------- RH : planning des absences ---------- */
.rh-legende { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.rh-planning-defile { overflow-x: auto; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-douce); }
.rh-planning { border-collapse: collapse; width: 100%; font-size: 11px; }
.rh-planning th {
  font-weight: 400;
  color: var(--caramel);
  padding: 6px 2px;
  min-width: 20px;
  text-align: center;
  border-bottom: 1px solid var(--caramel-clair);
}
.rh-planning td { border: 1px solid var(--creme-mie); height: 26px; min-width: 20px; }
.rh-planning__nom {
  font-size: 12px;
  color: var(--brun-croute);
  padding: 0 10px;
  white-space: nowrap;
}
.abs-conges  { background: var(--dore-levain); }
.abs-maladie { background: var(--rose-sourire); }
.abs-autre   { background: var(--caramel-clair); }

/* ---------- Suivi de production ---------- */
#suivi-contenu { overflow-x: auto; }
.suivi-table { min-width: 640px; }
.suivi-table thead tr:nth-child(2) th { text-align: center; }
.suivi-table thead tr:nth-child(2) th:first-child { text-align: left; }
.suivi-qte {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--gris-texte);
}
.suivi-edit {
  width: 58px;
  padding: 4px 5px;
  font-size: 12px;
  text-align: center;
}

/* ---------- Impression du plan de fabrication ---------- */
/* ---------- Vue Hygiène ---------- */
.hyg-bandeau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hyg-bandeau__gauche { display: flex; flex-direction: column; gap: 10px; }

.hyg-jours { display: flex; gap: 5px; }
.hyg-jour {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gris-texte);
  background: var(--gris-carre);
  text-transform: uppercase;
}
.hyg-jour--partiel { background: var(--caramel-clair); color: var(--brun-croute); }
.hyg-jour--complet { background: var(--vert-petri); color: #fff; }
.hyg-jour--actif { outline: 2px solid var(--brun-fournil); outline-offset: 1px; }

.hyg-signature { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hyg-signature label { margin: 0; }
.hyg-signature .champ { width: auto; min-width: 180px; }

.hyg-section { margin-bottom: 26px; }
.hyg-section__titre {
  font-size: 18px;
  color: var(--brun-croute);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hyg-section__compte {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  background: var(--caramel);
  border-radius: 999px;
  padding: 2px 9px;
}
.hyg-section__sous {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  color: var(--caramel);
}

.hyg-liste { display: flex; flex-direction: column; gap: 8px; }
/* Même langage tactile que la pesée : gris tant que non fait, vert une fois fait */
.hyg-tache {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gris-carre);
  border-radius: 11px;
  box-shadow: var(--ombre-douce);
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
  user-select: none;
}
.hyg-tache:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte); }
.hyg-tache:active { transform: scale(0.995); }
.hyg-tache__infos { flex: 1; min-width: 0; }
.hyg-tache__nom { font-size: 15px; color: var(--brun-croute); }
.hyg-tache__methode { font-size: 11px; color: var(--gris-texte); margin-top: 1px; }
.hyg-tache__zone {
  font-size: 11px;
  color: var(--brun-fournil);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.hyg-tache__etat {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-fournil);
  white-space: nowrap;
}
.hyg-tache--faite { background: var(--vert-petri); }
.hyg-tache--faite .hyg-tache__nom,
.hyg-tache--faite .hyg-tache__methode,
.hyg-tache--faite .hyg-tache__etat { color: #fff; }
.hyg-tache--faite .hyg-tache__zone { color: var(--brun-croute); }

.hyg-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hyg-form .champ { width: auto; flex: 1; min-width: 160px; }

/* Relevés de températures */
.hyg-temp-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.hyg-temp-carte {
  background: #fff;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hyg-temp-carte--alerte { outline: 2px solid var(--rose-sourire); }
.hyg-temp-carte__tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hyg-temp-carte__nom { font-family: "Lora", Georgia, serif; font-size: 17px; color: var(--brun-croute); flex: 1; }
.hyg-temp-carte__plage { font-size: 11px; color: var(--caramel); white-space: nowrap; }
.hyg-temp-carte__releves { display: flex; gap: 10px; }
.hyg-temp-releve {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--gris-texte);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hyg-temp-releve .champ { width: 100%; font-size: 17px; font-family: "Lora", Georgia, serif; }
.hyg-temp-releve--ok .champ { border-color: var(--vert-petri); background: var(--vert-pese-fond); }
.hyg-temp-releve--alerte .champ { border-color: var(--rose-sourire); background: #FBEAEA; color: var(--rose-sourire); }
.hyg-temp-hors { color: var(--rose-sourire); }
.hyg-table-hist td { white-space: nowrap; }

/* Auto-contrôle DDPP */
.audit-score {
  font-family: "Lora", Georgia, serif;
  font-size: 22px;
  color: var(--caramel);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: var(--ombre-douce);
  white-space: nowrap;
}
.audit-score--ok { color: #fff; background: var(--vert-petri); }
.audit-score--alerte { color: var(--rose-sourire); }

.audit-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 11px;
  box-shadow: var(--ombre-douce);
  padding: 11px 16px;
}
.audit-ligne--conforme { background: var(--vert-pese-fond); }
.audit-ligne--a-corriger { outline: 1px solid var(--rose-sourire); }
.audit-ligne--non-concerne { opacity: 0.55; }
.audit-ligne__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.audit-ligne__point { font-size: 14px; color: var(--brun-croute); }
.audit-ligne__date { font-size: 11px; color: var(--vert-petri); }
.audit-note { max-width: 420px; font-size: 12px; }
.audit-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--brun-fournil);
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.audit-badge--kooklin { color: #fff; background: var(--caramel); border-color: var(--caramel); }

.audit-etat {
  border: none;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 112px;
}
.audit-etat--a-verifier { background: var(--gris-carre); color: var(--gris-texte); }
.audit-etat--conforme { background: var(--vert-petri); color: #fff; }
.audit-etat--a-corriger { background: var(--rose-sourire); color: #fff; }
.audit-etat--non-concerne { background: var(--creme-mie); color: var(--gris-texte); border: 1px solid var(--gris-carre); }
.audit-etat:hover { filter: brightness(0.96); }

/* Classeur sanitaire */
.classeur--perime { outline: 2px solid var(--rose-sourire); }
.classeur-validite {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.classeur-validite label { margin: 0; font-size: 11px; }
.classeur-validite .champ { width: auto; padding: 4px 8px; font-size: 12px; }
.classeur-echeance { font-size: 11px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.classeur-echeance--ok { color: var(--vert-petri); background: var(--vert-pese-fond); }
.classeur-echeance--bientot { color: var(--brun-croute); background: var(--dore-levain); }
.classeur-echeance--perime { color: #fff; background: var(--rose-sourire); }

/* Documents obligatoires sur le tableau de bord */
.dash-classeur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}
.dash-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--creme-mie);
  border-radius: 9px;
  padding: 10px 14px;
}
.dash-doc--manque { outline: 1px dashed var(--rose-sourire); }
.dash-doc__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.dash-doc__nom { font-size: 13px; color: var(--brun-croute); }
.dash-doc__detail {
  font-size: 11px;
  color: var(--gris-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.dash-doc__actions { display: flex; gap: 6px; flex-shrink: 0; }
.dash-classeur__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11px;
  color: var(--caramel);
}

/* Traçabilité : photos d'étiquettes */
.hyg-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.hyg-photo {
  background: #fff;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  margin: 0;
}
.hyg-photo img { width: 100%; height: 150px; object-fit: cover; display: block; }
.hyg-photo figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.hyg-photo__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--caramel);
}

@media print {
  body { background: #fff; }
  /* le bandeau de confirmation vit en position:fixed hors de .app : il
     s'imprimait par-dessus la feuille, en travers du tableau */
  /* Le registre RGPD est une pièce que la CNIL peut réclamer : il sortait
     avec ses boutons d'interface (« Imprimer le registre », « Envoyer la
     note géoloc »). Aucun bouton ne s'imprime. */
  .sidebar, .prod-toolbar, .nav, .cat-onglets, .hyg-signature, .hyg-jours,
  .dialogue-bandeau, .veille-voile, .verrou-voile,
  .photo-btn, button.btn, .btn-retour { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  .prod-table { box-shadow: none; }
  .prod-chiffre { box-shadow: none; border: 1px solid var(--caramel-clair); }
  .hyg-tache { box-shadow: none; border: 1px solid var(--caramel-clair); background: #fff; break-inside: avoid; }
  .audit-ligne { box-shadow: none; border: 1px solid var(--caramel-clair); break-inside: avoid; }
  .hyg-form, .audit-note:placeholder-shown { display: none !important; }
  .hyg-tache--faite { background: var(--vert-pese-fond); }
  .hyg-tache--faite .hyg-tache__nom,
  .hyg-tache--faite .hyg-tache__methode,
  .hyg-tache--faite .hyg-tache__etat { color: var(--brun-croute); }
}

/* =========================================================================
   Espace client B2B (mode-client) : navigation dédiée, cadencier, badges
   ========================================================================= */
.nav__item--client { display: none; }
body.mode-client .nav__item--client { display: flex; }
body.mode-client .nav__item:not(.nav__item--client) { display: none !important; }
body.mode-client .nav__groupe { display: none !important; }
body.mode-client .sidebar__sous { color: var(--blanc-chignon); }
body.mode-client .sidebar__nom--app { font-size: 17px; letter-spacing: 1.5px; }

.ec-jours {
  font-size: 12px;
  color: var(--caramel);
  margin: -6px 0 12px;
}

/* Badge "commande en ligne / cadencier" dans le registre des commandes */
.cmd-badge-enligne {
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--blanc-chignon);
  background: var(--caramel);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Cadencier : tableau produits × jours de semaine */
/* Quand le fournil refuse un cadencier, le client doit le lire — pas croire
   que c'est enregistré parce que rien ne s'est affiché */
.ec-cad-alerte {
  background: var(--rose-fond, #FBE9E7);
  border: 1px solid var(--rose-sourire, #C97B6B);
  color: var(--rose-sourire, #C97B6B);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
/* Un jour où le client n'est pas livré reste VISIBLE dans son cadencier —
   effacer en douce une quantité déjà posée serait pire que la montrer. Elle
   s'affiche en retrait, ne peut plus grossir, et une phrase sous le tableau
   nomme les jours concernés. */
.cad-col--hors { opacity: 0.45; }
.cad-qte--hors { border-style: dashed; }
.ec-cad-hors {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rose-sourire);
}
.cad-defile { overflow-x: auto; }
.cad-table__prix { font-size: 11px; color: var(--caramel); }
.cad-table__total { text-align: center; font-size: 13px; color: var(--brun-croute); white-space: nowrap; }
.cad-table {
  width: 100%;
  border-collapse: collapse;
}
.cad-table th {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caramel);
  text-align: left;
  padding: 8px 6px;
  border-bottom: 2px solid var(--gris-carre);
}
.cad-table td {
  padding: 6px;
  border-bottom: 1px solid var(--gris-carre);
}
.cad-table__produit {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-croute);
  white-space: nowrap;
}
.cad-qte { width: 58px; padding: 6px 6px; text-align: center; }
.cad-ajout {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
.cad-ajout .champ { max-width: 280px; }

/* Fiche client : zone archiver / supprimer */
.cli-actions-danger {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-carre);
}
.cli-statut--archivé { background: var(--gris-carre); color: var(--gris-texte); }

/* =========================================================================
   Administratif : Finances (règlements, trésorerie, chiffres réels)
   ========================================================================= */
.fin-table { min-width: 640px; }
.fin-table .champ { min-width: 90px; }
.fin-montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-ligne--retard td { background: var(--rose-pale, #F7E4E1); }
.fin-comptes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.fin-compte {
  border: 1px solid var(--gris-carre);
  border-radius: 10px;
  padding: 12px 14px;
}
.fin-compte--total { background: var(--creme-mie); border-color: var(--caramel-clair); }
.fin-compte__nom {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 8px;
}
.fin-total { font-size: 22px; color: var(--brun-croute); }
.fin-sous-titre {
  font-size: 13px;
  letter-spacing: 0.6px;
  color: var(--caramel);
  margin: 18px 0 8px;
  font-weight: normal;
}
.fin-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}
.fin-ebe {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--creme-mie);
  color: var(--brun-croute);
}
.fin-ebe--negatif { background: var(--rose-pale, #F7E4E1); color: var(--rose-sourire); }
.fin-ca { width: 92px; padding: 5px 8px; font-size: 12px; }
.fin-confirme { margin-left: 10px; color: var(--vert-petri); font-size: 13px; }

/* Administratif : documents enrichis (échéances, aperçu) */
.admin-echeance {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--caramel);
}
.admin-echeance .champ { width: auto; padding: 4px 7px; font-size: 12px; }
.doc-ligne--echeance { border-color: var(--rose-sourire); }
.admin-echeance--depassee .dash-cmd__detail { color: var(--rose-sourire); }
.doc-tiime { flex-shrink: 0; }

/* Bilan mensuel détaillé */
.bilan-colonnes {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) { .bilan-colonnes { grid-template-columns: 1fr; } }
.bilan-table { width: 100%; }
.bilan-table td:last-child { text-align: right; width: 150px; }
.bilan-groupe td {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--caramel);
  padding-top: 14px;
  border-bottom: 1px solid var(--caramel-clair);
}
.bilan-total td { border-top: 2px solid var(--caramel-clair); color: var(--brun-croute); }
.bilan-total--negatif td { color: var(--rose-sourire); }
.bilan-montant { width: 130px; padding: 5px 8px; font-size: 12px; text-align: right; }
.bilan-piece { margin: 0; }
.bilan-piece--ok { color: var(--vert-petri); }
.doc-apercu {
  width: 100%;
  height: 480px;
  border: 1px solid var(--caramel-clair);
  border-radius: 10px;
  margin: 4px 0 10px;
  background: #fff;
}

/* =========================================================================
   RH : contrats et préparation de paie
   ========================================================================= */
.paie-toolbar { align-items: end; }
.paie-table { min-width: 720px; }
.paie-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.paie-detail { font-size: 11px; color: var(--caramel); margin-top: 2px; }
.paie-detail--alerte { color: var(--rose-sourire); }
.paie-cellule-var { min-width: 200px; }
.paie-var { width: 100%; padding: 5px 8px; font-size: 12px; }
.paie-actions-doc { white-space: nowrap; }
.paie-entete-print { display: none; }

@media print {
  .cat-onglets, .paie-toolbar, .paie-actions-doc, .admin-echeance { display: none !important; }
  .paie-entete-print {
    display: block;
    font-size: 14pt;
    color: #000;
    margin-bottom: 10pt;
  }
  .paie-zone { box-shadow: none; border: none; padding: 0; }
  /* export comptable : jamais d'auto-entrepreneur ni de prestataire */
  .paie-presta { display: none !important; }
  .paie-var { border: none; background: transparent; padding: 0; }
  .paie-table { min-width: 0; }
}


/* =========================================================================
   Module Vente — Ventes marchés, Devis & tarifs, Suivi commercial
   ========================================================================= */

/* ---------- Ventes marchés (B2C) ---------- */
.vm-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.vm-carte {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--caramel-clair);
  box-shadow: var(--ombre-douce);
  padding: 14px 16px;
}
.vm-carte--saisie { border-left-color: var(--dore-levain); }
.vm-carte__nom { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-fournil); }
.vm-carte__adresse { font-size: 11px; color: var(--caramel); margin-top: 1px; }
.vm-carte__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 10px; }
.vm-carte__champs label { font-size: 11px; color: var(--caramel); display: block; margin-bottom: 2px; }
.vm-carte__pleine { grid-column: 1 / -1; }
.vm-ca { font-variant-numeric: tabular-nums; }
.vm-histo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vm-histo-table th {
  text-align: left;
  color: var(--caramel);
  font-weight: 400;
  font-size: 11px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--caramel-clair);
}
.vm-histo-table td { padding: 6px 8px; border-bottom: 1px solid #f3ead6; }
.vm-histo-table td:last-child, .vm-histo-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Suivi commercial ---------- */
.stats-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .stats-colonnes { grid-template-columns: 1fr; } }
.stats-barre {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}
.stats-barre__nom { color: var(--brun-croute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-barre__piste { background: var(--creme-mie); border-radius: 999px; height: 14px; overflow: hidden; }
.stats-barre__rempli { background: var(--dore-levain); height: 100%; border-radius: 999px; min-width: 2px; }
.stats-barre__rempli--brun { background: var(--caramel); }
.stats-barre__val { font-size: 12px; color: var(--gris-texte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-note { font-size: 12px; color: var(--caramel); margin-top: 4px; line-height: 1.5; }

/* ---------- Devis et tarifs clients ---------- */
.devis-statut {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--caramel-clair);
  background: var(--creme-mie);
  color: var(--brun-croute);
  white-space: nowrap;
}
.devis-statut--envoye { background: var(--dore-levain); border-color: var(--dore-levain); }
.devis-statut--accepte { background: #6FA33F; border-color: #6FA33F; color: #fff; }
.devis-statut--refuse { background: var(--rose-sourire); border-color: var(--rose-sourire); color: #fff; }
.devis-statut--expire { opacity: 0.6; }
.devis-lignes { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.devis-ligne { display: grid; grid-template-columns: 1fr 64px 92px auto auto; gap: 8px; align-items: center; }
.devis-ligne .champ { padding: 6px 8px; }
.tarif-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.tarif-table th {
  text-align: left;
  color: var(--caramel);
  font-weight: 400;
  font-size: 11px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--caramel-clair);
}
.tarif-table td { padding: 5px 8px; border-bottom: 1px solid #f3ead6; }
.tarif-table .champ { padding: 5px 8px; width: 110px; }

/* ---------- Impression d'un devis ---------- */
.devis-print { display: none; }
@media print {
  body.print-devis .app, body.print-devis #verrou, body.print-devis #bl-zone { display: none !important; }
  body.print-devis .devis-print { display: block; }
}
.devis-print { color: var(--gris-texte); font-size: 13px; padding: 10px; }
.devis-print__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 2px solid var(--dore-levain);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.devis-print__logo { width: 84px; }
.devis-print h1 { font-size: 24px; }
.devis-print__societe { font-size: 11px; text-align: right; line-height: 1.55; }
.devis-print__blocs { margin-bottom: 14px; line-height: 1.5; }
.devis-print table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.devis-print th {
  text-align: left;
  font-weight: 400;
  color: var(--caramel);
  font-size: 11px;
  border-bottom: 1px solid var(--caramel-clair);
  padding: 6px 8px;
}
.devis-print td { padding: 6px 8px; border-bottom: 1px solid #eee; }
.devis-print th.nombre, .devis-print td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.devis-print__total { font-family: "Lora", Georgia, serif; font-size: 17px; color: var(--brun-fournil); text-align: right; margin-top: 8px; }
.devis-print__mentions { font-size: 10px; color: var(--gris-texte); margin-top: 22px; line-height: 1.5; }
.devis-print__signature {
  margin-top: 28px;
  border: 1px solid var(--caramel-clair);
  border-radius: 6px;
  padding: 12px;
  width: 46%;
  min-height: 90px;
  font-size: 11px;
  color: var(--caramel);
}

/* Tarifs clients : saisie en € ou en % */
.tarif-saisie { display: flex; gap: 6px; align-items: center; }
.tarif-saisie input.champ { width: 96px; }
.tarif-saisie .tarif-unite { width: 58px; padding: 6px 4px; }


/* ---------- Catalogue : suppression de produits ---------- */
.fiche__actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.cat-restaurer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--caramel);
  background: #fffdf6;
  border: 1px dashed var(--caramel-clair);
  border-radius: var(--rayon);
  padding: 10px 14px;
}


/* ---------- RH Équipe : accordéon, ajout, suppression ---------- */
.rh-carte__droite { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }


/* ---------- Bandeaux confirm/alert (les fenêtres natives sont bloquées dans l'artifact) ---------- */
.dialogue-bandeau {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: min(560px, calc(100vw - 40px));
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-carte);
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris-texte);
}
.dialogue-bandeau--confirm { border-left-color: var(--rose-sourire); }
.dialogue-bandeau[hidden] { display: none; }


/* ---------- Catalogue : ajout de produits (bouton vert) ---------- */
.btn-vert {
  background: var(--vert-petri);
  color: #ffffff;
}
.btn-vert:hover { background: #66804A; }
.cat-ajout-form {
  grid-column: 1 / -1;
  border-left: 4px solid var(--vert-petri);
}
.np-allergenes { display: flex; gap: 6px 14px; flex-wrap: wrap; }


/* ---------- Espace client : vitrine moderne (cartes produits, photos) ---------- */
.ec-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ec-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ec-carte {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ec-carte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(95, 55, 17, 0.16); }
.ec-carte__photo {
  position: relative;   /* le cœur et l'œil se posent dessus */
  height: 128px;
  background: var(--creme-mie);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ec-carte__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-carte__photo span { font-size: 44px; opacity: 0.85; }
.ec-carte__corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ec-carte__nom { font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--brun-fournil); }
.ec-carte__desc { font-size: 11px; color: var(--gris-texte); line-height: 1.4; flex: 1; }
.ec-carte__bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.ec-carte__prix { font-family: "Lora", Georgia, serif; font-size: 16px; color: var(--brun-fournil); line-height: 1.1; }
.ec-carte__prix span { display: block; font-family: "Open Sans", Arial, sans-serif; font-size: 10px; color: var(--caramel); }
.ec-ajout {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: var(--dore-levain);
  color: var(--brun-croute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombre-douce);
  flex-shrink: 0;
}
.ec-ajout:hover { background: #e7ad33; }
.ec-qte-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--creme-mie);
  border-radius: 999px;
  padding: 3px 6px;
  flex-shrink: 0;
}
.ec-qte-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: var(--dore-levain);
  color: var(--brun-croute);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ec-qte-btn:hover { background: #e7ad33; }
/* « = 2 cadres » à côté d'une quantité qui se compte en boules */
.ec-qte-rappel, .produit__rappel { font-size: 11px; color: var(--gris-texte); white-space: nowrap; }
.ec-qte-nb { min-width: 16px; text-align: center; font-size: 14px; color: var(--brun-croute); font-variant-numeric: tabular-nums; }
.ec-switch { margin: 0 18px 10px; width: calc(100% - 36px); font-size: 12px; }
body.mode-joy #nav-espace-client { display: none; }


/* ---------- Espace client : panier vers cadencier hebdomadaire ---------- */
.ec-cad-panneau {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--dore-levain);
  border-radius: 10px;
  background: var(--creme-mie);
}
.ec-cad-panneau__titre {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-fournil);
  margin-bottom: 8px;
}
.ec-cad-jours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ec-jour-chip {
  border: 1px solid var(--dore-levain);
  background: var(--blanc-chignon);
  color: var(--brun-fournil);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.ec-jour-chip--actif {
  background: var(--dore-levain);
  color: var(--brun-fournil);
}
.ec-cad-panneau__note {
  font-size: 12px;
  color: var(--caramel);
  line-height: 1.45;
  margin-bottom: 10px;
}
#ec-cadencer { margin-top: 8px; }


/* =========================================================================
   Adaptation téléphone / tablette / ordinateur
   Ordinateur : rien ne change. Tablette : colonne latérale un peu plus
   étroite. Petit écran : menu en tiroir (bouton rond en haut à gauche),
   colonnes empilées, tableaux défilants, champs confortables au doigt.
   ========================================================================= */

.menu-burger, .menu-voile { display: none; }

@media (max-width: 1200px) {
  :root { --sidebar-largeur: 200px; }
}

@media (max-width: 900px) {
  .app { display: block; }

  /* --- barre latérale en tiroir --- */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 84vw);
    height: 100dvh;
    transform: translateX(-103%);
    transition: transform 0.22s ease;
    z-index: 60;
  }
  body.menu-ouvert .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 34px rgba(60, 35, 12, 0.45);
  }
  body.menu-ouvert { overflow: hidden; }

  .menu-voile {
    position: fixed;
    inset: 0;
    background: rgba(60, 35, 12, 0.42);
    z-index: 55;
  }
  body.menu-ouvert .menu-voile { display: block; }

  .menu-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--dore-levain);
    background: var(--brun-fournil);
    color: var(--blanc-chignon);
    font-size: 19px;
    cursor: pointer;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(60, 35, 12, 0.25);
  }
  .menu-burger::before { content: "☰"; }
  body.menu-ouvert .menu-burger::before { content: "✕"; }
  /* la bannière des jours, collée en haut, laisse la place au bouton du menu */
  .qte-barre { padding-left: 62px; }

  /* --- zone principale --- */
  .main { padding: 64px 14px 40px; }
  .topbar { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .titre-page { font-size: 24px; }

  /* les grands tableaux défilent dans leur cartouche au lieu de déborder */
  .cartouche { overflow-x: auto; }

  /* colonnes empilées sur les formulaires à deux champs */
  .cli-form__deux, .vm-carte__champs { grid-template-columns: 1fr; }

  /* confort tactile : pas de zoom automatique iOS (16 px mini) */
  input.champ, select.champ, textarea.champ, .champ--recherche { font-size: 16px; }
  .nav__item { padding: 12px; }

  /* les rangées d'onglets et de puces passent à la ligne au lieu de déborder */
  .cat-onglets { flex-wrap: wrap; }
  .champ--recherche { max-width: none; width: 100%; }

  /* boutons au doigt : steppers, ajout produit, retraits de ligne */
  .ec-qte-btn { width: 38px; height: 38px; font-size: 18px; }
  .ec-ajout { width: 42px; height: 42px; }
  .pligne__x { padding: 8px 10px; }
  .btn { min-height: 42px; }
}

@media print {
  .menu-burger, .menu-voile { display: none !important; }
}


/* ---------- Espace client : barre panier flottante (petit écran) ---------- */
.ec-panier-barre { display: none; }

@media (max-width: 1100px) {
  .ec-panier-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    width: min(calc(100% - 24px), 480px);
    padding: 14px 18px;
    border: 1px solid var(--dore-levain);
    border-radius: 12px;
    background: var(--brun-fournil);
    color: var(--blanc-chignon);
    font-size: 15px;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 6px 22px rgba(60, 35, 12, 0.35);
  }
  .ec-panier-barre[hidden] { display: none; }
  .ec-panier-barre span:last-child { color: var(--dore-levain); }

  /* de la place sous la liste pour que la barre ne masque rien */
  body.mode-client section[data-vue-panneau="ec-commander"] { padding-bottom: 80px; }
}


/* ---------- Camions : photos mensuelles du tour du véhicule ---------- */
.cam-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.cam-photo { position: relative; }
.cam-photo img {
  width: 100%;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--gris-carre);
}
.cam-photo .pligne__x {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--blanc-chignon);
  border-radius: 6px;
}


/* Camions : petites dates des relevés (kilométrage, inventaire, photos) */
.cam-date {
  font-size: 11px;
  color: var(--caramel);
  margin-top: 3px;
}


/* ---------- Menu : groupes repliables ---------- */
.nav__groupe {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 8px;
}
.nav__groupe:hover { color: var(--blanc-chignon); background: var(--brun-croute); }
.nav__groupe-fleche {
  font-size: 9px;
  transition: transform 0.18s ease;
}
.nav__groupe--ouvert .nav__groupe-fleche { transform: rotate(90deg); }
.nav__item--plie { display: none !important; }


/* ---------- Tableau de bord : À surveiller, La journée, Top du mois ---------- */
.dash-alerte {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 6px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.dash-alerte:hover { background: var(--creme-mie); }
.dash-alerte--rose { border-left-color: var(--rose-sourire); color: var(--rose-sourire); }
.dash-alerte--dore { border-left-color: var(--dore-levain); color: var(--brun-croute); }
.dash-alerte--vert { border-left-color: var(--vert-petri); color: var(--vert-petri); cursor: default; }

.dash-top {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.dash-top__barre {
  display: block;
  height: 10px;
  background: var(--gris-carre);
  border-radius: 5px;
  overflow: hidden;
}
.dash-top__barre span {
  display: block;
  height: 100%;
  background: var(--dore-levain);
  border-radius: 5px;
}
.dash-top__val { color: var(--caramel); white-space: nowrap; }

.dash-objectif-barre {
  height: 8px;
  background: var(--gris-carre);
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 4px;
}
.dash-objectif-barre span {
  display: block;
  height: 100%;
  background: var(--vert-petri);
  border-radius: 4px;
}
.dash-objectif-lien {
  border: none;
  background: none;
  color: var(--caramel);
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
.dash-objectif-form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.dash-objectif-form[hidden] { display: none; }
.dash-objectif-form .champ { max-width: 140px; }


/* ---------- Pétrissage : pétrins mères ---------- */
.petri-carre--mere { border-left: 3px solid var(--dore-levain); }
.petri-carre__pains {
  font-size: 11px;
  color: var(--caramel);
  margin-top: 4px;
  line-height: 1.4;
}
.petri-mere__sous { font-size: 12px; color: var(--caramel); margin-top: 2px; }

.petri-section { margin-top: 18px; }
.petri-section__titre {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-fournil);
  margin-bottom: 8px;
}
.petri-qtes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.petri-qte-ligne label {
  display: block;
  font-size: 12px;
  color: var(--caramel);
  margin-bottom: 3px;
}
.petri-ing__sous {
  display: block;
  font-size: 11px;
  color: var(--caramel);
  line-height: 1.4;
  margin-top: 2px;
}
.petri-prelev { align-items: flex-start; }

.petri-detail--mere .petri-ing--pese .petri-ing__poids::after { content: " ✓"; }


/* Pétrissage : récapitulatif des pétrins suivants */
.petri-recap {
  border: 1px dashed var(--dore-levain);
  border-radius: 10px;
  background: var(--creme-mie);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.petri-recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--brun-fournil);
  line-height: 1.8;
}
.petri-recap__val { color: var(--brun-croute); white-space: nowrap; }
.petri-ing__calcul {
  display: block;
  font-size: 12px;
  color: var(--brun-croute);
  line-height: 1.5;
  margin-top: 3px;
}


/* ---------- Cadencier bio ---------- */
.cadbio-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.cadbio-toolbar label {
  display: block;
  font-size: 11px;
  color: var(--caramel);
  margin-bottom: 2px;
}
.cadbio-totaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.cadbio-total {
  border: 1px solid var(--gris-carre);
  border-left: 3px solid var(--dore-levain);
  border-radius: 8px;
  padding: 8px 10px;
}
.cadbio-total__nom { display: block; font-size: 12px; color: var(--caramel); }
.cadbio-total__val {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 19px;
  color: var(--brun-fournil);
  margin-top: 2px;
}

/* Le nombre de bacs se lit à distance, c'est ce qu'on prépare au sol */
.petri-ing__bacs {
  display: block;
  margin-top: 6px;
  color: var(--vert-petri);
}
.petri-ing__bacs strong {
  font-size: 20px;
  font-weight: 600;
}
.petri-ing__regle {
  font-size: 11px;
  color: var(--gris-texte);
  margin-left: 6px;
}

.petri-bacs-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.petri-bacs-total__nb {
  font-size: 24px;
  color: var(--vert-petri);
}
.petri-bacs-total__regle {
  font-size: 12px;
  color: var(--gris-texte);
}

/* ---------- Levains ---------- */
.petri-carre--levain { border-style: dashed; }

.lev-besoin {
  background: var(--creme);
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.lev-besoin__titre { font-weight: 600; margin-bottom: 8px; }
.lev-besoin__ligne {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.lev-besoin__val { font-variant-numeric: tabular-nums; }
.lev-besoin__note {
  font-size: 12px;
  color: var(--gris-texte);
  margin-top: 8px;
  line-height: 1.5;
}

.lev-bloc { border-top: 1px solid var(--beige-fonce); padding-top: 16px; }
.lev-bloc--fait { opacity: 0.75; }

.lev-saisie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.lev-saisie label { font-size: 13px; color: var(--gris-texte); }
.lev-saisie .champ { width: auto; min-width: 150px; }
.lev-saisie input.champ { max-width: 130px; text-align: right; }
.lev-saisie__unite { color: var(--gris-texte); }

.lev-ing { cursor: default; }
.lev-farine {
  font-size: 12px;
  padding: 2px 6px;
  margin-top: 3px;
  height: auto;
}

/* ---------- Division en cuves ---------- */
.petri-division {
  background: var(--creme);
  border-left: 3px solid var(--vert-petri);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 14px;
}
.petri-division span {
  display: block;
  font-size: 12px;
  color: var(--gris-texte);
  margin-top: 4px;
}

.petri-cuve + .petri-cuve {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--beige-fonce);
}
.petri-cuve__tete {
  background: var(--vert-petri);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.petri-cuve__nom { font-size: 17px; font-weight: 600; display: block; }
.petri-cuve__sous { font-size: 13px; opacity: 0.9; }

/* le rappel des prélèvements se lit à distance, au-dessus du pétrin */
.petri-recap--grand .petri-recap__ligne {
  font-size: 16px;
  padding: 10px 0;
}
.petri-recap--grand .petri-recap__val {
  font-size: 21px;
  font-weight: 600;
}

/* ---------- Ordre de réalisation ---------- */
.petri-carre { position: relative; }
.petri-carre__ordre {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}
.petri-fleche {
  width: 30px;
  height: 30px;
  border: 1px solid var(--beige-fonce);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--noir);
  padding: 0;
}
.petri-fleche:disabled { opacity: 0.25; cursor: default; }
.petri-fleche:not(:disabled):hover { background: #fff; border-color: var(--vert-petri); }

.petri-carre--ingredients { border-style: dashed; }

/* ---------- Récapitulatif de la journée ---------- */
.petri-journee {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 2px solid var(--beige-fonce);
}
.petri-journee__titre { font-size: 18px; margin-bottom: 14px; }
.petri-journee__chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.petri-journee__bloc {
  background: var(--creme);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--gris-texte);
}
.petri-journee__bloc span {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--noir);
  margin-bottom: 2px;
}
.petri-journee__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.petri-journee__sous { font-size: 14px; margin-bottom: 8px; }
.petri-journee__note {
  font-size: 12px;
  color: var(--gris-texte);
  margin-top: 8px;
  line-height: 1.5;
}

/* ---------- Préparations du jour ---------- */
.petri-prep-bloc { margin-bottom: 20px; }
.petri-prep-bloc__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--beige-fonce);
  margin-bottom: 8px;
}

/* ---------- Délais de commande, côté client ---------- */
.ec-carte__delai {
  font-size: 11px;
  color: var(--gris-texte);
  margin-top: 4px;
  line-height: 1.4;
}
.ec-carte__delai--ferme { color: var(--rouge, #b04e72); }
.ec-carte--ferme { opacity: 0.55; }

.ec-alerte-delai {
  background: var(--creme);
  border-left: 3px solid var(--rouge, #b04e72);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.ec-alerte-delai .photo-btn { margin-top: 6px; }

/* ---------- Cycles ---------- */
.cyc-table-hote { overflow-x: auto; }
.cyc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cyc-table th, .cyc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--beige-fonce);
  text-align: left;
  white-space: nowrap;
}
.cyc-table th { font-weight: 600; }
.cyc-table__jour { text-transform: capitalize; }
.cyc-table td span { display: block; font-size: 11px; }
.cyc-ouvert span { color: var(--vert-petri); }
.cyc-ferme { color: var(--gris-texte); }

.cyc-bloc { border-top: 1px solid var(--beige-fonce); padding-top: 16px; }
.cyc-note { font-size: 13px; color: var(--gris-texte); margin: 6px 0 12px; line-height: 1.5; }
.cyc-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.cyc-champs label { font-size: 12px; color: var(--gris-texte); display: block; }
.cyc-champs .champ { margin-top: 4px; width: 100%; }
.cyc-produits { font-size: 12px; color: var(--gris-texte); line-height: 1.6; }

/* ---------- Congélateur ---------- */
.congel-barre { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.congel-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.congel-carte {
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}
.congel-carte__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--beige-fonce);
  margin-bottom: 10px;
}
.congel-carte__nom { font-size: 16px; }
.congel-carte__stock { font-size: 12px; color: var(--gris-texte); }

.congel-calcul { font-size: 13px; margin-bottom: 12px; }
.congel-calcul__ligne {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.congel-calcul__ligne--fort {
  font-size: 16px;
  border-top: 1px solid var(--beige-fonce);
  margin-top: 4px;
  padding-top: 8px;
}

.congel-lots__titre { font-size: 11px; color: var(--gris-texte); margin-bottom: 4px; }
.congel-lots__vide { font-size: 12px; color: var(--gris-texte); margin-bottom: 12px; }
.congel-lot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--creme);
}
.congel-lot--premier { color: var(--vert-petri); }
.congel-lot__qte { font-variant-numeric: tabular-nums; }
.congel-lot__init { color: var(--gris-texte); font-size: 11px; }

.congel-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.congel-actions label { font-size: 12px; color: var(--gris-texte); }
.congel-actions .champ { width: 90px; margin-top: 3px; }

/* ---------- Calendrier du fournil ---------- */
.petri-calendrier {
  background: var(--creme);
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.petri-calendrier__ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}
.petri-calendrier__ligne span { color: var(--gris-texte); }
.petri-calendrier__ligne strong { font-weight: 400; text-transform: capitalize; }
/* Les autres journées de vente portées par le même pétrin : le vendredi
   pétrit le dimanche ET le lundi, le boulanger doit les voir toutes deux */
.petri-calendrier__autres {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--beige-fonce);
  font-size: 12px;
  color: var(--brun-croute);
}
.petri-calendrier__autres span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gris-texte);
}
.petri-calendrier__auj {
  margin-top: 8px;
  font-size: 12px;
  color: var(--vert-petri);
}
.petri-calendrier .photo-btn { margin-top: 8px; }

/* ---------- Verrou des commandes ---------- */
.cmd-verrou {
  font-size: 11px;
  color: var(--vert-petri);
  margin-top: 4px;
}
.cmd-verrou--figee { color: var(--gris-texte); }

/* ---------- Compte à rebours de commande ---------- */
.ec-rebours { font-size: 11px; margin-top: 2px; display: block; }
.ec-rebours[data-urgence="large"] { color: var(--gris-texte); }
.ec-rebours[data-urgence="proche"] { color: var(--vert-petri); }
.ec-rebours[data-urgence="urgent"] { color: #b04e72; }
.ec-rebours[data-urgence="fermee"] { color: var(--gris-texte); }

.ec-rebours-panier {
  background: var(--creme);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.ec-rebours-panier .ec-rebours {
  display: inline;
  font-size: 16px;
}
.ec-rebours-panier span span,
.ec-rebours-panier > span:last-child {
  display: block;
  font-size: 11px;
  color: var(--gris-texte);
  margin-top: 3px;
}
.ec-rebours-panier[data-urgence="urgent"] { border-left: 3px solid #b04e72; }

/* ---------- Revue des circuits produit par produit ---------- */
.rev-progres {
  height: 6px;
  background: var(--beige-fonce);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}
.rev-progres__barre {
  height: 100%;
  background: var(--vert-petri);
  transition: width 0.3s;
}

.rev-liste { display: grid; gap: 14px; }
.rev-produit {
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.rev-produit--ok {
  border-color: var(--vert-petri);
  background: color-mix(in srgb, var(--vert-petri) 4%, #fff);
}
.rev-produit__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rev-produit__nom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
}
.rev-produit__nom input { width: 18px; height: 18px; }
.rev-produit__etat { font-size: 11px; color: var(--gris-texte); }
.rev-produit--ok .rev-produit__etat { color: var(--vert-petri); }

.rev-produit__phrase {
  font-size: 12px;
  color: var(--gris-texte);
  margin: 6px 0 10px;
  line-height: 1.6;
}
.rev-produit__champs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.rev-produit__champs label { font-size: 11px; color: var(--gris-texte); }
.rev-produit__champs .champ { width: 100px; margin-top: 3px; }
.rev-produit__note { width: 100%; margin-top: 10px; font-size: 12px; }

/* ---------- Choix du jour de livraison, côté client ---------- */
.ec-quand {
  background: var(--creme);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.ec-quand__titre { font-size: 16px; margin-bottom: 12px; }

/* Les deux semaines l'une SOUS l'autre, et chaque semaine d'un seul tenant
   du lundi au dimanche : depuis qu'elles font sept jours, les mettre côte à
   côte coupait chaque semaine en morceaux (lun-mar-mer d'un côté, jeu-ven-sam
   de l'autre). Le ruban glisse horizontalement quand l'écran est étroit. */
.ec-jours-choix {
  display: block;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.ec-jours-choix .ec-jour {
  flex: 0 0 auto;
  width: 78px;
  border: 1px solid var(--beige-fonce);
  background: #fff;
  border-radius: 10px;
  padding: 10px 4px 8px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--noir);
  line-height: 1.2;
}
.ec-jour__sem { display: block; font-size: 11px; color: var(--gris-texte); text-transform: capitalize; }
.ec-jour__num { display: block; font-size: 24px; margin: 2px 0; }
.ec-jour__mois { display: block; font-size: 11px; color: var(--gris-texte); }
.ec-jour__etat { display: block; font-size: 10px; margin-top: 5px; color: var(--vert-petri); }
.ec-jours-choix .ec-jour--choisi {
  border-color: var(--vert-petri);
  border-width: 2px;
  background: color-mix(in srgb, var(--vert-petri) 8%, #fff);
}
.ec-jours-choix .ec-jour--ferme { opacity: 0.4; cursor: not-allowed; }
.ec-jour--ferme .ec-jour__etat { color: var(--gris-texte); }

.ec-plus-loin { margin-top: 10px; }
.ec-plus-loin summary {
  font-size: 12px;
  color: var(--gris-texte);
  cursor: pointer;
}
.ec-plus-loin .champ { margin-top: 6px; }

.ec-recap-delai {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}
.ec-recap-delai:empty { display: none; }
.ec-recap-delai__bloc { display: flex; flex-direction: column; }
.ec-recap-delai__label { font-size: 11px; color: var(--gris-texte); }
/* capitalize mettait une majuscule à CHAQUE mot : « Mercredi 2 Septembre
   À 12 H 00 ». En français, seul le premier mot la prend — d'où la première
   lettre seule, via ::first-letter. */
.ec-recap-delai__val { font-size: 15px; }
.ec-recap-delai__val::first-letter { text-transform: uppercase; }
.ec-recap-delai__fleche { color: var(--gris-texte); font-size: 18px; }
.ec-recap-delai .ec-rebours { margin-top: 2px; font-size: 12px; }

/* ---------- Bons de livraison côté client ---------- */
.ec-bl-intro {
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.6;
  margin-bottom: 14px;
}
.ec-bl-detail {
  border-top: 1px solid var(--beige-fonce);
  margin-top: 10px;
  padding-top: 12px;
}
.ec-bl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}
.ec-bl-table th, .ec-bl-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--creme);
}
.ec-bl-table th { font-weight: 600; color: var(--gris-texte); font-size: 11px; }
.ec-bl-note {
  font-size: 12px;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

/* ---------- Le compte à rebours, en tête de l'écran Commander ---------- */
.ec-rebours-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--beige-fonce);
  border-left: 4px solid var(--vert-petri);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ec-rebours-tete__ico { font-size: 24px; line-height: 1; }
.ec-rebours-tete__corps { display: flex; flex-direction: column; }
.ec-rebours-tete .ec-rebours-tete__temps {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}
/* le décompte ouvre la phrase : il lui faut sa majuscule */
.ec-rebours-tete__temps::first-letter { text-transform: uppercase; }
.ec-rebours-tete__quoi {
  font-size: 13px;
  color: var(--gris-texte);
  margin-top: 2px;
}
.ec-rebours-tete[data-urgence="urgent"] { border-left-color: #b04e72; }
.ec-rebours-tete[data-urgence="large"] { border-left-color: var(--beige-fonce); }

@media (max-width: 520px) {
  .ec-rebours-tete .ec-rebours-tete__temps { font-size: 21px; }
}

/* ---------- Calendrier hebdomadaire d'un produit ---------- */
.rev-semaine {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 10px 0 8px;
}
.rev-jour {
  text-align: center;
  padding: 6px 2px;
  border-radius: 6px;
  background: var(--creme);
  font-size: 11px;
}
.rev-jour__nom { display: block; color: var(--gris-texte); text-transform: capitalize; }
.rev-jour__val { display: block; font-size: 13px; margin-top: 2px; }
.rev-jour--sans { opacity: 0.4; }
.rev-jour--sans .rev-jour__val { color: var(--gris-texte); }

.ec-jours-choix .ec-jour--sans { opacity: 0.28; }

/* =========================================================================
   Marchés du jour — espace vendeur (mobile d'abord)
   ========================================================================= */
.mm-entete__marche {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  color: var(--brun-croute);
}
.mm-entete__sous { font-size: 12px; color: var(--caramel); margin-top: 2px; }

.mm-remplacement { margin-top: 12px; max-width: 340px; }

.mm-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gris-carre); }
.mm-section__titre {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--brun-croute);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mm-section__aide { font-size: 11px; color: var(--caramel); }
.mm-soussection {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caramel);
  margin: 14px 0 6px;
}

.mm-lignes { display: flex; flex-direction: column; gap: 6px; }
.mm-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--creme-mie);
  border-radius: 10px;
  padding: 9px 12px;
}
.mm-ligne__nom {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mm-ligne__attendu { font-size: 11px; color: var(--caramel); }
.mm-ligne__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-qte { width: 74px; padding: 10px 8px; text-align: center; font-size: 16px; }
/* « sem. proch. » : − rouge à gauche, + vert à droite (Thomas, 18/09) */
.mm-pas { display: inline-flex; align-items: center; gap: 4px; }
.mm-pas__btn {
  width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #ffffff; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mm-pas__btn:active { transform: scale(0.94); }
.mm-pas__btn--moins { background: #C0392B; }
.mm-pas__btn--plus { background: var(--vert-petri, #7A9455); }
.mm-pas__champ { width: 62px; }
.mm-pas__champ--plus { color: var(--vert-petri, #7A9455); }
.mm-pas__champ--moins { color: #C0392B; }
.mm-heure { width: 104px; padding: 8px; font-size: 15px; }
.mm-mini { font-size: 10px; color: var(--caramel); text-transform: uppercase; letter-spacing: 0.5px; }

.mm-ligne--ok { background: var(--vert-doux, #EAF1DF); }
.mm-ligne--ok .mm-ligne__nom { color: var(--vert-petri, #7A9455); }
.mm-ligne--ecart { background: #F7E4E4; }
.mm-ligne--rupture { background: var(--dore-doux, #F4E8CE); }

.mm-btn-ok {
  background: transparent;
  border: 1.5px solid var(--vert-petri, #7A9455);
  color: var(--vert-petri, #7A9455);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
}
.mm-btn-ok--actif, .mm-btn-ok:active { background: var(--vert-petri, #7A9455); color: #ffffff; }
.mm-btn-rupture {
  background: transparent;
  border: 1.5px solid var(--caramel);
  color: var(--caramel);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
}
.mm-btn-rupture:active { background: var(--caramel); color: #ffffff; }

.mm-ajout { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mm-ajout .champ { flex: 1; min-width: 180px; }
.mm-valider { width: 100%; margin-top: 14px; padding: 13px; font-size: 15px; }

.mm-resume { font-size: 13px; color: var(--gris-texte); line-height: 1.6; margin-bottom: 10px; }
.mm-alerte { color: var(--rose-sourire); }

.mm-planning-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--gris-carre);
}
.mm-planning-ligne:last-child { border-bottom: none; }
.mm-planning-ligne__nom { font-family: "Lora", Georgia, serif; font-size: 14px; color: var(--brun-croute); }
.mm-planning-ligne .champ { width: auto; min-width: 200px; }

.mm-carte { margin-bottom: 10px; }
.mm-fiche { margin-bottom: 14px; }
.mm-remontee--alerte { border-left: 3px solid var(--rose-sourire); }
.mm-remontee__quand { font-size: 11px; color: var(--caramel); }

@media (max-width: 640px) {
  .mm-ligne__actions { width: 100%; justify-content: flex-end; }
  .mm-planning-ligne .champ { width: 100%; }
}

/* ---------- Empois ---------- */
.petri-carre--empois { border-style: dashed; }

.emp-jours {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.emp-jour {
  width: 84px;
  border: 1px solid var(--beige-fonce);
  background: #fff;
  border-radius: 10px;
  padding: 10px 4px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--noir);
  line-height: 1.2;
}
.emp-jour__nom { display: block; font-size: 11px; color: var(--gris-texte); text-transform: capitalize; }
.emp-jour__num { display: block; font-size: 20px; margin: 2px 0; }
.emp-jour__qte { display: block; font-size: 10px; color: var(--gris-texte); }
.emp-jour--coche {
  border-color: var(--vert-petri);
  border-width: 2px;
  background: color-mix(in srgb, var(--vert-petri) 8%, #fff);
}
/* « Rien à pétrir » n'est pas « case fermée » : cadre en pointillés et
   chiffres en gris, mais le jour reste pleinement cliquable. */
.emp-jour--vide { border-style: dashed; }
.emp-jour--vide .emp-jour__num { color: var(--gris-texte); }

/* Saisie manuelle des pains à empois, jour par jour */
.emp-saisie { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.emp-saisie-jour {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  background: #fff;
}
.emp-saisie-jour__nom {
  min-width: 150px;
  font-size: 13px;
  text-transform: capitalize;
}
.emp-saisie-jour__pains { display: flex; gap: 12px; flex-wrap: wrap; }
.emp-saisie-pain { display: flex; align-items: center; gap: 6px; }
.emp-saisie-pain__nom { font-size: 12px; color: var(--gris-texte); }
.emp-saisie-pain__champ { width: 84px; text-align: right; }
.emp-saisie-pain--corrige .emp-saisie-pain__champ { border-color: var(--vert-petri); }
.emp-saisie-pain--corrige .emp-saisie-pain__nom { color: var(--noir); }
.emp-saisie-pain__auto {
  border: 1px solid var(--beige-fonce);
  background: var(--creme);
  color: var(--gris-texte);
  border-radius: 8px;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.emp-detail-jours { margin-top: 12px; }
.emp-detail-jour {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--gris-texte);
  padding: 4px 0;
  border-bottom: 1px solid var(--creme);
}
.emp-detail-jour span:first-child { text-transform: capitalize; }

/* ---------- Ce qui manque ---------- */
.petri-bandeau--alerte { border-left: 4px solid #b04e72; }

.onglet__pastille {
  display: inline-block;
  background: #b04e72;
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  margin-left: 4px;
}

.manque-table-hote { overflow-x: auto; }
.manque-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.manque-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--gris-texte);
  border-bottom: 1px solid var(--beige-fonce);
}
.manque-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--creme);
  vertical-align: top;
}
.manque-produit { white-space: nowrap; }
.manque-detail { color: var(--gris-texte); font-size: 12px; line-height: 1.5; }

.manque-table--haute .manque-quoi { color: #b04e72; }
.manque-table--haute .manque-produit { border-left: 3px solid #b04e72; padding-left: 8px; }
.manque-table--moyenne .manque-quoi { color: #a3651f; }
.manque-table--moyenne .manque-produit { border-left: 3px solid #a3651f; padding-left: 8px; }
.manque-table--basse .manque-quoi { color: var(--gris-texte); }
.manque-table--basse .manque-produit { border-left: 3px solid var(--beige-fonce); padding-left: 8px; }

/* Horloge permanente (haut de l'écran, tous modes) */
#horloge-mmec {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--brun-croute);
  color: var(--blanc-chignon);
  border-radius: 999px;
  padding: 5px 16px;
  box-shadow: 0 2px 10px rgba(95, 55, 17, 0.25);
  white-space: nowrap;
}
.horloge__date { font-size: 12px; letter-spacing: 0.3px; }
.horloge__heure {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--dore-levain);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  #horloge-mmec { top: 6px; padding: 4px 12px; gap: 8px; }
  .horloge__date { font-size: 10px; }
  .horloge__heure { font-size: 12px; }
}
@media print { #horloge-mmec { display: none; } }

/* Réception : clôture avant l'heure habituelle (signal direction) et photos de non-conformité */
.mm-avant-heure { background: var(--caramel-clair); color: var(--brun-croute); margin-left: 6px; }
/* Catalogue : renommage et exclusivité client (18/09/2026) */
.fiche__nom--champ {
  font: inherit; font-size: inherit; color: inherit; width: 100%; min-width: 0;
  border: 1px dashed var(--dore-levain); border-radius: 8px; padding: 2px 8px; background: var(--creme-mie, #FBF6EC);
}
.fiche__nom--champ:focus { outline: none; border-style: solid; border-color: var(--brun-fournil); }
.ep-exclu-clients { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0 24px; max-height: 180px; overflow: auto; }
.fiche__exclu-client {
  font-size: 11px; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  background: var(--dore-levain); color: var(--brun-croute); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.mm-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.mm-photo { position: relative; display: inline-block; }
.mm-photo img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 5px rgba(95, 55, 17, 0.2);
  background: var(--gris-carre);
}
.mm-photo .pligne__x { position: absolute; top: -7px; right: -7px; background: var(--blanc-chignon); border-radius: 50%; }
.mm-photos--perte { margin: -4px 0 12px; }
.mm-photos--mini { margin-top: 6px; }
.mm-photos--mini img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: var(--ombre-douce);
  background: var(--gris-carre);
}
/* Aperçu Joy : le nom sous « JOY » est cliquable pour changer de personne */
.sidebar__sous--choix { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.sidebar__sous--choix:hover { color: var(--dore-levain); }

.vm-ca-lecture {
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  color: var(--brun-croute);
  padding: 8px 0 2px;
}
.vm-ca-lecture span {
  display: block;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
  color: var(--caramel);
}

/* Aperçus direction : fenêtre de choix (Joy Prod / Joy Vente / Espace client) */
.apercu-voile {
  position: fixed;
  inset: 0;
  background: rgba(95, 55, 17, 0.45);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.apercu-modal {
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apercu-modal__champ label { display: block; margin-bottom: 4px; }

/* La famille sous le numéro du pétrin */
.petri-carre__famille {
  font-size: 12px;
  color: var(--gris-texte);
  margin-top: 2px;
}

/* =========================================================================
   Joy lecture seule (équipiers non managers — seuls Bilel, Thomas et les
   responsables de branche modifient ; règle Sacha)
   ========================================================================= */
/* Cahier de recettes : consultation uniquement */
body.joy-lecture #cahier-nouvelle-base,
body.joy-lecture .cahier-carte__suppr,
body.joy-lecture #ca-ajouter,
body.joy-lecture #ca-enregistrer,
body.joy-lecture #ca-retirer,
body.joy-lecture [data-vue-panneau="cahier"] [data-suppr] { display: none !important; }
body.joy-lecture [data-vue-panneau="cahier"] input,
body.joy-lecture [data-vue-panneau="cahier"] textarea,
body.joy-lecture [data-vue-panneau="cahier"] select {
  pointer-events: none;
  background: transparent;
}

/* Catalogue : les prix et fiches produits ne se gèrent que depuis OSMO
   (direction) — dans Joy, le catalogue est une référence en consultation. */
body.mode-joy .cat-actions-direction,
body.mode-joy #cat-nouveau, body.mode-joy #cat-importer-photos,
body.mode-joy .cat-restaurer { display: none !important; }

/* Hygiène : cocher et relever oui, modifier le plan / les enceintes /
   le classeur non */
body.joy-lecture #hyg-editer,
body.joy-lecture #hyg-editer-enceintes,
body.joy-lecture [data-classeur="importer"],
body.joy-lecture [data-classeur="remplacer"],
body.joy-lecture [data-classeur="retirer"],
body.joy-lecture [data-classeur="supprimer"],
body.joy-lecture [data-classeur-date] { display: none !important; }

/* Documents (vue contrôle) */
.docs-raccourcis { display: flex; gap: 10px; flex-wrap: wrap; }
.docs-raccourcis .btn { padding: 12px 16px; font-size: 14px; }
.docs-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gris-carre);
}
.docs-ligne:last-child { border-bottom: none; }
.docs-ligne--vide { opacity: 0.55; }
.docs-ligne__nom { font-family: "Lora", Georgia, serif; font-size: 14px; color: var(--brun-croute); }
.docs-ligne__detail { font-size: 12px; color: var(--caramel); }

/* L'entrée Documents (contrôle) n'existe QUE dans Joy (règle Sacha) :
   dans OSMO, la direction dépose les documents via Hygiène et RH, et
   seul le Tableau de bord reste en tête de menu. */
.nav__item[data-vue="docs"] { display: none; }
body.mode-joy .nav__item[data-vue="docs"] { display: flex; }

/* ---------- Planning des équipes ---------- */
.plan-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.plan-semaine { font-size: 15px; text-transform: capitalize; }

.plan-table-hote { overflow-x: auto; }
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}
.plan-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--beige-fonce);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.plan-table th span {
  display: block;
  font-size: 11px;
  color: var(--gris-texte);
  font-weight: 400;
}
.plan-th-nom { min-width: 170px; }
.plan-th-total { text-align: right; }

.plan-table td {
  border-bottom: 1px solid var(--creme);
  vertical-align: top;
  padding: 6px 8px;
}
.plan-nom__nom { display: block; }
.plan-nom__poste { display: block; font-size: 11px; color: var(--gris-texte); }

.plan-case { position: relative; min-width: 120px; }
.plan-case--editable:hover { background: var(--creme); }
.plan-plus {
  border: 1px dashed var(--beige-fonce);
  background: transparent;
  border-radius: 6px;
  width: 100%;
  padding: 3px;
  cursor: pointer;
  color: var(--gris-texte);
  font-size: 14px;
  opacity: 0;
}
.plan-case:hover .plan-plus { opacity: 1; }

.plan-creneau {
  background: color-mix(in srgb, var(--vert-petri) 12%, #fff);
  border-left: 3px solid var(--vert-petri);
  border-radius: 5px;
  padding: 5px 7px;
  margin-bottom: 4px;
  cursor: pointer;
}
.plan-creneau__h { display: block; }
.plan-creneau__lieu,
.plan-creneau__note { display: block; font-size: 11px; color: var(--gris-texte); }
.plan-total { text-align: right; font-variant-numeric: tabular-nums; }

/* Le formulaire de créneau s'ouvre EN FENÊTRE, au milieu de l'écran.
   Il vivait en bas de la page : cliquer sur « + » dans la première ligne
   du planning l'ouvrait deux mille pixels plus bas, hors de vue, et rien
   ne défilait — « j'appuie et il ne se passe rien » (Sacha, 05/09/2026).
   Une fenêtre se voit d'où qu'on l'ouvre, et sur un téléphone aussi. */
.plan-voile {
  /* au-dessus du tiroir de menu et de son bouton (z-index 60) : sur un
     téléphone, la fenêtre passait DERRIÈRE le menu, et le responsable ne
     pouvait plus atteindre aucun onglet (audit du 05/09). */
  position: fixed; inset: 0; z-index: 210;
  background: rgba(60, 40, 20, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.plan-form {
  padding: 16px;
  max-width: 620px; width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 18px 48px rgba(60, 40, 20, .28);
}
@media (max-width: 640px) {
  .plan-voile { padding: 0; align-items: flex-end; }
  .plan-form { max-height: 92vh; border-radius: 14px 14px 0 0; }
}
.plan-form__champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.plan-form__champs label,
.plan-form__note { font-size: 12px; color: var(--gris-texte); display: block; }
.plan-form__champs .champ,
.plan-form__note .champ { width: 100%; margin-top: 4px; }
.plan-form__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- Alertes de pointage ---------- */
.plan-alertes {
  background: var(--creme);
  border-left: 4px solid #b04e72;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.plan-alertes--ok {
  border-left-color: var(--vert-petri);
  font-size: 13px;
  color: var(--gris-texte);
}
.plan-alertes__titre { margin-bottom: 8px; }
.plan-alerte {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 0;
}
.plan-alerte__type {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #fff;
  color: #b04e72;
  white-space: nowrap;
}
.plan-alerte--zone .plan-alerte__type { color: #a3651f; }
.plan-alerte--absent .plan-alerte__type { color: #b04e72; }

/* ---------- Badgeuse ---------- */
.badge-carte {
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--beige-fonce);
  border-radius: 12px;
  padding: 20px;
}
.badge-jour { font-size: 15px; text-transform: capitalize; margin-bottom: 12px; }

.badge-prevu {
  background: var(--creme);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}
.badge-prevu__h { display: block; font-size: 24px; }
.badge-prevu__lieu { display: block; font-size: 13px; color: var(--gris-texte); margin-top: 2px; }
.badge-prevu__note { display: block; font-size: 12px; color: var(--gris-texte); margin-top: 4px; }
.badge-prevu--vide { font-size: 13px; color: var(--gris-texte); line-height: 1.5; }

.badge-actions { display: grid; gap: 10px; }
.badge-bouton { padding: 16px; font-size: 16px; }

.badge-etat { margin-top: 14px; font-size: 13px; color: var(--gris-texte); }
.badge-ok {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--vert-petri) 10%, #fff);
  font-size: 13px;
  line-height: 1.5;
}
.badge-ko {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, #b04e72 8%, #fff);
  font-size: 13px;
  line-height: 1.5;
}

/* Un départ jamais badgé : ni une réussite ni une faute, un rappel. */
.badge-alerte {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, #8a5a2b 10%, #fff);
  border-left: 3px solid #8a5a2b;
  font-size: 13px;
  line-height: 1.5;
}

.paie-jours__doublon { color: #8a5a2b; font-size: 11px; white-space: nowrap; }

.badge-histo { margin-top: 18px; }
.badge-histo__titre { font-size: 11px; color: var(--gris-texte); margin-bottom: 4px; }
.badge-histo__ligne {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--creme);
}
.badge-histo__ligne--ecart { color: #b04e72; }

.badge-note {
  margin-top: 18px;
  font-size: 11px;
  color: var(--gris-texte);
  line-height: 1.5;
}

/* ---------- Lieux de badgeage ---------- */
.lieux-bloc { margin-top: 22px; }
.lieux-panneau { margin-top: 12px; padding: 16px; }
.lieux-regles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lieux-regles label { font-size: 12px; color: var(--gris-texte); }
.lieux-regles .champ { width: 90px; margin-top: 4px; }
.lieux-note { font-size: 12px; color: var(--gris-texte); line-height: 1.5; margin-bottom: 14px; }

.lieu-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--creme);
}
.lieu-ligne__nom { flex: 1 1 220px; font-size: 13px; }
.lieu-ligne__adr,
.lieu-ligne__pos { display: block; font-size: 11px; color: var(--gris-texte); }
.lieu-ligne--sans .lieu-ligne__pos { color: #a3651f; }
.lieu-ligne__rayon { font-size: 11px; color: var(--gris-texte); }
.lieu-ligne__rayon .champ { width: 80px; margin: 0 4px; }
.lieux-message { margin-top: 12px; font-size: 13px; }

/* Espace client : semaines pleines lundi→dimanche + semaine type + saisie quantité */
.ec-semaine { margin-bottom: 10px; }
.ec-semaine__label {
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--caramel);
  margin: 6px 0 4px;
}
.ec-semaine__jours { display: flex; gap: 8px; flex-wrap: nowrap; width: max-content; }
/* Sur un téléphone, sept tuiles en ligne obligeraient à faire glisser le
   ruban pour découvrir le samedi et le dimanche — et on ne fait pas glisser
   ce qu'on ne sait pas être là. La semaine se range alors en quatre puis
   trois, tout est visible d'un coup d'œil. */
@media (max-width: 760px) {
  .ec-semaine__jours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
  }
  .ec-jours-choix .ec-jour { width: auto; }
}

.ec-st { margin-top: 12px; }
.ec-st summary {
  cursor: pointer;
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
  padding: 8px 0;
}
.ec-st-jours { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.ec-st-jour {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--creme-mie);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 7px 12px;
}
.ec-st-jour--rempli { background: var(--vert-doux, #EAF1DF); }
.ec-st-jour--rempli .ec-st-jour__etat { color: var(--vert-petri, #7A9455); }
.ec-st-jour--courant { border-color: var(--dore-levain); }
.ec-st-jour__nom { font-family: "Lora", Georgia, serif; font-size: 13px; color: var(--brun-croute); }
.ec-st-jour__etat { font-size: 12px; color: var(--caramel); }
.ec-st-message {
  margin-top: 10px;
  font-size: 13px;
  color: var(--vert-petri, #7A9455);
  background: var(--vert-doux, #EAF1DF);
  border-radius: 8px;
  padding: 9px 12px;
}

input.ec-qte-nb {
  width: 58px;
  text-align: center;
  border: 1px solid var(--gris-carre);
  border-radius: 8px;
  background: #ffffff;
  font-size: 15px;
  padding: 6px 2px;
  font-family: inherit;
  color: var(--brun-croute);
}
input.ec-qte-nb:focus { outline: 2px solid var(--dore-levain); }

/* ---------- Rôle et camion sur un créneau ---------- */
.plan-creneau { position: relative; }
.plan-creneau__camion {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 13px;
  line-height: 1;
}
.plan-creneau__role { display: block; font-size: 11px; color: var(--vert-petri); }

/* ---------- Mon équipe ---------- */
.eq-liste { display: grid; gap: 8px; }
.eq-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--beige-fonce);
  border-radius: 8px;
  background: #fff;
}
.eq-ligne__id { flex: 1 1 220px; }
.eq-ligne__nom { display: block; }
.eq-ligne__poste { display: block; font-size: 11px; color: var(--gris-texte); }
.eq-ligne__tel { font-size: 12px; color: var(--gris-texte); }
.eq-ligne__badge { font-size: 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.eq-ligne__badge input { width: 17px; height: 17px; }

/* ---------- Stands marchés ---------- */
.stands-barre { margin-bottom: 14px; }
.stands-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.stand-carte {
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
}
.stand-carte--active { border-color: var(--vert-petri); border-width: 2px; }
.stand-carte--inactif { opacity: 0.5; }
.stand-carte__nom { font-size: 15px; }
.stand-carte__adr,
.stand-carte__jours { display: block; font-size: 11px; color: var(--gris-texte); margin-top: 2px; }
.stand-carte__pos { font-size: 11px; color: var(--vert-petri); margin-top: 6px; }
.stand-carte__pos--sans { color: #a3651f; }

.stand-form { margin-bottom: 14px; padding: 16px; }
.stand-form__champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.stand-form__champs label { font-size: 12px; color: var(--gris-texte); display: block; }
.stand-form__champs .champ { width: 100%; margin-top: 4px; }
.stand-form__actions { display: flex; gap: 8px; }

.stand-fiche { margin-top: 18px; padding: 18px; }
.stand-fiche__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.stand-fiche__grille label { font-size: 12px; color: var(--gris-texte); display: block; }
.stand-fiche__grille .champ { width: 100%; margin-top: 4px; }

.stand-jours { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.stand-jours__titre { font-size: 12px; color: var(--gris-texte); }
.stand-jour {
  font-size: 12px;
  padding: 4px 9px;
  border: 1px solid var(--beige-fonce);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.stand-jour--on { border-color: var(--vert-petri); background: color-mix(in srgb, var(--vert-petri) 8%, #fff); }

.stand-notes { display: block; font-size: 12px; color: var(--gris-texte); margin-bottom: 14px; }
.stand-notes .champ { width: 100%; margin-top: 4px; }

.stand-position {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--creme);
  border-radius: 8px;
}
.stand-position__titre { display: block; font-size: 11px; color: var(--gris-texte); }
.stand-position__val { display: block; font-size: 13px; }
.stand-message { margin-top: 10px; font-size: 13px; }

.stand-photos { margin-top: 18px; }
.stand-photos__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stand-photos__vide { font-size: 12px; color: var(--gris-texte); margin-top: 6px; }
.stand-photos__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.stand-photo { margin: 0; }
.stand-photo img { width: 100%; border-radius: 8px; display: block; }
.stand-photo figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--gris-texte);
  margin-top: 3px;
}

.plan-alerte--stand .plan-alerte__type { color: #5b7596; }

/* Espace client : cœurs favoris (le produit aimé passe en tête d'affiche) */
.ec-coeur {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 5px rgba(95, 55, 17, 0.25);
  font-size: 19px;
  line-height: 1;
  color: var(--caramel);
  cursor: pointer;
}
.ec-coeur--plein { color: var(--rose-sourire); }
.ec-coeur:active { transform: scale(1.15); }
.ec-carte__photo { position: relative; }
.ec-coeur-mini {
  border: none;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  color: var(--caramel);
  cursor: pointer;
  padding: 2px 4px;
}
.ec-coeur-mini.ec-coeur--plein { color: var(--rose-sourire); }
.ec-cmd-coeur { width: 30px; }

/* La fiche s'ouvre sous la carte cliquée et prend toute la largeur */
.stand-fiche-hote { grid-column: 1 / -1; }
.stand-fiche-hote .stand-fiche { margin-top: 4px; }

.stand-carte__photo {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
  margin-bottom: 8px;
}

.stand-photo__actions { display: flex; align-items: center; gap: 4px; }
.stand-photo__couv {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--gris-texte);
  padding: 0 2px;
}
.stand-photo__couv:hover { color: var(--vert-petri); }

/* ---------- Contacts d'un stand ---------- */
.stand-contacts { margin-top: 16px; }
.stand-contacts__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.stand-contacts__liste { display: grid; gap: 8px; }
.stand-contact {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.2fr) minmax(110px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.stand-contact .champ { width: 100%; }
.stand-contact__tel {
  text-decoration: none;
  font-size: 16px;
  color: var(--vert-petri);
  padding: 0 4px;
}
@media (max-width: 640px) {
  .stand-contact { grid-template-columns: 1fr 1fr; }
}

/* ---------- Carte du périmètre ---------- */
.carte-bloc { margin-top: 16px; }
.carte-zone {
  position: relative;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, var(--creme) 0 39px, var(--beige-fonce) 39px 40px),
    repeating-linear-gradient(90deg, var(--creme) 0 39px, var(--beige-fonce) 39px 40px);
  border: 1px solid var(--beige-fonce);
  cursor: crosshair;
}
.carte-fond { position: absolute; inset: 0; }
.carte-tuile { position: absolute; width: 256px; height: 256px; }

.carte-cercle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--vert-petri);
  background: color-mix(in srgb, var(--vert-petri) 16%, transparent);
  border-radius: 50%;
  pointer-events: none;
  transition: width 0.08s, height 0.08s;
}
.carte-point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--vert-petri);
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.carte-echelle {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--gris-texte);
  pointer-events: none;
}

.carte-reglage {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.carte-reglage label { font-size: 12px; color: var(--gris-texte); }
.carte-reglage input[type="range"] { flex: 1 1 220px; accent-color: var(--vert-petri); }
.carte-rayon-val { font-size: 15px; min-width: 60px; }

.carte-note {
  font-size: 11px;
  color: var(--gris-texte);
  line-height: 1.5;
  margin-top: 8px;
}

/* ---------- Saisie d'adresse ---------- */
.stand-adresse { margin-top: 16px; }
.adr-recherche { position: relative; margin: 8px 0 12px; }
.adr-recherche .champ { width: 100%; }

.adr-liste {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: #fff;
  border: 1px solid var(--beige-fonce);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
}
.adr-prop {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--creme);
  font-family: inherit;
}
.adr-prop:last-child { border-bottom: 0; }
.adr-prop:hover,
.adr-prop--on { background: var(--creme); }
.adr-prop__titre { display: block; font-size: 14px; color: var(--gris-fonce); }
.adr-prop__detail { display: block; font-size: 11px; color: var(--gris-texte); margin-top: 2px; }

.adr-champs {
  display: grid;
  grid-template-columns: 90px 1fr 110px 1fr;
  gap: 10px;
}
.adr-champs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--gris-texte);
}
.adr-champs .champ { width: 100%; }
@media (max-width: 720px) {
  .adr-champs { grid-template-columns: 90px 1fr; }
  .adr-voie, .adr-ville { grid-column: 1 / -1; }
}

.carte-etiquette {
  position: absolute;
  left: 8px;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  color: var(--gris-fonce);
  line-height: 1.4;
  pointer-events: none;
}
.carte-diam { font-size: 11px; color: var(--gris-texte); }

.carte-credit {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 9px;
  color: var(--gris-texte);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  padding: 1px 5px;
  pointer-events: none;
}

/* =========================================================================
   Quantités du jour
   Le tableau se lit à seize colonnes : la colonne des produits et la ligne
   d'en-tête restent collées, sinon on ne sait plus ce qu'on saisit.
   ========================================================================= */

/* ---------- Barre de date ---------- */
/* La bannière des jours SUIT le défilement (Thomas, 14/09/2026) : en bas
   d'un tableau de trente lignes, il ne savait plus quel jour il regardait.
   Collée en haut, fond opaque, au-dessus du tableau. */
.qte-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--creme-mie, #FBF6E3);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--beige-fonce);
}
.qte-nav { display: flex; align-items: center; gap: 6px; }
.qte-fleche {
  border: 1px solid var(--beige-fonce);
  background: #fff;
  border-radius: 7px;
  width: 32px;
  height: 32px;
  font-size: 15px;
  color: var(--gris-texte);
  cursor: pointer;
  font-family: inherit;
}
.qte-fleche:hover { background: var(--creme); color: var(--vert-petri); }
.qte-date { width: 150px; }
.qte-jour-nom {
  font-size: 19px;
  color: var(--brun);
  text-transform: capitalize;
}

/* ---------- Bandeau de contexte ---------- */
.qte-contexte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.qte-ctx-carte {
  background: #fff;
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 12px 14px;
}
.qte-ctx-carte--meteo { display: flex; align-items: center; gap: 12px; }
.qte-ctx-carte--cliquable { cursor: pointer; transition: border-color 0.15s; }
.qte-ctx-carte--cliquable:hover { border-color: var(--vert-petri); }
.qte-ctx-carte--note { grid-column: 1 / -1; }

.qte-meteo-icone { font-size: 30px; line-height: 1; }
.qte-ctx-titre { font-size: 11px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: 0.06em; }
.qte-ctx-detail { font-size: 14px; color: var(--gris-fonce); margin-top: 4px; line-height: 1.5; }
.qte-ctx-sous { font-size: 11px; color: var(--gris-texte); margin-top: 3px; }
.qte-ctx-effet { font-size: 12px; margin-top: 3px; }

/* le cadre de la météo dit d'un coup d'œil si le temps aide ou gêne */
.qte-ctx--bon { border-left: 3px solid var(--vert-petri); }
.qte-ctx--bon .qte-ctx-effet { color: var(--vert-petri); }
.qte-ctx--moyen { border-left: 3px solid #c9a227; }
.qte-ctx--moyen .qte-ctx-effet { color: #a3651f; }
.qte-ctx--dur { border-left: 3px solid #b04e72; }
.qte-ctx--dur .qte-ctx-effet { color: #b04e72; }

.qte-pastille {
  display: inline-block;
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 12px;
  margin: 2px 4px 2px 0;
}
.qte-pastille--ferie { background: #f4e3e9; color: #8d3a58; }
.qte-pastille--fete { background: #f6ecd8; color: #8a6320; }
.qte-pastille--vac { background: #e6ecdd; color: #4c5b3b; }

.qte-ecart { font-size: 13px; margin-left: 6px; }
.qte-ecart--haut { color: var(--vert-petri); }
.qte-ecart--bas { color: #b04e72; }

.qte-note-ligne { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.qte-note-ligne #qte-marqueur { flex: 0 1 260px; }
.qte-note-ligne #qte-note { flex: 1 1 320px; }

/* ---------- Filtres ---------- */
.qte-filtres {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.qte-onglets { display: flex; gap: 6px; }
.qte-onglet {
  border: 1px solid var(--beige-fonce);
  background: #fff;
  border-radius: 7px;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--gris-texte);
  cursor: pointer;
  font-family: inherit;
}
.qte-onglet:hover { background: var(--creme); }
.qte-onglet--actif { background: var(--vert-petri); color: #fff; border-color: var(--vert-petri); }
.qte-onglet__n { opacity: 0.65; margin-left: 3px; font-size: 11px; }
.qte-bascule { font-size: 13px; color: var(--gris-texte); display: flex; align-items: center; gap: 6px; }
.qte-compte { font-size: 12px; color: var(--gris-texte); margin-left: auto; }

/* ---------- Le tableau ---------- */
.qte-tableau-cadre {
  overflow: auto;
  max-height: 68vh;
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  background: #fff;
}
.qte-tableau { border-collapse: separate; border-spacing: 0; font-size: 13px; }

/* en-tête collé en haut */
/* ---------- La bande d'en-tête ----------
   Elle reste collée en haut pendant qu'on fait défiler vingt lignes. Le
   fond doit donc être franchement opaque : au moindre doute, les chiffres
   du tableau apparaissent au travers et on se trompe de colonne. Marron
   plein, texte crème, aucune transparence. */
.qte-tableau thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background-color: #7B4A21;
  color: var(--blanc-chignon);
  border-bottom: 2px solid var(--brun-croute);
  padding: 8px;
  text-align: center;
  font-weight: normal;
}
/* les deux coins doivent passer au-dessus des colonnes qui défilent
   sous eux : la règle d'en-tête ci-dessus les rattraperait sinon */
.qte-tableau thead .qte-coin { white-space: nowrap; z-index: 8; }
.qte-tableau thead .qte-coin--total { z-index: 9; }
.qte-tableau thead .qte-col__nom { color: var(--blanc-chignon); }
.qte-tableau thead .qte-col__sec { color: var(--caramel-clair); }
.qte-tableau thead .qte-col__note { color: var(--dore-levain); }
.qte-tableau thead .qte-col--paire { background-color: #6B3F1B; }
.qte-tableau thead .qte-col--b2b { background-color: #6A4526; }
/* Un nom coupé ne vaut pas mieux qu'un code : il passe à la ligne
   plutôt que de finir en points de suspension. */
.qte-col { min-width: 102px; max-width: 136px; vertical-align: bottom; }
.qte-col__nom {
  display: block;
  color: var(--brun);
  font-size: 12.5px;
  line-height: 1.25;
  white-space: normal;
  /* on passe à la ligne aux espaces, jamais au milieu d'un mot :
     « Porchefon-taine » se lit plus mal que « POR » */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-transform: none;
}
.qte-col__sec { display: block; font-size: 9px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: 0.05em; }


/* colonne des produits collée à gauche */
.qte-produit, .qte-coin {
  position: sticky;
  left: 0;
  z-index: 4;
  background-color: #fff;
  text-align: left;
  padding: 5px 12px 5px 10px;
  border-right: 1px solid var(--beige-fonce);
  white-space: nowrap;
  font-weight: normal;
  color: var(--gris-fonce);
  min-width: 180px;
}
.qte-coin {
  z-index: 8;
  background-color: #7B4A21;
  color: var(--blanc-chignon);
  border-right-color: var(--brun-croute);
}
.qte-coin--total {
  left: auto;
  right: 0;
  min-width: 56px;
  text-align: right;
  z-index: 9;
  border-left: 1px solid var(--brun-croute);
  border-right: 0;
  box-shadow: -5px 0 8px -4px rgba(95, 55, 17, 0.28);
}

.qte-famille th {
  position: sticky;
  left: 0;
  background: var(--creme);
  color: var(--brun);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 7px 10px 4px;
  text-align: left;
  border-top: 1px solid var(--beige-fonce);
  z-index: 1;
  font-weight: normal;
}

.qte-tableau tbody tr:hover .qte-produit { background: var(--creme); }
.qte-tableau tbody tr:hover .qte-cell { background: #fbfaf5; }

.qte-cell {
  position: relative;
  z-index: 0;
  padding: 3px 2px;
  text-align: center;
  border-bottom: 1px solid #f2efe6;
  height: 46px;
  background-color: #fff;
}
.qte-cell--zero { background-color: #fbf9f2; }
.qte-cell--corrigee { background-color: #eaf1df; }

.qte-saisie {
  width: 58px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 4px 2px;
  text-align: center;
  font-size: 14px;
  font-family: inherit;
  color: var(--gris-fonce);
  -moz-appearance: textfield;
}
/* une case changée par un autre appareil : elle clignote une seconde */
@keyframes qte-arrivee { 0% { background: #f3d9a4; } 100% { background: transparent; } }
.qte-cell--distant { animation: qte-arrivee 1.2s ease-out; }
span.qte-cell--distant { animation: qte-arrivee 1.2s ease-out; }

/* une quantité commandée par un client : on la lit, on ne la tape pas */
.qte-saisie--commande {
  display: inline-block; text-align: center; color: var(--brun-croute);
  background: var(--creme); border-radius: 6px; cursor: default; opacity: .85;
}
.qte-saisie::-webkit-outer-spin-button,
.qte-saisie::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qte-saisie:hover { border-color: var(--beige-fonce); background: #fff; }
.qte-saisie:focus { border-color: var(--vert-petri); background: #fff; outline: none; }

/* la demande du vendeur reste visible sans gêner la saisie */
.qte-avant {
  font-size: 9px;
  color: var(--gris-texte);
  text-decoration: line-through;
  pointer-events: none;
}

/* ---------- La demande du vendeur, sous la quantité ----------
   Le vendeur raisonne en écart, Thomas en total à charger. La ligne
   montre les deux : « +4 → 6 ». Un clic applique. */
.qte-cell__haut { display: flex; align-items: center; justify-content: center; gap: 3px; }

.qte-sugg { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 1px; }
.qte-sugg__appliquer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid transparent;
  background: none;
  border-radius: 20px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  color: var(--gris-texte);
}
.qte-sugg--attente .qte-sugg__appliquer {
  background: #fdf6e6;
  border-color: #e8d5a8;
}
.qte-sugg--attente .qte-sugg__appliquer:hover {
  background: var(--vert-petri);
  border-color: var(--vert-petri);
  color: #fff;
}
.qte-sugg--attente .qte-sugg__appliquer:hover .qte-sugg__delta,
.qte-sugg--attente .qte-sugg__appliquer:hover .qte-sugg__total { color: #fff; }
.qte-sugg--vue { opacity: 0.42; }
.qte-sugg__delta--plus { color: #4c5b3b; }
.qte-sugg__delta--moins { color: #8d3a58; }
.qte-sugg__fleche { color: var(--gris-texte); font-size: 9px; }
.qte-sugg__total { color: var(--brun); }
/* Refuser est un geste aussi légitime qu'accepter : la croix se voit,
   à gauche de la proposition, en rouge de la charte. */
.qte-sugg__refuser {
  border: 1px solid var(--rose-sourire);
  background: #fff;
  color: var(--rose-sourire);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: inherit;
  flex: 0 0 auto;
}
.qte-sugg__refuser:hover { background: var(--rose-sourire); color: #fff; }
.qte-sugg__refuser--bandeau { padding: 3px 6px; font-size: 11px; border-radius: 20px 0 0 20px; }
.qte-sugg-paire { display: inline-flex; align-items: stretch; }
.qte-sugg-paire .qte-sugg-item { border-radius: 0 20px 20px 0; border-left: 0; }

/* la cellule qui attend une réponse se signale sans crier */
.qte-cell--attente { box-shadow: inset 0 -2px 0 #e8d5a8; }

/* ---------- Le bandeau des demandes en attente ---------- */
.qte-suggestions {
  background: #fdf9ef;
  border: 1px solid #e8d5a8;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.qte-sugg-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--brun);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.qte-sugg-liste { display: grid; gap: 8px; }
.qte-sugg-marche { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qte-sugg-marche__nom {
  font-size: 12px;
  color: var(--gris-texte);
  min-width: 130px;
}
.qte-sugg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--beige-fonce);
  background: #fff;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12px;
  font-family: inherit;
  color: var(--gris-fonce);
  cursor: pointer;
}
.qte-sugg-item:hover { border-color: var(--vert-petri); background: #f3f6ec; }
.qte-sugg-item__chiffres { font-size: 11px; color: var(--gris-texte); }

.qte-total {
  text-align: right;
  padding: 5px 10px;
  color: var(--brun-fournil);
  background-color: #f6f1e4;
  border-bottom: 1px solid #f2efe6;
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 56px;
  border-left: 1px solid var(--beige-fonce);
  box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.08);
}
.qte-tableau tfoot .qte-total { position: sticky; bottom: 0; }
.qte-tableau tfoot .qte-total--general { right: 0; z-index: 4; }
.qte-tableau tfoot th, .qte-tableau tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--creme);
  border-top: 1px solid var(--beige-fonce);
  z-index: 2;
}
.qte-tableau tfoot .qte-produit { z-index: 3; }
.qte-total--general { font-size: 15px; color: var(--vert-petri); }

.qte-vide {
  background: #fff;
  border: 1px dashed var(--beige-fonce);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  color: var(--gris-texte);
  font-size: 14px;
}

/* ---------- Les demandes des vendeurs ---------- */
.qte-demandes {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--beige-fonce);
  border-radius: 10px;
  padding: 14px 16px;
}
.qte-demande-bloc {
  padding: 9px 0;
  border-bottom: 1px solid var(--creme);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-fonce);
}
.qte-demande-bloc:last-child { border-bottom: 0; padding-bottom: 0; }
.qte-demande-tete { color: var(--brun); font-size: 14px; }
.qte-signal--rupture { color: #b04e72; }
.qte-signal--invendu { color: #a3651f; }

@media (max-width: 720px) {
  .qte-produit, .qte-coin { min-width: 132px; font-size: 12px; }
  .qte-tableau-cadre { max-height: 60vh; }
  .qte-jour-nom { font-size: 16px; }
}

.qte-nature {
  font-size: 11px;
  border-radius: 20px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.qte-nature--reel { background: #e2ead6; color: #4c5b3b; }
.qte-nature--prevu { background: #f0ece2; color: var(--gris-texte); }

/* Ventes marchés : météo automatique */
.vm-meteo span:first-child { white-space: nowrap; }

/* Suivi CA (direction) */
.sca-semaine {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
  padding: 0 6px;
}
.sca-tableau .sca-cell {
  text-align: right;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.sca-tableau .sca-cell:hover { background: var(--creme-mie); }
.sca-tableau .sca-cell--zero { color: var(--gris-texte); opacity: 0.45; }
.sca-tableau .sca-cell--active {
  background: var(--dore-doux, #F4E8CE);
  outline: 2px solid var(--dore-levain);
  outline-offset: -2px;
}
.sca-b2b th, .sca-b2b td { border-top: 2px solid var(--gris-carre); }
.sca-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.sca-mode label { display: block; margin-bottom: 4px; }
.sca-somme { margin-top: 10px; font-size: 13px; color: var(--vert-petri, #7A9455); }

/* ---------- Une colonne sur deux légèrement teintée ----------
   À quatorze colonnes, l'œil saute d'une ligne à l'autre. L'alternance
   guide le regard sans ajouter de trait. */

.qte-cell--paire { background-color: #f7f3e8; }
.qte-cell--paire.qte-cell--zero { background-color: #f3eee0; }
.qte-cell--paire.qte-cell--corrigee { background-color: #e4ecd6; }
.qte-pied {
  text-align: right;
  padding: 5px 10px;
  color: var(--brun);
  background: var(--creme);
}
.prod-col--paire { background: #f5f2ea; }
.prod-col__lieu { display: block; font-size: 9px; color: var(--gris-texte); font-weight: normal; }

/* le nom du marché tient sur deux lignes, sa ville en dessous */
.qte-col__sec { text-transform: none; letter-spacing: 0; }
.qte-col__note { color: #a3651f; font-size: 11px; margin-left: 3px; cursor: help; }

/* ---------- Les faits marquants ---------- */
.qte-note-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.qte-note-vide {
  font-size: 12px;
  color: var(--gris-texte);
  line-height: 1.6;
  padding: 6px 0 10px;
}
.qte-note-bloc {
  border: 1px solid var(--creme);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fdfcf8;
}
.qte-note-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qte-note-ligne select { flex: 0 1 250px; }
.qte-note-ligne input { flex: 1 1 300px; }

.qte-note-cibles {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.qte-note-cibles__titre {
  font-size: 11px;
  color: var(--gris-texte);
  margin-right: 4px;
}
.qte-cible {
  border: 1px solid var(--beige-fonce);
  background: #fff;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--gris-texte);
  cursor: pointer;
  font-family: inherit;
}
.qte-cible:hover { background: var(--creme); }
.qte-cible--on {
  background: var(--vert-petri);
  border-color: var(--vert-petri);
  color: #fff;
}

/* ---------- Trésorerie (lecture seule, direction) ---------- */
.treso-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.treso-carte { padding: 16px 18px; border-top: 3px solid var(--caramel, #b5803c); }
.treso-carte--bred { border-top-color: #2456a4; }
.treso-carte--bnpparibas { border-top-color: #009d6e; }
.treso-carte--comptetiime { border-top-color: #7a5fd0; }
.treso-carte--total { border-top-color: var(--brun, #4a2f1d); background: var(--creme-fonce, #f3ead9); }
.treso-carte__banque { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; }
.treso-carte__nom { font-size: 14px; margin: 3px 0 8px; }
.treso-carte__iban { opacity: 0.55; font-size: 12px; }
.treso-carte__solde { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.treso-barre { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.treso-maj { font-size: 12.5px; opacity: 0.7; margin-right: auto; }
.treso-lignes { display: flex; flex-direction: column; }
.treso-ligne {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 2px; border-bottom: 1px solid var(--trait, #e7dcc8);
}
.treso-ligne:last-child { border-bottom: none; }
.treso-ligne__date { flex: 0 0 58px; font-size: 12.5px; opacity: 0.7; }
.treso-ligne__libelle { flex: 1; min-width: 0; font-size: 14px; }
.treso-ligne__compte { display: block; font-size: 12px; opacity: 0.55; }
.treso-ligne__montant { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.treso--negatif { color: #a33b3b; }
.treso--positif { color: #2c7a4b; }

.qte-suggestions--vide {
  background: #fdfcf8;
  border-color: var(--beige-fonce);
}
.qte-suggestions--vide .qte-sugg-tete { margin-bottom: 6px; color: var(--gris-texte); font-size: 13px; }
.qte-noter-forme {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--creme);
}
.qte-noter-forme select { flex: 0 1 190px; }
.qte-noter-ecart { width: 80px; }

/* ---------- Barre d'outils des quantités ---------- */
.qte-outils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px 0 16px;
}
.qte-outils__note { font-size: 12px; color: var(--gris-texte); margin-left: auto; }
/* copier / coller un jour ou une semaine : deux groupes séparés d'un filet */
.qte-outils__groupe { display: inline-flex; gap: 6px; align-items: center; padding-right: 10px; border-right: 1px solid var(--dore-doux, #F4E8CE); }
.photo-btn--pret { background: var(--dore-levain); color: var(--brun-croute); }
.qte-toast {
  font-size: 13px; color: var(--brun-croute); background: var(--dore-doux, #F4E8CE);
  border-radius: 999px; padding: 4px 12px;
}
.qte-toast[hidden] { display: none !important; }
.qte-fleche--large { font-size: 12px; color: var(--caramel); }
.qte-nav { flex-wrap: wrap; }

.petri-outils { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ================= Import de l'historique du CA (Suivi CA) ================= */
.ica-barre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ica-barre__aide { font-size: 12px; color: var(--caramel); }
#ica-panneau { margin-bottom: 18px; }
.ica-texte {
  width: 100%; min-height: 140px; font: 13px/1.5 ui-monospace, Menlo, monospace;
  border: 1px solid var(--gris-carre, #DFDACB); border-radius: var(--rayon);
  padding: 10px 12px; background: #fff; color: inherit; box-sizing: border-box;
}
.ica-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; align-items: center; }
.ica-mapping, .ica-inconnus {
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 12px 16px; margin-bottom: 12px; font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
.ica-mapping__titre { font-weight: 600; width: 100%; }
.ica-mapping label, .ica-inconnus label { display: inline-flex; align-items: center; gap: 6px; }
.ica-inconnus strong { width: 100%; }
.ica-recap table.ica-table { margin-top: 8px; border-collapse: collapse; }
.ica-table td { padding: 2px 14px 2px 0; font-size: 13px; }
.ica-problemes { font-size: 12px; color: var(--brun-croute); margin-bottom: 12px; }
.ica-problemes summary { cursor: pointer; }
.ica-remplacer { display: block; font-size: 13px; margin-bottom: 10px; }
.ica-stat { margin-top: 8px; font-size: 12px; color: var(--caramel); }

/* ---------- Verrou : œil du mot de passe + mot de passe oublié ---------- */
.verrou__mdp { position: relative; }
.verrou__mdp .champ { padding-right: 42px; }
.verrou__oeil {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 6px; opacity: 0.45;
}
.verrou__oeil:hover, .verrou__oeil--actif { opacity: 0.9; }
.verrou__contact {
  font-size: 13px; line-height: 1.5; margin-top: 2px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--creme-fonce, #f3ead9); text-align: left;
}
.verrou__contact a { color: inherit; font-weight: 600; white-space: nowrap; }

/* CRM : contacts multiples par établissement */
.cli-contact {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1fr 1.4fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
@media (max-width: 900px) {
  .cli-contact { grid-template-columns: 1fr 1fr; }
  .cli-contact [data-ct="email"] { grid-column: span 2; }
}
.cli-contacts-plus {
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--brun-croute);
  background: var(--dore-levain);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* CRM : bouton d'ajout rapide de contact sur chaque carte */
.cli-carte__actions { display: flex; align-items: center; gap: 8px; }
.cli-btn-contact { white-space: nowrap; }

/* =========================================================================
   Point hebdomadaire
   ========================================================================= */

.ph-semaines {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 18px;
}
.ph-semaine {
  flex: 0 0 auto;
  min-width: 124px;   /* de quoi loger « mercredi 27 août » sur une ligne */
  border: 1px solid var(--caramel-clair);
  background: #fff;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  line-height: 1.3;
}
.ph-semaine:hover { border-color: var(--brun-fournil); }
.ph-semaine__n { display: block; font-size: 17px; color: var(--brun-fournil); }
.ph-semaine__an { display: block; font-size: 10px; color: var(--gris-texte);
  white-space: nowrap; margin-top: 1px; }
.ph-semaine__etat { display: block; font-size: 10px; color: var(--vert-petri); margin-top: 3px; }
.ph-semaine--courante { border-style: dashed; }
.ph-semaine--active {
  background: var(--brun-fournil);
  border-color: var(--brun-fournil);
}
.ph-semaine--active .ph-semaine__n,
.ph-semaine--active .ph-semaine__an { color: var(--blanc-chignon); }
.ph-semaine--active .ph-semaine__etat { color: var(--dore-levain); }

.ph-corps { display: grid; gap: 16px; }

.ph-bloc {
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 10px;
  padding: 16px 18px;
}
.ph-bloc--remontees { border-left: 3px solid var(--dore-levain); }
.ph-bloc__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ph-bloc__titre { font-size: 17px; color: var(--brun-fournil); margin: 0 0 3px; }
.ph-bloc__sous { font-size: 12px; color: var(--gris-texte); line-height: 1.55; max-width: 62ch; }
/* cases « Qui participe à quoi » : lisibles sur une ligne, cliquables entières */
.ph-role-case { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; cursor: pointer; }
.ph-role-case input { accent-color: var(--brun, #6b4423); }

.ph-ajout { display: flex; gap: 9px; margin: 14px 0 10px; flex-wrap: wrap; }
.ph-ajout .champ { flex: 1 1 340px; }

.ph-vide {
  font-size: 13px;
  color: var(--gris-texte);
  padding: 10px 0 2px;
}

.ph-points { list-style: decimal; margin: 4px 0 0; padding-left: 22px; }
.ph-point {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.ph-point__texte { flex: 1 1 auto; }
.ph-point__date { font-size: 11px; color: var(--gris-texte); white-space: nowrap; }

.ph-remontees { display: grid; gap: 12px; margin-top: 12px; }
.ph-remontee {
  border-left: 2px solid var(--caramel-clair);
  padding-left: 12px;
}
.ph-remontee__qui {
  font-size: 14px;
  color: var(--brun-fournil);
  display: flex;
  align-items: center;
  gap: 7px;
}
.ph-remontee__n {
  background: var(--creme-mie);
  border-radius: 20px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--gris-texte);
}
.ph-remontee__points {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.7;
}
.ph-muets {
  margin-top: 12px;
  font-size: 12px;
  color: var(--caramel);
  border-top: 1px solid var(--creme-mie);
  padding-top: 9px;
}

.ph-docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ph-doc {
  border: 1px dashed var(--caramel-clair);
  border-radius: 9px;
  padding: 12px 14px;
  position: relative;
}
.ph-doc--present { border-style: solid; background: var(--creme-mie); }
.ph-doc__nom { font-size: 14px; color: var(--brun-fournil); margin-bottom: 6px; }
.ph-doc__vide { font-size: 12px; color: var(--gris-texte); line-height: 1.5; margin-bottom: 9px; }
.ph-doc__fichier {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--vert-petri);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
}
.ph-doc__fichier:hover { color: var(--brun-fournil); }
.ph-doc__meta { font-size: 11px; color: var(--gris-texte); margin-top: 4px; }
.ph-doc .pligne__x { position: absolute; top: 8px; right: 8px; }

.ph-remontee__moi {
  background: var(--vert-pese-fond);
  color: var(--vert-petri);
  border-radius: 20px;
  padding: 0 8px;
  font-size: 10px;
}

/* ---------- Les quatre réunions ---------- */
.ph-reunions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.ph-reunion {
  border: 1px solid var(--caramel-clair);
  background: #fff;
  border-radius: 9px;
  padding: 10px 13px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  line-height: 1.35;
}
.ph-reunion:hover { border-color: var(--brun-fournil); }
.ph-reunion__nom { display: block; font-size: 14px; color: var(--brun-fournil); }
.ph-reunion__etat { display: block; font-size: 11px; color: var(--gris-texte); margin-top: 2px; }
.ph-reunion--active {
  background: var(--creme-mie);
  border-color: var(--brun-fournil);
  border-left-width: 3px;
}
.ph-reunion--active .ph-reunion__etat { color: var(--vert-petri); }

.ph-ajout__reunion { flex: 0 1 190px; }
.ph-point__reunion { flex: 0 0 110px; font-size: 12px; }

/* ---------- L'ordre du jour préparé automatiquement ---------- */
.ph-odj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--caramel-clair);
  border-left: 3px solid var(--caramel-clair);
  border-radius: 9px;
  padding: 13px 16px;
  margin: 12px 0 14px;
  background: #fdfcf8;
}
.ph-odj--pret {
  border-left-color: var(--dore-levain);
  background: var(--creme-mie);
}
.ph-odj__texte { flex: 1 1 320px; }
.ph-odj__nom { font-size: 14px; color: var(--brun-fournil); }
.ph-odj__meta { font-size: 12px; color: var(--gris-texte); margin-top: 3px; }
.ph-odj--pret .ph-odj__meta { color: var(--vert-petri); }
.ph-odj__sous { font-size: 11px; color: var(--gris-texte); margin-top: 5px; line-height: 1.5; }

/* ---------- Le document affiché par-dessus OSMO ----------
   Sur téléphone, un nouvel onglet est un piège : rien ne ramène en
   arrière. Le document s'ouvre donc dans un cadre, avec un vrai bouton
   de retour toujours visible. */
.odj-fond {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #e8e4da;
  display: flex;
  flex-direction: column;
}
/* --- la marche du compte rendu (rédaction point par point, 31/08/2026) --- */
.crp-carte { background: var(--creme-lait, #FBF3E4); border-radius: 16px;
  max-width: 680px; width: calc(100% - 32px); margin: 6vh auto 0;
  padding: 22px 26px 26px; box-shadow: 0 18px 60px rgba(0,0,0,.35);
  max-height: 86vh; overflow: auto; }
.crp-tete { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  flex-wrap: wrap; color: var(--brun-fournil, #7B4A21); }
.crp-jauge { height: 8px; border-radius: 6px; background: rgba(0,0,0,.10); margin: 12px 0 18px; }
.crp-jauge__plein { height: 100%; border-radius: 6px; background: var(--vert-mie, #6FA33F);
  transition: width .25s ease; }
.crp-point__ou { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--caramel, #C88850); margin-bottom: 4px; }
.crp-point__type { font-size: 13px; opacity: .7; margin-bottom: 8px; }
.crp-point__texte { font-size: 17px; line-height: 1.45; color: var(--brun-croute, #5F3711);
  margin-bottom: 14px; }
.crp-note__etiquette { display: block; font-size: 13px; margin-bottom: 6px;
  color: var(--brun-fournil, #7B4A21); }
.crp-note { width: 100%; resize: vertical; }
.crp-boutons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.crp-fini { text-align: center; padding: 12px 6px 4px; }
.crp-fini p { max-width: 46ch; margin: 0 auto 12px; line-height: 1.5; }
.crp-fini .btn { margin: 4px 6px; }

.odj-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  padding: 10px 14px;
  flex-wrap: wrap;
}
.odj-barre__titre { flex: 1; font-size: 14px; min-width: 140px; }
.odj-btn {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--blanc-chignon);
  border-radius: 7px;
  padding: 8px 15px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.odj-btn:hover { background: rgba(255, 255, 255, 0.14); }
.odj-btn--imprimer { background: var(--dore-levain); border-color: var(--dore-levain); color: var(--brun-croute); }
.odj-cadre { flex: 1; width: 100%; border: 0; background: #e8e4da; }

@media (max-width: 620px) {
  .odj-barre__titre { order: 3; flex-basis: 100%; font-size: 12px; }
  .odj-btn { flex: 1; text-align: center; }
}

/* ---------- Le compte rendu du week-end ---------- */
.ph-bloc--cr { border-left: 3px solid var(--vert-petri); }
.cr-rubriques { display: grid; gap: 14px; margin-top: 14px; }
.cr-bloc {
  border: 1px solid var(--creme-mie);
  border-radius: 8px;
  padding: 11px 13px;
  background: #fdfcf8;
}
.cr-bloc__tete { margin-bottom: 7px; }
.cr-bloc__nom { font-size: 13px; color: var(--brun-fournil); margin-right: 9px; }
.cr-bloc__quoi { font-size: 11px; color: var(--gris-texte); }
.cr-ajout { margin-top: 7px; }
.cr-ajout .champ { width: 100%; font-size: 13px; }

/* ---------- Comparé à N-1 (tableau de bord) ---------- */
.n1-bloc { margin-bottom: 16px; }
.n1-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.n1-onglets { margin-left: auto; }
.n1-corps { display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap; }
.n1-verdict {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 10px; min-width: 190px;
  background: var(--creme-fonce, #f3ead9);
  border-left: 4px solid var(--trait, #e7dcc8);
}
.n1-verdict--hausse, .n1-verdict.n1--hausse { border-left-color: #2c7a4b; }
.n1-verdict.n1--baisse { border-left-color: #a33b3b; }
/* pas d'année précédente : on montre « ? », pas un verdict inventé */
.n1-verdict.n1--neutre { border-left-color: #C88850; opacity: 0.85; }
.n1-verdict.n1--neutre .n1-verdict__fleche { color: #C88850; }
.n1-verdict__fleche { font-size: 26px; line-height: 1; }
.n1-verdict.n1--hausse .n1-verdict__fleche { color: #2c7a4b; }
.n1-verdict.n1--baisse .n1-verdict__fleche { color: #a33b3b; }
.n1-verdict__pct { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.n1-verdict__ecart { font-size: 13px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.n1-detail { flex: 1; min-width: 260px; }
.n1-periode { font-size: 14px; padding: 3px 0; }
.n1-periode strong { font-variant-numeric: tabular-nums; }
.n1-periode--n1 { opacity: 0.7; }
.n1-canal {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--trait, #e7dcc8); font-size: 13px;
}
.n1-canal__nom { flex: 1; min-width: 150px; opacity: 0.8; }
.n1-canal__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.n1-canal__n1 { opacity: 0.6; font-variant-numeric: tabular-nums; }
.n1-canal__ecart { font-weight: 600; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.n1-canal__ecart.n1--hausse { color: #2c7a4b; }
.n1-canal__ecart.n1--baisse { color: #a33b3b; }
.n1-note { font-size: 12.5px; opacity: 0.65; margin-top: 10px; line-height: 1.5; }

/* ---------- Les deux parties du carnet ---------- */
/* le conteneur des onglets est en ligne dans le reste du CRM : ici on
   veut deux bandes empilées, les natures puis les statuts */
#cli-onglets { display: block; }
.cli-natures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cli-nature {
  border: 1px solid var(--caramel-clair);
  background: #fff;
  border-radius: 10px;
  padding: 12px 15px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  line-height: 1.4;
}
.cli-nature:hover { border-color: var(--brun-fournil); }
.cli-natures-cases { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 0 4px; }
.cli-categorie--natures { background: var(--dore-doux, #F4E8CE); color: var(--brun-croute); }
.cli-nature__nom { font-size: 16px; color: var(--brun-fournil); margin-right: 8px; }
.cli-nature__n {
  background: var(--creme-mie);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 12px;
  color: var(--gris-texte);
}
.cli-nature__quoi { display: block; font-size: 11px; color: var(--gris-texte); margin-top: 4px; }
.cli-nature--active {
  background: var(--brun-fournil);
  border-color: var(--brun-fournil);
}
.cli-nature--active .cli-nature__nom { color: var(--blanc-chignon); }
.cli-nature--active .cli-nature__n { background: rgba(255,255,255,0.2); color: var(--blanc-chignon); }
.cli-nature--active .cli-nature__quoi { color: var(--caramel-clair); }

.cli-statuts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.onglet--archives { margin-left: auto; opacity: 0.8; }
.onglet--archives.onglet--actif { opacity: 1; }
.onglet__n { font-size: 11px; opacity: 0.7; margin-left: 4px; }

.cli-categorie {
  display: inline-block;
  background: var(--creme-mie);
  color: var(--brun-fournil);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 11px;
  margin-left: 6px;
}

/* ---------- Les journées types du planning ---------- */
.plan-shifts {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--creme-mie);
}
.plan-shifts__titre {
  font-size: 11px;
  color: var(--gris-texte);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-basis: 100%;
  margin-bottom: 2px;
}
.plan-shift {
  border: 1px solid var(--caramel-clair);
  background: #fff;
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--brun-fournil);
  cursor: pointer;
  line-height: 1.3;
  text-align: left;
}
.plan-shift:hover { background: var(--creme-mie); }
.plan-shift--on {
  background: var(--vert-petri);
  border-color: var(--vert-petri);
  color: #fff;
}
.plan-shift__fin { display: block; font-size: 10px; opacity: 0.75; }
.plan-duree {
  align-self: end;
  font-size: 13px;
  color: var(--vert-petri);
  padding-bottom: 8px;
  white-space: nowrap;
}

/* ---------- Dupliquer un créneau sur la semaine ---------- */
.plan-dupli {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
  margin-top: 10px;
  border-top: 1px solid var(--creme-mie);
}
.plan-dupli__titre { font-size: 13px; color: var(--gris-texte); }
.plan-dupli__jours { display: flex; gap: 4px; }
.plan-dupli__jour {
  border: 1px solid var(--caramel-clair);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--brun-fournil);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.plan-dupli__jour:hover { background: var(--creme-mie); }
.plan-dupli__jour input { margin: 0; cursor: pointer; }
.plan-dupli__jour--source {
  background: var(--creme-mie);
  opacity: 0.6;
  cursor: default;
}
.plan-dupli__bilan { font-size: 12px; color: var(--rose-sourire); flex-basis: 100%; }

/* ---------- Bilan après duplication ---------- */
.plan-bilan {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: 9px;
  padding: 10px 14px;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--brun-fournil);
}
.plan-bilan--alerte {
  background: #fdf0f0;
  border-color: var(--rose-sourire);
  color: var(--rose-sourire);
}
.plan-bilan__x {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- RGPD : note d'information (le petit cookie) ---------- */
.rgpd-note {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(40, 26, 14, 0.34);
  padding: 18px;
}
.rgpd-note__carte {
  display: flex; gap: 16px; align-items: flex-start;
  max-width: 620px; width: 100%;
  background: var(--creme, #fdf6e8);
  border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 14px 40px rgba(40, 26, 14, 0.3);
  max-height: 86vh; overflow-y: auto;
}
.rgpd-cookie { width: 58px; height: 58px; flex: 0 0 58px; }
.rgpd-note__titre { font-size: 18px; margin-bottom: 6px; }
.rgpd-note__texte p { margin: 0 0 9px; font-size: 14px; line-height: 1.55; }
.rgpd-note__texte .btn { margin-top: 4px; }
.rgpd-note__lien {
  border: none; background: none; cursor: pointer; padding: 6px 4px;
  font-size: 13px; text-decoration: underline; opacity: 0.7; color: inherit;
}
.rgpd-note__detail { margin-top: 10px; }
.rgpd-trait {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0; border-top: 1px solid var(--trait, #e7dcc8); font-size: 12.5px;
}
.rgpd-trait span { opacity: 0.72; }
.rgpd-note--geoloc .rgpd-note__carte { border-left: 4px solid var(--caramel, #b5803c); }
.rgpd-registre { margin-top: 14px; }
.piece-expire { display: block; margin-top: 6px; font-size: 12.5px; opacity: 0.8; }
.piece-expire .champ { max-width: 170px; margin-top: 3px; }

.photo-btn--danger { color: var(--rose-sourire); border-color: var(--rose-sourire); }
.photo-btn--danger:hover { background: #fdf0f0; }
.plan-bilan__x { margin-left: 0; }
.plan-bilan > span { flex: 1; }

/* =========================================================================
   Réclamations client (produit non conforme) — fenêtre de 2 jours
   ========================================================================= */
.rec-invite {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-carre);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rec-invite__delai { font-size: 12px; color: var(--caramel); }

.rec-acquis {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-carre);
  font-size: 12px;
  color: var(--caramel);
}

.rec-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-carre);
}
.rec-form__titre {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--brun-croute);
  margin-bottom: 8px;
}
.rec-lignes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rec-ligne { background: var(--creme-mie); border-radius: 10px; padding: 9px 12px; }
.rec-ligne--active { background: var(--dore-doux, #F4E8CE); }
.rec-ligne__livre { font-size: 11px; color: var(--caramel); }
.rec-ligne__details {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-left: 26px;
}
.rec-qte { width: 76px; text-align: center; }
.rec-ligne__details .champ:not(.rec-qte) { max-width: 260px; }

.rec-photos-zone { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-photos__aide { font-size: 12px; color: var(--caramel); }
.rec-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-photos img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 5px rgba(95, 55, 17, 0.2);
  background: var(--gris-carre);
}

.rec-bloc {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--creme-mie);
  border-left: 3px solid var(--dore-levain);
}
.rec-bloc--livree { border-left-color: var(--vert-petri, #7A9455); }
.rec-bloc--annulee { border-left-color: var(--rose-sourire); }
.rec-bloc__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: var(--brun-croute);
  margin-bottom: 8px;
}
.rec-bloc__corps { font-size: 13px; color: var(--gris-texte); line-height: 1.6; }
.rec-bloc__texte { margin-top: 6px; font-style: normal; }
.rec-bloc__reponse {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gris-carre);
  color: var(--brun-croute);
}

.rec-prerequis {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F7E4E4;
  color: var(--brun-croute);
  font-size: 13px;
  line-height: 1.5;
}

/* Réclamations côté OSMO (tableau de bord) */
.rec-dash {
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-carre);
}
.rec-dash:last-child { border-bottom: none; }
.rec-dash__tete { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.rec-dash__lignes { font-size: 13px; color: var(--brun-croute); line-height: 1.6; }
.rec-dash__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rec-dash__actions .champ { flex: 1; min-width: 200px; }

/* =========================================================================
   Suivi facturation — feu tricolore (rouge pas à jour, jaune en attente,
   vert prélevé)
   ========================================================================= */
.sfa-filtres { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.sfa-filtre {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1.5px solid var(--gris-carre);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--gris-texte);
  font-family: inherit;
  cursor: pointer;
}
.sfa-filtre--actif { border-color: var(--brun-croute); color: var(--brun-croute); }
.sfa-filtre__n { color: var(--caramel); }

.sfa-pastille {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  background: var(--gris-carre);
}
.sfa-pastille--rouge  { background: #C0392B; }
.sfa-pastille--jaune  { background: #E3A008; }
.sfa-pastille--vert   { background: #5C8A3C; }
.sfa-pastille--neutre { background: var(--gris-carre); }
.sfa-pastille--tous   { background: transparent; box-shadow: inset 0 0 0 2px var(--caramel); }

.sfa-ligne {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--creme-mie);
  border-left: 4px solid var(--gris-carre);
}
.sfa-ligne--rouge  { border-left-color: #C0392B; background: #FBEEEC; }
.sfa-ligne--jaune  { border-left-color: #E3A008; background: #FCF5E5; }
.sfa-ligne--vert   { border-left-color: #5C8A3C; background: #EFF4E9; }
.sfa-ligne--neutre { border-left-color: var(--gris-carre); }

.sfa-ligne__haut {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sfa-ligne__nom {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--brun-croute);
}
.sfa-ligne__montant {
  margin-left: auto;
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
  white-space: nowrap;
}
.sfa-ligne__detail { font-size: 12px; color: var(--caramel); margin-top: 4px; }
.sfa-ligne__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sfa-num { max-width: 220px; }

.sfa-badge {
  font-size: 10px;
  letter-spacing: 0.4px;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  color: #ffffff;
}
.sfa-badge--rouge  { background: #C0392B; }
.sfa-badge--jaune  { background: #E3A008; color: var(--brun-croute); }
.sfa-badge--vert   { background: #5C8A3C; }
.sfa-badge--neutre { background: var(--gris-carre); color: var(--gris-texte); }

.sfa-arrete {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gris-carre);
}
@media (max-width: 640px) {
  .sfa-ligne__montant { margin-left: 0; width: 100%; }
}

/* Heure de fin de marché réglable par jour (fiche du stand) */
.stand-jour__heure { width: 82px; margin: 0; padding: 2px 5px; font-size: 11px; }

/* Ouvrir un marché sans jour fixe pour une journée donnée (Marchés du jour) */
.mm-ouvrir-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.mm-ouvrir-form .champ { width: auto; min-width: 190px; }

/* ============================================================
   Marques et accès des contacts (18/08/2026)
   Une enseigne — Dose, Hello You — coiffe ses établissements dans le
   CRM ; chaque contact peut recevoir un accès en ligne dont la portée
   est indiquée sous la ligne.
   ============================================================ */

.cli-marque {
  background: var(--creme, #faf6ef);
  border: 1px solid var(--bordure, #e3d9c9);
  border-left: 3px solid var(--caramel, #b8813f);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
}
.cli-marque:hover { background: #f5efe3; }
.cli-marque--ouverte { margin-bottom: 2px; }
.cli-marque .cli-carte__nom { letter-spacing: .02em; }
.cli-marque__n,
.cli-marque__comptes {
  font-size: 12px;
  color: var(--brun-doux, #7a6a55);
  background: #fff;
  border: 1px solid var(--bordure, #e3d9c9);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
}
.cli-marque__membres {
  margin: 0 0 10px 14px;
  padding-left: 10px;
  border-left: 2px solid var(--bordure, #e3d9c9);
}

/* --- éditeur de contacts : identité, puis accès --- */
.cli-contact {
  display: block;
  border: 1px solid var(--bordure, #e3d9c9);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.cli-contact__identite,
.cli-contact__acces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cli-contact__identite > .champ { flex: 1 1 130px; min-width: 0; }
.cli-contact__acces { margin-top: 6px; }
.cli-contact__acces > .champ { flex: 1 1 150px; min-width: 0; }
.cli-contact__acces .champ:disabled { background: #f4f1ea; color: #a99e8c; }
.cli-contact__perimetre { margin-top: 6px; }
.cli-contact__quoi {
  margin-top: 5px;
  font-size: 12px;
  color: var(--brun-doux, #7a6a55);
}

/* --- espace client : établissement d'une ligne, et accès en lecture --- */
.ec-etab-tag {
  font-size: 12px;
  color: var(--brun, #4a3b28);
  background: var(--creme, #faf6ef);
  border: 1px solid var(--bordure, #e3d9c9);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: auto;
  margin-right: 6px;
}
body.ec-lecture .nav__item[data-vue="ec-commander"],
body.ec-lecture .nav__item[data-vue="ec-commandes"],
body.ec-lecture .nav__item[data-vue="ec-cadencier"] { display: none; }
body.ec-sans-bons .nav__item[data-vue="ec-bons"] { display: none; }
body.ec-sans-factures .nav__item[data-vue="ec-factures"] { display: none; }
/* CRM : les droits d'un contact, à cocher */
.cli-contact__ouvert { flex: 1 1 100%; margin: 2px 0 4px; }
.cli-contact__droits { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; padding: 8px 10px; background: var(--creme-mie, #FBF6EC); border-radius: 10px; }

@media (max-width: 700px) {
  /* LA CIBLE DU DOIGT (31/08/2026, vérifié à l'écran sur un iPhone).
     Joy s'utilise au fournil à trois heures du matin et sur un marché sous
     la pluie, les mains farineuses ou gantées. Des boutons de 23 px de haut
     se ratent une fois sur trois. On les remonte à 40 px sur téléphone
     seulement : sur l'ordinateur de la direction, rien ne bouge. */
  .photo-btn, .onglet, .btn-retour, .brf-lien {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .cli-nature { min-height: 44px; }

  .cli-contact__identite > .champ,
  .cli-contact__acces > .champ { flex: 1 1 100%; }
}

/* --- Devis & tarifs : outils de reprise des tarifs négociés --- */
.tarif-outils { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tarif-outil { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarif-outil > label { margin: 0; font-size: 13px; }
.tarif-outil .champ { width: auto; }
.tarif-outil #tarif-remise { width: 92px; }
.tarif-outil__aide { font-size: 12px; color: var(--caramel); }
.tarif-outil__marque {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--brun-croute);
  border-top: 1px solid #f3ead6; padding-top: 10px;
}
.tarif-outil__marque input { margin-top: 2px; }

/* =========================================================================
   Dossiers et accès clients (second onglet du CRM, 18/08/2026)
   ========================================================================= */

/* le carnet tient dans 760 px ; le tableau des dossiers, non */
.cli-colonne--large { max-width: 1180px; }

.dac-vues { margin-top: 10px; }
.dac-filtres { margin-top: 2px; }

.dac-entete { margin-bottom: 14px; }
.dac-compteurs { display: flex; flex-wrap: wrap; gap: 22px; }
.dac-compteur { font-size: 13px; color: var(--gris-texte); }
.dac-compteur__n {
  font-family: "Lora", Georgia, serif;
  font-size: 22px;
  color: var(--brun-fournil);
  margin-right: 4px;
}
.dac-compteur__quoi { display: block; font-size: 12px; color: var(--caramel); }
.dac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.dac-tableau { display: flex; flex-direction: column; gap: 8px; }

.dac-marque {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px 2px;
  font-family: "Lora", Georgia, serif;
  color: var(--brun-fournil);
}
.dac-marque__nom { font-size: 16px; }
.dac-marque__n { font-size: 12px; font-family: inherit; color: var(--caramel); }
.dac-marque__membres {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--caramel-clair);
  padding-left: 10px;
  margin-left: 12px;
}

.dac-ligne {
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-left: 3px solid var(--caramel-clair);
  border-radius: var(--rayon);
  padding: 10px 12px;
}
.dac-ligne--prete { border-left-color: var(--vert-petri); }

.dac-ligne__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dac-ligne__nom {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-fournil);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}
.dac-ligne__nom:hover { border-bottom-color: var(--dore-levain); }
.dac-ligne__etat { font-size: 12px; margin-left: auto; }
.dac-ligne__etat--ok { color: var(--vert-petri); }
.dac-ligne__etat--manque { color: var(--rose-sourire); }

.dac-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.dac-case,
.dac-champ {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gris-texte);
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 4px 11px;
}
.dac-case { cursor: pointer; }
.dac-case input { accent-color: var(--dore-levain); margin: 0; }
.dac-case--ok,
.dac-champ--ok { background: var(--vert-pese-fond); border-color: var(--vert-petri); }
.dac-champ__nom { color: var(--caramel); }
.dac-champ__val {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dac-input {
  font-size: 12px;
  padding: 3px 8px;
  max-width: 190px;
  border-radius: 999px;
}
.dac-input--ident { max-width: 170px; }

.dac-comptes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dac-compte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px dashed var(--caramel-clair);
  padding-top: 6px;
}
.dac-compte__qui { font-size: 13px; color: var(--brun-croute); min-width: 170px; }
.dac-compte__role { display: block; font-size: 11px; color: var(--caramel); }
.dac-pastille {
  font-size: 11px;
  color: var(--rose-sourire);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 9px;
}
.dac-pastille--ok { color: var(--vert-petri); }
.dac-btn { font-size: 12px; padding: 5px 12px; }
/* le mot de passe fabriqué, lisible le temps de l'envoyer */
.dac-clair {
  font-family: "Menlo", "Consolas", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brun-croute);
  background: var(--dore-levain);
  border-radius: 6px;
  padding: 3px 10px;
}

@media (max-width: 900px) {
  .dac-ligne__etat { margin-left: 0; width: 100%; }
  .dac-champ__val { max-width: 140px; }
  .dac-input, .dac-input--ident { max-width: 100%; flex: 1 1 130px; }
}

/* --- descente des quantités arrêtées : d'où vient le chiffre du fournil --- */
.prod-chiffre--arrete {
  background: var(--creme-mie);
  border-left-color: var(--brun-fournil);
}
.suivi-arrete { margin-left: 6px; }

/* =========================================================================
   Commandes : état des cadenciers, correction des lignes, suppression
   ========================================================================= */
.cmd-etat-cad {
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: var(--rayon);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--gris-texte);
}
.cmd-etat-cad__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.cmd-etat-cad__ligne--faite { color: var(--vert-petri, #6F8A4F); }
.cmd-etat-cad__ligne--reste { color: var(--brun-croute); }
.cmd-etat-cad__btn { padding: 3px 10px; font-size: 12px; }
.cmd-etat-cad__manque {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--caramel-clair);
  font-size: 12px;
  color: var(--caramel);
}

.cmd-lignes .cmd-qte { width: 64px; padding: 3px 5px; font-size: 13px; }
.cmd-lignes__x { text-align: right; width: 28px; }
.cmd-ajout-ligne { display: flex; gap: 8px; margin-top: 8px; }
.cmd-ajout-ligne .champ { max-width: 220px; }

.cmd-supprimer__btn { color: var(--rose-sourire); }

/* =========================================================================
   Prise de commande : produits impossibles à pétrir, recherche client
   ========================================================================= */
.produit--ferme .produit__nom,
.produit--ferme .produit__desc { text-decoration: line-through; opacity: 0.6; }
.produit--ferme .produit__prix { opacity: 0.6; }
.pdc-delai { font-size: 11px; color: var(--rose-sourire); margin-top: 3px; }
.pdc-recherche { margin-bottom: 5px; }
.pdc-reprendre { width: 100%; margin-bottom: 8px; font-size: 12px; }

/* --- Semaine de pointages : ce qui a été badgé, ce qui a été rattrapé --- */
.pt-bloc { margin-top: 16px; }
.pt-table { min-width: 980px; }
.pt-case { min-width: 130px; font-size: 12px; }
.pt-case--editable { cursor: pointer; }
.pt-case--editable:hover { background: var(--creme); }
.pt-rien { color: var(--gris-texte); }
.pt-prevu { display: block; font-size: 11px; color: var(--gris-texte); margin-bottom: 3px; }
.pt-badge {
  display: block;
  background: color-mix(in srgb, var(--vert-petri) 10%, #fff);
  border-left: 3px solid var(--vert-petri);
  border-radius: 5px;
  padding: 4px 6px;
  margin-bottom: 4px;
}
.pt-badge--repris {
  background: var(--creme-mie);
  border-left-color: var(--caramel);
}
.pt-badge__h { display: block; }
.pt-trace { display: block; font-size: 11px; color: var(--gris-texte); }
.pt-manque {
  display: block;
  font-size: 11px;
  color: var(--rose-sourire);
  border: 1px solid currentColor;
  border-radius: 10px;
  padding: 1px 7px;
  margin-top: 3px;
}
.pt-form__etat { font-size: 12px; color: var(--gris-texte); margin-top: 6px; }

/* Prix public affiché à côté du tarif pro dans la fiche produit (OSMO).
   Dans Joy, c'est l'inverse : le prix du carreau prend toute la place. */
.fiche__prix-public {
  display: block;
  font-size: 12px;
  color: var(--caramel, #C88850);
  margin-top: 2px;
}

/* Preuve de dépôt qui n'a pas pu être partagée (photo d'avant la
   synchronisation des photos, ou quota localStorage saturé) : elle existe,
   mais seulement ici. Voir PHOTO_LIVR_PREFIXE dans js/livraison.js. */
.livr-photo-locale { font-size: 11px; color: var(--gris-texte); margin-top: 3px; }

/* Commande enregistrée mais pas encore parvenue à la boulangerie : le
   client doit voir la différence au premier coup d'œil, sinon il repart
   en croyant sa commande passée. */
.pdc-confirmation--souci {
  border-left: 4px solid var(--rose-sourire, #E26666);
  background: #FFF4F4;
}

/* CRM : la fiche s'enregistre à la volée (demande Sacha 18/08/2026).
   L'indicateur remplace le bouton Enregistrer — discret quand tout va
   bien, en rose quand une saisie empêche l'enregistrement. */
.cli-auto {
  font-size: 12px;
  color: var(--gris-texte);
  padding: 8px 10px;
  border-left: 3px solid var(--dore-levain, #F3BF4C);
  background: rgba(243, 191, 76, 0.10);
  border-radius: 6px;
}
.cli-auto--souci {
  border-left-color: var(--rose-sourire, #E26666);
  background: rgba(226, 102, 102, 0.10);
  color: var(--brun-croute, #5F3711);
}

/* Espace client — Mes commandes par semaine (demande Sacha 20/08/2026) :
   flèches de navigation, copier/coller la semaine, correction d'une
   commande encore en attente de confirmation. */
.ec-sem-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 10px 12px;
  background: #fff; border-radius: 10px;
}
.ec-sem-nav__titre { font-family: Lora, Georgia, serif; font-size: 15px; color: var(--brun-fournil); }
.ec-sem-nav__sep { flex: 1; }
.ec-cmd-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ec-cmd-ajout { margin-top: 8px; max-width: 340px; }
.ec-edit-qte { width: 84px; }
.ec-ligne--figee td { color: var(--gris-texte); opacity: 0.75; }

/* Regroupement des grilles tarifaires par marque (18/08/2026) */
.tarif-fusion { border-left: 3px solid var(--caramel, #b8813f); }
.tarif-fusion ul { margin: 6px 0 8px; padding-left: 18px; }
.tarif-fusion li { margin-bottom: 3px; }
.tarif-outil__marque {
  display: block;
  font-size: 13px;
  color: var(--brun-doux, #7a6a55);
  background: var(--creme, #faf6ef);
  border: 1px solid var(--bordure, #e3d9c9);
  border-radius: 8px;
  padding: 8px 10px;
}

/* ---------- Coût de revient et marges (direction, OSMO seulement) ---------- */
.cout-absente td { opacity: 0.72; }
.cout-marge { font-weight: 700; font-variant-numeric: tabular-nums; }
.cout-marge--ok { color: #2c7a4b; }
.cout-marge--basse { color: #a33b3b; }
.cout-seuil { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cout-seuil .champ { width: 68px; }
.cout-historique { padding: 6px 0 2px; }
.cout-histo__ligne {
  display: flex; align-items: baseline; gap: 12px;
  padding: 5px 0; border-top: 1px solid var(--trait, #e7dcc8); font-size: 13px;
}
.cout-histo__ligne strong { font-variant-numeric: tabular-nums; min-width: 90px; }
/* la marge sur la fiche produit du catalogue */
.fiche__marge {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--trait, #e7dcc8);
  font-size: 12.5px;
}
.fiche__marge__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.fiche__marge__cout { opacity: 0.6; margin-left: auto; font-variant-numeric: tabular-nums; }
.fiche__marge--inconnue { opacity: 0.55; font-style: normal; }
/* le gros ? des marges incalculables : visible de loin, il dit « pose tes
   prix d'achat » sans risquer d'être pris pour un zéro */
.cout-marge-inconnue {
  display: inline-block; font-size: 19px; font-weight: 800; line-height: 1;
  color: #a06a1f; cursor: help;
}
/* lignes d'une facture fournisseur ouverte dans Coût de revient > Factures */
.cout-facture { padding: 10px 6px 4px; border-top: 2px solid var(--trait, #e7dcc8); }
.cout-facture .champ { max-width: 320px; }

/* ---------- Congés ---------- */
.conge-rappel {
  background: var(--creme-mie);
  border-left: 3px solid var(--dore-levain);
  border-radius: 0 8px 8px 0;
  padding: 11px 15px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.5;
}
.conge-form { margin-bottom: 16px; }
.conge-form__champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 10px 0;
}
.conge-form__champs label,
.conge-form__com { display: block; font-size: 12px; color: var(--gris-texte); }
.conge-form__com { margin-top: 10px; }
.conge-note {
  font-size: 12px;
  color: var(--brun-fournil);
  background: var(--creme-mie);
  border-radius: 7px;
  padding: 7px 11px;
  margin-bottom: 8px;
}
.conge-demi { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gris-texte); }
.conge-demi input { margin: 0; }
.conge-form__bilan { font-size: 13px; color: var(--brun-fournil); margin: 10px 0 4px; }
.conge-form__bilan--erreur { color: var(--rose-sourire); }

.conge-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.conge-carte {
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-left-width: 3px;
  border-radius: 9px;
  padding: 12px 15px;
  line-height: 1.5;
}
.conge-carte .conge-carte { border: none; padding: 0; background: none; }
.conge-carte__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conge-carte__type { font-size: 15px; color: var(--brun-fournil); }
.conge-carte__qui { font-size: 12px; color: var(--gris-texte); }
.conge-carte__quand { font-size: 13px; color: var(--gris-texte); margin-top: 3px; }
.conge-carte__com,
.conge-carte__motif,
.conge-carte__reponse { font-size: 12px; color: var(--gris-texte); margin-top: 4px; }
.conge-carte__motif { color: var(--rose-sourire); }

.conge-statut {
  margin-left: auto;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  background: var(--creme-mie);
  color: var(--gris-texte);
}
.conge--attente { border-left-color: var(--dore-levain); }
.conge--attente .conge-statut { background: var(--dore-levain); color: var(--brun-croute); }
.conge--acceptee { border-left-color: var(--vert-petri, #6B8E5A); }
.conge--acceptee .conge-statut { background: var(--vert-petri, #6B8E5A); color: #fff; }
.conge--refusee { border-left-color: var(--rose-sourire); }
.conge--refusee .conge-statut { background: var(--rose-sourire); color: #fff; }
.conge--annulee { border-left-color: var(--caramel-clair); opacity: 0.7; }

.conge-effectif {
  font-size: 12px;
  color: var(--gris-texte);
  background: var(--creme-mie);
  border-radius: 7px;
  padding: 8px 12px;
  margin: 10px 0;
}
.conge-effectif--alerte { background: #fdf0f0; color: var(--rose-sourire); }
.conge-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conge-refus { margin-top: 8px; }
.conge-refus label { display: block; font-size: 12px; color: var(--gris-texte); }

.nav__pastille {
  display: inline-block;
  margin-left: 7px;
  background: var(--rose-sourire);
  color: #fff;
  border-radius: 20px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 17px;
}
/* ---------- Coût complet (phase 2 du coût de revient) ---------- */
.cc-cap { display: flex; align-items: center; gap: 18px; }
.cc-cap__chiffre { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-cap--ok .cc-cap__chiffre { color: #2c7a4b; }
.cc-cap--bas .cc-cap__chiffre { color: #a33b3b; }
.cc-cible, .cc-horaire { width: 58px; display: inline-block; text-align: center; }
.cc-famille { padding: 10px 0; border-top: 1px solid var(--trait, #e7dcc8); }
.cc-famille__nom { font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.cc-famille__mode { display: flex; gap: 18px; margin: 6px 0 4px; font-size: 13.5px; }
.cc-famille__mode label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.cc-externes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cc-manuels { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--trait, #e7dcc8); }
.cc-manuels .champ { width: 70px; }
.cc-minutes { width: 64px; }
.cout-marge--tiede { color: #a06a1f; font-weight: 700; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Ventes marchés — la semaine des marchés (tableau et seuils d'alerte)
   et bandeau « Ton stand » de l'écran vendeur (Marchés du jour)
   ========================================================================= */
.vm-seuils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--caramel);
  margin-bottom: 10px;
}
.vm-seuils .champ { width: auto; }
.vm-seuil-pct { width: 64px; }
.vm-sem-defile { overflow-x: auto; }
.vm-sem-table td { vertical-align: top; }
.vm-sem-table th:nth-child(3), .vm-sem-table td:nth-child(3) { min-width: 220px; }
.vm-sem-total { font-size: 15px; color: var(--brun-fournil); font-variant-numeric: tabular-nums; }
.vm-sem-detail { font-size: 11px; color: var(--caramel); margin-top: 2px; }
.vm-sem-vide { color: var(--gris-texte); opacity: 0.7; }
/* rupture avant le seuil : le marché en manquait */
.vm-sem--rupture td { background: #F7E4E4; }
/* invendus au-delà du seuil : on en envoie trop */
.vm-sem--invendus td { background: #F4E8CE; }
.vm-sem--rupture.vm-sem--invendus td { background: linear-gradient(90deg, #F7E4E4, #F4E8CE); }

.mm-stand {
  margin-bottom: 12px;
  border: 1px solid var(--caramel-clair);
  border-radius: var(--rayon);
  background: #fff;
  overflow: hidden;
}
.mm-stand__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: var(--creme-mie);
  color: var(--brun-fournil);
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.mm-stand__chevron { color: var(--caramel); font-size: 11px; }
.mm-stand__corps { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }
.mm-stand__photo { width: 132px; height: 99px; object-fit: cover; border-radius: 6px; flex: none; }
.mm-stand__infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.mm-stand__lien { display: inline-block; text-decoration: none; }
.mm-stand__vide { font-size: 12px; color: var(--gris-texte); opacity: 0.8; }
.mm-stand__notes { font-size: 12px; color: var(--gris-texte); white-space: pre-wrap; }

/* ---------- Congélateur : achat-revente et corrections (lot congelateur) ---------- */
.congel-carte--achat { border-left: 3px solid var(--rose-sourire, #e58f9d); }
.congel-fournisseur { font-size: 12px; color: var(--gris-texte); margin: -6px 0 10px; }

/* ---------- Clients à rappeler (Suivi commercial) et devis à relancer ---------- */
.rappel-bloc { margin-bottom: 16px; }
.rappel-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rappel-seuils { font-size: 12.5px; color: var(--gris-texte); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rappel-nombre { width: 62px; text-align: center; }
.rappel-ligne { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--trait, #e7dcc8); }
.rappel-ligne__nom { font-weight: 700; color: var(--brun-croute, #5F3711); }
.rappel-ligne__detail { font-size: 12.5px; color: var(--gris-texte); margin-top: 2px; }
.rappel-ligne__raison { font-size: 13px; color: var(--rose-sourire, #C4526A); margin-top: 2px; }
.rappel-ligne__contact { text-align: right; font-size: 13px; color: var(--gris-texte); flex-shrink: 0; }
.rappel-ligne__contact a { color: var(--brun-croute, #5F3711); font-weight: 700; text-decoration: none; }

.devis-relance { margin-bottom: 14px; border-left: 4px solid var(--dore-levain, #E0A94F); }
.devis-relance__titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 700; color: var(--brun-croute, #5F3711); }
.devis-relance__reglage { font-size: 12.5px; font-weight: 400; color: var(--gris-texte); display: flex; align-items: center; gap: 5px; }
.devis-relance__reglage .champ { width: 62px; text-align: center; }
.devis-relance__ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--trait, #e7dcc8); cursor: pointer; }
.devis-relance__ligne:hover { background: var(--creme-mie, #FAF3E7); }
.devis-relance__quoi { font-weight: 600; }
.devis-relance__pourquoi { font-size: 12.5px; color: var(--rose-sourire, #C4526A); margin-top: 2px; }
.devis-relance__ouvrir { font-size: 12.5px; color: var(--gris-texte); flex-shrink: 0; }


/* =========================================================================
   Point hebdo — décisions et actions à suivre (quoi, qui, pour quand).
   Notées après la réunion, elles reviennent en tête de l'ordre du jour
   suivant tant qu'elles ne sont pas cochées faites, et chacun voit en
   ouvrant son écran ce qui lui a été confié.
   ========================================================================= */
.ph-bloc--decisions { border-left: 3px solid var(--caramel); }
.ph-bloc--actions { border-left: 3px solid var(--rose-sourire); }

.ph-dec-titre {
  font-size: 11px;
  color: var(--brun-fournil);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 14px 0 2px;
  border-bottom: 1px solid var(--creme-mie);
  padding-bottom: 3px;
}

.ph-dec-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.ph-dec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.ph-dec__fait {
  width: 17px;
  height: 17px;
  accent-color: var(--brun-fournil);
  cursor: pointer;
  flex: 0 0 auto;
}
.ph-dec__texte { flex: 1 1 220px; }
.ph-dec__qui { flex: 0 1 180px; }
.ph-dec__quand { flex: 0 1 150px; }
.ph-dec__quand--retard { border-color: var(--rose-sourire); color: var(--rose-sourire); }
.ph-dec__sem {
  background: var(--creme-mie);
  border-radius: 20px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--gris-texte);
  white-space: nowrap;
}
.ph-dec--faite .ph-dec__texte {
  text-decoration: line-through;
  color: var(--gris-texte);
  opacity: 0.6;
}
.ph-dec__libelle { flex: 1 1 auto; font-size: 14px; color: var(--gris-texte); }
.ph-dec__meta { font-size: 11px; color: var(--caramel); white-space: nowrap; }
.ph-dec__retard {
  font-size: 11px;
  color: var(--blanc-chignon);
  background: var(--rose-sourire);
  border-radius: 20px;
  padding: 0 8px;
  white-space: nowrap;
}
.ph-dec-ajout { border-top: 1px solid var(--creme-mie); padding-top: 12px; margin-bottom: 0; }
.ph-dec-ajout .champ { flex: 1 1 240px; }
.ph-dec-ajout .ph-dec-ajout__qui { flex: 0 1 180px; }
.ph-dec-ajout .ph-dec-ajout__quand { flex: 0 1 150px; }

/* ---------- RH : heures du mois, absences sur la grille du planning,
   « Fait le planning de » (lot rh-heures-absences, 20/08/2026) ---------- */
.plan-case--absence { background: repeating-linear-gradient(-45deg, #f1ebdd, #f1ebdd 7px, #e9e1cf 7px, #e9e1cf 14px); }
.plan-absence { display: inline-block; margin: 3px 3px 0; padding: 2px 8px; border-radius: 999px;
  background: var(--gris-carre); color: var(--brun-fournil); font-size: 10px; white-space: nowrap; }
.paie-table { min-width: 860px; }
.paie-heures { font-size: 11px; }
.paie-heures__l { display: block; white-space: nowrap; }
.paie-heures__ecart--plus { color: #a06a1f; font-weight: 700; }
.paie-heures__ecart--moins { color: var(--rose-sourire); font-weight: 700; }
.paie-nom--cliquable { cursor: pointer; }
.paie-nom--cliquable:hover { background: var(--creme-mie); }
.paie-jours > td { background: #fdfaf1; padding: 6px 10px 12px; }
.paie-jours__table { border-collapse: collapse; font-size: 11px; }
.paie-jours__table th, .paie-jours__table td { padding: 3px 14px 3px 0; text-align: left;
  border-bottom: 1px solid var(--creme-mie); font-variant-numeric: tabular-nums; }
.paie-jours__ecart--plus { color: #a06a1f; }
.paie-jours__ecart--moins { color: var(--rose-sourire); }
.rh-planifie { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
  padding: 8px 10px; border: 1px solid var(--creme-mie); border-radius: var(--rayon); }
.rh-planifie__titre { font-size: 12px; font-weight: 700; color: var(--brun-fournil); }
.rh-planifie__case { margin: 0; }
.rh-planifie__note { flex-basis: 100%; font-size: 11px; color: var(--caramel); }

/* ---------- Coller la balance du mois (onglet Bilan mensuel, js/bilans.js) ---------- */
.bal-lignes {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--trait, #e7dcc8);
  border-radius: 10px;
  margin: 10px 0;
}
.bal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bal-table td { padding: 5px 10px; border-bottom: 1px solid var(--trait, #e7dcc8); vertical-align: middle; }
.bal-table tr:last-child td { border-bottom: none; }
.bal-table .champ { width: auto; max-width: 260px; padding: 4px 8px; font-size: 13px; }
.bal-compte { font-variant-numeric: tabular-nums; color: var(--brun-croute); white-space: nowrap; }
.bal-montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-montant--negatif { color: var(--rose-sourire); }
.bal-sans-libelle { color: var(--caramel); }
.bal-totaux { margin: 10px 0 14px; }
.bal-totaux table { border-collapse: collapse; }
.bal-totaux td { padding: 2px 14px 2px 0; font-size: 13px; }
.bal-totaux .bal-total td { border-top: 1px solid var(--trait, #e7dcc8); padding-top: 6px; font-weight: 600; }

/* ---------- Règlements clients : résumé par client, relances, numéros Tiime ---------- */
.rel-panneau {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--gris-carre);
  border-radius: 10px;
  background: var(--creme-mie);
}
.rel-niveaux { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.rel-factures { margin: 8px 0; font-size: 13px; color: var(--brun-croute); }
.rel-factures div { padding: 2px 0; }
.rel-texte { min-height: 240px; font-family: inherit; }
.rel-apercu {
  white-space: pre-wrap;
  background: #fff;
  border: 1px solid var(--gris-carre);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0;
}
.sfa-nums { margin-bottom: 14px; }
.sfa-nums .ica-texte { min-height: 110px; }
.sfa-nums-table { border-collapse: collapse; margin-bottom: 6px; }
.sfa-nums-table td { padding: 2px 10px 2px 0; font-size: 13px; }

/* ---------- Production & pilotage : propositions OSMO, Réglages du fournil,
   stock de matières premières (un seul bloc, ajouté en fin de fichier) ---------- */

/* Propositions d'OSMO (invendus, ruptures) : même langage que les demandes
   de vendeurs, avec une teinte à elles pour distinguer qui parle */
.qte-suggestions--osmo { background: #f2f5ec; border-color: #c9d4b4; }
.qte-sugg--osmo .qte-sugg__appliquer { border-color: #c9d4b4; }
.qte-sugg-item--osmo { border-color: #c9d4b4; }

/* Réglages du fournil */
.regf .regf-petrin {
  border: 1px solid var(--beige-fonce, #e0d8c4);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  background: #fff;
}
.regf-petrin__tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.regf-nom { width: 220px; }
.regf-sous { flex: 1; min-width: 220px; }
.regf-attention { font-size: 12.5px; color: var(--rose-sourire, #a33b3b); margin-top: 6px; }
.regf-pains { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.regf-pain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--beige-fonce, #e0d8c4);
  background: #fff;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12.5px;
  cursor: pointer;
}
.regf-pain--coche { border-color: var(--vert-petri); background: var(--vert-pese-fond); }
.regf-pain--ailleurs { opacity: 0.55; }
.regf-manque { font-size: 11px; color: var(--rose-sourire, #a33b3b); }
.regf-ligne { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.regf-ligne label { font-size: 13px; color: var(--gris-texte); min-width: 260px; }
.regf-nombre { width: 90px; text-align: right; }
.regf-exception__nom { min-width: 160px; font-size: 13.5px; }
.regf-levain { border-top: 1px solid var(--trait, #e7dcc8); padding-top: 8px; margin-top: 8px; }
.regf-levain__nom { font-size: 14px; margin-bottom: 4px; }

/* Stock et commandes de matières premières */
.stock-table { margin-top: 22px; }
.stock-table td { vertical-align: middle; }
.stock-kg { width: 74px; text-align: right; }
.stock-jours { width: 58px; text-align: right; }
.stock-texte { width: 150px; }
.stock-nombre { white-space: nowrap; }
.stock-livraison { display: inline-flex; gap: 4px; align-items: center; }
.stock-verdict { font-size: 12.5px; max-width: 320px; }
.stock-verdict--commander { color: #a33b3b; }
.stock-verdict--seuil { color: #a06a1f; }
.stock-verdict--ok { color: var(--gris-texte); }
.stock-ligne--commander td:first-child { box-shadow: inset 3px 0 0 #a33b3b; }
.stock-ligne--seuil td:first-child { box-shadow: inset 3px 0 0 #d9a441; }
.stock-vide { font-size: 13px; color: var(--gris-texte); padding: 10px; }
.stock-ajout { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.stock-ajout .champ { max-width: 340px; }
.stock-note { font-size: 12px; color: var(--gris-texte); flex-basis: 100%; }

/* =========================================================================
   Lot livraison et nuit (20/08/2026) : soucis de tournée (« Un souci »),
   Ma tournée des livreurs de la maison, bloc « La nuit du fournil »
   ========================================================================= */
.souci-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.souci-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--rose-sourire);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--brun-croute);
}
.souci-item__texte { flex: 1 1 auto; min-width: 0; }
.souci-item__meta { color: var(--gris-texte); font-size: 11px; margin-left: 6px; white-space: nowrap; }
.souci-item__photo {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
}
.souci-form { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; }
.souci-form .souci-qte { flex: 0 0 auto; width: 82px; min-width: 0; }
.souci-ouvrir { border-color: var(--rose-sourire); color: var(--rose-sourire); }

.tmaison-camion {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  color: var(--brun-croute);
  margin: 4px 0 12px;
}
.tmaison-etape { font-size: 11.5px; color: var(--gris-texte); margin-top: 2px; }
.tmaison-vendeur { display: block; margin-top: 5px; font-size: 13px; color: var(--brun-fournil); }
.tmaison-passage {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  color: var(--brun-croute);
  margin: 14px 0 8px;
}

.dash-nuit { margin-bottom: 18px; }

/* ---------- Remise d'un fichier quand le téléchargement est impossible ---------- */
.export-cadre {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--creme-mie);
  display: flex;
  flex-direction: column;
}
.export-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--brun-fournil);
  flex-wrap: wrap;
}
.export-barre__nom { color: var(--blanc-chignon); font-size: 14px; margin-right: auto; }
.export-mot {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.6;
  background: #fff;
  border-bottom: 1px solid var(--caramel-clair);
}
.export-contenu {
  flex: 1;
  width: 100%;
  border: none;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gris-texte);
  background: #fff;
  resize: none;
  white-space: pre;
}


/* ================= Bienvenue espace client =================
   Voile crème, carte qui se pose en douceur, trois « miettes » qui
   flottent — puis tout s'efface. Aucun clic bloqué : pointer-events none. */
#ec-bienvenue {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 246, 240, 0.92);
  pointer-events: none;
  animation: ecb-voile 0.5s ease-out;
}
#ec-bienvenue.ec-bienvenue--sortie { opacity: 0; transition: opacity 0.8s ease; }
.ec-bienvenue__carte {
  text-align: center;
  animation: ecb-carte 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ec-bienvenue__logo {
  width: 92px; height: auto; margin-bottom: 14px;
  animation: ecb-logo 1.6s ease-in-out infinite alternate;
}
.ec-bienvenue__bonjour {
  font-family: "Lora", Georgia, serif;
  font-size: 34px; font-weight: 600; color: #6b4423;
}
.ec-bienvenue__mot {
  margin-top: 6px; font-size: 15px; color: #8a7361;
}
.ec-bienvenue__miettes { margin-top: 16px; }
.ec-bienvenue__miettes span {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #c89b6d; margin: 0 5px;
  animation: ecb-miette 1.1s ease-in-out infinite;
}
.ec-bienvenue__miettes span:nth-child(2) { animation-delay: 0.18s; }
.ec-bienvenue__miettes span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ecb-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecb-carte {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ecb-logo { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes ecb-miette {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(-7px); opacity: 1; }
}
/* préférence système « réduire les animations » : on respecte */
@media (prefers-reduced-motion: reduce) {
  #ec-bienvenue, .ec-bienvenue__carte, .ec-bienvenue__logo,
  .ec-bienvenue__miettes span { animation: none; }
}


/* ================= Retrait d'une commande (espace client) ================= */
.ec-btn-retirer { color: #a33; border-color: #d9b8b8; }
.ec-btn-retirer:hover { background: #fbeeee; }

/* ================= Barre d'établissements (multi-sites) =================
   En tête du contenu, sur tous les écrans de l'espace client : le patron
   passe de Batignolles à Lamarck d'un seul appui. */
#ec-etab-barre {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 26px; background: #f7f1e8;
  border-bottom: 1px solid #e5d9c8;
}
.ec-etab-barre__mot { font-size: 12px; color: #8a7361; margin-right: 2px; }
.ec-etab-pastille {
  border: 1px solid #d8c7ae; background: #fff; color: #6b4423;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ec-etab-pastille:hover { background: #fbf6ee; }
.ec-etab-pastille--actif {
  background: #6b4423; border-color: #6b4423; color: #fff; cursor: default;
}
/* l'aperçu du PDF d'une facture fournisseur, dans Coût de revient > Factures */
.cout-fact-apercu { width: 100%; height: 620px; border: 1px solid var(--trait, #e7dcc8); border-radius: 8px; background: #fff; }

/* Jauge de remplissage — écran « État de cet appareil » (Administratif).
   Dit d'un coup d'œil combien de place le site occupe dans le navigateur :
   sur un téléphone, la limite est basse et c'est elle qui a fait
   disparaître les factures le 21/08/2026. */
.ec-jauge {
  margin-top: 6px;
  height: 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}
.ec-jauge > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8a5a2b, #c08a4a);
}

/* Écran Coût de revient > Factures : filtre « celles à traiter » et
   pastille d'alerte quand une facture attend un rattachement. */
.cout-filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--brun-croute);
  cursor: pointer;
  user-select: none;
}
.cout-filtre input { accent-color: var(--miel); width: 15px; height: 15px; cursor: pointer; }
.cout-marge--alerte { color: #a3552b; font-weight: 600; }

/* =========================================================================
   JOY — pavé à quatre chiffres (26/08/2026)
   Des touches faites pour un pouce fariné : grandes, espacées, pleines. Le
   même écran sert à entrer le matin et à reprendre la main après la minute
   de veille, d'où le voile plus dense dans ce second cas — derrière lui,
   l'application est toujours là.
   ========================================================================= */
.pave-joy {
  position: fixed;
  inset: 0;
  /* Au-dessus de TOUT. Un voile de verrouillage qui passerait sous un autre
     calque — une note RGPD, un document ouvert en plein écran, l'écran de
     bienvenue — ne verrouillerait rien : le suivant verrait, et pourrait
     toucher, ce que le précédent avait laissé. Le plus haut de l'application
     était 12000 ; on se place franchement au-dessus. */
  z-index: 999999;
  background: var(--creme-mie);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pave-joy--veille { background: color-mix(in srgb, var(--brun-fournil) 92%, #000); }
.pave-joy__carte {
  background: #fff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-carte);
  padding: 28px 30px 32px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.pave-joy__carte--refus { animation: pave-joy-refus 0.4s; }
@keyframes pave-joy-refus {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.pave-joy__phrase { font-size: 13px; color: var(--caramel); margin-top: 4px; }
.pave-joy__points {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 6px;
}
.pave-joy__point {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--beige-fonce);
  background: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.pave-joy__point--plein { background: var(--dore-levain); border-color: var(--dore-levain); }
.pave-joy__erreur {
  font-size: 12px;
  color: var(--rose-sourire);
  min-height: 16px;
  margin-bottom: 4px;
}
.pave-joy__touches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.pave-joy__touche {
  font-family: "Lora", Georgia, serif;
  font-size: 24px;
  color: var(--brun-croute);
  background: var(--creme);
  border: 1px solid var(--beige-fonce);
  border-radius: 12px;
  padding: 16px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.pave-joy__touche:active { background: var(--dore-levain); color: #fff; }
.pave-joy__touche--effacer { font-size: 19px; color: var(--caramel); }
@media (max-width: 400px) {
  .pave-joy__carte { padding: 22px 18px 26px; }
  .pave-joy__touche { padding: 14px 0; font-size: 22px; }
}

/* Les salariés encore sans code Joy : tant qu'il en reste un, il ne peut
   pas entrer — plus aucun identifiant ne le rattrape */
.acces-alerte {
  background: var(--rose-fond, #FBE9E7);
  border: 1px solid var(--rose-sourire, #C97B6B);
  color: var(--rose-sourire, #C97B6B);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.acces-code { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Le code se lit derrière un œil, comme un mot de passe partout ailleurs */
.acces-code__saisie { position: relative; display: inline-block; }
.acces-code__saisie .champ { padding-right: 34px; }
.acces-code__oeil {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}
.acces-code__oeil:hover, .acces-code__oeil--actif { opacity: 0.9; }
.acces-code__perdu { font-size: 11px; color: var(--rose-sourire); }
.acces-code__champ { width: 112px; letter-spacing: 3px; text-align: center; }
.acces-code__champ::placeholder { letter-spacing: 0; font-size: 12px; }

/* Le réglage du verrouillage vit dans la note d'entête des accès */
.acces-veille { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.acces-veille label { font-size: 12px; color: var(--caramel); }
.acces-veille .champ { width: auto; min-width: 210px; }

/* Le code qui vient d'être donné reste écrit à côté du nom, jusqu'à ce que
   la direction dise l'avoir noté : il ne sera plus jamais réaffiché */
.acces-code__vu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vert-doux, #EAF1DF);
  color: var(--vert-petri, #7A9455);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
.acces-code__vu strong { font-size: 15px; letter-spacing: 2px; }

/* Le pavé pendant que le serveur répond : on le dit, sinon on retape */
.pave-joy__carte--attente .pave-joy__touches { opacity: 0.4; pointer-events: none; }
.pave-joy__carte--attente .pave-joy__phrase::after {
  content: " · vérification…";
  color: var(--dore-levain);
}

/* Le rappel affiché en tête du panier : d'où vient ce qui est déjà là —
   la commande du jour, ou le cadencier du client (demande Sacha 28/08/2026). */
.ec-cad-rappel {
  background: var(--creme-mie, #FBF6E3);
  border-left: 3px solid var(--dore-levain, #F3BF4C);
  border-radius: 6px;
  padding: 8px 11px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gris-texte, #4A4A4A);
}
/* la date a bougé toute seule : le rappel doit accrocher l'œil */
.ec-cad-rappel--attention {
  border-left-color: #C0691F;
  background: #FDF0E2;
  font-weight: 600;
}

/* Tranché ou entier, choisi sur la carte produit de l'espace client. */
.ec-tranche { display: flex; align-items: center; gap: 8px; margin-top: 7px;
  padding-top: 7px; border-top: 1px dashed var(--caramel-clair, #E3B584); }
.ec-tranche__case { display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.ec-tranche__mm { width: auto; padding: 3px 6px; font-size: 13px; }
.ec-tranche__mm[disabled] { opacity: .45; }
.pligne__tranche { font-size: 12px; color: var(--caramel, #C88850); font-weight: 600; }
/* la consigne de tranchage, visible de loin (préparateur, livreur, fournil) */
.tranche-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; letter-spacing: .3px;
  background: #C0392B; color: #ffffff; white-space: nowrap;
}
@media print { .tranche-badge { border: 1.5px solid #000; color: #000; background: none; } }
/* tranchage au panier de la prise de commande et aux cadenciers */
.pligne__tranchage { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; white-space: nowrap; }
.pligne__tranchage select { width: auto; padding: 2px 4px; font-size: 12px; }
.cad-table__tranche { white-space: nowrap; }
.cad-table__tranche select { width: auto; padding: 2px 4px; font-size: 12px; }
.cad-table__tranche label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

/* ---------- Commandes des clients de marché (js/commandes-marche.js) ----------
   Pensé pour un pouce, debout derrière un étal : grandes cibles, peu de texte. */
.cmar-form { margin-top: 10px; }
.cmar-form__titre { font-size: 15px; color: var(--brun-croute, #5F3711); margin: 0 0 10px; }
.cmar-creneau { display: flex; align-items: center; gap: 7px; }
.cmar-creneau .champ { flex: 1; min-width: 0; }
.cmar-paye { margin: 8px 0; }
.cmar-lignes { margin: 8px 0; display: flex; flex-direction: column; gap: 7px; }
.cmar-ligne { display: grid; grid-template-columns: 1fr 92px 74px 34px; gap: 6px; align-items: center; }
.cmar-ligne .champ { min-width: 0; }
.cmar-total { margin: 10px 0 4px; font-size: 15px; color: var(--brun-croute, #5F3711); }
.cmar-total__partiel { display: block; font-size: 12px; font-weight: 400; color: var(--caramel, #C88850); }
.cmar-souci { margin-top: 8px; color: var(--rose-sourire, #E26666); font-size: 13px; }

.cmar-vide { padding: 10px 0; color: var(--caramel, #C88850); font-size: 14px; }
.cmar-groupe { margin-top: 12px; }
.cmar-groupe__titre { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--caramel, #C88850); margin: 0 0 7px; }
.cmar-carte { border: 1px solid var(--caramel-clair, #E3B584); border-radius: 9px;
  padding: 9px 11px; margin-bottom: 8px; background: #fff; }
.cmar-carte--remise { opacity: .6; }
.cmar-carte__haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; }
.cmar-carte__nom { font-weight: 700; color: var(--brun-croute, #5F3711); }
.cmar-carte__tel { color: var(--brun-fournil, #7B4A21); text-decoration: none; font-variant-numeric: tabular-nums; }
.cmar-carte__heure { font-size: 13px; color: var(--caramel, #C88850); }
.cmar-carte__lignes { font-size: 14px; }
.cmar-carte__note { font-size: 13px; color: var(--caramel, #C88850); margin-top: 3px; }
.cmar-carte__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 7px; }
.cmar-carte__total { font-weight: 700; color: var(--brun-croute, #5F3711); }
.cmar-carte__ref { font-size: 12px; color: var(--caramel-clair, #E3B584); }
.cmar-carte__faite { color: var(--brun-fournil, #7B4A21); font-size: 13px; }
.cmar-suivante { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--caramel-clair, #E3B584); }
.cmar-pastille { font-size: 12px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.cmar-pastille--paye { background: #E7F3E7; color: #2F6B33; }
.cmar-pastille--du { background: #FBE9E9; color: #A33; }

@media (max-width: 560px) {
  .cmar-ligne { grid-template-columns: 1fr 80px 60px 30px; }
}

/* Une quantité corrigée à la main au fournil : on montre ce que donnent les
   commandes et on offre de s'y recaler (audit du 28/08/2026). */
.petri-qte-ligne--ecart .champ { border-color: var(--dore-levain, #F3BF4C); }
.petri-recaler {
  border: 1px solid var(--caramel-clair, #E3B584); background: var(--creme-mie, #FBF6E3);
  color: var(--brun-croute, #5F3711); border-radius: 999px; padding: 2px 9px;
  font-size: 12px; cursor: pointer; white-space: nowrap; margin-left: 6px;
}
.petri-recaler:hover { background: var(--dore-levain, #F3BF4C); }

/* Commandes de marché non retirées à leur date : elles restent en tête. */
.cmar-groupe__titre--retard { color: var(--rose-sourire, #E26666); }

/* Note libre du client sur une commande (demande Sacha du 28/08/2026) :
   elle ressort sur le bon de livraison et se lit au fournil. */
.ec-cmd-note { margin-top: 10px; }
.ec-cmd-note label { display: block; font-size: 13px; color: var(--caramel, #C88850); margin-bottom: 3px; }

/* L'œil de la carte produit : ranger ce qu'on ne prend jamais, et le
   retrouver (demande Sacha du 28/08/2026). Il vit à côté du cœur. */
.ec-oeil {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.86); cursor: pointer;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(95,55,17,.18); opacity: .55; transition: opacity .15s, background .15s;
}
.ec-carte:hover .ec-oeil, .ec-oeil:focus-visible { opacity: 1; }
.ec-oeil--masque { opacity: 1; background: var(--dore-levain, #F3BF4C); }
.ec-masques-rappel {
  margin: 6px 0 10px; font-size: 13px; color: var(--caramel, #C88850);
}
.ec-masques-lien {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--brun-fournil, #7B4A21); text-decoration: underline; font-size: 13px;
}

/* Une commande corrigée par le client : la boulangerie doit le voir avant la
   fournée (audit du 29/08/2026 — sans ça la correction passait inaperçue). */
.cmd-verrou--client { background: var(--creme-mie, #FBF6E3); border-left: 3px solid var(--dore-levain, #F3BF4C); }
.cmd-verrou--client .btn { margin-left: 8px; }
/* Congés : le circuit à deux étapes (responsable puis direction) */
.conge-section__titre { font-weight: 700; margin: 14px 0 6px; }
.conge-etape { font-size: 13px; opacity: 0.8; padding: 6px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conge-etape2 { padding-top: 6px; border-top: 1px dashed var(--trait, #e7dcc8); margin-top: 6px; }
.conge-etape2 label { display: block; font-size: 13px; margin-bottom: 8px; }
.conge-etape2 .champ { max-width: 340px; }
/* Jours de récup disponibles : le compteur officieux */
.recup-lignes { list-style: none; margin: 8px 0 0; padding: 0; }
.recup-ligne { display: flex; gap: 10px; align-items: baseline; padding: 5px 0;
  border-top: 1px solid var(--trait, #e7dcc8); font-size: 13px; }
.recup-ligne__qte { font-weight: 700; min-width: 120px; font-variant-numeric: tabular-nums; }
.recup-ligne__quoi { flex: 1; }
.recup-ligne__qui { opacity: 0.6; font-size: 12px; }
/* Suivi CA : le B2B détaillé client par client */
.sca-b2b-tete th { font-weight: 700; padding-top: 12px; opacity: 0.75; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.03em; }
.qte-produit--client { font-weight: 400; padding-left: 16px; }

/* ---------- Plaquette tarifaire ---------- */
.plq-cadre {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: var(--gris-texte);
  display: flex;
  flex-direction: column;
}
.plq-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--brun-fournil);
  flex-wrap: wrap;
}
.plq-barre__titre { color: var(--blanc-chignon); font-size: 14px; }
.plq-barre__compte { color: var(--caramel-clair); font-size: 12px; margin-right: auto; }
.plq-defile {
  flex: 1;
  overflow: auto;
  padding: 18px;
  display: flex;
  justify-content: center;
}
.plq-defile > .plq-page {
  width: 210mm;
  max-width: 100%;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

@media print {
  body.plq-impression > *:not(#plaquette-cadre) { display: none !important; }
  body.plq-impression .plq-barre { display: none !important; }
  body.plq-impression .plq-cadre { position: static; background: none; }
  body.plq-impression .plq-defile { overflow: visible; padding: 0; display: block; }
  body.plq-impression .plq-defile > .plq-page { width: auto; box-shadow: none; }
}
/* RH : la barre de recherche des collaborateurs */
.rh-recherche { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.rh-recherche .champ { min-width: 260px; }
.rh-recherche__bilan { font-size: 12.5px; opacity: 0.7; margin: -4px 0 8px 2px; }

/* ---------- Modifier une tâche d'hygiène ---------- */
.hyg-modif {
  background: var(--creme-mie);
  border-left: 3px solid var(--dore-levain);
  border-radius: 0 9px 9px 0;
  padding: 12px 14px;
  margin: -4px 0 10px;
}
.hyg-modif__mot { font-size: 12px; color: var(--rose-sourire); margin-top: 6px; }
.hyg-tache--partielle { border-left: 3px solid var(--dore-levain); }
.hyg-tache--partielle .hyg-tache__etat { color: var(--caramel); }

/* La case « à détruire » du retour de marché se distingue du reste :
   ce qui est saisi là ne repartira pas en vente. */
.mm-mini--perte { color: var(--rose-sourire); }

/* ---------- Feuille de plaquage ---------- */
.plaq-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.plaq-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-left: 3px solid var(--caramel-clair);
  border-radius: 9px;
  padding: 11px 15px;
  cursor: pointer;
}
.plaq-ligne:hover { border-color: var(--brun-fournil); }
.plaq-ligne--faite {
  background: #f2f7ef;
  border-color: var(--vert-petri, #6B8E5A);
  border-left-color: var(--vert-petri, #6B8E5A);
}
.plaq-ligne__nom { font-size: 15px; color: var(--brun-fournil); min-width: 190px; }
.plaq-grilles {
  display: block;
  font-size: 11px;
  color: var(--caramel);
  margin-top: 2px;
}
.plaq-chiffres { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.plaq-chiffre { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.plaq-chiffre__n { font-size: 17px; color: var(--brun-fournil); }
.plaq-chiffre__l { font-size: 10px; color: var(--gris-texte); }
.plaq-chiffre--repasse .plaq-chiffre__n { color: var(--caramel); }
.plaq-chiffre--sortie .plaq-chiffre__n { color: var(--brun-croute); }
.plaq-chiffre--stock .plaq-chiffre__n { color: var(--gris-texte); }
.plaq-chiffre--manque .plaq-chiffre__n,
.plaq-chiffre--manque .plaq-chiffre__l { color: var(--rose-sourire); }
.plaq-etat { font-size: 12px; color: var(--gris-texte); min-width: 150px; text-align: right; }
.plaq-ligne--faite .plaq-etat { color: var(--vert-petri, #6B8E5A); }
.plaq-bilan {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gris-texte);
  border-top: 1px solid var(--creme-mie);
  padding-top: 10px;
}
.plaq-reglage { margin: 12px 0; }
.plaq-reglage__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 16px;
  margin-top: 10px;
}
.plaq-reglage__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--gris-texte);
}
.plaq-reglage__ligne input { width: 80px; }

/* ---------- Récapitulatif des accès d'une marque ---------- */
.acc-cadre {
  position: fixed; inset: 0; z-index: 9100;
  background: var(--gris-texte);
  display: flex; flex-direction: column;
}
.acc-barre {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--brun-fournil); flex-wrap: wrap;
}
.acc-barre__titre { color: var(--blanc-chignon); font-size: 14px; }
.acc-barre__compte { color: var(--caramel-clair); font-size: 12px; margin-right: auto; }
.acc-defile { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; }
.acc-defile > .acc-page {
  width: 210mm; max-width: 100%;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

@media print {
  body.acc-impression > *:not(#acces-cadre) { display: none !important; }
  body.acc-impression .acc-barre { display: none !important; }
  body.acc-impression .acc-cadre { position: static; background: none; }
  body.acc-impression .acc-defile { overflow: visible; padding: 0; display: block; }
  body.acc-impression .acc-defile > .acc-page { width: auto; box-shadow: none; }
}

/* ---------- Appeler et écrire depuis le CRM ---------- */
.cli-joindre { display: flex; align-items: center; gap: 4px; }
.cli-joindre .champ { flex: 1; min-width: 0; }
.cli-lien {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--caramel-clair);
  border-radius: 8px;
  color: var(--brun-fournil);
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
}
.cli-lien:hover { background: var(--creme-mie); border-color: var(--brun-fournil); }
.cli-liens { display: inline-flex; gap: 5px; margin-right: 8px; vertical-align: middle; }
.cli-liens .cli-lien { width: 28px; height: 28px; font-size: 14px; }

@media (max-width: 700px) {
  /* sur téléphone, la cible doit être prise du pouce */
  .cli-lien { width: 38px; height: 38px; font-size: 17px; }
}

/* ============================================================
   Récap production — fenêtre de sélection (21/08/2026)
   ============================================================ */
.rec-modal { max-width: 620px; }
.rec-choix {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  margin: 10px 0 4px;
}
.rec-periode { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; }
.rec-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.rec-sous-date { font-size: 12px; color: var(--brun-doux, #7a6a55); margin-top: 4px; }
.rec-clients-tete {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--bordure, #e3d9c9);
}
.rec-tous { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.rec-compte { font-size: 12px; color: var(--brun-doux, #7a6a55); }
.rec-clients {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--bordure, #e3d9c9); border-radius: 8px; padding: 10px;
}
.rec-client { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; padding: 2px 0; }
.rec-marque {
  font-size: 11px; color: var(--caramel, #b8813f);
  background: var(--creme, #faf6ef); border-radius: 999px; padding: 1px 7px;
}
@media (max-width: 560px) { .rec-clients { grid-template-columns: 1fr; } }

/* Dans les quantités, ce qui est acheté au fournisseur plutôt que pétri :
   Thomas charge les deux dans le camion, mais un seul descend au fournil. */
.qte-achat {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--brun-clair, #C88850);
  border: 1px solid currentColor; border-radius: 8px;
  padding: 0 5px; margin-left: 6px; vertical-align: middle;
  font-weight: 400; white-space: nowrap;
}

/* Les deux boutons de canal du catalogue — B2B / B2C — séparés des familles
   par un filet : ce ne sont pas des catégories de produits mais deux façons
   de regarder le même catalogue. */
.onglet--canal { font-weight: 600; }
.cat-onglets__sep {
  display: inline-block; width: 1px; align-self: stretch;
  background: var(--beige-ligne, #E3D9C6); margin: 2px 6px;
}

/* Le petit pop de confettis, là où l'on vient d'appuyer (js/bienvenue.js).
   Posé sur le body, au-dessus de tout, et transparent au doigt : il ne
   doit jamais intercepter le clic suivant. */
.pop-eclats {
  position: fixed; z-index: 950;
  pointer-events: none;
  width: 0; height: 0;
}
.pop-eclat {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  animation: pop-eclate .62s cubic-bezier(.18, .82, .4, 1) both;
}
@keyframes pop-eclate {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.55);
         opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pop-eclat { display: none; } }

/* Un jour sans marché : la case est grisée et muette. Seuls les jours
   d'ouverture restent blancs — ce sont les seuls où l'on saisit du chiffre
   d'affaires. Les jours se règlent dans Emplacements marchés. */
/* Jour sans marché : la case n'attend RIEN (demande Sacha 09/09/2026 —
   « il faut que ce soit vraiment visible »).
   Le gris précédent était la crème du fond avec un liseré à 2 % : autant
   dire rien. Une case fermée doit se distinguer d'une case vide qui, elle,
   attend un chiffre — sinon on cherche où saisir.
   Deux marques plutôt qu'une : un fond nettement plus sourd, et des rayures
   diagonales. Les rayures se lisent d'un seul coup d'œil sur toute une
   colonne, et restent lisibles pour un œil qui distingue mal les nuances —
   ce qu'une simple différence de gris ne garantit jamais. Teintes prises
   dans la palette de la maison (brun fournil sourdi), pas un gris étranger. */
.sca-tableau .sca-cell--ferme,
.sca-cell--ferme {
  background-color: #E2D9C2;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(123, 74, 33, 0.18) 0 5px,
    rgba(123, 74, 33, 0) 5px 11px);
  color: transparent;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(123, 74, 33, 0.14);
}
/* ni survol ni curseur : il n'y a rien à y faire */
.sca-tableau .sca-cell--ferme:hover,
.sca-cell--ferme:hover {
  background-color: #E2D9C2;
}

/* Marché exceptionnel dans Marchés du jour (Sacha, 14/09/2026) : le lieu du
   jour, la tournée choisie sur la carte, le retrait de l'ouverture */
.mm-ouvrir-form #mm-ouvrir-lieu { min-width: 260px; flex: 1 1 260px; }
.mm-carte--except { border-left: 4px solid var(--dore-levain); }
.mm-carte__tournee { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-carte__tournee .champ { width: auto; min-width: 150px; padding: 4px 8px; font-size: 13px; }
.mm-carte__tournee .btn-mini { padding: 3px 9px; font-size: 12px; margin-left: auto; }

/* Jusqu'à trois vendeurs par marché (Sacha, 17/09/2026) : un menu par
   vendeur posé, un menu « + ajouter » tant qu'on n'est pas à trois */
.mm-vendeurs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mm-vendeurs .champ { width: auto; min-width: 180px; max-width: 100%; }
.mm-vendeurs .mm-vendeurs__menu--ajout { opacity: 0.8; border-style: dashed; }
.mm-planning-ligne .mm-vendeurs { justify-content: flex-end; }
.vm-carte__champs .mm-vendeurs { flex-direction: column; align-items: stretch; }
.vm-carte__champs .mm-vendeurs .champ { min-width: 0; width: 100%; }

/* Catalogue → site vitrine (17/09/2026) : le bouton « Exclu B2B » et
   l'état de la fiche sur mamieestchaude.fr */
.fiche__site { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; }
.fiche__exclu {
  border: 1px solid var(--dore-levain); background: #fff; color: var(--brun-croute);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.fiche__exclu:hover { background: var(--creme-mie); }
.fiche__exclu--on { background: var(--brun-fournil); border-color: var(--brun-fournil); color: var(--blanc-chignon); }
.fiche__sur-site, .fiche__hors-site { font-size: 11px; color: var(--caramel); }
.fiche__hors-site { color: #a3651f; font-style: italic; }


/* Ma journée de vente (Joy, 18/09/2026) : entrée dorée en tête de menu, et
   l'écran du stand tel que le vendeur le voit — pour tout le monde */
.nav__item--journee { display: none; }
body.mode-joy .nav__item--journee {
  display: flex; background: rgba(243, 191, 76, 0.16); border: 1px solid rgba(243, 191, 76, 0.55);
  margin-bottom: 6px;
}
body.mode-joy .nav__item--journee.nav__item--actif { background: var(--dore-levain); color: var(--brun-croute); }
.mj-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mj-entete__marche { font-family: "Lora", Georgia, serif; font-size: 24px; color: var(--brun-fournil); }
.mj-entete__sous { font-size: 13px; color: var(--caramel); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mj-choix { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; }
.mj-choix .btn { font-size: 16px; padding: 12px 18px; }

/* =========================================================================
   MODE FOUR — la dispatch sur l'iPad posé au fournil (Bilel, 18/09/2026)
   Rien ne défile à droite : les pastilles se rangent sur la largeur. Le
   menu et l'entête s'effacent, l'écran entier est au boulanger.
   ========================================================================= */
body.mode-four .app { grid-template-columns: 1fr; }
body.mode-four .sidebar { display: none; }
body.mode-four .main { padding: 10px 12px 24px; }
body.mode-four .vue[data-vue-panneau="dispatch"] .topbar { display: none; }
body.mode-four .btn-retour--global, body.mode-four #horloge-mmec { display: none; }

.four-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -10px -12px 12px;
  padding: 8px 12px;
  background: var(--creme-mie);
  border-bottom: var(--filet) solid var(--dore-levain);
}
.four-barre__date { display: flex; align-items: center; gap: 6px; }
.four-barre__pas { min-width: 44px; min-height: 44px; font-size: 16px; }
.four-barre__jour { font-size: 18px; color: var(--brun-croute); text-transform: capitalize; white-space: nowrap; }
.four-barre__champ { width: auto; min-height: 44px; font-size: 15px; }
.four-barre__heure {
  margin-left: auto;
  font-size: 22px;
  color: var(--brun-croute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.four-barre__avancee {
  flex-basis: 100%;
  order: 10;
  position: relative;
  height: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--caramel-clair);
  overflow: hidden;
}
.four-barre__jauge {
  position: absolute; inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--vert-petri) 35%, #fff);
  transition: width var(--allure);
}
.four-barre__compte {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--brun-croute);
  font-variant-numeric: tabular-nums;
}
.four-barre .btn { min-height: 44px; }

.four-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
  align-items: start;
}
.four-famille {
  grid-column: 1 / -1;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanc-chignon);
  padding: 6px 12px;
  border-radius: 8px;
  margin-top: 6px;
}
.four-famille--boulangerie { background: var(--brun-fournil); }
.four-famille--patisserie { background: var(--rose-sourire); }

.four-carte {
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-left: 6px solid var(--brun-fournil);
  border-radius: var(--rayon);
  padding: 8px 10px 10px;
  box-shadow: var(--ombre-douce);
}
.four-carte--patisserie { border-left-color: var(--rose-sourire); }
.four-carte__tete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.four-carte__nom { flex: 1; font-size: 19px; color: var(--brun-croute); line-height: 1.15; }
.four-carte__cuire {
  font-size: 22px;
  color: var(--brun-fournil);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.four-carte__cuire small { display: block; font-size: 10px; color: var(--rose-sourire); line-height: 1; }
.four-carte__cuire--fait { color: var(--vert-petri); }
.four-carte__avancee { font-size: 12px; color: var(--gris-texte); font-variant-numeric: tabular-nums; }
.four-carte__pastilles { display: flex; flex-wrap: wrap; gap: 8px; }

.four-pastille {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 56px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid var(--caramel-clair);
  background: var(--creme-mie);
  color: var(--brun-croute);
  font-family: inherit;
  cursor: pointer;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--allure), border-color var(--allure);
}
.four-pastille--marche { background: color-mix(in srgb, var(--dore-levain) 28%, #fff); border-color: var(--dore-levain); }
.four-pastille__nom { font-size: 12px; color: var(--gris-texte); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.four-pastille__qte { font-size: 24px; font-variant-numeric: tabular-nums; }
.four-pastille__note { font-size: 10px; color: var(--rose-sourire); }
.four-pastille__ok { font-size: 10px; color: var(--vert-petri); }
.four-pastille--val { background: #e6efd9; border-color: var(--vert-petri); }
.four-pastille--val .four-pastille__qte { color: var(--vert-petri); }
.four-pastille--casse { box-shadow: inset 0 -3px 0 var(--rose-sourire); }
.four-pastille--fige { opacity: 0.7; cursor: default; }
.four-pastille__champ { width: 64px; text-align: center; font-size: 18px; padding: 4px; }
.disp-croise--casse .four-pastille, body.mode-four .disp-casse-panneau ~ .four-grille .four-pastille { cursor: crosshair; }

/* Un produit entièrement déposé se replie : une ligne verte, les pastilles
   restent visibles mais toutes petites — l'écran se vide au fil de la nuit */
.four-carte--fait { background: #f3f8ec; border-color: var(--vert-petri); padding-bottom: 6px; }
.four-carte--fait .four-carte__nom { color: var(--vert-petri); font-size: 15px; }
.four-carte--fait .four-carte__cuire { font-size: 15px; }
.four-carte--fait .four-carte__pastilles { gap: 4px; }
.four-carte--fait .four-pastille { min-height: 26px; min-width: 0; padding: 2px 8px; flex-direction: row; gap: 6px; }
.four-carte--fait .four-pastille__qte { font-size: 13px; }
.four-carte--fait .four-pastille__ok, .four-carte--fait .four-pastille__note { display: none; }

@media (max-width: 700px) {
  .four-grille { grid-template-columns: 1fr; }
  .four-barre__jour { font-size: 15px; }
}

/* =========================================================================
   COMMANDES — par jour, par client (Sacha, 18/09/2026 : 250 clients par jour)
   ========================================================================= */
.vue[data-vue-panneau="commandes"] .cli-colonne { max-width: 1180px; }
.onglet__compte {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--creme-mie);
  color: var(--brun-croute);
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.onglet--actif .onglet__compte { background: rgba(255, 255, 255, 0.35); color: inherit; }

.cmd-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.onglet--mode { font-size: 14px; padding: 8px 18px; }

.cmd-jour-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cmd-jour-nav__pas { min-width: 40px; }
.cmd-jour-nav .champ { width: auto; }
.cmd-jour-nav__titre { font-size: 17px; color: var(--brun-croute); text-transform: capitalize; }

.cmd-jours { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.cmd-jour {
  flex: 0 0 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border: 1px solid var(--caramel-clair);
  border-radius: 10px;
  background: #fff;
  color: var(--brun-croute);
  font-family: inherit;
  cursor: pointer;
  line-height: 1.1;
}
.cmd-jour__sem { font-size: 11px; color: var(--gris-texte); text-transform: capitalize; }
.cmd-jour__num { font-size: 18px; }
.cmd-jour__n { font-size: 11px; color: var(--brun-fournil); font-variant-numeric: tabular-nums; }
.cmd-jour--vide .cmd-jour__n { color: var(--caramel-clair); }
.cmd-jour--auj { border-color: var(--dore-levain); border-style: dashed; }
.cmd-jour--actif { background: var(--brun-fournil); border-color: var(--brun-fournil); color: var(--blanc-chignon); }
.cmd-jour--actif .cmd-jour__sem, .cmd-jour--actif .cmd-jour__n { color: var(--dore-levain); }

.cmd-clients { margin-bottom: 12px; }
.cmd-clients__champ { width: 100%; max-width: 420px; margin-bottom: 8px; }
.cmd-clients__liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmd-client {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid var(--caramel-clair);
  border-radius: 10px;
  background: #fff;
  color: var(--brun-croute);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.15;
}
.cmd-client__n { font-size: 11px; color: var(--gris-texte); }
.cmd-client--actif { background: var(--brun-fournil); border-color: var(--brun-fournil); color: var(--blanc-chignon); }
.cmd-client--actif .cmd-client__n { color: var(--dore-levain); }
.cmd-clients__plus { font-size: 12px; color: var(--gris-texte); }

.cmd-table-cadre { overflow-x: auto; border: 1px solid var(--caramel-clair); border-radius: var(--rayon); background: #fff; }
.cmd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cmd-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  padding: 8px 10px;
  white-space: nowrap;
}
.cmd-table td { padding: 8px 10px; border-bottom: 1px solid var(--creme-mie); vertical-align: top; }
.cmd-table__qui { width: 220px; }
.cmd-table__prod { color: var(--gris-texte); }
.cmd-table__total { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmd-ligne { cursor: pointer; }
.cmd-ligne:nth-child(even) td { background: #fdfaf2; }
.cmd-ligne:hover td { background: #fbf3dc; }
.cmd-ligne--active td { background: color-mix(in srgb, var(--dore-levain) 22%, #fff); }
.cmd-ligne__nom { display: block; color: var(--brun-croute); font-size: 14px; }
.cmd-ligne__sous { display: block; font-size: 11px; color: var(--gris-texte); margin-top: 2px; }
.cmd-ligne__sous .cmd-badge-enligne, .cmd-ligne__sous .livr-badge-interne, .cmd-badge-figee { margin-left: 6px; }
.cmd-badge-figee {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  color: var(--brun-croute);
  font-size: 10px;
}
.cmd-detail-tr > td { padding: 0 0 12px; background: transparent !important; }
.cmd-detail-tr .cli-detail-inline { margin: 6px 8px 0; }

/* =========================================================================
   Dispatch — la chaîne de cuisson (Sacha, 18/09/2026) : un produit à la
   fois, ses destinations par tournée ; ou un client à la fois. Pensé pour
   250 clients par jour sur l'iPad du fournil : deux colonnes qui défilent
   chacune de son côté, de grandes lignes qu'un pouce fariné touche sans
   se tromper.
   ========================================================================= */
.chaine {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 14px;
  /* la barre du four fait une ou deux rangées : sa hauteur réelle est
     posée par js/dispatch.js dans --chaine-pris */
  height: calc(100vh - var(--chaine-pris, 92px) - 34px);
  min-height: 420px;
}
.chaine-colonne {
  display: flex; flex-direction: column; min-height: 0;
  background: #ffffff; border-radius: 14px; border: var(--filet) solid var(--dore-doux, #F4E8CE);
}
.chaine-colonne__onglets { display: flex; padding: 8px 8px 0; gap: 6px; }
.chaine-onglet {
  flex: 1; border: none; border-radius: 10px 10px 0 0; padding: 10px 6px; cursor: pointer;
  font-family: inherit; font-size: 14px; background: var(--creme-mie); color: var(--gris-texte);
}
.chaine-onglet--actif { background: var(--brun-croute); color: #ffffff; }
.chaine-colonne__liste { overflow-y: auto; padding: 8px; flex: 1; min-height: 0; }
.chaine-fam {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--caramel);
  padding: 10px 6px 4px; position: sticky; top: 0; background: #ffffff; z-index: 1;
}
.chaine-prod {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  width: 100%; text-align: left; border: none; border-radius: 10px; padding: 11px 10px; margin-bottom: 4px;
  background: var(--creme-mie); color: var(--brun-croute); font-family: inherit; font-size: 15px; cursor: pointer;
}
.chaine-prod small { display: block; font-size: 11px; color: var(--caramel); }
.chaine-prod--courant { background: var(--dore-levain); outline: 2px solid var(--brun-fournil); }
.chaine-prod--fini { opacity: .55; }
.chaine-prod--fini .chaine-prod__nom { text-decoration: line-through; }
.chaine-prod__cuire { font-size: 15px; color: var(--brun-fournil); }
.chaine-prod__av {
  font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #ffffff; color: var(--gris-texte); white-space: nowrap;
}
.chaine-prod__av--fini { background: var(--vert-petri); color: #ffffff; }
.chaine-panneau { overflow-y: auto; min-height: 0; padding: 0 4px 24px; }
.chaine-tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  position: sticky; top: 0; z-index: 2; background: var(--creme-mie); padding: 10px 4px 12px; margin-bottom: 8px;
  border-bottom: var(--filet) solid var(--dore-levain);
}
.chaine-tete__nom { font-family: var(--police-titre, inherit); font-size: 26px; color: var(--brun-croute); }
.chaine-tete__nom small { font-size: 13px; color: var(--caramel); margin-left: 8px; }
.chaine-tete__chiffres { font-size: 15px; color: var(--gris-texte); }
.chaine-tete__chiffres b { color: var(--brun-croute); font-size: 18px; }
.chaine-tete__fin { color: var(--vert-petri); font-size: 15px; }
.chaine-recherche { flex: 1 1 200px; min-width: 160px; }
.chaine-groupe { margin-bottom: 16px; }
.chaine-groupe__tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px 10px 0 0; background: var(--brun-croute); color: #ffffff;
}
.chaine-groupe--fini .chaine-groupe__tete { background: var(--vert-petri); }
.chaine-groupe__titre { font-size: 15px; flex: 1; }
.chaine-groupe__compte { font-size: 13px; opacity: .9; }
.chaine-groupe__tout { padding: 6px 12px; }
.chaine-lignes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px;
  padding: 8px; background: #ffffff; border-radius: 0 0 10px 10px; border: var(--filet) solid var(--dore-doux, #F4E8CE);
}
.chaine-ligne, .chaine-ligne.disp-cell {
  display: block; width: 100%; height: auto; min-height: 58px; min-width: 0; border: 2px solid var(--dore-doux, #F4E8CE); border-radius: 10px; padding: 8px 12px;
  background: var(--creme-mie); color: var(--brun-croute); text-align: left; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* la grille est sur un span intérieur : un bouton ne grandit pas avec une
   grille posée sur lui-même (Safari), la note de casse débordait */
.chaine-ligne__grille {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom qte" "etat qte" "note qte"; gap: 2px 10px; align-items: center; width: 100%;
}
.chaine-ligne--marche { border-color: var(--dore-levain); }
.chaine-ligne__nom { grid-area: nom; font-size: 15px; line-height: 1.2; }
.chaine-ligne__nom small { display: block; font-size: 11px; color: var(--caramel); }
.chaine-ligne__qte { grid-area: qte; font-size: 26px; font-family: var(--police-titre, inherit); color: var(--brun-fournil); }
.chaine-ligne__etat { grid-area: etat; font-size: 11px; color: var(--caramel); text-transform: uppercase; letter-spacing: .4px; }
.chaine-ligne__note { grid-area: note; font-size: 11px; color: var(--rose-sourire); }
.chaine-ligne--val { background: var(--vert-doux, #EAF1DF); border-color: var(--vert-petri); }
.chaine-ligne--val .chaine-ligne__etat { color: var(--vert-petri); }
.chaine-ligne--val .chaine-ligne__qte { color: var(--vert-petri); }
.chaine-ligne--casse { border-color: var(--rose-sourire); }
.chaine-ligne--fige { opacity: .7; cursor: default; }
.chaine-ligne__champ { width: 80px; grid-area: qte; }
.disp-croise--casse ~ .chaine, .chaine .chaine-ligne:active { transform: scale(.99); }
@media (max-width: 760px) {
  .chaine { grid-template-columns: 1fr; height: auto; }
  .chaine-colonne { max-height: 34vh; }
  .chaine-panneau { overflow: visible; }
}