/* Portail du boulanger. Pensé d'abord pour le téléphone ; clair et sombre. */
:root {
  color-scheme: light;
  --plan: #f6f5f1; --surface: #fcfcfb; --bord: #e1e0d9; --axe: #c3c2b7;
  --encre: #14130f; --encre-2: #52514e; --encre-3: #898781;
  --accent: #b4551d; --accent-fond: #f6e7dc; --sur-accent: #ffffff;
  --serie-1: #2a78d6; --serie-2: #eb6834;
  --bon: #0ca30c; --alerte: #fab219; --grave: #d03b3b;
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plan: #0d0d0d; --surface: #1a1a19; --bord: #2c2c2a; --axe: #383835;
    --encre: #ffffff; --encre-2: #c3c2b7; --encre-3: #898781;
    --accent: #e8935c; --accent-fond: #33231a; --sur-accent: #1a1a19;
    --serie-1: #3987e5; --serie-2: #d95926;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--plan); color: var(--encre); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding-bottom: 24px; }
body:has(.nav) { padding-bottom: 84px; }
a { color: inherit; }
h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; margin: 0 0 10px; }
p { margin: 0 0 10px; }
.petit { font-size: .84rem; color: var(--encre-2); }
.discret { color: var(--encre-3); }
.chiffre { font-variant-numeric: tabular-nums; }

.entete { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--bord); }
.entete-in { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.marque { font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.marque span { color: var(--accent); }
.entete form { margin: 0; }
.entete select { font: inherit; font-weight: 600; padding: 7px 30px 7px 10px; border-radius: 10px; border: 1px solid var(--bord); background: var(--plan); color: var(--encre); max-width: 46vw; }
.pousse { margin-left: auto; }
.lien-bouton { background: none; border: 0; font: inherit; color: var(--encre-2); padding: 6px 4px; cursor: pointer; text-decoration: underline; }

.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; background: var(--surface); border-top: 1px solid var(--bord); display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.nav a { flex: 1; text-align: center; text-decoration: none; font-size: .72rem; color: var(--encre-3); padding: 4px 2px; border-radius: 10px; }
.nav a svg { display: block; margin: 0 auto 2px; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a.ici { color: var(--accent); font-weight: 600; }

main { max-width: 1040px; margin: 0 auto; padding: 16px; }
.titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jours { display: flex; align-items: center; gap: 6px; }
.jours a, .jours span.off { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bord); background: var(--surface); text-decoration: none; font-size: 1.1rem; }
.jours span.off { color: var(--bord); }
.jours strong { min-width: 9.5em; text-align: center; font-size: .95rem; }

.grille { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.deux { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin-bottom: 12px; min-width: 0; }
.deux > .carte, .grille > .carte { margin-bottom: 0; }
.tuile { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; min-width: 0; }
.tuile .nom { font-size: .8rem; color: var(--encre-2); }
.tuile .valeur { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 2px 0; }
.tuile .sous { font-size: .78rem; color: var(--encre-3); }
.delta { font-weight: 600; white-space: nowrap; }
.delta.haut { color: var(--bon); } .delta.bas { color: var(--grave); }
@media (prefers-color-scheme: light) { .delta.haut { color: #087808; } }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; font-size: .76rem; color: var(--encre-3); text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--bord); }
td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--bord); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 8px; white-space: nowrap; }
td a { text-decoration: none; border-bottom: 1px solid var(--axe); }
.defile { overflow-x: auto; }
.fort { font-weight: 700; }

.etiquette { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--plan); border: 1px solid var(--bord); color: var(--encre-2); white-space: nowrap; }
.pastille { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.vide { color: var(--encre-3); font-size: .92rem; padding: 6px 0; }
.note { font-size: .82rem; color: var(--encre-2); border-left: 3px solid var(--bord); padding: 2px 0 2px 10px; margin: 10px 0 0; }
.message { background: var(--accent-fond); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: .92rem; }

.bouton { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; background: var(--accent); color: var(--sur-accent); border: 0; border-radius: 12px; padding: 13px 20px; cursor: pointer; text-decoration: none; }
.bouton.large { width: 100%; }
.bouton.second { background: var(--surface); color: var(--encre); border: 1px solid var(--bord); }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.onglets a { text-decoration: none; font-size: .86rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bord); background: var(--surface); color: var(--encre-2); }
.onglets.boutiques form { margin: 0; }
.onglets.boutiques button { font: inherit; font-size: .86rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bord); background: var(--surface); color: var(--encre-2); cursor: pointer; }
.onglets.boutiques button.ici { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 600; }
.onglets a.ici { background: var(--encre); color: var(--plan); border-color: var(--encre); font-weight: 600; }

/* Saisie de production : une ligne par produit, trois colonnes de chiffres alignées */
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) 38px 46px 42px 40px 40px 64px; gap: 6px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--bord); }
.ligne:last-child { border-bottom: 0; }
.ligne > div:not(.nom) { text-align: center; }
.ligne .nom { font-weight: 600; font-size: .95rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.ligne .unite { display: block; font-weight: 400; font-size: .74rem; color: var(--encre-3); }
.ligne.tete { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 2px 0 8px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-3); }
.ligne.tete h2 { margin: 0; text-transform: none; letter-spacing: 0; color: var(--encre); font-size: 1.05rem; }
.ia { font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; padding: 7px 4px; border-radius: 10px; border: 1px solid transparent; background: var(--accent-fond); color: var(--encre); cursor: pointer; }
.qte { width: 100%; height: 40px; text-align: center; font: inherit; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; border-radius: 10px; border: 1px solid var(--axe); background: var(--plan); color: var(--encre); }
.qte:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.qte.repris { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 14%, var(--surface)); }
.qte.modifie { border-color: var(--bon); background: color-mix(in srgb, var(--bon) 14%, var(--surface)); }
.ligne.sans-ia { grid-template-columns: minmax(0, 1fr) 38px 46px 44px 62px; gap: 7px; }
.j7.habituel { font-weight: 400; color: var(--encre-2); border-style: dashed; }      /* quantité habituelle, pas une saisie */
.vendu7 { font-weight: 700; font-variant-numeric: tabular-nums; }
.bilan span { display: block; font-variant-numeric: tabular-nums; line-height: 1.25; }
.bilan .h { font-size: .74rem; color: var(--encre-2); }
.bilan .h.manque { color: var(--grave); font-weight: 700; }
.bilan .i { font-size: .74rem; color: var(--encre-3); }
.bilan .i.reste { font-size: .98rem; font-weight: 800; color: var(--encre); }
.qte.rupture { border-style: dashed; border-color: var(--grave); color: var(--grave); }
.propositions { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.propositions:empty { display: none; }
.propositions button { font: inherit; font-size: .88rem; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--bord); background: var(--plan); color: var(--encre); cursor: pointer; }
.propositions button:active { background: var(--accent-fond); }
.heure { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--encre-2); }
.deux-champs { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.champ select { width: 100%; font: inherit; padding: 12px 10px; border-radius: 12px; border: 1px solid var(--axe); background: var(--surface); color: var(--encre); }
.invendu { font-weight: 600; font-variant-numeric: tabular-nums; }
.ligne.stock { grid-template-columns: minmax(0, 1fr) 38px 40px 50px 54px 42px; gap: 6px; }
.qte.petit-champ { font-size: .95rem; font-weight: 600; }
.qte.calcule { color: var(--encre-3); border-style: dashed; }
.qte.vert { border-color: var(--bon); }
.qte.rouge { border-color: var(--grave); color: var(--grave); }
.j7 { font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; padding: 7px 4px; border-radius: 10px; border: 1px solid var(--bord); background: var(--plan); color: var(--encre); cursor: pointer; }
.j7.fixe { font-style: italic; font-weight: 600; }
.fin { display: block; font-size: .68rem; color: var(--encre-3); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.fin.tot { color: var(--grave); font-weight: 700; }
.j7:active { background: var(--accent-fond); }
.sortir { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--grave); }
.t-vert { color: var(--bon); } .t-rouge { color: var(--grave); }
@media (prefers-color-scheme: light) { .t-vert { color: #087808; } }
.legende-saisie { display: flex; gap: 16px; flex-wrap: wrap; }
.legende-saisie i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; border: 1px solid; }
.legende-saisie i.repris { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 30%, var(--surface)); }
.legende-saisie i.modifie { border-color: var(--bon); background: color-mix(in srgb, var(--bon) 30%, var(--surface)); }
.choix { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.bouton-choix { display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.bouton-choix:active { background: var(--accent-fond); }
.ligne .nom { display: flex; align-items: flex-start; gap: 2px; }
.ligne .nom .libelle { flex: 0 1 auto; min-width: 0; }
.ligne.tete { font-size: .6rem; letter-spacing: 0; }
.ligne.tete small { display: block; font-size: .56rem; font-weight: 600; color: var(--encre-3); line-height: 1; }
.ligne.est-ephemere { box-shadow: inset 3px 0 0 var(--ephemere); padding-left: 8px; }
:root { --ephemere: #4a3aa7; } @media (prefers-color-scheme: dark) { :root { --ephemere: #9085e9; } }
.tag { display: inline-block; font-size: .64rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid; vertical-align: 1px; white-space: nowrap; }
.tag.t-ephemere { color: var(--ephemere); }
.legende-saisie i.l-ephemere { border-color: var(--ephemere); background: var(--ephemere); }
details.menu { position: relative; flex: none; order: -1; margin-left: -6px; }      /* à gauche du nom, points verticaux */
details.menu summary { list-style: none; cursor: pointer; width: 18px; height: 26px; line-height: 24px; text-align: center; border-radius: 8px; font-size: 1.25rem; font-weight: 700; color: var(--encre-3); user-select: none; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary { background: var(--plan); color: var(--encre); }
.menu-liste { position: absolute; left: 0; top: 28px; z-index: 4; min-width: 210px; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 4px; }
.menu-liste button { display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem; font-weight: 500; padding: 10px 12px; border: 0; background: none; color: var(--encre); border-radius: 8px; cursor: pointer; }
.menu-liste button:active, .menu-liste button:hover { background: var(--plan); }
.menu-liste button.danger { color: var(--grave); }
dialog.fenetre { border: 1px solid var(--bord); border-radius: 18px; padding: 20px; width: min(92vw, 400px); background: var(--surface); color: var(--encre); box-shadow: 0 16px 48px rgba(0,0,0,.35); }
dialog.fenetre::backdrop { background: rgba(0,0,0,.5); }
dialog.fenetre h2 { font-size: 1.1rem; margin: 0 0 12px; line-height: 1.3; }
dialog.fenetre .actions { display: flex; gap: 10px; margin-top: 16px; }
dialog.fenetre .actions .bouton { flex: 1; padding: 12px 10px; }
.bouton.danger { background: var(--grave); color: #fff; }
.coche { display: flex; align-items: center; gap: 10px; font-size: .95rem; margin: 4px 0 10px; }
.coche input { width: 22px; height: 22px; accent-color: var(--ephemere); }
.petit-bouton { padding: 8px 12px; font-size: .86rem; font-weight: 600; }
.rang { display: flex !important; gap: 8px; }
.rang input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--axe); background: var(--surface); color: var(--encre); }
.rang .bouton { padding: 10px 16px; }
textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--axe); background: var(--surface); color: var(--encre); resize: vertical; }
details.rares { margin-top: 6px; }
details.rares summary { cursor: pointer; color: var(--encre-2); font-size: .86rem; padding: 8px 0; }
.barre-bas { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); padding-top: 12px; background: linear-gradient(transparent, var(--plan) 30%); }
body:has(.nav) .barre-bas { bottom: 78px; }           /* au-dessus du menu du bas, quand il est affiché */
section[id] { scroll-margin-top: 70px; }

/* Connexion */
.porte { max-width: 380px; margin: 9vh auto 0; padding: 0 16px; }
.porte h1 { font-size: 1.6rem; margin-bottom: 4px; }
.champ { display: block; margin: 14px 0; }
.champ span { display: block; font-size: .84rem; color: var(--encre-2); margin-bottom: 5px; }
.champ input { width: 100%; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--axe); background: var(--surface); color: var(--encre); }

/* Graphiques */
.graphe { position: relative; }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphe text { fill: var(--encre-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphe .grille-l { stroke: var(--bord); stroke-width: 1; }
.graphe .base { stroke: var(--axe); stroke-width: 1; }
.graphe .s1 { fill: var(--serie-1); } .graphe .s2 { fill: var(--serie-2); }
.graphe .voile { fill: var(--encre); opacity: 0; } .graphe .voile.actif { opacity: .06; }
.bulle { position: absolute; pointer-events: none; background: var(--encre); color: var(--plan); font-size: .8rem; padding: 6px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -100%); opacity: 0; transition: opacity .1s; z-index: 3; }
.bulle.vu { opacity: 1; }
.bulle b { font-variant-numeric: tabular-nums; }
.legende { display: flex; gap: 14px; font-size: .8rem; color: var(--encre-2); margin-bottom: 6px; flex-wrap: wrap; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }
details.table { margin-top: 8px; font-size: .84rem; }
details.table summary { color: var(--encre-3); cursor: pointer; }
details.table .defile { max-height: 260px; overflow: auto; margin-top: 6px; }
.jauge { height: 8px; border-radius: 4px; background: var(--serie-1); min-width: 2px; }

@media (min-width: 760px) {
  body { padding-bottom: 24px; }
  .nav { position: static; border: 0; background: none; padding: 0; justify-content: flex-start; gap: 4px; max-width: 1040px; margin: 0 auto; padding: 0 16px 8px; }
  .nav a { flex: none; font-size: .9rem; padding: 7px 12px; }
  .nav a svg { display: none; }
  .nav a.ici { background: var(--accent-fond); }
  .entete { position: static; }
  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barre-bas, body:has(.nav) .barre-bas { bottom: 8px; }
  h1 { font-size: 1.6rem; }
}

/* Ligne de saisie : à gauche le nom et, dessous, les quatre chiffres du même jour la semaine d'avant ;
   à droite la case « fabriqué », précédée de « reste » et « vitrine » si la partie a des produits suivis ainsi. */
.ligne.l2 { grid-template-columns: minmax(0, 1fr) 62px; gap: 2px 6px; padding: 9px 0; }
.ligne.l2.trois { grid-template-columns: minmax(0, 1fr) 42px 42px 48px; gap: 2px 5px; }
.ligne.l2.trois .qte { height: 38px; font-size: .98rem; }
.ligne.l2.avec-ia { grid-template-columns: minmax(0, 1fr) 40px 62px; }
.ligne.l2.trois.avec-ia { grid-template-columns: minmax(0, 1fr) 42px 42px 38px 48px; }
.ligne.l2 .c-saisie { grid-row: 1; align-self: start; }      /* cases en haut, à hauteur du nom */
.ligne.l2 .nom { grid-column: 1; grid-row: 1; }
.ligne.l2.tete { padding: 2px 0 6px; }
.j7-bande { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0 18px;
            font-size: .76rem; color: var(--encre-3); text-align: left !important; }
.j7-fait { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.j7-fait small { font-size: .68rem; }
/* « fait » et « vendu » se touchent pour être repris dans la case : de vrais petits boutons */
.j7-mini { min-width: 28px; padding: 2px 6px; font: inherit; font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
           color: var(--encre); border-radius: 8px; border: 1px solid var(--axe); background: var(--plan); cursor: pointer; }
.j7-mini:active { background: var(--accent-fond); }
.j7-mini.habituel { font-weight: 500; color: var(--encre-2); border-style: dashed; }
.j7-tag { flex: none; white-space: nowrap; font-size: .54rem; font-weight: 700; letter-spacing: .04em; color: var(--j7); border: 1px solid color-mix(in srgb, var(--j7) 55%, transparent); background: color-mix(in srgb, var(--j7) 12%, transparent); border-radius: 5px; padding: 1px 3px; }
:root { --j7: #9a7400; } @media (prefers-color-scheme: dark) { :root { --j7: #e6c34a; } }
/* ce qui demande une décision : il en restait, ou il en a manqué */
.puce7 { margin-left: auto; white-space: nowrap; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.puce7.reste { color: var(--encre); border: 1px solid var(--axe); }
.puce7.fini { color: var(--grave); border: 1px solid color-mix(in srgb, var(--grave) 55%, transparent); background: color-mix(in srgb, var(--grave) 12%, transparent); }
.ligne .unite.t-ailleurs { font-size: .68rem; font-weight: 500; }
details.rares.vide { display: none; }

/* Recherche d'un produit dans la saisie */
.cherche { width: 100%; font: inherit; padding: 11px 14px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--axe); background: var(--plan); color: var(--encre); }
.ligne[hidden] { display: none; }
@media (max-width: 480px) {      /* téléphone : cinq colonnes, on serre pour laisser la place au nom */
  .ligne.sans-ia { grid-template-columns: minmax(0, 1fr) 30px 40px 40px 56px; gap: 5px; }
  .ligne.sans-ia .libelle { hyphens: none; overflow-wrap: anywhere; font-size: .92rem; }
  .ligne.stock { grid-template-columns: minmax(0, 1fr) 30px 34px 44px 46px 34px; gap: 4px; }
  .ligne.stock .libelle { font-size: .92rem; }
  .ligne.stock .j7 { min-width: 30px; padding: 7px 2px; }
}
.champ[hidden] { display: none; }

/* Produit fabriqué dans une autre boutique : la case dit combien on en demande */
:root { --ailleurs: #1c6fb3; } @media (prefers-color-scheme: dark) { :root { --ailleurs: #6cb6ee; } }
.ligne .unite.t-ailleurs { color: var(--ailleurs); font-weight: 600; }
.qte.ailleurs { border-color: var(--ailleurs); border-style: dotted; border-width: 2px; }
.choix-lieu { display: grid; gap: 8px; margin: 10px 0 14px; }
.choix-lieu .bouton.choisi { border-color: var(--ailleurs); color: var(--ailleurs); font-weight: 700; }
.choix-lieu .bouton.choisi::after { content: " ✓"; }
/* Filtre par lieu de fabrication */
.filtre-lieu { margin-bottom: 10px; }
.filtre-lieu button { font: inherit; font-size: .84rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bord); background: var(--plan); color: var(--encre-2); cursor: pointer; }
.filtre-lieu button.ici { background: var(--ailleurs); color: var(--plan); border-color: var(--ailleurs); font-weight: 600; }
.t-ailleurs { color: var(--ailleurs); }
/* Commandes : une carte par commande, panier en cours, deux boutons */
.deux-champs.egaux { grid-template-columns: 1fr 1fr; }
.commande-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.commande-tete .petit { display: block; margin: 0; }
.commande-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .9fr) auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--bord); align-items: baseline; }
.commande-ligne strong { font-variant-numeric: tabular-nums; }
.panier { margin: 4px 0 14px; padding: 10px 12px 4px; border: 1px solid var(--bord); border-radius: 12px; background: var(--plan); }
.panier h3 { margin: 0 0 6px; font-size: .86rem; color: var(--encre-2); }
.deux-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* une seule case à droite : assez de place pour aligner les quatre chiffres d'une ligne à l'autre */
.j7-bande .j7-tag { margin-right: 6px; }
/* Page production : la date seule en haut, puis les parties en cellules égales sur une ligne (rien ne bouge d'une partie à l'autre) */
.titre.date-seule { justify-content: center; }
.titre.date-seule .jours { width: 100%; justify-content: space-between; }
.onglets.parties { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.onglets.parties a { text-align: center; padding: 9px 2px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .onglets.parties a { font-size: .72rem; } }
.filtre-lieu button { font-size: .76rem; padding: 7px 9px; white-space: nowrap; }
/* Messages du site : une bulle fixe en haut de l'écran, qui s'efface toute seule */
.messages { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); z-index: 30; display: grid; gap: 6px; pointer-events: none;
            animation: message-part .5s ease 6s forwards; }
.messages .message { margin: 0; box-shadow: 0 8px 28px rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--bon) 55%, transparent); background: color-mix(in srgb, var(--bon) 16%, var(--surface)); color: var(--encre); font-weight: 600; }
@keyframes message-part { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .messages { animation-duration: .01s; } }
/* case déjà enregistrée sans retouche : plus d'orange, un simple contour */
.qte.acquis { border-color: var(--encre-3); }
.enregistre-le { text-align: center; color: var(--bon); font-weight: 600; margin: 6px 0 2px; }
/* Fiche validée : le récapitulatif figé, serré comme une feuille de tableur */
.fiche { border-color: color-mix(in srgb, var(--bon) 55%, var(--bord)); }
.fiche-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.fiche-tete strong { display: block; color: var(--bon); font-size: 1.02rem; }
.fiche-tete .petit { display: block; margin: 0; }
.fiche-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fiche-table th { font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-3); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--axe); }
.fiche-table td { padding: 5px 6px; border-bottom: 1px solid var(--bord); }
.fiche-table td + td, .fiche-table th + th { border-left: 1px solid var(--bord); }
.fiche-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--plan) 55%, transparent); }
.fiche-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.fiche-table .fort { font-weight: 700; }
.fiche-table small { font-weight: 400; color: var(--encre-3); }
.fiche-table tr.rupture td { color: var(--grave); }
.fiche-remarque { margin: 10px 0 0; font-size: .9rem; }
/* Répartition entre boutiques (sous la ligne) et transferts du jour */
.repartition { grid-column: 1 / -1; margin: 6px 0 0 18px; padding: 2px 0 2px 10px; border-left: 2px solid var(--bord); display: grid; gap: 4px; font-size: .82rem; color: var(--encre-2); text-align: left !important; }
.repartition label, .repartition .rep-ici { display: grid; grid-template-columns: minmax(0, 1fr) 62px; align-items: center; gap: 6px; }
.repartition input.qte { width: 100%; height: 32px; font-size: .92rem; }
.repartition .rep-ici { color: var(--encre-3); padding-top: 2px; }
.repartition .rep-ici b { text-align: center; font-size: .95rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.repartition .rep-ici b.negatif { color: var(--grave); }
.ligne.l2.trois .repartition label, .ligne.l2.trois .repartition .rep-ici { grid-template-columns: minmax(0, 1fr) 48px; }
.barre-transfert { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.transferts { margin-bottom: 10px; border: 1px solid var(--bord); border-radius: 12px; padding: 4px 10px; background: var(--plan); }
.transfert .quoi small { display: block; font-size: .72rem; color: var(--encre-3); }
.transfert { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; font-size: .86rem; border-bottom: 1px solid var(--bord); }
.transfert:last-child { border-bottom: 0; }
.transfert .sort { color: var(--grave); font-weight: 700; } .transfert .entre { color: var(--bon); font-weight: 700; }
.fiche-tete strong.neutre { color: var(--encre); }
form.carte .transferts { margin: 4px 0 0; }
/* Fenêtre des envois quotidiens */
.sous-titre { margin: 12px 0 6px; font-size: .92rem; }
.envois-liste { border: 1px solid var(--bord); border-radius: 12px; padding: 2px 10px; background: var(--plan); margin-bottom: 6px; }
.envois-liste[hidden] { display: none; }
.jours-choix { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 2px 0 14px; }
.jours-choix label { position: relative; }
.jours-choix input { position: absolute; opacity: 0; inset: 0; }
.jours-choix span { display: block; text-align: center; padding: 8px 0; font-size: .8rem; border-radius: 9px; border: 1px solid var(--bord); color: var(--encre-3); }
.jours-choix input:checked + span { background: var(--encre); color: var(--plan); border-color: var(--encre); font-weight: 600; }
.jours-choix input:focus-visible + span { outline: 2px solid var(--ailleurs); }
/* Produit suivi : « fabriqué » est le résultat de vitrine - reste (on peut quand même le taper) */
.qte.resultat { border-style: dashed; }