/* Interface de collection : navigation permanente, cartes et lecture mobile. */
/* ---- Palette -------------------------------------------------------------
   Une seule charte, « papier de caviste » : fond crème, encre brune, un seul
   bordeaux en accent. Elle vaut pour l'app ET les pages de connexion, qui ne
   chargent que ce fichier. Deux chartes se superposaient jusqu'ici (crème et
   bordeaux dans index.html, violet ici) : le violet l'emportait partout, et la
   police de titre était téléchargée pour rien.
   Le mode sombre suit le réglage du téléphone : une cave se consulte souvent
   le soir, ou dans une pièce peu éclairée. */
:root{
  color-scheme:light dark;
  --paper:#faf8f5; --surface:#fff; --surface-2:#f4f1ec;
  --line:#e8e2d9; --line-strong:#cfc5b7;
  /* --faint, --wait, --peak et --drink : au moins 4,5:1 sur leur fond teinté
     (axe-core, couple par couple) — ce sont des textes, ils doivent se lire. */
  --ink:#1f1a17; --muted:#655d56; --faint:#6d645c;
  --accent:#7c2d3a; --accent-strong:#62222d; --accent-wash:#f5eaec; --on-accent:#fff;
  --focus:#c48a94; --ombre:31 26 23;

  /* Couleurs de vin, calibrées pour rester lisibles sur le fond */
  --rouge:#7c2d3a; --blanc:#9a7b16; --rose:#b85f67; --bulles:#857226; --doux:#a05a1c;
  /* États de maturité */
  --wait:#486689; --peak:#37724a; --drink:#955909; --past:#a02f39;
  /* Fonds teintés correspondants. Ils existent en propre : « var(--past)22 »
     n'est pas du CSS valide, la substitution ne fusionne pas les tokens. */
  --rouge-wash:#f5eaec; --blanc-wash:#f5efdd; --rose-wash:#f9ecee;
  --bulles-wash:#f2eeda; --doux-wash:#f6ebe0;
  --wait-wash:#e8edf3; --peak-wash:#e6f0e9; --drink-wash:#f7ede0; --past-wash:#f7e6e8;
  --r:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#151211; --surface:#1e1a18; --surface-2:#292421;
    --line:#37302c; --line-strong:#52483f;
    --ink:#f2ece6; --muted:#b9aea5; --faint:#9c9189;
    /* Sur fond sombre le bordeaux se lit mal : on l'éclaircit, et le texte
       posé dessus passe en foncé pour garder le contraste. */
    --accent:#e0899a; --accent-strong:#eea6b3; --accent-wash:#3b2328; --on-accent:#1c1012;
    --focus:#e0899a; --ombre:0 0 0;
    --rouge:#df7c8c; --blanc:#dcbc55; --rose:#eba2a8; --bulles:#cdb964; --doux:#e0975a;
    --wait:#8fb0d4; --peak:#78c48e; --drink:#e5a653; --past:#ec7f88;
    --rouge-wash:#3b2328; --blanc-wash:#352e19; --rose-wash:#3d272a;
    --bulles-wash:#322e1a; --doux-wash:#3a2a1b;
    --wait-wash:#1e2935; --peak-wash:#1c2f23; --drink-wash:#3a2b17; --past-wash:#3d2023;
  }
}

html{touch-action:manipulation}
/* Accueil : une bouteille réelle en vedette, puis les chemins vers la cave. */
.home-feature{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(180px,.8fr);border:1px solid var(--line);border-radius:24px;background:var(--surface-2);overflow:hidden;isolation:isolate}
.home-feature-copy{padding:38px;align-self:center;min-width:0}
.home-feature-copy h3{font:500 clamp(30px,3.8vw,52px)/1.05 var(--serif);margin:18px 0 12px;overflow-wrap:anywhere;letter-spacing:-.035em}
.home-feature-origin{font-size:13px;color:var(--muted);line-height:1.7}
.home-feature-reason{font:500 19px/1.5 var(--serif);margin:20px 0 10px;color:var(--accent)}
.home-feature-location{font-size:12px;color:var(--muted);margin-bottom:22px;overflow-wrap:anywhere}
.home-feature-copy .btn-primary{display:inline-flex;align-items:center;gap:14px}
.home-feature-copy small{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px}
.home-feature-visual{border:0;border-left:1px solid var(--line);background:var(--surface);padding:0;min-width:0;overflow:hidden}
.home-feature-visual .wine-visual{height:100%;min-height:340px;background:radial-gradient(ellipse at 50% 40%,var(--surface),var(--accent-wash))}
.home-feature-visual .wine-visual .bottle-art{height:330px;max-width:95%;filter:drop-shadow(10px 16px 12px rgb(var(--ombre)/.12))}
.home-feature-visual .bottle-photo{max-height:390px;width:100%;height:100%;object-fit:contain;padding:20px}
.home-actions.home-toolbar{display:flex;flex-direction:row;justify-content:flex-end;margin:18px 0 32px;gap:10px}
.home-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:36px}
.home-colors button{text-align:left;border:1px solid var(--line);border-radius:16px;padding:20px 16px;background:var(--surface);color:var(--ink);min-width:0}
.home-colors button:hover:not(:disabled){border-color:var(--family-color);background:var(--surface-2)}
.home-colors button:disabled{opacity:.5;cursor:default}
.family-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--surface-2);color:var(--family-color);margin-bottom:14px}
.home-colors strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.home-colors button>span:last-child{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.home-care{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:28px;border:1px solid var(--line);border-radius:20px;margin-top:30px;background:var(--surface)}
.home-care h3{font:500 28px/1.2 var(--serif);margin:12px 0}
.home-care p{font-size:12px;color:var(--muted);line-height:1.7}
.home-care-actions{display:grid;align-content:center;gap:8px}
.home-care-actions button,.care-list button{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:12px;min-width:0}
.home-care-actions small,.care-list small{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.care-list{display:grid;gap:10px;margin:20px 0}.care-list button>span:first-child{min-width:0;overflow-wrap:anywhere}.care-list button>span:last-child{flex:none;color:var(--accent);font-size:11px}
@media(max-width:760px){
  .home-feature{grid-template-columns:minmax(0,1fr) 112px;border-radius:18px}
  .home-feature-copy{padding:22px 16px}.home-feature-copy h3{font-size:29px;margin-top:12px}
  .home-feature-copy .eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.6;display:block}
  .home-feature-origin{font-size:12px}.home-feature-reason{font-size:16px;margin-top:16px}
  .home-feature-location{font-size:12px}.home-feature-copy .btn-primary{font-size:11px;padding:11px 12px;gap:8px;line-height:1.5}
  .home-feature-copy .btn-primary svg{display:none}
  .home-feature-visual .wine-visual .bottle-art{height:265px;max-width:150px;width:140px;flex:none}
  .home-feature-visual .bottle-photo{padding:7px;max-height:300px}
  .home-toolbar{justify-content:stretch}.home-colors{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:26px}
  .home-colors button{padding:14px 10px;border-radius:12px}.home-colors strong{font-size:11px}.home-colors button>span:last-child{font-size:12px}
  .family-symbol{width:32px;height:32px;margin-bottom:10px}
  .home-care{grid-template-columns:1fr;gap:18px;padding:20px}.home-care h3{font-size:25px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

button,input,select,textarea{transition:background .15s,border-color .15s,box-shadow .15s}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.wrap{max-width:none;padding:0 0 0 244px}

header.top{position:fixed;inset:0 auto 0 0;width:244px;background:var(--surface);border:0;border-right:1px solid var(--line);margin:0;padding:36px 20px 24px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:38px;z-index:45;flex-wrap:nowrap}

.brand{gap:9px;padding:0 9px}
.brand h1{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.4px}
.brand-dot{color:var(--accent)}
.brand .glass{background:var(--accent-wash);padding:9px;border-radius:12px}
.brand-sub{display:block;font-size:12px;letter-spacing:1.25px;margin-top:8px;color:var(--muted)}

.head-right{display:flex;flex:1;flex-direction:column;align-items:stretch;gap:16px}
.nav-label{font-size:12px;letter-spacing:1.6px;color:var(--faint);padding-left:14px;font-weight:600}

#nav{flex-direction:column;gap:7px}
#nav button{display:flex;align-items:center;gap:12px;text-align:left;min-height:48px;padding:12px 14px;font-size:13px;border-radius:9px}
#nav button svg{flex:none}
#nav button.active{background:var(--accent-wash);color:var(--accent);font-weight:600}
.tab-badge.on{margin-left:auto;background:var(--accent);color:var(--on-accent)}

.menu-wrap{margin-top:auto;border-top:1px solid var(--line);padding-top:20px}
.menu-btn{width:100%;height:44px;justify-content:flex-start;padding:12px;border:0;gap:12px}
.menu-btn:after{content:'Réglages & sauvegardes';font-size:12px}
.menu{left:0;right:auto;top:auto;bottom:calc(100% + 8px)}

.workspace{max-width:1500px;margin:auto;padding:0 42px 28px}

.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:44px 0 28px}
.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:600;color:var(--accent)}
.page-heading h2{font-family:var(--serif);font-size:32px;letter-spacing:-.4px;margin:7px 0;font-weight:500}
.page-heading p{font-size:13px;color:var(--muted);margin:0}
.page-heading .btn-primary{flex:none}

.btn-primary{padding:12px 18px;border-radius:8px;background:var(--accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-ghost{border-radius:8px;padding:11px 15px}
.stats{gap:16px;border:0;background:none;overflow:visible;margin-bottom:30px}
.stat,.stat:first-child{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:21px;position:relative}
.stat .n{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.3px}
.stat .l{font-size:12px;margin-top:10px;color:var(--ink)}
.stat .sub{font-size:12px;margin-top:4px}
.stat.accent{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}

.collection-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}
.collection-heading h3{font-family:var(--serif);font-size:21px;font-weight:500;margin:0 0 4px}
.collection-heading span{font-size:12px;color:var(--muted)}
.view-switch{display:flex;background:var(--surface-2);border-radius:8px;padding:4px;gap:4px}
.view-switch button{display:grid;place-items:center;width:34px;height:30px;border:0;background:none;color:var(--muted);border-radius:5px}
.view-switch button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgb(var(--ombre) / .08)}

.toolbar{gap:12px}
.search{padding:12px 14px;border-radius:8px}
.search input{font-size:12px}
.sort{min-height:42px}
#btn-add{display:none}
.chips{gap:8px;padding:3px 0 8px}
.chip{border-radius:20px;padding:7px 13px;font-size:11px}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.wine-visual{display:none;color:var(--wine-color)}
.wine-open{display:block;border:0;background:none;padding:0;text-align:left;color:var(--ink);width:100%}
.list{border-radius:12px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border:0;background:transparent;overflow:visible}
.cards .bottle{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.cards .bottle:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgb(var(--ombre) / .06);border-color:var(--line-strong)}
.cards .cap{display:none}
.cards .wine-visual{display:flex;position:relative;height:168px;align-items:center;justify-content:center;background:var(--surface-2);border-bottom:1px solid var(--line)}
.wine-visual svg{height:145px;width:90px}
.wine-visual>span{position:absolute;top:13px;left:13px;background:var(--surface);border-radius:20px;padding:4px 9px;font-size:11px;color:var(--muted)}
.cards .bmain{padding:18px;display:flex;flex-wrap:wrap;gap:10px;width:100%}
.cards .vint{order:2;font-family:var(--sans);font-size:11px;text-align:left;width:auto;color:var(--muted)}
.cards .vint small{display:none}
.cards .binfo{flex-basis:100%;order:1}
.cards .binfo .nm{font-size:14px;white-space:normal;line-height:1.5}
.cards .meta{font-size:12px;margin-top:5px}
.cards .bside{order:3;display:flex;flex-wrap:wrap;width:100%;margin:0;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.cards .badge{font-size:11px;flex-basis:auto;margin-right:auto}
.cards .qty{gap:4px}
.cards .qty button{width:28px;height:28px}
.cards .qty .q{font-size:12px}
.cards .val{width:100%;display:flex;align-items:center;gap:8px;text-align:left;min-width:0}
.cards .val .v{font-size:14px}
.cards .del{position:absolute;right:12px;top:128px;background:var(--surface);border-radius:50%;padding:7px}
.cards>.empty{grid-column:1/-1}
.bside{gap:9px}
.qty button{width:30px;height:30px}
.binfo{min-width:80px}

.card{padding:24px;border-radius:12px}
.card h4{font-size:12px;color:var(--ink);letter-spacing:0;text-transform:none;margin-bottom:22px}
.bar-row{margin-bottom:16px}
.bar-track{height:8px}
.dash{gap:20px}
.grp h3{font-size:20px;flex-wrap:wrap}
.grp{margin-top:25px}
.plat{border-radius:12px;padding:24px}
.plat.active{background:var(--accent-wash);border-color:var(--accent)}
.accord-detail{border-radius:12px;padding:24px}
.cesoir{border-radius:10px}

.welcome{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px 20px 45px}
.welcome-art{display:flex;justify-content:center;align-items:center;margin:0 auto 24px;width:240px;height:185px;border-radius:50%;background:var(--surface-2)}
.welcome-art .wine-visual{display:block;width:60px}
.welcome-art .wine-visual:first-child{transform:rotate(-13deg) translateY(8px)}
.welcome-art .wine-visual:last-child{transform:rotate(13deg) translateY(8px)}
.welcome-art .wine-visual svg{width:65px;height:145px}
.welcome-art .wine-visual>span{display:none}
.welcome .big{font-family:var(--serif);font-size:28px;font-weight:500;margin-top:12px}
.welcome p{max-width:450px;margin:12px auto 24px;font-size:13px;line-height:1.8}
.welcome .row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.welcome .btn-ghost{display:inline-flex;align-items:center;gap:8px}

.fab{background:var(--accent);width:48px;height:48px;bottom:22px;right:22px}
.fab:hover{background:var(--accent-strong)}
.modal{border-radius:16px;padding:28px;max-width:620px}
.modal h2{font-family:var(--serif);font-size:25px;font-weight:500}
.fg input,.fg select,.fg textarea{border-radius:8px;padding:11px;font-size:14px}
.overlay{backdrop-filter:blur(4px)}
.scan-cta{padding:14px;border-style:dashed;background:var(--accent-wash)}
.etat{max-width:155px;font-size:12px}

@media(min-width:1550px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:1150px){.wrap{padding-left:212px}
header.top{width:212px;padding-left:14px;padding-right:14px}
.workspace{padding:0 24px 24px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{gap:10px}
.stat{padding:16px}
.stat .n{font-size:23px}
.bmain{flex-wrap:wrap}
.bside{flex-wrap:wrap}
.brand h1{font-size:25px}
}

@media(max-width:760px){.wrap{padding:0 0 calc(82px + env(safe-area-inset-bottom))}
header.top{position:static;width:100%;padding:18px 20px;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.brand{padding:0}
.brand h1{font-size:24px}
.brand-sub{font-size:12px}
.brand .glass{padding:7px}
.head-right{width:auto;flex:0}
.nav-label{display:none}
#nav{position:fixed;bottom:0;left:0;right:0;z-index:45;background:var(--surface);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));flex-direction:row;gap:2px}
#nav button{flex:1;flex-direction:column;gap:4px;font-size:11px;padding:6px 2px;min-height:52px;position:relative;text-align:center;justify-content:center}
#nav .tab-badge.on{position:absolute;top:1px;right:14px;font-size:11px;margin:0}
.menu-wrap{margin:0;padding:0;border:0}
.menu-btn{width:40px;justify-content:center}
.menu-btn:after{display:none}
.menu{left:auto;right:0;top:calc(100% + 10px);bottom:auto}
.workspace{padding:0 18px 20px}
/* Écran de téléphone : le premier vin doit apparaître sans défiler. Le titre
   se réduit à une ligne, les chiffres de tête à une bande qui défile de côté,
   le tri rejoint les filtres. Avant, une douzaine de blocs précédaient la
   liste et la première bouteille tombait vers 900 px, hors de l'écran. */
.brand-sub{display:none}
.page-heading{padding:14px 0 12px;align-items:center;flex-wrap:nowrap;gap:12px}
.page-heading h2{font-size:23px;margin:0}
.page-heading p,.page-heading .eyebrow{display:none}
.page-heading .btn-primary{padding:10px 14px;font-size:13px}
.stats{display:flex;overflow-x:auto;gap:8px;margin:0 -18px 16px;padding:0 18px 2px;scroll-padding-inline:18px;scroll-snap-type:x proximity;scrollbar-width:none}
.stats::-webkit-scrollbar{display:none}
.stat,.stat:first-child,.stat:nth-child(3),.stat:nth-child(n+3){flex:0 0 auto;min-width:124px;border:1px solid var(--line);padding:10px 12px;scroll-snap-align:start}
.stat .n{font-size:20px}
.stat .l{font-size:12px;margin-top:2px}
.stat .sub{display:none}
.subnav{margin-bottom:14px;padding-bottom:8px}
.cards{gap:12px}
.cards .wine-visual{height:112px}
.cards .wine-visual svg{height:96px}
.cards .bmain{padding:12px}
.cards .binfo .nm{font-size:13px}
.cards .meta{font-size:12px}
.cards .bside{gap:8px}
.cards .badge{font-size:11px}
.cards .qty{margin-left:auto}
.cards .qty button{width:27px;height:29px}
.cards .val .v{font-size:12px}
.toolbar{gap:8px}
.search{min-width:100%;padding:12px}
.chips{flex-wrap:nowrap;overflow:auto;padding-bottom:10px}
.chip{flex:none;font-size:11px}
.collection-heading{margin-bottom:14px}
.collection-heading h3{font-size:16px}
.collection-heading>div>span{display:none}
.list:not(.cards) .bside{margin:0;width:100%;padding-left:0}
.binfo .nm{font-size:13px}
.vint{font-size:19px}
.bmain{gap:10px}
.dash{grid-template-columns:1fr}
.card{padding:20px}
.modal{padding:22px 18px}
.fg input,.fg select,.fg textarea{font-size:16px}
.fab{bottom:calc(90px + env(safe-area-inset-bottom));right:16px;width:46px;height:46px}
.toast{bottom:calc(90px + env(safe-area-inset-bottom))}
.welcome{padding:24px 18px 30px}
.welcome .big{font-size:22px}
.welcome-art{height:155px;margin-bottom:20px}
.welcome .row{flex-direction:column}
.welcome .row button{justify-content:center}
.grp h3 .sub{font-size:11px}
}

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

/* Outils de collection : mêmes repères dans les fiches et les différentes vues. */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 24px;border-bottom:1px solid var(--line);padding-bottom:12px}
.subnav button{border:0;background:transparent;border-radius:8px;padding:11px 15px;color:var(--muted);font-size:12px}
.subnav button.active{background:var(--accent-wash);color:var(--accent);font-weight:600}
.advanced-filters{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.advanced-filters summary{cursor:pointer;font-size:12px;font-weight:600}
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:18px;align-items:end}
.filter-grid label,.meal-controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.filter-grid input:not([type=checkbox]),.filter-grid select,.meal-controls input,.journal-search input{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:7px;padding:10px;font:inherit;font-size:13px;min-height:42px}
.check-label,.filter-grid .check-label{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:12px;margin:8px 0 14px;color:var(--ink)}
.check-label input{accent-color:var(--accent);width:18px;height:18px;flex:none}
.result-count{font-size:12px;color:var(--muted);margin:16px 0}
.favorite{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;width:32px;height:32px;display:grid;place-items:center;flex:none}
.favorite.selected{color:var(--accent);background:var(--accent-wash);border-color:var(--line-strong)}
.cards .favorite{position:absolute;right:12px;top:12px}
.location-section{margin-bottom:28px}
.location-section h3{font-size:18px;margin:0 0 12px}
.location-group{margin:10px 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.location-group summary{cursor:pointer;padding:16px;font-size:13px;font-weight:600}
.location-group summary span{float:right;font-size:12px;color:var(--muted);font-weight:400}
.location-group .list{border:0;border-top:1px solid var(--line);border-radius:0}
.wish-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wish-grid h3{font-size:17px;margin:0 0 12px;overflow-wrap:anywhere}
.wish-grid p{font-size:13px}
.action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wine-summary{display:flex;gap:20px;align-items:center;margin:20px 0}
.wine-summary .wine-visual{display:flex;align-items:center;justify-content:center;background:var(--surface-2);width:110px;min-width:90px;height:170px;border-radius:12px}
.wine-summary .wine-visual>span{display:none}
.wine-summary p{font-size:13px;margin:8px 0}
.wine-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.wine-facts .kv{gap:20px}
.wine-facts .v{overflow-wrap:anywhere;text-align:right;max-width:65%}
.modal h3{font-size:15px;margin-top:24px}
.modal h2{overflow-wrap:anywhere}
.maturity-panel{padding:16px 18px;background:var(--surface-2);border-radius:12px;margin:20px 0}
.maturity-panel h3{margin:0 0 8px}
.maturity-panel p{font-size:12px;line-height:1.7}
.maturity-track{position:relative;height:12px;border-radius:8px;background:var(--line-strong);margin:38px 6px 12px}
.maturity-window{position:absolute;top:0;height:100%;background:var(--peak);border-radius:8px}
.maturity-today{position:absolute;top:-5px;height:22px;border-left:2px solid var(--ink)}
.maturity-today b{position:absolute;top:-23px;left:0;transform:translateX(-50%);font-size:11px}
.timeline-legend{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.pairing-tags{display:flex;gap:8px;flex-wrap:wrap}
.pairing-tags span{font-size:11px;background:var(--accent-wash);color:var(--accent);border-radius:20px;padding:7px 12px}
.preserve-lines{white-space:pre-wrap;overflow-wrap:anywhere}
.form-error{color:var(--past);font-size:12px;line-height:1.6}
.form-error:empty{display:none}
.import-preview{padding-left:20px;font-size:13px;line-height:1.9;overflow-wrap:anywhere}
.journal-search{margin:16px 0 20px}
.journal-search label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
.journal-search input{flex:1;min-width:140px}
.journal-notes{font-size:12px;color:var(--muted);margin:0 0 14px;padding-left:54px}
.meal-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:22px}
.meal-controls .hint{grid-column:1/-1;margin:0;line-height:1.7}
.modal-actions{flex-wrap:wrap}
.modal{position:relative}
.modal h2{padding-right:32px}
.modal-open{overflow:hidden}
.modal-close{position:absolute;top:16px;right:14px;display:grid;place-items:center;width:36px;height:36px;background:var(--surface-2);border:0;border-radius:50%;color:var(--muted)}
.modal-actions{position:sticky;bottom:-28px;background:var(--surface);padding:12px 0;margin-bottom:0;border-top:1px solid var(--line);z-index:2}
.modal button:disabled{opacity:.55;cursor:default}
@media(max-width:760px){
  .subnav{gap:2px}.subnav button{font-size:11px;padding:10px;min-height:44px}
  .filter-grid{grid-template-columns:1fr 1fr}
  .filter-grid input:not([type=checkbox]),.filter-grid select,.meal-controls input,.journal-search input{font-size:16px}
  .collection-heading{gap:12px;flex-wrap:wrap}.collection-heading .btn-primary{font-size:11px}
  .collection-heading span{display:block;max-width:100%}
  .wish-grid{grid-template-columns:1fr}
  .location-group summary{font-size:12px}
  .location-group summary span{float:none;display:block;margin-top:5px}
  .wine-summary{gap:14px}.wine-summary .wine-visual{width:80px;min-width:70px;height:140px}
  .wine-facts .kv{font-size:12px}
  .modal-actions button{min-height:44px}
  .journal-notes{padding-left:0}.jl{flex-wrap:wrap}.jl .jn{flex-basis:55%}.jl .je{margin-left:auto}
  .qty button,.favorite{min-width:36px;min-height:36px}
  .cards .qty button{min-width:30px;min-height:34px}
}

/* ---- Plan des casiers ----------------------------------------------------
   Les cases vides sont dessinées comme les autres : un plan doit montrer la
   place disponible, sinon ce n'est qu'une liste avec des bordures. Chaque case
   pleine est teintée de la couleur du vin qui y domine, ce qui se lit sans
   s'approcher — quatre pastilles de 6 px ne le permettaient pas. */
.plan{margin-bottom:24px}
.plan-cave{
  margin-bottom:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 16px 12px;
}
.plan-cave header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
.plan-cave h3{font-family:var(--serif); font-weight:500; font-size:19px; margin:0}
.plan-cave header span{font-size:11.5px; color:var(--muted)}

.rangee{display:flex; align-items:flex-start; gap:10px; margin-bottom:9px}
.rangee:last-child{margin-bottom:0}
.rangee .etiquette{
  flex:none; min-width:26px; height:26px; padding:0 8px; margin-top:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); border-radius:999px;
  font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:76px;
}
.rangee .cases{display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0}

.case{
  position:relative; width:52px; height:52px; padding:0;
  border-radius:10px; border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:inherit; font-size:11px; color:var(--muted);
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.case.vide{
  border-style:dashed; color:var(--line-strong); background:transparent;
  cursor:pointer; font-size:12px;
}
.case.vide:hover{border-style:solid; border-color:var(--accent); color:var(--accent)}
.case.pleine{
  cursor:pointer; color:var(--ink);
  /* la teinte reste légère : la case doit rester lisible, pas criarde */
  background:color-mix(in srgb, var(--ton) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--ton) 38%, var(--line));
}
.case.pleine:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgb(var(--ombre) / .12)}
.case .num{position:absolute; top:4px; left:6px; font-size:12px; color:var(--faint)}
.case .qte{font-weight:700; font-size:17px; line-height:1; color:var(--ink)}
.case .varietes{font-size:12px; color:var(--muted); margin-top:2px}
.case.sansnum{width:auto; min-width:66px; padding:0 14px}

.hors-plan{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--line)}
.case.libre{
  width:auto; height:auto; padding:8px 12px; flex-direction:row; gap:9px;
  cursor:pointer; font-size:12.5px; color:var(--ink);
  background:color-mix(in srgb, var(--ton) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--ton) 34%, var(--line));
}
.case.libre .qte{font-size:13px}
.case.libre:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgb(var(--ombre) / .12)}

.plan-legende{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center;
  margin:4px 2px 0; font-size:11.5px; color:var(--muted)}
.plan-legende span{display:inline-flex; align-items:center; gap:6px}
.plan-legende i{width:10px; height:10px; border-radius:3px; flex:none}
.plan-legende i.vide{background:transparent; border:1px dashed var(--line)}
.plan-legende .sep{color:var(--faint)}
.case:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

@media(max-width:680px){
  .plan-cave{padding:14px 12px 10px}
  /* Une rangée qui déborde laisserait ses cases orphelines sous l'étiquette :
     sur mobile on empile, l'étiquette devient le titre de la rangée. */
  .rangee{flex-direction:column; align-items:stretch; gap:6px; margin-bottom:12px}
  .rangee .etiquette{align-self:flex-start; margin-top:0; max-width:none}
  .rangee .cases{padding-left:2px}
  .case{width:46px; height:46px}
  .case .qte{font-size:15px}
  .plan-legende{gap:4px 12px; font-size:12px}
}

.filtres-actifs{margin-left:8px;font-weight:600;color:var(--accent);background:var(--accent-wash);border-radius:20px;padding:2px 8px;font-size:11px}

/* Lien d'action : un bouton qui se lit comme un lien, sans href factice. */
.lien{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.lock-forgot{margin-top:18px;font-size:12px;color:var(--muted)}

/* Champs remplis par le scan : à relire avant d'enregistrer. */
.fg .prerempli{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.scan-note{margin:-4px 0 12px;color:var(--accent)}
.btn-primary.btn-danger{background:var(--past);border-color:var(--past);color:var(--on-accent)}
.btn-primary.btn-danger:hover{background:var(--past);filter:brightness(.92)}

/* Toast à plusieurs actions (Noter · Annuler · Pas bue) : il passe à la
   ligne plutôt que de sortir de l'écran. */
.toast{flex-wrap:wrap;row-gap:6px;justify-content:center}

.bandeau-install{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--accent-wash);border-radius:var(--r);font-size:13px}
.bandeau-install p{flex:1;min-width:200px;margin:0}
.bandeau-install .btn-primary{padding:8px 14px}

/* La lecture de la photo peut démarrer par-dessus le formulaire déjà ouvert. */
.scan-overlay{z-index:55}

.planning{margin:20px 0}
.planning .collection-heading{margin-top:0}
.planning-controls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.planning-controls label{display:grid;gap:6px;font-size:13px;color:var(--muted);flex:1;min-width:140px}
.planning-controls select{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
#planning-summary{font-size:14px;line-height:1.7}
.planning-wines{list-style:none;padding:0;margin:12px 0;max-height:320px;overflow:auto}
.planning-wines li{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.planning-wines button{text-align:left;overflow-wrap:anywhere}
.planning-wines span{color:var(--muted);font-size:12px}

/* Accueil, comparaison et dégustation : des actions courtes et lisibles. */
.home-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px;margin:0 0 28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(125deg,var(--accent-wash),var(--surface-2))}
.home-intro h3{font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.1;max-width:450px;margin:12px 0}
.home-intro p{max-width:480px;font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.home-actions{display:flex;flex-direction:column;gap:10px;flex:none}
.home-actions button{display:flex;align-items:center;justify-content:center;gap:9px}
.home-overview{margin-top:30px}.home-overview h3{font-family:var(--serif);font-size:24px;font-weight:500}
.pick-reason{font-size:12px;line-height:1.6;color:var(--accent);margin:10px 0 0}
.compare-toggle{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:11px;padding:8px 12px;min-height:36px}
.compare-toggle[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-wash)}
.comparison-tray{position:fixed;bottom:18px;left:calc(50% + 122px);transform:translateX(-50%);z-index:48;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);box-shadow:0 6px 30px rgb(var(--ombre) / .16);font-size:12px;max-width:calc(100% - 275px)}
.comparison-tray>span{white-space:nowrap}.comparison-tray button{white-space:nowrap}
.comparison-tray button:disabled{opacity:.5;cursor:default}
.modal-open .comparison-tray{visibility:hidden}
.modal:has(.comparison-grid){max-width:850px}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.compare-card{min-width:0;border:1px solid var(--line);border-radius:16px;padding:16px}
.compare-card .wine-visual{height:210px;border-radius:12px}
.compare-card .bottle-art{height:192px}
.compare-card h3{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.2;overflow-wrap:anywhere}
.compare-card>p{font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.compare-card dl{margin:16px 0}
.compare-card dl>div{border-top:1px solid var(--line);padding:12px 0}
.compare-card dt{font-size:12px;color:var(--muted);margin-bottom:5px}
.compare-card dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.compare-card .btn-ghost{width:100%;font-size:12px;padding:10px 6px}
.crop-overlay{z-index:56}.crop-modal{max-width:480px}
.crop-preview{display:flex;justify-content:center;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;min-height:240px;margin:16px 0;padding:12px}
.crop-preview canvas{display:block;max-width:100%;max-height:320px;width:auto;height:auto;border-radius:4px}
.crop-controls{display:grid;gap:12px}
.crop-controls label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted)}
.crop-controls input{width:55%;min-height:36px;accent-color:var(--accent)}
.tasting-rating,.aroma-picker{border:0;padding:0;margin:18px 0 22px;min-width:0}
.tasting-rating legend,.aroma-picker legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:10px}
.taste-stars{display:flex;gap:8px}
.star-choice{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;color:var(--faint);cursor:pointer;background:var(--surface)}
.star-choice svg{width:24px;height:24px;pointer-events:none}
.star-choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.star-choice:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.star-choice.lit{color:var(--accent);background:var(--accent-wash);border-color:var(--accent)}
.star-choice:has(input:disabled){opacity:.4}
.rating-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--muted)}
.rating-caption .lien{min-height:36px;font-size:12px}
.aroma-choices,.aroma-tags{display:flex;flex-wrap:wrap;gap:8px}
.aroma-choices button{font-size:12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--muted);padding:8px 12px;min-height:38px}
.aroma-choices button[aria-pressed=true]{color:var(--accent);background:var(--accent-wash);border-color:var(--accent)}
.aroma-choices button[aria-pressed=true]::before{content:'✓ ';font-weight:700}
.aroma-tags{margin:12px 0}.aroma-tags:empty{display:none}
.aroma-tags span{font-size:11px;border-radius:20px;background:var(--accent-wash);color:var(--accent);padding:6px 10px}
@media(max-width:760px){
  .home-intro{padding:22px 18px;display:block;margin-bottom:24px}
  .home-intro h3{font-size:30px}.home-intro p{font-size:12px}
  .home-actions{flex-direction:row;flex-wrap:wrap;margin-top:18px;gap:8px}
  .home-actions button{flex:1;font-size:11px;padding:11px 8px}
  .comparison-tray{left:12px;right:12px;bottom:calc(90px + env(safe-area-inset-bottom));transform:none;max-width:none;flex-wrap:wrap;gap:8px;padding:10px;font-size:11px}
  .comparison-tray button{font-size:11px;padding:9px 11px}.comparison-tray>span{flex:1}
  .comparison-grid{gap:10px}.compare-card{padding:10px;border-radius:12px}
  .compare-card .wine-visual{height:156px}.compare-card .bottle-art{height:144px}
  .compare-card h3{font-size:19px}.compare-card dd{font-size:13px}
  .compare-card>p{font-size:12px}.compare-card .btn-ghost{font-size:11px}
  .crop-controls label{font-size:12px}
  .taste-stars{gap:6px}.star-choice{width:40px;height:44px}
  #nav button{font-size:12px}
}

/* Bouteilles : un objet à reconnaître, puis les informations pour le choisir. */
.bottle-cover{position:relative;display:block;border:0;padding:0;background:none;text-align:inherit;color:inherit;flex:none;width:84px;overflow:hidden}
.bottle-cover:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
.wine-visual{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,var(--surface),transparent 75%),var(--surface-2)}
.wine-visual .bottle-art{display:block;width:auto;height:180px;max-width:100%;filter:drop-shadow(7px 10px 6px rgb(var(--ombre) / .12));transition:transform .25s ease}
.wine-visual .bottle-photo{display:block;width:100%;height:100%;object-fit:contain;padding:12px;border-radius:18px}
.wine-visual .visual-kind{position:absolute;inset:auto auto 10px 12px;background:transparent;padding:0;border-radius:0;font-size:11px;letter-spacing:.5px;color:var(--muted)}
.cover-vintage{position:absolute;top:16px;left:16px;font-size:12px;line-height:1;padding:7px 10px;border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--ink)}
.list:not(.cards) .wine-visual{height:138px;border-radius:10px;margin:8px 0 8px 8px}
.list:not(.cards) .bottle-art{height:126px}
.list:not(.cards) .visual-kind,.list:not(.cards) .cover-vintage{display:none}
.card-window{color:var(--muted);font-size:12px;margin-top:9px;line-height:1.5}
.card-rating{display:flex;align-items:center;gap:5px;margin-top:9px;font-size:12px;color:var(--accent)}
.card-rating svg{height:13px;width:13px}
.card-rating span{font-size:12px;color:var(--muted)}
.card-price{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
.card-price span{font-size:12px;color:var(--muted);line-height:1.4}
.card-price strong{font-size:16px;font-weight:600;white-space:nowrap}
.bside .val{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:140px}
.bside .pv{grid-column:1/-1;text-align:left;font-size:12px}
.cards{gap:24px}
.cards .bottle{border-radius:20px;box-shadow:0 3px 12px rgb(var(--ombre) / .025)}
.cards .bottle-cover{width:100%}
.cards .wine-visual{height:262px;border:0;background:radial-gradient(ellipse at 50% 30%,var(--surface),transparent 74%),var(--surface-2)}
.cards .wine-visual .bottle-art{height:236px;width:auto}
.cards .wine-visual .bottle-photo{height:244px;width:90%;padding:14px 14px 20px}
.cards .bottle-cover:hover .bottle-art{transform:rotate(-3deg) translateY(-3px)}
.cards .bmain{padding:21px;gap:12px;align-items:start}
.cards .vint{display:none}
.cards .binfo{width:100%;min-width:0}
.cards .binfo .nm{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.15;letter-spacing:-.3px;padding-right:18px;overflow-wrap:anywhere}
.cards .binfo .meta{white-space:normal;line-height:1.5;font-size:12px;margin-top:8px}
.cards .bside{gap:12px;padding-top:14px;align-items:center}
.cards .badge{font-size:12px;padding:6px 9px;white-space:normal}
.cards .favorite{top:14px;right:14px;border-radius:50%;width:34px;height:34px}
.cards .del{display:none}
.cards .bside .val{width:100%;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.cards .qty{margin-left:auto;gap:5px}
.cards .qty button{height:30px;width:30px;border-radius:50%}
.cards .qty .q{font-size:12px}

/* Fiche et aperçu du scan utilisent la même hiérarchie. */
.modal:has(.wine-showcase),.modal:has(.bottle-preview){max-width:680px}
.modal:has(.wine-showcase)>h2{font-size:32px;line-height:1.1;padding-right:26px;margin-bottom:8px}
.wine-summary.wine-showcase{display:grid;grid-template-columns:45% 1fr;gap:28px;margin:20px 0 24px}
.wine-showcase .wine-visual{width:100%;height:310px;min-width:0;border-radius:18px}
.wine-showcase .wine-visual .bottle-art{height:288px}
.wine-showcase .wine-visual .bottle-photo{padding:16px}
.wine-showcase .wine-visual .visual-kind{display:block}
.showcase-copy{min-width:0}
.wine-showcase .showcase-vintage{font-family:var(--serif);font-size:54px;line-height:1;margin:16px 0;color:var(--ink);letter-spacing:-2px}
.showcase-copy>p{line-height:1.65;overflow-wrap:anywhere}
.wine-showcase .showcase-stock{margin:20px 0;font-size:12px}
#wine-favorite{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:11px;padding:10px}
#wine-favorite svg{width:15px;height:15px;flex:none}
.bottle-insights{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.insight{display:flex;flex-direction:column;gap:7px;padding:18px;min-width:0}
.insight+.insight{border-left:1px solid var(--line)}
.insight>span{font-size:12px;line-height:1.5;color:var(--muted)}
.insight .insight-label{text-transform:uppercase;letter-spacing:1px;font-size:11px}
.insight>strong{font-family:var(--serif);font-size:25px;line-height:1.1;font-weight:500;overflow-wrap:anywhere}
.insight-maturity>strong{color:var(--insight-tone,var(--peak))}
.maturity-panel{border:1px solid var(--line);background:var(--surface-2);padding:22px;border-radius:14px}
.maturity-track{height:9px;background:linear-gradient(90deg,var(--wait-wash),var(--past-wash));margin-top:35px}
.maturity-window{background:linear-gradient(90deg,var(--peak),var(--drink));height:9px}
.maturity-today{height:19px;border-left:2px solid var(--ink)}
.wine-actions{position:sticky;bottom:-28px;margin-bottom:-28px;padding:16px 0 24px;background:var(--surface);z-index:2;border-top:1px solid var(--line)}
.wine-actions .btn-primary{flex:1}
.personal-rating{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left}
.personal-rating>span:nth-child(2){flex:1;min-width:0}
.personal-rating b{display:block;font-size:12px;font-weight:500}
.personal-rating small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}
.personal-rating .rating-mark{display:flex;align-items:baseline;gap:5px;color:var(--accent)}
.rating-mark svg{height:18px;width:18px;align-self:center;margin-right:3px}
.rating-mark strong{font-family:var(--serif);font-weight:500;font-size:30px}
.personal-rating>span:last-child{font-size:22px;color:var(--muted)}
.wine-tabs{display:flex;gap:4px;padding:5px;margin:22px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);scroll-margin-top:16px}
.wine-tabs button{flex:1;min-width:0;min-height:42px;padding:10px 6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:12px}
.wine-tabs button[aria-selected=true]{background:var(--surface);color:var(--accent);box-shadow:0 2px 6px rgb(var(--ombre) / .06);font-weight:600}
.wine-vintages{margin:0 0 20px}
.wine-vintages h3{font-size:12px;font-weight:500;margin:0 0 10px;color:var(--muted)}
.vintage-lots{display:flex;gap:8px;overflow:auto;padding-bottom:5px;scroll-snap-type:x proximity}
.vintage-lots button{flex:0 0 auto;max-width:200px;display:flex;flex-direction:column;gap:6px;min-height:65px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:12px 14px;text-align:left;scroll-snap-align:start}
.vintage-lots button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.vintage-lots strong{font-family:var(--serif);font-size:21px;font-weight:500}
.vintage-lots span{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.wine-memory{border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0;background:var(--surface)}
.memory-heading{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.memory-heading strong{color:var(--accent);white-space:nowrap}
.memory-place{font-size:12px;color:var(--muted);margin:7px 0}
.wine-memory-notes{font-family:var(--serif);font-size:19px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0}
.wine-memory .lien{font-size:12px;min-height:36px}
.memory-empty{background:var(--surface-2);border-radius:14px;padding:24px;text-align:center;margin:16px 0;color:var(--muted)}
.memory-empty p{font-family:var(--serif);font-size:23px;color:var(--ink);margin:12px 0}
.memory-empty span{font-size:12px;line-height:1.6;display:block}
.bottle-flow{display:flex;justify-content:space-between;gap:8px;padding:0 0 16px;margin:0;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
.bottle-preview{margin:16px 0}
.preview-identity{display:grid;grid-template-columns:145px 1fr;gap:24px;align-items:center;margin-bottom:14px}
.preview-identity .wine-visual{height:202px;border-radius:14px}
.preview-identity .bottle-art{height:190px}
.preview-identity>div{min-width:0}
.preview-identity h3{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.15;margin:10px 0;overflow-wrap:anywhere}
.preview-identity p{font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.preview-identity .eyebrow{font-size:11px;letter-spacing:1px}
.vintage-pill{display:inline-block;font-size:12px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:20px;margin-top:10px}
.photo-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.photo-actions .scan-cta{flex:1;width:auto;margin:0;justify-content:center;padding:11px;font-size:12px;min-width:190px}
.photo-actions .lien{font-size:12px}
.preview-status{margin:10px 0 20px}
.vintage-choices{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 20px}
.vintage-choices button{border:1px solid var(--line);border-radius:20px;padding:7px 11px;background:var(--surface);color:var(--muted);font-size:12px;min-height:34px}
.vintage-choices button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-wash)}
.preview-year{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;padding:14px;background:var(--surface-2);border-radius:12px}
.preview-year .fg{margin:0;flex:1;min-width:140px}
.preview-year .fg input{background:var(--surface);font-weight:600}
.preview-year .vintage-choices{margin:0;flex:2}
.page-heading{padding-top:28px;padding-bottom:20px}
.stats .stat{padding-top:15px;padding-bottom:15px}
.welcome-art .wine-visual{background:transparent;overflow:visible}
.welcome-art .wine-visual .bottle-art{height:168px;width:86px;max-width:none}
.welcome-art .visual-kind{display:none}

@media(max-width:760px){
  /* Cartes et lignes mobiles : voir « Finitions » en fin de fichier. */
  .wine-summary.wine-showcase{grid-template-columns:44% 1fr;gap:18px}
  .wine-showcase .wine-visual{height:244px}
  .wine-showcase .wine-visual .bottle-art{height:222px}
  .wine-showcase .showcase-vintage{font-size:40px;letter-spacing:-1px}
  .showcase-copy .eyebrow{font-size:11px}
  .showcase-copy>p{font-size:12px}
  .insight{padding:15px 12px}
  .insight>strong{font-size:22px}
  .insight>span{font-size:12px}
  .wine-actions{bottom:-22px;margin-bottom:-22px;padding-bottom:22px}
  .preview-identity{grid-template-columns:106px minmax(0,1fr);gap:17px}
  .preview-identity .wine-visual{height:176px}
  .preview-identity .bottle-art{height:164px}
  .preview-identity h3{font-size:23px}
  .bottle-flow{font-size:12px}
  .timeline-legend{font-size:12px}
  .wine-summary.wine-showcase{margin-bottom:16px}
  .wine-showcase .wine-visual{height:216px}
  .wine-showcase .wine-visual .bottle-art{height:198px}
  .personal-rating{padding:11px 14px;margin-bottom:14px;gap:10px}
  .wine-vintages{margin-bottom:14px}
  .vintage-lots button{padding:9px 12px;min-height:58px}
  .wine-tabs{margin-top:16px}
  .page-heading{padding:16px 0 12px}
  .stats .stat{padding:10px 12px}
  .preview-year{gap:10px;padding:12px}
  .preview-year .fg{min-width:100%;display:flex;align-items:center;gap:12px}
  .preview-year .fg label{flex:1;margin:0}
  .preview-year .fg input{width:104px;flex:none;padding:9px}
  .preview-year .vintage-choices{flex-basis:100%;gap:5px}
  .preview-year .vintage-choices button{font-size:11px;padding:5px 9px;min-height:32px}
}

/* L’accueil invite à choisir ; les commandes de gestion restent dans la cave. */
.off-drop{max-height:380px;border-radius:14px;box-shadow:0 14px 40px rgb(var(--ombre)/.12)}
.off-item{width:100%;text-align:left;background:var(--surface);color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:12px;gap:16px;min-height:112px}
.off-item img,.off-item .noimg{width:66px;height:94px;object-fit:contain;background:var(--surface-2);border-radius:9px;padding:5px}
.off-item .t{font-family:var(--serif);font-size:21px;white-space:normal;line-height:1.15}
.off-item .s{white-space:normal;line-height:1.5;margin-top:7px;font-size:12px}
.catalogue-search{margin:10px 0 4px;min-height:44px}
.photo-credit,.service-source{font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.photo-credit a,.service-source a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.modal:has(.wine-detail-layout){max-width:1120px}
.wine-detail-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px;margin-top:24px}
.wine-identity,.wine-detail-content{min-width:0}
.wine-identity{align-self:start;position:sticky;top:20px}
.wine-identity .wine-showcase{display:flex;flex-direction:column;gap:20px;margin:0}
.wine-identity .wine-showcase .wine-visual{height:400px;border-radius:22px;background:radial-gradient(ellipse at 50% 40%,var(--surface),var(--accent-wash))}
.wine-identity .wine-showcase .bottle-art{height:360px}
.wine-identity .wine-showcase .bottle-photo{padding:22px;max-height:400px;object-fit:contain}
.wine-identity .showcase-copy{padding:0 10px 16px;text-align:center}
.wine-identity .showcase-vintage{font-size:42px;margin:12px 0}
.wine-identity .showcase-stock{margin:12px 0}
.wine-detail-content .personal-rating{margin-top:0}
.wine-detail-content .insight{padding:18px 16px}
.wine-service,.wine-notes-summary{margin:24px 0}
.wine-service h3,.wine-notes-summary h3{font:500 24px/1.2 var(--serif);margin-bottom:14px}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.service-grid>div{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.service-grid .eyebrow{font-size:11px;letter-spacing:1px}
.service-grid strong{display:block;font:500 27px/1.2 var(--serif);margin:12px 0}
.service-grid p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.service-source{margin-top:10px}
.wine-notes-summary{border:1px solid var(--line);border-radius:14px;padding:18px}
.wine-notes-summary>p{font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.wine-notes-summary .lien{font-size:12px;min-height:40px;margin-top:8px}
@media(max-width:760px){
 .wine-detail-layout{display:block;margin-top:18px}
 .wine-identity{position:static}
 .wine-identity .wine-showcase{display:grid;grid-template-columns:44% minmax(0,1fr);gap:16px;margin-bottom:20px}
 .wine-identity .wine-showcase .wine-visual{height:260px;border-radius:16px}
 .wine-identity .wine-showcase .bottle-art{height:235px}
 .wine-identity .wine-showcase .bottle-photo{max-height:260px;padding:10px}
 .wine-identity .showcase-copy{text-align:left;padding:0;align-self:center}
 .wine-identity .showcase-vintage{font-size:38px}
 .wine-identity .photo-credit{margin-bottom:20px}
 .service-grid{gap:8px}.service-grid>div{padding:14px 12px}.service-grid strong{font-size:23px}
 .service-grid .eyebrow{font-size:11px}.wine-service h3,.wine-notes-summary h3{font-size:22px}
 .off-item{gap:10px}.off-item img,.off-item .noimg{width:52px;height:82px}.off-item .t{font-size:18px}.off-item .c{display:none}
}
.home-view .fab{display:none}
.home-view .home-colors{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.home-view .home-colors button{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:40px}
.home-view .home-colors .family-symbol{width:22px;height:22px;margin:0;background:none}
.home-view .home-colors .family-symbol svg{width:20px;height:20px}
.home-view .home-colors strong{font-size:12px}
.home-view .home-colors button>span:last-child{margin:0;font-size:12px}
.home-view .home-colors button:disabled{display:none}
.home-view .home-explore .collection-heading{margin-bottom:14px}
.home-view .home-explore .collection-heading span{display:none}
.home-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.home-wine{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;text-align:left;color:var(--ink);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);padding:0;min-width:0}
.home-wine .wine-visual{height:250px}
.home-wine .wine-visual .bottle-art{height:222px}
.home-wine .wine-visual .bottle-photo{max-height:250px}
.home-wine-copy{display:flex;flex-direction:column;justify-content:center;padding:24px;min-width:0}
.home-wine-vintage{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.home-wine-copy>strong{font:500 26px/1.12 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
.home-wine-origin{font-size:12px;line-height:1.5;color:var(--muted);margin-top:10px;overflow-wrap:anywhere}
.home-wine-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:20px;font-size:12px;color:var(--muted)}
.home-wine-footer>span:first-child{color:var(--accent)}
@media(hover:hover){.home-wine:hover{border-color:var(--line-strong);box-shadow:0 6px 20px rgb(var(--ombre)/.06)}.home-wine:hover .bottle-art{transform:translateY(-4px)}}
@media(max-width:760px){
  .home-view .home-colors{gap:7px;margin-bottom:24px}
  .home-view .home-colors button{padding:9px 12px;gap:6px;min-height:44px}
  .home-view .home-colors strong{font-size:11px}
  .home-gallery{gap:12px}
  .home-wine{display:flex;flex-direction:column;border-radius:16px}
  .home-wine .wine-visual{height:202px;width:100%}
  .home-wine .wine-visual .bottle-art{height:180px}
  .home-wine .wine-visual .bottle-photo{height:196px}
  .home-wine .visual-kind{font-size:11px;left:12px;bottom:8px}
  .home-wine-copy{padding:16px 12px;flex:1;justify-content:flex-start;width:100%}
  .home-wine-copy>strong{font-size:21px}
  .home-wine-vintage{font-size:12px}.home-wine-origin{font-size:12px;margin-bottom:14px}
  .home-wine-footer{margin-top:auto;padding-top:10px;font-size:12px}
  .home-view .home-care{padding:20px;margin-top:26px}
  .home-view .home-care .eyebrow,.home-view .home-care>div>p{display:none}
  .home-view .home-care h3{font-size:22px;margin:0}
}

/* ---- Sommelier, bu au bon moment, palais, déjà en cave ------------------ */
.sommelier{margin-bottom:24px}
.sommelier h3{font:500 24px/1.2 var(--serif);margin:0 0 8px}
.sommelier-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin:14px 0}
.sommelier-form label{grid-column:1/-1;font-size:12px;color:var(--muted)}
.sommelier-form textarea{width:100%;min-height:52px;resize:vertical}
.sommelier-attente{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.sommelier-attente .spin{margin:0;width:22px;height:22px}
.sommelier-reponse{font:500 17px/1.6 var(--serif);color:var(--ink);margin:6px 0 14px}
.moment-score{margin:0 0 12px;font-size:13px;color:var(--muted)}
.moment-score strong{display:block;font:500 42px/1.1 var(--serif);color:var(--peak);margin-bottom:4px}
.moment .bar-track{display:block;margin-bottom:10px}
.moment .bar-fill{height:100%}
.moment button{margin-top:10px}
.palais-titre{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.palais-liste{list-style:none;margin:0;padding:0}
.palais-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.palais-liste li span{overflow-wrap:anywhere}
.palais-liste small{color:var(--muted);font-size:12px}
.deja-cave{border:1px solid var(--peak);background:var(--peak-wash);border-radius:var(--r);padding:12px 14px;margin:10px 0}
.deja-cave p{margin:0 0 10px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:760px){
  .sommelier-form{grid-template-columns:1fr}
  .sommelier h3{font-size:21px}
}

/* ==========================================================================
   Finitions (octobre 2026)
   Aucun texte sous 11 px, cartes et lignes mobiles compactes, fiche en
   onglets, cibles tactiles d'au moins 36 px. Placé en fin de fichier : ces
   règles l'emportent sur celles du dessus à spécificité égale.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stats:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Pastille « Photo » : lisible sur n'importe quelle image. Les illustrations
   n'en portent pas — « Illustration » sous chaque carte n'apprenait rien. */
.wine-visual .visual-kind{inset:auto auto 10px 10px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 84%,transparent);font-size:11px;letter-spacing:.02em;line-height:1.45;color:var(--muted)}
.wine-visual .visual-kind.kind-illustration{display:none}
.wine-showcase .wine-visual .visual-kind.kind-illustration{display:inline-block}

/* Nom du vin et métadonnées */
.meta-mill{display:none}
.favorite{min-width:36px;min-height:36px}

/* ---- Fiche : l'essentiel d'abord, le reste en onglets ---------------------- */
.personal-rating{padding:12px 16px;margin:0 0 14px;border-radius:14px}
.rating-mark strong{font-size:26px}
.personal-rating b{font-size:14px}
.personal-rating small{font-size:12px;margin-top:2px}
.insight>strong{font-size:23px}
.insight .insight-label{letter-spacing:.08em}
.insight .lien{font-size:13px;min-height:32px;text-align:left}
.note-add{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 0;padding:12px 16px;border:1px dashed var(--line-strong);
  border-radius:14px;background:transparent;color:var(--ink);text-align:left}
.note-add:hover{border-color:var(--accent);background:var(--accent-wash)}
.note-plus{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-wash);color:var(--accent);font-size:20px;line-height:1}
.note-add b{display:block;font-size:14px;font-weight:600}
.note-add small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.wine-notes-summary{margin:14px 0 0;padding:2px 0 2px 16px;border:0;border-left:3px solid var(--accent);border-radius:0}
.wine-notes-summary h3{font:600 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.wine-notes-summary>p{font:400 17px/1.55 var(--serif);margin:0 0 2px}
.wine-notes-summary .lien{font-size:13px;min-height:36px;margin-top:2px}
.wine-tabs{margin-top:18px}
.wine-tabs button{min-height:44px;padding:10px 4px;font-size:13px}
.wine-tabs+section{margin-top:16px}
.wine-detail-content .maturity-panel{margin-top:0}
.wine-service{margin:0}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-grid strong{font-size:21px;margin:10px 0 8px}
.service-grid>div{border-radius:14px}
.service-source{margin-top:12px}
.pairing-tags button{font:inherit;font-size:13px;min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:999px;background:var(--accent-wash);color:var(--accent)}
.pairing-tags button:hover{border-color:var(--accent)}
.photo-credit{font-size:12px}

/* ---- Étoiles : contour = pas encore donnée, pleine = donnée ----------------- */
.star-choice svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.star-choice.lit svg{fill:currentColor}
.jl .etoile{width:30px;height:34px;display:grid;place-items:center}
.jl .etoile svg{width:17px;height:17px}
.jl .jx{width:34px;height:34px;display:grid;place-items:center;padding:0}
.jl .jn{min-height:34px;line-height:34px}

/* ---- Formulaire ------------------------------------------------------------- */
.grid2{align-items:start}
.form-aide{margin:-6px 0 14px;line-height:1.5}

/* ---- Sommelier -------------------------------------------------------------- */
.sommelier-idees{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sommelier-idees .chip{min-height:36px}
.sommelier-reponse{margin-top:14px}

@media(max-width:760px){
  /* En-tête : le bouton « Ajouter » devient une pastille, le titre garde sa ligne. */
  .page-heading h2{font-size:22px;line-height:1.2}
  #header-add{flex:none;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1}
  #header-add .lbl{display:none}
  .stat,.stat:first-child,.stat:nth-child(3),.stat:nth-child(n+3){min-width:132px}
  .chip{min-height:36px}
  .view-switch button{width:40px;height:36px}
  .advanced-filters summary{min-height:36px}
  .tab-badge.on{font-size:11px}
  /* La croix de suppression ne se révèle qu'au survol : sur une fenêtre étroite
     de bureau (hover:hover) elle restait un bouton invisible qui prenait de la
     place devant le badge. Mobile : la suppression passe par la fiche. */
  .bottle .del{display:none}

  /* Cartes compactes : une bouteille tient en ~170 px au lieu de 340 px. */
  .cards{grid-template-columns:1fr;gap:10px}
  .cards .bottle{display:grid;grid-template-columns:92px minmax(0,1fr);min-height:0;border-radius:16px;box-shadow:none}
  .cards .bottle-cover{width:100%;height:100%;min-height:0;background:var(--surface-2)}
  .cards .wine-visual{height:100%;min-height:150px;border:0}
  .cards .wine-visual .bottle-art{height:124px;width:auto;max-width:76px;margin:16px 0 0}
  .cards .wine-visual .bottle-photo{width:100%;height:100%;max-height:200px;padding:34px 6px 10px}
  .cards .cover-vintage{top:8px;left:8px;font-size:11px;padding:3px 8px}
  .cards .visual-kind{display:none}
  .cards .bmain{padding:12px 12px 10px;gap:2px;align-content:start}
  .cards .binfo .nm{font-size:18px;line-height:1.2;padding-right:38px}
  .cards .binfo .meta{font-size:12px;margin-top:4px}
  .cards .card-window{display:none}
  .cards .card-rating{margin-top:6px}
  .cards .favorite{top:8px;right:8px;width:36px;height:36px}
  .cards .favorite svg{width:15px;height:15px}
  .cards .bside{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0 0;padding:8px 0 0;border-top:1px solid var(--line);width:100%}
  .cards .badge{order:1;flex:0 1 auto;margin:0;padding:4px 8px;font-size:11px;line-height:1.35}
  .cards .compare-toggle{order:2;margin-left:auto}
  .bottle .compare-toggle{font-size:0;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;display:grid;place-items:center}
  .bottle .compare-toggle::before{content:'⇄';font-size:16px;line-height:1}
  .cards .qty{order:3;margin:0;gap:6px}
  .cards .qty button{width:34px;height:34px;min-width:34px;min-height:34px}
  .cards .bside .val{order:4;margin-left:auto;display:flex;align-items:flex-end;gap:8px;min-width:0;width:auto;border:0;padding:0}
  .cards .card-price{gap:1px;align-items:flex-end;text-align:right}
  .cards .card-price span{font-size:11px;white-space:nowrap}
  .cards .card-price strong{font-size:16px}
  .cards .val .achat{display:none}
  .cards .val.sans-estim .achat{display:flex}
  .cards .val.sans-estim .estim{display:none}
  .cards .bside .pv{grid-column:auto;align-self:flex-end;font-size:12px;padding-bottom:1px}

  /* Lignes de liste compactes (liste de la cave, À boire, emplacements) */
  .list:not(.cards) .bottle{display:grid;grid-template-columns:4px 56px minmax(0,1fr);column-gap:10px;align-items:start;min-height:76px}
  .list:not(.cards) .cap{grid-column:1;grid-row:1/span 2;align-self:stretch}
  .list:not(.cards) .bottle-cover{grid-column:2;grid-row:1/span 2;width:56px;align-self:center;padding:8px 0}
  .list:not(.cards) .bottle-cover .wine-visual{height:86px;margin:0;border-radius:10px}
  .list:not(.cards) .bottle-cover .bottle-art{height:76px}
  .list:not(.cards) .bottle-cover .bottle-photo{height:86px;padding:3px;border-radius:10px}
  .list:not(.cards) .bmain{display:contents}
  .list:not(.cards) .vint{display:none}
  .list:not(.cards) .binfo{grid-column:3;grid-row:1;padding:10px 12px 0 0;min-width:0}
  .list:not(.cards) .binfo .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;font-size:15px;line-height:1.25}
  .list:not(.cards) .meta{white-space:normal;font-size:12px;line-height:1.5;margin-top:3px}
  .list:not(.cards) .meta-mill{display:inline;margin-right:6px;font-weight:700;color:var(--ink)}
  .list:not(.cards) .card-window{display:none}
  .list:not(.cards) .bside{grid-column:3;grid-row:2;width:auto;margin:0;padding:6px 12px 10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .list:not(.cards) .badge{order:1;margin:0;font-size:11px;line-height:1.35;padding:4px 8px}
  .list:not(.cards) .favorite{order:2;margin-left:auto;width:36px;height:36px}
  .list:not(.cards) .compare-toggle{order:3}
  .list:not(.cards) .qty{order:4;gap:6px}
  .list:not(.cards) .qty button{width:34px;height:34px;min-width:34px;min-height:34px}
  .list:not(.cards) .bside .val{order:5;margin-left:auto;display:flex;align-items:flex-end;gap:8px;min-width:0;width:auto}
  .list:not(.cards) .card-price{gap:1px;align-items:flex-end;text-align:right}
  .list:not(.cards) .card-price span{font-size:11px;white-space:nowrap}
  .list:not(.cards) .card-price strong{font-size:15px}
  .list:not(.cards) .val .achat{display:none}
  .list:not(.cards) .val.sans-estim .achat{display:flex}
  .list:not(.cards) .val.sans-estim .estim{display:none}
  .list:not(.cards) .bside .pv{grid-column:auto;align-self:flex-end;font-size:12px;padding-bottom:1px}

  /* Fiche */
  .service-grid{grid-template-columns:1fr}
  .service-grid>div{padding:14px 16px}
  .service-grid strong{font-size:22px;margin:8px 0 6px}
  .wine-tabs button{font-size:12.5px;padding:10px 2px}
  .insight>strong{font-size:21px}
  .note-add{margin-top:12px}
  .preview-year .fg input{width:120px}
}
@media(max-width:360px){
  .cards .bottle{grid-template-columns:80px minmax(0,1fr)}
  .cards .wine-visual .bottle-art{max-width:64px;height:108px}
  .cards .binfo .nm{font-size:17px}
  .insight>strong{font-size:19px}
}

.advanced-filters summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;min-height:34px}
.advanced-filters summary::-webkit-details-marker{display:none}
.advanced-filters summary::after{content:'';flex:none;width:8px;height:8px;margin:-3px 4px 0 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.advanced-filters[open] summary::after{transform:rotate(-135deg);margin-top:3px}
/* Onglets de la fiche : largeur selon le contenu, « Dégustations » ne déborde plus */
.wine-tabs{gap:2px;padding:4px}
.wine-tabs button{flex:1 1 auto;padding-left:8px;padding-right:8px;white-space:nowrap}
.insight>strong small{font:400 12px var(--sans);color:var(--muted);margin-left:4px;letter-spacing:0}

/* ---- Données extrêmes : rien ne déborde, rien ne casse la mise en page ------- */
.case.libre{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.35}
.loc{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.nm-txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.cards .binfo .nm{white-space:normal}
.list:not(.cards) .binfo .nm{display:block;-webkit-line-clamp:unset}
.list:not(.cards) .nm-txt{-webkit-line-clamp:2}
@media(min-width:761px){.list:not(.cards) .nm-txt{-webkit-line-clamp:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.modal h2.titre-long{font-size:24px!important;line-height:1.2}
.stat .n.long{font-size:21px;overflow-wrap:anywhere}
.case .qte{white-space:nowrap}

/* Libellés des barres : « Vallée du Rhône » ne se coupe plus à 13 caractères */
.bar-row .lbl{width:124px;line-height:1.3;overflow-wrap:anywhere}
@media(max-width:760px){.bar-row .lbl{width:104px}}

/* Zone de saisie du sommelier : même charte que les autres champs */
.sommelier-form textarea{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:11px;font:inherit;font-size:14px;outline:none}
.sommelier-form textarea:focus{border-color:var(--accent)}
.sommelier-form textarea::placeholder{color:var(--faint)}
@media(max-width:760px){.sommelier-form textarea{font-size:16px}}

/* Listes étroites (accords, réponses du sommelier) : l'essentiel d'abord */
.list.compact .card-window{display:none}
.list.compact .val .achat{display:none}
.list.compact .val.sans-estim .achat{display:flex}
.list.compact .val.sans-estim .estim{display:none}
.list.compact .bside .val{min-width:0;display:flex;gap:8px;align-items:flex-end}
.list.compact .card-price{align-items:flex-end;text-align:right}
.list.compact .bside .pv{grid-column:auto;align-self:flex-end}
.list.compact .compare-toggle{font-size:0;width:34px;min-width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;display:grid;place-items:center}
.list.compact .compare-toggle::before{content:'⇄';font-size:16px;line-height:1}
.bottle-flow+.fg{margin-top:16px}
#modal:focus{outline:none}

/* Cibles tactiles : les liens d'action restent des liens, mais se touchent du doigt */
.planning-wines button.lien,.photo-actions .lien,#f-remove-photo{min-height:36px;padding:6px 0;text-align:left}
.cards .binfo .nm{min-height:28px}

/* Affichage progressif : le bouton « suite » occupe toute la largeur de la grille */
.pagination{grid-column:1/-1;display:flex;justify-content:center;padding:14px 0 6px}
.pagination .btn-ghost{min-height:44px;min-width:240px}
.pagination small{color:var(--faint);margin-left:4px}

.wine-add-photo{display:block;margin:8px auto 0;min-height:36px;font-size:13px;text-align:center}
.photo-actions .btn-ghost{min-height:44px}

.search input[type=search]{-webkit-appearance:none;appearance:none}
.search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:16px;width:16px;margin-left:6px;cursor:pointer;
  background:var(--faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
/* Très petits écrans (iPhone SE 1re génération, 320 px) : les quatre onglets de
   la fiche et les onglets de la cave tiennent sans déborder. */
.wine-visual .visual-kind{white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
@media(max-width:360px){
  .wine-tabs button{font-size:12px;padding:10px 4px}
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .subnav button{flex:none}
}
/* Tablette (iPad portrait) : quatre chiffres côte à côte se coupaient en quatre
   lignes chacun ; deux par ligne se lisent d'un coup d'œil. */
@media(min-width:761px) and (max-width:1150px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   Téléphone, deuxième passe (octobre 2026)
   Mesuré dans WebKit à 320, 375 et 390 px : moins de blocs avant le premier
   vin, plus rien qui recouvre une carte, aucun champ qui fait zoomer Safari.
   ========================================================================== */
.chips-couleurs{margin-bottom:16px}
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}
.result-bar .result-count{margin:0;min-width:0}
.result-bar .view-switch{flex:none}
.heading-actions{display:flex;align-items:center;gap:8px;flex:none}
.heading-scan{display:none}
.wine-compare{display:inline-block;min-height:40px;margin-top:12px;font-size:13px;text-align:left}
@media(hover:none){
  /* Sur écran tactile, :hover reste collé après l'appui : la carte touchée
     restait soulevée en revenant de sa fiche. */
  .cards .bottle:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .cards .bottle-cover:hover .bottle-art{transform:none}
}
@media(max-width:760px){
  /* Safari zoome la page sur tout champ de moins de 16 px et la PWA reste
     zoomée ensuite : la recherche (12 px) et le planning (13 px) le faisaient. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}

  /* Le scan rejoint « + » dans Ma cave (l'accueil a son propre bouton) :
     flottant, il masquait le prix et les boutons des cartes pendant tout le
     défilement. Ailleurs, un seul bouton laisse le titre sur une ligne. */
  .fab{display:none}
  [data-vue=cave] .heading-scan{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
    border:1px solid var(--line-strong);background:var(--surface);color:var(--accent)}

  /* Les chiffres de tête vivent dans le Bilan ; ailleurs, la pastille
     « À boire » et le compte des vins disent l'essentiel. */
  [data-vue=cave] .stats,[data-vue=boire] .stats{display:none}
  [data-vue=dash] .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px;padding:0;overflow:visible}
  [data-vue=dash] .stats .stat{min-width:0}
  /* « Mes vins » répétait l'onglet juste au-dessus. */
  [data-vue=cave] .stats+.collection-heading{display:none}
  .result-bar{margin:10px 0 12px}
  header.top{padding-top:12px;padding-bottom:12px}
  .page-heading{padding:12px 0 10px}
  .chips-couleurs{margin-bottom:10px;padding-bottom:4px}
  .advanced-filters{padding:3px 14px}
  .advanced-filters summary{min-height:40px}

  /* Cartes : la comparaison se lance depuis la fiche (onglet « Le vin »). */
  .bottle .compare-toggle,.list.compact .compare-toggle{display:none}
  .cards .qty{margin-left:auto}
  .list:not(.cards) .favorite{margin-left:auto}

  /* Menu : des lignes qu'on touche du doigt */
  .menu-item{display:flex;align-items:center;min-height:42px;font-size:14px}
  /* « Sauvegardé à l'instant » ouvre l'état de la synchronisation : zone
     d'appui agrandie sans déplacer l'en-tête. */
  .etat{padding:8px 0;margin:-6px 0 -8px;max-width:none}
  .etat:not(.erreur){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 150px)}
  /* Annuler une sortie de bouteille se fait du pouce : boutons du toast de 36 px */
  .toast{gap:4px 6px;padding:8px 10px 8px 16px}
  .toast-act{min-height:36px;padding:0 10px;border-radius:8px;text-decoration:none;background:color-mix(in srgb,var(--paper) 16%,transparent)}

  .planning-controls label{min-width:100%}
  .home-feature-copy small{display:none}

  /* Fenêtres : une feuille posée en bas de l'écran, à pleine largeur. Une
     fiche longue défile ; une confirmation courte reste sous le pouce. */
  .overlay{padding:12px 0 0}
  .modal{margin-top:auto;max-width:none;border-width:1px 0 0;border-radius:20px 20px 0 0;
    padding:22px 18px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgb(var(--ombre) / .14)}
  .modal-actions,.wine-actions{bottom:0;margin-bottom:calc(-16px - env(safe-area-inset-bottom));
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .home-feature{grid-template-columns:minmax(0,1fr) 88px}
  .home-feature-copy{padding:18px 14px}
  .home-feature-copy h3{font-size:25px}
}

/* Le plan représente l’occupation, la sélection ne remplace pas les quantités. */
.plan-explication{font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 12px}
.selection-emplacement{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:13px}
.selection-emplacement>span{min-width:0;overflow-wrap:anywhere}
.selection-emplacement button{min-height:44px;font-size:13px}
.plan [data-place][aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
#inventory-open{min-height:44px;flex-shrink:0}
/* Comptage physique : lecture claire, saisie au pouce, aucun débordement. */
.inventory-progress{margin:12px 0;color:var(--ink);font-size:13px;font-weight:600}
.inventory-rows{margin:12px 0;border-top:1px solid var(--line)}
.inventory-row{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.inventory-wine{display:grid;gap:5px;min-width:0}
.inventory-wine strong{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.inventory-wine span,.inventory-wine small{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.inventory-count.fg{margin:0}
.inventory-count label{font-size:12px}
.inventory-count input{min-height:46px;font-size:16px;text-align:center;font-variant-numeric:tabular-nums}
.inventory-count input[aria-invalid=true]{border-color:var(--past)}
.inventory-change{display:grid;gap:5px;font-weight:600;font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.inventory-change small{font-weight:400;font-size:12px;color:var(--muted)}
.inventory-summary{display:grid;gap:6px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
.inventory-summary strong{font-size:18px}
.inventory-summary span{font-size:13px;color:var(--muted)}
@media(max-width:420px){.inventory-row{grid-template-columns:minmax(0,1fr) 80px;gap:12px}.inventory-wine strong{font-size:14px}}

@media(max-width:760px){
  /* Le titre de collection est masqué sur mobile, son action reste accessible. */
  [data-vue=cave] .stats+.collection-heading.collection-inventory{display:flex;justify-content:flex-end;margin:0 0 12px}
  .collection-inventory>div{display:none}
  .collection-inventory #inventory-open{min-height:42px;font-size:13px}
}
