/* =========================================================
   Caisse Restaurant — Feuille de style
   Direction : « Le Passe » — brasserie (vert profond, laiton,
   papier de ticket). Deux ambiances : Nuit (salle) et Jour (cuisine).
   ========================================================= */

/* ---------- 1. Jetons de design ---------- */

:root {
    /* Ambiance Nuit (par défaut) */
    --ink:          #0C1B17;
    --surface:      #122A23;
    --surface-2:    #1A3830;
    --surface-3:    #22483D;
    --line:         #23473C;
    --line-soft:    #1B3A31;

    --brass:        #D9AE45;
    --brass-deep:   #A9822A;
    --brass-soft:   rgba(217, 174, 69, .14);

    --paper:        #F3EDDF;
    --paper-2:      #E7DFCC;
    --paper-line:   #CFC4AA;
    --paper-ink:    #1E2A24;

    --sauge:        #5FB185;
    --sauge-soft:   rgba(95, 177, 133, .15);
    --amber:        #E2913F;
    --amber-soft:   rgba(226, 145, 63, .15);
    --wine:         #C4494A;
    --wine-soft:    rgba(196, 73, 74, .15);

    --text:         #ECF2EE;
    --text-dim:     #8FA79D;
    --text-faint:   #63796F;

    --radius-s:     8px;
    --radius:       14px;
    --radius-l:     20px;

    --shadow:       0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.55);
    --shadow-lift:  0 2px 4px rgba(0,0,0,.3), 0 22px 48px -16px rgba(0,0,0,.65);

    --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --rail:         232px;
    --ease:         cubic-bezier(.2, .7, .3, 1);

    color-scheme: dark;
}

[data-theme="jour"] {
    /* Ambiance Jour : papier, pour la lumière crue du service */
    --ink:          #E9E2D1;
    --surface:      #F6F1E5;
    --surface-2:    #FFFCF4;
    --surface-3:    #EFE7D5;
    --line:         #D2C7AF;
    --line-soft:    #DED5C0;

    --brass:        #8A6712;
    --brass-deep:   #6B4F0B;
    --brass-soft:   rgba(138, 103, 18, .12);

    --paper:        #16302A;
    --paper-2:      #1E3E35;
    --paper-line:   #2E5749;
    --paper-ink:    #F3EDDF;

    --sauge:        #2C7A52;
    --sauge-soft:   rgba(44, 122, 82, .12);
    --amber:        #A85E11;
    --amber-soft:   rgba(168, 94, 17, .12);
    --wine:         #A32C2D;
    --wine-soft:    rgba(163, 44, 45, .12);

    --text:         #16241E;
    --text-dim:     #5C6E65;
    --text-faint:   #8A9990;

    --shadow:       0 1px 2px rgba(40,30,10,.08), 0 12px 28px -14px rgba(40,30,10,.28);
    --shadow-lift:  0 2px 6px rgba(40,30,10,.10), 0 22px 44px -18px rgba(40,30,10,.35);

    color-scheme: light;
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    background: var(--ink);
    color: var(--text);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

/* Voile de texture : très léger grain de nappe */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background:
        radial-gradient(1100px 500px at 15% -10%, var(--brass-soft), transparent 65%),
        radial-gradient(900px 600px at 110% 10%, var(--sauge-soft), transparent 60%);
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }

.display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0;
}

a { color: var(--brass); }

::selection { background: var(--brass); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Barre de défilement */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--ink); }

/* ---------- 3. Éléments de formulaire ---------- */

input, select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 11px 13px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--brass-soft);
}

textarea { min-height: 76px; resize: vertical; }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

label, .field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Ventilation d'un encaissement : une case par mode de règlement. Deux
   colonnes suffisent à quatre modes sur un écran de service, et la grille
   retombe d'elle-même sur une colonne en dessous de 480 px. */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--ink);
}
.switch input { width: auto; accent-color: var(--brass); }
.switch span { font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- 4. Boutons ---------- */

button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    padding: 11px 16px;
    cursor: pointer;
    color: var(--text);
    background: transparent;
    transition: transform .1s var(--ease), background .15s var(--ease), border-color .15s var(--ease), opacity .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button:active { transform: scale(.975); }
button:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--brass); color: #1A1305; border-color: var(--brass); }
.btn-primary:hover:not(:disabled) { background: #E7BE58; }

.btn-secondary { background: var(--surface-2); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-dim); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--brass); }

.btn-success { background: var(--sauge); color: #06170E; border-color: var(--sauge); }
.btn-warning { background: var(--amber); color: #1D1003; border-color: var(--amber); }
.btn-danger  { background: transparent; color: var(--wine); border-color: var(--wine); }
.btn-danger:hover:not(:disabled) { background: var(--wine); color: #fff; }

.btn-block { width: 100%; }
.btn-sm { padding: 7px 11px; font-size: 13px; }
.btn-lg { padding: 15px 22px; font-size: 16px; }

.icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--radius-s);
    color: var(--text-dim);
}
.icon-btn:hover { color: var(--brass); border-color: var(--brass); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.is-on { color: var(--brass); border-color: var(--brass); }

/* Réservé aux petits écrans, où le pied du rail n'est plus affiché */
.only-narrow { display: none; }

/* Sans taille imposée, un SVG en ligne prend sa taille par défaut et le bouton
   devient un carré. Les règles plus précises (rail, segments) gardent la main. */
button svg { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- 5. Coquille applicative ---------- */

.shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--rail) 1fr;
    min-height: 100dvh;
}

/* Rail de navigation */
.rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 14px;
    background: var(--surface);
    border-right: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    height: 100dvh;
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}

.rail-mark {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--brass), var(--brass-deep));
    color: #1A1305;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1;
}

.rail-logo {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    object-fit: contain;
    background: var(--paper, rgba(255, 255, 255, .06));
    padding: 3px;
}

/* Réglages de l'établissement */
.logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.logo-preview {
    width: 96px; height: 96px;
    flex: 0 0 96px;
    display: grid; place-items: center;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
    text-align: center;
    padding: 6px;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rail-brand-text { min-width: 0; }
.rail-brand-name {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-brand-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.rail-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--radius-s);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-dim);
    text-align: left;
    border: 0;
}
.rail-link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.rail-link:hover { background: var(--surface-2); color: var(--text); }
.rail-link.active { background: var(--brass-soft); color: var(--brass); font-weight: 600; }

.rail-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    min-width: 21px;
    padding: 2px 6px;
    text-align: center;
    border-radius: 99px;
    background: var(--wine);
    color: #fff;
}

.rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }

.rail-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px 12px;
}
.avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 700;
    color: var(--brass);
}
.rail-user-name { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.rail-user-role { font-size: 11px; color: var(--text-faint); letter-spacing: .05em; text-transform: uppercase; }

/* Zone principale */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 30;
}

.topbar-title { font-family: var(--font-display); font-size: 25px; line-height: 1; }
.topbar-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.clock {
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
}

.content { padding: 22px 26px 96px; flex: 1; }

/* ---------- 6. Blocs de contenu ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 18px;
}

.panel-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 15px;
}
.panel-head h2 { font-size: 16px; }
.panel-head .spacer { margin-left: auto; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.grid { display: grid; gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/**
 * Prise de commande : la carte occupe la colonne large sur ses deux rangs,
 * l'en-tête et le ticket se partagent la colonne étroite. Nommer les zones
 * permet de les réordonner sur mobile sans toucher au HTML.
 */
.split-service {
    grid-template-areas:
        "products head"
        "products cart";
}
.area-head     { grid-area: head; }
.area-products { grid-area: products; }
.area-cart     { grid-area: cart; }

/**
 * Attention aux jetons : --ink est le fond le plus sombre de l'ambiance Nuit,
 * pas la couleur du texte. Le texte, c'est --text (et --text-dim en second
 * plan). Employer --ink ici donnait du texte quasi noir sur fond vert sombre
 * en Nuit, et beige pâle sur blanc cassé en Jour : illisible des deux côtés.
 */
.line-note-btn {
    display: inline-block;
    margin-top: 7px;
    padding: 5px 11px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.line-note-btn:hover,
.line-note-btn:focus-visible {
    border-style: solid;
    border-color: var(--brass);
    color: var(--text);
}

/* Le mot déjà saisi, sur le fond du panier : jetons d'interface, pas de papier */
.line-note {
    margin-top: 7px;
    padding: 6px 9px;
    border-left: 2px solid var(--amber);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: var(--amber-soft);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.45;
}

/* ---------- Gestion d'une table ouverte ---------- */

.manage-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line-soft);
}
.manage-line:last-of-type { border-bottom: 0; }

.manage-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-s);
    background: var(--surface-2);
    color: var(--text);
}
.manage-total strong { font-size: 20px; color: var(--brass); }

.manage-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.manage-edit {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

/* Une fiche de table qui s'ouvre doit le dire */
.ticket.is-openable { cursor: pointer; }
.ticket.is-openable:hover {
    border-color: var(--brass);
    box-shadow: 0 0 0 1px var(--brass-soft);
}

/* ---------- Annuaire des établissements ---------- */

.registry-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line-soft);
}
.registry-line:last-child { border-bottom: 0; }
.registry-line.is-off { opacity: .6; }

.registry-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

/* Dessin d'un mode de règlement, en tête de ligne.

   Les icônes de l'application n'ont pas de dimensions propres : elles les
   reçoivent de leur contexte, et « button svg » suffisait tant qu'elles ne
   vivaient que dans des boutons. Posée dans un conteneur flex, une icône sans
   largeur s'étire à toute la place disponible — le dessin occupait l'écran
   entier. La règle est donc portée ici, avec « flex: 0 0 » qui interdit à la
   fois l'étirement et l'écrasement. */
.registry-name svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--text-dim);
}

/* Avertissement avant une opération sans retour */
.danger-box {
    padding: 14px 16px;
    border: 1px solid var(--wine);
    border-radius: var(--radius-s);
    background: var(--wine-soft);
    color: var(--text);
}
.danger-box strong { display: block; margin-bottom: 8px; font-size: 16px; }
.danger-box p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }

.note-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.chip:hover,
.chip:focus-visible { border-color: var(--brass); background: var(--surface-3); }
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.spacer { margin-left: auto; }

.muted { color: var(--text-dim); font-size: 13.5px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.right { text-align: right; }

.empty {
    text-align: center;
    padding: 34px 18px;
    color: var(--text-dim);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; font-weight: 600; }
.empty p { font-size: 13.5px; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--surface-3);
    color: var(--text-dim);
    border: 1px solid var(--line);
}
.badge-brass  { background: var(--brass-soft); color: var(--brass); border-color: transparent; }
.badge-green  { background: var(--sauge-soft); color: var(--sauge); border-color: transparent; }
.badge-amber  { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.badge-wine   { background: var(--wine-soft);  color: var(--wine);  border-color: transparent; }

/* ---------- 7. Connexion : pavé numérique ---------- */

.login {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}

.login-card {
    width: min(400px, 100%);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-l);
    padding: 30px 28px 26px;
    box-shadow: var(--shadow-lift);
    animation: rise .5s var(--ease) both;
}

.login-mark {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--brass), var(--brass-deep));
    color: #1A1305;
    font-family: var(--font-display);
    font-size: 27px; line-height: 1;
}

.login-card h1 { font-family: var(--font-display); font-size: 30px; font-weight: 400; text-align: center; }
.login-card .lede { text-align: center; color: var(--text-dim); font-size: 13.5px; margin-bottom: 22px; }

.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 6px 0 20px; }
.pin-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: transparent;
    transition: all .18s var(--ease);
}
.pin-dot.filled { background: var(--brass); border-color: var(--brass); transform: scale(1.12); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
    height: 58px;
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.key:hover { background: var(--surface-3); border-color: var(--brass); }
.key-action { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-dim); }
.key-go { background: var(--brass); color: #1A1305; border-color: var(--brass); }

.login-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.login-error {
    background: var(--wine-soft);
    color: var(--wine);
    border: 1px solid color-mix(in srgb, var(--wine) 35%, transparent);
    border-radius: var(--radius-s);
    padding: 10px 12px;
    font-size: 13.5px;
    margin-bottom: 14px;
    animation: shake .35s var(--ease);
}

/* ---------- 8. Prise de commande ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tab {
    padding: 8px 14px;
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
}
.tab:hover { color: var(--text); border-color: var(--brass); }
.tab.active { background: var(--brass); color: #1A1305; border-color: var(--brass); font-weight: 600; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 10px;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 104px;
    padding: 13px;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.product-card::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent, var(--brass));
    opacity: .85;
}
.product-card:hover { border-color: var(--brass); background: var(--surface-3); }
.product-emoji { font-size: 19px; line-height: 1; }
.product-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.product-price {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--brass);
}
.product-flag {
    position: absolute; top: 9px; right: 9px;
    font-family: var(--font-mono); font-size: 10px;
    padding: 2px 6px; border-radius: 4px;
    background: var(--wine); color: #fff;
}

/* Panier */
.cart-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
}
.cart-line:last-of-type { border-bottom: 0; }
.cart-name { font-size: 14.5px; font-weight: 500; }
.cart-unit { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }

.stepper { display: flex; align-items: center; gap: 2px; }
.stepper button {
    width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 16px;
    background: var(--surface-2); border: 1px solid var(--line);
}
.stepper button:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.stepper button:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.stepper .qty {
    width: 38px; text-align: center;
    font-family: var(--font-mono); font-size: 14px; font-weight: 700;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    line-height: 32px; background: var(--ink);
}

.cart-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 16px 0;
    padding-top: 14px;
    border-top: 2px solid var(--line);
}
.cart-total-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.cart-total-value { font-family: var(--font-mono); font-size: 27px; font-weight: 700; color: var(--brass); }

/* ---------- 9. Signature : le ticket ---------- */

.ticket-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 16px;
    align-items: start;
}

.ticket {
    --age: var(--brass);
    position: relative;
    background: var(--paper);
    color: var(--paper-ink);
    border-radius: 3px;
    padding: 20px 17px 17px;
    box-shadow: var(--shadow);
    animation: rise .35s var(--ease) both;
    /* Bord supérieur déchiré, comme un ticket arraché de l'imprimante */
    -webkit-mask-image:
        radial-gradient(6px 6px at 6px -1px, transparent 5.5px, #000 6px),
        linear-gradient(#000, #000);
    mask-image:
        radial-gradient(6px 6px at 6px -1px, transparent 5.5px, #000 6px),
        linear-gradient(#000, #000);
    -webkit-mask-size: 12px 8px, 100% calc(100% - 7px);
    mask-size: 12px 8px, 100% calc(100% - 7px);
    -webkit-mask-position: top left, bottom left;
    mask-position: top left, bottom left;
    -webkit-mask-repeat: repeat-x, no-repeat;
    mask-repeat: repeat-x, no-repeat;
}

.ticket::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 8px;
    height: 3px;
    background: var(--age);
}

.ticket-head {
    display: flex; align-items: flex-start; gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px dashed var(--paper-line);
}
.ticket-no {
    font-family: var(--font-mono);
    font-size: 16px; font-weight: 700;
    letter-spacing: -.02em;
}
.ticket-meta { font-size: 12px; color: color-mix(in srgb, var(--paper-ink) 62%, transparent); margin-top: 2px; }

.ticket-timer {
    margin-left: auto;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--age);
    line-height: 1;
}
.ticket-timer small { display: block; font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .65; margin-top: 3px; }

.ticket.is-late { animation: rise .35s var(--ease) both, flag 1.9s ease-in-out infinite 0.4s; }

.ticket-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--paper-2);
    color: color-mix(in srgb, var(--paper-ink) 75%, transparent);
    margin: 9px 5px 0 0;
}

.ticket-line { padding: 11px 0; border-bottom: 1px dotted var(--paper-line); }
.ticket-line:last-child { border-bottom: 0; padding-bottom: 0; }
.ticket-line-top { display: flex; align-items: baseline; gap: 8px; }
.ticket-qty {
    font-family: var(--font-mono);
    font-size: 15px; font-weight: 700;
    min-width: 26px;
}
.ticket-item { font-size: 15px; font-weight: 600; line-height: 1.25; }
.ticket-note {
    font-size: 12.5px;
    margin-top: 5px;
    padding: 5px 8px;
    border-left: 2px solid var(--amber);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    color: color-mix(in srgb, var(--paper-ink) 85%, transparent);
}
.ticket-line .actions { margin-top: 9px; }
.ticket-line .actions button { padding: 7px 12px; font-size: 12.5px; }

.state {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 3px;
    margin-left: auto;
}
.state-sent      { background: color-mix(in srgb, var(--paper-ink) 10%, transparent); }
.state-preparing { background: #E9A94F; color: #221302; }
.state-ready     { background: #4E9E73; color: #04170D; }
.state-held      { background: transparent; color: color-mix(in srgb, var(--paper-ink) 55%, transparent);
                   border: 1px dashed color-mix(in srgb, var(--paper-ink) 35%, transparent); }

/* ---------- À enlever : ce qui attend au passe ---------- */

/**
 * Le ticket du passe n'est pas un ticket de production : il ne se lit pas, il
 * se saisit. D'où le geste unique en pied de bloc, aussi large que le ticket,
 * atteignable au pouce d'une main qui tient déjà un plateau.
 */
.ticket-pickup .ticket-line:last-of-type { border-bottom: 0; }

.pickup-from {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--paper-ink) 78%, transparent);
}
.pickup-from .state { margin-left: 0; }

.ticket-go {
    width: 100%;
    margin-top: 14px;
    padding: 13px 14px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
}
.ticket-go svg { width: 17px; height: 17px; flex: 0 0 17px; }

/**
 * L'envoi d'un seul article reste possible mais ne se met pas en avant : le
 * geste courant est le plateau entier. Un bouton discret évite qu'on le prenne
 * pour l'action principale et qu'on valide les plats un par un.
 */
.ticket-solo {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--paper-ink) 25%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--paper-ink) 65%, transparent);
    cursor: pointer;
}
.ticket-solo:hover,
.ticket-solo:focus-visible {
    border-color: var(--paper-ink);
    color: var(--paper-ink);
}

/**
 * Une pastille qui bat, pour ce qui refroidit.
 *
 * Le compteur seul se voit de près ; un plat oublié au passe doit se signaler
 * depuis l'autre bout de la salle, sur un téléphone posé sur une desserte.
 */
.rail-count.is-hot { animation: pastille 1.9s ease-in-out infinite; }

/* Halo propre à la pastille : « flag » porte var(--shadow), qui n'a pas de
   sens sur un compteur de 21 px et l'alourdirait. */
@keyframes pastille {
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wine) 45%, transparent); }
}

/* ---------- Service par rangs ---------- */

/**
 * Une ligne retenue reste lisible mais visiblement hors jeu : la cuisine doit
 * pouvoir s'organiser sans jamais la confondre avec ce qui est à faire.
 */
.ticket-line.is-held {
    opacity: .55;
    border-left: 2px solid color-mix(in srgb, var(--paper-ink) 25%, transparent);
    padding-left: 9px;
}
.ticket-line.is-held .ticket-item { font-weight: 500; }

.ticket-hold {
    margin-top: 11px;
    padding: 8px 10px;
    border-radius: var(--radius-s);
    border: 1px dashed color-mix(in srgb, var(--paper-ink) 30%, transparent);
    background: color-mix(in srgb, var(--paper-ink) 4%, transparent);
    color: color-mix(in srgb, var(--paper-ink) 70%, transparent);
    font-size: 12px;
    letter-spacing: .02em;
}

/* Rang de service, choisi ligne par ligne dans le panier et sur la carte */
.course-pick {
    width: auto;
    max-width: 100%;
    margin-top: 7px;
    padding: 5px 28px 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--ink);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/**
 * Le menu déroulant natif ne suit pas toujours le thème : sans couleur
 * explicite, Chrome sous Windows affiche des options noires sur blanc en
 * ambiance Nuit, et l'inverse chez d'autres.
 */
.course-pick option { background: var(--surface); color: var(--text); }

.course-pick:hover { border-color: var(--brass); }
.course-pick:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }

/* ---------- 10. Carte (gestion des plats et boissons) ---------- */

.menu-line {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 13px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-s);
    background: var(--surface-2);
    transition: border-color .15s var(--ease);
}
.menu-line:hover { border-color: var(--line); }
.menu-line.is-off { opacity: .5; }

.menu-chip {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 19px;
    background: var(--ink);
    border: 1px solid var(--line);
}
.menu-name { font-size: 15px; font-weight: 600; }
.menu-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.menu-price { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--brass); }

.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.seg button {
    flex: 1;
    padding: 9px 14px;
    font-size: 13.5px;
    border-radius: 7px;
    color: var(--text-dim);
    border: 0;
}
.seg button.active { background: var(--brass); color: #1A1305; font-weight: 600; }
.seg-block { display: flex; width: 100%; }

/* À cinq boutons, la barre segmentée déborde d'un écran de tablette :
   on la laisse passer à la ligne plutôt que d'écraser les libellés. */
.seg-wrap { flex-wrap: wrap; }
.seg-wrap > button { flex: 1 1 30%; }

/* ---------- 11. Alertes de stock ---------- */

.alert-line {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
}
.alert-line:last-child { border-bottom: 0; }
.alert-bar { flex: 0 0 4px; height: 34px; border-radius: 99px; background: var(--wine); }
.alert-bar.low { background: var(--amber); }
.alert-qty { margin-left: auto; font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }

/* ---------- 12. Fenêtre modale ---------- */

.backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(4, 12, 9, .62);
    backdrop-filter: blur(5px);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: fade .18s var(--ease);
    overflow-y: auto;
}

.modal {
    width: min(540px, 100%);
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-lift);
    animation: rise .26s var(--ease) both;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
}
.modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 { font-family: var(--font-display); font-size: 23px; font-weight: 400; }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot {
    display: flex; gap: 9px;
    /* Quatre boutons ne tiennent pas sur une ligne de téléphone : ils passent
       à la ligne plutôt que d'élargir la fenêtre au-delà de l'écran (2.42.0). */
    flex-wrap: wrap;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--line-soft);
}
.modal-foot .btn-primary { margin-left: auto; }

/* ---------- 13. Notifications ---------- */

.toasts {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 120;
    display: flex; flex-direction: column; gap: 9px;
    max-width: min(360px, calc(100vw - 32px));
}
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 15px;
    border-radius: var(--radius-s);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brass);
    box-shadow: var(--shadow-lift);
    font-size: 14px;
    animation: slide-in .26s var(--ease) both;
}
.toast.out { animation: slide-out .22s var(--ease) forwards; }
.toast-ok   { border-left-color: var(--sauge); }
.toast-err  { border-left-color: var(--wine); }
.toast-warn { border-left-color: var(--amber); }

/* ---------- 14. Navigation mobile ---------- */

.tabbar { display: none; }

/* ---------- 15. Animations ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes slide-out { to { opacity: 0; transform: translateX(18px); } }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes flag { 50% { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--wine) 55%, transparent); } }
@keyframes spin { to { transform: rotate(360deg); } }

.boot {
    min-height: 100dvh;
    display: grid; place-items: center;
    gap: 14px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.spinner {
    width: 26px; height: 26px;
    border: 2px solid var(--line);
    border-top-color: var(--brass);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto;
}

/* ---------- 16. Adaptation aux petits écrans ---------- */

@media (max-width: 1100px) {
    .split, .split-even { grid-template-columns: 1fr; }

    /**
     * Tout s'empile : l'en-tête passe avant la carte. Le serveur arrive à la
     * table, saisit son numéro et son mot pour la cuisine sans avoir à faire
     * défiler l'intégralité du menu pour atteindre le ticket.
     */
    .split-service {
        grid-template-areas:
            "head"
            "products"
            "cart";
    }

    /* Le numéro de table est la première chose qu'on saisit : il se voit */
    .field-table input {
        font-family: var(--font-mono);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: .04em;
        padding: 13px 14px;
    }
}

@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }

    .rail {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        height: auto;
        flex-direction: row;
        gap: 2px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        border-right: 0;
        border-top: 1px solid var(--line);
        z-index: 60;
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(14px);
    }
    .rail-brand, .rail-foot { display: none; }
    .only-narrow { display: inline-flex; }
    .rail-link {
        flex-direction: column;
        gap: 3px;
        flex: 1;
        padding: 8px 4px;
        font-size: 10.5px;
        font-weight: 600;
        text-align: center;
        letter-spacing: .02em;
    }
    .rail-link.active { background: transparent; }
    .rail-count {
        position: absolute;
        transform: translate(14px, -6px);
        margin: 0;
        font-size: 10px;
    }

    .topbar { padding: 13px 16px; }
    .topbar-title { font-size: 21px; }
    .clock { display: none; }
    .content { padding: 16px 16px 92px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .ticket-wall { grid-template-columns: 1fr; }
    .toasts { bottom: 88px; left: 16px; right: 16px; max-width: none; }
    .modal-head h2 { font-size: 20px; }
}

@media (max-width: 460px) {
    .field-row { grid-template-columns: 1fr; }
    .field-grid { grid-template-columns: 1fr; }
    .menu-line { grid-template-columns: auto 1fr; grid-template-areas: "chip name" "price actions"; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- 17. Impression ---------- */

@media print {
    .rail, .topbar, .toasts { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ---------- 18. Second niveau de la carte ---------- */

.tabs-sub {
    margin: -6px 0 16px;
    padding-left: 2px;
    border-left: 2px solid var(--line);
    padding-left: 12px;
}

.tab-sm {
    padding: 6px 12px;
    font-size: 12.5px;
    background: transparent;
    border-color: transparent;
    color: var(--text-dim);
}
.tab-sm:hover { background: var(--surface-2); border-color: var(--line); }
.tab-sm.active { background: var(--surface-3); color: var(--brass); border-color: var(--brass); }

.subgroup { margin-top: 16px; }
.subgroup:first-child { margin-top: 0; }

.subgroup-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 2px 8px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 10px;
}
.subgroup-head .muted { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }

.menu-line.is-child { margin-left: 18px; border-left: 2px solid var(--line); }

/* ---------- 19. Ajout à une table ouverte ---------- */

.attach-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    margin-bottom: 14px;
    border-radius: var(--radius-s);
    background: var(--brass-soft);
    border-left: 3px solid var(--brass);
    font-size: 13.5px;
}

/* ---------- 20. Encaissement ---------- */

.pay-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line);
}
.pay-total {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--brass);
    text-align: right;
}

.pay-items { max-height: 190px; overflow-y: auto; padding: 10px 0; }
.pay-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
}
.pay-line .mono:first-child { min-width: 30px; color: var(--text-dim); }

/* ---------- Encaissement article par article ----------

   Le caissier doit lire d'un coup d'œil trois choses : ce qui reste dû, ce
   qu'il vient de cocher pour le convive en face de lui, et ce que les
   convives précédents ont déjà réglé. Le contraste porte cette hiérarchie —
   les lignes relâchées s'effacent sans disparaître, celles déjà payées plus
   encore, car elles ne sont plus actionnables. */

.pay-progress {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-s);
    font-size: 13px;
    color: var(--text-dim);
}
.pay-progress strong { font-size: 15px; color: var(--text); }

/* Acomptes déjà versés sur l'addition (2.42.0) */
.pay-deposits {
    margin-top: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.pay-deposit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 7px 8px 7px 13px;
    font-size: 13px;
}
.pay-deposit + .pay-deposit { border-top: 1px solid var(--line-soft); }
.pay-deposit .spacer { margin-left: auto; }
.seg-block button:disabled { opacity: .45; cursor: not-allowed; }

.pay-pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 6px;
}
.pay-pick-actions { display: flex; gap: 6px; }

.pay-picker {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-s);
}

.pay-pick {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
}
.pay-pick:last-child { border-bottom: 0; }

/* Relâchée : lisible, mais visiblement hors de l'encaissement en cours */
.pay-pick.is-off { opacity: .5; }

/* Réglée par un autre convive : plus rien n'est actionnable dessus */
.pay-pick.is-paid { opacity: .42; background: var(--surface-2); }

.pay-pick-box {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.pay-pick-box.is-on {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}
.pay-pick-box.is-on::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(-45deg) translate(1px, -1px);
}
.pay-pick-box.is-done {
    border-style: dashed;
    color: var(--text-faint);
    cursor: default;
}
.pay-pick-box.is-done svg { width: 13px; height: 13px; }

.pay-pick-body { min-width: 0; flex: 1 1 auto; }
.pay-pick-name { font-size: 14px; font-weight: 550; }

.pay-pick-qty { flex: 0 0 auto; }
.pay-pick-qty button { width: 30px; height: 30px; }

.pay-pick-amount {
    flex: 0 0 auto;
    min-width: 76px;
    text-align: right;
    font-size: 14px;
}

.pay-selected {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
    font-size: 13px;
    color: var(--text-dim);
}
.pay-selected strong {
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 700;
    color: var(--brass);
}

/* Ligne figée par un ticket signé, dans la gestion de table */
.manage-line.is-settled { opacity: .5; }

.pay-vats { padding-top: 10px; border-top: 1px dashed var(--line); }
.pay-vat { display: flex; gap: 10px; font-size: 12.5px; color: var(--text-dim); padding: 3px 0; }

.seg button svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }

/* ---------- 21. Livre de caisse ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.stat-value {
    font-family: var(--font-mono);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 500;
    padding: 0 10px 9px 0;
    border-bottom: 1px solid var(--line);
}
.ledger th.right, .ledger td.right { text-align: right; padding-right: 0; }
.ledger td { padding: 9px 10px 9px 0; border-bottom: 1px dashed var(--line-soft); }
.ledger tr:last-child td { border-bottom: 0; }
.ledger td.mono { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .ledger { font-size: 12.5px; }
    .ledger th:nth-child(3), .ledger td:nth-child(3) { display: none; }
}

/* ---------- 22. Équipe ---------- */

.dot-online {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sauge);
    margin-left: 7px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px var(--sauge-soft);
}

.menu-line .menu-chip { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--brass); }

/* Le rail mobile défile quand les entrées sont nombreuses */
@media (max-width: 860px) {
    .rail {
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .rail::-webkit-scrollbar { display: none; }
    /* Sans width auto, le width: 100% du style de base sert de base de flex
       et chaque onglet occupe tout l'écran : la barre déborde au lieu de défiler. */
    .rail-link { flex: 0 0 auto; width: auto; min-width: 62px; }
}

/* ---------- 23. Cuisson et composition ---------- */

.cooking-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.cooking-choice {
    padding: 20px 14px;
    font-size: 16px;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-transform: capitalize;
}
.cooking-choice:hover { background: var(--brass); color: #1A1305; border-color: var(--brass); }

.product-cooking {
    position: absolute; top: 9px; right: 9px;
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px;
    background: var(--amber-soft); color: var(--amber);
}

.ticket-cooking {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 3px;
    background: #E9A94F;
    color: #221302;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.recipe-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px 38px;
    gap: 8px;
    align-items: center;
}
.recipe-line:has(input[id^="r-name"]) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 76px 82px 38px;
}
.recipe-qty { text-align: right; font-family: var(--font-mono); }

@media (max-width: 560px) {
    .recipe-line, .recipe-line:has(input[id^="r-name"]) {
        grid-template-columns: minmax(0, 1fr) 72px 38px;
    }
    .recipe-line input[id^="r-unit"] { grid-column: 1 / -1; }
}

/* =========================================================
   Ouverture de caisse
   =========================================================

   Le tableau des coupures est fait pour être rempli debout, au pouce, sur
   une tablette posée près du tiroir. Les champs sont donc larges et
   espacés : compter des billets en visant une case de dix pixels au
   milieu du coup de feu n'arriverait jamais. */

.banner-block {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--amber-soft);
    border: 1px solid var(--amber);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.banner-block strong { display: block; color: var(--amber); margin-bottom: 4px; }
.banner-block p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.banner-block p + p { margin-top: 6px; }
.banner-block > div { flex: 1 1 320px; min-width: 0; }
.banner-block .btn-primary { flex: 0 0 auto; }

.denom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 16px 0 4px;
}
.denom-grid .eyebrow { display: block; margin-bottom: 8px; }

.denom-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.denom-table th {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 400;
    text-align: left;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-soft);
}
.denom-table th.right, .denom-table td.right { text-align: right; }
.denom-table td { padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.denom-table tr:last-child td { border-bottom: 0; }
.denom-table td.mono { font-variant-numeric: tabular-nums; color: var(--text-dim); }

.denom-qty {
    width: 84px;
    padding: 8px 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: 15px;
}
.denom-qty:focus { outline: none; border-color: var(--brass); background: var(--surface-3); }

/* Les flèches de champ numérique invitent à cliquer quarante fois pour
   saisir quarante pièces : on les retire, le clavier est plus rapide. */
.denom-qty::-webkit-outer-spin-button,
.denom-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.denom-qty { -moz-appearance: textfield; appearance: textfield; }

.denom-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.denom-total span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.denom-total strong { font-family: var(--font-display); font-size: 30px; color: var(--brass); font-variant-numeric: tabular-nums; }

/* ---------- Écran de clôture ---------- */

.modal-wide { width: min(960px, 100%); }

/* Chaque mode de règlement se replie : on ouvre la carte pour la rapprocher
   du bordereau du terminal, on laisse les espèces fermées si le tiroir tombe
   juste. Un pavé de cinquante lignes ouvert d'office ne se lit pas. */
.pay-block {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-s);
    padding: 0 14px;
    margin-bottom: 10px;
    background: var(--surface-2);
}
.pay-block > summary {
    display: flex; align-items: baseline; gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
}
.pay-block > summary::-webkit-details-marker { display: none; }
.pay-block > summary::before {
    content: "▸";
    color: var(--text-faint);
    transition: transform .18s var(--ease);
}
.pay-block[open] > summary::before { transform: rotate(90deg); }
.pay-block > summary strong { margin-left: auto; color: var(--brass); font-variant-numeric: tabular-nums; }
.pay-block > p { margin: 0 0 10px; font-size: 13px; }
.pay-block > table { margin-bottom: 14px; }

.drawer-variance {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    border: 1px solid var(--line-soft);
    background: var(--surface-2);
}
.drawer-variance strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.drawer-variance.is-ok { border-color: var(--sauge); background: var(--sauge-soft); }
.drawer-variance.is-ok strong { color: var(--sauge); }
.drawer-variance.is-off { border-color: var(--wine); background: var(--wine-soft); }
.drawer-variance.is-off strong { color: var(--wine); }

.carried {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.carried.is-off { color: var(--wine); }

/* Clôtures déjà produites dans la journée : identifiées par leur numéro,
   situées par les horaires de caisse. */
.prior-closures {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-s);
    background: var(--surface-2);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.prior-closures .eyebrow { display: block; margin-bottom: 8px; }
.prior-closures p { margin: 8px 0 0; font-size: 13px; }
.prior-line {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 4px 0;
}
.prior-line .mono:last-child { margin-left: auto; color: var(--brass); }

/* =========================================================
   Bandeau d'installation — écran de connexion
   ========================================================= */

.install-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
    padding-top: env(safe-area-inset-top);
    animation: install-drop .32s var(--ease);
}
.install-bar[hidden] { display: none; }

@keyframes install-drop { from { transform: translateY(-100%); } to { transform: none; } }

.install-bar-in {
    display: flex; align-items: center; gap: 14px;
    max-width: 980px;
    margin: 0 auto;
    padding: 12px 18px;
}

.install-bar-icon {
    flex: none;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-s);
    background: var(--brass-soft);
    color: var(--brass);
}
.install-bar-icon svg { width: 20px; height: 20px; }

.install-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-bar-text strong { font-size: 14px; font-weight: 600; }
.install-bar-text span { font-size: 12.5px; color: var(--text-dim); }

.install-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

.install-bar-close {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.install-bar-close:hover { color: var(--text); border-color: var(--line); }
.install-bar-close svg { width: 16px; height: 16px; }

/* Marche à suivre, dépliée quand le navigateur n'installe pas tout seul */
.install-guide {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 18px 14px 70px;
}
.install-guide strong { display: block; font-size: 13px; margin-bottom: 6px; }
.install-guide ol { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 12.5px; }
.install-guide li { padding: 2px 0; }

/* La carte de connexion descend sous le bandeau plutôt que de passer dessous */
body.has-install-bar .login { padding-top: calc(var(--install-h, 66px) + 24px); }

@media (max-width: 640px) {
    .install-bar-in { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
    .install-bar-text span { display: none; }
    .install-bar-icon { width: 32px; height: 32px; }
    .install-guide { padding: 0 12px 12px; }
}

/* =========================================================
   Mode école
   =========================================================

   Le bandeau est volontairement le plus visible de l'application, et il
   ne se referme pas. Un mode école discret serait pire que pas de mode
   école du tout : l'équipe doit savoir en permanence si ce qu'elle tape
   compte pour de vrai. Les rayures diagonales sont là pour qu'on le
   reconnaisse du bout de la salle, sans lire. */

.banner-training {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
    color: #1a1200;
    border: 2px solid #a87400;
    background: repeating-linear-gradient(
        135deg,
        #ffd24d, #ffd24d 14px,
        #ffc107 14px, #ffc107 28px
    );
}
.banner-training strong {
    display: block;
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.banner-training p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.banner-training p + p { margin-top: 6px; }
.banner-training > div { flex: 1 1 320px; min-width: 0; }
.banner-training button { flex: 0 0 auto; }

/* La barre latérale et la barre du haut changent aussi de teinte : le
   bandeau peut se retrouver hors écran sur une vue longue qu'on a fait
   défiler, la teinte, elle, reste. */
body[data-training="1"] .rail { border-right: 3px solid #ffc107; }
body[data-training="1"] .topbar { border-bottom: 3px solid #ffc107; }
body[data-training="1"] .topbar-title::after {
    content: " · ESSAI";
    color: #a87400;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Mode école par personne (2.40.0).
   Dans l'écran Équipe, la ligne de la personne le dit en jaune, comme le
   bandeau qu'elle voit de son côté ; l'encadrement en service réel voit un
   rappel discret de qui s'exerce. */
.badge-training {
    background: #ffd24d;
    color: #1a1200;
    border: 1px solid #a87400;
    font-weight: 600;
}
.btn-school { white-space: nowrap; }
.banner-training-info {
    display: flex;
    gap: 14px;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #e8c766;
    border-left: 5px solid #ffc107;
    background: #fff8e1;
    color: #3a2d00;
}
.banner-training-info strong { display: block; margin-bottom: 2px; }
.banner-training-info p { margin: 0; font-size: 13px; line-height: 1.5; color: #5a4600; }

/* =========================================================
   Compteur de pourboires dans la barre latérale
   =========================================================

   Le montant se lit d'un coup d'œil pendant le service, sans ouvrir
   quoi que ce soit. La pastille n'est pas rouge comme les compteurs
   d'en-cours : un pourboire n'est pas une tâche à traiter, c'est une
   bonne nouvelle. */

.rail-tips .rail-count {
    background: var(--amber);
    color: #1a1200;
    min-width: 0;
    font-size: 11.5px;
    letter-spacing: 0;
}

/* =========================================================
   Import d'une carte depuis un document
   =========================================================

   L'écran de relecture est le seul endroit du logiciel où l'on
   relit vite une liste qu'une machine a produite. Il est donc fait
   pour le balayage : une colonne par chose à vérifier, toujours à
   la même place, et les lignes douteuses qui se signalent seules.

   Une ligne décochée reste lisible plutôt que de disparaître : on
   doit pouvoir revenir dessus sans avoir à retrouver quelle case
   on a décochée trois écrans plus haut. */

.import-head,
.import-line {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 92px 96px minmax(0, 180px);
    gap: 10px;
    align-items: center;
}

.import-head {
    margin-bottom: 8px;
    padding: 0 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.import-line {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface-2);
}

.import-line input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }

/* Décochée : l'oeil la saute, la main la retrouve. */
.import-line.is-off { opacity: .45; }

@media (max-width: 720px) {
    .import-head { display: none; }

    .import-line {
        grid-template-columns: 24px minmax(0, 1fr);
        row-gap: 8px;
    }

    .import-line > :nth-child(3),
    .import-line > :nth-child(4) { grid-column: 2; }
    .import-line > :nth-child(5) { grid-column: 2; }
}

/* Avertissement de relecture : ni une erreur — rien n'est cassé — ni une
   simple remarque. La responsabilité des taux de TVA se joue ici, et le
   ton doit le dire sans faire fuir. */
.warn-box {
    padding: 14px 16px;
    border: 1px solid var(--amber);
    border-radius: var(--radius-s);
    background: var(--amber-soft);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
}
.warn-box strong { display: block; margin-bottom: 6px; }

/* =========================================================
   Menus à prix fixe (2.29.0)

   Deux écrans, deux besoins. En salle, le serveur compose vite,
   au pouce, debout : des cibles larges et un état visible à un
   mètre. En composition, l'exploitant lit un tableau de TVA :
   de la densité et de l'alignement.
   ========================================================= */

/* ---- Prise de commande ---- */

.product-card-menu { min-height: 128px; }

.product-menu-sum {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-dim);
    text-transform: lowercase;
}

.menu-group { margin-bottom: 20px; }

.menu-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.menu-option { margin-bottom: 8px; }

.menu-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface-2);
    color: var(--text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.menu-option-btn:hover { border-color: var(--brass); }

.menu-option.is-picked .menu-option-btn {
    border-color: var(--brass);
    background: var(--brass-soft);
}

/* La pastille garde sa place vide : sans largeur fixe, cocher un choix
   décalerait tous les intitulés de la liste d'un demi-centimètre. */
.menu-option-mark {
    flex: 0 0 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: var(--brass);
}

.menu-option.is-picked .menu-option-mark { border-color: var(--brass); }

.menu-option-name { flex: 1 1 auto; min-width: 0; }

.menu-option-sup {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--amber);
}

.menu-option-cooking {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 2px 32px;
}

.menu-option-cooking .chip.active {
    border-color: var(--brass);
    background: var(--brass-soft);
    color: var(--brass);
}

/* ---- Le menu dans le ticket ---- */

.cart-line-menu { border-left: 2px solid var(--brass); padding-left: 10px; }

.cart-menu-choices { margin-top: 8px; }

.cart-menu-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text);
}

.cart-menu-group {
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ---- Composition d'un menu ---- */

.formula-group {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface-2);
}

.formula-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.formula-group-label {
    flex: 1 1 160px;
    min-width: 0;
    font-weight: 600;
}

.formula-mini { flex: 0 0 auto; }

.formula-mini span {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.formula-mini input { width: 72px; }
.formula-mini select { width: 140px; }

.formula-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.formula-option-name { flex: 1 1 200px; min-width: 0; }

.formula-sup { display: flex; align-items: center; gap: 8px; }

.formula-sup span {
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.formula-sup input { width: 88px; }

.formula-add {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.formula-add select { flex: 1 1 auto; min-width: 0; }

/* ---- L'aperçu de répartition ---- */

.formula-preview {
    width: 100%;
    margin-bottom: 14px;
    border-collapse: collapse;
    font-size: 13px;
}

.formula-preview th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: left;
}

.formula-preview td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.formula-preview .right { text-align: right; }
.formula-preview .mono { font-family: var(--font-mono); }

.formula-preview-total td {
    border-top: 1px solid var(--brass);
    border-bottom: none;
}

/* Même ton que l'avertissement de relecture d'import : ce n'est pas une
   panne, c'est une décision fiscale qui n'appartient pas au logiciel. */
.formula-warn {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--amber);
    border-radius: var(--radius-s);
    background: var(--amber-soft);
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .formula-group-head { flex-direction: column; align-items: stretch; }
    .formula-mini input,
    .formula-mini select { width: 100%; }
    .formula-add { flex-direction: column; }
    .formula-preview { font-size: 12px; }
    .formula-preview th:nth-child(3),
    .formula-preview td:nth-child(3) { display: none; }
}

.formula-rule {
    height: 1px;
    margin: 20px 0;
    background: var(--line);
}

/* ---------- Imprimantes (Établissement, 2.35.0) ---------- */

.printer-group {
    padding: 14px 0 6px;
    border-top: 1px solid var(--line-soft);
}
.printer-group:first-of-type { border-top: 0; }

.printer-group-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.printer-group-head .eyebrow { display: block; margin-bottom: 2px; }

.printer-none { padding: 8px 0 10px; }

.printer-line .printer-main { flex: 1 1 340px; min-width: 0; }

.printer-url {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.printer-url input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
}
.printer-url .btn-sm { flex: 0 0 auto; }

/* ---------- Formules : nombre total d'articles (2.36.0) ---------- */

.formula-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
}
.formula-presets em { font-style: italic; font-weight: 600; }

.menu-count {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
}

/* ---------- Import : formules lues dans le document (2.37.0) ---------- */

.import-formulas {
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
}

.import-formula {
    display: grid;
    grid-template-columns: 24px 1fr 110px;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line-soft);
}
.import-formula:last-of-type { border-bottom: 0; }
.import-formula.is-off { opacity: .45; }
.import-formula input[type="checkbox"] { width: 18px; height: 18px; margin: 10px 0 0; }

.import-formula-line {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 8px;
    font-size: 13px;
}
.import-check { display: inline-flex; gap: 6px; align-items: center; }
.import-check input { width: 16px; height: 16px; margin: 0; }
.import-sup { display: inline-flex; gap: 8px; align-items: center; color: var(--text-dim); }
.import-sup input { width: 80px; }

@media (max-width: 640px) {
    .import-formula { grid-template-columns: 24px 1fr; }
    .import-formula > :nth-child(3) { grid-column: 2; }
}

/* =========================================================
   Réservations (2.38.0)

   Un carnet qu'on lit debout, en début de service : l'heure et le
   nombre de couverts d'abord, en gros, alignés en colonne ; le nom
   ensuite ; les gestes à droite. La jauge du service se lit de loin.
   ========================================================= */

.content > .panel + .panel,
.content > .panel + details,
.content > .bk-strip + .panel,
.content > .warn-box + .panel,
.content > .panel + .bk-strip { margin-top: 16px; }

.bk-online-off { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.bk-online-off strong { margin-bottom: 2px; }
.bk-note { margin-top: 16px; }

.bk-pending { border-color: var(--amber); margin-bottom: 16px; }

.bk-tabs { margin-bottom: 16px; }

.bk-strip {
    display: flex; align-items: center; gap: 8px 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.bk-strip-days { display: flex; align-items: center; gap: 6px; flex: 1 1 460px; min-width: 0; }
.bk-strip-tools { display: flex; align-items: center; gap: 8px; }
.bk-days {
    display: flex; gap: 6px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    padding: 2px;
    scrollbar-width: thin;
}
.bk-day {
    position: relative;
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 54px;
    padding: 7px 6px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.bk-day:hover { border-color: var(--brass); }
.bk-day.active { background: var(--brass); border-color: var(--brass); color: #1A1305; }
.bk-day.is-today:not(.active) { border-color: var(--brass-deep); }
.bk-day-name { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.bk-day-num { font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 1.1; }
.bk-day-covers { font-family: var(--font-mono); font-size: 11px; opacity: .8; }
.bk-day-dot {
    position: absolute; top: 5px; right: 5px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--amber);
}
.bk-jump { width: auto; max-width: 160px; }

.bk-fill { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.bk-fill strong { color: var(--text); font-size: 16px; }
.bk-fill.is-high strong { color: var(--amber); }
.bk-fill.is-over strong { color: var(--wine); }

.bk-bar { height: 6px; border-radius: 99px; background: var(--ink); overflow: hidden; margin-bottom: 12px; }
.bk-bar span { display: block; height: 100%; background: var(--sauge); border-radius: inherit; }
.bk-bar.is-high span { background: var(--amber); }
.bk-bar.is-over span { background: var(--wine); }

.bk-slots { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-slot {
    display: flex; flex-direction: column; align-items: center;
    min-width: 46px;
    padding: 4px 4px 3px;
    border-radius: 6px;
    background: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-faint);
}
.bk-slot strong { font-size: 13px; color: var(--text); min-height: 16px; }
.bk-slot.has { background: var(--sauge-soft); color: var(--text-dim); }
.bk-slot.full { background: var(--amber-soft); color: var(--amber); }

.bk-list { gap: 0; }
.bk-row {
    display: grid;
    grid-template-columns: 74px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px dashed var(--line);
}
.bk-list > .bk-row:first-child { border-top: 0; }
.bk-time strong { font-size: 17px; }
.bk-when { display: block; font-size: 12px; color: var(--text-dim); }
.bk-covers {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
}
.bk-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-who .menu-sub a { color: inherit; }
.bk-note-line {
    margin-top: 4px;
    font-size: 13px;
    color: var(--amber);
    white-space: pre-line;
}
.bk-actions { justify-content: flex-end; }
.bk-row.is-cancelled, .bk-row.is-refused, .bk-row.is-no_show { opacity: .62; }
.bk-row.is-seated .bk-covers { background: var(--brass-soft); border-color: var(--brass); color: var(--brass); }

.bk-released summary,
.bk-recent summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.bk-recent { margin-bottom: 16px; border-color: var(--sauge); }
.bk-recent[open] summary { margin-bottom: 10px; }

.bk-trace { margin-top: 16px; }
.bk-trace-row {
    display: grid;
    grid-template-columns: 128px auto minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px dashed var(--line);
    font-size: 13px;
}
.bk-trace-row:first-of-type { border-top: 0; }
.bk-trace-at { color: var(--text-dim); font-size: 12px; }
.bk-trace-what { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
    .bk-trace-row { grid-template-columns: 1fr; gap: 3px; }
}
.bk-released[open] summary { margin-bottom: 10px; }

.bk-warn-list { margin: 6px 0 10px 18px; padding: 0; }

/* ---- Réglages ---- */

.bk-settings { max-width: 980px; }
.bk-service-edit {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--ink);
}
.bk-sv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
}
.bk-weekdays { display: flex; gap: 4px; flex-wrap: wrap; }
.bk-wd { position: relative; cursor: pointer; }
.bk-wd input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-wd span {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
}
.bk-wd input:checked + span { background: var(--brass); border-color: var(--brass); color: #1A1305; }
.bk-wd input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }

.bk-closure {
    display: grid;
    grid-template-columns: 160px 160px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.bk-snippet {
    margin: 0 0 10px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    background: var(--ink);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}
.bk-preview-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.bk-preview {
    padding: 16px;
    border-radius: var(--radius-s);
    background: #EFE7D7;
    color: #1F1A17;
    border: 1px dashed var(--line);
}

@media (max-width: 720px) {
    .bk-row {
        grid-template-columns: 62px 40px minmax(0, 1fr);
        row-gap: 8px;
    }
    .bk-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .bk-closure { grid-template-columns: 1fr 1fr; }
    .bk-closure .bk-cl-label { grid-column: 1 / 2; }
    .bk-online-off { flex-wrap: wrap; }
    .bk-strip-tools { flex: 1 1 100%; }
    .bk-jump { max-width: none; flex: 1; }
}

@media (max-width: 560px) {
    .bk-cta-label { display: none; }
    .bk-sv-grid { grid-template-columns: 1fr 1fr; }
    .bk-sv-grid > .field:first-child { grid-column: 1 / -1; }
}

/* Table obligatoire sur place (2.41.0) : l'astérisque le dit d'avance, la
   bordure rouge désigne le champ quand l'envoi a été refusé. */
.field .required { color: var(--wine, #b03a2e); font-weight: 700; }
.field input.is-invalid {
    border-color: var(--wine, #b03a2e);
    box-shadow: 0 0 0 3px rgba(176, 58, 46, .18);
}