@import url('/assets/css/fonts.css');

/* =========================================================================
   PINAR — Carnet de degustation Mendoza
   Un carnet en papier chaux, trame de guarda pampa. Pas un dashboard.

   Le systeme de couleur porte du sens :
     terre cuite = Lujan de Cuyo / Agrelo / argile / chaleur / rondeur
     bleu andin  = Valle de Uco / altitude / calcaire / tension / fraicheur
   ========================================================================= */

:root {
  color-scheme: light;

  --paper:    #FBF8F3;
  --paper-2:  #F5F0E7;
  --paper-3:  #EDE6D9;
  --ink:      #191512;
  --ink-2:    #574E45;
  --ink-3:    #8B8076;
  --line:     #DFD6C6;
  --line-2:   #C9BDA8;

  --wine:     #6E1226;
  --lujan:    #9A4B2F;
  --uco:      #1F3350;
  --suisse:   #7A2233;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --gut: clamp(20px, 5.5vw, 34px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --tier: var(--wine);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* Grain de papier : tres discret, mais c'est lui qui enleve le cote "ecran". */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

::selection { background: var(--tier); color: var(--paper); }

/* ---------------------------------------------------------------- motifs */

.guarda {
  height: 14px;
  background-color: var(--tier);
  -webkit-mask-image: url('/assets/svg/guarda.svg');
  mask-image: url('/assets/svg/guarda.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  opacity: .5;
}

.chakana {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url('/assets/svg/chakana.svg');
  mask-image: url('/assets/svg/chakana.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: -.12em;
}

/* ------------------------------------------------------------ typographie */

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 96;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--tier);
}

.lead {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 20;
  font-size: clamp(17px, 4.6vw, 21px);
  line-height: 1.38;
  color: var(--ink-2);
  margin: 0;
}

.mono { font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------------ shell */

#app { position: relative; z-index: 2; }

.slide {
  min-height: 100dvh;
  padding: calc(var(--safe-t) + 62px) var(--gut) calc(var(--safe-b) + 96px);
  display: flex;
  flex-direction: column;
}

.slide > * { animation: rise .5s cubic-bezier(.22,.68,.24,1) backwards; }
.slide > *:nth-child(1) { animation-delay: .02s; }
.slide > *:nth-child(2) { animation-delay: .08s; }
.slide > *:nth-child(3) { animation-delay: .14s; }
.slide > *:nth-child(4) { animation-delay: .2s; }
.slide > *:nth-child(5) { animation-delay: .26s; }
.slide > *:nth-child(n+6) { animation-delay: .32s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- barre du haut */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: calc(var(--safe-t) + 9px) var(--gut) 0;
  background: linear-gradient(var(--paper) 62%, transparent);
  pointer-events: none;
}

.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.topbar__chapter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__chapter b { color: var(--tier); font-weight: 500; }

/* Le poncho qui se tisse : la barre de progression EST le motif. */
.weave {
  display: flex;
  gap: 2px;
  height: 10px;
  pointer-events: none;
}
.weave__cell {
  flex: 1;
  background: var(--line);
  border-radius: 1px;
  transition: background .55s ease, opacity .55s ease;
  opacity: .55;
}
.weave__cell.is-done { opacity: 1; }
.weave__cell.is-now  { opacity: 1; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px currentColor; }
.weave__cell[data-tier='lujan']  { background: var(--lujan); }
.weave__cell[data-tier='uco']    { background: var(--uco); }
.weave__cell[data-tier='suisse'] { background: var(--suisse); }
.weave__cell[data-tier='mixte']  { background: linear-gradient(90deg, var(--lujan), var(--uco)); }
.weave__cell[data-tier='none']   { background: var(--line-2); }

/* --------------------------------------------------------- barre du bas */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gut) calc(var(--safe-b) + 12px);
  background: linear-gradient(transparent, var(--paper) 42%);
}

.pill {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 11px 15px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, color .2s, border-color .2s;
}
.pill:active { transform: translateY(1px); }
.pill--solid { background: var(--tier); border-color: var(--tier); color: var(--paper); }
.pill--ghost { border-style: dashed; color: var(--ink-2); }
.pill[disabled] { opacity: .4; pointer-events: none; }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tier);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier) 55%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.live-dot--off { background: var(--ink-3); animation: none; }

/* Bandeau "l'hote est passe a la suite" */
.recall {
  position: fixed;
  left: var(--gut); right: var(--gut);
  bottom: calc(var(--safe-b) + 74px);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  box-shadow: 0 12px 30px -12px rgba(25,21,18,.6);
  animation: rise .35s cubic-bezier(.22,.68,.24,1);
}
.recall p { margin: 0; font-size: 13.5px; line-height: 1.35; flex: 1; }
.recall b { font-family: var(--display); font-weight: 600; }
.recall button {
  appearance: none; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 12px; border-radius: 999px;
  min-height: 40px; white-space: nowrap;
}

/* ------------------------------------------------------------ slide: cover */

.cover {
  justify-content: center;
  text-align: center;
  gap: 26px;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--paper-2), transparent 62%);
}
.cover h1 {
  font-size: clamp(58px, 19vw, 108px);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-weight: 400;
  letter-spacing: -.035em;
}
.cover__mark { color: var(--wine); font-size: 30px; opacity: .85; }
.cover__sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-3);
}

.join { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.join input {
  font-family: var(--display);
  font-size: 22px;
  text-align: center;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  min-height: 56px;
}
.join input:focus { outline: 2px solid var(--wine); outline-offset: 2px; }
.join__hint { font-size: 13px; color: var(--ink-3); margin: 0; }

.guests { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.guests span {
  font-family: var(--mono); font-size: 11px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink-2);
}

/* ---------------------------------------------------------- slide: chapter */

.chapter {
  justify-content: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.chapter h1 {
  font-size: clamp(40px, 12vw, 72px);
  white-space: pre-line;
  font-weight: 400;
}
.chapter .lead { white-space: pre-line; font-size: clamp(18px, 5vw, 24px); }
.chapter__deco {
  position: absolute;
  inset: auto -30% -6% -30%;
  height: 190px;
  opacity: .1;
  background-color: var(--tier);
  -webkit-mask-image: url('/assets/svg/guarda.svg');
  mask-image: url('/assets/svg/guarda.svg');
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 108px auto;
  mask-size: 108px auto;
  pointer-events: none;
}

/* ------------------------------------------------------- slide: contenu */

.content h1 { font-size: clamp(30px, 8.4vw, 46px); margin-bottom: 4px; }
.content .lead { margin-top: 10px; }

.block { margin-top: 26px; }
.block p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }

.block__title {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--tier); margin: 0 0 12px;
  display: flex; align-items: center; gap: 9px;
}
.block__title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

ul.points { list-style: none; margin: 0; padding: 0; }
ul.points li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.45;
}
ul.points li::before {
  content: '';
  position: absolute; left: 0; top: 16px;
  width: 9px; height: 9px;
  background-color: var(--tier);
  -webkit-mask-image: url('/assets/svg/chakana.svg');
  mask-image: url('/assets/svg/chakana.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .65;
}
ul.points li:last-child { border-bottom: 0; }

blockquote {
  margin: 26px 0 0;
  padding: 18px 0 18px 20px;
  border-left: 3px solid var(--tier);
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  font-size: clamp(19px, 5.2vw, 25px);
  line-height: 1.28;
  color: var(--ink);
}

.warn {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.figure { margin: 26px -6px 0; }
.figure svg { width: 100%; height: auto; display: block; }

/* -------------------------------------------------------- accordeons */

details.acc {
  border-top: 1px solid var(--line);
  padding: 0;
}
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 34px 16px 0;
  position: relative;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.005em;
  min-height: 44px;
  display: flex;
  align-items: center;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: '';
  position: absolute; right: 4px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -5px;
  border-right: 1.5px solid var(--tier);
  border-bottom: 1.5px solid var(--tier);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
details.acc[open] > summary::after { transform: rotate(-135deg); }
details.acc[open] > summary { color: var(--tier); }
.acc__body { padding: 0 0 18px; animation: rise .3s ease backwards; }
.acc__body p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.acc__body p:last-child { margin-bottom: 0; }
.acc__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
  display: block; margin: 14px 0 4px;
}

/* ------------------------------------------------------ slide: vin aveugle */

.blind { gap: 0; }
.blind__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px 0 22px;
  min-height: 34dvh;
}
.blind__halo {
  position: absolute;
  width: 74%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper-2) 0%, transparent 68%);
}
.bottle-shadow {
  position: relative;
  height: min(34dvh, 260px);
  width: 76px;
  filter: brightness(0) saturate(0);
  opacity: .88;
}
.bottle-shadow--svg { color: var(--ink); }
.blind__q {
  position: absolute;
  font-family: var(--display);
  font-size: clamp(80px, 30vw, 160px);
  color: var(--tier);
  opacity: .07;
  pointer-events: none;
  font-variation-settings: 'WONK' 1;
}

.blind h1 { font-size: clamp(26px, 7.5vw, 38px); }
.blind__lead { margin-top: 10px; }

.factgrid {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.fact {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.fact dt {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
  flex: 0 0 34%;
  line-height: 1.5;
}
.fact dd {
  margin: 0; flex: 1;
  font-size: 15px; line-height: 1.45;
}
.fact dd.num { font-family: var(--mono); font-size: 14px; }
.fact dd.void { color: var(--ink-3); font-family: var(--mono); }

/* ------------------------------------------------------ slide: vin devoile */

.reveal__hero {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 18px;
  align-items: center;
}
.reveal__bottle {
  height: 230px;
  width: 118px;
  display: block;
  animation: emerge .9s cubic-bezier(.2,.7,.2,1) backwards;
}
.reveal__bottle svg,
.bottle-shadow svg {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
@keyframes emerge {
  from { opacity: 0; filter: brightness(0); transform: translateY(8px) scale(.96); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: none; transform: none; }
}
.reveal__bottle--svg { color: var(--tier); }
/* Les photos produit ont un fond blanc : multiply le fond dans le papier. */
.reveal__bottle--photo { object-fit: contain; mix-blend-mode: multiply; }

.reveal__id { min-width: 0; }
.reveal h1 { font-size: clamp(25px, 6.6vw, 36px); }
.reveal__producer {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 8px 0 0;
}
.vintage-badge {
  display: inline-block;
  font-family: var(--display);
  font-variation-settings: 'WONK' 1, 'opsz' 48;
  font-size: 30px;
  line-height: 1;
  color: var(--tier);
  margin-bottom: 6px;
}

.tierchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--tier);
  color: var(--tier);
  margin-top: 10px;
}
.tierchip::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px;
  background: var(--tier);
}

/* notes */
.scores {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.score {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 96px;
  flex: 1 1 auto;
  background: var(--paper-2);
}
.score__src {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); display: block;
}
.score__val {
  font-family: var(--display); font-size: 26px; line-height: 1.1;
  font-variation-settings: 'WONK' 1;
}
.score__val small { font-size: 13px; color: var(--ink-3); font-family: var(--mono); }
.score__meta { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.score--top { background: var(--tier); border-color: var(--tier); color: var(--paper); }
.score--top .score__src, .score--top .score__meta { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.score--top .score__val small { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.score--void .score__val { color: var(--ink-3); }

/* jauges de profil, rendues en tissage */
.gauges { margin-top: 26px; display: grid; gap: 10px; }
.gauge { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; }
.gauge__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.gauge__track { display: flex; gap: 3px; }
.gauge__unit {
  flex: 1; height: 9px; border-radius: 1px;
  background: var(--line);
}
.gauge__unit.on { background: var(--tier); }

/* cepages */
.grapes { margin-top: 26px; }
.grape { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.grape__pct { font-family: var(--mono); font-size: 14px; color: var(--tier); flex: 0 0 48px; }
.grape__name { font-size: 15.5px; }

.dato {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  position: relative;
}
.dato::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background-color: var(--tier);
  -webkit-mask-image: url('/assets/svg/guarda.svg');
  mask-image: url('/assets/svg/guarda.svg');
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
  opacity: .5;
}
.dato ul { margin: 0; padding-left: 18px; }
.dato li { font-size: 15px; line-height: 1.55; margin-bottom: 8px; color: var(--ink-2); }
.dato li:last-child { margin-bottom: 0; }

/* note perso */
.rating { margin-top: 26px; padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; }
.rating__q { font-family: var(--display); font-size: 19px; margin: 0 0 14px; font-variation-settings: 'WONK' 1; }
.stars { display: flex; justify-content: center; gap: 6px; }
.star {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
}
.star i {
  display: block; width: 24px; height: 24px;
  background-color: var(--line-2);
  -webkit-mask-image: url('/assets/svg/chakana.svg');
  mask-image: url('/assets/svg/chakana.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background .18s, transform .18s;
}
.star.on i { background-color: var(--tier); transform: scale(1.12); }
.rating__done { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 12px 0 0; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------ slide: vote */

.vote h1 { font-size: clamp(30px, 8.4vw, 44px); }
.voteq { margin-top: 26px; }
.voteq__label { font-family: var(--display); font-size: 19px; margin: 0 0 10px; font-variation-settings: 'WONK' 1; }
.voteq__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.voteopt {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 12px;
  padding: 14px 10px;
  min-height: 58px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--ink);
  display: grid; gap: 3px;
  transition: background .2s, border-color .2s, color .2s;
}
.voteopt small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.voteopt[data-side='a'].on { background: var(--lujan); border-color: var(--lujan); color: var(--paper); }
.voteopt[data-side='b'].on { background: var(--uco); border-color: var(--uco); color: var(--paper); }
.voteopt.on small { color: color-mix(in srgb, var(--paper) 72%, transparent); }

.tally { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin-top: 10px; background: var(--line); }
.tally__a, .tally__b {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--paper);
  transition: flex-basis .6s cubic-bezier(.22,.68,.24,1);
  min-width: 0;
}
.tally__a { background: var(--lujan); }
.tally__b { background: var(--uco); }

/* ------------------------------------------------------- slide: duel table */

.duel { --tier: var(--wine); }
.duelrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.duelrow__crit {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.duelrow__a, .duelrow__b { font-size: 15px; line-height: 1.35; }
.duelrow__a { color: var(--lujan); font-weight: 600; }
.duelrow__b { color: var(--uco); font-weight: 600; }

.duelhead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 26px; padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.duelhead div { font-family: var(--display); font-size: 17px; font-variation-settings: 'WONK' 1; }
.duelhead div:first-child { color: var(--lujan); }
.duelhead div:last-child { color: var(--uco); }
.duelhead small { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .1em; }

/* -------------------------------------------------------- slide: timeline */

.tl { margin-top: 22px; }
.tlyear {
  border-top: 1px solid var(--line);
}
.tlyear:last-child { border-bottom: 1px solid var(--line); }
.tlyear > summary {
  list-style: none; cursor: pointer;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  min-height: 44px;
}
.tlyear > summary::-webkit-details-marker { display: none; }
.tlyear__y {
  font-family: var(--display); font-size: 26px; line-height: 1;
  font-variation-settings: 'WONK' 1;
}
.tlyear__h { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.tlyear__dots { display: flex; gap: 4px; }
.tdot { width: 9px; height: 9px; border-radius: 2px; background: var(--line-2); }
.tdot[data-t='fraiche'] { background: var(--uco); }
.tdot[data-t='moyenne'] { background: var(--ink-3); }
.tdot[data-t='chaude']  { background: var(--lujan); }
.tlyear--has .tlyear__y { color: var(--wine); }
.tlyear--has > summary { background: linear-gradient(90deg, color-mix(in srgb, var(--wine) 7%, transparent), transparent 55%); }

/* --------------------------------------------------------- slide: finale */

.podium { margin-top: 24px; }
.podium__row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.podium__rank { font-family: var(--display); font-size: 22px; color: var(--tier); font-variation-settings: 'WONK' 1; }
.podium__name { font-size: 15.5px; font-weight: 600; }
.podium__name small { display: block; font-weight: 400; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.podium__val { font-family: var(--mono); font-size: 15px; color: var(--tier); }

/* ------------------------------------------------------------ menu lineup */

.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper);
  overflow-y: auto;
  padding: calc(var(--safe-t) + 22px) var(--gut) calc(var(--safe-b) + 30px);
  animation: sheetin .3s cubic-bezier(.22,.68,.24,1);
}
@keyframes sheetin { from { opacity: 0; transform: translateY(16px); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sheet h2 { font-size: 30px; }

.lineup__item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  cursor: pointer;
  min-height: 60px;
  font-family: inherit;
  color: var(--ink);
}
.lineup__n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.lineup__name { font-family: var(--display); font-size: 18px; line-height: 1.15; font-variation-settings: 'WONK' 1; }
.lineup__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.lineup__item[data-locked='1'] { opacity: .38; pointer-events: none; }
.lineup__bar { width: 4px; height: 34px; border-radius: 2px; background: var(--line-2); }
.lineup__bar[data-tier='lujan'] { background: var(--lujan); }
.lineup__bar[data-tier='uco'] { background: var(--uco); }
.lineup__bar[data-tier='suisse'] { background: var(--suisse); }
.lineup__bar[data-tier='mixte'] { background: linear-gradient(var(--lujan), var(--uco)); }

/* ------------------------------------------------------------- utilitaires */

.hidden { display: none !important; }
.center { text-align: center; }
.spacer { flex: 1; min-height: 18px; }
.muted { color: var(--ink-3); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 78px);
  transform: translateX(-50%);
  z-index: 70;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  padding: 10px 16px; border-radius: 999px;
  animation: rise .3s ease;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .slide { max-width: 660px; margin: 0 auto; }
  .topbar, .dock { max-width: 660px; left: 50%; transform: translateX(-50%); }
  .recall { max-width: 640px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100% - 2 * var(--gut)); }
  .sheet { max-width: 660px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

[hidden] { display: none !important; }


/* =========================================================================
   Fiche dévoilée — hiérarchie demandée par Alex : photo, lieu, année,
   cépages et les deux notes tiennent dans le premier écran. Tout le reste
   descend sous le pli, dans une FAQ qu'on déplie si on en a envie.
   ========================================================================= */

.reveal__hero { align-items: start; }

.grapeline { margin-top: 12px; display: grid; gap: 3px; }
.grapeline span {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-2);
}
.grapeline b {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--tier);
  font-weight: 500;
}

/* Les deux notes qui comptent, côte à côte, lisibles à bout de bras. */
.scoreduo {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bigscore {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px 14px 11px;
  background: var(--paper-2);
  min-width: 0;
}
.bigscore__src {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bigscore__val {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48;
  font-size: 34px;
  line-height: 1.05;
  margin-top: 2px;
  white-space: nowrap;
}
.bigscore__val small {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
}
.bigscore__meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 1px;
}
.bigscore--void .bigscore__val { color: var(--ink-3); }
.bigscore--cent {
  background: var(--tier);
  border-color: var(--tier);
  color: var(--paper);
}
.bigscore--cent .bigscore__src,
.bigscore--cent .bigscore__meta,
.bigscore--cent .bigscore__val small {
  color: color-mix(in srgb, var(--paper) 74%, transparent);
}

.critline {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* Le lieu exact, du plus précis au plus large : « ça vient d'où » réglé
   sans traverser un tableau. */
.idcard {
  margin-top: 20px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.idcard__place { display: grid; gap: 2px; }
.idcard__place b {
  font-family: var(--display);
  font-variation-settings: 'WONK' 1, 'opsz' 24;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
}
.idcard__place span { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.idcard__num {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.idcard__num span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.idcard__soil { text-transform: none; letter-spacing: 0; }

/* Le pli. */
.faq { margin-top: 30px; }
.faq__title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tier);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.faq__title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.faq details.acc > summary { font-size: 15.5px; font-weight: 600; }

.blind__chips { margin-top: 16px; }
.blind__foot {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-3);
}