/* ============================================================
scorta-d.css — feuille de style unique de Scorta, direction « D »
Pizzeria Oliva Nera. Préparée le 25 septembre 2026 (refonte D).
Remplace scorta.css pour les pages migrées. MÊMES NOMS de jetons
et de classes que scorta.css : une page passe de l'ancien au
nouveau look en changeant UNE ligne (le ). Le kiosque garde
scorta.css tant qu'on ne l'a pas basculé (un lundi).
Direction D (validée par Vincent le 24-25 sept.) :
- une seule police, Geist (Geist Mono seulement pour les codes) ;
- fond neutre chaud, cartes blanches à filet fin ;
- olive = action principale, terracotta = urgent / danger / liens,
safran = à surveiller ;
- clair ET sombre pensés ensemble : mêmes jetons, deux jeux de valeurs.
Utilisation dans une page :
(sans le lien Geist, la page tombe sur la police système : lisible, rien ne casse.)
+ le petit script anti-clignotement dans (inchangé).
============================================================ */
/* ---------- 1. JETONS ---------- */
:root{
/* accents (thème clair) — les noms historiques sont gardés */
--sc-crust:#1C1F17; /* encre : bandeaux sombres */
--sc-ember:#3F4A2B; /* action principale (olive) : boutons, onglet actif. Toujours lisible sous du blanc. */
--sc-sur-ember:#FFFFFF; /* texte posé sur --sc-ember */
--sc-lien:#A6452C; /* liens, « Tout voir » (terracotta) */
--sc-tomate:#A6452C; /* danger, urgent, stock négatif (terracotta) */
--sc-basilic:#2F7A45; /* succès, validé */
--sc-safran:#8A5A0B; /* à surveiller */
--sc-olive:#3F4A2B; /* accent calme : icônes, filets de service */
--sc-olive-doux:#ECEEE3;/* pastille d'icône */
--sc-creme:#F7F4EE; /* texte sur fond sombre */
/* variantes « texte » (identiques en clair, plus claires en sombre) */
--sc-olive-t:#3F4A2B; --sc-urgent-t:#A6452C; --sc-ok-t:#2F7A45; --sc-bientot-t:#8A5A0B;
/* surfaces (thème clair) */
--sc-fond:#F7F4EE;
--sc-carte:#FFFFFF;
--sc-creux:#EFEBE2; /* zone enfoncée : journal, champ, segment */
--sc-trait:#E6E0D4;
--sc-texte:#1C1F17;
--sc-gris:#5F5A4F; /* texte secondaire — 6,5:1 sur blanc */
--sc-gris-icone:#736D60;
--sc-titre:#1C1F17;
--sc-barre:rgba(255,255,255,.94);
/* typographie : une seule famille. Les anciens noms pointent tous sur Geist,
pour que les pages migrées changent d'allure sans toucher leur HTML. */
--sc-ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
--sc-titrage:var(--sc-ui);
--sc-texte-f:var(--sc-ui);
--sc-mono:var(--sc-ui); /* ex-« machine à écrire » : devient Geist + chiffres alignés */
--sc-code:"Geist Mono",ui-monospace,Menlo,Consolas,monospace; /* vrais codes : lots, EAN, journal */
/* rythme */
--sc-r:18px; /* rayon des cartes */
--sc-r-s:12px; /* rayon des boutons et champs */
--sc-tap:44px; /* hauteur minimale d'une cible tactile */
--sc-pas:14px;
--sc-ombre:0 1px 2px rgba(40,30,10,.05);
--sc-nav-h:84px; /* hauteur de la barre du bas (téléphone) */
}
/* Thème sombre. Le script anti-clignotement pose data-theme sur .
Les accents historiques (--sc-ember, --sc-olive, --sc-tomate, --sc-basilic, --sc-safran) prennent
un ton MOYEN : lisible sous du texte blanc (≈3,5:1, comme l'actuel) ET sur fond sombre (≈4,6:1),
car les pages s'en servent des deux façons. Les composants neufs écrivent en --sc-*-t (plus clair). */
[data-theme="dark"]{
--sc-crust:#0B0C09;
--sc-ember:#7A8C4C;
--sc-sur-ember:#FFFFFF;
--sc-lien:#EE8F72;
--sc-olive-t:#B4C28F; --sc-urgent-t:#EE8F72; --sc-ok-t:#7CC08A; --sc-bientot-t:#E8B660;
--sc-tomate:#D3624A;
--sc-basilic:#4E9660;
--sc-safran:#B0832C;
--sc-olive:#7A8C4C;
--sc-olive-doux:#2A3020;
--sc-fond:#121310;
--sc-carte:#1C1D19;
--sc-creux:#25271F;
--sc-trait:#2D2F27;
--sc-texte:#F1EEE6;
--sc-gris:#ABA696;
--sc-gris-icone:#9A9588;
--sc-titre:#F1EEE6;
--sc-barre:rgba(28,29,25,.94);
--sc-ombre:0 1px 2px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-theme="dark"]){
--sc-crust:#0B0C09;
--sc-ember:#7A8C4C;
--sc-sur-ember:#FFFFFF;
--sc-lien:#EE8F72;
--sc-olive-t:#B4C28F; --sc-urgent-t:#EE8F72; --sc-ok-t:#7CC08A; --sc-bientot-t:#E8B660;
--sc-tomate:#D3624A;
--sc-basilic:#4E9660;
--sc-safran:#B0832C;
--sc-olive:#7A8C4C;
--sc-olive-doux:#2A3020;
--sc-fond:#121310;
--sc-carte:#1C1D19;
--sc-creux:#25271F;
--sc-trait:#2D2F27;
--sc-texte:#F1EEE6;
--sc-gris:#ABA696;
--sc-gris-icone:#9A9588;
--sc-titre:#F1EEE6;
--sc-barre:rgba(28,29,25,.94);
--sc-ombre:0 1px 2px rgba(0,0,0,.4);
}
}
/* ---------- 2. BASE ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
font-family:var(--sc-ui);
font-size:16px; line-height:1.5;
background:var(--sc-fond); color:var(--sc-texte);
padding:0 0 72px;
-webkit-font-smoothing:antialiased;
transition:background .2s ease, color .2s ease;
}
h1{ font-family:var(--sc-ui); font-weight:700; font-size:clamp(22px,5vw,28px);
letter-spacing:-.03em; line-height:1.15; color:var(--sc-titre); }
/* h2 = titre de section discret (était : mono majuscule + filet) */
h2{ font-family:var(--sc-ui); font-size:13px; font-weight:600; letter-spacing:0;
text-transform:none; color:var(--sc-gris); margin:26px 0 10px; }
a{ color:var(--sc-lien); }
b,strong{ font-weight:600; }
.sc-wrap{ max-width:980px; margin:0 auto; padding:0 16px; }
.sc-wrap.etroit{ max-width:640px; }
/* chiffres : alignés, même police */
.sc-num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
/* ---------- 3. BARRE DU HAUT ---------- */
.sc-top{
position:sticky; top:0; z-index:50;
display:flex; align-items:center; gap:10px;
padding:10px 16px;
background:var(--sc-fond);
border-bottom:1px solid transparent;
}
.sc-top .sc-retour{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-width:var(--sc-tap); min-height:var(--sc-tap); padding:0 12px;
font-family:var(--sc-ui); font-size:14px; font-weight:600;
text-decoration:none; color:var(--sc-texte); background:var(--sc-carte);
border:1px solid var(--sc-trait); border-radius:13px;
}
.sc-top .sc-page{ font-family:var(--sc-ui); font-weight:700; font-size:18px; letter-spacing:-.02em;
color:var(--sc-titre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-top .sc-espace{ flex:1; }
.sc-etat{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--sc-gris); }
.sc-dot{ width:8px; height:8px; border-radius:50%; background:var(--sc-gris); flex-shrink:0; }
.sc-dot.ok{ background:var(--sc-basilic); }
.sc-dot.ko{ background:var(--sc-tomate); }
.sc-bascule{
min-width:var(--sc-tap); min-height:var(--sc-tap);
border:1px solid var(--sc-trait); background:var(--sc-carte); color:var(--sc-texte);
border-radius:13px; font-size:17px; cursor:pointer; line-height:1;
}
@media (max-width:560px){
.sc-top{ padding:8px 12px; gap:8px; }
.sc-top .sc-retour .mot{ display:none; }
.sc-top .sc-retour{ padding:0; }
.sc-top .sc-page{ font-size:17px; }
}
/* ---------- 4. CARTES ---------- */
.sc-carte{
background:var(--sc-carte); border:1px solid var(--sc-trait);
border-radius:var(--sc-r); padding:18px; margin:14px 0; box-shadow:var(--sc-ombre);
}
/* D : plus de liseré à gauche. La nuance passe par le fond et le filet. */
.sc-carte.accent{ border-color:color-mix(in srgb, var(--sc-olive) 35%, var(--sc-trait)); }
.sc-carte.danger{ border-color:color-mix(in srgb, var(--sc-tomate) 40%, var(--sc-trait));
background:color-mix(in srgb, var(--sc-tomate) 5%, var(--sc-carte)); }
.sc-carte.calme{ background:var(--sc-creux); border-color:transparent; box-shadow:none; }
.sc-sous{ color:var(--sc-gris); font-size:14px; }
/* ---------- 5. BOUTONS ---------- */
.sc-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-height:var(--sc-tap); padding:0 18px;
font-family:var(--sc-ui); font-size:15.5px; font-weight:600;
color:var(--sc-texte); background:var(--sc-carte);
border:1px solid var(--sc-trait); border-radius:var(--sc-r-s); cursor:pointer;
transition:filter .12s ease, transform .06s ease, background .12s ease;
}
.sc-btn:hover{ filter:brightness(.97); }
.sc-btn:active{ transform:translateY(1px); }
.sc-btn.primaire{ background:var(--sc-ember); color:var(--sc-sur-ember); border-color:transparent; }
.sc-btn.danger{ background:var(--sc-tomate); color:#fff; border-color:transparent; }
.sc-btn.fantome{ background:transparent; color:var(--sc-texte); border:1px solid var(--sc-trait); }
.sc-btn.large{ width:100%; }
.sc-btn.grand{ min-height:54px; font-size:17px; border-radius:14px; }
.sc-btn:disabled, .sc-btn.primaire:disabled, .sc-btn.danger:disabled, .sc-btn.fantome:disabled{
background:var(--sc-creux); color:var(--sc-gris); border-color:transparent; cursor:default; filter:none; }
:focus-visible{ outline:3px solid color-mix(in srgb, var(--sc-olive) 60%, transparent); outline-offset:2px; border-radius:6px; }
/* ---------- 6. CHAMPS ---------- */
.sc-champ{ display:block; margin:12px 0; }
.sc-champ > span{ display:block; font-size:13px; font-weight:600; color:var(--sc-gris); margin-bottom:6px; }
.sc-champ input, .sc-champ select, .sc-champ textarea, input.sc-in{
width:100%; min-height:var(--sc-tap); padding:10px 12px;
font-family:var(--sc-ui); font-size:16px;
color:var(--sc-texte); background:var(--sc-carte);
border:1px solid var(--sc-trait); border-radius:var(--sc-r-s);
}
.sc-champ input:focus, input.sc-in:focus{ border-color:var(--sc-olive); outline:none;
box-shadow:0 0 0 3px color-mix(in srgb, var(--sc-olive) 20%, transparent); }
.sc-duo{ display:flex; gap:12px; flex-wrap:wrap; }
.sc-duo > *{ flex:1 1 220px; }
.sc-scan{ font-family:var(--sc-code); font-size:17px; border:2px solid var(--sc-olive); }
/* ---------- 7. TABLEAU → LISTE SUR TÉLÉPHONE ---------- */
.sc-tab{ width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums; }
.sc-tab th, .sc-tab td{ text-align:left; padding:11px 10px; border-bottom:1px solid var(--sc-trait); }
.sc-tab th{ font-size:12.5px; font-weight:600; color:var(--sc-gris); }
.sc-tab tbody tr:last-child td{ border-bottom:0; }
.sc-tab .c{ text-align:center; }
.sc-tab .r{ text-align:right; }
.sc-defile{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:720px){
.sc-tab.carte-mobile thead{ display:none; }
.sc-tab.carte-mobile tr{
display:block; background:var(--sc-carte); border:1px solid var(--sc-trait);
border-radius:var(--sc-r); margin-bottom:10px; padding:6px 14px;
}
.sc-tab.carte-mobile td{
display:flex; justify-content:space-between; gap:14px;
border-bottom:1px solid var(--sc-trait); padding:9px 0; text-align:left;
}
.sc-tab.carte-mobile tr td:last-child{ border-bottom:0; }
.sc-tab.carte-mobile td::before{ content:attr(data-th); flex-shrink:0; font-size:12.5px; color:var(--sc-gris); }
}
/* ---------- 8. ÉTIQUETTES / PASTILLES ---------- */
.sc-tag{ display:inline-block; padding:3px 10px; border-radius:999px;
font-size:12px; font-weight:600; line-height:1.6;
background:var(--sc-creux); color:var(--sc-gris); margin:1px 2px 1px 0; }
.sc-tag.ok{ background:color-mix(in srgb, var(--sc-basilic) 15%, transparent); color:var(--sc-ok-t); }
.sc-tag.alerte{ background:color-mix(in srgb, var(--sc-safran) 16%, transparent); color:var(--sc-bientot-t); }
.sc-tag.danger{ background:color-mix(in srgb, var(--sc-tomate) 14%, transparent); color:var(--sc-urgent-t); }
/* ---------- 9. JOURNAL (reste en police de code) ---------- */
.sc-journal{
font-family:var(--sc-code); font-size:12.5px; line-height:1.65; white-space:pre-wrap;
background:var(--sc-creux); border-radius:var(--sc-r-s);
padding:14px; margin-top:12px; max-height:340px; overflow-y:auto;
}
.sc-journal .ok{ color:var(--sc-ok-t); }
.sc-journal .err{ color:var(--sc-urgent-t); }
.sc-journal .warn{ color:var(--sc-bientot-t); }
.sc-journal .muted{ color:var(--sc-gris); }
/* ---------- 10. BANDEAUX ---------- */
.sc-bandeau{ border-radius:var(--sc-r-s); padding:12px 14px; font-size:14.5px; margin:12px 0;
border:1px solid var(--sc-trait); background:var(--sc-creux); }
.sc-bandeau.ok{ border-color:color-mix(in srgb, var(--sc-basilic) 35%, transparent); background:color-mix(in srgb, var(--sc-basilic) 9%, transparent); }
.sc-bandeau.alerte{ border-color:color-mix(in srgb, var(--sc-safran) 40%, transparent); background:color-mix(in srgb, var(--sc-safran) 10%, transparent); }
.sc-bandeau.danger{ border-color:color-mix(in srgb, var(--sc-tomate) 38%, transparent); background:color-mix(in srgb, var(--sc-tomate) 8%, transparent); }
/* ---------- 11. ÉTATS : VIDE, CHARGEMENT, HORS LIGNE ---------- */
.sc-vide{ text-align:center; padding:44px 20px; color:var(--sc-gris); }
.sc-vide .pic{ font-size:36px; display:block; margin-bottom:10px; opacity:.7; }
.sc-vide strong{ display:block; color:var(--sc-texte); font-size:16px; margin-bottom:4px; }
/* Squelette : blocs gris animés pendant le chargement.
*/
.sc-squelette{ border-radius:var(--sc-r-s); background:var(--sc-creux); position:relative; overflow:hidden; margin:8px 0; min-height:16px; }
.sc-squelette::after{ content:""; position:absolute; inset:0;
background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--sc-carte) 70%, transparent), transparent);
transform:translateX(-100%); animation:sc-lueur 1.3s ease-in-out infinite; }
@keyframes sc-lueur{ to{ transform:translateX(100%); } }
/* Hors ligne : bandeau en haut de page quand le serveur ne répond pas.
Serveur injoignable — Tailscale est-il allumé ?
*/
.sc-horsligne{ display:none; position:sticky; top:0; z-index:60; padding:10px 16px;
background:var(--sc-tomate); color:#fff; font-size:14px; font-weight:600; text-align:center; }
.sc-horsligne.on{ display:block; }
/* ---------- 12. BARRE D'ACTION COLLANTE ---------- */
.sc-action{
position:sticky; bottom:0; z-index:40;
display:flex; gap:10px; align-items:center;
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
background:var(--sc-barre); border-top:1px solid var(--sc-trait);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.sc-action .resume{ flex:1; font-size:13.5px; color:var(--sc-gris); }
/* ---------- 13. VOILE DE CONFIRMATION ---------- */
.sc-voile{ position:fixed; inset:0; z-index:100; display:none;
background:rgba(10,10,8,.5); padding:16px; overflow-y:auto; }
.sc-voile.on{ display:block; }
.sc-voile > .boite{ max-width:620px; margin:6vh auto; background:var(--sc-carte);
border-radius:var(--sc-r); padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
/* ============================================================
NOUVEAUX COMPOSANTS D (utilisés au fil de la migration des pages)
============================================================ */
/* ---------- 14. LISTE EN BLOC ----------
*/
.sc-liste{ background:var(--sc-carte); border:1px solid var(--sc-trait); border-radius:var(--sc-r); overflow:hidden; }
.sc-ligne{ display:flex; align-items:center; gap:12px; padding:13px 16px; min-height:56px;
color:inherit; text-decoration:none; border-bottom:1px solid var(--sc-trait); }
.sc-ligne:last-child{ border-bottom:0; }
.sc-ligne:active{ background:var(--sc-creux); }
.sc-ligne .ic{ width:38px; height:38px; border-radius:11px; background:var(--sc-olive-doux); color:var(--sc-olive-t);
display:flex; align-items:center; justify-content:center; flex:none; }
.sc-ligne .corps{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sc-ligne .corps b{ font-size:15px; font-weight:600; }
.sc-ligne .corps small{ font-size:12.5px; color:var(--sc-gris); }
.sc-ligne .code{ font-family:var(--sc-code); }
/* Pastille d'urgence : urgent (terracotta) · bientot (safran) · plus tard (gris) */
.sc-pastille{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap;
background:var(--sc-creux); color:var(--sc-gris); }
.sc-pastille.urgent{ background:color-mix(in srgb, var(--sc-tomate) 14%, transparent); color:var(--sc-urgent-t); }
.sc-pastille.bientot{ background:color-mix(in srgb, var(--sc-safran) 16%, transparent); color:var(--sc-bientot-t); }
/* ---------- 15. CHIFFRES CLÉS ----------
*/
.sc-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.sc-kpi{ background:var(--sc-carte); border:1px solid var(--sc-trait); border-radius:16px; padding:12px 14px;
display:flex; flex-direction:column; gap:2px; color:inherit; text-decoration:none; }
.sc-kpi b{ font-size:20px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sc-kpi small{ font-size:12px; color:var(--sc-gris); font-weight:500; }
.sc-kpi.bientot{ background:color-mix(in srgb, var(--sc-safran) 13%, var(--sc-carte)); border-color:transparent; }
.sc-kpi.bientot b, .sc-kpi.bientot small{ color:var(--sc-bientot-t); }
.sc-kpi.urgent{ background:color-mix(in srgb, var(--sc-tomate) 11%, var(--sc-carte)); border-color:transparent; }
.sc-kpi.urgent b, .sc-kpi.urgent small{ color:var(--sc-urgent-t); }
/* ---------- 16. SEGMENTS (onglets courts) ---------- */
.sc-seg{ display:flex; gap:4px; padding:4px; background:var(--sc-creux); border-radius:12px; }
.sc-seg button{ flex:1 1 0; min-height:36px; border:0; border-radius:9px; background:transparent;
font:inherit; font-size:13.5px; font-weight:500; color:var(--sc-gris); cursor:pointer; }
.sc-seg button.on, .sc-seg button[aria-selected="true"]{ background:var(--sc-carte); color:var(--sc-texte); font-weight:600;
box-shadow:0 1px 2px rgba(40,30,10,.10); }
/* ---------- 17. CLOCHE « À TRAITER » ---------- */
.sc-cloche{ position:relative; min-width:var(--sc-tap); min-height:var(--sc-tap);
border:1px solid var(--sc-trait); background:var(--sc-carte); color:var(--sc-texte);
border-radius:13px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.sc-cloche .sc-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
border-radius:999px; background:var(--sc-tomate); color:var(--sc-fond); border:2px solid var(--sc-fond);
font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.sc-cloche .sc-badge:empty{ display:none; }
/* Feuille qui monte du bas (panneau de la cloche) */
.sc-feuille{ position:fixed; inset:0; z-index:110; display:none; background:rgba(10,10,8,.45); }
.sc-feuille.on{ display:block; }
.sc-feuille > .panneau{ position:absolute; left:0; right:0; bottom:0; max-height:86vh; overflow-y:auto;
background:var(--sc-fond); border-radius:26px 26px 0 0; padding:10px 16px calc(24px + env(safe-area-inset-bottom));
box-shadow:0 -10px 30px rgba(0,0,0,.2); animation:sc-monte .22s ease-out; }
.sc-feuille > .panneau::before{ content:""; display:block; width:40px; height:5px; border-radius:3px;
background:var(--sc-trait); margin:0 auto 12px; }
@keyframes sc-monte{ from{ transform:translateY(40px); opacity:.6; } }
.sc-aller{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.sc-aller a{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; min-height:64px;
border-radius:14px; background:var(--sc-creux); color:var(--sc-texte); text-decoration:none; font-size:12px; font-weight:600; }
.sc-aller a svg{ color:var(--sc-olive-t); }
/* ---------- 18. BARRE DU BAS (navigation) ----------
Une page qui a la barre ajoute la classe sc-avec-nav sur . */
.sc-nav{ position:fixed; left:0; right:0; bottom:0; z-index:70;
/* 30 sept. 2026 : plus de hauteur figée sur env(safe-area-inset-bottom). Sur l'iPhone de Vincent, la barre
« montait au milieu de l'écran » au défilement et redescendait en remontant : iOS peut renvoyer un inset
bas fantaisiste pendant le défilement, et la barre (ancrée en bas, icônes alignées en haut) grandissait vers
le haut. L'inset est maintenant plafonné à 34 px (valeur réelle d'un iPhone) et la hauteur suit le contenu :
rendu identique quand l'inset est normal, plus de dérive sinon. */
min-height:calc(var(--sc-nav-h) - 20px + min(env(safe-area-inset-bottom, 0px), 34px));
padding:8px 6px min(env(safe-area-inset-bottom, 0px), 34px);
display:flex; justify-content:space-around; align-items:flex-start;
background:var(--sc-barre); border-top:1px solid var(--sc-trait);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.sc-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
min-width:58px; min-height:var(--sc-tap); color:var(--sc-gris-icone); text-decoration:none; font-size:11px; font-weight:500; }
.sc-nav a[aria-current="page"]{ color:var(--sc-texte); font-weight:600; }
.sc-nav a.centre{ min-width:54px; width:54px; height:54px; margin-top:-4px; border-radius:18px;
background:var(--sc-ember); color:var(--sc-sur-ember); }
body.sc-avec-nav{ padding-bottom:calc(var(--sc-nav-h) + min(env(safe-area-inset-bottom, 0px), 34px) + 12px); }
/* Téléphone : le bouton central n'a pas de libellé, et le groupe « Outils » (18b) n'existe pas. */
.sc-nav a.centre span{ display:none; }
.sc-nav .outils{ display:none; }
/* ---------- 18b. BUREAU (≥ 1024 px) : barre latérale à gauche, icône + libellé, plus le groupe « Outils »
(29 sept. 2026, demande de Vincent). Le HTML est produit par nav.js (OUTILS). ---------- */
@media (min-width:1024px){
.sc-nav{ top:0; bottom:0; right:auto; width:220px; height:auto; flex-direction:column; justify-content:flex-start;
gap:4px; padding:22px 12px; border-top:0; border-right:1px solid var(--sc-trait); overflow-y:auto; }
.sc-nav a{ flex-direction:row; justify-content:flex-start; gap:12px; width:100%; min-height:46px; padding:0 12px;
border-radius:12px; font-size:14px; }
.sc-nav a svg{ flex-shrink:0; }
.sc-nav a[aria-current="page"]{ background:var(--sc-creux); }
.sc-nav a.centre{ width:100%; height:auto; min-height:46px; margin:6px 0 10px; border-radius:12px; }
.sc-nav a.centre span{ display:inline; font-weight:600; }
.sc-nav .outils{ display:flex; flex-direction:column; gap:4px; margin-top:14px; padding-top:14px; border-top:1px solid var(--sc-trait); }
.sc-nav .outils .titre{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sc-gris); padding:0 12px 6px; }
body.sc-avec-nav{ padding-bottom:40px; padding-left:220px; }
.sc-feuille > .panneau{ left:auto; right:24px; bottom:auto; top:24px; width:420px; border-radius:22px; }
}
/* ---------- 19. MODE CUISINE ----------
Gardé pour compatibilité ; le kiosque reste sur scorta.css tant qu'il
n'est pas basculé (un lundi). */
.sc-cuisine{
--sc-fond:#121310; --sc-carte:#1C1D19; --sc-creux:#25271F;
--sc-trait:#2D2F27; --sc-texte:#F1EEE6; --sc-gris:#ABA696;
height:100%; overflow:hidden; font-family:var(--sc-ui);
}
.sc-cuisine .scene{ display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; flex:1; padding:24px; }
.sc-cuisine .scene .gros{ font-weight:700; letter-spacing:-.03em; font-size:clamp(34px,6.5vw,76px); line-height:1.03; }
.sc-cuisine .scene .sous{ font-size:clamp(18px,2.6vw,30px); margin-top:14px; }
.sc-cuisine .scene.ok{ background:#1F4A2A; }
.sc-cuisine .scene.ko{ background:#5A2018; }
/* ---------- 20. IMPRESSION ---------- */
@media print{
.sc-top, .sc-action, .sc-bascule, .sc-retour, .sc-nav, .sc-cloche, .sc-horsligne{ display:none !important; }
body{ background:#fff; color:#000; padding:0; }
.sc-carte, .sc-liste{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
}
/* ---------- 21. MOUVEMENT ---------- */
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; }
}
/* ---------- 22. LIGNES « À TRAITER » (vague 2) ---------- */
.sc-ligne.a-traiter.urgent .ic{ background:color-mix(in srgb, var(--sc-tomate) 14%, transparent); color:var(--sc-urgent-t); }
.sc-ligne.a-traiter.bientot .ic{ background:color-mix(in srgb, var(--sc-safran) 16%, transparent); color:var(--sc-bientot-t); }
.sc-ligne .fl{ color:var(--sc-gris-icone); display:flex; }
.sc-feuille .sc-vide{ padding:24px 10px; }