/* Interface boulangerie — mobile d'abord. Aucune ressource externe (CSP, hors-ligne, confidentialité).
   Codes : four (brun chocolat), croûte dorée, farine (blanc), enseigne (rouge cerise), ardoise des prix. */
:root{
  --four:#4f5d2f;--four2:#617038;--croute:#e9a23b;--croute-d:#b5700b;--croute-bg:#fdf0d5;
  --farine:#ffffff;--page:#f4f2ee;--ink:#241911;--ink2:#6b5d52;--line:#e6e0d7;
  --cerise:#c8102e;--cerise-bg:#fde8eb;--pistache:#1f8a4c;--pistache-bg:#e3f5ea;--alerte:#b35c00;--alerte-bg:#fff0d6;
  --radius:18px;--shadow:0 1px 0 rgba(42,27,18,.04),0 8px 22px -10px rgba(42,27,18,.28);
  --nav-h:68px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
@media(prefers-color-scheme:dark){:root{
  --page:#11150b;--farine:#1a2010;--ink:#f3f1e4;--ink2:#b3b79c;--line:#2d3621;--croute-bg:#3a2a10;--croute-d:#f0b44f;
  --cerise:#ff6b81;--cerise-bg:#40181f;--pistache:#4fd68a;--pistache-bg:#143323;--alerte:#f0b44f;--alerte-bg:#3a2c10;--shadow:none}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 14px)}
a{color:var(--croute-d);text-decoration:none;font-weight:600}
h1{font-size:1.65rem;line-height:1.15;margin:.3rem 0 1rem;font-weight:800;letter-spacing:-.02em}
h2{font-size:.78rem;margin:1.6rem 0 .6rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink2)}
.card>h2:first-child{margin-top:0}
.mut{color:var(--ink2)}.small{font-size:.85rem}.right{text-align:right}.nowrap{white-space:nowrap}

/* en-tête : brun four + auvent rayé rouge/blanc */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-t)) 16px 12px;
  background:var(--four);color:#fff}
.top::after,.login-hero::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--cerise) 0 16px,#fff 16px 32px);
  -webkit-mask:radial-gradient(circle 16px at 16px 0,#000 98%,transparent) 0 0/32px 12px;mask:radial-gradient(circle 16px at 16px 0,#000 98%,transparent) 0 0/32px 12px}
.top .brand{font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:#fff;font-size:1.05rem}
.top .brand i{width:34px;height:34px;border-radius:11px;background:var(--croute);display:grid;place-items:center}
.top .brand svg{width:22px;height:22px}
.top .sp{flex:1}.top form{margin:0}
.top button.ghost{color:#fff;border-color:rgba(255,255,255,.28);min-height:38px;padding:4px 14px}
main{max-width:760px;margin:0 auto;padding:26px 16px 16px}

/* navigation basse */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);background:var(--four);border-top:1px solid #2f3a1c}
.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.7rem;color:#bda894;font-weight:700;letter-spacing:.01em}
.tabs a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on{color:var(--croute)}
.tabs a.on:not(.scan)::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--croute)}
.tabs a.scan{color:#fff}
.tabs a.scan span.fab{width:58px;height:58px;margin-top:-30px;border-radius:50%;background:var(--croute);display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(233,162,59,.5);border:4px solid var(--four)}
.tabs a.scan svg{stroke:var(--four);stroke-width:2.1}

/* cartes et listes */
.card{background:var(--farine);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.list{background:var(--farine);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
.list:empty{display:none}
.item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line);color:var(--ink);font-weight:400}
.item:first-child{border-top:0}
a.item:active{background:var(--croute-bg)}
.item .main{flex:1;min-width:0}.item .t{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.item .s{font-size:.85rem;color:var(--ink2)}.item .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}

/* ardoise des prix : tuiles de chiffres */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--four);color:#fff;border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);border:3px solid var(--four2);outline:1px solid #2f3a1c}
.kpi b{display:block;font-size:2rem;line-height:1.05;letter-spacing:-.03em;font-weight:800;color:#fff7e8}
.kpi span{display:block;margin-top:2px;font-size:.74rem;color:var(--croute);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.kpi b.up{color:#ff8a9a}.kpi b.warn{color:var(--croute)}.kpi b.down{color:#6fe3a0}

/* variations de prix : étiquettes */
.chg{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;font-weight:800;font-size:.9rem;font-variant-numeric:tabular-nums}
.chg.up{background:var(--cerise);color:#fff}.chg.down{background:var(--pistache);color:#fff}
.up{color:var(--cerise)}.down{color:var(--pistache)}.warn{color:var(--alerte)}
.tag{display:inline-block;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:6px;background:var(--croute-bg);color:var(--croute-d);vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}
.tag.ok{background:var(--pistache-bg);color:var(--pistache)}.tag.bad{background:var(--cerise-bg);color:var(--cerise)}

/* formulaires : cibles >= 46 px, police 16 px */
input,select,textarea,button,.btn{font:inherit;min-height:48px;border-radius:14px}
input,select,textarea{width:100%;padding:10px 14px;border:1.5px solid var(--line);background:var(--farine);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--croute) 45%,transparent);border-color:var(--croute)}
textarea{min-height:130px;resize:vertical}
label{display:block;font-size:.74rem;font-weight:800;color:var(--ink2);margin:12px 0 5px;text-transform:uppercase;letter-spacing:.06em}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:0;background:var(--croute);color:var(--four);font-weight:800;cursor:pointer;
  box-shadow:0 3px 0 var(--croute-d)}
.btn{color:var(--four)}
button:active,.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--croute-d)}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
button.danger{background:var(--cerise);color:#fff;box-shadow:0 3px 0 #8d0b20}
button.block,.btn.block{width:100%}
button:disabled{opacity:.6}
.row{display:flex;flex-wrap:wrap;gap:8px}.row>*{flex:1 1 140px}
.seg{display:grid;grid-auto-flow:column;gap:6px}.seg label{margin:0}
.seg input{position:absolute;opacity:0;width:1px;min-height:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid var(--line);border-radius:14px;font-weight:800;background:var(--farine);color:var(--ink);text-transform:none;letter-spacing:0;font-size:.95rem}
.seg input:checked+span{background:var(--four);color:var(--croute);border-color:var(--four)}
.search{position:sticky;top:58px;z-index:10;padding:8px 0;background:var(--page)}
.note{border-radius:14px;padding:12px 14px;background:var(--croute-bg);color:var(--ink);font-size:.92rem;margin-bottom:14px;border-left:5px solid var(--croute)}
.note.bad{background:var(--cerise-bg);color:var(--cerise);border-left-color:var(--cerise)}
.note.ok{background:var(--pistache-bg);color:var(--pistache);border-left-color:var(--pistache)}
.qty{width:96px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
details.card summary{cursor:pointer;list-style:none;font-weight:800}
details.card summary::-webkit-details-marker{display:none}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}td.n,th.n{text-align:right}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart{position:relative;height:250px}.chart.tall{height:300px}

/* connexion */
body.auth{padding-bottom:0}
body.auth main{max-width:none;padding:0}
.login-hero{background:var(--four);color:#fff;text-align:center;padding:calc(56px + var(--safe-t)) 20px 54px;position:relative}
.login-hero .logo{width:84px;height:84px;border-radius:24px;background:var(--croute);display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.login-hero .logo svg{width:52px;height:52px}
.login-hero h1{color:#fff;margin:0;font-size:1.7rem}.login-hero p{margin:.3rem 0 0;color:var(--croute);font-weight:700}
.login{max-width:420px;margin:40px auto 0;padding:0 16px}

@media(min-width:900px){
  body{padding-bottom:0;padding-left:230px}
  body.auth{padding-left:0}
  .tabs{top:0;bottom:auto;right:auto;width:230px;height:100vh;grid-template-columns:1fr;grid-auto-rows:50px;align-content:start;padding:96px 12px 0;border-top:0;border-right:1px solid #2f3a1c}
  .tabs a{flex-direction:row;justify-content:flex-start;gap:14px;padding:0 16px;border-radius:12px;font-size:.95rem}
  .tabs a.on{background:var(--four2)}.tabs a.on:not(.scan)::before{display:none}
  .tabs a.scan span.fab{width:auto;height:auto;margin:0;background:none;box-shadow:none;border:0;display:inline;color:inherit}
  .tabs a.scan svg{stroke:currentColor}
  main{max-width:1000px}.kpis{grid-template-columns:repeat(5,1fr)}.search{top:58px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

a.kpi{display:block;position:relative;color:#fff;text-decoration:none;font-weight:400}
a.kpi::after{content:"›";position:absolute;right:14px;top:8px;font-size:1.6rem;line-height:1;color:var(--croute);font-weight:800}
a.kpi:active{transform:scale(.97)}
a.kpi:focus-visible{outline:3px solid var(--croute);outline-offset:2px}