/* WYNE espace membre — same paper, mono type and display face as wyne.fr.
   Thermo Zero (display) is ALWAYS uppercase. Red is kept for the one thing to act on. */
@font-face{font-family:"Favorit Mono";src:url(/assets/fonts/favorit-mono-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Favorit Mono";src:url(/assets/fonts/favorit-mono-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thermo Zero";src:url(/assets/fonts/thermo-zero.woff2) format("woff2");font-display:swap}
:root{
  --paper:#F1EBE2;
  --paper-2:#E9E0D3;
  --ink:#2D2D2D;
  --blue:#004899;
  --red:#E55645;
  --gold:#9A8770;
  --soft:rgba(45,45,45,.68);
  --hair:rgba(45,45,45,.16);
  --display:"Thermo Zero","Arial Narrow",Impact,sans-serif;
  --mono:"Favorit Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --tabbar:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.55;margin:0;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,ul{margin:0}
ul,ol{padding:0;list-style:none;margin:0}
a{color:var(--blue)}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.t{font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:.01em;line-height:.95;text-wrap:balance}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--soft)}
.soft{color:var(--soft)}
.small{font-size:13px}
.noscript{padding:24px}

.app{min-height:100dvh;max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 24px)}
.app.has-tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabbar) + 28px)}
.splash{min-height:70dvh;display:grid;place-items:center}
.splash img{opacity:.9;animation:breathe 1.8s var(--ease) infinite alternate}
@keyframes breathe{to{opacity:.35}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:16px 22px;border-radius:999px;border:1.5px solid var(--ink);text-decoration:none;cursor:pointer;background:none;color:var(--ink);min-height:48px;transition:background .25s var(--ease),color .25s var(--ease),opacity .25s}
.btn.full{width:100%}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn.sm{padding:11px 16px;font-size:12px;min-height:40px}
.btn[disabled]{opacity:.45;cursor:default}
.link{background:none;border:0;padding:0;color:var(--blue);text-decoration:underline;cursor:pointer;font-size:13px}

/* login */
.auth{display:grid;gap:28px;padding-top:8dvh}
.auth .logo{width:112px;height:auto}
.auth h1{font-size:clamp(40px,12vw,58px)}
.auth form{display:grid;gap:14px}
.field{display:grid;gap:8px}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.field input,.field textarea{width:100%;background:#fff8;border:1.5px solid var(--hair);border-radius:14px;padding:15px 16px;font-size:16px;outline:none;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.field input.code{font-size:26px;letter-spacing:.3em;text-align:center;font-weight:700}
.msg{border-radius:14px;padding:12px 14px;font-size:13px;background:var(--paper-2)}
.msg.err{background:rgba(229,86,69,.12);color:#9d2f21}
.foot{font-size:12px;color:var(--soft)}
.auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* header */
.head{display:flex;justify-content:center;align-items:center;margin-bottom:24px;min-height:42px}
.head img{width:78px;height:auto;display:block}
.head p{font-size:12px;color:var(--soft);line-height:1.35}
.head .num{text-align:right}

/* figures */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.fig{background:var(--paper-2);border-radius:var(--radius);padding:18px 12px;text-align:center}
.fig b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(44px,14vw,58px);line-height:1;margin-bottom:10px;white-space:nowrap}
.fig .eyebrow{font-size:10px;letter-spacing:.1em;display:block}
.fig.due{background:var(--red);color:var(--paper)}
.fig.due .eyebrow{color:rgba(241,235,226,.85)}

/* segmented control */
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border-radius:999px;padding:4px;margin-bottom:20px}
.seg button{border:0;background:none;border-radius:999px;padding:11px 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--soft);min-height:42px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* cellar */
.region{margin-bottom:22px}
.region h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.region h2 span{font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:.04em;text-transform:none}
.wine{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:13px 0;border-bottom:1px solid var(--hair)}
.wine .name{font-weight:700}
.wine .sub{font-size:13px;color:var(--soft)}
.wine .qty{text-align:right;font-weight:700;white-space:nowrap}
.wine .sub{grid-column:1/-1}
.wine .price{grid-column:1/-1;font-size:13px;color:var(--soft)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:baseline;border:1px solid rgba(45,45,45,.25)}
/* wine colours from the WYNE palette: red for rouge, gold for blanc, a lighter red for rosé */
.dot.rouge{background:var(--red);border-color:var(--red)}
.dot.blanc{background:var(--gold);border-color:var(--gold)}
.dot.rose{background:rgba(229,86,69,.3);border-color:var(--red)}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:2px 8px;margin-left:6px;color:var(--gold);vertical-align:middle}
.empty{background:var(--paper-2);border-radius:var(--radius);padding:22px;color:var(--soft)}

/* invoices */
.inv{background:var(--paper-2);border-radius:var(--radius);padding:16px;margin-bottom:10px;display:grid;gap:12px}
.inv .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px}
.inv .num{font-weight:700}
.inv .amt{font-family:var(--display);font-size:28px;line-height:1;white-space:nowrap}
.inv .ref{font-size:13px;color:var(--soft);min-width:0;flex:1 1 170px}
.chip{display:inline-flex;white-space:nowrap;flex:none;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 10px;background:rgba(45,45,45,.08)}
.chip.due{background:var(--red);color:var(--paper)}
.inv .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Matthieu's note, opened by tapping a wine */
.wine-note{border-bottom:1px solid var(--hair)}
.wine-note summary{list-style:none;cursor:pointer;border-bottom:0}
.wine-note summary::-webkit-details-marker{display:none}
.wine-note .more{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-top:4px}
.wine-note .more::after{content:" +"}
.wine-note[open] .more::after{content:" –"}
.wine-note blockquote{margin:0 0 14px;padding:14px 16px;background:var(--paper-2);border-radius:14px;font-size:14px;line-height:1.6}
.wine-note blockquote footer{margin-top:8px;font-size:12px;color:var(--gold);font-weight:700}

/* invoice groups */
.group{margin-bottom:26px}
.group-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px;margin-bottom:12px;border-bottom:1.5px solid var(--ink)}
.group-title.due{color:var(--red);border-color:var(--red)}
.group-title b{font-weight:400}
.bank{margin-top:12px}
.bank .btn{justify-self:start}
.kv.stack{display:grid;gap:2px}
.kv.stack span:last-child{text-align:left;white-space:nowrap;font-size:13.5px}
.kv.stack span.wrap{white-space:normal;font-size:14px}
.mono-num{font-weight:700;letter-spacing:.02em}
.todo{font-style:normal;color:var(--gold)}

/* cellar in figures */
.stats{margin-bottom:6px}
.stats .figs{grid-template-columns:1fr 1fr}
.stats .fig b{font-size:clamp(30px,9vw,40px)}
.stats .figs.three{grid-template-columns:repeat(3,1fr)}
.stats .figs.three .fig{padding:16px 8px}
.colour-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px}
.colour-bar i{flex:1 1 0;display:block}
.colour-bar .rouge{background:var(--red)}
.colour-bar .blanc{background:var(--gold)}
.colour-bar .rose{background:rgba(229,86,69,.35)}
.colour-bar .autre{background:var(--hair)}
.split{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-top:6px}
.split li{display:grid;gap:2px;justify-items:center;text-align:center;font-size:12px}
.split li + li{border-left:1px solid var(--hair)}
.split b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1}
.split .dot{margin-right:6px}
.bars{display:grid;gap:9px}
.bars li{display:grid;grid-template-columns:minmax(90px,38%) 1fr 3ch;align-items:center;gap:10px;font-size:13px}
.bars .bar{height:8px;background:rgba(45,45,45,.08);border-radius:999px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--ink);border-radius:999px}
.bars b{text-align:right}
/* a small touch of colour: only the leading bar of each card */
.bars.blue .lead .bar i{background:var(--blue)}
.bars.red .lead .bar i{background:var(--red)}
.dot.autre{background:var(--hair)}
.top{display:grid;gap:8px;counter-reset:rank}
.top li{counter-increment:rank;display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:baseline;font-size:14px}
.top li::before{content:counter(rank);font-family:var(--display);font-size:20px;line-height:1;color:var(--gold)}
.top span{font-weight:700}
.top b{font-weight:400;font-size:13px;color:var(--soft);white-space:nowrap}
.finest .row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.finest .name{font-weight:700}
.finest .sub{font-size:13px;color:var(--soft)}
.finest .amt{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;white-space:nowrap}

/* profile */
.card{background:var(--paper-2);border-radius:var(--radius);padding:18px;margin-bottom:12px;display:grid;gap:10px}
.card .field input{background:var(--paper)}
.card .link{justify-self:center;padding:6px}
.kv{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.kv span:first-child{color:var(--soft);flex:none;max-width:45%}
.kv span:last-child{text-align:right;overflow-wrap:anywhere}
.steps{display:grid;gap:8px;font-size:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:24px 1fr;gap:8px}
.steps li::before{content:counter(s);font-weight:700;color:var(--blue)}

/* tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;background:rgba(241,235,226,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs nav{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);height:var(--tabbar)}
.tabs button{border:0;background:none;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);position:relative}
.tabs button[aria-current="page"]{color:var(--ink)}
.tabs button[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--ink)}
.tabs .badge{display:inline-block;min-width:18px;padding:1px 5px;border-radius:999px;background:var(--red);color:var(--paper);font-size:10px;margin-left:5px;letter-spacing:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* invoices: one tappable line each */
.group ul{border-top:1px solid var(--hair)}
.inv-line{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:12px;align-items:center;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--hair);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.inv-line .what,.inv-line .how{display:grid;gap:3px;min-width:0}
.inv-line .what b{font-weight:700;overflow-wrap:anywhere}
.inv-line .how{text-align:right}
.inv-line .how b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1;white-space:nowrap}
.inv-line small{font-size:12px;color:var(--soft)}
.inv-line small.due{color:var(--red);font-weight:700}
.inv-line .chev{font-style:normal;color:var(--soft);font-size:20px}
.pay{margin:10px 0 4px}
.section-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;line-height:1;margin:34px 0 14px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.fig .eyebrow{line-height:1.35}