/* ===================== Oeno — feuille de style ===================== */
:root{
  --bg:#16100f;
  --bg2:#1d1514;
  --surface:#231a19;
  --surface2:#2c2120;
  --line:#3a2b29;
  --text:#f4eeea;
  --muted:#a89791;
  --wine:#a3243b;
  --wine-soft:#c9405a;
  --gold:#d9b168;
  --green:#5fa87a;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -200px,#2a1a1d 0%,var(--bg) 60%) no-repeat,var(--bg);
  color:var(--text);
  font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;
  -webkit-text-size-adjust:100%;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 .3rem}
h2{font-size:1.05rem;margin:0 0 .6rem;letter-spacing:.01em}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.inline{display:inline}

/* ------------------------------- topbar ------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--line);
  background:rgba(22,16,15,.9);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:30;
}
.brand{color:var(--text);font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-dot{font-size:1.1rem}
/* min-width:0 + overflow-x : sous ~340px la nav defile horizontalement
   au lieu d'elargir la page entiere. */
.topnav{display:flex;align-items:center;gap:.9rem;font-size:.92rem;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--muted)}
.topnav a.on{color:var(--text)}
.topnav a:hover{color:var(--text);text-decoration:none}
.linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0}
.linkbtn:hover{color:var(--text)}
.linkbtn.danger{color:#e07a86}

/* ------------------------------- layout ------------------------------- */
.wrap{width:100%;max-width:960px;margin:0 auto;padding:1.1rem 1rem 3rem;flex:1}
.wrap.narrow{max-width:560px}
.foot{padding:1.2rem 1rem 2rem;text-align:center;color:#6d5c58;font-size:.8rem}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}

.card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;margin-bottom:1rem;box-shadow:var(--shadow);
}
.card.empty{text-align:center;padding:2.2rem 1rem}
.grid2{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr}}

/* ------------------------------- boutons ------------------------------ */
.btn{
  display:inline-block;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,var(--wine-soft),var(--wine));
  color:#fff;font:600 .95rem/1 inherit;padding:.7rem 1.15rem;text-align:center;
  box-shadow:0 4px 14px rgba(163,36,59,.35);
}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn-lg{padding:.85rem 1.4rem;font-size:1rem;width:100%}
@media(min-width:620px){.btn-lg{width:auto}}
.btn-sm{padding:.45rem .8rem;font-size:.85rem}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn-danger{background:transparent;border:1px solid #6d2c34;color:#e07a86;box-shadow:none}
.iconbtn{
  background:var(--surface2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;width:42px;height:42px;font-size:1.15rem;cursor:pointer;
}
.iconbtn.on{color:var(--gold);border-color:var(--gold)}

/* ----------------------------- formulaires ---------------------------- */
.form{display:flex;flex-direction:column;gap:.75rem;margin-top:.8rem}
label{display:block;font-size:.85rem;color:var(--muted)}
input,select,textarea{
  width:100%;margin-top:.28rem;padding:.65rem .75rem;
  background:#1a1312;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wine-soft);outline-offset:1px;border-color:transparent}
textarea{resize:vertical}
.req{color:var(--wine-soft)}
.opt{color:#6d5c58}
.alert{background:#3a1b20;border:1px solid #6d2c34;color:#f0c3c8;border-radius:var(--radius-sm);padding:.7rem .85rem;font-size:.9rem}
.notice{background:#1e3226;border:1px solid #2f5a41;color:#bfe6cf;border-radius:var(--radius-sm);padding:.7rem .85rem;font-size:.9rem}
.filelabel input{padding:.5rem}

.seg{border:0;padding:0;margin:0}
.seg legend{font-size:.85rem;color:var(--muted);padding:0 0 .3rem}
.segrow{display:flex;gap:.4rem;flex-wrap:wrap}
.segopt input{position:absolute;opacity:0;width:0;height:0}
.segopt span{
  display:inline-block;padding:.5rem .9rem;border-radius:999px;
  border:1px solid var(--line);background:#1a1312;color:var(--muted);cursor:pointer;font-size:.9rem;
}
.segopt input:checked + span{background:var(--wine);border-color:var(--wine);color:#fff}

/* ------------------------------- filtres ------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.filters .search{flex:1 1 100%}
/* min-width:0 indispensable : sans lui, un select prend la largeur de sa plus
   longue option (un lieu au nom a rallonge faisait deborder la page). */
.filters select{flex:1 1 140px;width:auto;min-width:0;max-width:100%;margin-top:0;text-overflow:ellipsis}
.filters input{margin-top:0}
.filters .btn{align-self:center}

/* ------------------------------- liste -------------------------------- */
.cards{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.wine-card{
  display:flex;align-items:center;gap:.8rem;padding:.7rem;min-width:0;
  background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);color:var(--text);
}
.wine-card:hover{border-color:var(--wine-soft);text-decoration:none}
.wine-photo{
  position:relative;width:64px;height:84px;flex:0 0 64px;border-radius:10px;overflow:hidden;
  background:#1a1312;display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.wine-photo img{width:100%;height:100%;object-fit:cover}
.pastille{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.wine-photo .pastille{position:absolute;right:5px;top:5px;box-shadow:0 0 0 2px #1a1312}
.pastille.rouge{background:#8e1f34}
.pastille.blanc{background:#e8d79b}
.pastille.rose{background:#e4849a}
.wine-body{flex:1;min-width:0}
/* le nom du vin s'affiche sur deux lignes plutot que d'etre tronque a 3 mots */
.wine-title{font-weight:600;min-width:0;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.star{color:var(--gold)}
.wine-sub{color:var(--muted);font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wine-meta{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.35rem;min-width:0}
.tag{background:#2c2120;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.12rem .55rem;font-size:.73rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-event{color:#d9c6a0;border-color:#4b3a2a}
.tag-ok{color:#bfe6cf;border-color:#2f5a41}
.wine-note{text-align:right;min-width:52px}
.wine-note strong{font-size:1.25rem;color:var(--gold)}
.wine-note span{color:var(--muted);font-size:.8rem}

/* ------------------------------- landing ------------------------------ */
.hero{flex:1;display:flex;align-items:center;padding:2rem 1rem 3rem}
.hero-inner{max-width:760px;margin:0 auto}
.kicker{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;margin:0 0 .6rem}
.hero h1{font-size:2rem;line-height:1.15;margin-bottom:.8rem}
@media(min-width:700px){.hero h1{font-size:2.6rem}}
.lead{color:var(--muted);max-width:56ch}
.hero-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0}
.hero-points{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.5rem;color:var(--muted);font-size:.92rem}
.hero-points strong{color:var(--text)}

/* ------------------------------- fiche -------------------------------- */
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.sheet-title{display:flex;gap:.6rem;align-items:flex-start;min-width:0}
.sheet-title .pastille{margin-top:.45rem}
.sheet-actions{display:flex;align-items:center;gap:.5rem}
.total-badge{
  display:flex;align-items:baseline;gap:.15rem;background:#2c2120;border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem;
}
.total-badge strong{font-size:1.25rem;color:var(--gold)}
.total-badge span{color:var(--muted);font-size:.8rem}

.phasebar{
  position:sticky;top:53px;z-index:20;background:rgba(22,16,15,.94);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  padding:.5rem 0 .6rem;margin-bottom:.4rem;
}
.phaseswitch{display:flex;background:#1a1312;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.phasebtn{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  padding:.45rem .8rem;border-radius:999px;font:600 .85rem/1 inherit;
}
.phasebtn.on{background:var(--wine);color:#fff}
.savestate{font-size:.78rem;color:#6d5c58}
.savestate.saving{color:var(--gold)}
.savestate.saved{color:var(--green)}
.savestate.error{color:#e07a86}
.phasehint{color:var(--muted);font-size:.85rem;margin:.1rem 0 .9rem}

.section-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap}
.sec-icon{margin-right:.3rem}
.notebox{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem;margin:0}
.notebox input,.inputsuffix input{width:72px;margin-top:0;text-align:center;padding:.45rem .3rem}
.inputsuffix{display:flex;align-items:center;gap:.35rem}
.fieldlabelled{font-size:.85rem}

.field{padding:.6rem 0;border-top:1px solid rgba(58,43,41,.6)}
.field:first-of-type{border-top:0;padding-top:0}
.field-label{font-size:.85rem;color:var(--muted);margin-bottom:.45rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{
  border:1px solid var(--line);background:#1a1312;color:var(--muted);
  border-radius:999px;padding:.42rem .75rem;font:.88rem/1 inherit;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--wine);border-color:var(--wine);color:#fff}
.chips.corr .chip.on{background:#2f5a41;border-color:#3f7a58;color:#eafff2}
.freetext{margin-top:.5rem}
.comment{margin-top:.2rem}

.scoreline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.scorecell{display:flex;flex-direction:column;align-items:center;background:#1a1312;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem .7rem;min-width:88px}
.scorecell span{font-size:.72rem;color:var(--muted)}
.scorecell strong{font-size:1.2rem}
.scorecell.total strong{color:var(--gold);font-size:1.5rem}
.scoreop{color:var(--muted)}

.details summary{cursor:pointer;font-weight:600;list-style:none}
.details summary::-webkit-details-marker{display:none}
.details summary::before{content:"▸ ";color:var(--muted)}
.details[open] summary::before{content:"▾ "}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.phead{font-size:.78rem;color:var(--muted);margin-bottom:.4rem}
.bottomactions{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.4rem}

/* ----------------------------- comparaison ---------------------------- */
.cmpview{display:none}
.cmp-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cmp-score{font-size:2rem;font-weight:700;color:var(--gold);line-height:1}
.cmp-legend{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.35rem}
.dot.ok{background:var(--gold)}
.dot.me{background:var(--wine)}
.dot.corr{background:#3f7a58}
.cmp-field{padding:.55rem 0;border-top:1px solid rgba(58,43,41,.6)}
.cmp-field:first-child{border-top:0}
.cmp-row{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.cmp-chip{border-radius:999px;padding:.32rem .65rem;font-size:.82rem;border:1px solid var(--line);background:#1a1312;color:var(--muted)}
.cmp-chip.ok{background:rgba(217,177,104,.16);border-color:var(--gold);color:var(--gold)}
.cmp-chip.me{background:rgba(163,36,59,.18);border-color:var(--wine);color:#f0b6c0}
.cmp-chip.corr{background:rgba(63,122,88,.18);border-color:#3f7a58;color:#bfe6cf}
.cmp-empty{color:#6d5c58;font-size:.85rem}

/* ------------------------------- stats -------------------------------- */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
@media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);padding:.8rem}
.kpi span{display:block;font-size:.75rem;color:var(--muted)}
.kpi strong{font-size:1.5rem;color:var(--gold)}
.kpi small{font-size:.8rem;color:var(--muted)}
.bar{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;font-size:.85rem}
.barlabel{width:60px;color:var(--muted)}
.bartrack{flex:1;height:10px;background:#1a1312;border-radius:999px;overflow:hidden}
.bartrack i{display:block;height:100%}
.bartrack i.rouge{background:#8e1f34}
.bartrack i.blanc{background:#e8d79b}
.bartrack i.rose{background:#e4849a}
.barval{width:28px;text-align:right;color:var(--muted)}
.toplist{list-style:none;padding:0;margin:0}
.toplist li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-top:1px solid rgba(58,43,41,.6);font-size:.9rem}
.toplist li:first-child{border-top:0}
ol.toplist{counter-reset:t}
.cloud{display:flex;flex-wrap:wrap;gap:.35rem}
.cloud .tag b{color:var(--gold)}

/* ------------------------- visibilité par phase ----------------------- */
body[data-phase="p1"] .p2only,
body[data-phase="p1"] .chips[data-phase="p2"]{display:none}
body[data-phase="p2"] .p1only,
body[data-phase="p2"] .chips[data-phase="p1"]{display:none}
body[data-phase="cmp"] #formView,
body[data-phase="cmp"] .phasehint{display:none}
body[data-phase="cmp"] .cmpview{display:block}
body:not([data-phase="p1"]) .phasehint.p1only{display:none}
body:not([data-phase="p2"]) .phasehint.p2only{display:none}

/* --------------------- degustation a l'aveugle ------------------------ */
.tag-blind{color:#e8d79b;border-color:#5a4a2a;background:#2b2418}
.details.todo{border-color:var(--wine-soft);box-shadow:0 0 0 1px rgba(201,64,90,.25),var(--shadow)}
.details.todo > summary{color:var(--wine-soft)}

/* ------------------------------ partage ------------------------------- */
.share{text-align:center}
.qrbox{background:#fff;border-radius:var(--radius);padding:14px;display:inline-block;margin:1rem auto}
.qrbox img{display:block;width:100%;max-width:300px;height:auto}
.sharelink code{display:block;background:#1a1312;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem;word-break:break-all;color:var(--gold);font-size:.9rem}
.sharebtns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.9rem 0}
.pastille.autre{background:linear-gradient(135deg,#e8d79b 0%,#e4849a 50%,#8e1f34 100%)}
.bartrack i.autre{background:linear-gradient(90deg,#e8d79b,#e4849a,#8e1f34)}

/* ------------------ barre du haut sur petits ecrans ------------------- */
.topnav a,.topnav .linkbtn{white-space:nowrap}
@media(max-width:560px){
  .topbar{padding:.6rem .7rem;gap:.5rem}
  .brand{font-size:.95rem}
  .brand-dot{font-size:1rem}
  .topnav{gap:.55rem;font-size:.8rem}
}
@media(max-width:380px){
  .topnav{gap:.45rem;font-size:.75rem}
}

/* ------------------------ champ non modifiable ------------------------ */
.readonlyfield{background:#1a1312;border:1px dashed var(--line);border-radius:var(--radius-sm);padding:.6rem .75rem}
.rolabel{display:block;font-size:.85rem;color:var(--muted)}
.rovalue{display:block;color:var(--text);margin:.15rem 0}
.rohint{display:block;font-size:.78rem;color:#6d5c58}

/* --------------------------- compte : deconnexion --------------------- */
.navme{position:relative;padding-left:.9rem}
.navme::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--gold)}
.logoutcard{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logoutcard p{margin:.2rem 0 0}
.logoutcard form{margin:0}

/* ------------------------------- photos ------------------------------- */
.photoslot{background:#1a1312;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem;text-align:center}
.pframe{position:relative;display:block;width:100%;height:180px;border-radius:8px;overflow:hidden;background:#221a19;border:1px dashed var(--line);cursor:pointer}
.pframe:hover{border-color:var(--wine-soft)}
.pframe:focus-visible{outline:2px solid var(--wine-soft);outline-offset:2px}
.pframe img{width:100%;height:100%;object-fit:cover}
.phold{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:var(--muted)}
.phold span{font-size:1.9rem}
.phold small{font-size:.72rem;padding:0 .5rem}
.pbusy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(22,16,15,.6)}
.spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pbtns{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:.5rem}
.pbtns .btn{cursor:pointer;font-size:.78rem;padding:.42rem .7rem;white-space:nowrap}
.pstatus{min-height:1.1rem;margin-top:.35rem;font-size:.76rem;color:var(--green)}
.pstatus.error{color:#e07a86}
@media(max-width:420px){.pframe{height:150px}.phold small{font-size:.66rem}.pbtns .btn{font-size:.72rem;padding:.4rem .55rem}}