/* ============================================================
   TOKENS ET RÉINITIALISATION — socle commun Chapitre Six
   Les valeurs de charte propres à un hôtel sont injectées par la
   construction à partir de sites/<hotel>/site.json. Ne rien coder en dur ici.
   ============================================================ */

/* Les déclarations @font-face et le bloc :root de l'hôtel sont insérés ici
   par la construction. Aucune couleur ni police ne doit être écrite en dur
   dans ce fichier ni dans les suivants. */
@font-face{font-family:'Benton Sans';src:url('../fonts/benton-sans-regular.woff2') format('woff2'),url('../fonts/benton-sans-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Benton Sans';src:url('../fonts/benton-sans-medium.woff2') format('woff2'),url('../fonts/benton-sans-medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
:root{
  --font-display:'Benton Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:'Benton Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ink:#000000;
  --ink-soft:#000000;
  --ivory:#F6F4E5;
  --cream:#F6F4E5;
  --taupe:#D0D1AB;
  --line:rgba(0,0,0,.18);
  --line-light:rgba(246,244,229,.45);
  --bkg-bg:#D0D1AB;
  --bkg-ink:#1A1A1A;
  --bkg-line:rgba(0,0,0,.14);
  --bkg-fill:rgba(0,0,0,.04);
  --bkg-mute:rgba(26,26,26,.34);
  --bkg-soft:rgba(26,26,26,.58);
  --bkg-last:#8F2A21;
  --bkg-best:#705F28;
  --bkg-chosen:#4A3A34;
  --bkg-chosen-ink:#FFFFFF;
  --bkg-cta:#4A3A34;
  --bkg-cta-ink:#FFFFFF;
  --bkg-field:#FFFFFF;
  --bkg-field-ink:#1A1A1A;
  --bkg-pill:rgba(0,0,0,.06);
  --gut:clamp(16px,1.8vw,34px);
  --maxw:1920px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--font-body);
  font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ============================================================
   TYPOGRAPHIE ET COMPOSANTS — Hotel Hana
   Relevee au pixel sur hotelhana-paris.com (fenetre de 1920).
   Tout le texte est noir, en capitales sauf le texte courant, et
   fortement interlettre : le site d'origine pose 1,5 px sur 10 px,
   1,8 px sur 12 px, 2,4 px sur 12 px et 2,8 px sur 14 px — soit
   0,15 em pour les liens et le texte, 0,2 em pour les capitales du
   pied de page et les titres. C'est la signature de la marque, elle
   est donc exprimee en em pour tenir a toutes les tailles.
   Valeurs relevees : titre de section 12, texte courant 12/23,
   lien « Decouvrir » 10, pied de page 12 (adresse 14), langues 12.
   ============================================================ */

h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0}

/* Titre de section. Le site d'origine le pose dans la coupe Bold ;
   faute de fichier, c'est la Medium qui le porte — un poids a changer
   dans site.json le jour ou la Bold arrive. */
.h-sec{font-size:clamp(11px,.63vw,12px);line-height:1.1;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500}

/* Texte courant : 12 px sur 23 px, colonne de 411 px. */
.lede{font-size:clamp(11px,.63vw,12px);line-height:1.92;letter-spacing:.15em;
  font-weight:400;max-width:411px}
.lede p{margin:0 0 1.2em}
.lede p:last-child{margin-bottom:0}

/* Lien « DECOUVRIR » : 10 px, Medium, souligne d'un filet plein largeur
   de colonne sur le site d'origine. */
.link-u{display:block;font-family:var(--font-display);font-weight:500;
  font-size:clamp(9px,.52vw,10px);letter-spacing:.15em;text-transform:uppercase;
  padding:16px 0;border-top:1px solid var(--line);
  transition:opacity .35s var(--ease)}
.link-u::after{content:" \2022";}
.link-u:hover{opacity:.55}

/* Ligne de capitales espacees : langues, adresse, liens du pied. */
.caps{font-family:var(--font-display);font-weight:500;
  font-size:clamp(11px,.63vw,12px);letter-spacing:.2em;text-transform:uppercase}
.caps--lg{font-size:clamp(12px,.73vw,14px)}
.caps--sm{font-size:clamp(9px,.52vw,10px);letter-spacing:.15em}

/* Bouton Reserver : du texte, pas un aplat — comme sur le site d'origine. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:10px 0;background:transparent;color:inherit;border:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(10px,.57vw,11px);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.2;transition:opacity .4s var(--ease)}
.btn:hover{opacity:.55}

/* ============================================================
   STRUCTURE — Hotel Hana
   Le site d'origine est un diaporama : sept sections qui occupent
   chacune toute la fenetre et s'accrochent au defilement. On le
   reproduit avec scroll-snap, qui ne demande aucun script : la page
   reste une page, navigable au clavier et consultable sans JS.
   ============================================================ */

html{scroll-snap-type:y mandatory}
.vue{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;display:grid}

/* ---------- barre fixe ----------
   Le site d'origine pose les langues en haut a gauche et le menu en
   haut a droite, en creme sur la photographie. Comme toutes les
   sections sont habillees d'une image, le creme tient d'un bout a
   l'autre ; un voile degrade assure la lecture sur les cliches clairs. */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:20px var(--gut);color:var(--ivory);pointer-events:none}
.bar::before{content:"";position:absolute;inset:0;height:120px;
  background:linear-gradient(to bottom,rgba(0,0,0,.34),transparent);
  pointer-events:none;z-index:-1}
.bar a,.bar button{pointer-events:auto}

.lang{display:flex;gap:6px;align-items:center;margin:0}
.lang .on{opacity:1}
.lang a{opacity:.55;transition:opacity .3s}
.lang a:hover{opacity:1}

.bar__right{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px)}

/* Bouton de navigation : deux filets, comme sur le site d'origine. */
.bnav__btn{display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:30px;height:30px;color:inherit}
.bnav__btn span{display:block;height:1px;background:currentColor;
  transition:transform .35s var(--ease)}
.bnav__btn span:first-child{width:30px}
.bnav__btn span:last-child{width:22px;align-self:flex-end}
.bmenu--nav.is-open .bnav__btn span:first-child{transform:translateY(3.5px)}
.bmenu--nav.is-open .bnav__btn span:last-child{transform:translateY(-3.5px);width:30px}
.bmenu--nav .bmenu__list{left:auto;right:0;width:max-content;min-width:230px}
.bmenu--nav .bmenu__item{padding:11px 18px}

/* ---------- section d'accueil ----------
   Image plein cadre, mot-image centre, adresse et courriel en bas. */
.home{grid-template-rows:1fr auto}
.home__img{position:absolute;inset:0}
.home__img img{width:100%;height:100%;object-fit:cover}
.home__mark{position:relative;align-self:center;justify-self:center;
  width:min(826px,62vw);padding:0 var(--gut)}
.home__mark img{width:100%;height:auto;
  filter:brightness(0) invert(1)}
.home__pied{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding-bottom:clamp(24px,3vw,40px);color:var(--ivory);text-align:center}
.home__pied a{transition:opacity .3s}
.home__pied a:hover{opacity:.6}

/* ---------- sections de contenu ----------
   Une colonne de texte de 480 px sur 1920, soit un quart de la planche,
   et une ou deux photographies qui occupent le reste. La position de la
   colonne change de section en section, exactement comme a l'origine. */
.vue--texte-g{grid-template-columns:25% 75%}
.vue--img-g{grid-template-columns:50% 25% 25%}
.vue--img-gg{grid-template-columns:25% 25% 50%}
.vue--texte-d{grid-template-columns:75% 25%}

.vue__media{position:relative;overflow:hidden}
.vue__media img{width:100%;height:100%;object-fit:cover}

/* Dans la colonne, le titre est pose a la verticale pres du haut, le
   texte en bas, le lien sous un filet. Les retraits sont ceux du site
   d'origine : 233 px pour le titre, 34 px pour le texte. */
.vue__col{position:relative;display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(20px,1.8vw,34px);background:var(--ivory);color:var(--ink)}
.vue__titre{writing-mode:vertical-rl;justify-self:end;
  margin:11px calc(1.3vw) 0 0;white-space:nowrap}
.vue__texte{align-self:end;padding-bottom:clamp(16px,1.6vw,30px)}
.vue__cta{align-self:end}

/* ============================================================
   PIED DE PAGE ET ADAPTATIONS ECRAN — Hotel Hana
   ============================================================ */

/* ------------------------------------------------------------
   Pied de page — creme de la charte, trois colonnes de capitales.
   ------------------------------------------------------------ */
.footer{min-height:100svh;scroll-snap-align:start;
  display:grid;grid-template-rows:auto 1fr auto;
  background:var(--ivory);color:var(--ink);padding:clamp(24px,3vw,48px) var(--gut)}
.footer__haut{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer__centre{align-self:center;justify-self:center;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.6vw,24px)}
.footer__mark{width:min(173px,34vw)}
.footer__mark img{width:100%;height:auto}
.footer__grille{display:grid;grid-template-columns:repeat(3,auto);
  justify-content:center;column-gap:clamp(24px,4vw,88px);row-gap:clamp(10px,1.2vw,18px)}
.footer__grille a{opacity:.85;transition:opacity .3s}
.footer__grille a:hover{opacity:1}
.footer__bas{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.footer p{margin:0}

/* Le mot-image du panneau de reservation est fourni en clair : pose sur
   l'aplat vert sauge du panneau il disparait, on le pousse au noir,
   comme le fait le module du site groupe. */
.bkg__mark img{filter:brightness(0)}

/* ------------------------------------------------------------
   Barre fixe du telephone
   ------------------------------------------------------------ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--ink);color:var(--ivory);padding:12px 16px;gap:10px}
.mbar > a,.mbar .bmenu__btn{flex:1;text-align:center;padding:12px 8px;
  font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;border:1px solid var(--line-light);min-height:0}
.mbar .pri{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}

/* ------------------------------------------------------------
   Apparition au defilement
   ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ------------------------------------------------------------
   ADAPTATIONS ECRAN
   Sous 1100 px la colonne de 480 px ne tient plus a cote des images :
   la section se coupe en deux bandes, image au-dessus, texte dessous,
   et l'accrochage est libere pour que le texte ne soit pas tronque.
   ------------------------------------------------------------ */
@media (max-width:1100px){
  html{scroll-snap-type:none}
  .vue{min-height:0}
  .vue--texte-g,.vue--img-g,.vue--img-gg,.vue--texte-d{grid-template-columns:1fr}
  .vue__media{height:min(62svh,520px)}
  .vue__media--2{display:none}
  .vue__col{order:2;padding:clamp(24px,5vw,40px) clamp(20px,5vw,34px)}
  .vue__titre{writing-mode:horizontal-tb;justify-self:start;margin:0 0 18px}
  .vue__texte{padding-bottom:22px}
  .footer{min-height:0;padding-bottom:96px}
  .footer__grille{grid-template-columns:repeat(2,1fr);justify-content:stretch;text-align:left}
  .footer__haut,.footer__bas{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:760px){
  .bar{padding:14px 16px}
  .bar .bmenu:not(.bmenu--nav){display:none}
  .home__mark{width:72vw}
  .mbar{display:flex}
  .footer__grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none;scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   PANNEAU DE RESERVATION — calendrier dynamique D-EDGE
   La couleur de fond du panneau est un token de charte
   (--bkg-bg / --bkg-ink), pilote par sites/<hotel>/site.json.
   ============================================================ */

.bkg{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end}
.bkg[hidden]{display:none}
.bkg__veil{position:absolute;inset:0;background:rgba(10,10,9,.55);opacity:0;
  transition:opacity .45s var(--ease);backdrop-filter:blur(2px)}
.bkg.is-open .bkg__veil{opacity:1}

.bkg__panel{position:relative;display:flex;flex-direction:column;width:min(1180px,82vw);
  max-width:100%;height:100%;background:var(--bkg-bg);color:var(--bkg-ink);
  transform:translateX(3%);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease);
  box-shadow:-30px 0 80px rgba(0,0,0,.28)}
.bkg.is-open .bkg__panel{transform:none;opacity:1}

.bkg__bar{flex:0 0 auto;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  gap:12px;padding:18px clamp(16px,2.6vw,34px);
  border-bottom:1px solid var(--bkg-line, color-mix(in srgb, var(--bkg-ink) 16%, transparent))}
.bkg__mark{justify-self:center;display:flex;align-items:center;justify-content:center;min-height:34px}
.bkg__mark img{height:clamp(24px,2.6vw,34px);width:auto}
.bkg__mark--invert img{filter:brightness(0) invert(1)}

.bkg__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;color:inherit;opacity:.8;transition:opacity .3s,background .3s}
.bkg__icon:hover{opacity:1;background:var(--bkg-fill, color-mix(in srgb, var(--bkg-ink) 8%, transparent))}
.bkg__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}

.bkg__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,3vw,44px) clamp(16px,3vw,44px) clamp(40px,5vw,64px)}
.bkg__state{margin:0;padding:64px 0;text-align:center;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.65}
.bkg__state[hidden]{display:none}
.bkg__state--error{opacity:1;line-height:2}
.bkg__state--error a{border-bottom:1px solid currentColor;padding-bottom:3px}

/* Reservation de table : meme integration que sur le site groupe. Le SDK
   Zenchef n'a pas de mode integre — il pose toujours son bouton flottant et
   son cadre en bas de l'ecran — donc on charge le moteur en cadre, avec le
   parametre « fullscreen » releve sur chapitresixhotels.com : c'est lui qui
   donne au widget un fond transparent et une mise en page pleine largeur.
   Sans lui, Zenchef affiche sa carte blanche de widget, qui jure avec le
   panneau. Gabarit repris du site groupe : 700 px de large, 630 px de haut. */
.bkg__frame{display:flex;justify-content:center;width:100%}
.bkg__iframe{display:block;width:100%;max-width:700px;height:630px;border:0;
  background:transparent}

.bkg #fb-widget-1{width:100%;max-width:1080px;margin:0 auto;color:var(--bkg-ink)}
.bkg #fb-widget-1:empty{min-height:1px}

/* ------------------------------------------------------------
   HABILLAGE DU CALENDRIER D-EDGE
   Le widget arrive en theme clair : il pose un grand aplat blanc
   au milieu du panneau. On le rend transparent pour qu'il repose
   sur le fond du panneau, puis on recolore son texte et ses filets.
   Tout passe par des tokens : --bkg-ink donne le texte, et les
   nuances en derivent par color-mix. Un hotel qui veut s'ecarter de
   cette derivation pose la valeur dans brand.colors de son site.json
   (--bkg-line, --bkg-fill, --bkg-mute, --bkg-soft, --bkg-last,
   --bkg-best, --bkg-chosen, --bkg-chosen-ink, --bkg-cta,
   --bkg-cta-ink, --bkg-field, --bkg-field-ink, --bkg-pill).
   Ces regles visent des classes internes au widget (fbw-*) :
   si D-EDGE fait evoluer sa structure, c'est ici qu'il faudra
   repasser. Seules portent !important les regles qui doivent se
   battre contre un style en ligne du widget.
   ------------------------------------------------------------ */

/* 1. les conteneurs perdent leur fond clair */
.bkg #fb-widget-1 > div,
.bkg #fb-widget-1 .widgets--wrapper,
.bkg #fb-widget-1 .fbw-calendar--container,
.bkg #fb-widget-1 .fbw-calendar--main,
.bkg #fb-widget-1 .fbw-calendar--config,
.bkg #fb-widget-1 .fbw-calendar--dates,
.bkg #fb-widget-1 .fbw-calendar--month-bloc,
.bkg #fb-widget-1 .fbw-calendar--month-table-container,
.bkg #fb-widget-1 .fbw-calendar--month,
.bkg #fb-widget-1 .fbw-calendar--weekdays,
.bkg #fb-widget-1 .fbw-calendar--week,
.bkg #fb-widget-1 .fbw-calendar--bottom,
.bkg #fb-widget-1 .fwb-cal-bottom--group,
.bkg #fb-widget-1 .fbw-calendar--legend,
.bkg #fb-widget-1 .fbw-calendar--action{background-color:transparent}

/* 2. le texte prend l'encre du panneau. Le nom du mois, les etiquettes
      Arrivee / Depart et les fleches de mois recoivent du widget un
      style en ligne portant « mainColor » : eux seuls passent en
      !important, sans quoi l'accent de l'hotel se retrouve pose sur un
      panneau de la meme famille de teinte, illisible. */
.bkg #fb-widget-1 .value,
.bkg #fb-widget-1 .fbw-calendar--weekdays,
.bkg #fb-widget-1 .fbw-calendar--weekdays *,
.bkg #fb-widget-1 .day--number{color:var(--bkg-ink)}
.bkg #fb-widget-1 .fbw-calendar--label,
.bkg #fb-widget-1 .fbw-calendar--month-name,
.bkg #fb-widget-1 .fbw-calendar--button{color:var(--bkg-ink) !important}

/* 3. les cases du calendrier */
.bkg #fb-widget-1 .fbw-calendar--day{color:var(--bkg-ink);
  border-color:var(--bkg-line, color-mix(in srgb, var(--bkg-ink) 16%, transparent))}
.bkg #fb-widget-1 .fbw-calendar--day.available_day{
  background-color:var(--bkg-fill, color-mix(in srgb, var(--bkg-ink) 8%, transparent))}
.bkg #fb-widget-1 .fbw-calendar--day.unavailable_day,
.bkg #fb-widget-1 .fbw-calendar--day.unavailable_day .day--number{
  background-color:transparent;
  color:var(--bkg-mute, color-mix(in srgb, var(--bkg-ink) 28%, transparent))}
.bkg #fb-widget-1 .day--price,
.bkg #fb-widget-1 .day--in,
.bkg #fb-widget-1 .day--out,
.bkg #fb-widget-1 .day--min-stay,
.bkg #fb-widget-1 .legend-txt{
  color:var(--bkg-soft, color-mix(in srgb, var(--bkg-ink) 62%, transparent))}
.bkg #fb-widget-1 .fbw-calendar--weekdays{
  border-color:var(--bkg-line, color-mix(in srgb, var(--bkg-ink) 16%, transparent))}

/* 4. legende et pastilles « derniere chambre », en lieu et place du
      rouge par defaut du widget. Sans token d'hotel, elles prennent
      l'encre du panneau. */
.bkg #fb-widget-1 .legend-color--last,
.bkg #fb-widget-1 .fbw-calendar--day.last-room::before{
  background-color:var(--bkg-last, var(--bkg-ink))}
.bkg #fb-widget-1 .legend-color--best{border-top-color:var(--bkg-best, var(--bkg-ink))}

/* 5. champs de saisie : fond clair, texte sombre par defaut */
.bkg #fb-widget-1 select,
.bkg #fb-widget-1 input{background-color:var(--bkg-field, #fff);
  color:var(--bkg-field-ink, #1a1a1a);
  border-color:var(--bkg-line, color-mix(in srgb, var(--bkg-ink) 16%, transparent));
  font-family:var(--font-body)}
.bkg #fb-widget-1 option{color:var(--bkg-field-ink, #1a1a1a)}

/* 6. bandeau de meilleur tarif
      (`.best-price` sert aussi de classe aux cases du calendrier :
       on vise uniquement l'enfant direct de la barre d'action) */
.bkg #fb-widget-1 .fbw-calendar--action > .best-price{
  background-color:var(--bkg-pill, #f1f1f1)}
.bkg #fb-widget-1 .fbw-calendar--action > .best-price *{color:#333}
.bkg #fb-widget-1 .fbw-calendar--action > .best-price .best--label{color:#666}

/* 7. La date choisie et le bouton Reserver, eux aussi poses en style
      en ligne par le widget — meme traitement qu'au point 2. */
.bkg #fb-widget-1 .fbw-calendar--day.chosen_day{
  background-color:var(--bkg-chosen, var(--bkg-ink)) !important;
  color:var(--bkg-chosen-ink, var(--bkg-bg)) !important}
.bkg #fb-widget-1 .fbw-calendar--day.chosen_day *{
  color:var(--bkg-chosen-ink, var(--bkg-bg)) !important}
.bkg #fb-widget-1 .next{background-color:var(--bkg-cta, var(--bkg-ink)) !important}
.bkg #fb-widget-1 .next,
.bkg #fb-widget-1 .next *{color:var(--bkg-cta-ink, var(--bkg-bg)) !important}

/* 8. barre basse du calendrier, en dessous de 649 px
   A cette largeur, D-EDGE passe le bloc tarif et le bouton en pleine largeur
   et ajoute 10 px sous le tarif — une mise en page manifestement prevue en
   deux lignes. Mais sa barre d'action reste en flex sans retour a la ligne :
   les deux blocs se serrent cote a cote et le bouton depasse le tarif de ces
   10 px. C'est le decalage visible sur telephone. On autorise le retour a la
   ligne, et le tarif reprend sa place au-dessus du bouton. */
@media (max-width:649px){
  .bkg #fb-widget-1 .fbw-calendar--bottom{height:auto;min-height:50px}
  .bkg #fb-widget-1 .fbw-calendar--action{flex-wrap:wrap}
  .bkg #fb-widget-1 .fbw-calendar--action .next{min-height:46px}
}

body.bkg-open{overflow:hidden}

@media (max-width:1024px){
  .bkg__panel{width:100%}
}
@media (max-width:760px){
  .bkg__bar{grid-template-columns:40px 1fr 40px;padding:12px 14px}
  .bkg__icon{width:40px;height:40px}
  .bkg__body{padding:14px 10px 48px}
  .bkg__state{padding:40px 0}
  /* Sur telephone, le cadre prend la hauteur disponible plutot que de
     forcer un second defilement dans le panneau. */
  .bkg__iframe{height:calc(100dvh - 190px);min-height:460px}
}
@media (prefers-reduced-motion:reduce){
  .bkg__veil,.bkg__panel{transition:none}
}

/* ============================================================
   MENU DE RESERVATION — le bouton « Reserver » deplie trois choix
   Une chambre (panneau D-EDGE), une table (Zenchef), un soin (EIA).
   Present deux fois dans la page : dans l'en-tete et dans la barre
   mobile. La variante --up ouvre le panneau vers le haut.
   ============================================================ */

/* Le conteneur se cale sur la largeur du bouton : le panneau, en
   `left:0;right:0`, herite donc exactement de cette largeur. */
.bmenu{position:relative;display:inline-block}
.bmenu__btn{position:relative;z-index:2}

/* Dans l'en-tete, le bouton est elargi et une largeur plancher garde
   les trois langues au meme gabarit. */
.header .bmenu__btn{min-width:155px}

.bmenu__list{position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:80;
  background:var(--ivory);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 22px 50px rgba(26,26,24,.16);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.bmenu__list[hidden]{display:none}
/* Pont invisible au-dessus du panneau : la souris traverse l'espace qui la
   separe du bouton sans quitter le menu, donc sans le refermer. */
.bmenu__list::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.bmenu--up .bmenu__list::before{top:auto;bottom:-14px}
.bmenu.is-open .bmenu__list{opacity:1;transform:none;pointer-events:auto}

.bmenu__item{display:block;padding:14px 16px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.bmenu__item:last-child{border-bottom:0}
.bmenu__item:hover{background:var(--cream)}

.bmenu__t{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.bmenu__s{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--ink-soft);
  letter-spacing:.01em;text-transform:none}

/* Variante ouvrant vers le haut, pour la barre fixe du bas. */
.bmenu--up .bmenu__list{top:auto;bottom:calc(100% + 12px);left:0;right:0;
  transform:translateY(8px)}
.bmenu--up.is-open .bmenu__list{transform:none}
.bmenu--up .bmenu__item{padding:14px 18px;text-align:left}

/* Dans la barre mobile, le declencheur occupe sa colonne mais le panneau
   se cale sur toute la largeur de la barre : `position:static` sur le
   conteneur fait porter le calage par `.mbar`, qui est deja positionnee. */
.mbar .bmenu{flex:1;position:static}
.mbar .bmenu__btn{display:block;width:100%}
.mbar .bmenu__list{left:16px;right:16px;width:auto;bottom:calc(100% + 12px);top:auto}

@media (prefers-reduced-motion:reduce){
  .bmenu__list{transition:none}
}