/* Charte UI You Sushi — « Encre » v2 — tokens
   L'encre n'est plus le noir d'un gabarit fintech : c'est le bleu-canard #055B71 des
   illustrations « petit chef » du studio, et le point rouge #E9494A qui les ponctue.
   Polices : Outfit (titres, chiffres) + Figtree (texte), celles des maquettes 2026 des
   menus, licence OFL, servies depuis ./fonts. Les deux ont des chiffres tabulaires (tnum). */

@font-face{font-family:"Outfit";font-weight:400;font-display:swap;src:url("fonts/Outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:600;font-display:swap;src:url("fonts/Outfit-600.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-display:swap;src:url("fonts/Outfit-700.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:800;font-display:swap;src:url("fonts/Outfit-800.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url("fonts/Figtree-400.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:italic;font-display:swap;src:url("fonts/Figtree-400-Italic.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url("fonts/Figtree-500.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url("fonts/Figtree-700.woff2") format("woff2")}

:root{
  --bg:#FFFFFF; --surface:#F2F5F6; --surface-2:#E3EAEC;
  --ink:#055B71;        /* titres, chiffres, actif, primaire : l'encre de la marque */
  --ink-2:#28464F;      /* texte courant */
  --ink-3:#55707A;      /* secondaire, étiquettes, en-têtes de colonnes (4,8:1 sur --surface) */
  --line:#D9E2E4; --line-strong:#055B71;
  --hero-bg:#055B71; --hero-ink:#FFFFFF; --hero-ink-2:#B9D6DD; --hero-line:rgba(255,255,255,.14);
  --accent:#055B71; --accent-ink:#FFFFFF;
  --dot:#E9494A;        /* le point rouge : « il y a quelque chose à faire ici ». Jamais du texte. */
  --hl-1:#F9C8BC;       /* saumon (peau du petit chef) : litige */
  --hl-2:#FCE46C;       /* jaune du site : à payer / brouillon */
  --hl-3:#9CE4B4;       /* menthe du site : payé / ok */
  --hl-4:#CFE6EC;       /* encre diluée : canal / filtre */
  --hl-ink:#055B71;
  --pos:#127A3E; --neg:#C93536; --warn:#8A5A00; --warn-bg:#FDF1C4; --neg-bg:#FDEEED;
  --hero-pos:#B6F0C8; --hero-neg:#FFC9C4;   /* hausses et baisses lisibles SUR le bloc héros */
  /* séries de graphique : une série = --cat-1 (l'encre). Les suivantes seulement pour des
     catégories (canaux, moyens de paiement), jamais une couleur par restaurant. */
  --cat-1:#055B71; --cat-2:#3A8CA3; --cat-3:#B7791F; --cat-4:#C9573F; --cat-5:#2E8B57; --cat-6:#6E7F86;
  --r-lg:16px; --r-sm:6px; --r-btn:999px;   /* deux rayons + la pilule, pas un de plus */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --sidebar-w:240px; --drawer-w:420px;
  --f-display:"Outfit","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 0 rgba(5,91,113,.05),0 8px 24px -12px rgba(5,91,113,.22);
  --t-fast:120ms; --t-move:200ms; --ease:cubic-bezier(.2,.7,.2,1);
}
/* THÈME : CLAIR PAR DÉFAUT, SOMBRE SUR CLIC (17/09/2026). La préférence système ne
   s'applique plus : le sombre imposé par Windows a été jugé peu lisible. Une interface
   passe en sombre uniquement quand une bascule « Mode nuit » pose data-theme="dark". */
:root[data-theme="dark"]{
  --bg:#0A1518; --surface:#10222A; --surface-2:#173038;
  --ink:#E6F1F4; --ink-2:#B8CCD2; --ink-3:#7E9AA2;
  --line:#1E3840; --line-strong:#E6F1F4;
  --hero-bg:#E6F1F4; --hero-ink:#055B71; --hero-ink-2:#3F6C79; --hero-line:rgba(5,91,113,.14);
  --accent:#E6F1F4; --accent-ink:#055B71;
  --hl-1:#4A2A26; --hl-2:#4A4014; --hl-3:#1B3D2B; --hl-4:#173844; --hl-ink:#E6F1F4;
  --pos:#5FD39A; --neg:#FF7B7B; --warn:#F2C25A; --warn-bg:#3A2E10; --neg-bg:#3A1A1C;
  --hero-pos:#127A3E; --hero-neg:#B02E2F;
  --cat-1:#E6F1F4; --cat-2:#6FB8CC; --cat-3:#E0A84A; --cat-4:#EE8A74; --cat-5:#6CC690; --cat-6:#9AAAB0;
  --shadow:0 8px 24px -12px rgba(0,0,0,.6);
}

/* QUATRE FORMATS (18/09/2026) : téléphone ≤ 760 · tablette 761–1099 · bureau 1100–1899 ·
   grand écran ≥ 1900 (le 34 pouces). Audit du 18/09 : avec le seul point de rupture à 760 px,
   la tablette recevait un tableau COUPÉ (la colonne « État » d'Hygiène sortait du cadre à
   820 px) et le 34 pouces une colonne de 1 180 px perdue au milieu de 3 440.
   - Téléphone et tablette partagent la COQUE TACTILE (barre du bas, périmètre en pilule) :
     une tablette de cuisine se touche. Seul le contenu change (une colonne / deux colonnes).
   - Grand écran : toute l'interface grandit d'UN palier (html{zoom} 1,15) — à 100 %, un corps
     de 15 px ne se lit pas à un mètre d'un 34 pouces. Les @media restent évalués sur la largeur
     RÉELLE : les mises en page « ≥ 1900 » s'appliquent à l'interface agrandie.
     Les paliers 1,3 (≥ 2400) et 1,45 (≥ 3000) ont été retirés le 30/09/2026 : à 3 440 × 1 440
     ils ne laissaient que ~990 px de haut utiles (7 avis visibles, jugé « trop zoomé »). La
     largeur d'un grand écran sert à la MISE EN PAGE (colonnes en plus, détail ancré), pas à grossir.
     ⚠️ `zoom` multiplie AUSSI 100dvh : une barre latérale en height:100dvh mesurait 2 088 px
     pour 1 440 d'écran (pied invisible, vu le 18/09 sur les fiches). Toute hauteur plein
     écran s'écrit donc var(--vh), jamais 100vh / 100dvh. */
:root{--zoom:1; --vh:calc(100dvh / var(--zoom)); --gutter:24px; --tap:40px}
@media (max-width:760px){:root{--gutter:16px}}
@media (min-width:1900px){:root{--zoom:1.15; --gutter:32px}}
html{zoom:var(--zoom)}
/* Le doigt : 44 px sur la coque tactile (≤ 1099 px) ET sur tout écran touché, quelle que soit
   sa largeur (une tablette de cuisine fait 1 280 px de large). */
@media (pointer:coarse),(max-width:1099px){:root{--tap:44px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink-2)}
body{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1;text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Marque : le vrai logo, teinté à l'encre courante par masque (noir du PNG = encre, blanc = transparent) */
.ys-mark{display:inline-block;width:28px;height:28px;flex:none;background:var(--ink);
  -webkit-mask:url("brand/mark-96.png") center/contain no-repeat;mask:url("brand/mark-96.png") center/contain no-repeat}
.ys-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none;vertical-align:middle}

/* Texte */
.ys-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.ys-num{font-family:var(--f-display);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}
.ys-verdict{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.25;letter-spacing:-.015em;max-width:38ch;text-wrap:pretty}
.ys-fraicheur{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.ys-fraicheur[data-perime]{color:var(--neg);font-weight:500}

/* Boutons : un verbe précis, une pilule */
.ys-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:var(--tap);padding:0 18px;border-radius:var(--r-btn);
  font-family:var(--f-body);font-weight:700;font-size:14px;background:var(--accent);color:var(--accent-ink);transition:opacity var(--t-fast),transform var(--t-fast)}
.ys-btn:hover{opacity:.88}.ys-btn:active{transform:translateY(1px)}
.ys-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ys-btn--sec{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ys-btn--ghost{background:transparent;color:var(--ink-2)}
.ys-btn--danger{background:transparent;color:var(--neg);box-shadow:inset 0 0 0 1px var(--line)}

/* Étiquettes d'état : la couleur EST l'état */
.ys-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-btn);font-size:12.5px;font-weight:500;background:var(--hl-3);color:var(--hl-ink);white-space:nowrap}
.ys-chip--warn{background:var(--warn-bg);color:var(--warn)}
.ys-chip--litige{background:var(--hl-1)}.ys-chip--todo{background:var(--hl-2)}.ys-chip--info{background:var(--hl-4)}

/* Champs */
.ys-input{font:inherit;height:var(--tap);max-width:100%;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:var(--ink-2)}
.ys-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--surface-2)}
.ys-input--bad{border-color:var(--neg)}

/* Surfaces */
.ys-panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.ys-hero{background:var(--hero-bg);color:var(--hero-ink);border-radius:var(--r-lg);padding:24px}
.ys-meter{height:6px;background:var(--surface-2);border-radius:var(--r-btn);overflow:hidden}
.ys-meter i{display:block;height:100%;background:var(--ink)}
.ys-meter i.warn{background:var(--warn)}
.ys-skeleton{background:var(--surface);border-radius:var(--r-sm);min-height:1em}   /* pas de miroitement */
kbd{font-family:var(--f-body);font-size:11.5px;padding:1px 6px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}

/* ==== ARCHÉTYPES (charte v3, 21/09/2026) — les briques que les coques par métier partagent ====
   La peau est commune ; le squelette dépend du métier : Cockpit, Atelier, Lecture, Terrain,
   Commande, File, Lanceur, Panneau (voir SKILL.md). Chaque brique est calquée sur le leader
   du métier ; aucune ne porte de couleur en dur. Icônes : trait 1,6 px, currentColor. */

/* Barre de période + comparaison — UNE par app, en tête de TOUS les écrans, et elle voyage
   d'un écran à l'autre comme le périmètre (Toast Now, Shopify, Stripe). La Batcave avait trois
   systèmes de période indépendants. Sert aussi d'onglets d'état à compteur dans une File
   (« À répondre · 47 ») : même pilule, même état pressé. */
.ys-periode,.ys-etats{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ys-periode button,.ys-etats button,.ys-periode select{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);max-width:100%;padding:0 14px;border-radius:var(--r-btn);font-size:13.5px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.ys-periode button[aria-pressed="true"],.ys-etats button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:700;box-shadow:none}
.ys-etats button .n{font-weight:400;opacity:.8}

/* Rangée de raccourcis ronds sous le chiffre (Qonto) — la place des icônes dans un Cockpit.
   Quatre au plus, choisis par profil ; le point rouge = quelque chose attend derrière. */
.ys-raccourcis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ys-raccourcis>*{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:6px;font-size:12.5px;line-height:1.2;color:var(--ink-2);text-align:center;min-width:0}
.ys-raccourcis .rond{width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;position:relative;transition:background var(--t-fast)}
.ys-raccourcis>*:hover .rond{background:var(--surface-2)}
.ys-raccourcis svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ys-raccourcis .ys-dot{position:absolute;top:2px;right:2px}

/* Tuile d'état (Terrain, Lanceur) — l'icône dit QUOI, la couleur dit OÙ ON EN EST (ePack,
   Octopus, Traqfood). Seule exception à R4 : une tuile sans état reste interdite.
   fait = menthe + heure et prénom · afaire = jaune + compte et échéance · retard = rouge. */
.ys-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:761px){.ys-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ys-tuile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;align-content:start;justify-items:start;min-height:104px;min-width:0;padding:14px 12px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg);position:relative;transition:transform var(--t-fast)}
.ys-tuile:active{transform:translateY(1px)}
.ys-tuile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ys-tuile svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ys-tuile b{font-size:15px;line-height:1.15;color:var(--ink)}
.ys-tuile small{font-size:12.5px;line-height:1.3;color:var(--ink-3)}
.ys-tuile[data-etat="fait"]{background:var(--hl-3);border-color:transparent}
.ys-tuile[data-etat="afaire"]{background:var(--hl-2);border-color:transparent}
.ys-tuile[data-etat="fait"] :is(b,small),.ys-tuile[data-etat="afaire"] :is(b,small){color:var(--hl-ink)}
.ys-tuile[data-etat="fait"] svg,.ys-tuile[data-etat="afaire"] svg{stroke:var(--hl-ink)}
.ys-tuile[data-etat="retard"]{background:var(--neg-bg);border-color:var(--neg)}
.ys-tuile[data-etat="retard"] small{color:var(--neg);font-weight:700}
.ys-tuile .ys-dot{position:absolute;top:10px;right:10px}

/* Pas-à-pas − valeur + — aucune saisie au clavier : gants, mains mouillées, tablette murale
   (Octopus, FoodDocs, Choco). La valeur arrive PRÉREMPLIE ; hors plage → data-hors. */
.ys-pas{display:inline-grid;grid-template-columns:var(--tap) minmax(64px,auto) var(--tap);align-items:center;text-align:center;height:var(--tap);border-radius:var(--r-btn);box-shadow:inset 0 0 0 1px var(--line);font-weight:700;color:var(--ink);background:var(--bg)}
.ys-pas button{all:unset;cursor:pointer;height:100%;display:grid;place-items:center;font-size:20px;line-height:1;border-radius:var(--r-btn)}
.ys-pas button:active{background:var(--surface)}
.ys-pas input{all:unset;width:100%;text-align:center;font:inherit;font-variant-numeric:tabular-nums}
.ys-pas[data-hors]{box-shadow:inset 0 0 0 2px var(--neg);color:var(--neg)}
.ys-pas[data-vide]{grid-template-columns:var(--tap);background:var(--surface);box-shadow:none}

/* Barre d'action collée en bas (panier, « Enregistrer les 6 relevés », « Valider et copier ») —
   l'action sous le pouce (Choco, Octopus, Partoo). Sur la coque tactile elle se pose AU-DESSUS
   de la barre du bas. */
.ys-panier{position:sticky;bottom:0;z-index:3;display:grid;gap:8px;padding:10px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.ys-panier .ligne{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.ys-panier .ligne b{color:var(--ink)}
.ys-panier .ys-btn{justify-content:center;height:52px;font-size:15px}
@media (max-width:1099px){.ys-panier[data-sur-barre]{bottom:calc(64px + env(safe-area-inset-bottom));padding-bottom:12px}}

/* Bouton central de la barre du bas (Terrain, Commande) — l'app sert à FAIRE (Traqfood). */
.ys-centre .rond{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;margin-top:-22px;box-shadow:0 0 0 4px var(--bg)}
.ys-centre .rond svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}