/* Carte des vins du Pressoir — pages au format de l'écran de l'iPad (658 × 877, mises à l'échelle à l'écran) */
:root {
  --w-ink: #33271f;
  --w-soft: #7a6655;
  --w-wine: #8f2a1e;
  --w-line: #cdbba3;
  --w-title: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
  --w-serif: "Cormorant Garamond", "Baskerville", Georgia, serif;
  --w-display: "Playfair Display", "Didot", Georgia, serif;
}

.wpage { background: #f7f2ee; position: relative; }
.wp {
  position: absolute; left: 0; top: 0; width: 658px; height: 877px;
  transform-origin: 0 0;
  background: #f7f2ee url(paper.jpg) 0 0 / 100% 100% no-repeat;
  color: var(--w-ink); font-family: var(--w-serif);
}
.wp-in { position: absolute; left: 66px; right: 66px; top: 58px; bottom: 56px; overflow: hidden; }
.wp-foot {
  position: absolute; left: 0; right: 0; bottom: 30px; text-align: center;
  font: italic 500 13px var(--w-serif); color: var(--w-soft); letter-spacing: .08em;
}
.wp-cover { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* Ouverture de rubrique */
.w-open { text-align: center; padding: 10px 0 4px; }
.w-open h1 {
  font: 400 50px/1 var(--w-title); text-transform: uppercase; letter-spacing: .01em;
  color: #3a3330; margin: 0; text-wrap: balance;
}
.w-orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px auto 4px; width: 70%; }
.w-orn::before, .w-orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--w-wine)); }
.w-orn::after { background: linear-gradient(90deg, var(--w-wine), transparent); }
.w-orn i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--w-wine); display: block; }
.w-note { font: italic 500 16px/1.3 var(--w-serif); color: var(--w-soft); margin: 4px 0 0; }
.w-intro { font: 500 15.5px/1.35 var(--w-serif); color: var(--w-ink); margin: 10px 18px 2px; }

/* Haut de page suivante */
.w-cont { text-align: center; font: 400 15px var(--w-title); letter-spacing: .14em; text-transform: uppercase; color: var(--w-soft); padding: 2px 0 6px; }

.w-h2 {
  font: 600 25px/1.1 var(--w-serif); color: var(--w-wine); letter-spacing: .02em;
  text-align: center; margin: 0; padding: 16px 0 6px;
}
.w-h2 small { font: italic 500 15px var(--w-serif); color: var(--w-soft); letter-spacing: 0; }
.w-h3 {
  font: 500 13px var(--w-title); letter-spacing: .16em; text-transform: uppercase; color: var(--w-soft);
  margin: 0; padding: 10px 0 3px 2px;
}

/* Ligne de vin */
.w-line {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  background: none; border: 0; padding: 4px 2px; margin: 0; text-align: left; cursor: pointer;
  font: 500 16.5px/1.22 var(--w-serif); color: var(--w-ink);
}
.w-line .nm { flex: 0 1 auto; min-width: 0; }
.w-line .nm b { font-weight: 700; }
.w-line .ex { font-style: italic; color: var(--w-soft); }
.w-line .ld { flex: 1 1 12px; border-bottom: 1px dotted #b9a68f; transform: translateY(-4px); min-width: 12px; }
.w-line .vt { font-style: italic; color: var(--w-soft); font-size: 15px; font-variant-numeric: lining-nums; }
.w-line .pr { font: 600 16.5px var(--w-serif); color: var(--w-wine); min-width: 44px; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.w-line:active { background: rgba(143,42,30,.07); }

/* Sommaire */
.w-toc { text-align: center; }
.w-toc h1 { font: 400 54px/1 var(--w-title); text-transform: uppercase; color: #3a3330; margin: 26px 0 0; }
.w-toc .w-note { margin-top: 6px; }
.w-toc ul { list-style: none; margin: 34px 40px 0; padding: 0; }
.w-toc li + li { margin-top: 4px; }
.w-toc button {
  display: flex; align-items: baseline; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer;
  padding: 10px 4px; font: 600 24px var(--w-serif); color: var(--w-wine); text-align: left;
}
.w-toc button .ld { flex: 1; border-bottom: 1px dotted #b9a68f; transform: translateY(-6px); }
.w-toc button .pg { font: italic 500 18px var(--w-serif); color: var(--w-soft); }
.w-toc .hint { font: italic 500 16px var(--w-serif); color: var(--w-soft); margin: 34px 30px 0; }

/* Dernière page */
.w-end { text-align: center; padding-top: 250px; }
.w-end img { width: 150px; height: auto; opacity: .9; }
.w-end p { font: italic 500 16px var(--w-serif); color: var(--w-soft); margin: 14px 0 0; }
.w-endnote { text-align: center; font: italic 500 14px var(--w-serif); color: var(--w-soft); padding-top: 18px; }

/* Fiche d'un vin */
#fiche {
  position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center;
  background: rgba(20,12,10,.72); padding: 20px;
}
#fiche.open { display: flex; }
.f-card {
  position: relative; width: min(760px, 100%); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #f7f2ee url(paper.jpg) center / cover; color: var(--w-ink); border-radius: 3px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); padding: 44px 46px 38px;
  display: grid; grid-template-columns: 130px 1fr; gap: 30px; align-items: start; font-family: var(--w-serif);
}
.f-photo { display: flex; justify-content: center; }
.f-photo img { width: 100%; max-width: 130px; height: auto; display: block; }
.f-txt { min-width: 0; }
.f-cat { font: 400 13px var(--w-title); letter-spacing: .16em; text-transform: uppercase; color: var(--w-soft); margin: 0; }
.f-txt h2 { font: 400 32px/1.08 var(--w-title); text-transform: uppercase; color: #3a3330; margin: 6px 0 0; text-wrap: balance; }
.f-origin { font: italic 500 18px var(--w-serif); color: var(--w-wine); margin: 6px 0 0; }
.f-row { margin-top: 14px; }
.f-row h3 { font: 500 12.5px var(--w-title); letter-spacing: .16em; text-transform: uppercase; color: var(--w-wine); margin: 0 0 3px; }
.f-row p { font: 500 17px/1.35 var(--w-serif); margin: 0; }
.f-prices { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--w-line); }
.f-price { display: flex; align-items: baseline; gap: 8px; font: 500 17px var(--w-serif); padding: 3px 0; }
.f-price .ld { flex: 1; border-bottom: 1px dotted #b9a68f; transform: translateY(-4px); }
.f-price b { color: var(--w-wine); font-weight: 700; }
.f-close {
  position: absolute; top: 12px; right: 14px; background: #33271f; color: #f7f2ee; border: 0; border-radius: 999px;
  font: 500 16px var(--w-serif); padding: 9px 16px; cursor: pointer;
}
@media (max-width: 560px) {
  .f-card { grid-template-columns: 1fr; padding: 54px 22px 26px; gap: 14px; }
  .f-photo img { max-width: 70px; }
}

/* Le livre ignore les touchers qui commencent sur un vin : le toucher ouvre la fiche, le glissé tourne la page (géré par l'app) */
.w-line *, .w-toc button * { pointer-events: none; }

/* Coup de cœur de Gil */
.w-heart { color: var(--w-wine); font-size: .9em; }
.f-pick { display: inline-block; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--w-wine); color: #f7f2ee;
  font: 400 12.5px var(--w-title); letter-spacing: .12em; text-transform: uppercase; }
.f-pick .w-heart { color: #f7f2ee; }