/* ============================================================
   L'origine du thé — styles du site
   Porté des maquettes validées (ui_kits/boutique, refonte juin 2026).
   Charte : papier crème, sauge, céladon, un seul accent vermillon
   par écran, mouvement calme sans rebond.
   ============================================================ */

:root { --site-max: 1180px; }
body { background: var(--surface-page); color: var(--text-body); }
main { display: block; }
em { font-style: italic; }

/* ---------- Accessibilité ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  background: var(--paper-50); color: var(--ink-900);
  padding: 10px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
}
.skip-link:focus { left: 12px; }
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

/* ---------- Header ---------- */
/* Bandeau de news (fermeture exceptionnelle, etc.) — éditable dans l'admin */
.newsbar { background: var(--sage-900); color: var(--paper-100); }
.newsbar__inner {
  max-width: var(--site-max); margin: 0 auto;
  padding: 9px var(--gutter); display: flex; align-items: center; gap: 12px;
}
.newsbar__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--seal-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal-600) 28%, transparent);
}
.newsbar__msg { margin: 0; flex: 1; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; }
.newsbar__link { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.newsbar__close {
  flex: none; background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: var(--paper-100); font-size: 20px; line-height: 1; opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.newsbar__close:hover { opacity: 1; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-5);
  padding: 12px var(--gutter); height: var(--header-height);
  background: color-mix(in srgb, var(--sage-900) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 22px -16px rgba(20,28,20,0.6);
}
.site-brand { display: flex; align-items: center; gap: 13px; }
.site-brand__ph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: var(--radius-md);
  border: 1.5px dashed color-mix(in srgb, var(--celadon-300) 60%, transparent);
  background: color-mix(in srgb, var(--celadon-300) 10%, transparent);
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--celadon-300);
  transform: rotate(-4deg);
}
.site-brand__words { display: flex; flex-direction: column; line-height: 0.96; }
.site-brand__line1 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text-on-sage); letter-spacing: -0.01em; }
.site-brand__line2 { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--celadon-300); }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav__link {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.82);
  padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: #fff; background: rgba(255,255,255,0.12); }
.site-nav__link.is-active { color: var(--sage-900); background: var(--celadon-300); }
.site-header > .odt-btn { margin-left: 0; }
/* bouton « Appeler » — caché sur desktop, visible sur mobile (CTA toujours à portée) */
.header-call { display: none; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: #fff;
  background: var(--seal-600); padding: 8px 15px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px -4px rgba(124,39,30,0.6); }
.header-call__ic::before { content: "\260E"; font-size: 14px; line-height: 1; }

/* menu mobile — bouton + panneau */
.nav-toggle {
  display: none; margin-left: auto;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: none; cursor: pointer; border-radius: var(--radius-md);
}
.nav-toggle__bar {
  display: block; height: 1.5px; width: 100%; background: var(--text-on-sage);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.site-menu {
  display: none; position: fixed; z-index: 49;
  top: var(--header-height); left: 0; right: 0;
  background: var(--paper-50); border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg); padding: 10px var(--gutter) 22px;
  flex-direction: column;
}
.site-menu.is-open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .site-menu.is-open { animation: odt-menu-in var(--dur-base) var(--ease-out) both; }
  @keyframes odt-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
.site-menu__link {
  font-family: var(--font-display); font-size: 22px; color: var(--ink-900);
  padding: 12px 4px; border-bottom: 1px solid var(--rule-ink);
}
.site-menu__link.is-active { color: var(--sage-700); }
.site-menu__link:last-of-type { border-bottom: none; }
@media (max-width: 900px) {
  .site-nav, .site-header > .odt-btn { display: none; }
  .header-call { display: inline-flex; margin-left: auto; }
  .nav-toggle { display: flex; margin-left: 8px; }
}

/* ---------- Eyebrow ---------- */
.site-eyebrow { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; }
@media (max-width: 700px) {
  .site-eyebrow { white-space: normal; }
  .site-eyebrow__txt { line-height: 1.6; }
}
.site-eyebrow__cn { display: inline-flex; align-items: baseline; gap: 6px; }
.site-eyebrow__hanzi { font-family: var(--font-display); font-size: 20px; color: var(--seal-600); line-height: 1; }
.site-eyebrow__py { font-family: var(--font-serif); font-style: italic; font-size: 12px; color: var(--text-faint); letter-spacing: 0.01em; }
.site-eyebrow__txt { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.site-eyebrow.on-dark .site-eyebrow__txt { color: rgba(255,255,255,0.82); }
.site-eyebrow.on-dark .site-eyebrow__hanzi { color: var(--clay-400); }
.site-eyebrow.on-dark .site-eyebrow__py { color: rgba(255,255,255,0.55); }

/* ---------- Placeholders photo (.phx) ---------- */
.phx {
  display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  border: 1.5px dashed color-mix(in srgb, var(--ink-900) 28%, transparent);
  background: repeating-linear-gradient(45deg, rgba(42,39,35,0.04) 0 12px, rgba(42,39,35,0.09) 12px 24px);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; line-height: 1.55;
  color: var(--ink-500); text-align: center;
}
.phx > span { max-width: 250px; }
.phx--dark {
  border-color: rgba(245,239,226,0.45);
  background: repeating-linear-gradient(45deg, rgba(245,239,226,0.05) 0 12px, rgba(245,239,226,0.1) 12px 24px);
  color: rgba(245,239,226,0.82);
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; }
.hero--flat { background: repeating-linear-gradient(45deg, rgba(245,239,226,0.04) 0 14px, rgba(245,239,226,0.09) 14px 28px), #3E5450; }
.hero--flat .hero__title em { color: #C5DAD9; }
.hero__phnote {
  position: absolute; top: 96px; right: 40px; max-width: 300px; padding: 14px 18px;
  border: 1.5px dashed rgba(245,239,226,0.5); font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; line-height: 1.55; color: rgba(245,239,226,0.85);
}
.hero__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding: var(--space-9) var(--gutter); width: 100%; }
.hero__title { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 500; color: #fff; margin: 18px 0 0; line-height: 1.02; letter-spacing: -0.018em; }
.hero__lede { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255,255,255,0.9); max-width: 30em; margin-top: 22px; line-height: 1.6; }
.hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero__inner .site-eyebrow { position: relative; padding-bottom: 14px; }
.hero__inner .site-eyebrow::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px;
  background: var(--clay-400);
}
.hero::after {
  content: ''; position: absolute; left: 50%; bottom: 22px; width: 1px; height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 100%);
  transform: translateX(-50%);
}
@media (max-width: 900px) {
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero__phnote { position: static; order: 2; margin: 0 var(--gutter) 28px; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { opacity: 0; animation: odt-rise-in 0.95s var(--ease-out) both; }
  .hero__inner > :nth-child(1) { animation-delay: 0.12s; }
  .hero__inner > :nth-child(2) { animation-delay: 0.26s; }
  .hero__inner > :nth-child(3) { animation-delay: 0.42s; }
  .hero__inner > :nth-child(4) { animation-delay: 0.58s; }
  .hero::after { opacity: 0; animation: odt-fade-in 0.8s var(--ease-out) 1.1s both; }
}
@keyframes odt-rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes odt-fade-in { from { opacity: 0; } to { opacity: 1; } }


/* ---------- Sections ---------- */
.section { max-width: var(--site-max); margin: 0 auto; padding: var(--space-9) var(--gutter); }
.section--sunken { max-width: none; background: var(--surface-sunken); }
.section--sunken > * { max-width: var(--site-max); margin-inline: auto; }
.section__head { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: 12px; }
.section__head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.section__title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 500; }
.section__lede { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--text-body); max-width: 42em; margin-top: 2px; }

/* ---------- Manifeste + piliers (accueil) ---------- */
.manifesto { text-align: center; }
.manifesto__eyebrow, .venir__eyebrow { display: flex; justify-content: center; margin-bottom: 26px; }
.manifesto__p {
  font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.32;
  color: var(--ink-900); max-width: 34ch; margin: 0 auto;
}
.manifesto__p em { color: var(--sage-600); font-style: italic; }
.manifesto .offers { margin-top: 48px; text-align: left; }

.offers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--border-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); overflow: hidden;
}
.offer { background: var(--surface-card); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: 10px; transition: background var(--dur-base) var(--ease-out); }
.offer__head { display: flex; align-items: baseline; gap: 9px; }
.offer__hanzi { font-family: var(--font-display); font-size: 34px; color: var(--celadon-700); line-height: 1; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.offer__pinyin { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--text-faint); }
.offer__t { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--ink-900); }
.offer__d { font-family: var(--font-serif); font-size: 15.5px; color: var(--text-muted); line-height: 1.55; }
.offer--link { text-decoration: none; cursor: pointer; }
.offer__go { margin-top: auto; padding-top: 8px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--sage-700); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.offer--link:hover .offer__go { color: var(--accent); }

/* ---------- Accent au survol : une couleur par section ----------
   Le détail qui ressort au survol (souligné, flèche, lien) prend une teinte
   propre à la section : vermillon pour les thés, sauge pour les céramiques,
   or pour les dégustations, céladon pour le blog. */
:root { --accent: var(--seal-600); }
.ware, .pd[data-accent="ware"] { --accent: var(--sage-700); }
.taste, .atelier, .reserve { --accent: var(--gold-500); }
.jcard, .jfeature { --accent: var(--celadon-600); }

/* ---------- Goûter sur place (accueil) ---------- */
.taste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.taste__card {
  position: relative;
  border: 1px solid var(--border-soft); background: var(--surface-card); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
/* hover sobre : le titre se souligne */
.taste__t {
  width: fit-content;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.32s var(--ease-out);
  padding-bottom: 2px;
}
.taste__card:hover .taste__t { background-size: 100% 2px; }
.taste__media { height: 200px; }
.taste__media.phx { border: 0; border-bottom: 1px solid var(--border-soft); }
.taste__body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.taste__t { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--ink-900); }
.taste__d { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink-700); flex: 1; }
.taste__price { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink-900); }
.taste__price small { font-weight: 400; color: var(--ink-300); font-size: 12.5px; }

/* ---------- La carte du moment (accueil) ---------- */
.menu { display: flex; flex-direction: column; max-width: 880px; }
.menu__row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--rule-ink); text-decoration: none; color: inherit;
}
.menu__row:last-child { border-bottom: 1px solid var(--rule-ink); }
.menu__lockup { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.menu__hanzi { font-family: var(--font-display); font-size: 23px; color: var(--ink-900); }
.menu__pinyin { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-300); }
.menu__name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--ink-900); }
/* hover sobre : le nom se souligne, une flèche se glisse après le prix */
.menu__name {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.32s var(--ease-out);
  padding-bottom: 2px;
}
.menu__row:hover .menu__name, .menu__row:focus-visible .menu__name { background-size: 100% 2px; }
.menu__price::after {
  content: '→'; display: inline-block; margin-left: 10px;
  font-weight: 400; color: var(--accent);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.menu__row:hover .menu__price::after, .menu__row:focus-visible .menu__price::after {
  opacity: 1; transform: translateX(0);
}
.menu__d { display: block; font-family: var(--font-serif); font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink-500); margin-top: 6px; max-width: 60ch; }
.menu__price { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.menu__price small { font-weight: 400; color: var(--ink-300); font-size: 13px; }

/* ---------- Arts de la table (accueil) ---------- */
.arts__grid { display: grid; grid-template-columns: 1fr 460px; gap: var(--space-7); align-items: center; }
.arts__title { margin: 14px 0 10px; }
.arts__cta { margin-top: 18px; }
.arts__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.arts__tiles .phx { height: 170px; }

/* ---------- Bandeaux ---------- */
.band { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.band__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding: var(--space-8) var(--gutter); width: 100%; }
.band__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff; font-weight: 500; margin: 16px 0 14px; max-width: 16em; }
.band__p { font-family: var(--font-serif); font-size: 17px; color: rgba(255,255,255,0.9); max-width: 34em; line-height: 1.65; }
.band--celadon { min-height: 0; background: var(--sage-100); }
.band--celadon .band__inner { padding-block: var(--space-7); }
.band--celadon .band__title { color: var(--ink-900); }
.band--celadon .band__p { color: var(--ink-700); }

/* ---------- Pourquoi cette boutique (accueil) ---------- */
.story { background: #415753; }
.story__grid {
  max-width: var(--site-max); margin: 0 auto; padding: var(--space-9) var(--gutter) var(--space-6);
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: center;
}
.story__h {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: #F5EFE2; margin: 14px 0 18px; line-height: 1.15;
}
.story__p { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; color: rgba(245,239,226,0.9); max-width: 52ch; margin: 0 0 14px; }
.story__p em { color: #C5DAD9; }
.story__sig { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.story__sign { font-family: var(--font-script); font-size: 28px; color: #C5DAD9; }
.story__portrait { height: 380px; }
.story__voyages { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }
.story__vhead { display: flex; align-items: baseline; gap: 22px; margin-bottom: 16px; flex-wrap: wrap; }
.story__vlabel {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(245,239,226,0.75); white-space: nowrap;
}
.story__vsub { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: rgba(245,239,226,0.65); }
.story__vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story__vgrid .phx--dark { height: 210px; }

/* ---------- Venir (accueil + ateliers) ---------- */
.venir { text-align: center; }
.venir__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; color: var(--ink-900); margin: 0; }
.venir__p { font-family: var(--font-serif); font-size: 16.5px; color: var(--ink-500); margin: 20px 0 0; }
.venir__cta { display: flex; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }

/* ---------- Page head (pages intérieures) ---------- */
.phead { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: 320px;
  background: repeating-linear-gradient(45deg, rgba(245,239,226,0.04) 0 14px, rgba(245,239,226,0.09) 14px 28px), #3E5450; }
.phead__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-7); width: 100%; }
.phead__title { font-size: clamp(2.4rem, 5vw, 4rem); color: #fff; font-weight: 500; margin: 16px 0 0; line-height: 1.04; }
.phead__lede { font-family: var(--font-serif); font-size: 18px; color: rgba(255,255,255,0.9); max-width: 34em; margin-top: 16px; line-height: 1.6; }
.phead__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.phead__phnote {
  position: absolute; top: 28px; right: 40px; max-width: 300px; padding: 12px 16px;
  border: 1.5px dashed rgba(245,239,226,0.5); font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px; line-height: 1.55; color: rgba(245,239,226,0.85);
}
@media (max-width: 900px) { .phead__phnote { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .phead__inner > * { opacity: 0; animation: odt-rise-in 0.8s var(--ease-out) both; }
  .phead__inner > :nth-child(1) { animation-delay: 0.08s; }
  .phead__inner > :nth-child(2) { animation-delay: 0.2s; }
  .phead__inner > :nth-child(3) { animation-delay: 0.34s; }
}

/* ---------- Filtres (boutique) ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.filter {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--text-body);
  background: var(--paper-50); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 8px 18px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filter:hover { border-color: var(--ink-900); }
.filter.is-active { background: var(--sage-800); border-color: var(--sage-800); color: var(--text-on-sage); }

/* ---------- Grilles boutique ---------- */
.tea-grid { display: grid; gap: 22px; }
.tea-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tea-grid .odt-tea__media.phx { aspect-ratio: 4/3; border: 0; border-bottom: 1px solid var(--border-soft); }
.tea-grid [hidden] { display: none; }

.ware {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ware__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ware__media.phx { border: 0; border-bottom: 1px solid var(--border-soft); }
.ware__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ware__head { display: flex; align-items: baseline; gap: 9px; }
.ware__hanzi { font-family: var(--font-display); font-size: 21px; color: var(--ink-900); }
.ware__name { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--text-strong); }
.ware__d { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-muted); }
.ware__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: auto; border-top: 1px solid var(--rule-ink); }
.ware__price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink-900); }
.ware__go { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--sage-700); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.ware:hover .ware__go { color: var(--accent); }

/* ---------- Cinq familles (boutique) ---------- */
.teaband { position: relative; overflow: hidden; background-color: var(--sage-50); padding: var(--space-9) 0; }
.teaband::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--seigaiha-celadon);
  background-size: 200px calc(200px * 0.962);
  background-position: center top;
  opacity: 0.3;
}
.teaband__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding-inline: var(--gutter); }
.teatypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ttype {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 18px 18px 20px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ttype:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ttype__head { display: flex; align-items: center; gap: 10px; }
.ttype__hanzi { font-family: var(--font-display); font-size: 26px; color: var(--celadon-700); line-height: 1; }
.ttype__d { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.55; color: var(--text-body); }

/* ---------- Ateliers ---------- */
.ateliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.atelier {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.atelier:hover { box-shadow: var(--shadow-md); }
.atelier__top { display: flex; align-items: center; justify-content: space-between; }
.atelier__price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--seal-600); }
.atelier__name {
  font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--ink-900); line-height: 1.1;
  width: fit-content;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.32s var(--ease-out); padding-bottom: 2px;
}
.atelier:hover .atelier__name { background-size: 100% 2px; }
.atelier__meta { display: flex; flex-wrap: wrap; gap: 7px; font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); align-items: center; }
.atelier__meta .dot { color: var(--border); }
.atelier__d { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink-700); }

/* ---------- Réserver (ateliers) ---------- */
.reserve { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: start; }
.reserve__p { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; color: var(--text-body); margin: 14px 0 18px; max-width: 36em; }
.reserve__card {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.reserve__phone {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500;
  color: var(--ink-900); letter-spacing: 0.02em; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.reserve__phone:hover { color: var(--sage-700); }
.reserve__how { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.65; color: var(--text-muted); max-width: 38em; }
.reserve__fine { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); }

/* ---------- Journal ---------- */
.jfeature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
.jfeature__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.jfeature__media.phx { box-shadow: none; }
.jfeature__seal { position: absolute; top: 14px; right: 14px; }
.jfeature__seal:not(.odt-stamp--filled) { background: rgba(251,248,240,0.9); }
.jfeature__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; margin: 12px 0; line-height: 1.08; }
.jfeature__title a:hover { color: var(--sage-700); }
.jfeature__excerpt { font-family: var(--font-serif); font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 42em; margin-bottom: 4px; }
.jmeta { display: flex; align-items: center; gap: 14px; }
.jdate { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.jcard {
  position: relative;
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.jcard__media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.jcard__media.phx { border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; }
.jcard__seal { position: absolute; top: 10px; right: 10px; }
.jcard__seal:not(.odt-stamp--filled) { background: rgba(251,248,240,0.86); }
.jcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jcard__title { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-strong); line-height: 1.15; }
.jcard__excerpt { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--text-muted); flex: 1; }
.jcard__more { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--sage-700); }
.jcard:hover .jcard__more { color: var(--accent); }
/* toute la carte est cliquable, sans sacrifier l'accessibilité */
.jcard__link::after { content: ''; position: absolute; inset: 0; }

/* ---------- Article ---------- */
.post { max-width: var(--container-md); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-9); }
.post__back { display: inline-block; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-muted); margin-bottom: var(--space-6); }
.post__back:hover { color: var(--ink-900); }
.post__title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; margin: 14px 0 18px; }
.post__lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.7; color: var(--text-body); max-width: 38em; }
.post__media { margin: var(--space-7) 0; aspect-ratio: 16/9; border-radius: var(--radius-lg); }
.post__note { max-width: 420px; margin: var(--space-6) 0; }
/* Corps de l'article rendu depuis le markdown. */
.post__body { max-width: 38em; }
.post__body > * + * { margin-top: 1.1em; }
.post__body p { font-family: var(--font-serif); font-size: 18px; line-height: 1.75; color: var(--text-body); }
.post__body h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin-top: 1.8em; }
.post__body h3 { font-size: 1.25rem; line-height: 1.2; margin-top: 1.6em; }
.post__body a { color: var(--sage-700); text-decoration: underline; text-underline-offset: 2px; }
.post__body img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-6) 0; }
.post__body blockquote { border-left: 3px solid var(--celadon-300); padding-left: 1em; color: var(--ink-500); font-style: italic; }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body li { font-family: var(--font-serif); font-size: 18px; line-height: 1.7; }
.post__body li + li { margin-top: 0.4em; }
.post__tocome {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.6;
  color: var(--ink-500); border: 1.5px dashed color-mix(in srgb, var(--ink-900) 28%, transparent);
  padding: 18px 20px; max-width: 42em;
}

/* ---------- Schéma de fabrication ---------- */
.fab { background: var(--paper-100); padding: var(--space-9) 0; }
.fab__inner { max-width: var(--site-max); margin: 0 auto; padding-inline: var(--gutter); }
/* Note client : thé noir = thé rouge */
.fab__note {
  margin-top: var(--space-7); max-width: 56ch;
  font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--text-body);
  border-left: 3px solid var(--seal-600); padding: 4px 0 4px 18px;
}
.fab__note-k { display: block; font-family: var(--font-sans); font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
.fab__row {
  display: grid; grid-template-columns: 190px 138px 1fr; gap: 18px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--rule-ink);
}
.fab__row:last-child { border-bottom: 1px solid var(--rule-ink); }
.fab__lockup { display: flex; align-items: baseline; gap: 9px; }
.fab__hanzi { font-family: var(--font-display); font-size: 20px; color: var(--ink-900); }
.fab__name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-900); }
.fab__imgs { display: flex; gap: 10px; }
.fab__img {
  width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px dashed color-mix(in srgb, var(--ink-900) 30%, transparent);
  background: repeating-linear-gradient(45deg, rgba(42,39,35,0.04) 0 8px, rgba(42,39,35,0.08) 8px 16px);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9.5px; color: var(--ink-500);
}
.fab__img--liq { color: var(--ink-700); }
.fab__steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fab__step {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--ink-700);
  border: 1px solid rgba(42,39,35,0.25); border-radius: var(--radius-pill); padding: 6px 13px; white-space: nowrap;
}
.fab__step--key { border-color: rgba(42,39,35,0.2); color: var(--ink-900); }
.fab__step--key.is-dark { color: #F5EFE2; }
.fab__arrow { color: var(--ink-300); }

/* ---------- Produit ---------- */
.pd { padding: var(--space-8) 0 var(--space-9); }
.pd__inner { max-width: var(--site-max); margin: 0 auto; padding-inline: var(--gutter); }
.pd__back { display: inline-block; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-muted); padding: 6px 0; margin-bottom: var(--space-5); }
.pd__back:hover { color: var(--ink-900); }
.pd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.pd__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.pd__info { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.pd__head { display: flex; align-items: baseline; gap: 12px; }
.pd__hanzi { font-family: var(--font-display); font-size: 30px; color: var(--ink-900); line-height: 1; }
.pd__pinyin { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--text-faint); }
.pd__name { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.05; margin: 0; }
.pd__tagrow { margin-top: -2px; }
.pd__lede { font-family: var(--font-serif); font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 42em; }
.pd__price { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 22px; color: var(--ink-900); margin-top: 2px; white-space: nowrap; }
.pd__unit { font-size: 13px; font-weight: 500; color: var(--text-muted); }
/* Fiche produit — sceau en filigrane, teinté par l'accent de section */
.pd { position: relative; isolation: isolate; overflow: hidden; }
.pd__seal {
  position: absolute; top: -0.22em; right: -0.04em; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-size: clamp(190px, 30vw, 420px); line-height: 0.78;
  color: color-mix(in srgb, var(--accent) 9%, transparent);
}
.pd__taste { display: flex; flex-direction: column; gap: 8px; }
.pd__hint { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 2px 0 0; }
/* modes d'achat : à la boutique / livraison */
.buy { display: flex; flex-direction: column; gap: 14px; }
.buy__mode { display: flex; flex-direction: column; gap: 4px; }
.buy__mode-h { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.buy__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.buy__dot--ok { background: var(--accent); }
.buy__dot--no { background: var(--ink-300); }
.buy__free { color: var(--accent); }
.buy__mode-d { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin: 0; padding-left: 18px; max-width: 44em; }
.buy__mode-d a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* parallaxe douce de la photo (JS, motion seulement) */
.pjs .pd__media img { height: 116%; will-change: transform; }
.pjs .phead__img { top: -14%; bottom: auto; height: 114%; will-change: transform; }
/* entrée douce de la fiche : la photo monte, l'info suit */
.pjs .pd__media, .pjs .pd__info { opacity: 0; translate: 0 16px; transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
.pjs .pd__info { transition-delay: 0.1s; }
.pjs .pd__media.is-in, .pjs .pd__info.is-in { opacity: 1; translate: 0 0; }
.pd__block { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule-ink); }
.pd__h { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.prep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prep__item { display: flex; flex-direction: column; gap: 3px; background: var(--paper-50); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px 14px; }
.prep__k { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.prep__v { font-family: var(--font-display); font-size: 18px; color: var(--ink-900); }
.prep__handmade { font-family: var(--font-serif); font-size: 13px; line-height: 1.55; color: var(--text-muted); max-width: 40em; margin: 12px 0 0; }
.pd__avail { display: flex; flex-direction: column; gap: 8px; }
.avail { display: flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 14.5px; color: var(--text-body); }
.avail__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.avail--ok .avail__dot { background: var(--celadon-600); }
.avail--no .avail__dot { background: var(--clay-600); }
.avail--no { color: var(--text-muted); }
.pd__note-soft { font-family: var(--font-serif); font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 40em; margin: 2px 0 0; }
.pd__cta { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; align-items: flex-start; }
.pd__fine { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); }

/* ---------- Instagram ---------- */
.insta__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.insta__handle { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.insta__handlet { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 500; color: var(--ink-900); }
.insta__sub { font-family: var(--font-serif); font-size: 16px; color: var(--text-muted); margin-top: 8px; max-width: 36em; line-height: 1.55; }
.insta__hint { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); margin-top: 16px; letter-spacing: 0.02em; }

/* glyphe instagram — formes simples (carré arrondi + anneau + point) */
.insta__handle-ic, .igtile__glyph, .igtile__hover-ic { display: inline-block; position: relative; border: 2.4px solid currentColor; border-radius: 9px; }
.insta__handle-ic { width: 26px; height: 26px; color: var(--seal-600); flex: none; }
.insta__handle-ic::before { content: ''; position: absolute; inset: 6px; border: 2.4px solid currentColor; border-radius: 50%; }
.insta__handle-ic::after { content: ''; position: absolute; top: 4px; right: 4px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.insta__handle-ic--dark { color: var(--celadon-700); }

.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.insta-grid--page { grid-template-columns: repeat(4, 1fr); gap: 14px; }

.igtile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-soft); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px;
  color: var(--celadon-700);
  background-color: var(--celadon-100);
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--celadon-300) 60%, transparent) 0 1.5px, transparent 1.5px 12px);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.igtile:hover { box-shadow: var(--shadow-md); }
.igtile__glyph { width: 34px; height: 34px; }
.igtile__glyph::before { content: ''; position: absolute; inset: 8px; border: 2.4px solid currentColor; border-radius: 50%; }
.igtile__glyph::after { content: ''; position: absolute; top: 5.5px; right: 5.5px; width: 3.4px; height: 3.4px; border-radius: 50%; background: currentColor; }
.igtile__cap { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-align: center; color: var(--sage-700); line-height: 1.3; text-wrap: balance; }
/* Tuile Instagram avec photo réelle : l'image remplit la tuile, légende en surimpression. */
.igtile--photo { padding: 0; background-image: none; color: #fff; }
.igtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.igtile--photo:hover .igtile__img { transform: scale(1.04); }
.igtile__cap--over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; color: #fff; text-align: left; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(20, 28, 20, 0.66), transparent); }

/* ---------- 404 ---------- */
.lost { max-width: var(--container-md); margin: 0 auto; padding: var(--space-10) var(--gutter); text-align: center; }
.lost__seal { display: flex; justify-content: center; margin-bottom: 26px; }
.lost__h { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 14px; }
.lost__p { font-family: var(--font-serif); font-size: 17px; color: var(--text-muted); margin-bottom: 28px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sage-700); color: var(--text-on-dark); margin-top: var(--space-7); position: relative; overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--seigaiha-ivory);
  background-size: 320px calc(320px * 0.962);
  background-position: center top;
  opacity: 0.085;
}
.site-footer__top, .site-footer__rule, .site-footer__base { position: relative; z-index: 1; }
.site-footer__top { max-width: var(--site-max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-6); display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-7); }
.site-foot-words { font-family: var(--font-display); font-size: 30px; font-weight: 500; color: #fff; }
.site-foot-words em { color: var(--celadon-300); }
.site-foot-tag { font-family: var(--font-serif); font-style: italic; color: rgba(255,255,255,0.7); margin-top: 8px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.site-footer__cols > div { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); font-size: 14px; }
.site-footer__cols a, .site-footer__cols span:not(.site-foot-h) { color: rgba(255,255,255,0.78); }
.site-footer__cols a:hover { color: #fff; }
.site-foot-h { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.site-footer__rule { max-width: var(--site-max); margin: 0 auto; height: 1px; background: rgba(255,255,255,0.14); }
.site-footer__base { max-width: var(--site-max); margin: 0 auto; padding: 18px var(--gutter) 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,0.6); }
.site-foot-hand { font-family: var(--font-script); font-size: 19px; color: var(--celadon-300); }
/* Footer mobile : on empile le bloc identité au-dessus des liens et on passe
   les colonnes sur 2 puis 1, pour éviter les colonnes tassées et les libellés
   tronqués (« Instagram », « La lettre saisonnière »). */
@media (max-width: 700px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
}
@media (max-width: 420px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .offers, .tea-grid--3, .ateliers, .taste, .story__vgrid { grid-template-columns: 1fr 1fr; }
  .taste { grid-template-columns: 1fr; }
  .story__vgrid { grid-template-columns: 1fr; }
  .reserve, .jfeature, .pd__grid, .arts__grid, .story__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .insta-grid, .insta-grid--page { grid-template-columns: repeat(3, 1fr); }
  .insta__head { flex-direction: column; align-items: flex-start; }
  .fab__row { grid-template-columns: 1fr; gap: 10px; }
  .arts__tiles { grid-template-columns: 1fr 1fr; }
  .section { padding-block: var(--space-8); }
}
@media (max-width: 560px) {
  .offers, .tea-grid--3, .ateliers, .journal-grid { grid-template-columns: 1fr; }
  .insta-grid, .insta-grid--page { grid-template-columns: repeat(2, 1fr); }
  .menu__row { grid-template-columns: 1fr; gap: 6px; }
  .section { padding-block: var(--space-7); }
}

/* ============================================================
   Passe « bolder » (branche design/bolder) — drame élégant,
   encre & sceau. Échelle typographique amplifiée, le sceau
   se presse sur le hero. La charte reste : un seul accent
   vermillon fort par écran, mouvement calme sans rebond.
   ============================================================ */

/* ---------- Hero : plein écran, 茶 en filigrane, sceau pressé ---------- */
.hero--v2 { min-height: 88svh; }
.hero__glyph {
  position: absolute; right: -2%; top: 50%;
  transform: translateY(-52%) rotate(-5deg);
  font-family: var(--font-display); font-size: min(80vh, 56vw);
  line-height: 1; color: rgba(245,239,226,0.07);
  pointer-events: none; user-select: none;
}
.hero--v2 .hero__title { font-size: clamp(3.1rem, 8.4vw, 6.6rem); line-height: 0.98; }
.hero--v2 .hero__lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); margin-top: 26px; }
@media (max-width: 700px) {
  .hero__glyph { font-size: 95vw; right: -18%; top: 42%; }
  .hero--v2 { min-height: 0; }
}

/* ---------- Échelle typographique : des sauts francs ---------- */
.section__title { font-size: clamp(2.1rem, 4vw, 3.3rem); }
.manifesto__p { font-size: clamp(1.9rem, 3.3vw, 3rem); max-width: 30ch; }
.manifesto { padding-block: var(--space-10); }
.venir__h { font-size: clamp(2.3rem, 5vw, 4rem); }
.story__h { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.phead__title { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.band--celadon .band__title { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.site-foot-words { font-size: clamp(30px, 3.2vw, 42px); }

/* ---------- La carte du moment : les 汉字 portent la ligne ---------- */
.menu__row { padding: 26px 0; }
.menu__hanzi { font-size: 30px; }
.menu__price { font-size: 18px; }

/* ---------- Bandeau emballage : vague en filigrane ---------- */
.band--celadon { position: relative; overflow: hidden; }
.band--celadon::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--seigaiha-celadon);
  background-size: 260px calc(260px * 0.962);
  background-position: center top;
  opacity: 0.3;
}
.band--celadon .band__inner { position: relative; }

/* ---------- Signature du récit : sceau un cran plus présent ---------- */
.story__sign { font-size: 34px; }

/* ============================================================
   Profondeur & photographie (branche design/bolder, suite)
   Parallax 100 % CSS : scroll-driven animations, neutralisées
   sans animation-timeline et en prefers-reduced-motion.
   Photos : intérims Unsplash (voir img/unsplash/CREDITS.md),
   à remplacer par les photos de la boutique.
   ============================================================ */

/* ---------- Hero photo — couches qui se délaminent ---------- */
.hero--v2 { background: #2F423E; }
.hero__img {
  position: absolute; left: 0; right: 0; top: -14%; height: 114%;
  width: 100%; object-fit: cover;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(28,24,20,0.82) 0%, rgba(28,24,20,0.55) 45%, rgba(28,24,20,0.16) 80%),
    linear-gradient(0deg, rgba(28,24,20,0.5) 0%, rgba(28,24,20,0) 36%);
}
.hero--v2 .hero__glyph { color: rgba(245,239,226,0.1); z-index: 1; }
.hero--v2 .hero__inner { z-index: 2; }

/* ---------- Fenêtre — la montagne glisse derrière le cadre ---------- */
.window { position: relative; height: min(62vh, 560px); overflow: clip; }
.window__img {
  position: absolute; left: 0; right: 0; top: -20%;
  width: 100%; height: 140%; object-fit: cover;
}
.window__caption {
  position: absolute; right: clamp(1.25rem, 4vw, 4rem); bottom: 20px;
  font-family: var(--font-serif); font-style: italic; font-size: 17px; letter-spacing: 0.01em;
  color: rgba(251,248,240,0.95);
  text-shadow: 0 1px 14px rgba(28,24,20,0.65);
}

/* ---------- Cartes atelier & dégustation : toute la carte cliquable ---------- */
.atelier, .taste__card { color: inherit; text-decoration: none; }
a.atelier, a.taste__card { cursor: pointer; }
/* survol calme : juste l'ombre qui s'affirme (pas de zoom ni de surélèvement) */
a.atelier:hover, a.taste__card:hover { box-shadow: var(--shadow-md); }
.atelier__media img, .taste__media img { width: 100%; height: 100%; object-fit: cover; }
/* repère discret : le hanzi rouge + son pinyin, sans cadre */
.atelier__mark { display: inline-flex; align-items: baseline; gap: 9px; }
.atelier__hanzi { font-family: var(--font-display); font-size: 27px; font-weight: 500; color: var(--seal-600); line-height: 1; }
.atelier__py { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--text-faint); }
/* l'affordance « Découvrir » pousse en bas de carte */
.atelier__go, .taste__go { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--sage-700);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out); }
a.atelier:hover .atelier__go, a.taste__card:hover .taste__go { color: var(--ink-900); gap: 9px; }

/* ---------- Page détail atelier ---------- */
/* « En bref » sous l'image : liste de specs épurée */
.pd__aside { display: flex; flex-direction: column; gap: var(--space-5); }
.pd__brief .prep { grid-template-columns: 1fr; gap: 0; }
.pd__brief .prep__item { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 14px;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-ink); border-radius: 0; padding: 9px 2px; }
.pd__brief .prep__item:last-child { border-bottom: 0; }
.pd__brief .prep__v { font-size: 15px; text-align: right; }
.pd__brief .pd__hint { margin-top: 10px; }
.exp-others { display: flex; flex-direction: column; gap: 8px; }
.exp-others__link { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--sage-700);
  transition: color var(--dur-fast) var(--ease-out); }
.exp-others__link:hover { color: var(--ink-900); }
.pd__prose { margin-top: var(--space-5); }

/* ---------- Preuve sociale (avis Google) ---------- */
.avis__inner { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.avis__badge { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none;
  padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft);
  background: var(--surface-card); box-shadow: var(--shadow-sm); }
.avis__stars { color: var(--gold-500); letter-spacing: 1px; font-size: 15px; }
.avis__note { font-family: var(--font-sans); font-size: 15px; color: var(--ink-700); }
.avis__note strong { color: var(--ink-900); }
.avis__count { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--sage-700); }
.avis__badge:hover .avis__count { color: var(--ink-900); }
.avis__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); width: 100%; }
.avis__card { margin: 0; background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.avis__q { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.55;
  color: var(--text-body); quotes: "«\00A0" "\00A0»"; }
.avis__q::before { content: open-quote; } .avis__q::after { content: close-quote; }
.avis__who { margin-top: 12px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-muted); }
/* Variante compacte (pages format d'atelier : 1 à 3 avis) — centrés, largeur bornée
   pour éviter le vide d'une grille 3 colonnes à moitié remplie. */
.avis--compact { padding-top: 0; }  /* le bloc .pd au-dessus apporte déjà l'espace haut */
.avis--compact .avis__list { display: flex; flex-wrap: wrap; justify-content: center; }
.avis--compact .avis__card { flex: 1 1 300px; max-width: 420px; }
@media (max-width: 760px) { .avis__list { grid-template-columns: 1fr; } }

/* ---------- Bloc « Venir » partagé + carte minimaliste maison ---------- */
.visit__inner { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-7); align-items: center; }
.visit__info { display: flex; flex-direction: column; align-items: flex-start; }
.visit__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.1; color: var(--ink-900); margin: 18px 0 0; }
.visit__hours { font-family: var(--font-serif); font-size: 16.5px; color: var(--ink-500); margin: 14px 0 0; }
.visit__cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.visit__map { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
  background: radial-gradient(130% 120% at 30% 10%, var(--paper-50), var(--surface-celadon));
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.visit__map:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.visit__map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* le repère — un pin façon sceau */
.visit__pin { position: absolute; top: 47%; left: 50%; width: 24px; height: 24px;
  transform: translate(-50%, -100%) rotate(-45deg); background: var(--seal-600);
  border-radius: 50% 50% 50% 0; box-shadow: 0 8px 16px -4px rgba(124, 39, 30, 0.5); }
.visit__pin::after { content: ''; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px;
  background: var(--paper-50); border-radius: 50%; }
.visit__cap { position: absolute; bottom: 12px; right: 12px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-700);
  background: color-mix(in srgb, var(--paper-50) 88%, transparent); padding: 5px 11px;
  border-radius: var(--radius-pill); backdrop-filter: blur(2px); }
@media (max-width: 760px) {
  .visit__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .visit__map { aspect-ratio: 16 / 9; }
}

/* ---------- Photo de la devanture sur le manifeste ---------- */
.manifesto__photo { margin: 36px auto 0; max-width: 560px; }
.manifesto__photo img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}
/* ---------- Le sceau se tamponne sur le manifeste ---------- */
.manifesto__stamp { display: flex; justify-content: center; margin-top: 32px; }
.manifesto__stamp-seal {
  width: 64px; height: 64px; font-size: 30px;
  transform: rotate(-5deg);
  box-shadow: 0 14px 30px -14px rgba(124,39,30,0.6);
}

/* ---------- La lune de feuilles derrière la carte ---------- */
.carte { position: relative; overflow: clip; }
.carte__lune {
  position: absolute; top: 24%;
  left: calc((100% - min(100%, var(--site-max))) / 2 + 905px);
  width: min(34vw, 480px); aspect-ratio: 1;
  margin: 0; pointer-events: none; z-index: 0;
}
.carte__lune img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; mix-blend-mode: multiply; opacity: 0.55;
}
.carte .section__head, .carte .menu { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .carte__lune { width: 70vw; left: auto; right: -30%; opacity: 0.8; }
}

/* ---------- Hublots — fenêtres fixes, photos mobiles ---------- */
.hublot { position: relative; overflow: clip; }
.hublot img { width: 100%; height: 132%; object-fit: cover; display: block; }
.arts__tiles .hublot { height: 170px; border-radius: var(--radius-md); }
.taste__media.hublot { height: 200px; border-bottom: 1px solid var(--border-soft); }

/* ---------- Le rouleau de voyage 手卷 ---------- */
.story__voyages { overflow-x: auto; }
@media (min-width: 901px) { .pjs .story__voyages { overflow: clip; } }
.scroll { display: flex; gap: 18px; align-items: flex-start; }
.scroll__item { flex: none; width: clamp(220px, 24vw, 330px); margin: 0; }
.scroll__item img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-md); display: block;
}
.scroll__cap { color: rgba(245,239,226,0.8); font-size: 19px; margin-top: 8px; }
@media (max-width: 900px) {
  .story__voyages { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scroll { animation: none; }
  .scroll__item { width: 66vw; }
}

/* ---------- L'adresse qui se détache du mur ---------- */
.venir { position: relative; overflow: clip; }
.venir > * { position: relative; }
.venir__glyph {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: min(44vh, 30rem); line-height: 1;
  color: var(--indigo-700); opacity: 0.06;
  pointer-events: none; user-select: none;
}

/* ============================================================
   Mobile bolder — sur petit écran, on garde le drame :
   hero plein écran, glyphe plus présent, lune plus grande,
   échelle typographique relevée.
   ============================================================ */
@media (max-width: 700px) {
  /* hero plein écran, photo + 茶 bien visibles */
  .hero--v2 { min-height: 100svh; }
  .hero--v2 .hero__title { font-size: clamp(3.3rem, 14vw, 4.4rem); }
  .hero--v2 .hero__glyph {
    font-size: 130vw; right: -32%; top: 46%;
    color: rgba(245,239,226,0.13);
  }
  .hero__lede { font-size: 1.15rem; }

  /* titres : on ne redescend pas en taille de carte de visite */
  .section__title { font-size: clamp(2.2rem, 9vw, 2.6rem); }
  .manifesto__p { font-size: clamp(1.85rem, 7.6vw, 2.2rem); }
  .venir__h { font-size: clamp(2.1rem, 8.6vw, 2.5rem); }
  .story__h { font-size: clamp(2rem, 8vw, 2.4rem); }
  .phead__title { font-size: clamp(2.5rem, 11vw, 3rem); }

  /* la lune de feuilles occupe l'écran, le menu passe dessus */
  .carte__lune { width: 105vw; left: auto; right: -45%; top: 2%; }
  .carte__lune img { opacity: 0.45; }

  /* la fenêtre montagne garde de la hauteur */
  .window { height: 58svh; }
  .window__caption { font-size: 18px; right: var(--gutter); }

  /* le sceau du manifeste, un cran plus grand */
  .manifesto__stamp-seal { width: 72px; height: 72px; font-size: 34px; }

  /* le 来 final plein cadre */
  .venir__glyph { font-size: 120vw; opacity: 0.07; }
}

/* ============================================================
   Moteur de secours JS (html.pjs) — Safari / Firefox.
   Les transforms parallax sont posés en inline par site.js ;
   ici, les états initiaux + transitions des révélations.
   ============================================================ */
.pjs :where(.section__head, .jcard, .offer, .ttype, .atelier,
.igtile, .taste__card, .menu__row, .fab__row, .ware,
.jfeature__media, .jfeature__body, .band__inner,
.reserve__intro, .reserve__card,
.arts__grid > *, .story__grid > *, .story__voyages,
.venir > :not(.venir__glyph)) {
  opacity: 0; translate: 0 26px;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
}
.pjs .is-in { opacity: 1; translate: 0 0; }
/* dans les grilles à filets (piliers, carte, schéma), pas de translation :
   elle laissait voir le fond derrière les cartes pendant l'apparition */
.pjs :where(.offer, .menu__row, .fab__row) { translate: 0 0; }



/* ============================================================
   L'échelle d'oxydation — « De la même feuille, cinq chemins ».
   Le fil or relie les cueillettes (même départ), l'étape clé est
   un cachet dans la couleur de la famille, et la colonne des
   liqueurs brunit en descendant. Au survol d'une étape, la
   couleur prend et son explication s'écrit sous le chemin.
   ============================================================ */
.fab__hint { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); margin: 18px 0 4px; }
.fab-list { list-style: none; margin: 0; padding: 0; position: relative; }
.fab-list .fab__row {
  position: relative;
  display: grid; grid-template-columns: 250px 1fr 120px;
  grid-template-rows: auto auto;
  gap: 4px 20px; align-items: center;
  padding: 24px 22px;
  border-top: 1px solid color-mix(in srgb, var(--gold-500) 32%, transparent);
  border-bottom: 0;
  background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--liqueur) 7%, transparent));
}
.fab-list .fab__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 32%, transparent); }
.fab-famille { position: relative; grid-row: 1 / 3; align-self: center; min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; }
.fab-hanzi {
  position: absolute; left: -4px; top: 50%; transform: translateY(-52%);
  font-family: var(--font-display); font-size: 58px; line-height: 1;
  color: rgba(42,39,35,0.1); pointer-events: none;
}
.fab-name { position: relative; font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--ink-900); margin: 0; padding-left: 14px; }
.fab-desc { position: relative; z-index: 1; margin: 0; padding-left: 14px; max-width: 30ch; font-family: var(--font-serif); font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.fab-chemin { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 0; padding: 0; position: relative; z-index: 1; counter-reset: fab-etape; }
.fab-etape {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  counter-increment: fab-etape;
  font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.03em;
  border: 1px solid rgba(42,39,35,0.3); border-radius: var(--radius-pill);
  padding: 5px 10px 5px 6px; background: var(--paper-100); color: var(--ink-700);
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* numéro d'ordre — pastille à gauche */
.fab-etape::before {
  content: counter(fab-etape); flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
  background: color-mix(in srgb, var(--ink-900) 12%, transparent); color: var(--ink-700);
}
.fab-etape__t { line-height: 1; }
/* affordance « + » — invite à cliquer, pivote en « × » quand actif */
.fab-etape__plus { position: relative; flex: none; width: 11px; height: 11px; margin-left: 1px; opacity: 0.5;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.fab-etape__plus::before, .fab-etape__plus::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; }
.fab-etape__plus::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.fab-etape__plus::after  { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }
/* flèche d'ordre entre les étapes */
.fab-etape:not(:first-child) { margin-left: 22px; }
.fab-etape:not(:first-child)::after {
  content: '→'; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  width: 22px; text-align: center; font-size: 13px; line-height: 1;
  color: var(--gold-500); opacity: 0.8; pointer-events: none;
}
/* l'étape clé — le cachet de la famille */
.fab-etape--cle {
  background: var(--liqueur);
  border-color: color-mix(in srgb, var(--liqueur) 70%, var(--ink-900));
  color: var(--ink-900); font-weight: 600;
  box-shadow: 0 0 0 3px var(--paper-100), 0 0 0 4px color-mix(in srgb, var(--liqueur) 70%, var(--ink-900));
}
.fab-etape--cle::before { background: color-mix(in srgb, var(--ink-900) 24%, transparent); color: var(--ink-900); }
.fab__row--dark .fab-etape--cle { color: #F5EFE2; }
.fab__row--dark .fab-etape--cle::before { background: rgba(245,239,226,0.28); color: #F5EFE2; }
/* survol / focus / actif : la couleur prend et l'étape reste allumée */
.fab-etape:hover, .fab-etape:focus-visible, .fab-etape.is-active {
  background: color-mix(in srgb, var(--liqueur) 28%, var(--paper-100));
  border-color: color-mix(in srgb, var(--liqueur) 65%, var(--ink-900));
  color: var(--ink-900);
}
.fab-etape:hover .fab-etape__plus, .fab-etape:focus-visible .fab-etape__plus { opacity: 0.85; }
.fab-etape.is-active { box-shadow: 0 2px 12px color-mix(in srgb, var(--liqueur) 45%, transparent); }
.fab-etape.is-active .fab-etape__plus { transform: rotate(45deg); opacity: 0.9; }
.fab-etape:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.fab-etape--cle:hover, .fab-etape--cle:focus-visible, .fab-etape--cle.is-active { background: var(--liqueur); }
/* sur les familles sombres, le texte du cachet reste crème au survol */
.fab__row--dark .fab-etape--cle:hover,
.fab__row--dark .fab-etape--cle:focus-visible,
.fab__row--dark .fab-etape--cle.is-active { color: #F5EFE2; }
/* l'explication s'écrit sous le chemin */
/* l'explication réserve toujours sa place (padding + hauteur constants) pour
   ne pas décaler la suite au survol ; seuls le filet et le fond apparaissent. */
.fab-exp {
  grid-column: 2 / 3; margin: 10px 0 0; min-height: 2.4em; padding: 8px 14px;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-serif); font-style: italic; font-size: 14.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--liqueur) 42%, var(--ink-700));
}
.fab-exp:not(:empty) {
  border-left-color: color-mix(in srgb, var(--liqueur) 72%, var(--ink-900));
  background: color-mix(in srgb, var(--liqueur) 11%, transparent);
}
/* la liqueur — glaçure en dégradé radial */
.fab-liqueur { grid-row: 1 / 3; grid-column: 3; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.fab-liqueur::before {
  content: ''; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%,
    color-mix(in srgb, var(--liqueur) 88%, #fff) 0%,
    var(--liqueur) 62%,
    color-mix(in srgb, var(--liqueur) 86%, var(--ink-900)) 100%);
  /* le bord du bol en porcelaine */
  box-shadow: 0 0 0 5px var(--paper-50),
              0 0 0 6px var(--border),
              0 10px 22px -14px rgba(42,39,35,0.35),
              inset 0 2px 6px color-mix(in srgb, var(--liqueur) 60%, var(--ink-900));
}
.fab-liqueur__cap { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
/* révélations : la liqueur infuse après la rangée, le fil se déroule */
.pjs .fab__row .fab-liqueur { opacity: 0; scale: 0.94; transition: opacity 0.9s var(--ease-out) 0.3s, scale 0.9s var(--ease-out) 0.3s; }
.pjs .fab__row.is-in .fab-liqueur { opacity: 1; scale: 1; }
@media (max-width: 900px) {
  .fab-list .fab__row { grid-template-columns: 1fr auto; padding: 20px 14px; }
  .fab-famille { grid-row: 1; grid-column: 1; min-height: 0; }
  .fab-liqueur { grid-row: 1; grid-column: 2; }
  .fab-liqueur::before { width: 64px; height: 64px; }
  .fab-chemin { grid-row: 2; grid-column: 1 / -1; margin-top: 12px; }
  /* les pastilles restent d'un seul tenant et passent à la ligne entières
     (flex-wrap) — jamais coupées sur 2 lignes */
  .fab-etape { white-space: nowrap; }
  .fab-chemin { gap: 9px; }
  /* l'ordre est porté par les numéros : on masque les flèches (qui pointeraient
     de travers quand les pastilles passent à la ligne) */
  .fab-etape:not(:first-child) { margin-left: 0; }
  .fab-etape:not(:first-child)::after { display: none; }
  .fab-exp { grid-row: 3; grid-column: 1 / -1; }
}

/* ---------- La carte du moment : bloc aligné à gauche ---------- */
.carte .menu {
  margin-left: calc((100% - min(100%, var(--site-max))) / 2);
  margin-right: auto;
}

/* ---------- Images intérims — styles ajoutés par l'agent images ---------- */
.tea-grid .odt-tea__media { position: relative; aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid var(--border-soft); }
.odt-tea__media img, .pd__media img, .ware__media img,
.jfeature__media img, .jcard__media img, .post__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.post__media { overflow: hidden; }
.story__portrait { overflow: hidden; border-radius: var(--radius-lg); }
.story__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phead__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,24,20,0.8) 0%, rgba(28,24,20,0.35) 60%, rgba(28,24,20,0.25) 100%); }

/* ---------- Ateliers : cartes avec photo + réservation Instagram ---------- */
.atelier { padding: 0; overflow: hidden; }
.atelier__media { height: 175px; border-bottom: 1px solid var(--border-soft); }
.atelier__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.reserve__insta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; color: var(--ink-900); }
.reserve__insta:hover { color: var(--sage-700); }

/* ---------- La vapeur — elle monte plus vite que la page ---------- */
.story { position: relative; }
.story__vapeur {
  position: absolute; top: -210px; left: 0;
  width: 100%; height: 640px; object-fit: cover;
  mix-blend-mode: screen; opacity: 0.3;
  pointer-events: none; user-select: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
}
.story__grid, .story__voyages { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .story__vapeur { height: 420px; top: -120px; }
}

/* ---------- La note épinglée de Lijun — à cheval entre deux sections ---------- */
.note-pin {
  position: relative; z-index: 2;
  max-width: 500px;
  margin: -48px clamp(1.25rem, 10vw, 12rem) -16px auto;
}
.note-pin .note-bois { transform: rotate(-0.8deg); }
.note-pin .odt-note { transform: rotate(-1.6deg); }
@media (max-width: 700px) {
  .note-pin { margin: -38px var(--gutter) -8px; max-width: none; }
}

/* ============================================================
   Hover unifié (accueil) : le titre se souligne, rien ne saute.
   Même geste que les cartes « Trois façons de goûter ».
   ============================================================ */
.offer__t, .jcard__title {
  width: fit-content;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.32s var(--ease-out);
  padding-bottom: 2px;
}
.offer--link:hover .offer__t, .offer--link:focus-visible .offer__t,
.jcard:hover .jcard__title, .jcard:focus-within .jcard__title {
  background-size: 100% 2px;
}

/* ---------- Vapeur du hero — un murmure au-dessus de la théière ---------- */
.hero__vapeur {
  position: absolute; right: -8%; bottom: -14%;
  width: min(60vw, 920px);
  mix-blend-mode: screen; opacity: 0.32;
  pointer-events: none; user-select: none; z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 55% 52%, #000 42%, transparent 82%);
          mask-image: radial-gradient(ellipse 75% 75% at 55% 52%, #000 42%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__vapeur { animation: odt-steam-drift 26s var(--ease-in-out) infinite alternate; }
  @keyframes odt-steam-drift {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-3.5%) scale(1.04); }
  }
}
@media (max-width: 700px) {
  .hero__vapeur { width: 130vw; right: -40%; bottom: -8%; opacity: 0.26; }
}

/* ============================================================
   HandwrittenNote — la note se pose, puis Lijun signe.
   Le corps est lisible tout de suite ; l'ombre raconte la pose
   du papier ; la signature vermillon s'écrit en dernier.
   (Remplace le flottement parallax, rejeté.)
   ============================================================ */
.pjs .odt-note {
  opacity: 0; translate: 0 10px;
  /* en l'air : ombre large, floue, décollée */
  box-shadow: 0 18px 30px -10px rgba(42, 39, 35, 0.26);
  transition: translate 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms var(--ease-out),
              box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pjs .odt-note.is-in {
  opacity: 1; translate: 0 0;
  /* posée : ombre de contact serrée + halo résiduel */
  box-shadow: 0 1px 3px rgba(42, 39, 35, 0.14),
              0 8px 18px -14px rgba(42, 39, 35, 0.2);
}
/* hover : une respiration d'ombre, pas de saut */
.pjs .odt-note.is-in:hover {
  box-shadow: 0 2px 5px rgba(42, 39, 35, 0.15),
              0 12px 22px -14px rgba(42, 39, 35, 0.22);
  transition-duration: 200ms;
}
/* la signature arrive après la pose — fondu + léger glissement */
.pjs .odt-note__author {
  opacity: 0; translate: -7px 0;
  transition: opacity 0.45s var(--ease-out) 0.45s, translate 0.45s var(--ease-out) 0.45s;
}
.pjs .odt-note.is-in .odt-note__author { opacity: 1; translate: 0 0; }

/* ---------- Hover unifié, suite : boutique (thés & céramiques) ---------- */
.odt-tea__name, .ware__name {
  width: fit-content;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.32s var(--ease-out);
  padding-bottom: 2px;
}
.odt-tea--link:hover .odt-tea__name, .odt-tea--link:focus-visible .odt-tea__name,
.ware:hover .ware__name, .ware:focus-visible .ware__name {
  background-size: 100% 2px;
}

/* ============================================================
   Toutes les notes manuscrites sont posées sur le bois de la
   table de Lijun (photo fournie par la boutique). Le bois reste
   droit et immobile ; la note se pose dessus.
   ============================================================ */
.note-bois {
  width: fit-content; max-width: 560px;
  padding: clamp(18px, 2.6vw, 30px);
  border-radius: 3px;
  /* échelle native du veinage (jamais cover) + voile crème pour raccorder à la page */
  background:
    linear-gradient(rgba(245, 239, 226, 0.16), rgba(245, 239, 226, 0.16)),
    url("../img/bois-table.f8f101010350.jpg") var(--wood-x, 50%) var(--wood-y, 30%) / 680px auto no-repeat;
  /* lumière directionnelle (le haut s'ombre, posé au sol), pas de halo uniforme */
  box-shadow: inset 0 22px 28px -20px rgba(42, 39, 35, 0.38),
              inset 0 -12px 22px -18px rgba(42, 39, 35, 0.2),
              0 1px 4px rgba(42, 39, 35, 0.1);
}
/* le papier touche la table : ombre de contact, pas de flottement */
.note-bois .odt-note,
.pjs .note-bois .odt-note.is-in {
  box-shadow: 0 1px 1px rgba(42, 39, 35, 0.3),
              0 4px 10px -6px rgba(42, 39, 35, 0.25);
}
/* crops différents : la même table, pas le même nœud */
.note-pin .note-bois { --wood-x: 24%; --wood-y: 62%; }
.reserve__intro .note-bois { --wood-x: 70%; --wood-y: 38%; }

/* ============================================================
   « Venez vous asseoir à cette table » — la section venir est
   posée sur le bois de la boutique : la table monte du bas et
   se fond dans le crème ; l'adresse est posée dessus.
   ============================================================ */
.venir--table { max-width: none; padding-bottom: var(--space-11); }
.venir__bois {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 82%;
  filter: blur(1.6px) saturate(0.95);
  transform: scale(1.02);
  pointer-events: none; user-select: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 24%, rgba(0,0,0,0.6) 54%, #000 80%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 24%, rgba(0,0,0,0.6) 54%, #000 80%);
}
/* voile crème AU-DESSUS du bois pour garder l'adresse parfaitement lisible */
.venir--table::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--paper-100) 0%, rgba(245,239,226,0.66) 48%, rgba(245,239,226,0.16) 100%);
}
.venir--table > :not(.venir__bois) { position: relative; z-index: 2; }

/* la table rejoint directement le footer, sans bande crème */
.site-footer { margin-top: 0; }

/* ---------- Cartes reels Instagram (design maison) ---------- */
.ig-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ig-card {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
  background: var(--surface-sunken); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ig-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ig-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); }
.ig-card:hover .ig-card__img { transform: scale(1.05); }
.ig-card__img--empty { background: radial-gradient(120% 90% at 50% 0%, var(--sage-300), var(--sage-700)); }
/* pastille play — le sceau, pas le bleu Instagram */
.ig-card__play { position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%;
  background: color-mix(in srgb, var(--paper-50) 92%, transparent);
  box-shadow: 0 6px 20px rgba(20, 28, 20, 0.28); backdrop-filter: blur(2px);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.ig-card__play::before { content: ''; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--seal-600); }
.ig-card:hover .ig-card__play { transform: translate(-50%, -50%) scale(1.06); background: var(--paper-50); }
/* pied — dégradé sombre + légende */
.ig-card__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 3px; padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(20, 28, 20, 0.8), rgba(20, 28, 20, 0.12) 68%, transparent); }
.ig-card__cap { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: #fff; line-height: 1.25; }
.ig-card__more { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--celadon-300); }
.ig-card:hover .ig-card__more { color: #fff; }
@media (max-width: 720px) { .ig-cards { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 420px) { .ig-cards { grid-template-columns: 1fr; } }