/* =====================================================================
   Le Veilleur — design « Inox »
   Inspiré de la cuisine professionnelle : plans de travail inox, fiches
   blanches, et le ruban adhésif jaune sur lequel les cuisiniers écrivent
   les dates. Ce ruban est le seul élément « décoratif » : il porte les dates.
   Pour revenir à l'ancien design : Menu → Apparence → Design classique.
   ===================================================================== */
html[data-theme="inox"]{
  --fond:#E7EBEE; --carte:#FFFFFF; --encre:#14202B; --gris:#56636F; --trait:#D1D8DE;
  --bleu:#1652B5; --bleu-f:#0D3A82; --bleu-c:#E4ECFA;
  --rouge:#C42B1C; --rouge-c:#FCEAE8; --orange-c:#FDF0DC; --orange-f:#8A4D05;
  --vert:#1D7346; --vert-c:#E2F2E8;
  --ruban:#FFE45A; --ruban-encre:#1B1B12;
  --r-carte:10px; --r-btn:8px;
}
html[data-theme="inox"] body{background:var(--fond);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
html[data-theme="inox"] body *{font-variant-numeric:tabular-nums}

/* ---- en-tête : bande blanche nette ---- */
html[data-theme="inox"] header.barre{background:#fff;border-bottom:1px solid var(--trait);padding:12px 16px 12px}
html[data-theme="inox"] header.barre h1{font-family:inherit;font-size:24px;font-weight:800;letter-spacing:-.02em}
html[data-theme="inox"] header.barre .qui{font-size:14px;color:var(--gris)}
html[data-theme="inox"] header.barre .qui b{color:var(--encre)}
html[data-theme="inox"] .btn-mini{border:1.5px solid var(--trait);background:var(--fond);box-shadow:none;border-radius:999px;min-height:36px;padding:4px 12px;color:var(--encre)}
html[data-theme="inox"] .btn-langue{border:1.5px solid var(--trait);background:var(--fond);width:44px;height:44px}
html[data-theme="inox"] .apercu-btn{flex-direction:row;gap:8px;min-height:44px;min-width:0;padding:0 14px;border-radius:999px;border:0;
  background:var(--encre);color:#fff;box-shadow:none;font-size:15px}
html[data-theme="inox"] .apercu-btn svg{width:20px;height:20px}
html[data-theme="inox"] .apercu-btn.actif{background:var(--bleu)}
html[data-theme="inox"] .demo-bandeau{background:var(--encre);color:var(--ruban)}

/* ---- barre d'onglets avec pictogrammes ---- */
html[data-theme="inox"] nav.onglets{background:#fff;border-top:1px solid var(--trait);padding-top:4px}
html[data-theme="inox"] nav.onglets .ico{display:block}
html[data-theme="inox"] nav.onglets a{font-size:11.5px;font-weight:600;gap:2px;color:#6B7782}
html[data-theme="inox"] nav.onglets a .trait{display:none}
html[data-theme="inox"] nav.onglets a.actif{color:var(--bleu)}
html[data-theme="inox"] nav.onglets a.actif .ico{stroke-width:2.4}

/* ---- surfaces ---- */
html[data-theme="inox"] main{gap:14px}
html[data-theme="inox"] .carte{border-radius:var(--r-carte);border:1px solid var(--trait);box-shadow:none;padding:16px}
html[data-theme="inox"] h2{font-size:13px;font-weight:700;color:var(--gris);margin:10px 0 -4px;letter-spacing:.01em}
html[data-theme="inox"] .titre{font-weight:750}
html[data-theme="inox"] .petit{color:var(--gris)}

/* ---- boutons : plats, nets, faciles à toucher avec des gants ---- */
html[data-theme="inox"] .btn{border-radius:var(--r-btn);border:1.5px solid #9AA6B1;background:#fff;box-shadow:none;font-weight:700;color:var(--encre);min-height:50px}
html[data-theme="inox"] .btn:active{transform:none;background:#EEF2F5}
html[data-theme="inox"] .btn.plein{background:var(--bleu);border-color:var(--bleu);color:#fff}
html[data-theme="inox"] .btn.plein:active{background:var(--bleu-f)}
html[data-theme="inox"] .btn.noir{background:var(--encre);border-color:var(--encre);color:#fff}
html[data-theme="inox"] .btn.danger{background:var(--rouge);border-color:var(--rouge);color:#fff}
html[data-theme="inox"] .btn.gros{min-height:60px;font-size:17px;border-radius:10px}
html[data-theme="inox"] summary{border:1.5px solid #9AA6B1;border-radius:var(--r-btn);box-shadow:none;color:var(--encre);background:#fff}
html[data-theme="inox"] summary::before{color:var(--bleu)}
html[data-theme="inox"] details.carte>summary{border:0;padding:0;min-height:36px;background:none}
html[data-theme="inox"] input.saisie,html[data-theme="inox"] select.saisie{border:1.5px solid #B3BEC8;border-radius:var(--r-btn)}
html[data-theme="inox"] input.saisie:focus,html[data-theme="inox"] select.saisie:focus{outline:3px solid var(--bleu-c);border-color:var(--bleu)}
html[data-theme="inox"] :focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

/* ---- puces et bandeaux ---- */
html[data-theme="inox"] .chip{border-radius:6px;font-weight:700}
html[data-theme="inox"] .chip.rouge{background:var(--rouge)}
html[data-theme="inox"] .bandeau{border-radius:var(--r-btn);border:0;border-left:4px solid currentColor}
html[data-theme="inox"] .bandeau.rouge{background:var(--rouge-c);color:#8E1F14}
html[data-theme="inox"] .bandeau.bleu{background:var(--bleu-c);color:var(--bleu-f)}
html[data-theme="inox"] .bandeau.vert{background:var(--vert-c);color:var(--vert)}

/* ---- produits : bande d'état à gauche plutôt que bordure colorée ---- */
html[data-theme="inox"] .lot{border-left-width:6px}
html[data-theme="inox"] .lot.a_confirmer{border-color:var(--trait);border-left-color:var(--bleu);border-width:1px 1px 1px 6px}
html[data-theme="inox"] .lot.illisible,html[data-theme="inox"] .lot.manque{background:#fff;border-color:var(--trait);border-left-color:var(--rouge);border-width:1px 1px 1px 6px}
html[data-theme="inox"] .lot.confirme{opacity:1;border-left-color:var(--vert);border-width:1px 1px 1px 6px}
html[data-theme="inox"] .lot.a_verifier{border-left:6px solid #9AA6B1}

/* ---- LE RUBAN : la date comme sur le scotch de cuisine ---- */
html[data-theme="inox"] .date-geante{align-self:center;display:inline-block;margin:8px auto 4px;padding:10px 26px 8px;background:var(--ruban);color:var(--ruban-encre);
  font-family:"SF Pro Rounded","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;font-size:38px;font-weight:800;letter-spacing:.02em;transform:rotate(-1.2deg);
  clip-path:polygon(0 0,100% 0,97% 12%,100% 25%,97% 38%,100% 50%,97% 62%,100% 75%,97% 88%,100% 100%,0 100%,3% 88%,0 75%,3% 62%,0 50%,3% 38%,0 25%,3% 12%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.06)}
html[data-theme="inox"] .lot-geant{font-family:inherit;font-size:28px;font-weight:800;letter-spacing:.08em;border:1.5px dashed #9AA6B1;border-radius:6px;padding:6px 10px;align-self:center}

/* ---- Menu (tableau du jour) ---- */
html[data-theme="inox"] .tuiles{gap:8px}
html[data-theme="inox"] .tuile{border-radius:var(--r-carte);border:1px solid var(--trait);box-shadow:none;min-height:92px;position:relative;padding:12px 12px 12px 16px}
html[data-theme="inox"] .tuile::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 3px 3px 0;background:#C7D0D8}
html[data-theme="inox"] .tuile.rouge{background:#fff;border-color:var(--trait)}
html[data-theme="inox"] .tuile.rouge::before{background:var(--rouge)}
html[data-theme="inox"] .tuile.orange{background:#fff;border-color:var(--trait)}
html[data-theme="inox"] .tuile.orange::before{background:#D98A0B}
html[data-theme="inox"] .tuile.ok::before{background:var(--vert)}
html[data-theme="inox"] .tuile-n{font-size:32px;font-weight:800}
html[data-theme="inox"] .tuile.orange .tuile-n{color:var(--orange-f)}
html[data-theme="inox"] .tuile-lib{font-weight:650;color:var(--encre)}
html[data-theme="inox"] .apercu-btn .badge{top:-6px;right:-6px;background:var(--rouge)}

/* ---- divers ---- */
html[data-theme="inox"] .toast{border-radius:10px;background:var(--encre)}
html[data-theme="inox"] .toast.rouge{background:var(--rouge)}
html[data-theme="inox"] .modale-boite{background:#fff;border-radius:16px 16px 0 0}
html[data-theme="inox"] .pave button{border:1.5px solid #B3BEC8;border-radius:10px;font-weight:600}
html[data-theme="inox"] .connexion h1{font-family:inherit;font-weight:800;letter-spacing:-.02em}
html[data-theme="inox"] .etape{border:1px solid var(--trait);border-top:5px solid var(--bleu)}
html[data-theme="inox"] .etape-num{background:var(--encre)}
html[data-theme="inox"] .preuve{border-radius:8px}
@media (prefers-reduced-motion:reduce){html[data-theme="inox"] *{transition:none!important;animation:none!important}}