/* ==========================================================================
   SANAKYO — Bar à tapas asiatique (proposition de refonte)
   Design tokens : noir chaud + or + accent terracotta lantern
   ========================================================================== */

/* ── Polices auto-hebergees ────────────────────────────────────────────
   Elles etaient chargees depuis Google Fonts, ce qui transmettait l'adresse
   IP de chaque visiteur a Google avant tout consentement. Les fichiers sont
   maintenant servis par le site lui-meme.

   Ce sont des polices variables : un seul fichier couvre toutes les graisses,
   au lieu d'un fichier par poids. Pour Fraunces on prend la version avec l'axe
   opsz, celui que servait Google : il ajuste le dessin selon la taille du
   texte, ce qui compte ici ou la meme police va du titre geant au petit
   libelle. L'unicode-range fait que latin-ext n'est telecharge que si un
   caractere l'exige, donc jamais pour du francais courant.

   Source : @fontsource-variable (jsDelivr), memes fichiers que Google Fonts,
   licence SIL Open Font. Convention de nommage partagee avec les autres
   sites du dossier.

   L'ordre compte : latin-ext est declare AVANT latin. Les deux jeux se
   recouvrent sur quelques caracteres, dont le "oe" de "boeuf", et c'est la
   derniere declaration qui l'emporte. Inverser les deux fait telecharger
   59 Ko de latin-ext pour cette seule lettre. ------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Palette : ancres de la marque (noir/or) + chaleur du concept tapas (terracotta) */
  --ink:            #14100e;   /* noir chaud, base sombre */
  --ink-2:          #1f1815;   /* noir légèrement plus clair */
  --ink-3:          #2b221d;   /* noir de surface, cartes */
  --paper:          #f7f2e9;   /* crème chaud, base claire */
  --paper-2:        #ece3d4;   /* crème plus profond */
  --gold:           #d4af6a;   /* or éclatant, accent premium */
  --gold-2:         #b08d47;   /* or profond, hover */
  --lantern:        #c8553d;   /* terracotta / rouge lantern, accent chaleureux */
  --lantern-2:      #a53f28;   /* lantern profond, hover */
  --divider:        color-mix(in srgb, var(--paper) 16%, transparent);
  --divider-dark:   color-mix(in srgb, var(--ink) 14%, transparent);

  /* Typographies */
  --font-display:   "Fraunces", Georgia, serif;
  --font-body:      "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Espacements (échelle sur base 8) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 72px;
  --space-12: 104px;

  --radius-sm: 2px;
  --radius-md: 4px;

  --shadow-warm: 0 24px 70px color-mix(in srgb, #000 45%, transparent);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Typographie */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(46px, 7vw, 92px); font-weight: 800; }
h2 { font-size: clamp(34px, 4.8vw, 58px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }
h4 { font-size: clamp(18px, 1.8vw, 22px); }
p  { margin: 0 0 var(--space-3); max-width: 62ch; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; }

/* Layout helper */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

/* ── Barre de progression de lecture ───────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--lantern), var(--gold));
  z-index: 200;
  transition: width 100ms linear;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background 250ms var(--ease), color 250ms var(--ease),
              border-color 250ms var(--ease), transform 250ms var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary   { background: var(--lantern); color: var(--paper); border-color: var(--lantern); }
.btn-primary:hover   { background: var(--lantern-2); border-color: var(--lantern-2); }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn-ghost-light  { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.btn-ghost-light:hover  { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-ghost-dark  { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.btn-ghost-dark:hover  { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-sm { padding: 11px 20px; font-size: 12px; }

/* Sections thèmes */
.section-dark  { background: var(--ink); color: var(--paper); }
.section-dark .eyebrow { color: var(--gold); }
.section-dark p { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--paper); }
.section-light { background: var(--paper); color: var(--ink); }
.section-cream { background: var(--paper-2); color: var(--ink); }

section { padding: var(--space-12) 0; }

/* ── Header ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  color: var(--paper);
  transition: background 400ms var(--ease), border-color 400ms var(--ease);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border-bottom-color: var(--divider);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
/* Le logo remplace le texte "Sanakyo" depuis le 13 septembre 2026. Les
   dimensions sont portees par l'attribut width/height du <img> pour que le
   navigateur reserve la place avant le chargement : sans ca l'en-tete saute
   au moment ou l'image arrive. */
.brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  flex: none;
}
.brand img {
  height: 46px;
  width: auto;
  display: block;
}
@media (max-width: 620px) {
  .brand img { height: 38px; }
}
.brand-pied { margin-bottom: var(--space-3); }
.brand-pied img { height: 60px; }
.nav-desktop { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.nav-desktop a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  transition: color 250ms var(--ease);
  padding: 4px 0;
  white-space: nowrap;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 300ms var(--ease);
}
.nav-desktop a:hover { color: var(--gold); }
.nav-desktop a:hover::after { width: 100%; }
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--paper);
  align-items: center;
  justify-content: center;
}
/* Logo, six liens et numero tiennent sur une ligne au-dessus de 900 px.
   Un septieme lien fait deborder l'en-tete sous 1080 px environ : avec le
   lien "Salon de the", retire le 2026-09-30, le seuil etait monte a 1100. */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .burger { display: inline-flex; }
  .header-cta { display: none; }
}
.mobile-menu {
  display: none;
  background: var(--ink);
  border-bottom: 1px solid var(--divider);
  padding: var(--space-4) 0;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: 15px 0;
  color: var(--paper);
  font-size: 17px;
  border-bottom: 1px solid var(--divider);
}
.mobile-menu .btn { margin-top: var(--space-4); width: 100%; }

/* ── Hero plein écran ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  /* Passe sous le header transparent. --header-h est mesurée en JS
     pour rester juste quelles que soient les polices et la largeur. */
  margin-top: calc(-1 * var(--header-h, 75px));
  padding-top: var(--header-h, 75px);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 62%, transparent) 0%,
      color-mix(in srgb, var(--ink) 32%, transparent) 35%,
      color-mix(in srgb, var(--ink) 88%, transparent) 82%,
      var(--ink) 100%),
    url("./images/hero-bar.webp") center/cover no-repeat;
  z-index: -2;
  animation: hero-zoom 22s var(--ease) forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 45% at 15% 85%, color-mix(in srgb, var(--lantern) 26%, transparent), transparent 62%),
    radial-gradient(45% 35% at 88% 12%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
  z-index: -1;
  pointer-events: none;
}
.hero-content {
  /* padding-top/bottom et non le raccourci "padding" : .hero-content porte
     aussi la classe .wrap, et un raccourci ecrase sa marge laterale. Sur
     grand ecran ca ne se voit pas, le bloc etant centre par max-width ; sur
     telephone le titre venait toucher le bord et la premiere lettre etait
     rognee. */
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
  max-width: 900px;
}
.hero h1 {
  color: var(--paper);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.hero-lede {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  margin-bottom: var(--space-6);
  max-width: 54ch;
}
.hero-lede:has(+ .hero-lede) { margin-bottom: var(--space-3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Note flottante du hero */
.hero-badge {
  position: absolute;
  right: clamp(20px, 5vw, 40px);
  top: clamp(96px, 14vw, 150px);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  padding: var(--space-5) var(--space-6);
  color: var(--paper);
  text-align: center;
  min-width: 150px;
}
.hero-badge .stars {
  display: flex; gap: 3px; justify-content: center;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.hero-badge .rating {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.hero-badge .rating span { font-size: 20px; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.hero-badge .rating-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
@media (max-width: 640px) {
  .hero-badge { position: static; margin: 0 auto var(--space-6); display: inline-block; }
}

/* Indicateur de scroll */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-8);
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.scroll-hint .line {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint .line::after {
  content: "";
  position: absolute;
  top: -46px; left: 0;
  width: 1px; height: 46px;
  background: var(--gold);
  animation: scroll-trail 2.2s var(--ease) infinite;
}
@keyframes scroll-trail {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(92px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint .line::after { animation: none; }
}

/* ── Bande de chiffres clés ────────────────────────────────────────── */
.stats-band {
  background: var(--ink-2);
  color: var(--paper);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 0;
}
.stats-band .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}
.stat {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border-right: 1px solid var(--divider);
}
.stat:last-child { border-right: none; }
.stat .value {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.stat .label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  font-weight: 600;
}
@media (max-width: 640px) {
  .stat { border-right: none; border-bottom: 1px solid var(--divider); padding: var(--space-6) var(--space-4); }
  .stat:last-child { border-bottom: none; }
}

/* ── Marquee des saveurs ───────────────────────────────────────────── */
.marquee {
  background: var(--lantern);
  color: var(--paper);
  padding: var(--space-5) 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid color-mix(in srgb, #000 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #000 15%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  animation: marquee-scroll 32s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.marquee-track span::after {
  content: "◆";
  font-size: 10px;
  opacity: 0.55;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ── Concept ───────────────────────────────────────────────────────── */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.concept-item {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--divider-dark);
  background: var(--paper);
  transition: transform 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.concept-item:hover {
  transform: translateY(-6px);
  border-color: var(--lantern);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 10%, transparent);
}
.concept-item .icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--lantern);
  border: 1px solid color-mix(in srgb, var(--lantern) 30%, transparent);
  margin-bottom: var(--space-5);
}
.concept-item .icon svg { width: 26px; height: 26px; }
.concept-item h3 { margin-bottom: var(--space-3); }
.concept-item p { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* ── Groupes et evenements ─────────────────────────────────────────── */
/* Section sombre : .concept-item ne convient pas, son fond est clair. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.offer-item {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--divider);
  background: var(--ink-2);
  transition: transform 400ms var(--ease), border-color 400ms var(--ease);
}
.offer-item:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.offer-item .icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  margin-bottom: var(--space-5);
}
.offer-item .icon svg { width: 26px; height: 26px; }
.offer-item h3 { margin-bottom: var(--space-3); }
.offer-item p { margin: 0; font-size: 15px; }
.offer-item p.offer-accroche { margin-top: var(--space-3); color: var(--gold); font-family: var(--font-display); font-style: italic; font-size: 17px; }

/* Rappel de contact en bas de section, pose sur une bande doree discrete */
.offer-contact {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.offer-contact p { margin: 0; max-width: 52ch; }
.offer-contact .btn { flex: none; }

/* Rangee de verres : quatre photos posees de travers, un cran plus haut ou
   plus bas, comme des verres sur un comptoir. Le decalage est annule sur
   telephone, ou la grille passe a deux colonnes. */
.bar-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
  margin-bottom: var(--space-8);
}
.bar-shot {
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--ink);
}
.bar-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.bar-shot:hover img { transform: scale(1.05); }
.bar-shot:nth-child(even) { transform: translateY(26px); }
@media (max-width: 780px) {
  .bar-gallery { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--space-5); }
  .bar-shot:nth-child(even) { transform: none; }
}

/* ── Au bar : bieres et cocktails ──────────────────────────────────── */
.drinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.drinks-col h3 {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--divider-dark);
  margin-bottom: var(--space-5);
}
.drink {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--divider-dark);
}
.drink:last-child { border-bottom: 0; }
/* Prix des boissons et des patisseries, sur fond clair : le dore des prix
   de la carte n'y atteint pas le contraste requis (1,9), le terracotta
   fonce si (4,9 sur le creme, 5,6 sur le blanc casse). */
.drink-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.drink-ligne h4 { margin-bottom: 4px; }
.drinks .prix { color: var(--lantern-2); font-size: 19px; }
/* Bieres pression : une colonne par contenance */
.tailles {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.tailles li { display: flex; flex-direction: column; gap: 4px; }
.tailles .taille {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.drink h4 { margin: 0 0 4px; font-size: 18px; }
.drink p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* Mention sanitaire obligatoire des lors qu'un site presente des boissons
   alcoolisees (loi Evin). Discrete mais jamais masquee. */
.legal-note {
  margin-top: var(--space-8);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.section-dark .legal-note { color: color-mix(in srgb, var(--paper) 60%, transparent); }

/* ── Mode brouillon ────────────────────────────────────────────────── */
/* Tout ce qui n'a pas encore ete confirme par le restaurant est surligne.
   Retirer data-brouillon sur <html> suffit a rendre la page livrable. */
[data-brouillon] .a-confirmer {
  background: color-mix(in srgb, var(--lantern) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lantern) 22%, transparent);
  border-radius: var(--radius-sm);
}
[data-brouillon] .a-confirmer::after {
  content: " (à confirmer)";
  font-size: 0.78em;
  letter-spacing: 0.04em;
  opacity: 0.85;
  font-style: italic;
}

/* ── Carte : plats signature avec photo ────────────────────────────── */
.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.dish {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 3/2;
  display: flex;
  align-items: flex-end;
}
.dish img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
  z-index: 0;
}
.dish:hover img { transform: scale(1.06); }
.dish::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--ink) 92%, transparent) 100%);
  z-index: 1;
}
/* Nom a gauche, prix a droite sur la meme ligne de base, comme sur une
   carte papier. Le prix ne se laisse jamais comprimer par un nom long. */
.dish-info {
  position: relative;
  z-index: 2;
  padding: var(--space-6);
  color: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  /* .dish est lui-meme en flex : sans cette largeur, .dish-info se reduit a
     son contenu et le prix vient se coller au nom au lieu d'aller a droite. */
  width: 100%;
}
.dish-info h4 { margin: 0; }
/* Plat en deux tailles : le prix de la quantite montree sur la photo en
   premier, la seconde taille en dessous, plus petite. */
.prix-tailles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.prix-tailles .ligne { display: flex; align-items: baseline; gap: 8px; }
.prix-tailles .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  white-space: nowrap;
}
.prix-tailles .ligne-2 .prix { font-size: 16px; }
.prix {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1;
  color: var(--gold);
  flex: none;
  white-space: nowrap;
}
.dish-info h4 {
  color: var(--paper);
  font-size: clamp(20px, 2vw, 25px);
}
/* Plat sans photo : fond sombre et icone doree, dans le style des cartes
   de l'offre groupes, plutot qu'une image generique. */
.dish-sans-photo {
  background: var(--ink-3);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.dish-sans-photo::after { display: none; }
.dish-icone {
  position: absolute;
  top: var(--space-5); left: var(--space-6);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.dish-icone svg { width: 22px; height: 22px; }
/* Tuile des accompagnements en supplement : une liste plutot qu'un plat.
   Hauteur libre, pour que la liste ne soit jamais coupee sur petit ecran. */
.dish-supplements { aspect-ratio: auto; }
.dish-supplements .dish-info { display: block; padding: var(--space-5); }
.supplements { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.supplements li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 3px 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--paper) 85%, transparent);
  border-bottom: 1px solid var(--divider);
}
.supplements li:last-child { border-bottom: 0; }
.supplements .prix { font-size: 16px; }
/* Toutes les tuiles en paysage 3/2 : trois par ligne sur ordinateur, deux
   sur tablette, une pleine largeur sur telephone. Seuils choisis pour qu'une
   tuile ne descende jamais sous 210 px de haut (mesure le 2026-09-30) : plus
   petite, le nom, l'accompagnement et le prix depassaient de la tuile. */
@media (max-width: 1100px) {
  .signature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .signature-grid { grid-template-columns: 1fr; }
}
/* Ecrans de 320 px : la tuile tombe a 187 px de haut, on resserre le texte
   et on retire l'icone des tuiles sans photo pour qu'il tienne. */
@media (max-width: 360px) {
  .dish-info { padding: var(--space-4) var(--space-5); }
  .dish-icone { display: none; }
}

.dish-info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.dish-info p.format-xl {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Avis clients ──────────────────────────────────────────────────── */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.review {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--paper) 4%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.review:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); transform: translateY(-4px); }
.review .stars { display: flex; gap: 3px; color: var(--gold); }
.review .stars svg { width: 16px; height: 16px; }
.review blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--paper);
  font-weight: 400;
  flex: 1;
}
.review .author {
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  letter-spacing: 0.04em;
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
}
.review .author strong { color: var(--gold); font-weight: 600; }
.reviews-source {
  margin-top: var(--space-6);
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Horaires ──────────────────────────────────────────────────────── */
/* Six cases depuis la fusion de dimanche et lundi. En auto-fit, la sixieme
   se retrouvait seule sur une deuxieme ligne entre 960 et 1050px de large,
   avec un grand vide a cote. Des paliers fixes evitent toute case orpheline :
   6 en une ligne, puis 3+3, puis 2+2+2. */
.hours {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: var(--space-10);
  border: 1px solid var(--divider);
}
@media (max-width: 1080px) {
  .hours { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .hours { grid-template-columns: repeat(2, 1fr); }
}
.hours-day {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  color: var(--paper);
  transition: background 300ms var(--ease);
}
.hours-day:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.hours-day:last-child { border-right: none; }
.hours-day.is-today {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  position: relative;
}
.hours-day.is-today::before {
  content: "Aujourd'hui";
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.hours-day .day {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gold);
}
.hours-day .time {
  font-size: 14px;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.hours-day.is-closed .time { color: var(--lantern); font-weight: 600; }
.hours-appel { margin-top: var(--space-3); padding: 9px 14px; gap: 8px; }

/* ── Contact direct ────────────────────────────────────────────────────
   Le telephone est arrive le 18 septembre 2026. Avant, un client qui
   voulait privatiser n'avait qu'un lien Instagram. */
/* Pas de "flex: none" ici : le bloc prendrait la largeur des deux boutons
   cote a cote sans jamais retrecir, et le second deborderait du cadre sur
   telephone au lieu de passer a la ligne. */
.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 100%;
}
/* Sur telephone, deux boutons pleine largeur l'un sous l'autre : plus
   faciles a viser au pouce, et le numero reste lisible en entier. */
@media (max-width: 620px) {
  .offer-actions { width: 100%; }
  .offer-actions .btn { flex: 1 1 100%; justify-content: center; }
}
.btn svg { flex: none; }
.btn span { display: inline-block; }

.contact-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
  font-size: 18px;
}
/* Ces regles ne visent que les vrais liens de texte : une regle large sur
   .contact-direct a ecraserait la couleur des boutons qu'elle contient. */
.contact-direct > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lantern);
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--lantern) 35%, transparent);
  padding-bottom: 2px;
  min-height: 48px;          /* cible tactile */
}
.contact-direct > a:hover { color: var(--lantern-2); }

/* La barre collante gagne un bouton d'appel : sur telephone les deux
   doivent tenir cote a cote sans deborder. */
.btn-appel { flex: none; }
@media (max-width: 520px) {
  .sticky-cta .info { display: none; }
  .sticky-cta .wrap { gap: var(--space-3); }
  /* 48px minimum : c'est la cible tactile qu'on applique partout, et ces
     deux boutons sont les plus utilises du site sur telephone. */
  .sticky-cta .btn { flex: 1; justify-content: center; min-height: 48px; }
}

/* ── Map ───────────────────────────────────────────────────────────── */
.map-link {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--divider-dark);
  background: var(--paper-2);
}
.map-link img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.map-link:hover img { transform: scale(1.04); }
.map-cta {
  position: absolute;
  bottom: var(--space-4); right: var(--space-4);
  background: var(--lantern);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 250ms var(--ease);
}
.map-link:hover .map-cta { background: var(--lantern-2); }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
  background: var(--ink-2);
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  padding: var(--space-10) 0 var(--space-6);
  border-top: 1px solid var(--divider);
}
.footer .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-8);
}
.footer h4 {
  color: var(--paper);
  margin-bottom: var(--space-4);
  font-size: 17px;
  letter-spacing: 0.02em;
}
.footer a { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.footer a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--divider);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  text-align: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.social-links { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.social-links a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--divider);
  transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}
.social-links a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ── Barre de réservation flottante ────────────────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--divider);
  padding: var(--space-3) 0;
  transform: translateY(110%);
  transition: transform 450ms var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: space-between;
}
.sticky-cta .info { color: var(--paper); line-height: 1.3; }
.sticky-cta .info strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.sticky-cta .info span {
  font-size: 12px;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
@media (max-width: 520px) {
  .sticky-cta .info strong { font-size: 15px; }
  .sticky-cta .info span { display: none; }
  .sticky-cta .btn { padding: 12px 18px; font-size: 11px; }
}

/* ── Animations d'apparition ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Page des mentions légales ─────────────────────────────────────── */
/* Page de lecture : colonne étroite, titres ramenés à une taille de
   document plutôt que d'affiche. Les liens restent couleur texte et
   soulignés : le terracotta sur crème n'atteint pas le contraste exigé
   pour du texte courant (3,9 pour 4,5 requis). */
.retour-site {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--paper) 85%, transparent);
}
.retour-site:hover { color: var(--gold); }
.page-legale { padding: var(--space-10) 0 var(--space-12); }
.page-legale .wrap { max-width: 780px; }
.page-legale h1 { font-size: clamp(38px, 5vw, 56px); }
.page-legale h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.page-legale p { max-width: 68ch; }
.page-legale .wrap a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-legale .wrap a:not(.btn):hover { color: var(--lantern-2); }
.page-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.fil {
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  margin-bottom: var(--space-5);
}
.page-legale__maj {
  margin-top: var(--space-8);
  font-size: 13px;
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.footer--court { padding: var(--space-6) 0; }
.footer--court .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Horloge des horaires ──────────────────────────────────────────── */
/* Cadran 12h : l'arc or (14h-17h) pour le salon de the, l'arc terracotta
   (17h-23h30) pour le service restauration. Les arcs se tracent a
   l'apparition de la section. */
.rythme {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-10);
}
@media (max-width: 860px) {
  .rythme { grid-template-columns: 1fr; gap: var(--space-8); }
  .horloge { max-width: 380px; margin-inline: auto; width: 100%; }
}
.horloge { margin: 0; }
.horloge svg { display: block; width: 100%; height: auto; overflow: visible; }
.horloge-disque { fill: var(--ink); }
.horloge-graduations line { stroke: color-mix(in srgb, var(--paper) 22%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.horloge-graduations line.major { stroke: color-mix(in srgb, var(--paper) 70%, transparent); stroke-width: 3; }
.horloge-arc {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1400ms var(--ease);
}
.horloge-arc--the { stroke: var(--gold); transition-delay: 300ms; }
.horloge-arc--resto { stroke: var(--lantern); transition-duration: 1800ms; transition-delay: 1500ms; }
.rythme.is-visible .horloge-arc { stroke-dashoffset: 0; }
.horloge-repere { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.horloge-label {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  fill: var(--ink);
}
.horloge-aiguille line { stroke: var(--paper); stroke-linecap: round; }
.horloge-aiguille--heure line { stroke-width: 7; }
.horloge-aiguille--minute line { stroke-width: 4; }
.horloge-axe { fill: var(--gold); stroke: var(--ink); stroke-width: 3; }

.horloge-statut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-5);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.horloge-statut[hidden] { display: none; }
.horloge-pastille {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}
.horloge-statut[data-etat="the"] .horloge-pastille { background: var(--gold); animation: pastille 2s ease-in-out infinite; }
.horloge-statut[data-etat="resto"] .horloge-pastille { background: var(--lantern); animation: pastille 2s ease-in-out infinite; }
@keyframes pastille {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.moment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding-left: var(--space-5);
  border-left: 3px solid var(--gold);
}
.moment--resto { border-left-color: var(--lantern); }
.moment-heure {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--gold-2);
  min-width: 2.4ch;
}
.moment--resto .moment-heure { color: var(--lantern-2); }
.moment h3 { margin-bottom: var(--space-2); }
.moment p { margin: 0; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.moment p.moment-note { margin-top: var(--space-2); font-size: 13px; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .horloge-arc { transition: none; stroke-dashoffset: 0; }
  .horloge-statut .horloge-pastille { animation: none; }
}