@font-face{font-family:'Source Serif 4';font-weight:500 700;font-display:swap;src:url(/static/fonts/source-serif-4.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:400 700;font-display:swap;src:url(/static/fonts/figtree.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
:root{--cream:#f7f1e7;--paper:#fffdf9;--wine:#7b1e3a;--wine-d:#4a1226;--ink:#2b0b16;--text:#3a2a2f;--gold:#b8893b;--gold-l:#e8cda0;
  --rule:#e3d6c3;--rule-2:#efe6d8;--soft:#f4e6ea;--muted:#75636a;--yes:#2f6b3d;--no:#9a3b22;--rad:10px;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;--sans:Figtree,'Segoe UI',system-ui,sans-serif}
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{margin:0;background:var(--cream);color:var(--text);font:16.5px/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--wine);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.2;overflow-wrap:break-word}
h1{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;margin:.2em 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:650;margin:2.2em 0 .7em}
h2::after{content:"";display:block;width:46px;height:3px;background:var(--gold);margin-top:.35em;border-radius:2px}
h3{font-size:1.06rem;font-weight:650;margin:.2em 0}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.reading{max-width:760px}
.fine{font-size:.86rem}.muted{color:var(--muted)}
.sr-skip{position:absolute;left:-9999px}.sr-skip:focus{left:12px;top:8px;background:#fff;padding:8px;z-index:9}
.preview-note{margin:0;background:var(--gold-l);text-align:center;font-size:.85rem;padding:5px}
.overline{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .3em}
.overline a{color:inherit}

/* en-tête clair, filet double façon étiquette */
.topbar{background:var(--paper);border-bottom:3px double var(--rule)}
.topbar-row{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--wine-d);text-decoration:none;margin:0}
.logo svg{width:32px;height:32px}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navtoggle-btn{display:none;margin-left:auto;cursor:pointer;padding:8px}
.navtoggle-btn i{display:block;width:22px;height:2px;background:var(--wine-d);margin:5px 0}
.mainnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.mainnav a{color:var(--text);text-decoration:none;padding:6px 10px;font-weight:600;font-size:.93rem;border-radius:6px}
.mainnav a:hover,.mainnav a[aria-current]{background:var(--soft);color:var(--wine)}
.mainnav .mainnav-tool{background:var(--wine);color:#fff;margin-left:6px}
.mainnav .mainnav-tool:hover{background:var(--wine-d);color:#fff}
@media (max-width:820px){
  .navtoggle-btn{display:block}
  .mainnav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:12px}
  .navtoggle:checked~.mainnav{display:flex}
  .mainnav .mainnav-tool{margin:6px 0 0;text-align:center}
}

/* fil d'Ariane */
.path ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:14px auto 0;font-size:.84rem;color:var(--muted)}
.path li+li::before{content:"›";margin-right:4px;color:var(--gold)}
.path a{color:var(--muted)}

/* boutons */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0}
.btn{display:inline-block;background:var(--wine);color:#fff;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:999px;border:2px solid var(--wine);cursor:pointer;font:inherit;font-weight:700}
.btn:hover{background:var(--wine-d);border-color:var(--wine-d);color:#fff}
.btn-out{background:transparent;color:var(--wine)}
.btn-out:hover{background:var(--soft);color:var(--wine-d)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#2b1a05}
.btn-gold:hover{background:#9d7431;border-color:#9d7431;color:#fff}

/* médaille de note */
.medal{display:inline-flex;align-items:baseline;gap:1px;background:var(--wine-d);color:var(--gold-l);border-radius:999px;padding:3px 10px;font-family:var(--serif)}
.medal b{font-size:1.05rem}.medal small{font-size:.72rem;opacity:.8}
.medal-lg{padding:10px 18px}.medal-lg b{font-size:2rem}

/* accueil */
.hero{background:linear-gradient(180deg,var(--paper),var(--cream));border-bottom:1px solid var(--rule);padding:34px 0 10px}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center}
.hero .intro{font-size:1.08rem}
.hero-tool{background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--wine);border-radius:var(--rad);padding:20px;box-shadow:0 6px 24px rgba(74,18,38,.08)}
.hero-tool-h{font-family:var(--serif);font-weight:650;font-size:1.15rem;margin:.1em 0 .8em;color:var(--ink)}
.hero-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.hero-dims label{display:flex;align-items:center;gap:4px;font-weight:700;font-size:.9rem}
.hero-dims input{width:100%;min-width:0;padding:9px 6px;border:1px solid var(--rule);border-radius:8px;font:inherit;background:#fff}
.hero-tool .btn{width:100%}
.proofs{list-style:none;display:flex;flex-wrap:wrap;gap:12px 30px;padding:18px 16px;margin:18px auto 0;font-size:.92rem;color:var(--muted)}
.proofs b{font-family:var(--serif);font-size:1.25rem;color:var(--wine-d);margin-right:4px}
.three{list-style:none;counter-reset:q;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0}
.three li{counter-increment:q;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:18px}
.three li::before{content:counter(q);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold-l);color:var(--wine-d);font-family:var(--serif);font-weight:700;margin-bottom:8px}
.three b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.three span{display:block;margin:.3em 0}
.three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reads{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.reads li{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:14px 16px}
.reads span{display:block;color:var(--muted);font-size:.92rem}

/* blocs génériques */
.pagehead{max-width:860px}
.lede{background:var(--paper);border-left:4px solid var(--gold);padding:12px 16px;border-radius:0 var(--rad) var(--rad) 0;margin:.6em 0 1em}
.intro{font-size:1.04rem}
.box{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:16px 18px}
.box h2,.box h3{margin-top:0}.box h2::after{display:none}
.box-yes{border-top:4px solid var(--yes)}.box-no{border-top:4px solid var(--no)}
.box ul{padding-left:1.1em;margin:.4em 0}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.5em}
.twocol>div>h2:first-child{margin-top:.6em}
.figures{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0;padding:0}
.figures div{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:8px 12px;min-width:120px}
.figures dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.figures dd{margin:0;font-weight:700;color:var(--ink)}
.links{padding-left:1.1em}.links li{margin:.25em 0}
.pluses,.minuses{list-style:none;padding:0}
.pluses li,.minuses li{position:relative;padding-left:26px;margin:.5em 0}
.pluses li::before{content:"+";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--yes);color:#fff;font-weight:700;text-align:center;line-height:18px;font-size:.85rem}
.minuses li::before{content:"–";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--no);color:#fff;font-weight:700;text-align:center;line-height:17px;font-size:.85rem}
.warn{color:var(--no)}
.chips-h{font-weight:700;font-size:.86rem;color:var(--muted);margin:1em 0 .3em;text-transform:uppercase;letter-spacing:.08em}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips a{display:inline-block;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:6px 13px;text-decoration:none;font-size:.92rem;font-weight:600}
.chips a:hover{border-color:var(--wine)}
.chips small{color:var(--gold);font-weight:700;margin-left:3px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:5px;padding:0;margin:.4em 0}
.tags li{font-size:.76rem;background:var(--soft);color:var(--wine-d);padding:2px 8px;border-radius:4px;font-weight:600}

/* cartes étiquette */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.label-card{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column}
.label-card::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule-2);border-radius:6px;pointer-events:none}
.label-rank{position:absolute;top:10px;left:10px;z-index:1;background:var(--gold);color:#2b1a05;font-family:var(--serif);font-weight:700;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.label-pic{background:#fff;aspect-ratio:4/3;display:grid;place-items:center;padding:10px}
.label-pic img,.label-pic svg{max-height:100%;width:auto;object-fit:contain}
.label-pic svg{height:100%}
.label-txt{padding:12px 16px 14px;display:flex;flex-direction:column;flex:1}
.label-brand{margin:0;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.label-txt h3 a{text-decoration:none;color:var(--ink)}
.label-line{font-size:.9rem;margin:.3em 0}
.label-dims{font-size:.82rem;color:var(--muted);margin:0}
.label-foot{display:flex;justify-content:space-between;align-items:center;margin:auto 0 0;padding-top:8px}
.label-price{font-weight:700;color:var(--ink)}

/* tableaux */
.hscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad)}
.cellar-table{width:100%;border-collapse:collapse;font-size:.92rem}
.cellar-table th,.cellar-table td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--rule-2);vertical-align:top}
.cellar-table thead th{background:var(--wine-d);color:var(--gold-l);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.cellar-table tbody tr:nth-child(even){background:#fbf6ee}
.cellar-table td.num{white-space:nowrap}
.cellar-table .best{background:#e5f0e3;font-weight:700}
.techsheet{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);overflow:hidden}
.techsheet th,.techsheet td{padding:9px 14px;border-bottom:1px dashed var(--rule);text-align:left;vertical-align:top}
.techsheet th{width:46%;font-weight:600;color:var(--muted)}
.techsheet .src{font-size:.74rem;color:var(--gold);margin-left:4px}

/* fiche */
.sheet-head{display:grid;grid-template-columns:420px 1fr;gap:30px;margin-top:18px}
.sheet-pic{margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--rad);padding:16px;display:grid;place-items:center;align-self:start}
.sheet-pic svg{width:100%;height:auto}
.sheet-score{display:flex;align-items:center;gap:14px}
.dims-row{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:18px}
.dims-svg{width:100%;max-width:360px;height:auto}
.d-body{fill:var(--wine-d)}.d-glass{fill:#5b2a3a;opacity:.55}.d-side{fill:none;stroke:var(--wine-d);stroke-width:2}
.d-cote{stroke:var(--gold);stroke-width:1.5}.d-txt{font:600 11px var(--sans);fill:var(--ink)}
.bars{max-width:640px}
.bar{display:grid;grid-template-columns:170px 1fr 40px;gap:10px;align-items:center;margin-top:10px}
.bar-track{height:9px;background:var(--rule-2);border-radius:5px;overflow:hidden}
.bar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--wine),var(--gold))}
.bar+p{margin:2px 0 0}
.shops{margin:1em 0}
.shop-row{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:10px 14px;text-decoration:none;color:var(--text)}
.shop-row:hover{border-color:var(--wine)}
.shop-name{flex:1}.shop-cta{background:var(--wine);color:#fff;border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:700}
.pick{display:grid;grid-template-columns:180px 1fr;gap:20px;background:var(--paper);border:1px solid var(--gold-l);border-radius:var(--rad);padding:18px;margin:2em 0}
.pick-pic{background:#fff;display:grid;place-items:center;border-radius:8px}
.pick-name{font-family:var(--serif);font-size:1.3rem;font-weight:700;margin:.1em 0}
.pick-name a{text-decoration:none;color:var(--ink)}
.pick-row{display:flex;gap:12px;align-items:center}
.measure{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;background:var(--wine-d);color:#f3e6e9;border-radius:var(--rad);padding:20px 24px;margin:2.4em 0}
.measure svg{width:52px;height:52px;color:var(--gold-l)}
.measure h2{color:#fff;margin:0}.measure h2::after{display:none}
.measure p{margin:.3em 0 0}
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:8px;margin:.5em 0}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:700;color:var(--ink)}
.faq-a{padding:0 16px 12px}
.prose{max-width:780px}
.prose table{border-collapse:collapse;width:100%;background:var(--paper);font-size:.93rem}
.prose th,.prose td{border:1px solid var(--rule);padding:7px 10px;text-align:left}
.prose th{background:var(--soft)}
.toc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:12px 18px;margin:1em 0}
.toc ol{margin:.2em 0;padding-left:1.2em}
.signoff{display:flex;gap:14px;align-items:center;border-top:3px double var(--rule);margin-top:2.5em;padding-top:16px}
.signoff-mark{width:44px;height:44px;border-radius:50%;background:var(--wine-d);color:var(--gold-l);display:grid;place-items:center;font-family:var(--serif);font-weight:700;flex:none}
.byline{margin-top:1em}

/* duels */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vs-side{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:14px}
.vs-side h2{margin:.1em 0}.vs-side h2::after{display:none}
.duel-list{list-style:none;padding:0}.duel-list li{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:10px 14px;margin:.5em 0}

/* comparateur */
.cmp-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.cmp-sel select{width:100%;padding:9px;border:1px solid var(--rule);border-radius:8px;font:inherit;background:#fff}

/* outil */
.finder-form{display:grid;gap:14px;max-width:820px}
.step{border:1px solid var(--rule);background:var(--paper);border-radius:var(--rad);padding:14px 18px;margin:0}
.step legend{font-family:var(--serif);font-weight:650;font-size:1.08rem;color:var(--ink);padding:0 6px}
.step legend small{font-family:var(--sans);font-weight:400;color:var(--muted);font-size:.85rem}
.step-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--wine);color:#fff;font-size:.85rem;margin-right:8px}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.choice{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--rule);border-radius:8px;padding:9px 12px;cursor:pointer;background:#fff}
.choice:has(input:checked){border-color:var(--wine);background:var(--soft)}
.choice input{accent-color:var(--wine);margin-top:4px}
.dimfields{display:flex;flex-wrap:wrap;gap:14px}
.dimfields label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem}
.dimfields span{display:flex;align-items:center;gap:6px;font-weight:400}
.dimfields input{width:110px;padding:9px;border:1px solid var(--rule);border-radius:8px;font:inherit}
.results{margin-top:1.5em}
.hits{list-style:none;padding:0}
.hit{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad);padding:12px 14px 12px 50px;margin:.6em 0}
.hit .label-rank{top:12px;left:12px}
.hit img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
.hit p{margin:.15em 0}
.hit-name{font-family:var(--serif);font-weight:700;font-size:1.08rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* pied */
.foot{background:var(--wine-d);color:#e9d9dd;margin-top:60px;padding:36px 0 18px}
.foot a{color:#f6e8c9;text-decoration:none;display:block;margin:.25em 0;font-size:.92rem}
.foot a:hover{text-decoration:underline}
.foot .logo{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px}
.foot-h{color:var(--gold-l);font-weight:700;text-transform:uppercase;font-size:.76rem;letter-spacing:.12em;margin:1em 0 .3em}
.foot-grid section>.foot-h:first-child{margin-top:0}
.foot-inline a{display:inline-block;margin-right:10px}
.foot-base{border-top:1px solid rgba(255,255,255,.15);padding-top:14px;margin-top:22px;color:#c9b0b8}

@media (max-width:860px){
  .hero-grid,.sheet-head,.twocol,.three,.three-cols,.reads,.vs,.foot-grid,.dims-row{grid-template-columns:1fr}
  .pick{grid-template-columns:1fr}
  .measure{grid-template-columns:1fr;text-align:left}
  .cmp-pick{grid-template-columns:1fr}
  .bar{grid-template-columns:120px 1fr 36px}
  .sheet-pic{max-width:420px}
}
/* les enfants de grille ne doivent jamais imposer leur largeur minimale (débordement mobile) */
.sheet-head>*,.twocol>*,.dims-row>*,.hero-grid>*,.pick>*,.vs>*,.foot-grid>*,.three-cols>*,.reads>*{min-width:0}
.figures div{flex:1 1 140px}
.shop-row{flex-wrap:wrap}
@media (max-width:860px){
  .hero-grid,.sheet-head,.twocol,.three,.three-cols,.reads,.vs,.foot-grid,.dims-row,.pick{grid-template-columns:minmax(0,1fr)}
  .dims-svg{max-width:100%}
}
/* toute la carte mène à la fiche : le lien du nom s'étend sur la carte */
.label-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.label-card{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.label-card:hover{border-color:var(--wine);box-shadow:0 6px 20px rgba(74,18,38,.12)}
.label-card:hover h3 a{text-decoration:underline}
.label-rank{z-index:2}
/* photos : placement absolu, identique sur Safari iOS (qui calcule mal max-height:100% dans une grille à ratio fixe) */
.label-pic{position:relative;display:block}
.label-pic img{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);max-height:none;object-fit:contain}
.label-pic svg{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.sheet-pic img,.pick-pic img{width:100%;height:auto;object-fit:contain}
.hit img{flex:none;width:96px;height:96px}
/* contraste : le doré sert de décor ; le texte doré passe en teinte foncée (ratio > 4,5:1 sur crème) */
:root{--gold-text:#7f5a1c}
.overline,.label-brand,.chips small,.techsheet .src{color:var(--gold-text)}
/* prochaine étape en tête des sélections */
.nextstep{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--paper);border:1px solid var(--gold-l);border-radius:var(--rad);padding:12px 16px;margin:0 0 1.2em}
.nextstep p{margin:0;flex:1 1 260px}
.nextstep .btns{margin:0}