:root {
  --bg: #1A1311;
  --bg-2: #211816;
  --card: #2A1F1C;
  --card-2: #33262252;
  --ink: #F4EBDF;
  --ink-2: #D9CBB9;
  --muted: #A8998A;
  --faint: #7C6E62;
  --line: #3D2F2A;
  --line-2: #4A3A33;
  --wine: #A3293F;
  --wine-ink: #FFE9EC;
  --gold: #D9B45A;
  --ok: #7FB38A;
  --warn: #E3A04A;
  --danger: #E06A5A;
  --slot: 28px;
  --serif: Fraunces, Georgia, serif;
  --sans: 'Work Sans', system-ui, -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); margin: 0; font-weight: 600; }
h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 20px; }
h3 { font-size: 16px; font-weight: 500; }
a { color: var(--gold); }

#app { max-width: 720px; margin: 0 auto; min-height: 100dvh; }
/* ordinateur / tablette à l'horizontale : écran élargi pour voir tous les casiers (le téléphone ne change pas) ; les fiches restent à 720 px */
@media (min-width: 1100px) { #app, .placebar-in, .tabbar-in, .act-dock-in { max-width: 1400px; } }
.splash { min-height: 100dvh; display: grid; place-items: center; font-family: var(--serif); font-size: 32px; color: var(--ink); }
.splash-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.splash-in svg { margin-bottom: 10px; }
.splash-nom { font-weight: 600; font-size: 40px; letter-spacing: -0.5px; line-height: 1; }
.splash-phrase { font-family: var(--sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.screen { padding: calc(18px + var(--safe-t)) 16px calc(120px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }

/* ---------- en-tête */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 6px 2px 0; }
.top .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.stat b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }

.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- recherche & filtres */
.search { position: relative; }
.search input { width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); padding: 0 44px 0 42px; outline: none; }
.search input:focus { border-color: var(--gold); }
.search > svg { position: absolute; left: 13px; top: 14px; width: 20px; height: 20px; color: var(--muted); }
.search .clear { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 20px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }
.chip.add { border-style: dashed; color: var(--muted); }

/* ---------- plan */
.plan-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zoom { display: flex; gap: 6px; }
.zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); font-size: 18px; }
.plan-wrap { position: relative; overflow: auto; border-radius: 18px; border: 1px solid var(--line); background:
  radial-gradient(circle at 1px 1px, #ffffff10 1px, transparent 1.4px) 0 0 / var(--slot) var(--slot), var(--bg-2);
  max-height: 62dvh; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.plan-wrap.editing { outline: 2px dashed var(--gold); outline-offset: -2px; }
.plan { position: relative; }
.rack { position: absolute; display: flex; flex-direction: column; border-radius: 8px; background: #3A2A2499; border: 1px solid var(--line-2); box-shadow: 0 6px 16px #0006; }
.rack-h { height: var(--slot); display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.rack-h small { color: var(--faint); font-weight: 500; }
.editing .rack { cursor: grab; border-color: var(--gold); touch-action: none; }
.editing .rack.drag { cursor: grabbing; opacity: .85; z-index: 5; box-shadow: 0 12px 30px #000a; }
.rack-g { display: grid; flex: 1; }
.slot { border: 0; padding: 0; background: none; display: grid; place-items: center; position: relative; }
.slot i { display: block; width: 74%; height: 74%; border-radius: 50%; background: #00000055; box-shadow: inset 0 1px 3px #000c; transition: transform .2s, opacity .2s; }
.slot.full i { box-shadow: inset 0 -3px 5px #0005, 0 0 0 1.5px #0007; }
/* sucre : L écrit dans les bouteilles liquoreuses, sur la couleur du vin (moelleux : couleur ambre seule) */
.slot i { position: relative; }
.slot i b.sw { position: absolute; inset: 0; display: grid; place-items: center; font: 800 max(8px, calc(var(--slot) * .4))/1 system-ui, sans-serif; pointer-events: none; }
.slot.resv i b.sw { display: none; } /* le cadenas passe devant */
.dimmed .slot.full:not(.hit) i { opacity: .16; }
.dimmed .slot.full:not(.hit).ready::after { opacity: .2; }
.slot.hit i { transform: scale(1.12); box-shadow: 0 0 0 2px var(--gold), 0 0 14px 4px #D9B45AAA; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 4px 1px #D9B45A55; } }
.placing .slot:not(.full) i { background: #D9B45A33; box-shadow: inset 0 0 0 1.5px #D9B45A99; }
.slot.sel i { box-shadow: 0 0 0 3px #fff; }
.placing .rack.bulkrack { box-shadow: 0 0 0 2px #D9B45A99; }
.empty-plan { padding: 30px 20px; text-align: center; color: var(--muted); }

.unplaced { background: var(--card); border: 1px dashed var(--warn); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.unplaced .chips .chip { border-color: var(--warn); }

/* ---------- bandeau de rangement */
.placebar { position: fixed; left: 0; right: 0; top: 0; z-index: 20; background: var(--gold); color: #241A10; padding: calc(10px + var(--safe-t)) 16px 10px; box-shadow: 0 6px 20px #0008; }
.placebar-in { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.placebar p { margin: 0; flex: 1; font-size: 14px; line-height: 1.3; }
.placebar b { font-weight: 700; }
.has-placebar .screen { padding-top: calc(86px + var(--safe-t)); }

/* ---------- listes */
.list { display: flex; flex-direction: column; gap: 8px; }
.wine { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; text-align: left; width: 100%; color: inherit; }
.thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--bg-2) center / cover no-repeat; flex: none; display: grid; place-items: center; overflow: hidden; position: relative; }
.thumb .cd { width: 18px; height: 18px; border-radius: 50%; }
.thumb .cd.corner { position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--card); }
.wine-t { flex: 1; min-width: 0; }
.wine-t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wine-t span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wine-t .nt { color: var(--gold); }
.wine-r { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.count { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.pill.passe { background: #E06A5A33; color: #FFB4A8; }
.pill.fin { background: #E3A04A33; color: #FFD49A; }
.pill.apogee { background: #D9B45A33; color: var(--gold); }
.pill.pret { background: #7FB38A33; color: #BFE3C6; }
.pill.bientot { background: #7FA3B333; color: #C2DDEA; }
.group-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 2px 0; font-weight: 600; }
.empty { color: var(--muted); text-align: center; padding: 40px 16px; line-height: 1.5; }

/* ---------- barre d'onglets */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #1A1311F2; backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 8px calc(8px + var(--safe-b)); }
.tabbar-in { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.tab { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--faint); font-size: 11px; font-weight: 500; position: relative; }
.tab svg { width: 24px; height: 24px; }
.tab.on { color: var(--ink); }
.tab .badge { position: absolute; top: 2px; left: 55%; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #241A10; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.tab-add { justify-self: center; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--wine); color: var(--wine-ink); display: grid; place-items: center; box-shadow: 0 6px 18px #A3293F66; margin-top: -18px; }
.tab-add svg { width: 28px; height: 28px; }

/* ---------- feuilles (panneaux du bas) */
.ov { position: fixed; inset: 0; z-index: 30; background: #000A; display: flex; align-items: flex-end; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--bg-2); border-radius: 24px 24px 0 0; padding: 10px 18px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; max-width: 720px; width: 100%; margin: 0 auto; max-height: 92dvh; overflow: auto; border-top: 1px solid var(--line-2); animation: up .22s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(40px); } }
.grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); align-self: center; flex: none; }
.sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink-2); font-size: 20px; line-height: 1; flex: none; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); padding: 10px 12px; outline: none; }
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
/* iPhone : un champ date a une largeur et une hauteur à lui → il débordait sur sa voisine (fiche Boire, 10/10) */
.row2 > *, .row3 > * { min-width: 0; }
.field input, .field select { box-sizing: border-box; min-width: 0; max-width: 100%; }
.field input[type=date] { -webkit-appearance: none; appearance: none; display: block; height: 46px; line-height: 24px; text-align: left; }
.field input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field select { height: 46px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.btn { min-height: 50px; border-radius: 14px; border: 0; background: var(--ink); color: var(--bg); font-weight: 600; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.wine-b { background: var(--wine); color: var(--wine-ink); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid #E06A5A55; }
.btn.small { min-height: 38px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.btn:disabled { opacity: .5; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btns .btn { flex: 1; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; accent-color: var(--wine); }
.hint { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot { aspect-ratio: 3 / 4; border-radius: 16px; border: 1.5px dashed var(--line-2); background: var(--card) center / cover no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 14px; position: relative; cursor: pointer; }
.shot svg { width: 32px; height: 32px; }
.shot.has { border-style: solid; border-color: var(--gold); }
.shot.has > * { display: none; }
.shot.has::after { content: attr(data-label); position: absolute; left: 8px; bottom: 8px; background: #000B; color: #fff; padding: 3px 8px; border-radius: 8px; font-size: 12px; }
.shot input { display: none; }

.busy { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--card); color: var(--ink-2); }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--gold); animation: rot .8s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.dup { background: #D9B45A1A; border: 1px solid #D9B45A66; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

.qty { display: flex; align-items: center; gap: 10px; }
.qty button { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); font-size: 22px; }
.qty output { min-width: 34px; text-align: center; font-family: var(--serif); font-size: 22px; font-weight: 600; }

/* ---------- fiche vin */
.hero { display: flex; gap: 14px; align-items: flex-start; }
.hero .ph { width: 92px; height: 122px; border-radius: 12px; background: var(--card) center / cover no-repeat; flex: none; border: 1px solid var(--line-2); display: grid; place-items: center; }
.hero .ph .cd { width: 26px; height: 26px; border-radius: 50%; }
.hero h2 { font-size: 22px; line-height: 1.15; }
.hero p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.box h3 { font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.box p b { color: var(--ink); font-weight: 600; }
.note-box { background: #D9B45A14; border-color: #D9B45A55; }
.note-box p { color: var(--ink); white-space: pre-wrap; }
.apo { position: relative; height: 34px; margin: 8px 4px 2px; }
.apo .bar { position: absolute; left: 0; right: 0; top: 12px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #7FA3B355, #7FB38A, var(--gold) 55%, var(--warn) 85%, #E06A5A); }
.apo .now { position: absolute; top: 4px; width: 3px; height: 26px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--bg-2); transform: translateX(-1px); }
.apo-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.money div { background: var(--bg-2); border-radius: 12px; padding: 10px; }
.money b { display: block; font-family: var(--serif); font-size: 20px; }
.money span { font-size: 12px; color: var(--muted); }
.pos { display: flex; flex-wrap: wrap; gap: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; padding: 5px 10px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-2); }
details.box summary { cursor: pointer; font-family: var(--serif); font-size: 15px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
details.box summary::after { content: '+'; color: var(--muted); }
details.box[open] summary::after { content: '–'; }
.bigphoto { width: 100%; border-radius: 14px; }

#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: calc(100% - 32px); }
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.has-undo { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast-undo { flex: none; background: none; border: 0; padding: 4px 2px; color: var(--wine); font-weight: 700; font-size: 14px; text-decoration: underline; cursor: pointer; }

.login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px; max-width: 420px; margin: 0 auto; }
.login h1 { font-size: 40px; }
.err { color: var(--danger); font-size: 14px; min-height: 18px; margin: 0; }

@media (min-width: 720px) {
  .sheet { border-radius: 24px; margin-bottom: 24px; }
  .ov { align-items: center; }
}
:root { color-scheme: dark; }
.btns .btn { flex: 1 1 auto; white-space: nowrap; }
/* casiers numérotés, séparations, réservés, optimisation */
.rack-g { position: relative; display: block; flex: none; }
.rack-g .slot { position: absolute; }
.sep { position: absolute; background: #C8B49A; border-radius: 2px; opacity: .55; pointer-events: none; }
.sep.v { top: 2px; bottom: 2px; width: 3px; }
.sep.h { left: 2px; right: 2px; height: 3px; }
.rack-h .num { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 5px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 700; }
.rack.reserved { border-color: #7FA3B3; background: #2A3A4266; }
.rack-h .resv { color: #C2DDEA; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.slot.from i { box-shadow: 0 0 0 3px #fff, 0 0 16px 4px #ffffffaa; animation: pulsew 1.1s ease-in-out infinite; }
@keyframes pulsew { 50% { box-shadow: 0 0 0 3px #fff, 0 0 4px 1px #ffffff55; } }
.slot.to i { background: #D9B45A55 !important; box-shadow: 0 0 0 3px var(--gold), 0 0 16px 4px #D9B45AAA; }
.optimizing .slot:not(.from):not(.to) i { opacity: .45; }
.placebar small { font-weight: 600; opacity: .75; }
.check input { flex: none; }
/* accords mets-vins */
.pair { border-color: #A3293F66; background: linear-gradient(180deg, #A3293F1F, var(--card)); }
.pair-row { display: flex; gap: 8px; }
.pair-row input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 0 12px; outline: none; }
.pair-row input:focus { border-color: var(--gold); }
.pick { display: flex; flex-direction: column; gap: 4px; }
.pick .why { margin: 0 4px 4px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.pick .why::before { content: '→ '; color: var(--gold); }
/* menu ouvert : page de fond figée */
html.locked, html.locked body { overflow: hidden; overscroll-behavior: none; }
.ov { overscroll-behavior: contain; }
.sheet { overscroll-behavior: contain; }
/* avis perso */
.myr { font-style: normal; color: var(--gold); font-weight: 700; margin-left: 4px; }
/* rafale */
.slot.sel i { background: var(--gold) !important; box-shadow: 0 0 0 2px #fff; color: #241A10; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.burst-big { min-height: 64px; font-size: 17px; }
.burst-cam { border-color: var(--gold); }
.burst-cam .btns label { cursor: pointer; }
.burst-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.burst-item .thumb { width: 44px; height: 44px; }
.burst-item .wine-t { display: flex; flex-direction: column; gap: 2px; }
.burst-item .wine-t > span:first-child { font-size: 12px; color: var(--muted); }
.burst-act { display: flex; gap: 4px; flex: none; }
.burst-act .btn { min-width: 36px; padding: 0 8px; }
/* plan plus aéré */
.plan-bar { margin-top: 6px; gap: 12px; }
.zone-chips { flex: 1; min-width: 0; }
.zoom button.on { border-color: var(--gold); color: var(--gold); }
.plan-tools { gap: 10px; }
.plan-tools .btn { flex: 1 1 0; }
.plan { margin: 14px; }
.plan-wrap { margin: 2px 0; }
.rack { border-radius: 10px; }
.rack-h { padding: 0 8px; }
.rack-g { margin: 0 4px 4px; }
/* cadre arrondi à la case : la grille est centrée dans la place en plus */
.rack > .rack-g { margin: auto; }
.empty-plan { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plan-tools { margin-top: 4px; }
/* respiration entre la barre (zones / zoom) et le plan */
.plan-bar { margin-bottom: 6px; }
.plan { margin: 18px 16px 16px; }
.rack-h { height: var(--hh, var(--slot)); flex: none; }
/* glisser une bouteille (appui long) */
.slot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.slot.lifting i { opacity: .2; }
.lp-ghost { position: fixed; left: 0; top: 0; z-index: 60; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px #fff, 0 12px 28px #000c; }
.slot.drop-ok i { box-shadow: 0 0 0 3px var(--gold), 0 0 14px 4px #D9B45AAA; transform: scale(1.15); }
.bulkrack.drop-ok { box-shadow: 0 0 0 3px var(--gold); }
html.dragging, html.dragging body { overflow: hidden; touch-action: none; }
.lp-hint { margin: 0 2px; font-size: 12px; }
/* compteur de bouteilles, suppression discrète */
.qty-sm { gap: 6px; }
.qty-sm button { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.qty-sm output { font-size: 18px; min-width: 26px; }
.box h3 .qty-sm { margin-left: auto; }
.burst-item .qty-sm { margin-top: 4px; }
.burst-item .qty-sm button { width: 30px; height: 30px; }
.burst-item .qty-sm output { font-family: var(--sans); font-size: 14px; font-weight: 700; }
.linkdanger { background: none; border: 0; color: var(--danger); font-size: 13px; text-decoration: underline; padding: 8px; align-self: center; opacity: .85; }
/* la fiche ne bouge plus de gauche à droite */
.sheet { overflow-x: hidden; overflow-y: auto; touch-action: pan-y; }
.sheet > * { min-width: 0; max-width: 100%; flex-shrink: 0; } /* la feuille défile : ses blocs ne se tassent jamais (sinon listes tronquées) */
.hero > div { min-width: 0; overflow-wrap: anywhere; }
.box p, .tags, .pos { overflow-wrap: anywhere; }
.apo { overflow: hidden; }
/* Mon avis dans les formulaires */
.burst-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.burst-ctl .qty-sm { margin-top: 0; }
/* ---- harmonisation des espaces (même écart partout) ---- */
:root { --gap: 14px; }
.screen { padding-top: calc(10px + var(--safe-t)); gap: var(--gap); }
.top { padding: 0 2px; }
#body { display: flex; flex-direction: column; gap: var(--gap); }
.plan-bar, .plan-tools, .plan-wrap { margin: 0; }
.chips { padding-bottom: 0; }
.plan { margin: 16px; }
/* plus de zoom au double appui */
html, body { touch-action: manipulation; }
/* champ du plat */
.pair-in { position: relative; flex: 1; min-width: 0; display: flex; }
.pair-in input { flex: 1; padding-right: 40px !important; }
.pair-in .clear { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 20px; }
/* corbeille */
.trash summary { font-family: var(--serif); font-weight: 600; cursor: pointer; }
.trash-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.trash-row small { color: var(--muted); }
button.stat { text-align: left; color: inherit; font: inherit; cursor: pointer; }
.search .clear[hidden] { display: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* boutons du haut, retour */
.top-btns { display: flex; gap: 8px; }
.top-btns .icon-btn { font-size: 18px; }
.back { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 0 0 6px; }
/* tableau des millésimes */
.vtable-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.vtable { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.vtable th { color: var(--muted); font-weight: 600; padding: 4px 2px; white-space: nowrap; }
.vtable tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; color: var(--ink); padding: 0 8px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.vcell { width: 30px; height: 30px; border-radius: 8px; border: 0; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.vcell.vnone { background: var(--bg-2); color: var(--faint); }
.vcell.mine { box-shadow: 0 0 0 2px var(--gold); }
.vlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.vlegend span { display: inline-flex; align-items: center; gap: 6px; }
.vlegend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.vlegend .mine-i { border: 2px solid var(--gold); }
.vint-pill { font-family: var(--sans); font-size: 12px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
/* actu */
.news { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; color: inherit; text-decoration: none; }
.news-img { width: 84px; height: 84px; border-radius: 12px; flex: none; background: var(--bg-2) center / cover no-repeat; }
.news-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news-t small { color: var(--muted); font-size: 12px; }
.news-t b { font-size: 15px; line-height: 1.3; }
.news-t span { font-size: 13px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mine-tag { color: var(--gold); }
.stats .stat { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
/* cadre « en cave » à l'intérieur de la case (ne déborde plus) */
.vcell.mine { box-shadow: inset 0 0 0 2px var(--gold); }
/* millésimes : « en cave » = point blanc dans le coin, plus de cadre doré */
.vcell { position: relative; }
.vcell.mine { box-shadow: none; }
.vcell.mine::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #000; }
.vcell.vnone.mine::after { background: #fff; }
.vlegend i { width: 18px; height: 18px; font-style: normal; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.vlegend .mine-i { border: 0; position: relative; background: var(--bg-2); }
.vlegend .mine-i::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #000; }

/* Rafale : boutons photo collés en bas de la feuille, sous le pouce */
.burst-dock { position: sticky; bottom: calc(-24px - var(--safe-b)); margin: 0 -18px calc(-24px - var(--safe-b)); padding: 12px 18px calc(16px + var(--safe-b)); background: var(--bg-2); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 24px #0007; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.sheet > .burst-dock { max-width: none; }
.burst-dock .box { margin: 0; }
.burst-full { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #1B7A3E33; border: 1px solid #1B7A3E; font-size: 14px; line-height: 1.35; }
.burst-full span { flex: 1; }
.burst-full .btn { flex: none; width: auto; }

/* Cave frigo : titre de clayette, sens des bouteilles par profondeur (▼ col côté porte, ▲ côté fond) */
.fridge .shelf-t { position: absolute; left: 2px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 18px; }
.fridge .row-t { position: absolute; left: 0; width: 44px; display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.fridge .row-t b { color: var(--gold); font-size: 9px; }
.shelf-ed { border: 1px solid var(--line-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.shelf-h { display: flex; align-items: center; gap: 8px; }
.shelf-h b { flex: 1; }
.shelf-h .btn { width: auto; flex: none; }
.shelf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.dirs { display: flex; flex-wrap: wrap; gap: 6px; }
.dirs .chip b { font-weight: 700; text-transform: capitalize; }
.stat small.stat-d { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
/* frigo : aperçu en perspective, réglages par profondeur, petites bouteilles */
.shelf3d-wrap { display: flex; justify-content: center; padding: 4px 0 2px; overflow: hidden; }
.shelf3d { max-width: 100%; height: auto; }
.dir-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.dir-row > b { min-width: 52px; font-size: 13px; text-transform: capitalize; }
.dir-row .chip { display: inline-flex; align-items: center; gap: 5px; }
svg.btl { flex: none; vertical-align: middle; }
.fridge .row-t svg.btl { color: var(--gold); }
/* Historique : statistiques */
.stats h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.stat-row div { background: var(--bg-2); border-radius: 12px; padding: 8px; text-align: center; }
.stat-row b { display: block; font-family: var(--serif); font-size: 17px; }
.stat-row span { font-size: 11px; color: var(--muted); }
.sbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 110px; align-items: end; }
.sbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.sbar i { width: 70%; min-height: 2px; background: var(--wine); border-radius: 4px 4px 0 0; }
.sbar-v { font-size: 10px; color: var(--ink-2); }
.sbar-l { font-size: 9px; color: var(--muted); }
.hrow { display: grid; grid-template-columns: 38% 1fr 28px; align-items: center; gap: 6px; font-size: 13px; margin: 4px 0; }
.hl { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb { height: 10px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.hb i { display: block; height: 100%; background: var(--wine); border-radius: 0 4px 4px 0; }
.hv { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stats .fav { margin: 4px 0; font-size: 14px; }
.hl .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
/* outils du plan à côté du zoom */
.plan-tools-top { display: flex; gap: 8px; min-width: 0; }
.plan-tools-top .btn { width: auto; flex: none; padding: 0 12px; height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.plan-tools-top { gap: 6px; }
.plan-tools-top .btn { padding: 0 9px; font-size: 13px; gap: 4px; }
.plan-bar .zoom { gap: 4px; flex: none; }
.plan-bar .zoom button { width: 34px; }
.plan-bar .zoom .zoom-help { font-weight: 700; color: var(--ink-2); margin-right: 4px; }
/* Réglages en rubriques (18/10) */
.set-list { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--card); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 15px 14px; font-size: 16px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: inherit; width: 100%; }
.set-row:last-child { border-bottom: 0; }
.set-row .set-ic { width: 26px; text-align: center; font-size: 19px; }
.set-row i { margin-left: auto; font-style: normal; color: var(--ink-2); font-size: 20px; }
.set-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wine-2, #E0263E); }
.set-back { background: none; border: 0; color: var(--gold); font-size: 15px; padding: 0 0 4px; font-weight: 600; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
/* glossaire */
.gl .gl-l { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.gl .gl-l p { margin: 0; }
.gl-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #241A10; box-shadow: inset 0 0 0 1px #0004; }
.gl-ic { flex: none; min-width: 24px; text-align: center; font-style: normal; font-size: 16px; color: var(--gold); }
.gl-ic:has(> b), .gl-ic { white-space: nowrap; }
.gl-num { display: inline-block; background: var(--ink); color: var(--bg); border-radius: 5px; padding: 0 6px; font-size: 13px; }
.gl-hit { box-shadow: 0 0 0 2px var(--gold), 0 0 10px 3px #D9B45AAA; }
.gl-from { box-shadow: 0 0 0 3px #fff, 0 0 10px 3px #ffffffaa; }
.gl-to { box-shadow: 0 0 0 3px var(--gold); }
.gl .gl-l .pill { flex: none; min-width: 130px; text-align: center; }
/* Millésimes : une seule grille (alignement garanti), colonne des régions fixe et lisible, années en entier */
.vg { --vg-reg: fit-content(104px); --vg-col: 40px; display: grid; gap: 5px 4px; padding: 8px 8px 8px 0; width: max-content; align-items: center; }
.vg-reg { position: sticky; left: 0; z-index: 3; align-self: stretch; display: flex; align-items: center; padding: 0 6px 0 10px; background: var(--card); font-size: 12.5px; font-weight: 600; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; box-shadow: 6px 0 8px -6px #000a; }
.vg-corner { z-index: 4; color: var(--muted); font-weight: 600; font-size: 11px; }
.vg-y { text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.vg .vcell { width: var(--vg-col); height: 34px; z-index: 1; }
/* bouteilles réservées : petit cadenas sur la place, lignes de réservation */
.slot.resv::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--slot) * .42); line-height: 1; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.chip.resv-chip { border-color: var(--gold); }
.resv-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.resv-line { margin: 0; font-size: 14px; }
.warn { color: #F0A35E; font-size: 13px; margin: 0; }
/* remplissage et valeur dans l'en-tête de chaque casier */
.rack-h { gap: 6px; }
.rack-h > span { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-h .rk-stat { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.rack-h .rk-stat { flex: none; margin-left: auto; color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* fiche vin : bloc Prix en premier, plus serré */
.price-box { padding: 10px 12px; gap: 6px; }
.price-box h3 { margin: 0; }
.price-box h3 .btn { padding: 4px 10px; min-height: 0; height: 30px; }
.price-box .money { gap: 6px; }
.price-box .money div { padding: 7px 10px; }
.price-box .money b { font-size: 18px; line-height: 1.2; }
.price-box .money span { font-size: 11px; }
.price-box .hint { margin: 0; font-size: 12px; }

/* rafale : la dernière bouteille reste visible au-dessus des boutons photo */
.burst-item { scroll-margin-bottom: 170px; }

/* clavier ouvert : barre du bas masquée */
html.kb .tabbar { display: none; }
/* avis de la famille : note sur 10 */
.score-pick { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.score-pick button { height: 38px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-2); font-weight: 700; padding: 0; }
.score-pick button.on { background: var(--gold); color: #241A10; border-color: var(--gold); }
.avis-box h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avis-box h3 .btn { margin-left: auto; }
.avis-box .avg { color: var(--gold); font-family: var(--serif); }
.avis-box h3 small { font-weight: 400; font-size: 12px; }
.avis-sum { background: #D9B45A14; border: 1px solid #D9B45A44; border-radius: 12px; padding: 10px 12px; margin: 6px 0 10px; font-size: 14px; }
.avis-sum p { margin: 0 0 4px; }
.avis-list { display: flex; flex-direction: column; gap: 8px; }
.avis { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.avis p { margin: 0 0 2px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.avis-del { margin-left: auto; border: 0; background: none; color: var(--faint); font-size: 18px; padding: 0 4px; }
.sc { color: var(--gold); font-weight: 700; font-size: 13px; white-space: nowrap; }
.wine-t .myr { font-style: normal; color: var(--gold); font-size: 12px; font-weight: 700; margin-left: 4px; }
/* doublons : « Même vin que… ? » */
.dup-ask { background: #7FA3B31A; border: 1px solid #7FA3B366; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.dup-q { margin: 0; }
.dup-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dup-cmp > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.dup-cmp small { color: var(--ink-2); overflow-wrap: anywhere; }
.dup-ph { display: block; height: 130px; border-radius: 10px; background: var(--bg-2) center / cover no-repeat; margin-bottom: 6px; border: 1px solid var(--line); }
.pill-ask { border: 1px solid #7FA3B3; background: #7FA3B322; color: #C2DDEA; cursor: pointer; white-space: normal; text-align: left; }
/* bandeau des régions sous le titre d'un casier (toucher = allumer ses bouteilles) */
/* filtres compacts : Couleur ▾ · Région ▾ · Prêts · 🔒 */
.fchips .chip.open { border-color: var(--ink-2); color: var(--ink); }
.fchips .fx { margin-left: 4px; padding: 0 2px; font-weight: 700; opacity: .65; }
.fmenu { display: flex; flex-direction: column; gap: 2px; margin: -2px 0 10px; padding: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; max-height: 300px; overflow-y: auto; }
.fm-i { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); text-align: left; font-size: 14px; }
.fm-i small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.fm-i.on { background: var(--line); font-weight: 600; }
.fm-sep { border: 0; border-top: 1px solid var(--line-2); margin: 4px 6px; }
.dot-sweet { background: #E0892E; border: 0; font: 800 9px/1 system-ui, sans-serif; color: #3A2410; } /* moelleux : ambre, liquoreux : ambre + L (comme sur le plan) */
.fm-i .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; }
/* onglet Vins : prix par bouteille à gauche de la quantité, cadenas en bas à gauche de la photo */
.wine-r .cnt-row { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.wine-r .ppb { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.thumb .lk { position: absolute; left: 3px; bottom: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 9.5px; line-height: 1; }
.burst-row { display: flex; gap: 8px; }
.burst-row .btn { flex: 1 1 0; min-height: 52px; }
.burst-row .btn.wine-b { flex: 1.6 1 0; }
.burst-row .btn { font-size: 15px; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.edge-grid { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 6px; align-items: center; }
.edge-grid b { font-size: 13px; color: var(--ink-2); padding-right: 4px; }
.edge-grid .btn { padding: 8px 4px; font-size: 12.5px; white-space: nowrap; }
.edge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.edge-grid b { grid-column: 1 / -1; margin-top: 2px; }
.edge-grid .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rack.drag.bad { outline: 3px solid var(--danger); outline-offset: 2px; opacity: .8; }
.rack-h .prio { color: var(--gold); font-weight: 600; font-size: 10.5px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prio-row { display: flex; align-items: center; gap: 8px; }
.prio-row b { flex: 0 0 96px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.prio-row select { flex: 1; min-width: 0; }
.prio-box { border-color: #D9B45A66; background: #D9B45A0F; }
.prio-box h3 { color: var(--gold); }
.prio-box .prio-row { flex-direction: column; align-items: stretch; gap: 4px; }
.prio-box .prio-row b { flex: none; }
.prio-sels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prio-sels select { min-width: 0; font-size: 13px; padding-left: 8px; padding-right: 4px; }
.prio-sels select { width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); outline: none; }
.prio-sels select:focus { border-color: var(--gold); }
.rack .rack-h { cursor: pointer; }
/* photo en grand */
[data-zoom] { cursor: zoom-in; }
#zoom { position: fixed; inset: 0; z-index: 100; background: #000e; display: grid; place-items: center; padding: calc(16px + var(--safe-t)) 12px calc(16px + var(--safe-b)); cursor: zoom-out; touch-action: pinch-zoom; }
#zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
#zoom .zoom-x { position: absolute; top: calc(12px + var(--safe-t)); right: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff2; color: #fff; display: grid; place-items: center; font-size: 26px; }
.rack-h .prio { flex: 0 50 auto; } .rack-h > span { flex-shrink: 1; min-width: 3.5em; } .rack-h > span.no-name { min-width: 0; flex: none; } .rack-h > span.no-name .num { margin-right: 0; }
/* place vide réservée */
.slot.held i { opacity: .85; } /* place vide réservée : le trou + le cadenas, sans pointillés (09/10) */
.slot.held::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--slot) * .38); pointer-events: none; }

/* zone d'actions en bas (tous les modes guidés) — remplace les boutons du bandeau du haut */
.act-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; padding: 10px 16px calc(12px + var(--safe-b)); background: #1A1311F2; backdrop-filter: blur(10px); border-top: 1px solid var(--line-2); box-shadow: 0 -8px 20px #0007; }
.act-dock-in { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; }
.act-dock .btn { flex: 1 1 0; min-height: 62px; font-size: 17px; white-space: nowrap; }
.act-dock .btn.wine-b { flex: 2 1 0; font-size: 19px; }
body:has(.act-dock) .screen { padding-bottom: calc(110px + var(--safe-b)); }
.sheet:has(.act-dock) { padding-bottom: calc(110px + var(--safe-b)); }
.sheet:has(.dock-stack) { padding-bottom: calc(180px + var(--safe-b)); }
.dock-stack .act-dock-in { flex-direction: column; gap: 8px; }
.dock-stack .act-dock .btn { flex: none; min-height: 54px; white-space: normal; line-height: 1.2; }
.act-dock .btn.bd-fiche { flex: 0 0 auto; padding: 0 14px; font-size: 15px; }
.placebar p { font-size: 15px; }
/* Optimiser : vignette de la bouteille à bouger dans le bandeau */
.pb-thumb { flex: none; width: 58px; height: 58px; border-radius: 10px; background: #241A10 center / cover no-repeat; box-shadow: 0 0 0 2px #241A10; display: grid; place-items: center; }
.pb-dot i { width: 22px; height: 22px; border-radius: 50%; display: block; }

/* réserve : une grande boîte, contenu en la touchant */
.reserve-tile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; text-align: center; }
.reserve-tile .rv-ico { font-size: calc(var(--slot) * 1.1); line-height: 1; }
.reserve-tile b { font-size: 14px; }
.reserve-tile small { color: var(--muted); font-size: 11.5px; }
.reserve-tile .rv-found { font-style: normal; font-size: 11.5px; font-weight: 700; color: #241A10; background: var(--gold); border-radius: 99px; padding: 1px 8px; margin-top: 2px; }
.rack.bulkrack.rv-lit { box-shadow: 0 0 0 2px var(--gold); }
.rv-lot { display: flex; gap: 6px; align-items: stretch; }
.rv-lot .wine { flex: 1; min-width: 0; }
.rv-lot .rv-spot { flex: none; width: 46px; padding: 0; font-size: 18px; }
.rack-h .prio { display: inline-grid; place-items: center; color: var(--gold); flex: none; }
/* aménagement : casiers qui se chevauchent (« Terminé » refuse tant qu'il y en a) */
.rack.clash { outline: 3px solid var(--danger); outline-offset: 2px; }
.hero .ph { position: relative; }
.hero .ph .ph-add { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 11px; color: var(--muted); }
.imp-prev p { margin: 4px 0; } .imp-prev small { color: var(--muted); }
/* premier lancement guidé */
.guide { display: flex; flex-direction: column; gap: 8px; }
.guide .gstep { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; }
.guide .gstep.done { opacity: .55; }
.guide .gstep .gn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--wine, #A4243B); color: #fff; }
.guide .gstep.done .gn { background: #2E7D32; }
.guide .gstep div { flex: 1; min-width: 0; } .guide .gstep p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.guide .gbtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.guide .link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 4px; align-self: center; }
/* « + » : Pour ma cave / Bue hors cave */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #160f0d; border: 1px solid var(--line-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; color: var(--muted); font-weight: 700; padding: 10px 4px; border-radius: 10px; font-size: 14px; }
.seg button.on { background: var(--ink); color: var(--bg); }
.tag-out { font-style: normal; display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #3a2d4a; color: #d4c2ff; vertical-align: middle; }
.vint-line { color: var(--muted); font-size: 13px; }

/* œil du mot de passe */
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 48px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; font-size: 18px; opacity: .5; cursor: pointer; }
.pw-eye.on { opacity: 1; }

/* « À ranger » : vignette de l'étiquette */
.chip.chip-ph { padding-left: 4px; }
.chip-thumb { width: 26px; height: 34px; border-radius: 5px; background: #0003 center / cover; flex: none; }
.unplaced > .btn { align-self: flex-start; margin: 6px 0 4px; }

/* Rangement « tout sorti » : une bouteille à la fois (photo, place en mots, clayette dessinée) */
.rg-panel { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; padding: calc(16px + var(--safe-t)) 16px calc(110px + var(--safe-b)); }
.rg-in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.rg-in h2 { font-size: 24px; }
.rg-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }
.rg-top b { color: var(--ink); }
.rg-bar { height: 8px; border-radius: 99px; background: var(--card); overflow: hidden; }
.rg-bar i { display: block; height: 100%; background: var(--gold); }
.rg-note { border: 1px solid var(--ok); color: var(--ok); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.rg-bottle { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.rg-bottle > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rg-bottle b { font-size: 18px; }
.rg-bottle small, .rg-lbl { color: var(--muted); font-size: 14px; }
.rg-photo { width: 92px; height: 122px; border-radius: 10px; background: #0003 center / cover; flex: none; box-shadow: 0 6px 16px #0008; }
.rg-nophoto { opacity: .85; }
.rg-dest { font-family: var(--serif); font-size: 23px; line-height: 1.2; color: var(--gold); }
.rg-svg { display: flex; justify-content: center; }
.rg-svg svg { max-width: 100%; height: auto; }
.rg-leg { text-align: center; margin: 0; }

.burst-saved { margin: 0; color: var(--ok); font-size: 14px; }

/* Réglages › Administration */
.admin h4 { margin: 10px 0 2px; font-size: 14px; color: var(--ink-2); }
.admin .code { letter-spacing: .15em; font-size: 18px; color: var(--gold); }
.adm-err summary { font-size: 13px; cursor: pointer; }
.adm-err .hint { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-idea { display: flex; gap: 8px; align-items: flex-start; }
.adm-idea > span { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-idea.seen { opacity: .55; }
.idea-pics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.idea-pics > span, .idea-pics > a { position: relative; display: block; }
.idea-pics img { width: 72px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #ddd); display: block; }
.idea-pics .btn { position: absolute; top: 2px; right: 2px; padding: 0 6px; min-height: 0; line-height: 22px; }

/* catalogue partagé */
.cat-badge { display: flex; flex-direction: column; gap: 4px; }
.cat-badge .hint { margin: 0; }
.badge-ok, .badge-ia { align-self: flex-start; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.badge-ok { background: #1f3a26; color: #bfe6c8; }
.badge-ia { background: #3a2c1a; color: var(--gold); }
.cat-badge .link { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; font-size: inherit; cursor: pointer; }
.share-box { align-items: flex-start; }
.pill-cat { background: #1f3a26; color: #bfe6c8; }

.app-url { overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

.moved { max-width: 460px; margin: 18vh auto 0; padding: 0 20px; text-align: center; display: grid; gap: 12px; }
.moved .btn { display: inline-block; text-decoration: none; }
.install-btn { margin-top: 6px; }
.install-ios { text-align: center; margin-top: 6px; }
.gallery-links { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.gallery-links .link { color: var(--ink-2); text-decoration: underline; cursor: pointer; padding: 4px 2px; }
.rv-btns { display: flex; flex-direction: column; gap: 6px; }
.rv-btns .rv-spot.on { border-color: var(--gold); background: #C9A24A33; }
/* zoom : le plan gère lui-même le pincement (pas de zoom de toute la page) */
.plan-wrap { touch-action: pan-x pan-y; }
.plan { transform-origin: 0 0; }
/* réponses aux retours */
.icon-btn.dot { position: relative; }
.icon-btn.dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #E0566B; box-shadow: 0 0 0 2px var(--bg); }
.fb-reply { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--gold); background: #C9A24A1a; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-reply.new { border-left-color: #E0566B; }
.tag-new { font-size: 11px; color: #fff; background: #E0566B; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.fb-item + .fb-item { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.fb-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-reply { margin: 4px 0 12px; }
.adm-reply summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.adm-reply textarea { width: 100%; min-height: 70px; margin: 6px 0; }
.other-sizes { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.other-sizes .chip { font-size: 13px; }
.wine-t .fmt { font-style: normal; font-size: 11px; font-weight: 600; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
/* Envie : couleur → corps → arômes */
.envie { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; padding: 4px 2px; }
.envie .env-l { font-size: 12px; color: var(--muted); padding-top: 8px; }
.envie .env-r { display: flex; flex-wrap: wrap; gap: 6px; }
.envie .env-p { height: 30px; padding: 0 11px; font-size: 13px; }
.envie .hint, .envie > .btn { grid-column: 1 / -1; }
.style-line { color: var(--gold); font-size: 13px; }
/* Rafale : ✕ | ✨ Choisis pour moi | Photos → (toujours en bas, à portée du pouce) */
.burst-dock3 .act-dock .bd-x { flex: 0 0 62px; padding: 0; font-size: 20px; }
.burst-dock3 .act-dock .bd-auto { flex: 1.4 1 0; font-size: 15px; border-color: var(--gold); white-space: normal; line-height: 1.15; }
.burst-dock3 .act-dock .btn.wine-b { flex: 1.2 1 0; font-size: 17px; }
.burst-dock3 .act-dock .btn.wine-b:disabled { opacity: .45; }

.warn-box { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid #E3A04A88; background: #E3A04A1A; color: #FFD49A; font-size: 14px; line-height: 1.35; }
/* choix en pastilles (radio) : la pastille cochée s'allume tout de suite, sans attendre un nouvel affichage */
.seg label.chip:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg label.chip.on:has(input:not(:checked)) { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
/* Questionner l'appli */
.ask-btn { width: 100%; margin: 4px 0 10px; border-color: var(--gold); color: var(--gold); }
.ask-box { margin: 4px 0 12px; padding: 12px; border: 1px solid var(--gold); border-radius: 14px; background: #2a2112; }
.ask-box > small { color: var(--gold); font-weight: 700; }
.ask-box > p { margin: 4px 0 8px; line-height: 1.4; }
.ask-box.err { border-color: #E3A04A88; background: #E3A04A1A; }
/* Mode carnet (sans cave) et coups de cœur */
.tab .tab-emo { font-size: 20px; line-height: 24px; height: 24px; display: block; }
.fav-btn { border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.fav-btn.on { border-color: #E8607A; color: #FFB3C1; background: #E8607A22; }
.heart-box { padding: 10px 12px; border: 1px solid #E8607A66; border-radius: 12px; background: #E8607A14; }
/* casier dessiné (diagonale / X) : barres par-dessus la grille, et écran pour dessiner ses places */
.rack-g > svg.bars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rack-g > svg.bars line { stroke: #6b5a4f; stroke-width: 3; stroke-linecap: round; }
.dd-wrap { position: relative; margin: 6px auto; flex-shrink: 0; }
.dd-wrap svg.bars { position: absolute; inset: 0; pointer-events: none; }
.dd-wrap svg.bars line { stroke: var(--gold); stroke-width: 3; opacity: .7; stroke-linecap: round; }
.dd-cell { position: absolute; border-radius: 50%; border: 1.5px dashed var(--line-2); background: transparent; padding: 0; }
.slot.mslot i { width: 94%; height: 94%; } /* casier à modèle : places serrées, bouteille de la même taille qu'ailleurs */
.dd-cell.on { border: 0; background: #E0263E; box-shadow: inset 0 1px 3px #000a; }

/* carte des vins d'un restaurant / rayon d'un magasin (v120) */
.btn.ra-gold { border-color: var(--gold); color: var(--gold); }
.ra-wait { align-items: center; text-align: center; padding: 22px 16px; }
.ra-wait p { color: var(--ink-2); }
.ra-list { display: flex; flex-direction: column; gap: 9px; }
.ra-row { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; }
.ra-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ra-l b { font-size: 15px; line-height: 1.3; }
.ra-l > span { color: var(--muted); font-size: 13px; }
.ra-l .ra-me { color: var(--gold); }
.ra-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; font-size: 13px; color: var(--ink-2); max-width: 46%; }
.ra-r b { font-size: 16px; color: var(--ink); }
.ra-r > span:not(.ra-bd) { white-space: nowrap; }
.ra-bd { margin-top: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 9px; }
.ra-bd.g { background: #7FB38A33; color: #A8DDB4; }
.ra-bd.y { background: #E3A04A33; color: #EBC27A; }
.ra-bd.r { background: #E06A5A33; color: #F2998C; }
.ra-more { align-self: center; color: var(--muted); background: none; border: 0; font-size: 14px; }
.ra-aro { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ra-pic { position: relative; border-radius: 14px; overflow: auto; max-height: 62dvh; background: #000; }
.ra-in { position: relative; overflow: hidden; }
.ra-in img { display: block; width: 100%; }
.ra-hl { position: absolute; border: 3px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 4000px #0A0606A0, 0 0 18px var(--gold); }
.ra-hl i { position: absolute; left: -3px; bottom: 100%; margin-bottom: 6px; background: var(--gold); color: #241A10; font-style: normal; font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 9px; white-space: nowrap; }
.ra-pw { position: relative; }
.ra-zoom { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; }
.ra-zoom button { width: 40px; height: 40px; border-radius: 10px; background: #211816E0; border: 1px solid var(--line-2); font-size: 20px; }
.ra-nav { display: flex; justify-content: space-between; }
.ra-nav .link { background: none; border: 0; color: var(--muted); font-size: 14px; padding: 6px 2px; }
.ra-nav .link:disabled { opacity: .35; }
label.btn { cursor: pointer; }
/* « + » en deux groupes et onglet « Plus » (v121) */
.add-grp { display: flex; align-items: center; gap: 10px; margin: 4px 2px -6px; }
.add-grp h3 { font-size: 19px; font-weight: 600; }
.add-grp small { font-size: 13px; color: var(--muted); }
.add-gic { color: var(--gold); display: grid; }
.add-gic svg { width: 20px; height: 20px; }
.add-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.add-row { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); text-align: left; width: 100%; cursor: pointer; }
.add-row:last-child { border-bottom: 0; }
.add-row:active { background: #ffffff08; }
.add-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #D9B45A14; color: var(--gold); }
.add-ic svg { width: 22px; height: 22px; }
.add-ic.main { background: var(--wine); color: var(--wine-ink); }
.add-t { flex: 1; min-width: 0; }
.add-t b { display: block; font-size: 16px; font-weight: 500; }
.add-t small { font-size: 13px; color: var(--muted); }
.add-chev { width: 16px; height: 16px; flex: none; color: var(--faint); }
.shot-main { aspect-ratio: auto; height: min(42dvh, 330px); border: 1px solid var(--line); background-color: #1c1412; background-image: radial-gradient(120% 90% at 50% 30%, #3a2c27, #161110); justify-content: flex-end; padding-bottom: 14px; color: var(--ink-2); }
.shot-main .cn { position: absolute; width: 34px; height: 34px; border: 0 solid var(--gold); }
.shot-main .cn:nth-of-type(1) { top: 18%; left: 22%; border-width: 2px 0 0 2px; border-radius: 14px 0 0 0; }
.shot-main .cn:nth-of-type(2) { top: 18%; right: 22%; border-width: 2px 2px 0 0; border-radius: 0 14px 0 0; }
.shot-main .cn:nth-of-type(3) { bottom: 22%; left: 22%; border-width: 0 0 2px 2px; border-radius: 0 0 0 14px; }
.shot-main .cn:nth-of-type(4) { bottom: 22%; right: 22%; border-width: 0 2px 2px 0; border-radius: 0 0 14px 0; }
.shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shots-row .shot { aspect-ratio: auto; height: 72px; flex-direction: row; gap: 8px; border-style: solid; }
.shots-row .shot svg { width: 20px; height: 20px; }
.shots-row .shot small { color: var(--faint); font-size: 12px; }
.shot-gal { color: var(--ink-2); }
.ra-ask { color: var(--gold); font-weight: 600; }
/* rayon : « Tu es où ? » (v137) */
.ra-where { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ra-where span, .ra-ask-st > span { color: var(--muted); font-size: 14px; }
.ra-where b { font-size: 17px; color: var(--ink); }
.ra-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ra-st { min-height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 16px; }
.ra-st.on, .ra-chip.on { border: 2px solid var(--gold); font-weight: 700; }
.ra-ask-st { display: flex; flex-direction: column; gap: 9px; }
.ra-ask-st b { color: var(--ink); }
.ra-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ra-chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 15px; white-space: nowrap; }
.ra-hb { display: flex; gap: 8px; }
.ra-phb { display: grid; place-items: center; color: var(--gold); border: 1px solid #6B5A3A; }
.ra-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ra-tab { min-height: 62px; border-radius: 14px; border: 1px solid #6B5A3A; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; line-height: 1.15; }
.ra-tab svg { color: var(--gold); }
.ra-tab.on { background: var(--gold); border: 2px solid var(--gold); color: #241A10; font-weight: 800; box-shadow: 0 0 18px #E2C36B55; }
.ra-tab.on svg { color: #241A10; }
.ra-plat-f { display: flex; flex-direction: column; gap: 12px; }
.ra-sugg { display: flex; gap: 8px; flex-wrap: wrap; }
.ra-for { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 14px; padding: 10px 12px; background: var(--card); font-size: 15px; }
.ra-for .link { background: none; border: 0; color: var(--gold); font-size: 14px; flex: none; }
.ra-pick { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; border: 1px solid #6B5A3A; border-radius: 14px; background: var(--card); padding: 10px 12px; color: var(--ink); }
.ra-pick.big { border-color: var(--gold); padding: 12px 14px; gap: 6px; }
.ra-tag { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--gold); text-transform: uppercase; }
.ra-pk-h { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.ra-pick.big .ra-pk-h { font-size: 16px; }
.ra-pk-s { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ra-pk-s .ra-bd { margin-top: 0; }
.ra-pk-w { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ra-pick.big .ra-pk-w { font-size: 14px; }
.ra-picks .ra-pk-h { flex-direction: column; gap: 2px; }
.act-dock-in .ra-qty, .ra-buyrow .ra-qty { flex: none; }
.ra-buyrow { flex-wrap: nowrap; }
.ra-buyrow .btn { min-width: 0; }
.act-dock-in .ra-qty + .btn { flex: 1; min-width: 0; }
.ra-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ra-env { display: flex; flex-direction: column; gap: 6px; }
.ra-env > span { font-size: 13px; color: var(--muted); }
.ra-env > div { display: flex; gap: 6px; flex-wrap: wrap; }
.ra-env .ra-chip { min-height: 36px; font-size: 14px; }
.ra-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
.ra-envh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ra-box { position: absolute; border: 2px solid var(--gold); border-radius: 6px; background: transparent; padding: 0; }
.ra-box.g { border: 3px solid #A8DDB4; }
.ra-gtxt { color: #A8DDB4; }
.ra-qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); border-radius: 14px; padding: 2px; }
.ra-qty button { width: 40px; height: 44px; border-radius: 12px; background: none; border: 0; color: var(--ink); font-size: 20px; }
.ra-qty button:disabled { opacity: .35; }
.ra-qty b { min-width: 22px; text-align: center; font-size: 17px; }
.ra-promo { font-size: 11px; font-weight: 700; color: #241A10; background: var(--gold); border-radius: 7px; padding: 1px 6px; vertical-align: 2px; }
.ra-stat { margin: -4px 0 10px; font-size: 13px; color: var(--muted); }
button.ra-ask { background: none; border: 0; padding: 0; font-family: var(--serif); font-size: 18px; }
/* vin bu ailleurs : fiche trouvée par l'IA, bien visible */
.wine-id { display: grid; gap: 6px; }
.wine-id > b { font-family: var(--serif); font-size: 18px; }
.wine-id > small { color: var(--muted); }
.wi-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--ink-2); }
.wi-stats b { color: var(--gold); }
.wi-past ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.wine-id details summary { color: var(--gold); font-size: 14px; cursor: pointer; }
/* fiche du vin : Plan · Déplacer · Boire fixés en bas (v130), plus compacts que les modes guidés */
.wine-dock .act-dock .btn { min-height: 54px; font-size: 15px; padding: 0 8px; }
.wine-dock .act-dock .btn.wine-b { flex: 1.6 1 0; font-size: 17px; }
.sheet:has(.wine-dock) { padding-bottom: calc(96px + var(--safe-b)); }

/* v143 : Apogée de ma cave (barres dorées, années en entier, défilement à l'horizontale) */
.apo-chart { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--card); padding: 12px 10px 8px; margin-bottom: 10px; }
.apo-bars { display: flex; align-items: stretch; gap: 6px; height: 190px; width: max-content; min-width: 100%; }
.apo-col { flex: 0 0 40px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; padding: 0; border: 0; background: none; color: var(--ink); border-radius: 6px; }
.apo-n { font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; min-height: 14px; }
.apo-b { display: block; background: var(--gold); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .75; }
.apo-yr { font-size: 11px; text-align: center; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 4px; border-top: 1px solid var(--line); }
.apo-col.on .apo-b { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.apo-col.on .apo-yr { color: var(--ink); }
.apo-b { position: relative; overflow: hidden; }
.apo-b i { position: absolute; left: 0; right: 0; top: 0; background: var(--danger); }
.apo-leg { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin: -2px 2px 10px; }
.apo-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.apo-leg .g { background: var(--gold); } .apo-leg .r { background: var(--danger); }
.pill.apo-last { background: #E06A5A33; color: #FFB3A8; }

/* v147 : test « plan depuis une photo » (réservé au propriétaire) */
.pp-wrap { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.pp-wrap img { display: block; width: 100%; }
.pp-wrap .pp-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-draft { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-bottom: 10px; }
.pp-draft .pp-svg { display: block; width: 100%; height: auto; }
.pp-svg .pp-el rect { fill: #D9B45A22; stroke: var(--gold); stroke-width: .8; }
.pp-svg .pp-el line { stroke: var(--gold); stroke-width: .5; }
.pp-svg .pp-caisse rect { fill: #8B5A2B55; stroke: #C08A4E; }
.pp-svg .pp-deco rect, .pp-svg .pp-carton rect, .pp-svg .pp-vrac rect { fill: #ffffff10; stroke: var(--muted); }
.pp-svg .pp-frigo rect { stroke: #8EC5E8; }
.pp-svg text { font-size: 3px; fill: var(--ink); font-weight: 700; paint-order: stroke; stroke: #000a; stroke-width: .6px; }
.pp-tab table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-tab th, .pp-tab td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* v151 : séparateurs un par champ, bouton Dupliquer, caisses en bois */
.brk-it { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.brk-it input { flex: 1; min-width: 0; }
.brk-x { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: inherit; font-size: 18px; line-height: 1; }
.sheet-h .dup-b { margin-left: auto; margin-right: 8px; align-self: center; }
.rack.crate { border: 2px solid #8B5A2B; background: repeating-linear-gradient(0deg, #6B4423 0 9px, #7A4E2A 9px 10px, #6B4423 10px 18px), #6B4423; }
.rack.crate .slot:not(.full) { background: #0000002e; }

/* v153 : brouillon du plan photo corrigeable, bouteilles dessinées, suppression d'une zone */
.pp-svg .pp-el { cursor: pointer; }
.pp-svg .pp-el.sel rect { stroke: #fff; stroke-width: 1.2; }
.pp-svg .pp-b { fill: none; stroke: #D9B45A99; stroke-width: .25; }
.pp-svg .pp-b.on { fill: #8E2C3A; stroke: #D9B45A; }
.pp-svg .pp-sep { stroke: var(--wine, #9B3242); stroke-width: .9; }
.pp-tab tr[data-pp-el] { cursor: pointer; }
.pp-tab tr.sel td { background: #D9B45A22; }
.pp-form h3 { margin-top: 0; }
.chip.del { border-color: #9B324299; color: #E58A96; }
.set-row.danger { color: #E58A96; }
.zone-chips [data-zone] { -webkit-touch-callout: none; user-select: none; }

/* v155 : brouillon au propre, zoom de la photo */
.pp-svg .pp-el .pp-bg { fill: #D9B45A14; stroke: none; }
.pp-svg .pp-el .pp-fr { fill: none; stroke: var(--gold); stroke-width: .8; }
.pp-svg .pp-el .pp-cell { fill: none; stroke: var(--gold); stroke-width: .5; }
.pp-svg .pp-el.sel .pp-fr { stroke: #fff; stroke-width: 1.2; }
.pp-svg .pp-caisse .pp-bg { fill: #8B5A2B55; } .pp-svg .pp-caisse .pp-fr { stroke: #C08A4E; }
.pp-svg .pp-deco .pp-fr, .pp-svg .pp-carton .pp-fr, .pp-svg .pp-vrac .pp-fr { stroke: var(--muted); }
.pp-svg .pp-frigo .pp-fr { stroke: #8EC5E8; }
.pp-wrap[data-pp-zoom] { cursor: zoom-in; }
.pp-zoom-h { position: absolute; right: 8px; bottom: 8px; background: #000a; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.pp-zoom { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; touch-action: none; overflow: hidden; }
.pp-zoom img { max-width: 100%; max-height: 100%; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.pp-zoom .x { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px; width: 40px; height: 40px; border-radius: 20px; border: 0; background: #ffffff22; color: #fff; font-size: 18px; }