/* ============================================================================
   BACCHUS — Design system · mobile-first
============================================================================ */
:root{
  --accent:#8e2434; --accent2:#b3384c; --gold:#d3ad4e;
  --r:16px; --r-sm:11px;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
}
body[data-theme="dark"]{
  --bg:#120e0d; --bg2:#1a1413; --card:#211a18; --card2:#2b2320; --card3:#332926;
  --txt:#f4ece6; --txt2:#c9bcb4; --muted:#998a81; --line:#382d29; --in:#241d1a;
  --shadow:0 8px 30px rgba(0,0,0,.5); --glass:rgba(26,20,19,.82);
}
body[data-theme="light"]{
  --bg:#f6efe9; --bg2:#fffdfb; --card:#ffffff; --card2:#f8f1ec; --card3:#f0e6df;
  --txt:#241713; --txt2:#5c4a42; --muted:#907f76; --line:#ece0d7; --in:#fff;
  --shadow:0 8px 30px rgba(120,60,40,.13); --glass:rgba(255,253,251,.86);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;padding-bottom:calc(66px + var(--sab))}
h1,h2,h3,h4{font-family:"Georgia","Times New Roman",serif;font-weight:600;letter-spacing:-.01em;line-height:1.2}
button{font-family:inherit;cursor:pointer;color:inherit;border:0;background:none}
input,select,textarea{font-family:inherit}
.muted{color:var(--muted)}
small{font-size:.82em;color:var(--muted)}

/* App bar */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + var(--sat)) 18px 12px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.ab-brand{display:flex;align-items:center;gap:10px}
.ab-logo{font-size:24px}
.appbar h1{font-size:21px}
.ab-more{width:40px;height:40px;border-radius:12px;font-size:22px;color:var(--txt);background:var(--card);border:1px solid var(--line)}
.ab-more:active{background:var(--card2)}

/* View */
.view{max-width:900px;margin:0 auto;padding:16px 16px 40px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lead{color:var(--muted);font-size:13.5px;margin:2px 4px 14px}

/* Bannière d'alerte apogée */
.alertbar{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#4a2417,#3a1a12);border:1px solid #6b3a22;
  border-radius:14px;padding:12px 14px;margin-bottom:14px;cursor:pointer;transition:.15s}
.alertbar:active{transform:scale(.99)}
.alertbar .ab-ic{font-size:20px}
.alertbar .ab-txt{flex:1;font-size:13.5px;color:#f0d8c0;line-height:1.35}
.alertbar .ab-txt b{color:#ffb787}
.alertbar .ab-x{width:28px;height:28px;border-radius:8px;color:#c9a68f;font-size:14px;flex:none}
.alertbar .ab-x:active{background:rgba(255,255,255,.1)}
body[data-theme="light"] .alertbar{background:linear-gradient(135deg,#fbe9df,#f8ded0);border-color:#e8c3ac}
body[data-theme="light"] .alertbar .ab-txt{color:#7a3a1e}
body[data-theme="light"] .alertbar .ab-txt b{color:#b8471f}

/* Assistant "Quoi ouvrir ?" */
.as-h{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:system-ui;margin:16px 0 10px}
.as-reason{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.serve{font-size:12.5px;color:var(--txt2);background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 12px}

/* Hero stats */
.hero{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.hero-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 8px;text-align:center}
.hero-stat b{display:block;font-family:Georgia,serif;font-size:clamp(15px,4.4vw,20px);font-weight:700;line-height:1.1}
.hero-stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.hero-stat.up b{color:#59c07a}.hero-stat.down b{color:#e0776a}

/* Search */
.searchbar{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:2px 6px 2px 14px;margin-bottom:12px}
.searchbar .si{opacity:.6;font-size:15px}
.searchbar input{flex:1;background:none;border:0;outline:none;color:var(--txt);font-size:16px;padding:12px 4px}
.searchbar .clr,.searchbar .sortbtn{width:36px;height:36px;border-radius:10px;font-size:16px;color:var(--muted)}
.searchbar .clr:active,.searchbar .sortbtn:active{background:var(--card2)}

/* Filter chips */
.chips-scroll{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 6px;scrollbar-width:none}
.chips-scroll::-webkit-scrollbar{display:none}
.fchip{white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:8px 14px;font-size:13.5px;font-weight:500;color:var(--txt2);display:flex;align-items:center;gap:6px;transition:.15s}
.fchip i{width:9px;height:9px;border-radius:50%}
.fchip.on{background:var(--accent);border-color:var(--accent2);color:#fff;box-shadow:0 3px 12px rgba(142,36,52,.4)}
.fchip:active{transform:scale(.95)}
.fchip.filt{gap:5px}

/* Feuille de filtres multiples */
.filtsec{margin-bottom:6px}
.filtsec h4{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:system-ui;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.filtsec h4 .fc{background:var(--accent);color:#fff;border-radius:20px;padding:0 8px;font-size:11px;line-height:18px}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:9px 14px;font-size:14px;color:var(--txt2);font-weight:500;transition:.12s;display:flex;align-items:center;gap:6px}
.tchip::before{content:"";width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line);flex:none;transition:.12s}
.tchip.on{background:var(--accent);border-color:var(--accent2);color:#fff}
.tchip.on::before{background:#fff;border-color:#fff;content:"✓";color:var(--accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.tchip:active{transform:scale(.95)}

/* Grid cards */
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.grid{grid-template-columns:repeat(3,1fr)}}
.wc{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .12s,border-color .15s}
.wc:active{transform:scale(.985)}
.wc-l{width:6px;flex:none;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.wc-body{flex:1;padding:13px 15px;min-width:0}
.wc-top{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.wc-vint{margin-left:auto;font-family:Georgia,serif;font-size:17px;color:var(--gold);font-weight:700}
.wc h3{font-size:16.5px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-sub{font-size:13px;color:var(--muted);margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12.5px}
.stars{color:var(--gold);letter-spacing:1px}.stars i{opacity:.25;font-style:normal}
.wc-qv{color:var(--muted)}
.wc-qv .q{background:var(--accent);color:#fff;border-radius:7px;padding:1px 7px;font-weight:600;font-size:11.5px}

/* Status badges */
.wc-badge{font-size:11px;padding:2.5px 9px;border-radius:20px;font-weight:600}
.st-peak{background:#153a1e;color:#71d68e}.st-end{background:#4a3410;color:#e6b45f}
.st-wait{background:#152e40;color:#69add9}.st-late{background:#4a1717;color:#ec8577}
.st-low{background:#3a2a0e;color:var(--gold)}
.prio-haute{background:#4a1717;color:#ec8577}.prio-moyenne{background:#4a3410;color:#e6b45f}.prio-basse{background:#152e40;color:#69add9}
body[data-theme="light"] .st-peak{background:#dff3e4;color:#2e8b52}
body[data-theme="light"] .st-end{background:#faeecf;color:#a9791d}
body[data-theme="light"] .st-wait{background:#dcecf7;color:#2a6ea0}
body[data-theme="light"] .st-late{background:#f8dcd7;color:#b8402f}
body[data-theme="light"] .st-low{background:#f7ecd0;color:#9a7a1a}

/* Apogée gauge */
.gauge{margin-top:2px}
.g-track{position:relative;height:7px;border-radius:6px;overflow:hidden;background:var(--card3)}
.g-wait{position:absolute;top:0;height:100%;background:#3a5570;opacity:.55}
.g-drink{position:absolute;top:0;height:100%;background:linear-gradient(90deg,#3a9a55,#8fbf3f)}
.g-late{position:absolute;top:0;height:100%;background:#7a3030;opacity:.5}
.g-now{position:absolute;top:-2px;width:3px;height:11px;border-radius:2px;background:var(--txt);box-shadow:0 0 0 2px var(--card)}
.g-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:3px}

/* Sections (apogée / casiers / journal / wishlist) */
.apx,.rack{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;margin-bottom:13px;box-shadow:var(--shadow)}
.apx header,.rack header{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.apx h3,.rack h3{font-size:16px}
.cnt{background:var(--accent);color:#fff;font-size:11.5px;font-family:system-ui;padding:1px 9px;border-radius:20px;font-weight:600}
.apx-sub{font-size:12px;color:var(--muted);margin-bottom:11px}
.aprow{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.aprow:first-of-type{border-top:0}
.dot{width:11px;height:11px;border-radius:50%;flex:none}
.apr-m{flex:1;min-width:0}.apr-m b{font-size:14.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apr-m .gauge{margin-top:5px}
.apr-q{background:var(--card2);padding:2px 9px;border-radius:8px;font-size:12.5px;color:var(--muted)}

/* Caves (conteneurs) */
.cav-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cav-title{font-size:22px}
.cave{margin-bottom:24px}
.cave-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:11px;border-bottom:2px solid var(--line)}
.cave-n{font-size:19px}
.cave-t{font-size:12px;color:var(--gold);margin-top:1px}
.cave-cnt{font-size:12.5px;color:var(--muted);margin-top:3px}
.cave-btns{display:flex;align-items:center;gap:6px;flex:none}
.rack-hd{display:flex;align-items:center;gap:9px;margin:0 0 8px}
.rack-hd b{font-size:15px;font-family:Georgia,serif}

/* Matrice d'emplacement */
.rk-dim{font-size:11px;color:var(--muted);background:var(--card2);padding:1px 8px;border-radius:20px;margin-left:2px}
.rack header .ib{margin-left:0}
.matrix{display:grid;gap:6px;margin-top:6px}
.mh{font-size:10px;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:center;min-height:16px}
.mh.rowh{padding-right:2px}
.cell{aspect-ratio:1;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .1s;border:1px solid var(--line);min-width:0}
.cell:active{transform:scale(.9)}
.cell.empty{background:var(--card2);border:1px dashed var(--line);color:var(--muted);font-size:17px;font-weight:300}
.cell.empty:active{background:var(--card3);color:var(--txt)}
.cell.full{background:var(--card2);border-top:3px solid var(--c)}
.cell .cdot{width:8px;height:8px;border-radius:50%;flex:none}
.cell .cv{font-family:Georgia,serif;font-size:clamp(10px,3vw,13px);color:var(--gold);font-weight:700;line-height:1}
/* Sélecteur de bouteille */
.picklist{display:flex;flex-direction:column;gap:7px;max-height:62vh}
.pickrow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);text-align:left;transition:.12s}
.pickrow:active{background:var(--card2);transform:scale(.99)}
.pm{flex:1;min-width:0}.pm b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-un{font-size:11.5px;color:#59c07a;font-weight:600;flex:none}
.pk-un.zero{color:var(--muted)}
.cellinfo{display:flex;align-items:flex-start;gap:12px}
body[data-theme="light"] .pk-un{color:#2e8b52}

.slots{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.slots{grid-template-columns:1fr 1fr}}
.slot{display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--line);
  border-left:4px solid var(--c);border-radius:10px;padding:9px 11px;transition:transform .12s}
.slot:active{transform:scale(.98)}
.slot b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}
.slot small{font-size:11px;color:var(--muted)}

/* Journal / wishlist rows */
.jrow{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
.jdate{flex:none;width:44px;text-align:center;background:var(--card2);border-radius:10px;padding:7px 0}
.jdate b{display:block;font-family:Georgia,serif;font-size:19px;color:var(--gold);line-height:1}
.jdate span{font-size:10px;color:var(--muted);text-transform:uppercase}
.jm{flex:1;min-width:0}.jm b{font-size:15px}
.jmeta{font-size:12px;color:var(--muted);margin-top:3px}
.jnotes{font-size:13px;font-style:italic;margin-top:5px;color:var(--txt2)}
.jr{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ib{width:34px;height:34px;border-radius:9px;font-size:15px;color:var(--muted)}
.ib:active{background:var(--card2)}

/* Stats */
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:13px;box-shadow:var(--shadow)}
.scard h4{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:system-ui;margin-bottom:10px}
canvas{max-width:100%}

/* Empty */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty-ic{font-size:46px;margin-bottom:12px;opacity:.85}
.empty p{margin-bottom:16px;font-size:15px}

/* Buttons */
.btn{background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:12px 16px;border-radius:12px;
  font-size:14.5px;font-weight:600;transition:.12s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(142,36,52,.4)}
.btn.ghost{background:transparent}
.btn.danger{color:#e0776a;border-color:#5a2a2a}
.btn.grow{flex:1}
.mini{font-size:12px;color:var(--gold);background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:3px 9px;margin-left:auto}

/* FAB */
.fab{position:fixed;right:18px;bottom:calc(78px + var(--sab));z-index:25;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-size:30px;font-weight:300;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(142,36,52,.55);transition:transform .15s}
.fab:active{transform:scale(.9)}

/* Tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;
  padding:6px 4px calc(6px + var(--sab));background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);border-top:1px solid var(--line)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:var(--muted);font-size:10.5px;font-weight:500;border-radius:12px;transition:.15s}
.tab .ti{font-size:21px;transition:transform .15s;filter:grayscale(.4) opacity(.75)}
.tab.active{color:var(--accent2)}
.tab.active .ti{transform:translateY(-1px) scale(1.12);filter:none}
.tab:active .ti{transform:scale(.9)}

/* Bottom sheet */
.sheet-wrap{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-wrap.open{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:620px;max-height:92vh;background:var(--bg2);border-radius:24px 24px 0 0;
  display:flex;flex-direction:column;box-shadow:0 -10px 50px rgba(0,0,0,.5);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
@media(min-width:640px){.sheet{border-radius:24px;margin-bottom:24px;max-height:88vh}.sheet-wrap{align-items:center}}
.sheet-wrap.open .sheet{transform:translateY(0)}
.sh-grip{display:flex;justify-content:center;padding:9px 0 4px;cursor:grab}
.sh-grip span{width:38px;height:4px;border-radius:3px;background:var(--line)}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 12px;border-bottom:1px solid var(--line)}
.sh-head h2{font-size:19px}
.sh-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.sh-foot{display:flex;gap:9px;padding:12px 18px calc(14px + var(--sab));border-top:1px solid var(--line)}
.sh-foot:empty{display:none}

/* Form */
.fl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.fl small{font-weight:400}
.in{background:var(--in);border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;font-size:16px;color:var(--txt);outline:none;transition:.15s;width:100%}
.in:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(179,56,76,.16)}
textarea.in{resize:vertical;line-height:1.45}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23998a81' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:32px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.fset{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 13px;display:flex;flex-direction:column;gap:11px}
.fset-h{font-size:13px;color:var(--gold);font-weight:600;display:flex;align-items:center}
.rate{display:flex;gap:4px}
.star{font-size:26px;color:var(--line);transition:.1s;line-height:1}
.star.on{color:var(--gold)}
.star:active{transform:scale(1.2)}
.chk{flex-direction:row;align-items:center;gap:9px;font-size:14px;color:var(--txt);font-weight:500}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.pairing{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:3px 10px;font-size:11.5px;color:var(--txt2)}
.photo-row{display:flex;gap:14px}
.photo{width:110px;height:150px;flex:none;background:var(--in);border:2px dashed var(--line);border-radius:13px;
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:12px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-actions{flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center}
.ap-preview{font-size:12px;padding:7px 11px;border-radius:9px;font-weight:600;text-align:center}
.ap-inline{font-size:12.5px;color:var(--muted)}
.ap-badge{padding:2px 9px;border-radius:20px;font-weight:600;font-size:11.5px}

/* More sheet list */
.morelist{display:flex;flex-direction:column;gap:2px}
.morelist button{display:flex;align-items:center;gap:14px;padding:15px 8px;font-size:15.5px;font-weight:500;color:var(--txt);border-radius:11px;text-align:left}
.morelist button:active{background:var(--card2)}
.morelist button span{font-size:20px;width:26px;text-align:center}
.morelist button.install{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-weight:600}
.morelist button.install:active{filter:brightness(1.1)}
.morelist hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--sab));transform:translateX(-50%) translateY(140px);z-index:200;
  background:var(--card);border:1px solid var(--accent2);color:var(--txt);padding:13px 20px;border-radius:13px;
  box-shadow:var(--shadow);font-size:14px;font-weight:600;transition:transform .3s cubic-bezier(.32,.72,0,1);max-width:88vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{border-color:#e0776a}.toast.ok{border-color:#59c07a}

.hide{display:none}