/* ============================================================
   Sabai Siam — feuille de style unique.
   Direction : luxe clair botanique, éditorial, asymétrique.
   Mauve pour la marque, vert pour l'action (c'est l'aloe vera et les
   compresses aux herbes, pas une décoration), doré en filet seulement.

   Deux séries d'images cohabitent sans se mélanger : les photographies du
   salon portent le discours « voici notre salon », les illustrations de
   synthèse restent cantonnées à la carte des soins, en petit format. Le
   reste de la tenue visuelle repose toujours sur le fil méridien, la
   composition asymétrique et la carte des tarifs typographiée.
   ============================================================ */

/* ---------------- 1. jetons ---------------- */
:root{
  /* encre */
  --c-ink:#2B1A33;          /* 15,3:1 sur papier */
  --c-ink-soft:#5C4A66;     /*  7,6:1 sur papier */

  /* mauve — la marque */
  --c-plum-900:#21132A;
  --c-plum-700:#40254D;
  --c-mauve-600:#6D4B7C;
  --c-mauve-350:#C6ADCF;
  --c-mauve-150:#E8DEEE;
  --c-mauve-060:#F5F0F7;

  /* vert — l'action */
  --c-jade-800:#17493C;
  --c-jade-600:#226B57;
  --c-jade-300:#8FBFAE;
  --c-jade-100:#E3F0EA;

  /* doré — rationné.
     gold-500 tombe à 2,34:1 sur papier : filets, puces et grands chiffres
     uniquement. Pour du texte doré lisible, c'est gold-700 ou rien. */
  --c-gold-700:#7A5F12;
  --c-gold-500:#C2A14A;
  --c-gold-300:#E4CE8F;

  /* fonds
     Le papier est volontairement chaud plutôt que blanc : un blanc pur sous
     un ciel de Koh Samui donne une page clinique, et le mauve de la marque
     y paraît froid. --c-tint est le lavis pastel qui habille l'en-tête et
     le haut de page — c'est lui qui donne de la profondeur au premier écran. */
  --c-paper:#FAF7F3;
  --c-tint:#F2EBF3;
  --c-tint-warm:#F7F0EA;
  --c-surface:#FFFFFF;
  --c-line:#E2D8DF;         /* bords intérieurs, décoratif */
  --c-line-firm:#B9A8BB;    /* filets qui structurent */

  /* échelle typographique fluide, tierce mineure → tierce majeure */
  --step--1:clamp(.833rem,.80rem + .16vw,.900rem);
  --step-0:clamp(1rem,.96rem + .20vw,1.125rem);
  --step-1:clamp(1.2rem,1.13rem + .35vw,1.406rem);
  --step-2:clamp(1.44rem,1.32rem + .58vw,1.758rem);
  --step-3:clamp(1.728rem,1.55rem + .90vw,2.197rem);
  --step-4:clamp(2.074rem,1.80rem + 1.37vw,2.747rem);
  --step-5:clamp(2.488rem,2.07rem + 2.09vw,3.433rem);
  --step-6:clamp(2.986rem,2.37rem + 3.08vw,4.292rem);
  --measure:68ch;

  /* espacement */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
  --sp-section:clamp(3.5rem,8vw,7rem);
  --sp-gutter:clamp(1.25rem,5vw,4rem);
  --wrap:1180px;

  /* rayons et ombres — teintées prune, jamais l'ombre dure brutaliste de BYB :
     ce langage est celui de l'agence, pas celui d'un salon de massage. */
  --r-1:2px; --r-2:6px; --r-3:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(43,26,51,.06),0 2px 6px rgba(43,26,51,.05);
  --sh-2:0 4px 10px rgba(43,26,51,.06),0 12px 28px rgba(43,26,51,.08);
  --sh-3:0 18px 48px rgba(43,26,51,.14);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur-1:160ms; --dur-2:280ms;

  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --display-lh:1.05;
  --display-ls:-.02em;
  --body-lh:1.7;
}

/* ---------------- 2. typographie par script ----------------
   Le thaï empile voyelles et tons au-dessus de la ligne, et descend en
   dessous. Les interlignes serrés et l'interlettrage négatif du latin
   les tronquent — leçon déjà apprise sur la version thaïe de l'audit. */
html[lang="th"]{
  --font-display:"Noto Serif Thai","Leelawadee UI",Tahoma,serif;
  --font-body:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
  --display-lh:1.45;
  --display-ls:0;
  --body-lh:1.95;
}
html[lang="th"] :is(p,li,dd,dt){word-break:normal;line-break:loose;overflow-wrap:break-word;hyphens:none}
html[lang="th"] em{font-style:normal;color:var(--c-mauve-600);font-weight:600}

/* Le cyrillique court 10 à 15 % plus long que le latin et supporte mal
   le resserrement. */
html[lang="ru"]{--display-ls:-.01em;--body-lh:1.75}

/* ---------------- 3. base ---------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:var(--body-lh);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:var(--display-lh);letter-spacing:var(--display-ls);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--c-jade-600);outline-offset:3px;border-radius:var(--r-1)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-gutter)}
.section{padding:var(--sp-section) 0;position:relative}
.prose p+p{margin-top:var(--sp-4)}
.prose{color:var(--c-ink-soft);max-width:var(--measure)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-plum-900);color:var(--c-paper);padding:var(--sp-3) var(--sp-4)}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

.eyebrow{
  font-size:var(--step--1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-gold-700);margin-bottom:var(--sp-4);
}
.section-h{font-size:var(--step-4);margin-bottom:var(--sp-5)}

/* Le grand chiffre doré qui ouvre certaines bandes. Décoratif, donc
   aria-hidden dans le HTML — il ne doit pas être lu à voix haute. */
.big-num{
  font-family:var(--font-display);font-size:var(--step-5);color:var(--c-gold-500);
  display:block;line-height:1;margin-bottom:var(--sp-2);font-variant-numeric:tabular-nums;
}

/* ---------------- 4. le fil méridien ----------------
   Un filet doré qui descend toute la page dans la gouttière gauche, en
   référence aux lignes sen du nuad thaï. C'est le dispositif qui empêche
   une page sans photo de lire comme une pile de blocs. */
.meridian{
  position:fixed;top:0;bottom:0;left:max(1.5rem,calc((100vw - var(--wrap))/2 - 1.25rem));
  width:1px;background:linear-gradient(180deg,transparent,var(--c-gold-500) 12%,var(--c-gold-500) 88%,transparent);
  opacity:.5;pointer-events:none;z-index:1;
}
/* Le tick de section : un petit trait qui accroche le fil. */
.section::before,.hero::before{
  content:"";position:absolute;top:0;
  left:max(1.5rem,calc((100vw - var(--wrap))/2 - 1.25rem));
  width:13px;height:1px;background:var(--c-gold-500);opacity:.75;
}
@media (max-width:900px){.meridian{display:none}.section::before,.hero::before{display:none}}

/* ---------------- 5. en-tête ---------------- */
/* L'en-tête porte le lavis mauve, pas le papier : posé sur le dégradé du
   héros, il crée une bande colorée en haut de page au lieu d'un bandeau
   blanc qui flotte. Le filet doré sous la bordure prolonge le fil méridien. */
.site-head{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--c-tint) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--c-line);
  box-shadow:0 1px 0 rgba(194,161,74,.22);
}
.head-in{display:flex;align-items:center;gap:var(--sp-5);padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex:none}
.brand-mark{display:block;width:34px;height:34px;color:var(--c-mauve-600)}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;letter-spacing:.01em}
.brand-thai{font-size:var(--step--1);color:var(--c-mauve-600)}

.site-nav{display:flex;gap:var(--sp-5);margin-left:auto}
.nav-link{
  text-decoration:none;font-size:var(--step--1);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-ink-soft);padding:var(--sp-2) 0;
  border-bottom:1px solid transparent;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.nav-link:hover{color:var(--c-ink)}
.nav-link.is-on{color:var(--c-ink);border-bottom-color:var(--c-gold-500)}
html[lang="th"] .nav-link{text-transform:none;letter-spacing:0}

/* --- sélecteur de langue ---
   Un onglet discret : drapeau + initiales, qui se déplie sur les autres
   langues. Bâti sur <details>, donc sans JavaScript. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lang-switch{position:relative;flex:none}
.lang{position:relative}
.lang-cur{
  display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none;
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-line);border-radius:var(--r-pill);
  background:var(--c-surface);font-size:var(--step--1);color:var(--c-ink-soft);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.lang-cur::-webkit-details-marker{display:none}
.lang-cur:hover{border-color:var(--c-mauve-600);color:var(--c-ink)}
.lang-code{font-weight:700;letter-spacing:.06em}
.flag{display:block;width:18px;height:13px;border-radius:1px;box-shadow:0 0 0 1px rgba(43,26,51,.10)}
.lang-caret{
  width:0;height:0;margin-left:2px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid var(--c-ink-soft);transition:transform var(--dur-1) var(--ease);
}
.lang[open] .lang-cur{border-color:var(--c-mauve-600);color:var(--c-ink)}
.lang[open] .lang-caret{transform:rotate(180deg)}

.lang-list{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  margin:0;padding:var(--sp-2);list-style:none;min-width:170px;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-2);box-shadow:var(--sh-2);
}
.lang-list a{
  display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-1);
  font-size:var(--step--1);color:var(--c-ink-soft);white-space:nowrap;
}
.lang-list a:hover{background:var(--c-mauve-060);color:var(--c-ink)}
.lang-name{color:var(--c-ink-faint,var(--c-ink-soft));opacity:.75}

.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:var(--sp-2);cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--c-ink)}
.mobile-nav{border-top:1px solid var(--c-line);padding:var(--sp-4) var(--sp-gutter) var(--sp-5)}
.mobile-links{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4)}

/* Seuil relevé à 1100px depuis l'ajout du cinquième onglet. En russe les
   libellés sont les plus longs — « Услуги и цены », « Как найти » — et la
   barre se serrait entre 960 et 1150px avant de basculer. Mieux vaut passer
   au menu un peu tôt qu'afficher une navigation à l'étroit. */
@media (max-width:1100px){
  /* .head-in en préfixe : sans cela, le .btn{display:inline-flex} déclaré
     plus bas dans la feuille l'emporterait à égalité de spécificité, et le
     bouton WhatsApp resterait coincé dans un en-tête déjà étroit. */
  .head-in .site-nav,.head-in .head-cta{display:none}
  .nav-toggle{display:flex}
  .head-in{gap:var(--sp-3)}
  .lang-switch{margin-left:auto}
}
@media (min-width:1101px){.mobile-nav{display:none!important}}

/* ---------------- 6. boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
  font-size:var(--step--1);font-weight:700;letter-spacing:.03em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.btn-lg{padding:var(--sp-4) var(--sp-6);font-size:var(--step-0)}
.btn-wa{background:var(--c-jade-600);color:#fff;box-shadow:var(--sh-1)}
.btn-wa:hover{background:var(--c-jade-800);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-jade{background:var(--c-jade-600);color:#fff}
.btn-jade:hover{background:var(--c-jade-800)}
.btn-ghost{border-color:var(--c-line-firm);color:var(--c-ink)}
.btn-ghost:hover{border-color:var(--c-mauve-600);color:var(--c-mauve-600);background:var(--c-mauve-060)}

.link-gold{
  color:var(--c-gold-700);text-decoration:none;font-weight:700;font-size:var(--step--1);
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--c-gold-500);
  padding-bottom:2px;
}
.link-gold:hover{color:var(--c-ink);border-bottom-color:var(--c-ink)}
html[lang="th"] .link-gold{text-transform:none;letter-spacing:0}

/* ---------------- 7. héros ----------------
   Asymétrique et jamais centré. À droite, là où un site à photos poserait
   une image, on met de l'information : le soin signature, sa durée, son prix. */
/* Le héros descend du lavis de l'en-tête vers le papier : la transition est
   invisible à l'œil mais donne au premier écran une profondeur que le blanc
   plat n'avait pas. */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(3rem,7vw,5.5rem) 0 0;
  background:linear-gradient(180deg,var(--c-tint) 0%,color-mix(in srgb,var(--c-tint) 45%,var(--c-paper)) 45%,var(--c-paper) 100%);
}
.hero-in{position:relative;padding-bottom:clamp(2rem,5vw,3.5rem)}
.hero-copy{position:relative;z-index:2}
.hero-h1{font-size:var(--step-6);margin-bottom:var(--sp-5);max-width:16ch}
.h1-line{display:block}
.hero-h1 .h1-line:nth-child(2){color:var(--c-mauve-600)}
.hero-lead{font-size:var(--step-1);color:var(--c-ink-soft);max-width:52ch;margin-bottom:var(--sp-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hero-walkin{margin-top:var(--sp-4);font-size:var(--step--1);color:var(--c-ink-soft)}

/* Le nom thaï en très grand derrière le héros. C'est du vrai texte, donc
   sélectionnable et indexé — pas une image de fond.
   Ancré en haut à droite, derrière la carte opaque : plus bas, il passait
   sous les boutons d'appel et l'ensemble devenait illisible. */
.hero-ghost{
  position:absolute;right:-3%;top:-6%;z-index:0;
  font-family:var(--font-display);font-size:clamp(4rem,11vw,9rem);line-height:1;
  color:var(--c-mauve-150);user-select:none;white-space:nowrap;pointer-events:none;
}

.hero-card{
  position:relative;z-index:2;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-top:3px solid var(--c-gold-500);
  border-radius:var(--r-3);padding:var(--sp-6);box-shadow:var(--sh-2);
}
.hero-card-eyebrow{font-size:var(--step--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold-700);margin-bottom:var(--sp-3)}
html[lang="th"] .hero-card-eyebrow,html[lang="th"] .eyebrow{text-transform:none;letter-spacing:.02em}
.hero-card-h{font-size:var(--step-2);margin-bottom:var(--sp-1)}
.hero-card-thai{font-size:var(--step--1);color:var(--c-mauve-600);margin-bottom:var(--sp-4)}
.hero-card-note{font-size:var(--step--1);color:var(--c-ink-soft);margin-bottom:var(--sp-5)}
.hero-card-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--c-line)}
.hero-card-dur{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-soft)}
.hero-card-thb{font-family:var(--font-display);font-size:var(--step-3);color:var(--c-plum-900);font-variant-numeric:tabular-nums}
.hero-card-mark{position:absolute;right:var(--sp-5);top:var(--sp-5);width:44px;height:44px;color:var(--c-jade-300);opacity:.9}
.hero-card-mark svg{width:100%;height:100%}

@media (max-width:860px){
  .hero-ghost{font-size:clamp(4rem,22vw,8rem);top:-2%;right:-4%;opacity:.55}
}

/* ---------------- 8. archétypes de section ----------------
   Trois formes qui alternent, jamais deux fois de suite : découpe
   asymétrique, bande à grand chiffre, panneau prune pleine largeur. */

/* (b) découpe 5/7, titre pendu dans la colonne étroite */
.split.is-alt{background:var(--c-tint-warm)}
.split-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.split.is-alt .split-in{direction:rtl}
.split.is-alt .split-in>*{direction:ltr}
@media (max-width:820px){.split-in,.split.is-alt .split-in{grid-template-columns:1fr;direction:ltr}}

/* (c) bande à grand chiffre */
.teaser{background:var(--c-mauve-060);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.teaser-list{list-style:none;margin:0 0 var(--sp-5);padding:0;max-width:640px}
.teaser-row{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--c-line-firm)}
.teaser-name{font-family:var(--font-display);font-size:var(--step-1)}
.teaser-price{margin-left:auto;font-weight:700;color:var(--c-jade-800);font-variant-numeric:tabular-nums;white-space:nowrap}

/* (a) panneau prune, cadre doré en filet interne.
   Sur ce fond, papier sur prune atteint 16,7:1 — la section la plus
   lisible du site, ce qui est inhabituel et voulu. */
.panel{background:var(--c-plum-900);color:var(--c-paper);position:relative}
.panel::after{
  content:"";position:absolute;inset:var(--sp-5) var(--sp-4);
  border:1px solid var(--c-gold-300);opacity:.28;pointer-events:none;border-radius:var(--r-2);
}
/* Grain très léger, en SVG data-URI : zéro requête, et il retire la platitude
   qui trahit les sites sans photographie. */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.panel-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.panel .prose{color:var(--c-mauve-350)}
.panel .section-h{color:var(--c-paper)}
.panel .link-gold{color:var(--c-gold-300);border-bottom-color:var(--c-gold-300)}
.panel .link-gold:hover{color:#fff;border-bottom-color:#fff}
.panel-rating{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.panel-num{font-family:var(--font-display);font-size:var(--step-4);color:var(--c-gold-300);line-height:1}
.panel-cnt{font-size:var(--step--1);color:var(--c-mauve-350)}
.stars{color:var(--c-gold-300);letter-spacing:.12em}
.panel-mark{display:block;width:56px;height:56px;color:var(--c-jade-300);margin-top:var(--sp-5)}
.panel-mark svg{width:100%;height:100%}
@media (max-width:820px){.panel-in{grid-template-columns:1fr}}

.values{margin:0;padding:0;list-style:none;counter-reset:v}
.values li{
  counter-increment:v;position:relative;padding:var(--sp-4) 0 var(--sp-4) var(--sp-8);
  border-bottom:1px solid rgba(226,216,223,.16);color:var(--c-mauve-350);
}
.values li:last-child{border-bottom:0}
.values li::before{
  content:counter(v,decimal-leading-zero);position:absolute;left:0;top:var(--sp-4);
  font-family:var(--font-display);color:var(--c-gold-300);font-size:var(--step-1);font-variant-numeric:tabular-nums;
}
.values strong{color:var(--c-paper)}

/* bande horaires */
.hours-band{background:var(--c-jade-100);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.hours-in{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-6);align-items:center}
.hours-big{font-family:var(--font-display);font-size:var(--step-4);color:var(--c-jade-800);font-variant-numeric:tabular-nums;margin-bottom:var(--sp-3)}
.hours-note{color:var(--c-ink-soft);font-size:var(--step--1);max-width:52ch}
.hours-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:flex-end}
@media (max-width:820px){.hours-in{grid-template-columns:1fr}.hours-actions{justify-content:flex-start}}

/* ---------------- 9. la carte des tarifs ----------------
   Composée comme une carte de restaurant, pas comme une grille de cartes.
   C'est la page que les visiteurs viennent voir : autant qu'elle soit
   l'objet le plus soigné du site. */
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.page-h1{font-size:var(--step-5);margin-bottom:var(--sp-5)}
.page-h1 .h1-line:nth-child(2){color:var(--c-mauve-600)}
.page-lead{font-size:var(--step-1);color:var(--c-ink-soft);max-width:52ch}
.crumbs{font-size:var(--step--1);color:var(--c-ink-soft);margin-bottom:var(--sp-5)}
.crumbs a{color:var(--c-ink-soft);text-decoration:none;border-bottom:1px solid var(--c-line-firm)}
.crumbs a:hover{color:var(--c-ink)}
.crumb-sep{margin:0 var(--sp-2);color:var(--c-line-firm)}

.menu-note-top{
  background:var(--c-mauve-060);border-left:3px solid var(--c-gold-500);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-8);border-radius:0 var(--r-2) var(--r-2) 0;
}
.menu-note-small{font-size:var(--step--1);color:var(--c-ink-soft);margin-top:var(--sp-2)}

.menu-group{margin-bottom:var(--sp-9);max-width:900px}
.menu-group-h{font-size:var(--step-3);margin-bottom:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--c-gold-500)}
.menu-num{
  display:block;font-size:var(--step--1);letter-spacing:.2em;color:var(--c-gold-700);
  font-family:var(--font-body);font-weight:700;margin-bottom:var(--sp-2);font-variant-numeric:tabular-nums;
}
.menu-group-blurb{color:var(--c-ink-soft);max-width:60ch;margin-bottom:var(--sp-5);font-size:var(--step--1)}

.menu-list{list-style:none;margin:0;padding:0}
.menu-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--c-line);
}
.menu-row:last-child{border-bottom:0}
.menu-name{font-family:var(--font-display);font-size:var(--step-1)}
.menu-thai{font-family:var(--font-body);font-size:var(--step--1);color:var(--c-mauve-600);margin-left:var(--sp-2)}
/* Les points de conduite : le trait qui fait la carte de restaurant. */
.menu-lead{border-bottom:1px dotted var(--c-line-firm);transform:translateY(-.25em);min-width:var(--sp-6)}
.menu-vals{display:flex;gap:var(--sp-5);white-space:nowrap}
.menu-price{display:inline-flex;align-items:baseline;gap:var(--sp-2)}
.menu-dur{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-soft)}
html[lang="th"] .menu-dur{text-transform:none;letter-spacing:0}
.menu-thb{font-family:var(--font-display);font-size:var(--step-2);color:var(--c-plum-900);font-variant-numeric:tabular-nums}
.menu-ask{font-size:var(--step--1);color:var(--c-ink-soft);font-style:italic}
.menu-note{grid-column:1/-1;font-size:var(--step--1);color:var(--c-ink-soft);max-width:56ch;margin-top:var(--sp-1)}

/* La signature ressort par un filet doré à gauche, pas par une couleur de fond :
   plus discret, et ça ne crée pas une deuxième hiérarchie dans la carte. */
.menu-row.is-signature{border-left:2px solid var(--c-gold-500);padding-left:var(--sp-4);background:linear-gradient(90deg,var(--c-mauve-060),transparent 60%)}
.menu-chip{
  display:inline-block;margin-left:var(--sp-3);padding:2px var(--sp-2);
  font-family:var(--font-body);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-gold-700);border:1px solid var(--c-gold-500);border-radius:var(--r-pill);vertical-align:middle;
}
html[lang="th"] .menu-chip{text-transform:none;letter-spacing:.02em}

@media (max-width:640px){
  .menu-row{grid-template-columns:1fr;gap:var(--sp-1)}
  .menu-lead{display:none}
  .menu-vals{justify-content:flex-start}
}

/* ---------------- 10. FAQ ---------------- */
.faq-item{border-bottom:1px solid var(--c-line);padding:var(--sp-4) 0}
.faq-item summary{
  cursor:pointer;font-family:var(--font-display);font-size:var(--step-1);
  list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--c-gold-700);font-size:var(--step-2);line-height:1;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-a{color:var(--c-ink-soft);margin-top:var(--sp-3);max-width:var(--measure)}

/* ---------------- 11. page « Venir » ---------------- */
.visit-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.visit-in{grid-template-columns:1fr}}
.visit-map{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start}
.drawn-map{
  width:100%;height:auto;background:var(--c-mauve-060);
  border:1px solid var(--c-line);border-radius:var(--r-3);box-shadow:var(--sh-1);
}
.m-sea{fill:var(--c-jade-100)}
.m-shore{fill:none;stroke:var(--c-jade-300);stroke-width:1.5}
.m-road{fill:none;stroke:var(--c-line-firm);stroke-width:5;stroke-linecap:round}
.m-road-small{stroke-width:3;stroke-dasharray:1 7}
.m-pin{fill:var(--c-mauve-600)}
.m-pin-dot{fill:var(--c-paper)}
.m-dot{fill:var(--c-line-firm)}
.m-compass{fill:var(--c-gold-500)}
.m-label{font-family:var(--font-body);font-size:11px;fill:var(--c-ink-soft);text-anchor:middle}
.m-label-pin{font-weight:700;fill:var(--c-plum-900);font-size:13px}
.m-label-small{font-size:9.5px}
.m-label-sea{fill:var(--c-jade-800);font-style:italic}

.visit-facts{display:flex;flex-direction:column;gap:var(--sp-6)}
.fact{border-left:2px solid var(--c-gold-500);padding-left:var(--sp-5)}
.fact-h{font-size:var(--step--1);font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold-700);margin-bottom:var(--sp-3)}
html[lang="th"] .fact-h{text-transform:none;letter-spacing:.02em}
.fact-body{font-style:normal;color:var(--c-ink-soft)}
.fact-big{font-family:var(--font-display);font-size:var(--step-3);color:var(--c-plum-900);font-variant-numeric:tabular-nums}
.fact-small{font-size:var(--step--1);color:var(--c-ink-soft);margin-top:var(--sp-2)}
.fact-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}

/* ---------------- 12. bande d'appel ---------------- */
.cta-band{background:var(--c-plum-900);color:var(--c-paper);text-align:center}
.cta-in{max-width:640px;margin:0 auto}
.cta-h{font-size:var(--step-4);margin-bottom:var(--sp-4)}
.cta-text{color:var(--c-mauve-350);margin-bottom:var(--sp-6)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}

/* ---------------- 13. pied de page ---------------- */
.site-foot{
  background:var(--c-mauve-060);border-top:1px solid var(--c-line);
  padding-top:var(--sp-8);
  /* trame rotin très basse, en dégradé répété : texture sans image */
  background-image:repeating-linear-gradient(45deg,rgba(109,75,124,.028) 0 2px,transparent 2px 7px);
}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-7);padding-bottom:var(--sp-7)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr;gap:var(--sp-6)}}
.foot-name{font-family:var(--font-display);font-size:var(--step-2);display:block}
.foot-thai{font-size:var(--step--1);color:var(--c-mauve-600);display:block;margin-bottom:var(--sp-3)}
.foot-tag{color:var(--c-ink-soft);max-width:36ch;margin-bottom:var(--sp-4)}
.foot-reviews{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);font-size:var(--step--1);color:var(--c-ink-soft)}
.foot-reviews strong{font-family:var(--font-display);font-size:var(--step-1);color:var(--c-plum-900)}
.foot-reviews .stars{color:var(--c-gold-700)}
.foot-reviews a{color:var(--c-gold-700);text-decoration:none;border-bottom:1px solid var(--c-gold-500)}
.foot-h{font-size:var(--step--1);font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-soft);margin-bottom:var(--sp-3);margin-top:var(--sp-4)}
.foot-h:first-child{margin-top:0}
html[lang="th"] .foot-h{text-transform:none;letter-spacing:.02em}
.foot-addr{font-style:normal;color:var(--c-ink-soft);margin-bottom:var(--sp-3)}
.foot-hours{font-variant-numeric:tabular-nums;color:var(--c-ink-soft)}
.foot-link{display:inline-block;color:var(--c-jade-800);text-decoration:none;border-bottom:1px solid var(--c-jade-300);margin-right:var(--sp-4)}
.foot-link:hover{border-bottom-color:var(--c-jade-800)}
.foot-social{margin-top:var(--sp-3)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);padding-top:var(--sp-4);padding-bottom:var(--sp-6);border-top:1px solid var(--c-line);font-size:var(--step--1);color:var(--c-ink-soft)}
/* Le crédit d'agence. Discret au repos — c'est le site du salon, pas une
   vitrine pour BYB — mais franchement cliquable au survol. Le focus clavier
   est déjà couvert par la règle :focus-visible globale. */
.foot-by-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--c-line);transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.foot-by-link:hover{color:var(--c-mauve-600);border-bottom-color:var(--c-line-firm)}

/* ---------------- 15. images ----------------
   Deux séries qui ne doivent jamais se confondre : les photos du salon
   portent le discours « voici notre salon » et prennent de la place ; les
   illustrations de soins restent en bandeau court sur la carte. Le format
   et la taille suffisent à distinguer les deux rôles, sans filtre ni
   traitement artificiel. */
figure{margin:0}
/* height:auto est indispensable : sans lui, l'attribut height de la balise
   <img> — qu'on émet toujours pour éviter les sauts de page — l'emporte sur
   aspect-ratio, et le recadrage ne se produit jamais. */
.hero-band img,.salon-strip img,.menu-group-media img,
.about-media img,.visit-photo img,.board-figure img,.t-media img{display:block;width:100%;height:auto}

/* --- héros : la photo, et la carte du soin qui la chevauche --- */
/* Bandeau pleine largeur. object-position remonte le cadrage : l'enseigne
   est dans le tiers supérieur de la photo et ne doit pas être rognée. */
.hero-band{position:relative;width:100%;margin-top:clamp(1rem,3vw,2rem)}
.hero-band img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 38%;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
}
/* Pas de recadrage plus large que 16/9 : au-delà, l'enseigne du salon —
   qui est dans le tiers supérieur — sort du cadre, et c'est précisément
   l'élément que le passant doit reconnaître. */
@media (min-width:1100px){
  .hero-band img{aspect-ratio:2/1}
}
/* La carte se pose dans l'angle inférieur gauche du bandeau, alignée sur la
   gouttière du contenu. Sur une image large elle ne masque presque rien. */
.hero-card{
  position:absolute;bottom:clamp(-1.5rem,-2vw,-1rem);
  left:max(var(--sp-gutter),calc((100% - var(--wrap))/2 + var(--sp-gutter)));
  width:min(17.5rem,calc(100% - 2 * var(--sp-gutter)));
  padding:var(--sp-4) var(--sp-5);
}
.hero-card .hero-card-eyebrow{margin-bottom:var(--sp-2)}
.hero-card .hero-card-h{font-size:var(--step-1)}
.hero-card .hero-card-thai{margin-bottom:var(--sp-3)}
.hero-card .hero-card-price{padding-top:var(--sp-3)}
.hero-card .hero-card-mark{width:32px;height:32px;top:var(--sp-4);right:var(--sp-4)}
.hero-card .hero-card-thb{font-size:var(--step-2)}
@media (max-width:760px){
  .hero-band img{aspect-ratio:4/3}
  .hero-card{position:static;width:auto;margin:var(--sp-4) var(--sp-gutter) 0}
}

/* --- bande « le salon » : composition asymétrique, jamais deux images
       de même taille côte à côte --- */
.salon-strip{padding-top:0;background:linear-gradient(180deg,var(--c-paper),var(--c-tint-warm))}
.salon-in{
  display:grid;grid-template-columns:1.55fr 1fr;
  gap:clamp(1rem,2.5vw,2rem);align-items:end;
}
.salon-a img,.salon-b img{
  border-radius:var(--r-3);border:1px solid var(--c-line);box-shadow:var(--sh-2);
}
.salon-a img{aspect-ratio:4/3;object-fit:cover}
.salon-b img{aspect-ratio:3/4;object-fit:cover}
.salon-cap{
  margin-top:var(--sp-3);font-size:var(--step--1);color:var(--c-ink-soft);
  border-left:2px solid var(--c-gold-500);padding-left:var(--sp-3);line-height:1.5;
}
@media (max-width:760px){
  .salon-in{grid-template-columns:1fr}
  .salon-b img{aspect-ratio:4/3}
}

/* --- illustrations de la carte : bandeau court, largeur bridée.
       Petites et uniformes, elles se lisent comme de l'illustration et non
       comme une photo du lieu. --- */
.menu-group-media{
  max-width:560px;margin-bottom:var(--sp-5);
  border-radius:var(--r-2);overflow:hidden;border:1px solid var(--c-line);
}
.menu-group-media img{aspect-ratio:16/6;object-fit:cover}

/* --- le panneau tarifaire photographié : la preuve que les prix affichés
       ici sont ceux du comptoir. En complément du tableau HTML, jamais à
       sa place : une image de texte n'est ni lisible par un lecteur
       d'écran, ni indexable. --- */
.board{background:var(--c-mauve-060);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.board-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.board-figure img{
  width:clamp(180px,26vw,290px);border-radius:var(--r-2);
  border:1px solid var(--c-line-firm);box-shadow:var(--sh-2);
}
.board-text{max-width:46ch}
.board-text .section-h{margin-bottom:var(--sp-3)}
@media (max-width:760px){.board-in{grid-template-columns:1fr}}

/* --- page « Le salon » : une photo par section, en alternance --- */
.about-media img{
  border-radius:var(--r-3);border:1px solid var(--c-line);box-shadow:var(--sh-2);
  aspect-ratio:4/3;object-fit:cover;margin-top:var(--sp-5);
}

/* --- page « Venir » : la devanture de jour et de nuit ---
   La vue de jour domine — c'est l'heure à laquelle la plupart des gens
   cherchent le salon. La vue de nuit vient en second, plus petite et
   décalée vers le bas : elle sert de confirmation, pas d'introduction. */
.visit-photos{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--sp-4);align-items:end;margin-bottom:var(--sp-5)}
.visit-photos img{
  border-radius:var(--r-3);border:1px solid var(--c-line);box-shadow:var(--sh-2);
  width:100%;height:auto;object-fit:cover;display:block;
}
.vp-day img{aspect-ratio:3/4}
.vp-night img{aspect-ratio:1/1}
.vp-cap{
  grid-column:1/-1;margin-top:var(--sp-2);font-size:var(--step--1);color:var(--c-ink-soft);
  border-left:2px solid var(--c-gold-500);padding-left:var(--sp-3);line-height:1.5;
}
@media (max-width:560px){
  .visit-photos{grid-template-columns:1fr}
  .vp-day img,.vp-night img{aspect-ratio:4/3}
}

/* ---------------- 16. pages de soins ----------------
   Chaque soin a sa page, parce que la carte qui les liste tous les vingt-six
   ne peut cibler aucune recherche précise. La composition reprend celle de
   l'accueil — asymétrie, filets dorés, chiffres — pour que le visiteur ne
   sente pas qu'il a changé de site. */
.t-hero{padding-bottom:clamp(2rem,4vw,3rem)}
.t-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.t-hero-in{grid-template-columns:1fr}}
.t-thai{font-size:var(--step-1);color:var(--c-mauve-600);margin:calc(-1 * var(--sp-3)) 0 var(--sp-4)}
.t-media img{
  border-radius:var(--r-3);border:1px solid var(--c-line);box-shadow:var(--sh-3);
  aspect-ratio:4/3;object-fit:cover;
}

/* Les trois faits que le visiteur cherche avant tout : durée, prix, option
   courte. Ils sont en haut, en clair, et pas enterrés dans un paragraphe. */
.t-facts{
  display:flex;flex-wrap:wrap;gap:0;margin:var(--sp-6) 0;
  border:1px solid var(--c-line);border-top:3px solid var(--c-gold-500);
  border-radius:var(--r-2);background:var(--c-surface);box-shadow:var(--sh-1);
}
.t-facts>div{flex:1 1 8rem;padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--c-line)}
.t-facts>div:last-child{border-right:0}
.t-facts dt{
  font-size:var(--step--1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-ink-soft);margin-bottom:var(--sp-1);
}
html[lang="th"] .t-facts dt{text-transform:none;letter-spacing:.02em}
.t-facts dd{margin:0;font-family:var(--font-display);font-size:var(--step-1);font-variant-numeric:tabular-nums}
.t-facts .t-price{color:var(--c-plum-900);font-size:var(--step-2)}

/* « à qui ça convient » : la question que se pose vraiment le visiteur. */
.who-band{background:var(--c-jade-100);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.who-in{display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:center}
@media (max-width:760px){.who-in{grid-template-columns:1fr}.who-mark{display:none}}
.who-list{list-style:none;margin:0;padding:0;max-width:60ch}
.who-list li{position:relative;padding:var(--sp-3) 0 var(--sp-3) var(--sp-6);border-bottom:1px solid rgba(43,26,51,.08)}
.who-list li:last-child{border-bottom:0}
.who-list li::before{
  content:"";position:absolute;left:var(--sp-2);top:1.45em;
  width:14px;height:1px;background:var(--c-jade-600);
}
.who-mark{width:88px;height:88px;color:var(--c-jade-600);opacity:.55}
.who-mark svg{width:100%;height:100%}

/* Le déroulé de l'heure, numéroté. Répond à « comment ça se passe »,
   qui est la deuxième question la plus posée après le prix. */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--c-line)}
.step:last-child{border-bottom:0}
.step-n{
  font-family:var(--font-display);font-size:var(--step-2);color:var(--c-gold-500);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.step-b strong{display:block;font-family:var(--font-display);font-size:var(--step-1);font-weight:600;margin-bottom:var(--sp-1)}
.step-b{color:var(--c-ink-soft)}

/* Maillage : les soins voisins, en bas de chaque page. */
.related-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:760px){.related-grid{grid-template-columns:1fr}}
.rel-card{
  display:flex;flex-direction:column;gap:var(--sp-2);text-decoration:none;
  padding:var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-2);
  background:var(--c-surface);transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.rel-card:hover{border-color:var(--c-mauve-600);transform:translateY(-2px);box-shadow:var(--sh-2)}
.rel-name{font-family:var(--font-display);font-size:var(--step-1)}
.rel-price{font-size:var(--step--1);color:var(--c-jade-800);font-weight:700;font-variant-numeric:tabular-nums}

/* Sur la carte, le nom d'un soin qui a sa page devient un lien. Discret :
   un filet pointillé plutôt qu'un soulignement franc, pour ne pas
   transformer la carte en liste de liens bleus. */
.menu-link{text-decoration:none;border-bottom:1px dotted var(--c-mauve-600);color:inherit}
.menu-link:hover{border-bottom-style:solid;color:var(--c-mauve-600)}
.teaser-name a{text-decoration:none;border-bottom:1px dotted var(--c-mauve-600);color:inherit}
.teaser-name a:hover{color:var(--c-mauve-600)}

/* ---------------- 17. page Avis ----------------
   La note et le nombre d'avis sont la meilleure preuve du salon. Ils sont
   donc traités comme un chiffre, pas comme une phrase : gros, tabulaires,
   et immédiatement suivis du lien vers la source. */
.rv-score{
  margin-top:var(--sp-7);padding:var(--sp-6);
  background:var(--c-surface);border:1px solid var(--c-line);
  border-top:3px solid var(--c-gold-500);border-radius:var(--r-3);box-shadow:var(--sh-2);
  max-width:38rem;
}
.rv-score-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-3)}
.rv-num{
  font-family:var(--font-display);font-size:var(--step-6);line-height:1;
  color:var(--c-plum-900);font-variant-numeric:tabular-nums;
}
.rv-lab{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-soft)}
html[lang="th"] .rv-lab{text-transform:none;letter-spacing:.02em}
.rv-count{margin-top:var(--sp-2);font-size:var(--step-1);color:var(--c-ink-soft)}
.rv-count strong{font-family:var(--font-display);color:var(--c-ink);font-variant-numeric:tabular-nums}
.rv-verified{margin-top:var(--sp-3);font-size:var(--step--1);color:var(--c-ink-soft);max-width:48ch;line-height:1.55}
.rv-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}

/* Les thèmes de Google : le chiffre d'abord, parce que c'est lui qui porte
   l'information — « six avis parlent de se détendre », pas « détente ». */
.rv-themes{list-style:none;margin:0 0 var(--sp-5);padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.rv-theme{
  display:inline-flex;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
}
.rv-theme-n{font-family:var(--font-display);font-size:var(--step-2);color:var(--c-gold-700);font-variant-numeric:tabular-nums}
.rv-theme-l{font-size:var(--step-0)}
.rv-themes-note{max-width:60ch}
.rv-featured-note{max-width:62ch;margin-bottom:var(--sp-6)}

/* Les citations. Fond blanc sur papier chaud, filet mauve à gauche : elles
   se détachent comme des voix rapportées, pas comme du texte du site. */
.rv-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
@media (max-width:820px){.rv-list{grid-template-columns:1fr}}
.rv-card{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-left:3px solid var(--c-mauve-600);border-radius:0 var(--r-3) var(--r-3) 0;
  padding:var(--sp-5) var(--sp-6);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.rv-stars{color:var(--c-gold-500);letter-spacing:.14em;font-size:var(--step--1)}
.rv-quote{
  margin:0;font-family:var(--font-display);font-size:var(--step-1);
  line-height:1.5;color:var(--c-ink);text-wrap:pretty;
}
.rv-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:baseline;margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--c-line)}
.rv-who{font-weight:700;font-size:var(--step--1)}
.rv-when{font-size:var(--step--1);color:var(--c-ink-soft);font-variant-numeric:tabular-nums}
.rv-more{font-size:var(--step--1)}
.rv-inline-cta{margin-top:var(--sp-5)}
.panel .rv-inline-cta .btn-jade{background:var(--c-jade-300);color:var(--c-plum-900)}
.panel .rv-inline-cta .btn-jade:hover{background:#fff}

/* ---------------- 18. bande équipe ----------------
   Panoramique pleine largeur, sur fond prune : les visages ressortent sur
   un fond sombre, et la bande fait respirer la page entre le panneau des
   avis et les horaires. Le format 2,17:1 des photos est déjà celui d'une
   bande — aucun recadrage agressif n'est nécessaire. */
.team-band{background:var(--c-plum-900);color:var(--c-paper);padding:var(--sp-section) 0 0;position:relative}
.team-head{padding-bottom:var(--sp-5)}
.team-head .section-h{color:var(--c-paper);margin-bottom:0}
.team-figure{margin:0}
.team-band img{display:block;width:100%;height:auto;aspect-ratio:2.16/1;object-fit:cover}
.team-cap{
  display:block;padding-top:var(--sp-5);padding-bottom:var(--sp-section);
  font-size:var(--step--1);color:var(--c-mauve-350);max-width:60ch;line-height:1.6;
  border-left:2px solid var(--c-gold-500);
}
/* La légende hérite de .wrap : on remet la gouttière à gauche pour que le
   filet doré s'aligne sur le texte plutôt que sur le bord de l'écran. */
.team-cap{padding-left:calc(var(--sp-gutter) + var(--sp-3))}
@media (max-width:640px){
  .team-band img{aspect-ratio:3/2}
}

/* ---------------- 14. accessibilité et impression ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .site-head,.meridian,.cta-band,.btn{display:none}
  body{background:#fff;color:#000}
  .panel{background:#fff!important;color:#000!important}
  .panel .section-h,.panel .prose,.values li{color:#000!important}
  .menu-group{break-inside:avoid}
}