/* =====================================================================
   Café du Rond-Point — Proposition 21 · « Graphite & cobalt »
   Reprend la direction artistique de la proposition 13 (porcelaine /
   graphite / cobalt, Italiana + Sora) dans une version révisée.
   Dossier totalement autonome : aucun code partagé avec les autres
   propositions ni avec principal.html.
   ===================================================================== */

:root {
  /* Surfaces claires */
  --porcelain:   #ECEEF1;
  --porcelain-2: #E3E6EB;
  --paper:       #F6F7F9;

  /* Surfaces sombres */
  --ink:      #1B1E24;
  --slate:    #2A2E36;
  --slate-2:  #20242B;

  /* Accent */
  --cobalt:   #3E5AA0;
  --cobalt-2: #6E8BD4;   /* variante claire — usage sur fond sombre */
  --cobalt-soft: rgba(62, 90, 160, .40);
  --awning-a: rgba(19, 23, 31, .98);
  --awning-b: rgba(48, 75, 145, .98);

  /* Texte */
  --muted:      #545B66;              /* sur porcelaine — 5.7:1 */
  --on-dark:    rgba(236, 238, 241, .82);
  --on-dark-2:  rgba(236, 238, 241, .62);

  /* Filets */
  --line:   rgba(62, 90, 160, .22);
  --line-2: rgba(27, 30, 36, .14);
  --line-d: rgba(236, 238, 241, .18);

  --display: "Italiana", Didot, Georgia, "Times New Roman", serif;
  --wordmark: "Lora", Georgia, "Times New Roman", serif;
  --sans:    "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-eyebrow: .75rem;
  --t-lead: clamp(1.12rem, 1rem + .7vw, 1.45rem);
  --t-h3:   clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  --t-sec:  clamp(2rem, 1.4rem + 2.8vw, 3.8rem);
  --t-hero: clamp(2.6rem, 1.6rem + 5.4vw, 6rem);

  --pad:  clamp(4.5rem, 3.2rem + 5.5vw, 9rem);
  --wrap: 1140px;
  --hdr-wrap: 1240px;
  --hdr:  82px;
  /* Hauteur reellement occupee par l'en-tete fixe, mesuree a l'execution
     (il se replie sur plusieurs lignes selon la largeur). Sert uniquement
     a decaler les ancres. Repli sur --hdr si le script ne tourne pas. */
  --hdr-real: var(--hdr);
  --awning-h: 56px;
  /* Hauteur de l'en-tête au repos : la barre se range SOUS le store. */
  --hdr-rest: calc(var(--hdr) + var(--awning-h) + 24px);
  --awning-stripe: 30px;
  --awning-scallop: 14px;
  /* --- Jetons repris du menu imprimé (Menu.pdf) --- */
  --menu-paper: #F8F7F7;   /* le blanc chaud du papier du client */
  --menu-ink:   #14161A;   /* son noir, adouci pour l'écran */
  /* Repères de carte — valeurs reprises du projet de référence (copiedeCafe) :
     --success 152 45% 34%, --accent 226 45% 93%, --border 220 11% 84%.
     Seul le vert est assombri (34% → 30% de luminosité, teinte inchangée) :
     à 34% il tombe à 4.07:1 sur le fond du badge, sous le seuil AA. */
  --tag-vert:   hsl(152 45% 30%);
  --tag-bleu:   #2D4395;
  --tag-fond:   hsl(226 45% 93%);
  --tag-bord:   hsl(220 11% 84%);
  --tag-gris:   #5D636F;
  --menu-ink-2: #5C616B;   /* descriptions et mentions */
  --font-menu:  "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-price: "Poppins", system-ui, -apple-system, sans-serif;
  --font-note:  "Cormorant Garamond", Garamond, Georgia, serif;

  /* Empilement — une échelle unique, du fond vers l'avant. Le menu mobile
     passe SOUS l'en-tête (49 < 50) : c'est voulu, le bouton de fermeture
     vit dans la barre et doit rester cliquable. */
  --z-hero-video:   -2;
  --z-hero-veil:    -1;
  --z-raise:         1;
  --z-awning:        2;
  --z-hero-content:  3;
  --z-hero-controls: 4;
  --z-sticky-tools: 40;
  --z-menu-overlay: 49;
  --z-header:       50;
  --z-mobile-bar:   60;
  --z-skip:        100;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

* { margin: 0; }

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

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.8;
  color: var(--ink);
  background: var(--porcelain);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
em { font-style: italic; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .005em;
  text-wrap: balance;
}

/* `pretty` ne rééquilibre pas tout le bloc comme `balance` : il se contente
   d'empêcher le mot orphelin sur la dernière ligne. C'est ce qu'on veut sur
   du texte courant, où `balance` serait coûteux et trop interventionniste. */
p { text-wrap: pretty; }

/* Les enfants de grille ne doivent jamais imposer leur largeur intrinsèque :
   c'est la seule cause de débordement horizontal sur mobile. */
.wrap,
section,
article,
figure,
form,
[class$="-grid"],
[class$="-cols"],
[class$="-inner"],
[class$="-text"],
[class$="-info"],
[class$="-main"] { min-width: 0; }

.wrap {
  width: min(100% - 2.4rem, var(--wrap));
  margin-inline: auto;
}

/* Ancres : l'en-tête est fixe, on décale la cible du défilement. */
[id] { scroll-margin-top: calc(var(--hdr-real) + 12px); }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--porcelain);
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .9rem 1.3rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Éléments typographiques partagés ---------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  color: var(--cobalt);
  margin-bottom: 1.1rem;
}
.eyebrow-center { text-align: center; }
.eyebrow-cobalt { color: var(--cobalt-2); }

.sec-title { font-size: var(--t-sec); }
.sec-title em { font-style: italic; }

.lead {
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.45;
}

.note {
  font-family: var(--sans);
  font-size: .85rem;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  margin-top: 2rem;
}

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 1.4rem auto;
}
.rule span {
  height: 1px;
  width: clamp(40px, 12vw, 120px);
  background: linear-gradient(90deg, transparent, var(--cobalt-soft));
}
.rule span:last-child { background: linear-gradient(90deg, var(--cobalt-soft), transparent); }
.rule i {
  width: 6px; height: 6px;
  background: var(--cobalt);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 1.05rem 1.9rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
/* Retour au clic : sur mobile il n'y a pas de survol, l'appui est le seul
   accusé de réception que reçoit l'utilisateur. */
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn-lg { padding: 1.15rem 2.1rem; }
.btn-sm { padding: .7rem 1.1rem; font-size: .68rem; min-height: 44px; }
.btn-full { width: 100%; }

.btn-cobalt { background: var(--cobalt); color: var(--porcelain); }
.btn-cobalt:hover { background: #32498A; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--cobalt-soft); }
.btn-outline:hover { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }

.btn-outline-light { background: transparent; color: var(--porcelain); border-color: rgba(236, 238, 241, .5); }
.btn-outline-light:hover { background: var(--porcelain); color: var(--slate); border-color: var(--porcelain); }

/* ---------- En-tête ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  /* .hdr-inner et le blason animent leur hauteur au défilement. L'en-tête
     étant fixe, la page ne se remet pas en page — mais le sous-arbre, si.
     `contain` le garantit au navigateur et borne le recalcul à la barre.
     Sûr ici : .menu-overlay et .awning sont des frères, hors du <header>. */
  contain: layout;
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.hdr.is-scrolled {
  background: rgba(236, 238, 241, .92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.hdr-inner {
  width: min(100% - 2.4rem, var(--hdr-wrap));
  margin-inline: auto;
  height: var(--hdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: height .5s var(--ease), padding-top .5s var(--ease);
}

/* Le store est l'auvent de la maison : au repos, tout l'en-tête vient se
   ranger DESSOUS. Sans cela le blason, le nom et la navigation sont
   traversés par le feston — c'est illisible, et le blason a l'air posé
   dans la barre plutôt que sur la devanture. Au défilement, le store part
   avec le hero et la barre reprend sa hauteur compacte. */
.hdr:not(.is-scrolled) .hdr-inner {
  height: var(--hdr-rest);
  padding-top: var(--awning-h);
}

/* Zone droite : le bouton de réservation (et le bouton de menu sur petit
   écran) y sont posés. Elle existe pour une raison précise — le bouton ne
   peut pas absorber l'espace libre lui-même, son fond bleu s'étirerait.
   C'est donc la zone qui grandit, et le bouton se centre dedans. */
.hdr-end {
  /* Trois colonnes symétriques : le bouton de réservation reste au centre
     et le bouton de menu se cale à droite lorsqu'il apparaît. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  flex: none;
}
.hdr-end .ig      { grid-column: 1; justify-self: start; }
.hdr-end .hdr-cta { grid-column: 2; }
.hdr-end .menu-btn { grid-column: 3; justify-self: end; }

/* Blason extrait de la carte du client (master assets/logo.png, servi en .webp). */
.wordmark {
  display: inline-flex;
  align-items: center;
  /* L'identité ne se comprime jamais : c'est la nav qui cède. */
  flex: none;
  justify-content: center;
  gap: 1rem;
  font-family: var(--wordmark);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.wordmark-logo {
  /* Hauteur de la barre compacte, une fois la page défilée. */
  height: 46px;
  width: auto;
  flex: none;
  /* Le blason est dessiné en bleu marine : sur la vidéo sombre il a besoin
     d'être détaché du fond. */
  transition: height .5s var(--ease), filter .4s var(--ease);
}
/* Sur la devanture, le blason est l'enseigne : il respire. Une fois
   défilé, il se range dans la barre. */
.hdr:not(.is-scrolled) .wordmark-logo {
  height: 84px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}

/* ---------- Accès Instagram ---------- */
.ig {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink);
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease);
}
.ig:hover {
  color: var(--porcelain);
  background: var(--cobalt);
  border-color: var(--cobalt);
}
.hdr:not(.is-scrolled) .ig {
  color: var(--porcelain);
  border-color: rgba(236, 238, 241, .45);
}

/* Au-dessus de la vidéo, l'en-tête passe en clair. */
.hdr:not(.is-scrolled) .wordmark,
.hdr:not(.is-scrolled) .nav a { color: var(--porcelain); }
.hdr:not(.is-scrolled) .menu-btn span { background: var(--porcelain); }

/* Les sept entrées restent lisibles dans la barre élargie de l'en-tête ;
   sous 1280 px, le menu compact prend le relais avant toute collision. */
.nav { display: flex; gap: clamp(.4rem, .1rem + .4vw, .8rem); }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .5rem;
  font-family: var(--sans);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav a:hover { color: var(--cobalt); }

/* Une seule entree de la barre quitte la page (Boissons) : on le signale,
   pour que le reste de la barre se lise comme du defilement interne. */
.nav a[href$=".html"]:not([aria-current])::after,
.menu-overlay-nav a[href$=".html"]:not([aria-current])::after {
  content: "\2197";
  margin-left: .3em;
  font-size: .82em;
  opacity: .5;
}

/* ---------- Bouton de réservation ----------
   Accès unique : le libellé et le numéro dans le même bouton. Le lien est
   un `tel:` — voir le numéro et appeler sont la même action. */
.hdr-cta {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .55rem 1.25rem;
  background: var(--cobalt);
  border: 1px solid var(--cobalt);
  color: var(--porcelain);
  text-align: center;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              transform .3s var(--ease);
}
.hdr-cta:hover {
  background: #32498A;
  border-color: #32498A;
  transform: translateY(-2px);
}
.hdr-cta-l {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(236, 238, 241, .82);
}
.hdr-cta-n {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.menu-btn {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
/* Les deux barres n'étaient espacées que de 2,5 px : le hamburger lisait
   comme un trait unique, et la croix se refermait en chevron. */
.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { bottom: 16px; }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu-overlay);
  background: var(--slate);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.menu-overlay-nav { display: grid; gap: .3rem; text-align: center; }
.menu-overlay-nav a {
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  color: var(--porcelain);
  padding: .4rem;
}
.menu-overlay-nav a:hover { color: var(--cobalt-2); }
.overlay-phone {
  font-family: var(--sans) !important;
  font-size: 1.25rem !important;
  letter-spacing: .1em;
  color: var(--cobalt-2) !important;
  margin-top: 1.2rem;
}

body.menu-open { overflow: hidden; }
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }
body.menu-open .mobile-bar { opacity: 0; visibility: hidden; transform: translateY(100%); }
body.menu-open .menu-btn span { background: var(--porcelain); }
/* Les deux barres doivent se rejoindre au centre du bouton (22 px). */
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }

/* ---------- 1 · Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--porcelain);
}
.awning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-awning);
  height: var(--awning-h);
  background:
    repeating-linear-gradient(
      90deg,
      var(--awning-a) 0 var(--awning-stripe),
      var(--awning-b) var(--awning-stripe) calc(var(--awning-stripe) * 2)
    );
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22));
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--awning-scallop) at var(--awning-scallop) 0, #000 99%, transparent 100%);
  -webkit-mask-size:
    100% calc(100% - var(--awning-scallop)),
    calc(var(--awning-scallop) * 2) var(--awning-scallop);
  -webkit-mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--awning-scallop) at var(--awning-scallop) 0, #000 99%, transparent 100%);
  mask-size:
    100% calc(100% - var(--awning-scallop)),
    calc(var(--awning-scallop) * 2) var(--awning-scallop);
  mask-position: top left, bottom left;
  mask-repeat: no-repeat, repeat-x;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-video);
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--slate-2);
  filter: saturate(.7) brightness(.92) contrast(1.05);
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-veil);
  background:
    radial-gradient(70% 58% at 50% 42%, rgba(31, 37, 46, .34), rgba(31, 37, 46, .62) 82%),
    linear-gradient(180deg, rgba(31, 37, 46, .48), rgba(31, 37, 46, .24) 42%, rgba(31, 37, 46, .64));
  transition: opacity .4s var(--ease);
}
.hero-content {
  position: relative;
  z-index: var(--z-hero-content);
  max-width: 900px;
  padding: 6rem 1.4rem;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hero.is-content-hidden .hero-content {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.hero.is-content-hidden .hero-veil { opacity: .42; }
.hero-place {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .4em;
  font-size: var(--t-eyebrow);
  /* Cobalt clair sur une image de bar eclairee : le contraste tombait sous
     2:1. La porcelaine et l'ombre portee du titre le remontent au-dessus
     de 4,5:1 quelle que soit l'image de la video. Le cobalt reste l'accent
     partout ailleurs, ou il est mesure a 5,7:1. */
  color: var(--porcelain);
  text-shadow: 0 2px 22px rgba(11, 14, 19, .72);
  margin-bottom: 1.6rem;
}
.hero-title {
  font-family: var(--wordmark);
  font-size: clamp(2.5rem, 1.65rem + 4.5vw, 5.35rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 8px 50px rgba(0, 0, 0, .5);
}
.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 1.4rem auto;
}
.hero-rule span {
  height: 1px;
  width: clamp(40px, 12vw, 110px);
  background: linear-gradient(90deg, transparent, rgba(110, 139, 212, .8));
}
.hero-rule span:last-child { background: linear-gradient(90deg, rgba(110, 139, 212, .8), transparent); }
.hero-rule i {
  width: 6px; height: 6px;
  background: var(--cobalt-2);
  transform: rotate(45deg);
  flex: none;
}
.hero-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--on-dark);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.6rem;
}
.hero-controls {
  position: absolute;
  right: clamp(1rem, 2.2vw, 2rem);
  bottom: clamp(1rem, 2.2vw, 2rem);
  z-index: var(--z-hero-controls);
  display: flex;
  gap: .55rem;
}
.hero-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--porcelain);
  background: rgba(31, 37, 46, .72);
  border: 1px solid rgba(236, 238, 241, .48);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.hero-control:hover {
  color: var(--ink);
  background: var(--porcelain);
  border-color: var(--porcelain);
  transform: translateY(-2px);
}
.hero-control::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  right: calc(100% + .7rem);
  padding: .45rem .65rem;
  color: var(--porcelain);
  background: rgba(27, 30, 36, .94);
  border: 1px solid var(--line-d);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.hero-control:hover::after,
.hero-control:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.hero-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-icon-show,
.hero-icon-play { display: none; }
.hero-content-toggle.is-hidden .hero-icon-hide,
.hero-video-toggle.is-paused .hero-icon-pause { display: none; }
.hero-content-toggle.is-hidden .hero-icon-show,
.hero-video-toggle.is-paused .hero-icon-play { display: block; }
/* ---------- 2 · Le Pinot Noir ----------
   Remplace l'ancienne section « La maison » : c'est la signature de la
   maison, elle arrive donc juste après la vidéo. */
.pinot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 var(--pad);
  background: var(--porcelain);
  color: var(--ink);
}
/* Le voile dégradé servait à asseoir le texte clair sur la vidéo sombre.
   Sur porcelaine il n'a plus d'objet. */
.pinot::before { content: none; }
/* La bouteille n'est plus un calque de fond : c'est une colonne de la
   grille. Elle était rognée de 393 px (65 % visible) et recouverte de
   103 px par les cartes de vins. Entière, elle donne sa hauteur au bloc. */
.pinot-media {
  position: static;
  display: grid;
  place-items: center;
  margin: 0;
  background: none;
}
.pinot-media img {
  position: static;
  transform: none;
  width: clamp(112px, 32vw, 158px);
  height: auto;
  max-width: 100%;
  filter: saturate(.95) contrast(1.06);
}
.pinot-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.4rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.pinot-title { font-size: var(--t-sec); margin-top: .2rem; }
.pinot-title em { font-style: italic; }
.pinot-lead {
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.45;
  margin-top: 1.2rem;
  max-width: 42ch;
}
.pinot-body {
  color: var(--muted);
  max-width: 46ch;
  margin: 1rem 0 2rem;
}

.pinot-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 2px 14px rgba(15, 18, 24, .05);
}
.pinot-picks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.2rem;
  padding: 1.1rem clamp(1.1rem, .8rem + 1vw, 1.5rem);
}
.pinot-picks li + li { border-top: 1px solid var(--line-2); }
.pk-nm {
  grid-column: 1;
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.25;
}
.pk-yr {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
  margin-left: .4rem;
}
.pk-de {
  grid-column: 1;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: .2rem;
}
.pk-pr {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
  white-space: nowrap;
}

/* ---------- Bascule Clair / Sombre ----------
   Les deux versions de la section ont chacune leurs partisans : plutôt que
   de trancher, on laisse choisir. Le sélecteur est neutre pour rester
   lisible avant même que l'ambiance ne soit fixée. */
.pinot-theme {
  display: inline-flex;
  gap: .3rem;
  margin-bottom: 1.4rem;
  padding: .3rem;
  border-radius: 999px;
  background: rgba(20, 22, 26, .05);
  border: 1px solid rgba(20, 22, 26, .12);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.pinot-theme-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  color: var(--muted);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.pinot-theme-btn:hover { color: var(--ink); }
.pinot-theme-btn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.pinot-theme-btn.is-active { color: #fff; background: var(--cobalt); }

.pinot.is-dark {
  background-color: var(--ink);
  color: var(--porcelain);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.pinot.is-dark .eyebrow { color: var(--cobalt-2); }
.pinot.is-dark .pinot-body { color: var(--on-dark-2); }
.pinot.is-dark .pinot-theme { background: rgba(236, 238, 241, .08); border-color: rgba(236, 238, 241, .18); }
.pinot.is-dark .pinot-theme-btn { color: var(--on-dark-2); }
.pinot.is-dark .pinot-theme-btn:hover { color: var(--porcelain); }
.pinot.is-dark .pinot-theme-btn.is-active { color: var(--ink); background: var(--cobalt-2); }
.pinot.is-dark .pinot-picks {
  background: rgba(236, 238, 241, .05);
  border-color: rgba(236, 238, 241, .16);
  box-shadow: none;
}
.pinot.is-dark .pinot-picks li + li { border-top-color: rgba(236, 238, 241, .14); }
.pinot.is-dark .pk-de { color: var(--on-dark-2); }
.pinot.is-dark .pk-yr,
.pinot.is-dark .pk-pr { color: var(--cobalt-2); }

/* ---------- 2 bis · La maison (retirée du HTML, styles conservés) ---------- */
.maison { padding-block: var(--pad); text-align: center; }
.maison-inner { max-width: 720px; margin-inline: auto; }
.maison-title { font-size: var(--t-sec); }
.maison-text {
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.6;
}
.maison-keys {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  justify-content: center;
  margin-top: 2rem;
}
.maison-keys li {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .7rem;
  font-weight: 500;
  color: var(--cobalt);
}
.maison-keys li + li::before {
  content: "·";
  color: var(--cobalt-soft);
  margin-right: 1.6rem;
}

/* ---------- 3 · L'esprit du Rond-Point ---------- */
.spirit {
  padding-block: clamp(3.8rem, 3.2rem + 2vw, 5rem);
  background: var(--porcelain);
  border-block: 1px solid var(--line);
}
.spirit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  /* La galerie ayant ete retiree, start ne sert plus qu a caler le texte
     en haut de sa colonne. */
  align-items: start;
}
.spirit-copy { max-width: 580px; }


/* =====================================================================
   5 · La carte — transposition du menu imprimé du client

   Analyse de Menu.pdf : trois familles, et rien d'autre.
     · DM Serif Display Regular  12,7 pt  → les plats
     · Poppins Bold              12,8 pt  → les prix
     · Cormorant Garamond        11,7 pt  → les mentions
   Tout en noir pur sur un blanc très légèrement chaud (#F8F7F7), sans un
   seul filet. Ce sont les vraies polices de la maison : on les reprend.

   Ce qu'on NE reprend pas : le noir pur (dur à l'écran, on l'adoucit) et
   l'absence totale de repères visuels (à l'écran, sur des noms de plats
   qui passent à la ligne, l'œil a besoin d'un fil).

   Pourquoi la lisibilité pêchait : les plats étaient composés en Italiana.
   C'est une didone filiforme, magnifique en grand titre, mais dont les
   pleins font 1 px en corps de liste — d'où l'impression de texte délavé,
   même avec un rapport de contraste théoriquement bon. Le problème n'était
   pas la couleur, c'était la GRAISSE. DM Serif Display a les mêmes
   contrastes élégants avec des fûts pleins.
   ===================================================================== */
.carte {
  /* Bords resserrés : le chapeau prenait presque autant de hauteur que les
     premiers plats. On divise l'espace vertical par deux. */
  padding-block: clamp(4rem, 2.8rem + 4.2vw, 7rem);
  color: var(--porcelain);

  /* Le menu imprimé n'a aucune photo — mais une section aussi longue en
     aplat graphite est plate. La photo du bar (un verre qu'on remplit)
     passe dessous, voilée à ~92 % : on ne la lit pas, on la sent. La
     feuille blanche reste la seule surface de lecture. */
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(20, 22, 26, .88), rgba(20, 22, 26, .94)),
    url("assets/salle-bar.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.carte-inner { max-width: 900px; margin-inline: auto; }
.carte-head { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }

/* ---------- Bascule La carte / Plat du jour ----------
   Deux vraies vues, pas un simple ancrage : avant, « Plat du jour » ne
   faisait que défiler jusqu'à la même feuille que « La carte ». */
.carte-tabs {
  display: flex;
  justify-content: center;
  gap: .3rem;
  width: max-content;
  margin: 0 auto clamp(1.6rem, 3.4vw, 2.4rem);
  padding: .3rem;
  border-radius: 999px;
  background: rgba(236, 238, 241, .08);
  border: 1px solid rgba(236, 238, 241, .16);
}
.carte-tab {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-price);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  color: var(--on-dark-2);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.carte-tab:hover { color: var(--porcelain); }
.carte-tab:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.carte-tab.is-active { color: var(--ink); background: var(--cobalt-2); }

/* Le plat du jour reprend l'habillage de la feuille (.carte-cols), avec un
   sommaire adapté à une ardoise courte. */
#plat-du-jour { scroll-margin-top: calc(var(--hdr-real) + 40px); }
#plat-du-jour .menu-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
/* Cette ardoise se lit dans l'ordre Entrée, Plat, Dessert. Elle reste donc
   sur une seule colonne, même quand la carte générale passe en deux colonnes. */
#plat-du-jour .plat-jour { grid-template-columns: minmax(0, 1fr); }

/* Sommaire de l'ardoise : même composant que celui de la carte, adapté à
   quatre entrées réparties sur toute la largeur. */
.pj-nav {
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
}
/* Les quatre ancres visées sont des sections : on décale la cible sous
   l'en-tête fixe, comme partout ailleurs. */
#plat-du-jour-entree,
#plat-du-jour-plat,
#plat-du-jour-dessert,
#plat-du-jour-formule { scroll-margin-top: calc(var(--hdr-real) + 24px); }

/* ---------- Ardoise du jour : tout centré ----------
   Une suggestion du jour n'est pas une carte à parcourir : trois lignes, lues
   d'un coup. Centrer le libellé, le plat, sa garniture et le prix donne la
   composition d'un menu du jour posé sur la table, au lieu d'un tableau de
   prix aligné à droite. Portée limitée à #plat-du-jour : l'onglet « La carte »
   garde son alignement classique nom-à-gauche / prix-à-droite. */
#plat-du-jour .cat-title {
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: .9rem;
}
/* Un filet court sous le libellé remplace le trait pleine largeur. */
#plat-du-jour .cat-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: .7rem auto 0;
  background: rgba(20, 22, 26, .22);
}
#plat-du-jour .ci {
  display: block;
  text-align: center;
  border-bottom: 0;
  padding: .35rem 0 0;
}
#plat-du-jour .ci-l { display: block; }
#plat-du-jour .nm { display: block; }
#plat-du-jour .de { display: block; margin-top: .2rem; }
/* Le prix passe sous la garniture, centré, détaché. */
#plat-du-jour .pr {
  display: block;
  margin-top: .55rem;
}
/* Chaque service est séparé par de l'air, pas par un trait. */
#plat-du-jour .cat + .cat { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

/* La formule se centre aussi. */
#plat-du-jour .pj-formule { text-align: center; }

/* La formule conclut l'ardoise comme une mention de menu, pas comme une ligne
   de prix. */
.pj-formule {
  grid-column: 1 / -1;
  font-style: normal;
  font-family: var(--font-price);
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--menu-ink);
}
.cat-ph {
  font-family: var(--font-note);
  font-size: 1.06rem;
  font-style: italic;
  color: var(--menu-ink-2);
}

.carte-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0;
  overflow-x: auto;
  margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  padding-bottom: .35rem;
  border-block: 1px solid rgba(236, 238, 241, .2);
  scrollbar-width: none;
}
.carte-nav::-webkit-scrollbar { display: none; }
.carte-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .75rem 1rem;
  font-family: var(--font-price);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark);
  border-right: 1px solid rgba(236, 238, 241, .13);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.carte-nav a:last-child { border-right: 0; }
.carte-nav a:hover,
.carte-nav a:focus-visible {
  color: var(--porcelain);
  background: rgba(110, 139, 212, .13);
}
.carte-mention {
  font-family: var(--font-note);
  font-size: 1.02rem;
  font-style: italic;
  /* Jamais de blanc pur : --on-dark-2 est du porcelaine à 62 %, plus doux
     à l'œil et suffisant pour une mention secondaire. */
  color: var(--on-dark-2);
  max-width: 56ch;
  margin-inline: auto;
}
.spirit-intro {
  max-width: 48ch;
  margin: 1.1rem 0 1.1rem;
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--muted);
}
/* Paragraphe de présentation : texte courant, volontairement plus discret que
   l'accroche au-dessus. C'est le corps de texte que lisent les moteurs. */
.spirit-lede {
  max-width: 62ch;
  margin: 0 0 1.55rem;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--muted);
}
.spirit-facts { margin: 0; }
.spirit-facts > div {
  display: grid;
  grid-template-columns: minmax(92px, .38fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .82rem 0;
  border-top: 1px solid var(--line-2);
}
.spirit-facts > div:last-child { border-bottom: 1px solid var(--line-2); }
.spirit-facts dt {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 500;
  color: var(--cobalt);
}
.spirit-facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.04rem;
  line-height: 1.35;
  text-align: right;
  color: var(--ink);
}

/* ---------- Galerie de la maison ----------
   Quatre tuiles egales en 2x2. La version precedente empilait six photos
   dont une vedette pleine largeur : le bloc faisait 1019 px, le double de
   la colonne de texte.
   Format 3:2 impose pour que des sources heterogenes se rangent quand
   meme. Le survol reste discret : ce sont des photos, pas des boutons. */
/* ---------- La feuille ----------
   Le blanc chaud vient du PDF (#F8F7F7). Sur le graphite, il donne le
   contraste demandé sans virer au blanc clinique. */
.carte-cols {
  /* Le blason en filigrane, en tête de feuille — exactement sa place dans
     le menu imprimé. C'est le seul fond vraiment cohérent pour une carte :
     la maison elle-même, pas une photo de café empruntée ailleurs. */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 3.2rem) clamp(2.6rem, 6vw, 4rem);
  background-color: var(--menu-paper);
  /* Grain de papier : la feuille cesse d'être un aplat sans qu'aucun texte
     n'y perde. Le motif est inline, donc aucune requête de plus. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  color: var(--menu-ink);
  padding: clamp(1.6rem, 5vw, 3.4rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
}

/* Le contenu repasse au-dessus du filigrane. */
.carte-cols > * { position: relative; z-index: var(--z-raise); }

/* ---------- En-tête de la feuille ----------
   Ce que le menu imprimé fait : le blason en tête, puis les plats. On y
   ajoute le nom composé et un filet ponctué d'un verre gravé — le registre
   du trait, pas de la photo. */
.menu-head {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: clamp(.6rem, 2vw, 1.4rem);
}
.menu-head-name {
  font-family: var(--font-menu);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  line-height: 1.15;
  color: var(--menu-ink);
}
/* Filet — verre — filet, comme le losange du reste du site. */
.menu-head-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: clamp(.7rem, 2vw, 1.1rem);
  color: var(--cobalt);
}
.menu-head-rule span {
  height: 1px;
  width: clamp(38px, 9vw, 96px);
  background: linear-gradient(90deg, transparent, rgba(20, 22, 26, .28));
}
.menu-head-rule span:last-child {
  background: linear-gradient(90deg, rgba(20, 22, 26, .28), transparent);
}
.menu-head-rule svg { flex: none; width: 21px; height: 28px; }

/* ---------- Catégories ----------
   Le menu imprimé n'en a aucune : c'est là qu'on apporte. Un label en
   petites capitales plutôt qu'un titre serif — il marque la rupture sans
   entrer en concurrence avec les noms de plats, qui gardent la voix. */
.cat-title {
  font-family: var(--font-price);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cobalt);
  text-align: left;
  padding-bottom: .7rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid rgba(20, 22, 26, .18);
}
.cat-title::after { content: none; }
.cat[id] { scroll-margin-top: calc(var(--hdr-real) + 40px); }

.cat-note {
  text-align: left;
  font-family: var(--font-note);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--menu-ink-2);
  margin: .5rem 0 .2rem;
}

/* ---------- Une ligne de carte ----------
   Nom et prix sur la même ligne de base, comme sur l'imprimé. Le filet est
   dix fois plus discret qu'avant : il guide l'œil sur les noms qui passent
   à la ligne, sans quadriller la page. */
.ci {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.4rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(20, 22, 26, .08);
}
.cat .ci:last-of-type { border-bottom: 0; }
.ci-l { display: grid; gap: .15rem; min-width: 0; }

.ci .nm {
  font-family: var(--font-menu);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--menu-ink);
}
.ci .de {
  font-family: var(--font-note);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--menu-ink-2);
}
/* Le prix passe à l'encre, en Poppins demi-gras, au corps du nom : c'est
   le geste du menu imprimé. En cobalt et en .78rem il était l'information
   la plus faible de la ligne, alors que c'est celle qu'on cherche. */
.ci .pr {
  font-family: var(--font-price);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--menu-ink);
  white-space: nowrap;
}

.cat-link {
  /* Peut porter plusieurs liens (Pinot Noir, boissons) : ils s'espacent
     et passent à la ligne au lieu de se coller. */
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin-top: 1.2rem;
  font-family: var(--font-price);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cat-link a {
  color: var(--cobalt);
  border-bottom: 1px solid var(--cobalt-soft);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cat-link a:hover { color: var(--menu-ink); border-bottom-color: var(--menu-ink); }

/* Mentions reprises telles quelles de la carte du client — et composées,
   comme sur l'imprimé, en Cormorant Garamond. */
.carte-legal {
  margin-top: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-d);
  text-align: center;
}
.carte-legal p {
  font-family: var(--font-note);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--on-dark-2);
  max-width: 68ch;
  margin-inline: auto;
}
.carte-legal p + p { margin-top: .5rem; }

/* ---------- 7 · Adresse ---------- */
.adresse { padding-block: var(--pad); }
.adresse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.adresse-addr {
  font-family: var(--display);
  font-style: normal;
  font-size: var(--t-lead);
  line-height: 1.4;
  margin: 1.4rem 0;
}
.adresse-facts { list-style: none; padding: 0; display: grid; gap: 1rem; margin-bottom: 1.9rem; }
.adresse-facts li {
  color: var(--muted);
  border-top: 1px solid var(--line-2);
  padding-top: .9rem;
  line-height: 1.6;
}
.adresse-facts span {
  display: block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
  color: var(--cobalt);
  margin-bottom: .2rem;
}

.adresse-hours {
  scroll-margin-top: calc(var(--hdr-real) + 40px);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--cobalt-soft);
  background: var(--paper);
}
.adresse-hours h3 {
  font-size: var(--t-h3);
  font-weight: 400;
}
.adresse-hours-open {
  margin: .55rem 0 1.15rem;
  font-family: var(--sans);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cobalt);
  white-space: nowrap;
}
.adresse-hours-table {
  width: 100%;
  border-collapse: collapse;
}
.adresse-hours-table th,
.adresse-hours-table td {
  padding: .65rem 0;
  border-bottom: 1px solid var(--line-2);
}
.adresse-hours-table th {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
}
.adresse-hours-table td {
  font-family: var(--sans);
  font-size: .82rem;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Carte Google Maps — en grand : c'est l'info pratique la plus consultée. */
.map-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 340px;
  border: 1px solid var(--cobalt-soft);
  background: var(--porcelain-2);
}
.map-legend {
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: right;
}
.map-legend a {
  color: var(--cobalt);
  border-bottom: 1px solid var(--cobalt-soft);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.map-legend a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.map-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--cobalt-soft);
  background: linear-gradient(160deg, var(--slate), var(--slate-2));
}
.map-pin {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50% 50% 50% 0;
  background: var(--cobalt);
  border: 2px solid var(--porcelain);
  transform: rotate(-45deg);
  margin-bottom: 84px;
}
.map-pin::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--slate);
}
.map-card {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: grid;
  gap: .15rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--cobalt-soft);
  background: rgba(27, 30, 36, .94);
}
.map-card strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--porcelain); }
.map-card span { font-family: var(--sans); font-size: .82rem; color: var(--on-dark); }
.map-card a { font-family: var(--sans); font-size: .78rem; color: var(--cobalt-2); margin-top: .2rem; }
.map-card a:hover { color: var(--porcelain); }

/* ---------- 5 · Presse / logos ----------
   Bloc inspiré d'un mur de logos presse, adapté au vocabulaire graphique
   graphite-cobalt de cette proposition. Les logos sont typographiques pour
   éviter d'embarquer des assets tiers sans validation client. */
.press-wall {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.8rem, 2.8rem + 4vw, 6.5rem);
  background:
    linear-gradient(90deg, rgba(62, 90, 160, .08) 0 1px, transparent 1px 100%),
    var(--porcelain);
  background-size: 36px 100%, auto;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.press-wall-page {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.press-wall-inner {
  position: relative;
  z-index: var(--z-raise);
}
.press-wall-title {
  font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.6rem);
  text-align: center;
}
.press-logo-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  margin-top: clamp(2.2rem, 4vw, 3.5rem);
}
.press-logo-card {
  display: grid;
  place-items: center;
  min-height: clamp(120px, 15vw, 175px);
  padding: clamp(1.1rem, 3vw, 2rem);
  color: var(--ink);
  text-align: center;
  border: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease), background-color .35s var(--ease);
}
.press-logo-card:hover {
  color: var(--cobalt);
  border-color: var(--cobalt-soft);
  background: rgba(236, 238, 241, .55);
  transform: translateY(-3px);
}
.press-logo-main {
  display: block;
  line-height: .95;
  text-wrap: balance;
}
.press-logo-sub {
  display: block;
  margin-top: .75rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.press-logo-tdg .press-logo-main {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -.04em;
}
.press-logo-radio .press-logo-main {
  font-family: var(--sans);
  font-size: clamp(2.05rem, 4.2vw, 4.15rem);
  font-weight: 600;
  letter-spacing: -.05em;
}
.press-logo-ghi .press-logo-main {
  font-family: var(--display);
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.press-logo-spotted .press-logo-main {
  font-family: var(--display);
  font-size: clamp(2rem, 4.3vw, 4rem);
}
.press-logo-fute .press-logo-main {
  font-family: var(--sans);
  font-size: clamp(1.9rem, 4vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -.03em;
}
.press-wall-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 3vw, 2.8rem);
}
.press-wall-art {
  position: absolute;
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .23;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 33%, var(--ink) 34% 36%, transparent 37%),
    repeating-conic-gradient(from 20deg, transparent 0 11deg, var(--ink) 12deg 13deg, transparent 14deg 24deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 62%, transparent 64%);
}
.press-wall-art-left {
  left: max(-160px, -9vw);
  bottom: -70px;
}
.press-wall-art-right {
  right: max(-170px, -10vw);
  top: 28px;
  transform: rotate(24deg);
}

/* ---------- 8 · Instagram ----------
   Mur social en bas de page : les iframes officielles gardent les posts
   côté Instagram, sans copier les images dans le projet. */
.insta {
  padding: var(--pad) 0 clamp(2.5rem, 1.8rem + 2vw, 4rem);
  background:
    linear-gradient(90deg, rgba(236, 238, 241, .055) 0 1px, transparent 1px 100%),
    radial-gradient(90% 60% at 50% 0%, rgba(62, 90, 160, .28), transparent 64%),
    var(--ink);
  background-size: 28px 100%, auto, auto;
  color: var(--porcelain);
  border-top: 1px solid var(--line-d);
}
.insta-inner {
  width: 100%;
  /* La section suivait la largeur de la fenetre : a 1920 px elle occupait
     1905 px quand toutes les autres sections sont calees sur 1140 px. Les
     cartes s'etiraient a 605 px alors que l'integration Instagram reste
     bloquee a 540 px, ce qui laissait 32 px de fond sombre de chaque cote
     de chaque carte. On plafonne un peu plus large que le reste de la page,
     parce que c'est une galerie, mais on plafonne. */
  max-width: 1240px;
  margin-inline: auto;
}
.insta-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.insta-head p {
  max-width: 58ch;
  margin: 1rem auto 0;
  color: var(--on-dark);
}
.insta-grid {
  display: flex;
  align-items: start;
  gap: clamp(.85rem, 1.7vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(.7rem, 1.8vw, 1.4rem);
  overscroll-behavior-inline: contain;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding: 0 clamp(.7rem, 1.8vw, 1.4rem) .7rem;
  scrollbar-width: none;
}
.insta-grid::-webkit-scrollbar { display: none; }
.insta-card {
  position: relative;
  flex: 0 0 min(86vw, 390px);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(236, 238, 241, .18);
  background: var(--ink);
}
.insta-embed-clip {
  position: relative;
  height: 760px;
  overflow: hidden;
  /* Meme plafond que l'integration qu'il contient. Sans cela, sur une carte
     plus large que 540 px, le bord droit du cache ci-dessous ne tombait plus
     sur le bord droit de l'integration et le bouton bleu d'Instagram
     reapparaissait. */
  max-width: 540px;
  margin-inline: auto;
}
.insta-embed-clip::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 142px;
  height: 54px;
  pointer-events: none;
  background: #fff;
}
.insta-frame {
  display: block;
  width: 100%;
  max-width: 540px;
  min-height: 760px;
  height: 760px;
  margin-inline: auto;
  border: 0;
  background: var(--paper);
  pointer-events: none;
  transition: filter .3s var(--ease);
}
.insta-post-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
.insta-card:hover .insta-frame {
  filter: brightness(.92);
}
.insta-post-link:focus-visible {
  outline: 3px solid var(--cobalt-2);
  outline-offset: -5px;
}
/* ---------- Pied de page ---------- */
.ftr {
  background: var(--slate-2);
  color: var(--porcelain);
  padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-top: 1px solid var(--line-d);
}
.ftr-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  padding-bottom: 1.4rem;
}
.ftr-name { font-family: var(--display); font-size: 1.6rem; white-space: nowrap; }
.ftr-tag {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  color: var(--on-dark-2);
  margin-top: .4rem;
}
.ftr-nav { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; }
.ftr-nav a {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  color: var(--on-dark);
}
.ftr-nav a:hover { color: var(--cobalt-2); }
.ftr-phone {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.1;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.ftr-phone:hover { color: var(--cobalt-2); }
.ftr-addr { font-family: var(--sans); font-size: .84rem; color: var(--on-dark-2); margin-top: .3rem; }
.ftr-social {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .6rem;
}
.ftr-email {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--on-dark-2);
  white-space: nowrap;
}
.ftr-ig {
  color: var(--porcelain);
  border-color: rgba(236, 238, 241, .45);
}
.ftr-legal {
  text-align: center;
  border-top: 1px solid var(--line-d);
  padding: 1rem 1.2rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--on-dark-2);
}

/* ---------- Page Presse ---------- */
.press-hero {
  /* Le store est posé en absolu : il lui faut un parent positionné. */
  position: relative;
  padding-top: calc(var(--hdr) + var(--awning-h) + clamp(2.8rem, 2rem + 4vw, 5rem));
  padding-bottom: clamp(3rem, 2.2rem + 4vw, 5rem);
  background: var(--slate-2);
  color: var(--porcelain);
}
.press-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.press-hero .crumb {
  justify-content: flex-start;
  margin-bottom: 1.4rem;
}
.press-title {
  font-size: clamp(2.4rem, 1.7rem + 3.8vw, 5rem);
  line-height: 1.05;
}
.press-lede {
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--on-dark);
  max-width: 50ch;
  margin-top: 1.2rem;
}
.press-hero-img {
  margin: 0;
  border: 1px solid var(--cobalt-soft);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--slate);
}
.press-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.press-list {
  padding-block: var(--pad);
  background:
    linear-gradient(135deg, rgba(236, 238, 241, .9), rgba(199, 221, 243, .72)),
    #C7DDF3;
}
.press-note {
  max-width: 72ch;
  color: rgba(20, 38, 63, .72);
  font-family: var(--sans);
  line-height: 1.7;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.press-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: rgba(62, 90, 160, .25);
  border: 1px solid rgba(62, 90, 160, .25);
}
.press-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(244, 248, 252, .82);
  color: #14263f;
}
.press-source {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cobalt-2);
  margin-bottom: .9rem;
}
.press-card h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  line-height: 1.14;
}
.press-card p:not(.press-source) {
  color: rgba(20, 38, 63, .72);
  line-height: 1.7;
  margin-top: .9rem;
}
.press-card a {
  display: inline-flex;
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cobalt-2);
  border-bottom: 1px solid var(--cobalt-soft);
  padding-bottom: 3px;
}
.press-card a:hover {
  color: var(--slate);
  border-bottom-color: var(--slate);
}

/* ---------- Barre d'actions mobile ---------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobile-bar);
  display: none;
  gap: .6rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(236, 238, 241, .95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.mobile-bar.is-footer-visible {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}
/* La barre mobile reprend le même bouton unique. */
.mb-cta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 52px;
  padding: .6rem 1rem;
  background: var(--cobalt);
  border: 1px solid var(--cobalt);
  color: var(--porcelain);
}
.mb-l {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  /* Opacité remontée de .82 à 1 : à .82 le texte tombait à 4,41:1 sur le fond
     cobalt, sous le minimum WCAG AA de 4,5:1 pour un texte de cette taille. */
  color: var(--porcelain);
}
.mb-n {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Animations ---------- */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  animation: rise 1s var(--ease) forwards;
}
[data-anim="1"] { animation-delay: .15s; }
[data-anim="2"] { animation-delay: .36s; }
[data-anim="3"] { animation-delay: .56s; }
[data-anim="4"] { animation-delay: .78s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Sans JavaScript, personne ne vient poser la classe « in » : la moitié de la
   page resterait à opacity 0. La classe « no-js » est posée sur <html> dans le
   document et retirée par la première ligne de script ; si le script ne
   s'exécute pas, elle reste et le contenu s'affiche normalement. */
html.no-js .reveal { opacity: 1; transform: none; }

/* =====================================================================
   Points de rupture
   ===================================================================== */
@media (max-width: 1279px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  /* Sans la nav, `space-between` centrerait le bouton : on le regroupe
     avec le menu, à droite. */
}

@media (max-width: 767px) {
  /* Le blason d'enseigne ne tient pas dans une barre de téléphone : à
     cette taille il chassait le bouton de menu hors de l'écran. */
  .hdr:not(.is-scrolled) .wordmark-logo { height: 56px; }
  .wordmark { gap: .7rem; font-size: 1.15rem; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 74px; }
  .map-ph { min-height: min(280px, 64vw); }
  .hero-controls {
    right: 1rem;
    bottom: calc(102px + env(safe-area-inset-bottom));
  }
}

/* En dessous de 480 px, le nom disparaît de la barre : le blason porte
   l'identité, et le hero répète le nom en grand juste dessous. */
@media (max-width: 479px) {
  .wordmark-txt { display: none; }
  .hdr:not(.is-scrolled) .wordmark-logo { height: 62px; }
}

/* Dès que le bouton de réservation est visible, la marque déborde dans la
   gouttière de l'en-tête (marge négative = largeur de la gouttière), puis
   prend tout l'espace libre jusqu'au menu et s'y centre : elle tombe au
   milieu de la zone « bord de page → menu ». La navigation et le bouton
   ne bougent pas — ils restent dans la colonne de contenu.
   Le min(0px, …) : sous 1140 px il n'y a plus de gouttière, on ne décale pas. */
@media (min-width: 768px) {
  .wordmark {
    flex: 1 0 auto;
    margin-left: min(0px, calc((var(--hdr-wrap) - 100vw) / 2 + 1.2rem));
  }

  /* Symétrique de la marque. Les deux zones ont le même flex-grow : elles
     se partagent l'espace libre à parts égales, et chacune centre son
     contenu. La marge négative les fait déborder dans la gouttière, pour
     que le centrage se fasse par rapport au BORD DE PAGE et non au bord de
     la colonne de contenu. */
  .hdr-end {
    flex: 1 0 auto;
    justify-content: center;
    margin-right: min(0px, calc((var(--hdr-wrap) - 100vw) / 2 + 1.2rem));
  }
}

@media (min-width: 768px) {
  /* Sur grand écran, le store se déploie : c'est la devanture. Sur
     téléphone il reste à 48 px, où chaque pixel de hauteur compte.
     Tout ce qui en dépend suit — hauteur de l'en-tête au repos
     (--hdr-rest) et retrait des titres de pages secondaires. */
  :root {
    --awning-h: 82px;
    --awning-stripe: 36px;
    --awning-scallop: 18px;
  }

  .hdr-cta { display: inline-flex; }

  .pinot {
    min-height: clamp(660px, 58vw, 780px);
    padding-block: var(--pad);
  }
  .pinot::before {
    background:
      linear-gradient(90deg,
        rgba(31, 37, 46, .98) 0,
        rgba(31, 37, 46, .88) 37%,
        rgba(31, 37, 46, .28) 55%,
        rgba(31, 37, 46, .78) 100%),
      linear-gradient(180deg, rgba(31, 37, 46, .2), rgba(31, 37, 46, .55));
  }
  /* Trois zones : le texte et les vins empilés à gauche, la bouteille
     entière à droite sur les deux rangées. Plus aucun recouvrement. */
  .pinot-media img { width: clamp(150px, 17vw, 200px); }
  .pinot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .42fr);
    grid-template-areas:
      "texte media"
      "vins  media";
    align-items: start;
    gap: clamp(2.2rem, 4vw, 3.6rem) clamp(3rem, 7vw, 6rem);
    min-height: 0;
  }
  .pinot-text  { grid-area: texte; }
  .pinot-picks { grid-area: vins; width: 100%; justify-self: stretch; align-self: start; }
  .pinot-media { grid-area: media; align-self: center; }

  .carte-cols   {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* La dernière ligne est en « 1fr » : c'est elle, et elle seule, qui
       absorbe la hauteur du bloc des plats, à cheval sur deux lignes. Sans
       cela le surplus se répartirait sur les deux et rouvrirait un vide sous
       les accompagnements. */
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }
  /* Deux colonnes, cinq blocs. En placement automatique, « Les plats » (la
     rubrique la plus longue) fixe la hauteur de sa ligne : « Accompagnements »
     à sa droite laissait sous lui un vide de toute cette hauteur, et « Cave &
     boissons » tombait seul, très bas, hors de vue. On place donc à la main :
     les plats occupent la colonne de gauche sur deux lignes, et à droite
     accompagnements et boissons se suivent, serrés, dans l'espace que les
     plats libèrent. Entrées et assiettes se placent seules sur la première
     ligne. Les identifiants viennent des clés de rubrique de l'admin ; une
     rubrique ajoutée se place à la suite, sans casser ce dessin.
     La ligne 1 est celle de l'en-tête de la feuille (pleine largeur), d'où
     la numérotation à partir de 3. */
  #menu-plats           { grid-column: 1; grid-row: 3 / span 2; }
  #menu-accompagnements { grid-column: 2; grid-row: 3; }
  #menu-boissons        { grid-column: 2; grid-row: 4; }
  /* Informations et horaires partagent la première ligne ; la carte reste
     pleine largeur dessous pour conserver son rôle pratique. */
  .adresse-grid {
    grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr);
    align-items: start;
  }
  .adresse-map { grid-column: 1 / -1; }
  .map-frame { aspect-ratio: 21 / 9; min-height: 420px; }
  .press-logo-board {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .press-logo-card { grid-column: span 2; }
  .press-logo-board > .press-logo-card:nth-child(4):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
  .press-hero-grid { grid-template-columns: .9fr 1.1fr; }
  .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-grid > .press-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .adresse-facts li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 1rem; }
  .adresse-facts span { margin-bottom: 0; padding-top: .35rem; }

}

/* Le pied de page ne passe sur trois colonnes que lorsqu'il y a
   vraiment la place : en dessous, la nav se serre contre la marque. */
@media (min-width: 1024px) {
  .spirit-grid {
    /* Le fil de la journée reprend la colonne que la galerie avait laissée vide. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: start;
  }

  /* Le fil de la journée accompagne la lecture du texte.
     La colonne de gauche est longue, celle de droite courte : sans cela, le
     fil disparaît au premier tiers et le lecteur finit le paragraphe devant
     un vide. Collé, il reste sous les yeux pendant qu'on lit — c'est
     exactement son rôle d'aiguillage vers le reste du site.
     Le décalage tient compte de l'en-tête fixe, dont la hauteur réelle est
     mesurée par le script (--hdr-real), avec --hdr comme repli.
     `align-self: start` est nécessaire : dans une grille, un élément étiré
     sur toute la hauteur de sa ligne n'a aucune marge pour coller. */
  .spirit-grid > .journee {
    position: sticky;
    top: calc(var(--hdr-real) + 2rem);
    align-self: start;
  }
  .carte-nav {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  /* Le sommaire du plat du jour n'a que quatre rubriques. Cette variante
     doit occuper toute la feuille, sans hériter des six colonnes de la carte. */
  .carte-nav.pj-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .carte-nav a { padding-inline: .65rem; }
  .insta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  .insta-card {
    min-width: 0;
    scroll-snap-align: none;
  }
  .ftr-inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
  .ftr-nav { justify-content: center; }
  .ftr-contact { text-align: right; }
  .ftr-social { justify-content: flex-end; }
}

/* =====================================================================
   PAGE « NOS PINOT NOIR » (pinot-noir.html)
   Carte des vins : liste dense, lecture rapide, plus de 20 références.
   Même design system que index.html — aucune couleur ni police en plus.
   ===================================================================== */

.ph { font-style: italic; color: var(--muted); }

/* Plusieurs éléments de la carte portent `display`, qui l'emporterait sur
   la règle par défaut de [hidden] : on la rétablit une fois pour toutes. */
[hidden] { display: none !important; }

/* ---------- En-tête de page (compact) ---------- */
.wl-head .crumb { margin-bottom: .9rem; }

/* Sur petit ecran, la mention de bas d'en-tete passait sur quatre lignes et
   repoussait la carte : on la resserre sans la raccourcir. */
@media (max-width: 640px) {
  .wl-head .crumb { gap: .4rem; margin-bottom: .7rem; }
  .wl-head .wl-note {
    font-size: .76rem;
    line-height: 1.55;
    margin-top: .8rem;
    padding-top: .8rem;
  }
}
.wl-awning-band {
  position: relative;
  height: var(--hdr-rest);
  background: var(--slate-2);
}

.wl-head {
  /* Le store est posé en absolu : il lui faut un parent positionné. */
  position: relative;
  padding-top: calc(var(--hdr) + var(--awning-h) + clamp(1.1rem, .7rem + 1.4vw, 1.8rem));
  padding-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  background: var(--slate-2);
  color: var(--porcelain);
  text-align: center;
}
.wl-head-menu {
  background: #114667;
  padding-top: clamp(2.2rem, 1.4rem + 2.8vw, 3.8rem);
  padding-bottom: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  border-bottom: 1px solid rgba(248, 211, 86, .28);
}
.wl-head-menu .crumb {
  color: rgba(248, 211, 86, .78);
}
.wl-head-menu .wl-title {
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.wl-head-menu .wl-lede {
  color: rgba(248, 250, 252, .9);
}
.wl-head-menu .wl-note {
  border-top-color: rgba(248, 211, 86, .34);
  color: rgba(248, 250, 252, .76);
}

/* Cinq présentations, une seule carte : chaque bouton reprend l'accent de
   la surface qu'il active pour que le choix reste immédiatement lisible. */
.menu-mode-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 780px);
  margin: 1.5rem auto 0;
  padding: 4px;
  border: 1px solid rgba(248, 211, 86, .48);
  border-radius: 6px;
  background: rgba(7, 22, 34, .26);
}
@media (max-width: 700px) {
  .menu-mode-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .menu-mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.menu-mode-switch + .wl-title {
  margin-top: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
}
.menu-mode-switch button {
  min-height: 42px;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(248, 250, 252, .78);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.menu-mode-switch button:hover { color: var(--porcelain); }
.menu-mode-switch button[aria-pressed="true"] {
  background: #F8D356;
  color: #0E3E5F;
}
.menu-mode-switch button:active { transform: scale(.98); }

/* Menu classique : papier clair, encre noire. Le bandeau fait partie de la
   présentation sélectionnée, au même titre que la liste située dessous. */
body.drinks-page.menu-classic .wl-head-menu {
  background: var(--porcelain);
  border-bottom-color: var(--line);
  color: var(--ink);
}
body.drinks-page.menu-classic .wl-head-menu .wl-title {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
body.drinks-page.menu-classic .menu-mode-switch {
  background: var(--paper);
  border-color: var(--line-2);
}
body.drinks-page.menu-classic .menu-mode-switch button { color: var(--muted); }
body.drinks-page.menu-classic .menu-mode-switch button:hover { color: var(--ink); }
body.drinks-page.menu-classic .menu-mode-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--porcelain);
}
.crumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 1.6rem;
}
.crumb a:hover { color: var(--cobalt-2); }

.wl-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: .02em;
}
.wl-lede {
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--on-dark);
  max-width: 52ch;
  margin: .7rem auto 0;
}
.wl-note {
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--on-dark-2);
  max-width: 78ch;
  margin: 1rem auto 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line-d);
}

/* ---------- Barre d'outils (collante) ---------- */
.wl-tools {
  position: sticky;
  top: var(--hdr);
  z-index: var(--z-sticky-tools);
  background: #114667;
  border-top: 1px solid rgba(248, 211, 86, .32);
  border-bottom: 1px solid rgba(248, 211, 86, .36);
  color: var(--porcelain);
}
.wl-tools-in {
  display: grid;
  gap: .9rem;
  padding-block: 1rem;
}

.wl-search { position: relative; display: block; }
.wl-search input {
  width: 100%;
  min-height: 48px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--porcelain);
  background: rgba(7, 22, 34, .28);
  border: 1px solid rgba(248, 211, 86, .42);
  border-radius: 0;
  padding: .75rem 2.6rem .75rem .95rem;
  transition: border-color .3s var(--ease);
}
.wl-search input::placeholder { color: rgba(236, 238, 241, .74); }
/* La bordure signale le focus à la souris ; au clavier, le contour global
   de :focus-visible doit rester — une bordure 1px ne suffit pas (WCAG 2.4.11). */
.wl-search input:focus { border-color: #F8D356; }
.wl-clear {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(236, 238, 241, .72);
}
.wl-clear:hover { color: var(--porcelain); }
.wl-clear:active { transform: translateY(-50%) scale(.9); }

.wl-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.wl-chip {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: .6rem 1rem;
  min-height: 40px;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease);
}
.wl-chip:hover { border-color: var(--cobalt-soft); color: var(--ink); }
.wl-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--porcelain);
}
.wl-count {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F8D356;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ---------- La carte ---------- */
.wl-body {
  --drink-blue: #114667;
  --drink-blue-deep: #0E3E5F;
  --drink-gold: #F8D356;
  --drink-white: #F8FAFC;
  --drink-line: rgba(248, 211, 86, .72);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .06), transparent 28rem),
    linear-gradient(180deg, var(--drink-blue), var(--drink-blue-deep));
  color: var(--drink-white);
}
.wl-body > .wrap {
  position: relative;
}

.wl-alert {
  padding: .8rem 1.1rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-left: 3px solid var(--cobalt);
  background: var(--porcelain-2);
  font-family: var(--sans);
  font-size: .83rem;
  line-height: 1.7;
  color: var(--muted);
}

.wl-grp + .wl-grp { margin-top: clamp(2.7rem, 1.8rem + 3vw, 4.2rem); }

.wl-grp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  padding-bottom: .55rem;
  border-bottom: 0;
}
.wl-grp-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--drink-gold);
}
.wl-grp-note {
  font-family: var(--sans);
  font-size: clamp(1rem, .9rem + .45vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--drink-white);
}

.wl-list { list-style: none; margin: 0; padding: 0; }

/* Une référence = une ligne. Nom + millésime à gauche, prix à droite,
   informations essentielles en dessous. */
.w {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  row-gap: .15rem;
  padding-block: .42rem;
  border-bottom: 0;
}
.w-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .45vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--drink-white);
}
.w-year {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
  margin-left: .5rem;
  white-space: nowrap;
}
.w-price {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1rem, .92rem + .4vw, 1.3rem);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--drink-gold);
}
.w-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: clamp(.92rem, .84rem + .32vw, 1.14rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--drink-gold);
}
.w[hidden] { display: none; }

/* Page boissons : état d'attente, en l'absence du document du client. */
.wl-soon {
  max-width: 56ch;
  margin: clamp(2.4rem, 2rem + 2vw, 3.5rem) auto 0;
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  border: 1px solid var(--cobalt-soft);
  background: var(--paper);
  text-align: center;
}
.wl-soon-t {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--cobalt);
  margin-bottom: .8rem;
}
.wl-soon-d { line-height: 1.7; color: var(--muted); }
.wl-soon-d a { color: var(--cobalt); border-bottom: 1px solid var(--cobalt-soft); }
.wl-soon-d a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.wl-empty {
  padding: 2.4rem 0;
  text-align: center;
  font-family: var(--sans);
  font-size: .95rem;
  color: rgba(248, 250, 252, .78);
}

.wl-menu-signature {
  margin-top: clamp(2.8rem, 3vw, 4.2rem);
  text-align: center;
  color: var(--drink-white);
}
.wl-menu-signature img {
  width: clamp(96px, 12vw, 148px);
  height: auto;
  margin-inline: auto;
}
.wl-menu-signature p {
  margin-top: .7rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wl-menu-signature span { margin-inline: .65rem; color: var(--drink-gold); }

.wl-body .wl-info {
  color: var(--drink-white);
  border-color: rgba(248, 211, 86, .42);
  background: rgba(248, 211, 86, .32);
}
.wl-body .wl-info div { background: rgba(7, 22, 34, .22); }
.wl-body .wl-info dt { color: var(--drink-gold); }
.wl-body .wl-info dd,
.wl-body .wl-info a { color: rgba(248, 250, 252, .86); }
.wl-body .wl-info a { border-bottom: 1px solid rgba(248, 211, 86, .7); }
.wl-body .wl-info a:hover { color: var(--drink-white); border-bottom-color: var(--drink-white); }

/* ---------- Bon à savoir ---------- */
.wl-info {
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  padding-top: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: 1px;
  background: var(--line-2);
  border-block: 1px solid var(--line-2);
}
.wl-info div { background: var(--porcelain); padding: 1.1rem .2rem 1.2rem; }
.wl-info dt {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--cobalt-2);
  margin-bottom: .35rem;
}
.wl-info dd { margin: 0; font-size: .93rem; line-height: 1.6; }

/* ---------- Bandeau final ---------- */
.wl-cta {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--slate);
  color: var(--porcelain);
  text-align: center;
}
.wl-cta-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  line-height: 1.12;
}
.wl-cta-lede { color: var(--on-dark); max-width: 46ch; margin: 1rem auto 0; }
.wl-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.9rem;
}

/* Sur petit écran, le compteur passe sous les filtres : sinon il pousse
   « À la bouteille » à la ligne et la barre collante double de hauteur. */
@media (max-width: 599px) {
  .wl-chip { padding-inline: .8rem; letter-spacing: .1em; }
  .wl-count {
    width: 100%;
    margin-left: 0;
    text-align: right;
    font-size: .7rem;
  }
}

@media (min-width: 600px) {
  .wl-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-info div { padding-inline: 1.2rem; }
}

@media (min-width: 768px) {
  .wl-tools-in {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.1rem;
  }
  /* Le nom porte le millésime ; les informations restent sur une ligne.
     Contenance et prix sont groupés à droite, comme sur la carte papier :
     une contenance isolée au milieu de la ligne se lit mal. */
  .w {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    row-gap: 0;
  }
  .w-meta { grid-column: 2; grid-row: 1; }
  .w-price { grid-column: 3; min-width: 3.5rem; text-align: right; }
}

/* ---------- Carte des boissons : deux colonnes ----------------------------
   La carte du client se lit sur deux colonnes par page. On reprend cette
   structure : elle raccourcit le défilement et rapproche l'écran du papier.
   Une rubrique ne doit jamais être coupée entre les deux colonnes.
   En dessous de 1000px, la colonne unique reste plus lisible.            */
@media (min-width: 1000px) {
  .wl-body > .wrap {
    column-count: 2;
    column-gap: clamp(2.5rem, 4vw, 5rem);
    column-rule: 3px dotted var(--drink-line);
  }
  .wl-grp {
    break-inside: avoid;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
  }
  .wl-menu-signature,
  .wl-info,
  .wl-empty {
    column-span: all;
  }
  /* La marge verticale est portée par margin-bottom en mode colonnes. */
  .wl-grp + .wl-grp { margin-top: 0; }
}
/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  [data-anim],
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover,
  .btn:active { transform: none; }
}

/* ---------- Agrandissement au clic ----------
   Une galerie de 312 px ne montre pas grand-chose : au clic, la photo
   passe en grand sur un fond graphite. Fermeture par Echap, par le bouton
   ou en cliquant a cote. */
/* =====================================================================
   PAGE BOISSONS · Offre Spritz
   La vidéo est verticale (1080 x 1920) : on la traite comme telle, en
   colonne étroite, plutôt que de la recadrer en paysage et d'y perdre
   le geste du service.
   ===================================================================== */
.promo {
  padding-block: var(--pad);
  background: var(--ink);
  color: var(--porcelain);
}
.promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.promo-video {
  margin: 0;
  justify-self: center;
  width: min(100%, 420px);
}
.promo-video-el {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--slate-2);
  border: 1px solid var(--line-d);
}
.promo-video-cap {
  margin-top: .7rem;
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.promo-title {
  font-size: var(--t-sec);
  margin-top: .2rem;
}
.promo-title em { font-style: italic; }
.promo-lede {
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--on-dark);
  max-width: 40ch;
  margin-top: 1.1rem;
}

/* Le prix : composé pour accueillir un vrai montant. Tant qu'il est en
   attente, la mention garde exactement la place que prendra le chiffre. */
.promo-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 1.8rem 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-d);
}
.promo-price-label {
  flex-basis: 100%;
  font-family: var(--sans);
  font-size: clamp(.95rem, .84rem + .45vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cobalt-2);
}
.promo-price-value {
  font-family: var(--display);
  font-size: clamp(3rem, 2rem + 4.4vw, 5.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--porcelain);
}
/* La devise, posée contre le montant : elle ne doit pas peser autant que lui. */
.promo-price-cur {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--cobalt-2);
  align-self: baseline;
}
/* .ph marque un contenu non confirmé : il ne doit jamais passer pour un prix. */
.promo-price-value.ph {
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  font-style: italic;
  color: var(--on-dark-2);
}
/* =====================================================================
   PAGE BOISSONS · La carte à rubriques
   La structure existe avant le contenu : le jour où la carte arrive, il
   n’y a que des lignes à ajouter, aucune mise en page à refaire.
   ===================================================================== */
.drinks { padding-block: var(--pad); }
.drinks-title {
  font-size: var(--t-h3);
  text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.drinks-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(2.4rem, 5vw, 4rem);
}
.dl-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cobalt);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.dl-empty {
  font-family: var(--display);
  font-style: italic;
  color: var(--muted);
  padding-top: .9rem;
}
/* Gabarit d'une ligne, prêt pour le jour où la carte arrive. */
.dl-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.dl-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-2);
}
.dl-nm { font-family: var(--display); font-size: 1.06rem; }
.dl-pr {
  font-family: var(--sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
  white-space: nowrap;
}
.drinks-note {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  text-align: center;
  font-size: .88rem;
  color: var(--muted);
}
.drinks-note a { color: var(--cobalt); border-bottom: 1px solid var(--cobalt-soft); }

@media (min-width: 768px) {
  .promo-grid { grid-template-columns: 420px minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .promo-video { justify-self: start; }
  .drinks-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .drinks-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   CARTE CLASSIQUE ET PAGE PINOT NOIR
   Le bleu et l'or restent l'option actuelle de la page Boissons. Cette
   variante rétablit la lecture claire d'origine sans dupliquer les données.
   Elle protège aussi la carte des vins des règles typographiques du PDF.
   ===================================================================== */
body.wine-page .wl-tools,
body.drinks-page.menu-classic .wl-tools {
  background: var(--porcelain);
  border-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
body.wine-page .wl-search input,
body.drinks-page.menu-classic .wl-search input {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line-2);
}
body.wine-page .wl-search input::placeholder,
body.drinks-page.menu-classic .wl-search input::placeholder { color: var(--muted); }
body.wine-page .wl-search input:focus,
body.drinks-page.menu-classic .wl-search input:focus { border-color: var(--cobalt); }
body.wine-page .wl-clear,
body.drinks-page.menu-classic .wl-clear { color: var(--muted); }
body.wine-page .wl-clear:hover,
body.drinks-page.menu-classic .wl-clear:hover { color: var(--ink); }
body.wine-page .wl-count,
body.drinks-page.menu-classic .wl-count { color: var(--muted); }

body.wine-page .wl-body,
body.drinks-page.menu-classic .wl-body {
  padding-block: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  background: var(--porcelain);
  color: var(--ink);
}
body.wine-page .wl-grp + .wl-grp,
body.drinks-page.menu-classic .wl-grp + .wl-grp {
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
}
body.wine-page .wl-grp-head,
body.drinks-page.menu-classic .wl-grp-head {
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--ink);
}
body.wine-page .wl-grp-title,
body.drinks-page.menu-classic .wl-grp-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body.wine-page .wl-grp-note,
body.drinks-page.menu-classic .wl-grp-note {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--cobalt);
}
body.wine-page .w,
body.drinks-page.menu-classic .w {
  column-gap: 1.5rem;
  row-gap: .15rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--line-2);
}
body.wine-page .w-name,
body.drinks-page.menu-classic .w-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body.wine-page .w-price,
body.drinks-page.menu-classic .w-price {
  color: var(--ink);
  font-size: .84rem;
}
body.wine-page .w-meta,
body.drinks-page.menu-classic .w-meta {
  font-size: .87rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}
body.wine-page .wl-empty,
body.drinks-page.menu-classic .wl-empty { color: var(--muted); }
body.drinks-page.menu-classic .wl-menu-signature { display: none; }

body.wine-page .wl-body .wl-info,
body.drinks-page.menu-classic .wl-body .wl-info {
  color: var(--ink);
  border-color: var(--line-2);
  background: var(--line-2);
}
body.wine-page .wl-body .wl-info div,
body.drinks-page.menu-classic .wl-body .wl-info div { background: var(--porcelain); }
body.wine-page .wl-body .wl-info dt,
body.drinks-page.menu-classic .wl-body .wl-info dt { color: var(--cobalt-2); }
body.wine-page .wl-body .wl-info dd,
body.wine-page .wl-body .wl-info a,
body.drinks-page.menu-classic .wl-body .wl-info dd,
body.drinks-page.menu-classic .wl-body .wl-info a { color: var(--ink); }
body.wine-page .wl-body .wl-info a,
body.drinks-page.menu-classic .wl-body .wl-info a {
  border-bottom-color: var(--cobalt-soft);
}

/* Les descriptions de vin sont longues : elles restent sous le nom et le
   prix afin de ne jamais réduire le domaine à une colonne de quelques lettres. */
body.wine-page .w {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: .25rem;
}
body.wine-page .w-meta { grid-column: 1 / -1; grid-row: 2; }
body.wine-page .w-price { grid-column: 2; grid-row: 1; }

@media (min-width: 1000px) {
  body.drinks-page.menu-classic .wl-body > .wrap {
    column-rule: 1px solid var(--line-2);
  }
  body.wine-page .wl-body > .wrap {
    column-count: 1;
    column-rule: 0;
  }
}

/* =====================================================================
   Repères de lecture de la carte
   Trois indications reprises de la maquette de référence : le régime, les
   plats de la maison, et l'accord conseillé. Elles se lisent d'un coup
   d'œil sans alourdir la ligne : le nom du plat reste le seul élément en
   gras optique, les repères vivent en dessous, plus petits.
   ===================================================================== */
/* Repères de carte — des signes, pas des vignettes.
   Le cadre et le fond venaient d'un composant d'interface ; sur une feuille
   de menu ils font du mobilier. Il ne reste que le pictogramme et le mot,
   dans leur couleur : assez pour être vus, assez discrets pour que le nom du
   plat reste le seul élément qui porte. La légende en tête de carte dit une
   fois ce que chaque signe veut dire — le mot lui-même n'apparaît plus
   dans le corps de la carte. */
.tag {
  display: inline-flex;
  align-items: center;
  margin-left: .4rem;
  line-height: 1;
  vertical-align: 1px;
}
/* Le signe seul : un peu plus grand qu'accompagné d'un mot, pour rester
   lisible. Le mot vit en .sr-only et dans l'infobulle ; la légende de tête
   dit ce qu'il signifie. */
.tag svg { width: 32px; height: 32px; flex: none; }
.tag-veg { color: var(--tag-vert); }
.tag-sig { color: var(--tag-bleu); }

/* L'accord tient sur une ligne : le verre gravé annonce le vin, le nom suit
   en italique de note. Ni filet, ni fond, ni libellé — celui-ci reste lisible
   aux lecteurs d'écran (.sr-only) et la légende l'explique à l'œil. */
.accord {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: .22rem 0 0;
  font-family: var(--font-note);
  font-style: italic;
  font-size: .98rem;
  line-height: 1.35;
  color: rgba(20, 22, 26, .66);
}
.accord svg {
  width: 11px;
  height: 11px;
  flex: none;
  transform: translateY(1px);
  color: var(--cobalt);
}
.accord-vin { font-style: italic; }


/* =====================================================================
   Le fil de la journée — section « L'esprit du Rond-Point »
   Heures à gauche, étape à droite : la lecture verticale suit le fil du
   jour. Le trait qui relie les étapes est une bordure, pas un décor en
   pseudo-élément : il survit à l'impression du menu.
   ===================================================================== */
.journee { list-style: none; margin: 0; padding: 0; }
.jr {
  display: grid;
  grid-template-columns: minmax(58px, 76px) minmax(0, 1fr);
  padding: 0 0 clamp(1.1rem, .8rem + .8vw, 1.6rem);
}
/* Le trait s'arrête à la dernière étape : la journée est finie. */
.jr:not(:last-child) .jr-h { border-right: 1px solid var(--line-2); }
.jr-h {
  grid-row: 1 / span 2;
  margin: 0;
  padding: .12rem clamp(.9rem, .6rem + 1vw, 1.4rem) 0 0;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cobalt);
  text-align: right;
  white-space: nowrap;
}
.jr-c { min-width: 0; padding-left: clamp(.9rem, .6rem + 1vw, 1.4rem); }
.jr-t {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.3;
}
.jr-t a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .18s ease, color .18s ease;
}
.jr-t a:hover,
.jr-t a:focus-visible { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.jr-d {
  margin: .25rem 0 0;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}

/* =====================================================================
   Filet de conduite entre le plat et son prix
   Repris de la maquette de référence : il relie l'œil du nom au chiffre,
   comme sur une carte imprimée. Décoratif (aria-hidden), il disparaît là
   où la ligne n'est pas en deux colonnes — le plat du jour est centré.
   ===================================================================== */
.ci .leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: baseline;
  margin: 0 .55rem;
  border-bottom: 1.5px dotted var(--line-2);
  transform: translateY(-.3rem);
}
#plat-du-jour .leader { display: none; }

/* Sous 600px, le filet mange la place du nom : on le retire. */
@media (max-width: 600px) {
  .ci .leader { display: none; }
}

/* =====================================================================
   PROPOSITION A : Nuit graphite
   Fond sombre (slate-2) + accents cobalt clair + noms porcelain
   ===================================================================== */
body.drinks-page.menu-graphite .wl-head-menu {
  background: linear-gradient(180deg, #20242B 0%, #1B1E24 100%);
  border-bottom-color: rgba(110, 139, 212, .22);
}
body.drinks-page.menu-graphite .crumb {
  color: rgba(236, 238, 241, .62);
}
body.drinks-page.menu-graphite .crumb a {
  color: rgba(236, 238, 241, .62);
}
body.drinks-page.menu-graphite .wl-note {
  color: rgba(236, 238, 241, .62);
  border-top-color: rgba(110, 139, 212, .22);
}
body.drinks-page.menu-graphite .menu-mode-switch {
  background: rgba(32, 36, 43, .4);
  border-color: rgba(110, 139, 212, .32);
}
body.drinks-page.menu-graphite .menu-mode-switch button {
  color: rgba(236, 238, 241, .72);
}
body.drinks-page.menu-graphite .menu-mode-switch button[aria-pressed="true"] {
  background: var(--cobalt);
  color: var(--porcelain);
}
body.drinks-page.menu-graphite .wl-tools {
  background: #20242B;
  border-top-color: rgba(110, 139, 212, .22);
  border-bottom-color: rgba(110, 139, 212, .22);
  color: rgba(236, 238, 241, .82);
}
body.drinks-page.menu-graphite .wl-search input {
  color: var(--porcelain);
  background: rgba(32, 36, 43, .6);
  border-color: rgba(110, 139, 212, .32);
}
body.drinks-page.menu-graphite .wl-search input::placeholder {
  color: rgba(236, 238, 241, .42);
}
body.drinks-page.menu-graphite .wl-search input:focus {
  border-color: var(--cobalt-2);
}
body.drinks-page.menu-graphite .wl-clear {
  color: rgba(236, 238, 241, .52);
}
body.drinks-page.menu-graphite .wl-clear:hover {
  color: var(--porcelain);
}
body.drinks-page.menu-graphite .wl-count {
  color: var(--cobalt-2);
}
body.drinks-page.menu-graphite .wl-body {
  background: linear-gradient(180deg, #20242B 0%, #1B1E24 100%);
  color: var(--porcelain);
}
body.drinks-page.menu-graphite .wl-grp-head {
  border-bottom-color: rgba(110, 139, 212, .32);
}
body.drinks-page.menu-graphite .wl-grp-title {
  color: var(--cobalt-2);
}
body.drinks-page.menu-graphite .w-name {
  color: var(--porcelain);
}
body.drinks-page.menu-graphite .w-meta {
  color: var(--cobalt-2);
}
body.drinks-page.menu-graphite .w-price {
  color: var(--cobalt-2);
}

/* =====================================================================
   PROPOSITION B : Cobalt nuit
   Fond bleu foncé + accents cobalt éclaircis + noms porcelain
   ===================================================================== */
body.drinks-page.menu-cobalt .wl-head-menu {
  background: linear-gradient(180deg, #222E52 0%, #1C2440 100%);
  border-bottom-color: rgba(155, 176, 232, .28);
}
body.drinks-page.menu-cobalt .crumb {
  color: rgba(236, 238, 241, .6);
}
body.drinks-page.menu-cobalt .crumb a {
  color: rgba(236, 238, 241, .6);
}
body.drinks-page.menu-cobalt .wl-note {
  color: rgba(236, 238, 241, .6);
  border-top-color: rgba(155, 176, 232, .28);
}
body.drinks-page.menu-cobalt .menu-mode-switch {
  background: rgba(34, 46, 82, .4);
  border-color: rgba(155, 176, 232, .32);
}
body.drinks-page.menu-cobalt .menu-mode-switch button {
  color: rgba(236, 238, 241, .7);
}
body.drinks-page.menu-cobalt .menu-mode-switch button[aria-pressed="true"] {
  background: #9BB0E8;
  color: #1C2440;
}
body.drinks-page.menu-cobalt .wl-tools {
  background: #222E52;
  border-top-color: rgba(155, 176, 232, .28);
  border-bottom-color: rgba(155, 176, 232, .28);
  color: rgba(236, 238, 241, .8);
}
body.drinks-page.menu-cobalt .wl-search input {
  color: var(--porcelain);
  background: rgba(34, 46, 82, .6);
  border-color: rgba(155, 176, 232, .32);
}
body.drinks-page.menu-cobalt .wl-search input::placeholder {
  color: rgba(236, 238, 241, .4);
}
body.drinks-page.menu-cobalt .wl-search input:focus {
  border-color: #9BB0E8;
}
body.drinks-page.menu-cobalt .wl-clear {
  color: rgba(236, 238, 241, .5);
}
body.drinks-page.menu-cobalt .wl-clear:hover {
  color: var(--porcelain);
}
body.drinks-page.menu-cobalt .wl-count {
  color: #9BB0E8;
}
body.drinks-page.menu-cobalt .wl-body {
  background: linear-gradient(180deg, #26335C 0%, #1C2440 100%);
  color: var(--porcelain);
}
body.drinks-page.menu-cobalt .wl-grp-head {
  border-bottom-color: rgba(155, 176, 232, .32);
}
body.drinks-page.menu-cobalt .wl-grp-title {
  color: #9BB0E8;
}
body.drinks-page.menu-cobalt .w-name {
  color: var(--porcelain);
}
body.drinks-page.menu-cobalt .w-meta {
  color: #9BB0E8;
}
body.drinks-page.menu-cobalt .w-price {
  color: #9BB0E8;
}

/* =====================================================================
   PROPOSITION C : Ink continu
   Fond uni var(--ink), identique à la section Spritz juste au-dessus :
   aucune rupture de teinte à la jointure entre les deux sections.
   ===================================================================== */
body.drinks-page.menu-ink .wl-head-menu {
  background: var(--ink);
  border-bottom-color: rgba(110, 139, 212, .22);
}
body.drinks-page.menu-ink .crumb {
  color: rgba(236, 238, 241, .62);
}
body.drinks-page.menu-ink .crumb a {
  color: rgba(236, 238, 241, .62);
}
body.drinks-page.menu-ink .wl-note {
  color: rgba(236, 238, 241, .62);
  border-top-color: rgba(110, 139, 212, .22);
}
body.drinks-page.menu-ink .menu-mode-switch {
  background: rgba(27, 30, 36, .5);
  border-color: rgba(110, 139, 212, .32);
}
body.drinks-page.menu-ink .menu-mode-switch button {
  color: rgba(236, 238, 241, .72);
}
body.drinks-page.menu-ink .menu-mode-switch button[aria-pressed="true"] {
  background: var(--porcelain);
  color: var(--ink);
}
body.drinks-page.menu-ink .wl-body {
  background: var(--ink);
  color: var(--porcelain);
}
body.drinks-page.menu-ink .wl-grp-head {
  border-bottom-color: rgba(110, 139, 212, .32);
}
body.drinks-page.menu-ink .wl-grp-title {
  color: var(--cobalt-2);
}
body.drinks-page.menu-ink .w-name {
  color: var(--porcelain);
}
body.drinks-page.menu-ink .w-meta {
  color: var(--cobalt-2);
}
body.drinks-page.menu-ink .w-price {
  color: var(--cobalt-2);
}

/* Playfair Display — auto-hébergée, à partir des fichiers fournis par le
   client (dossier typo/). Contrairement aux autres polices du site, elle ne
   passe pas par Google Fonts : le texte s'affiche donc sans dépendance à un
   tiers, et sans que l'adresse IP du visiteur parte chez Google.
   Les .ttf d'origine (230 Ko pièce) sont réduits au latin et compressés en
   woff2 : ~46 Ko par graisse. Seules les trois graisses réellement présentes
   dans le dossier sont déclarées — pas de 500, qui manque à l'envoi, afin que
   le navigateur n'en fabrique jamais une fausse. */
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- « Blanc Playfair » : le menu blanc, en Playfair Display --------------
   Bouton de comparaison. La classe menu-classic reste posée (voir le script
   de boissons.html) : mise en page, couleurs, filets et espacements sont donc
   rigoureusement ceux du menu blanc, et seules les polices changent. Ce qu'on
   compare est ainsi la typographie seule, rien d'autre.

   Ce que Playfair apporte face à l'Italiana actuelle : de vraies graisses.
   Italiana n'existe qu'en 400, la hiérarchie d'une carte dense ne peut donc
   reposer que sur le corps. Ici le titre de rubrique passe en 700 et le nom
   du produit en 500 : trois niveaux de lecture (rubrique / produit / prix)
   se distinguent sans avoir à grossir quoi que ce soit. */
/* La page des Pinot Noir suit la même typographie. Elle partage déjà la mise
   en page claire du menu blanc (ses règles sont écrites conjointement plus
   haut) : elle hérite donc de Playfair sans condition de mode, cette page
   n'ayant pas de sélecteur de présentation. */
body.drinks-page.menu-playfair .wl-title,
body.drinks-page.menu-playfair .wl-grp-title,
body.drinks-page.menu-playfair .w-name,
body.wine-page .wl-title,
body.wine-page .wl-grp-title,
body.wine-page .w-name {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
body.drinks-page.menu-playfair .wl-grp-title,
body.wine-page .wl-grp-title {
  /* 700 au lieu du 400 de l'Italiana : la rubrique tient son rang à corps
     égal. Le léger resserrement compense la chasse plus large de Playfair. */
  font-weight: 700;
  letter-spacing: -.01em;
}
body.drinks-page.menu-playfair .w-name,
body.wine-page .w-name {
  /* 400 réel, et non le 500 d'abord essayé : cette graisse n'est pas dans les
     fichiers fournis, le navigateur l'aurait donc simulée. Le contraste
     400 / 700 avec la rubrique suffit largement à hiérarchiser. */
  font-weight: 400;
  letter-spacing: -.005em;
}
body.drinks-page.menu-playfair .w-price,
body.wine-page .w-price {
  /* Le prix passe lui aussi en Playfair, mais il ne pouvait pas y rester à
     .84rem : les chiffres de cette police sont petits sur l'œil, et à cette
     taille le prix devenait l'élément le plus faible de la ligne — l'inverse
     de ce qu'on attend d'une carte. Il reste donc à 1.35rem, un cran au-dessus
     du nom qu'il accompagne (1.22rem) : c'est le point d'ancrage du regard
     quand on parcourt la colonne.
     La graisse, elle, redescend à 400 et le chiffre passe en italique — le
     corps fait le travail de présence, l'italique celui de l'élégance, comme
     sur une carte imprimée. L'italique est un vrai fichier de la fonte, jamais
     une inclinaison calculée par le navigateur.
     Chiffres alignés (lining) et tabulaires : même largeur pour tous, la
     colonne des prix reste droite d'une ligne à l'autre. */
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
}

/* =====================================================================
   TYPOGRAPHIE DE LA CARTE DES PLATS — Playfair Display
   ---------------------------------------------------------------------
   Retenue après comparaison avec la typographie précédente (DM Serif
   Display pour les noms, Poppins pour les prix). La classe est posée en dur
   sur <body> dans index.html ; le sélecteur qui servait à comparer les deux
   a été retiré, comme l'a été celui à six modes de boissons.html.

   Seules les polices changent : grille, filets, couleurs et espacements
   de la feuille restent intacts, pour que la comparaison ne porte que sur
   la typographie.
   ===================================================================== */

body.carte-playfair .menu-head-name,
body.carte-playfair .cat-title,
body.carte-playfair .ci .nm,
body.carte-playfair .ci .pr {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
body.carte-playfair .menu-head-name {
  font-weight: 700;
}
body.carte-playfair .cat-title {
  /* Le pendant de .wl-grp-title des boissons : la rubrique quitte la petite
     capitale bleue en sans-serif pour un vrai titre gras, à l'encre. */
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--menu-ink);
}
body.carte-playfair .ci .nm,
body.carte-playfair .ci .de {
  /* Interlettrage ouvert sur le texte courant : +0.025em. Playfair a une
     chasse serrée et un fort contraste ; aérer les lettres allège la tache
     de gris et donne à la feuille le pas d'un menu imprimé plutôt que celui
     d'un paragraphe d'écran. */
  letter-spacing: .025em;
}
body.carte-playfair .ci .nm {
  font-weight: 400;
}
body.carte-playfair .ci .pr {
  /* Réglages repris à l'identique de .w-price de la carte des boissons :
     mêmes corps, graisse, italique et chiffres, pour que les deux cartes
     parlent d'une seule voix. Le corps fait la présence, l'italique le ton ;
     les chiffres tabulaires gardent la colonne droite. */
  font-weight: 400;
  font-style: italic;
  font-size: 1.35rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
}

/* Lignes à deux prix : rendre la place au texte sans rien rapetisser.
   Un prix double (« 16.– / 26.– ») est 68px plus large qu'un simple et les
   prend au nom, qui se retrouve comprimé. Plutôt que de réserver une colonne
   fixe — ce qui rétrécissait TOUTES les lignes —, on récupère la place dans
   l'habillage : l'écart entre les blocs et les marges du filet pointillé
   pèsent 62px à eux seuls, pour un rôle purement décoratif. Réduits, ils
   rendent leur largeur au texte, et les lignes à deux prix cessent d'être
   les parentes pauvres. */
body.carte-playfair .ci {
  gap: .6rem;
}
body.carte-playfair .ci .leader {
  min-width: 1rem;
  margin: 0 .3rem;
}

/* Icônes et accords de vin.
   La pastille végétarienne est fixée à 32px dans le style de base : à côté
   d'un Playfair de ~17px elle pèse trop lourd et part seule à la ligne dans
   les colonnes étroites. On la dimensionne donc en « em », pour qu'elle
   suive le texte au lieu de le dominer.
   L'accord de vin, lui, quitte le Cormorant Garamond : c'était la seule voix
   étrangère au milieu de la feuille en Playfair. */
body.carte-playfair .tag svg {
  width: 1.3em;
  height: 1.3em;
}
body.carte-playfair .accord {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1rem;
}
body.carte-playfair .accord svg {
  /* Le verre gravé grandit un peu pour ne pas disparaître sous l'italique. */
  width: 13px;
  height: 13px;
  transform: translateY(1.5px);
}

/* La pastille ne doit jamais tomber seule à la ligne. L'espace insécable
   posé dans le HTML ne suffit pas : en display:inline-flex, .tag est une
   boîte atomique, et le navigateur garde une occasion de rupture juste
   avant elle. Remise dans le flux inline, l'insécable reprend son effet et
   l'icône suit le dernier mot. */
/* .nb enveloppe le dernier mot ET la pastille : le couple devient une seule
   unité insécable, et l'icône ne peut plus tomber seule à la ligne. Ni
   l'espace insécable seul, ni display:inline n'y suffisaient — le navigateur
   gardait une occasion de rupture avant la boîte de l'icône. */
.nb { white-space: nowrap; }
body.carte-playfair .tag {
  /* On GARDE inline-flex. La feuille de style remet tous les svg en
     display:block ; en inline-flex, .tag encapsule ce bloc dans une boîte
     inline atomique. Repassée en display:inline, elle exposait le bloc, qui
     forçait un retour à la ligne quoi qu'on fasse. */
  margin-left: 0; /* l'insécable du HTML fait déjà l'espacement */
}

/* L'en-tête de feuille se rapproche des rubriques : le gap de la grille
   (jusqu'à 3,2rem) s'ajoutait à la marge du bloc, ce qui creusait un vide
   sous le verre gravé. */
body.carte-playfair .menu-head {
  margin-bottom: -.8rem;
}

/* --- Ardoise du jour : une composition, pas une liste ---------------------
   Le panneau « Plat du jour » ne porte que trois ou quatre lignes, centrées
   sur toute la largeur de la feuille. Les corps calibrés pour la carte —
   dense, sur deux colonnes — y paraissent perdus au milieu du blanc. On les
   monte d'environ un quart : l'ardoise se lit alors comme une affichette
   posée sur la table, ce qu'elle est, et non comme un extrait de la carte.
   Portée limitée à #plat-du-jour : l'onglet « La carte » ne bouge pas. */
body.carte-playfair #plat-du-jour .cat-title {
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem);
}
body.carte-playfair #plat-du-jour .nm {
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem);
  line-height: 1.3;
}
body.carte-playfair #plat-du-jour .de {
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
}
body.carte-playfair #plat-du-jour .pr {
  font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
}
body.carte-playfair #plat-du-jour .pj-formule {
  font-size: 1.1rem;
}

/* --- Carte des boissons : resserrer l'en-tête ----------------------------
   Entre le titre « Carte des boissons » et la première rubrique, il y avait
   116 px : 52 px de padding sous le bandeau plus 64 px en tête de liste. Sur
   une page qui enchaîne directement une offre, un titre et une carte dense,
   ce vide coupe la lecture au lieu de la ponctuer.

   Le padding du haut, lui, ne bouge quasiment pas : garder plus d'air
   au-dessus du titre qu'en dessous le fait descendre légèrement dans son
   bandeau et le rapproche du filet qui le souligne. */
body.drinks-page.menu-playfair .wl-head-menu {
  padding-top: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  padding-bottom: clamp(1.1rem, .8rem + 1.1vw, 1.8rem);
}
body.drinks-page.menu-playfair .wl-body {
  padding-top: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
}

/* =====================================================================
   ESSAI TYPOGRAPHIQUE — section « L'esprit du Rond-Point »
   ---------------------------------------------------------------------
   Transpose à cette section la typographie retenue pour les cartes. Même
   partage des rôles : ce qui se lit passe en Playfair, ce qui étiquette
   reste en sans-serif. Les heures du fil de la journée, l'intitulé de
   section et les libellés des faits gardent donc Sora — comme la
   contenance « 25cl » sur la carte des boissons.
   ===================================================================== */
.spirit-typo-switch,
.typo-switch {
  display: inline-flex;
  gap: .2rem;
  margin-bottom: 1.4rem;
  padding: .25rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
}
.spirit-typo-switch button,
.typo-switch button {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.spirit-typo-switch button[aria-pressed="true"],
.typo-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--porcelain);
}

/* Le TITRE reste en Italiana, comme à l'origine : essayé en Playfair 700,
   il perdait le caractère Art déco qui fait la signature de la maison. Seul
   le corps de la section change de voix. Il garde donc son unique graisse,
   mais ce n'est pas gênant ici : contrairement aux cartes, rien ne se lit à
   côté de lui à la même taille, la hiérarchie tient par le corps seul. */
body.spirit-playfair .spirit-intro,
body.spirit-playfair .spirit-facts dd,
body.spirit-playfair .jr-t {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
body.spirit-playfair .spirit-intro,
body.spirit-playfair .spirit-facts dd {
  /* Même interlettrage ouvert que le texte courant des cartes.
     Le 400 est explicite : l'intro héritait d'un font-weight 300, graisse
     absente de nos fichiers Playfair. Le navigateur retombait déjà sur le
     400 — aucune graisse n'est fabriquée — mais mieux vaut déclarer ce qui
     existe que laisser une valeur qui ne correspond à aucun fichier. */
  font-weight: 400;
  letter-spacing: .025em;
}
body.spirit-playfair .jr-t {
  /* 600 : le titre d'étape domine sa description, restée en sans-serif. */
  font-weight: 600;
  letter-spacing: .01em;
}

/* Playfair Display SC — la version à petites capitales de la même famille,
   fournie dans le même envoi client. Réservée aux titres : sur une phrase
   longue elle ralentirait la lecture, mais sur un titre de section elle
   donne le ton d'une enseigne gravée plutôt que d'un texte agrandi. */
@font-face {
  font-family: "Playfair Display SC";
  src: url("assets/fonts/PlayfairDisplaySC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display SC";
  src: url("assets/fonts/PlayfairDisplaySC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display SC";
  src: url("assets/fonts/PlayfairDisplaySC-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Variante non retenue : titre en petites capitales. Conservée parce que les
   fichiers SC sont déjà convertis et qu'elle ne coûte rien tant qu'aucun
   <body> ne porte la classe. */
body.spirit-titre-sc .sec-title,
body.spirit-titre-sc .sec-title em {
  font-family: "Playfair Display SC", Georgia, "Times New Roman", serif;
}
body.spirit-titre-sc .sec-title {
  /* Les petites capitales portent déjà la couleur du titre : le 700 les
     alourdirait. On redescend en 400 et on ouvre légèrement l'interlettrage,
     comme le veut l'usage pour une ligne en capitales. */
  font-weight: 400;
  letter-spacing: .02em;
}
body.spirit-titre-sc .sec-title em {
  font-weight: 400;
}


/* --- Essais typographiques : sections « Pinot Noir » et « Nous trouver » ---
   Même règle que pour « L'esprit du Rond-Point » : ce qui était en Italiana
   passe en Playfair, SAUF le titre de section, qui garde sa signature Art
   déco. Ce qui est déjà en sans-serif — descriptions, libellés, horaires —
   ne bouge pas : ce sont des repères, pas du texte suivi.
   Variantes retenues, figées par une classe sur <body>. */
/* Le titre ET le chapô restent en Italiana, comme à l'origine : c'est le
   bloc éditorial qui porte la voix de la maison, et Playfair l'aplatissait.
   Seul l'encart des trois vins change — il doit s'accorder avec la page
   Pinot Noir, qui est en Playfair depuis ce matin. */
/* Tout le bloc éditorial de gauche — titre, chapô ET corps — reste dans sa
   version d'origine : essayés en Playfair, puis élargis, ils perdaient la
   voix de la maison. Seul l'encart des trois vins change de typographie. */
body.pinot-playfair .pk-nm {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: .025em;
}
body.pinot-playfair .pk-pr {
  /* Les mêmes « 49.– » que sur la carte des vins : ils en reprennent le
     traitement, italique compris, pour que l'encart de l'accueil et la page
     dédiée ne se contredisent pas. */
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.15rem;
  font-variant-numeric: lining-nums tabular-nums;
}

body.adresse-playfair .adresse-addr,
body.adresse-playfair .adresse-hours h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: .025em;
}

/* =====================================================================
   Mode édition — visible seulement pour un compte connecté à l'admin
   (assets/edition.js). Rien de tout cela n'existe pour un visiteur.
   ===================================================================== */

/* Le crayon suit la fin du nom, à six pixels du dernier caractère, sur la
   même ligne : glissé dans l'insécable .nb par le script, il ne se retrouve
   jamais seul sur une ligne. Discret au repos, franc au survol : il doit se
   voir sans concurrencer le nom du plat. */
.crayon {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-block;
  margin-left: 6px;
  padding: 0 .35em;
  font: 500 .78em var(--sans, system-ui, sans-serif);
  line-height: 1.5;
  color: var(--cobalt);
  background: rgba(62, 90, 160, .10);
  border: 1px solid rgba(62, 90, 160, .35);
  border-radius: 4px;
  text-decoration: none;
  vertical-align: .1em;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.crayon:disabled { opacity: .5; cursor: progress; }
.crayon:hover,
.crayon:focus-visible {
  color: var(--porcelain);
  background: var(--cobalt);
  border-color: var(--cobalt);
  outline: none;
}
/* Sur fond sombre (hero, pied de page), on inverse. */
.wl-ink .crayon, .menu-ink .crayon { color: var(--porcelain); border-color: rgba(236, 238, 241, .4); background: rgba(236, 238, 241, .1); }

.ajouter-ici {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  display: inline-block;
  margin: .5rem 0 0;
  padding: .3rem .7rem;
  font: 500 .74rem var(--sans, system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cobalt);
  border: 1px dashed rgba(62, 90, 160, .5);
  border-radius: 4px;
  text-decoration: none;
}
.ajouter-ici:hover,
.ajouter-ici:focus-visible { color: var(--porcelain); background: var(--cobalt); border-style: solid; outline: none; }

/* Le bandeau : un rappel discret en bas à droite, au-dessus de la barre
   mobile quand elle est là. */
.edition-barre {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-sticky-tools);
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: calc(100vw - 2rem);
  padding: .55rem .6rem .55rem .9rem;
  font: 400 .8rem/1.3 var(--sans, system-ui, sans-serif);
  color: var(--porcelain);
  background: var(--ink);
  border: 1px solid rgba(236, 238, 241, .18);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.edition-barre-lien {
  flex: none;
  padding: .35rem .7rem;
  color: var(--ink);
  background: var(--porcelain);
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}
.edition-barre-lien:hover,
.edition-barre-lien:focus-visible { background: #fff; outline: none; }
@media (max-width: 767px) {
  .edition-barre { bottom: calc(74px + .75rem + env(safe-area-inset-bottom)); left: 1rem; }
  .edition-barre-txt { display: none; }
}
/* La fenêtre d'édition : une carte sobre, centrée, sur un voile. Les champs
   reprennent la police de lecture du site ; le nom est en Playfair pour qu'on
   reconnaisse ce qu'on modifie. */
.edition-fenetre {
  width: min(92vw, 30rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--porcelain);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  font: 400 .95rem/1.5 var(--sans, system-ui, sans-serif);
}
.edition-fenetre::backdrop { background: rgba(27, 30, 36, .55); }
.edition-fenetre.ef-occupe { opacity: .7; pointer-events: none; }
.ef-form { display: grid; gap: .9rem; padding: 1.3rem 1.4rem 1.2rem; }
.ef-sur {
  margin: 0 0 .1rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.ef-champ { display: grid; gap: .3rem; }
.ef-label { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(27, 30, 36, .7); }
.ef-aide  { font-size: .76rem; color: rgba(27, 30, 36, .6); }
.ef-champ input, .ef-champ textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(27, 30, 36, .25);
  border-radius: 4px;
}
.ef-champ input[name="titre"] { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; }
.ef-champ input:focus, .ef-champ textarea:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); }
.ef-champ textarea { resize: vertical; min-height: 3.2rem; }
.ef-case { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.ef-case input { width: 1.05rem; height: 1.05rem; accent-color: var(--cobalt); }
.ef-erreur { margin: 0; padding: .55rem .7rem; font-size: .86rem; color: #7a2418; background: #f6e3df; border-radius: 4px; }
.ef-pied { display: flex; gap: .6rem; align-items: center; margin-top: .2rem; }
.ef-pied button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: .6rem 1.1rem;
  font: 500 .8rem var(--sans, system-ui, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid transparent;
}
.ef-ok  { color: var(--porcelain); background: var(--cobalt); }
.ef-ok:hover, .ef-ok:focus-visible { background: #2f4784; outline: none; }
.ef-non { color: var(--ink); background: transparent; border-color: rgba(27, 30, 36, .3); }
.ef-non:hover, .ef-non:focus-visible { background: rgba(27, 30, 36, .06); outline: none; }
.ef-sup { margin-left: auto; color: #7a2418; background: transparent; }
.ef-sup:hover, .ef-sup:focus-visible { background: #f6e3df; outline: none; }
.ef-pied button:disabled { opacity: .55; cursor: progress; }
@media (max-width: 480px) {
  .edition-fenetre { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .ef-pied { flex-wrap: wrap; }
}

/* Le plat du jour vide, en édition : un encart qui dit l'état, le bouton de
   reprise, puis les rubriques vides prêtes à recevoir leurs lignes. */
.pj-vide { grid-column: 1 / -1; display: grid; gap: 1.2rem; }
.pj-vide-txt {
  margin: 0;
  padding: .8rem 1rem;
  font: 400 .9rem/1.55 var(--sans, system-ui, sans-serif);
  color: var(--ink);
  background: rgba(62, 90, 160, .08);
  border-left: 3px solid var(--cobalt);
}
.pj-reprendre {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  justify-self: start;
  padding: .7rem 1.2rem;
  font: 500 .78rem var(--sans, system-ui, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--porcelain);
  background: var(--cobalt);
  border: 0;
  border-radius: 4px;
}
.pj-reprendre:hover, .pj-reprendre:focus-visible { background: #2f4784; outline: none; }
.pj-reprendre:disabled { opacity: .55; cursor: progress; }
.pj-vide-sec { opacity: .85; }

/* La ligne qu'on vient d'enregistrer : un halo qui s'efface, le temps de la
   retrouver. Sans animation pour qui l'a demandé. */
.edition-cible {
  animation: edition-halo 2.6s ease-out;
  border-radius: 4px;
}
@keyframes edition-halo {
  0%   { box-shadow: 0 0 0 4px rgba(62, 90, 160, .45); background-color: rgba(62, 90, 160, .10); }
  100% { box-shadow: 0 0 0 4px rgba(62, 90, 160, 0);   background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .edition-cible { animation: none; box-shadow: 0 0 0 3px rgba(62, 90, 160, .45); }
}
@media print { .crayon, .ajouter-ici, .edition-barre { display: none; } }

/* La date de l'ardoise, en clair au-dessus des rubriques du plat du jour. */
.pj-date {
  grid-column: 1 / -1;
  margin: -.6rem 0 .2rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cobalt);
}