/* La Cave du Coteau, caviste. Style "Cave".
   Le coteau est tracé au trait fin, chaque vin y a sa parcelle, et les
   étiquettes se retournent pour montrer leur dos. */

@font-face {
  font-family: 'Italiana';
  src: url('../fonts/italiana-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope Variable';
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --lie: #2A0F17;
  --lie-clair: #3B1722;
  --parchemin: #EADFC8;
  --parchemin-72: #A79E8D;    /* 4.95:1 sur la lie */
  --or: #B8913A;
  --or-clair: #D4AC56;        /* petit texte sur la lie, 7.1:1 */
  --filet: rgba(234, 223, 200, .2);
  --feutre: cubic-bezier(.3, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: 0 clamp(1.25rem, 5vw, 4rem) 8rem;
  background: var(--lie);
  color: var(--parchemin);
  font-family: 'Manrope Variable', system-ui, sans-serif;
  font-size: clamp(.95rem, .92rem + .2vw, 1.05rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--or); color: var(--lie); }

.caveau { max-width: 76rem; margin-inline: auto; }

/* ── Entête ───────────────────────────────────────────────────────────── */

.entete { padding-block: clamp(3rem, 9vh, 6rem) clamp(2rem, 5vh, 3.5rem); text-align: center; }
.sur-titre {
  margin: 0 0 1.5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.enseigne {
  margin: 0;
  font-family: 'Italiana', Didot, serif;
  font-size: clamp(2.6rem, 10vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.regle-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  margin: 1.75rem auto 0;
  color: var(--or);
}
.regle-or::before, .regle-or::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.regle-or span { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; }
.intro {
  max-width: 48ch;
  margin: 2rem auto 0;
  color: var(--parchemin-72);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
}

/* ── Le coteau ────────────────────────────────────────────────────────── */

section { padding-top: clamp(3rem, 8vh, 5.5rem); }
.section-h {
  margin: 0 0 1.25rem;
  font-family: 'Italiana', Didot, serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.section-p { max-width: 54ch; margin: 0 0 2.25rem; color: var(--parchemin-72); }

.coteau { width: 100%; height: auto; overflow: visible; }
.coteau .courbe { fill: none; stroke: rgba(234, 223, 200, .3); stroke-width: 1.2; }
.coteau .riviere { fill: none; stroke: var(--or); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .6; }
.coteau .parcelle { fill: rgba(184, 145, 58, .1); stroke: var(--or); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.coteau .point { fill: var(--or); }
.coteau .numero { fill: var(--lie); font-family: 'Manrope Variable', sans-serif; font-size: 13px; font-weight: 800; text-anchor: middle; }
.coteau .lieu { fill: var(--parchemin-72); font-family: 'Manrope Variable', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
/* Le coteau se dessine une fois, quand il entre dans l'écran. */
.js .vu .coteau .riviere, .js .vu .coteau .parcelle { animation: tracer 1.8s var(--feutre) forwards; }
.js .vu .coteau .parcelle:nth-of-type(2) { animation-delay: .25s; }
.js .vu .coteau .parcelle:nth-of-type(3) { animation-delay: .45s; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
html:not(.js) .coteau .riviere, html:not(.js) .coteau .parcelle { stroke-dashoffset: 0; }

/* ── Les étiquettes qui se retournent ─────────────────────────────────── */

.etiquettes { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 44rem) { .etiquettes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .etiquettes { grid-template-columns: repeat(3, 1fr); } }

.retourner {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1400px;
}
.retourner:focus-visible { outline: 2px solid var(--or); outline-offset: 5px; }

.etiquette {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .9s var(--feutre);
}
/* Au survol sur un vrai pointeur, et au clic partout. */
@media (hover: hover) and (pointer: fine) {
  .retourner:hover .etiquette { transform: rotateY(180deg); }
}
.retourner[aria-pressed="true"] .etiquette { transform: rotateY(180deg); }

.face {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 19rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--or);
  backface-visibility: hidden;
}
.face-avant { background: var(--parchemin); color: var(--lie); text-align: center; align-items: center; }
.face-dos {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--lie-clair);
  color: var(--parchemin);
}

.domaine {
  margin: 0;
  font-family: 'Italiana', Didot, serif;
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.appellation {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7A5E1F;
}
.millesime {
  margin: .75rem 0;
  font-family: 'Italiana', Didot, serif;
  font-size: 2.6rem;
  line-height: 1;
}
.trait-avant { width: 3rem; height: 1px; margin: .25rem auto; background: rgba(42, 15, 23, .35); }
.prix-avant { margin: auto 0 0; font-size: 1.3rem; font-weight: 700; }
.indice {
  margin: .7rem 0 0;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(42, 15, 23, .68);   /* 4.84:1 sur le parchemin */
}

.face-dos h3 {
  margin: 0 0 .9rem;
  font-family: 'Italiana', Didot, serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.face-dos dl { margin: 0; }
.face-dos dl div {
  display: flex;
  gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--filet);
  font-size: .85rem;
}
.face-dos dt { color: var(--parchemin-72); }
.face-dos dd { margin: 0 0 0 auto; text-align: right; font-weight: 600; }
.face-dos p { margin: .9rem 0 0; font-size: .85rem; color: var(--parchemin-72); }

/* Sans JavaScript, les deux faces se lisent l'une sous l'autre. */
html:not(.js) .etiquette { transform: none; }
html:not(.js) .face { backface-visibility: visible; min-height: 0; }
html:not(.js) .face-dos { position: static; transform: none; border-top: 0; }

/* ── La cave ──────────────────────────────────────────────────────────── */

.cave-grille { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 48rem) { .cave-grille { grid-template-columns: 1fr 1fr; } }
.cave-grille p { margin: 0 0 1rem; max-width: 46ch; }
.cave-grille a { color: var(--or-clair); text-underline-offset: .25em; }
.horaires { margin: 0; }
.horaire { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--filet); }
.horaire dt { width: 10ch; font-weight: 600; }
.horaire dd { margin: 0 0 0 auto; color: var(--parchemin-72); }
.horaire.ferme dd { color: var(--or-clair); }

.cave-grille .reserver {
  display: inline-block;
  margin-top: .8rem;
  padding: .9rem 2.1rem;
  border: 1px solid var(--or);
  background: var(--or);
  color: var(--lie);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .5s var(--feutre), color .5s var(--feutre);
}
.cave-grille .reserver:hover, .cave-grille .reserver:focus-visible { background: transparent; color: var(--or-clair); }
.reserver:focus-visible { outline: 2px solid var(--parchemin); outline-offset: 3px; }

.pied {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-size: .8rem;
  color: var(--parchemin-72);
}

/* ── Révélation : feutrée ─────────────────────────────────────────────── */

.js .rv { opacity: 0; transform: translateY(14px); animation: secours 1s var(--feutre) 2.8s forwards; }
.js .rv.vu {
  opacity: 1;
  transform: none;
  animation: none;
  transition: opacity 1.2s var(--feutre) var(--retard, 0ms), transform 1.2s var(--feutre) var(--retard, 0ms);
}
@keyframes secours { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.vu { opacity: 1; transform: none; transition: none; animation: none; }
  .etiquette { transition: none; }
  .js .vu .coteau .riviere, .js .vu .coteau .parcelle { animation: none; stroke-dashoffset: 0; }
}

/* ── Bandeau Webot ────────────────────────────────────────────────────────
   Identique sur toutes les démos, volontairement neutre pour rester lisible
   quel que soit le style derrière. Police système : elle ne compte pas dans
   les deux familles de la démo. */

.webot-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 10;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(16, 16, 18, .92);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
@supports (backdrop-filter: blur(8px)) {
  .webot-bar { background: rgba(16, 16, 18, .78); backdrop-filter: blur(10px); }
}
.webot-bar p { margin: 0; color: rgba(255, 255, 255, .78); }
.webot-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.webot-bar a:hover { border-bottom-color: #fff; }
.webot-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 34rem) {
  .webot-bar { top: .75rem; bottom: auto; gap: .75rem; padding: .5rem .9rem; font-size: .75rem; }
}