/* ============ Kitsune — thème « yatai » (stand de rue japonais) ============
   Couleurs relevées sur le logo officiel : orange #F47016, orange clair #F78E11, vert « Manga » #6E9238,
   vert feuillage #6EA431, crème du renard #E8D895, contour #231F20.
   Signature : en-tête « noren » (rideau fendu) et tickets façon shokken (ticket repas japonais). */
:root{
  --bg:#F3E6C0; --paper:#FFF8E6; --ink:#1E1E21; --muted:#6E6450; --line:#E2CF9C;
  --tai:#F47016; --tai-soft:#FCE0C8; --tai-ink:#A84A08; --wait-ink:#7A5A0E; --froid:#557525; --froid-soft:#E6EFC9;
  --cafe:#7A4A2A; --cafe-soft:#EEDCCB; --direct:#76683F; --ok:#4A6A12; --wait:#8F6A12;
  --kitsune:#F47016; --kitsune-2:#F78E11; --washi:#E8D895; --matcha:#6EA431; --manga:#6E9238; --sumi:#231F20;
  --num:"Dela Gothic One", "Zen Kaku Gothic New", system-ui, sans-serif;
  --body:"Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s:8px; --r-m:14px; --r-l:22px;
  --lift:0 1px 0 rgba(30,30,33,.10), 0 6px 14px -10px rgba(30,30,33,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17171A; --paper:#232327; --ink:#F4E7C6; --muted:#A99C80; --line:#38363A;
    --tai:#FF9226; --tai-soft:#3E2814; --tai-ink:#FF9226; --wait-ink:#E0B655; --froid:#A9C55A; --froid-soft:#273117;
    --cafe:#D9A27A; --cafe-soft:#38291D; --direct:#C4B38A; --ok:#A9C55A; --wait:#E0B655;
    --lift:0 1px 0 rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --tai-ink:#FF9226; --wait-ink:#E0B655;
  --bg:#17171A; --paper:#232327; --ink:#F4E7C6; --muted:#A99C80; --line:#38363A;
  --tai:#FF9226; --tai-soft:#3E2814; --froid:#A9C55A; --froid-soft:#273117;
  --cafe:#D9A27A; --cafe-soft:#38291D; --direct:#C4B38A; --ok:#A9C55A; --wait:#E0B655;
}
:root[data-eco="1"]{ --lift:none; }

body{font-family:var(--body);font-weight:500;letter-spacing:.005em;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(30,30,33,.045) 1px, transparent 1.2px);
  background-size:14px 14px}
:root[data-eco="1"] body{background-image:none}

/* ---------- En-tête noren ---------- */
header{background:var(--sumi);color:var(--washi);padding:10px 14px 18px;gap:10px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    repeating-linear-gradient(90deg,#000 0 calc(25% - 3px),transparent calc(25% - 3px) 25%) bottom/100% 10px no-repeat;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    repeating-linear-gradient(90deg,#000 0 calc(25% - 3px),transparent calc(25% - 3px) 25%) bottom/100% 10px no-repeat}
:root[data-eco="1"] header{background:#000;border:0}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--num);font-weight:400;font-size:19px;letter-spacing:.04em;color:var(--washi)}
.brand img{width:36px;height:36px;flex:0 0 auto;display:block;border-radius:50%;box-shadow:0 0 0 2px var(--kitsune)}
.brand small{font-family:var(--body);font-weight:700;font-size:12px;opacity:.75;color:var(--washi)}
@media (max-width:600px){.brand{display:flex;font-size:0;gap:0}.brand small{display:none}}
#rolebtn{font-weight:900;font-size:17px;color:var(--washi)}
#rolebtn i{border-color:var(--kitsune);color:var(--kitsune);opacity:1;font-weight:700}
.sync{color:var(--washi)}
.sync.live .dot{background:var(--matcha);box-shadow:0 0 0 3px rgba(110,164,49,.3)}
.dot{background:var(--kitsune)}

/* ---------- Boutons et feuilles ---------- */
.btn{border-radius:var(--r-m);font-weight:900;letter-spacing:.01em;background:var(--sumi);color:var(--washi);box-shadow:var(--lift);transition:transform .08s}
.btn:active{transform:translateY(1px)}
.btn.ghost{box-shadow:none}
.cartactions .btn.esp{background:var(--matcha);color:var(--sumi)}
#sendcb{background:var(--sumi);color:var(--washi)}
.sheet{background:rgba(20,18,14,.55);backdrop-filter:blur(2px)}
.sheet-in{border-radius:var(--r-l) var(--r-l) 0 0;border-top:6px solid var(--kitsune)}
.sheet-in h2{font-family:var(--num);font-weight:400;font-size:18px}
.roles button{border-radius:var(--r-m);font-weight:900;background:var(--paper)}
.roles button[aria-pressed="true"]{background:var(--sumi);color:var(--washi);border-color:var(--sumi)}
.toast{border-radius:var(--r-m);background:var(--sumi);color:var(--washi);border-left:6px solid var(--kitsune);font-weight:700}
.tact{background:var(--kitsune);color:var(--sumi)}

/* ---------- Caisse ---------- */
.group h2{font-family:var(--num);font-weight:400;font-size:15px;color:var(--ink);letter-spacing:.02em}
.group h2::before{width:10px;height:22px;border-radius:3px}
.grid{gap:10px}
.item{border-radius:var(--r-m);border:0;border-left:0;background:var(--paper);box-shadow:var(--lift);min-height:78px;padding:12px 12px 10px;
  background-image:linear-gradient(var(--c),var(--c));background-size:100% 6px;background-repeat:no-repeat}
.item b{font-weight:900;font-size:16px;margin-top:4px}
.item span{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.item em{background:var(--kitsune);color:var(--sumi);font-family:var(--num);font-weight:400;box-shadow:0 0 0 3px var(--bg)}
.item.out{filter:grayscale(1) contrast(.85)}
.fgrp .item{background-color:var(--sumi);color:var(--washi);background-image:linear-gradient(var(--kitsune),var(--kitsune))}
.fgrp .item span{color:var(--kitsune)}
.minus{background:var(--sumi);color:var(--washi);box-shadow:0 0 0 3px var(--paper)}
.load span{border:0;background:var(--paper);box-shadow:var(--lift);font-weight:700}
.load b{font-family:var(--num);font-weight:400}
.lowbar span{border-radius:var(--r-s)}
.cart{border:0;border-radius:var(--r-l);box-shadow:0 10px 30px -18px rgba(30,30,33,.6)}
.cart h2{font-family:var(--num);font-weight:400}
.numbtn,.cartbar strong,.total strong{font-family:var(--num);font-weight:400}
.cartbar strong{color:var(--ink)}
.promo{font-weight:700}
.qty button{border-radius:10px;font-weight:900}
@media (max-width:820px){
  .cart{border-radius:var(--r-l) var(--r-l) 0 0;border-top:6px solid var(--kitsune);box-shadow:0 -10px 30px -12px rgba(30,30,33,.5)}
}

/* ---------- Tickets des pôles (shokken) ---------- */
.zonehead h1{font-family:var(--num);font-weight:400;font-size:30px;letter-spacing:.02em}
.batch span{border-radius:var(--r-s);font-weight:700}
.batch span b{font-family:var(--num);font-weight:400}
.ticket{border:0;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--lift);padding:0;gap:0;overflow:hidden;
  -webkit-mask:radial-gradient(circle 9px at 0 74px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 74px,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 74px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 74px,#0000 98%,#000) right/51% 100% no-repeat}
.ticket .top{height:74px;padding:10px 16px;align-items:center;background:var(--zc);color:var(--zink,var(--paper));border-bottom:2px dashed var(--paper)}
.ticket .n{font-family:var(--num);font-weight:400;font-size:42px;letter-spacing:.02em;color:var(--zink,var(--paper))}
.ticket .age{color:var(--zink,var(--paper));opacity:1;font-weight:700;font-size:14px}
.ticket ul,.ticket .tnote,.ticket .state,.ticket .addtag,.ticket .hz{margin:10px 16px 0}
.ticket ul{font-size:19px;font-weight:700}
.ticket li b{font-family:var(--num);font-weight:400;color:var(--zt,var(--zc))}
.ticket .act{margin:12px 12px 12px;border-radius:var(--r-m);font-weight:900;font-size:19px;box-shadow:var(--lift)}
.ticket .state{margin-top:10px;border-radius:var(--r-s)}
.ticket.waiting{opacity:1}
.ticket.waiting .top{background:repeating-linear-gradient(135deg,var(--zc) 0 10px,color-mix(in srgb,var(--zc) 75%,var(--paper)) 10px 20px)}
.rcard.rdone{background:var(--paper)}
.rcard.rdone .top{background:var(--ok)}
.rcard.rdone .n{color:var(--paper)}
.rcard .hz{margin:8px 16px 0}
.snd{border-radius:999px;font-weight:700}
.batch span.hot{background:var(--kitsune);color:var(--sumi);animation:hot 1.6s ease-in-out infinite}
@keyframes hot{50%{box-shadow:0 0 0 5px rgba(244,112,22,.25)}}
@media (prefers-reduced-motion:reduce){.batch span.hot{animation:none}}
:root[data-eco="1"] .batch span.hot{animation:none}

/* ---------- Historique / Bilan / Carte ---------- */
.hcard,.panel{border:0;border-radius:var(--r-m);box-shadow:var(--lift)}
.hcard.run{outline:2px dashed var(--wait);outline-offset:-2px}
.htop .n,.kpi strong{font-family:var(--num);font-weight:400}
.panel h2{font-family:var(--num);font-weight:400;font-size:16px;letter-spacing:.01em}
.kpi strong{font-size:28px}
.bars i{background:linear-gradient(var(--kitsune-2),var(--kitsune));border-radius:6px 6px 2px 2px}
.goal{height:16px;border-radius:8px}
.goal i{background:var(--manga)}
.row button{border-radius:var(--r-s);border-width:2px}
.chips button[aria-pressed="true"],.daysel button[aria-pressed="true"]{background:var(--sumi);color:var(--washi);border-color:var(--sumi)}
.pill{font-weight:900}
.ez{border-top:0;background-image:linear-gradient(var(--zc),var(--zc));background-size:100% 6px;background-repeat:no-repeat}
.ez h2{font-family:var(--num);font-weight:400}
.ebar{border-top:4px solid var(--kitsune)}
.cashbig{font-family:var(--num);font-weight:400;font-size:44px}
.cashgrid button{border-radius:var(--r-m);font-family:var(--num);font-weight:400;background:var(--paper)}
.cashgrid button[aria-pressed="true"]{background:var(--sumi);color:var(--washi)}
.rendu b{font-family:var(--num);font-weight:400;color:var(--froid)}
.olist button{border-radius:var(--r-m);background:var(--paper)}
.olist b{font-family:var(--num);font-weight:400}

/* ---------- Écran client : la vitrine ---------- */
.ecran{background-color:#231F20;color:var(--washi);
  background-image:
    radial-gradient(circle at 50% 100%, transparent 18px, rgba(239,221,171,.05) 19px, rgba(239,221,171,.05) 22px, transparent 23px, transparent 30px, rgba(239,221,171,.05) 31px, rgba(239,221,171,.05) 34px, transparent 35px);
  background-size:72px 36px}
.ecol h2{font-family:var(--num);font-weight:400;letter-spacing:.02em}
.eprep h2{color:var(--washi)}
.eprep .enums span{font-family:var(--num);font-weight:400;color:var(--washi);opacity:.8}
.eready{background:var(--kitsune);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 48px)}
.eready h2{color:var(--sumi)}
.eready .enums span{font-family:var(--num);font-weight:400;color:var(--kitsune);background:#FFF8E6;border-radius:18px;padding:.12em .32em;box-shadow:0 8px 0 -2px rgba(35,31,32,.4);
  -webkit-text-stroke:.035em var(--sumi);paint-order:stroke fill}
.eready .enums span.enew{animation:stamp 1s cubic-bezier(.2,1.6,.4,1) 1, glow 1.6s ease-in-out 1s 3}
@keyframes stamp{0%{transform:scale(1.6) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes glow{50%{box-shadow:0 8px 0 -2px rgba(30,30,33,.35),0 0 0 10px rgba(255,248,230,.35)}}
@media (prefers-reduced-motion:reduce){.eready .enums span.enew{animation:none}}
.efoot{background:#18191B;color:var(--washi);opacity:1;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.6em}
.efoot::before{content:"";width:2.2em;height:2.2em;flex:0 0 auto;background:url(/fox-badge.png) center/contain no-repeat}
.ecarte::before{content:"";grid-column:1/-1;justify-self:start;width:min(92vw,calc(clamp(64px,13vh,150px) * 4.4));aspect-ratio:4.4;
  background:url(/logo-h.png) center/88% auto no-repeat,#FFF8E6;border-radius:var(--r-l);box-shadow:0 10px 0 -3px rgba(0,0,0,.35)}
.ecarte h2{color:var(--kitsune-2)}
.ecarte section h3{font-family:var(--num);font-weight:400}
.ecarte p b{font-family:var(--num);font-weight:400;color:var(--kitsune)}

.evtag{color:var(--paper)}
.pill,.hz .pill{color:var(--pt,var(--pc))}
.pill.done,.hz .pill.done{color:var(--pk,var(--paper))}
.state.wait{color:var(--wait-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row button.danger,:root:not([data-theme="light"]) .edel,:root:not([data-theme="light"]) .hact .hx{color:#FF8A80;border-color:#FF8A80}}
:root[data-theme="dark"] .row button.danger,:root[data-theme="dark"] .edel,:root[data-theme="dark"] .hact .hx{color:#FF8A80;border-color:#FF8A80}
.esnd{background:var(--washi);color:var(--sumi)}
.cnum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.cnum span{grid-column:1/-1;font-weight:700;font-size:14px;color:var(--muted)}
.cnum button{border:2px solid var(--line);border-radius:var(--r-m);background:var(--paper);color:var(--ink);font:inherit;font-weight:900;padding:10px 6px;display:flex;flex-direction:column;gap:2px;align-items:center}
.cnum button i{font-style:normal;font-weight:500;font-size:12px;color:var(--muted)}
.cnum button[aria-pressed="true"]{background:var(--sumi);color:var(--washi);border-color:var(--sumi)}
.cnum button[aria-pressed="true"] i{color:var(--washi)}
/* ---------- Lisibilité (audit oct. 2026) ---------- */
[style*="--zc:var(--tai)"]{--zink:var(--sumi);--zt:var(--tai-ink)}
.hz[style*="--pc:var(--tai)"]{--pt:var(--tai-ink);--pk:var(--sumi)}
b[style*="color:var(--tai)"]{color:var(--tai-ink)!important}
.zonehead h1,.ez h2{color:var(--zt,var(--zc))}
.act,.cookall{color:var(--zink,var(--paper))}
.eadd{color:var(--zt,var(--zc))}
.cartbar .chev{opacity:.8}

:focus-visible{outline:3px solid var(--kitsune);outline-offset:2px}