/* ============================================================
   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:'Eurostile Extended';src:url('../fonts/eurostile-extended-medium.woff2') format('woff2'),url('../fonts/eurostile-extended-medium.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Eurostile Extended';src:url('../fonts/eurostile-extended-medium.woff2') format('woff2'),url('../fonts/eurostile-extended-medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
:root{
  --font-display:'Eurostile Extended', Eurostile, Michroma, 'Trebuchet MS', Arial, sans-serif;
  --font-body:'Eurostile Extended', Eurostile, Michroma, 'Trebuchet MS', Arial, sans-serif;
  --ink:#D99B81;
  --ink-soft:#D99B81;
  --ivory:#FFFFFF;
  --cream:#FFFFFF;
  --taupe:#E7CEBF;
  --line:rgba(217,155,129,.32);
  --line-light:rgba(255,249,229,.45);
  --bkg-bg:#E39F88;
  --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(20px,7.5vw,143px);
  --maxw:1620px;
  --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 — Cap d'Antibes Beach Hotel
   Relevee au pixel sur capdantibes-beachhotel.com (fenetre de 1920).
   Une seule couleur pour tout le texte, le terracotta de la charte,
   posee sur du blanc : pas de noir, pas de gris. Un seul caractere, un
   lineale tres large (Eurostile Extended) — et aucun interlettrage
   ajoute : la chasse de la fonte suffit, le site d'origine laisse
   letter-spacing a normal partout.
   Valeurs relevees : titre de section 24/24, texte courant 17/24,
   lien « Decouvrir » 26/50, pied de page 12, langues 14, bouton de
   l'en-tete 14. Elles sont reprises ici en clamp() pour tenir jusqu'au
   telephone, la borne haute etant la valeur du site d'origine.
   ============================================================ */

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

/* Titres de section : 24 px et interligne 24 px sur le site d'origine,
   en capitales. L'interligne est relache a 1.15 ici : a 24/24 un titre
   qui passe sur deux lignes au telephone se chevauche. */
.h-xl{font-size:clamp(19px,1.5vw,26px);line-height:1.15;text-transform:uppercase}
.h-lg{font-size:clamp(17px,1.25vw,24px);line-height:1.15;text-transform:uppercase}
.h-md{font-size:clamp(15px,1.05vw,20px);line-height:1.2;text-transform:uppercase}

/* Ligne d'accroche sous le titre d'ouverture : meme corps que le texte
   courant, mais detachee. */
.accroche{margin:14px 0 0;font-size:clamp(14px,1.05vw,17px);line-height:1.42}

/* Horaires des restaurants : en capitales, au corps du texte. */
.horaire{margin:12px 0 0;font-size:clamp(13px,1.05vw,17px);line-height:1.42;
  text-transform:uppercase}

.eyebrow{font-family:var(--font-display);font-size:clamp(12px,.85vw,14px);
  text-transform:uppercase}

/* Texte courant : 17 px sur 24 px d'interligne, colonne de 660 px. */
.lede{margin-top:14px;font-size:clamp(14px,1.05vw,17px);line-height:1.42;
  max-width:660px}
.lede p{margin:0 0 1.1em}
.lede p:last-child{margin-bottom:0}

/* Lien « DECOUVRIR ». Le site d'origine le pose en 26 px, plus gros que
   ses titres de section, et le suit d'une puce ; la puce est posee en CSS
   pour que les fichiers de langue ne portent que le mot. */
.link-u{display:inline-block;font-family:var(--font-display);
  font-size:clamp(15px,1.35vw,26px);line-height:1.3;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid currentColor;
  transition:opacity .35s var(--ease)}
.link-u::after{content:" \203A";}
.link-u:hover{opacity:.6}

.actions{display:flex;gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;margin-top:26px}
.actions .link-u{margin-top:0}
.duo__body > .link-u{margin-top:26px}

/* Bouton Reserver : sur le site d'origine ce n'est pas un aplat mais du
   texte terracotta pose sur le blanc de l'en-tete, sans filet ni fond,
   en 14 px. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:10px 14px;background:transparent;color:var(--ink);
  border:0;font-family:var(--font-display);
  font-size:clamp(12px,.85vw,14px);text-transform:uppercase;
  line-height:1.2;text-align:center;
  transition:opacity .4s var(--ease)}
.btn:hover{opacity:.6}

/* Variante posee sur une photographie. */
.btn--ghost{background:rgba(0,0,0,.3);border:1px solid var(--ivory);color:var(--ivory)}
.btn--ghost:hover{background:rgba(0,0,0,.55);color:var(--ivory);opacity:1}

/* ============================================================
   STRUCTURE — en-tete et hero, Cap d'Antibes Beach Hotel
   Le site d'origine pose une en-tete fixe, toujours sur fond blanc :
   le selecteur de langue a gauche, le mot-image centre, le bouton
   Reserver et le bouton de navigation a droite. Le hero est fait de
   deux colonnes de photographies qui alternent.
   ============================================================ */

/* Le contenu court de la gouttiere gauche a la gouttiere droite : 143 px
   de chaque cote sur une planche de 1906, soit une bande de 1620. */
.wrap{max-width:calc(var(--maxw) + 2 * var(--gut));margin:0 auto;
  padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-block:clamp(56px,7.5vw,130px)}
.sec--intro{padding-block:clamp(44px,5vw,86px) clamp(40px,4.5vw,76px)}

/* ---------- en-tete fixe ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;height:85px;padding:0 clamp(16px,2.6vw,42px);
  background:var(--ivory);color:var(--ink)}

/* L'en-tete etant fixe, les ancres s'arretent sous elle. */
html{scroll-padding-top:100px}
body{padding-top:85px}

.lang{display:flex;flex-direction:column;gap:2px;align-items:flex-start;margin:0;
  font-family:var(--font-display);font-size:14px;line-height:1.15;text-transform:uppercase}
.lang .on{opacity:1}
.lang a{opacity:.5;transition:opacity .3s}
.lang a:hover{opacity:1}
/* Le site d'origine empile les langues ; le separateur n'a plus lieu d'etre. */
.lang span[aria-hidden]{display:none}

.wordmark{justify-self:center;display:block;line-height:0}
.wordmark img{width:clamp(220px,34vw,653px);height:auto}

.header__right{justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}

/* 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}
.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}

/* Le panneau de navigation est plus etroit que celui de la reservation et
   se cale sur le bord droit de l'en-tete. */
.bmenu--nav .bmenu__list{left:auto;right:0;width:max-content;min-width:230px}
.bmenu--nav .bmenu__item{padding:11px 18px}

/* ---------- hero ----------
   Deux colonnes egales, chacune alternant deux photographies en fondu.
   La hauteur relevee est de 865 px ; elle est bornee par la fenetre pour
   qu'un ecran bas ne soit pas entierement mange par l'image. */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:0;
  height:min(865px, calc(100svh - 85px));min-height:420px}
.hero__col{position:relative;overflow:hidden}
.hero__col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Fondu croise : la seconde image apparait, reste, puis s'efface. */
.hero__alt{opacity:0;animation:heroFondu 14s var(--ease) infinite}
.hero__col:last-child .hero__alt{animation-delay:7s}
@keyframes heroFondu{
  0%,8%{opacity:0}
  20%,45%{opacity:1}
  57%,100%{opacity:0}
}

/* ---------- bloc d'ouverture ---------- */
.intro{max-width:1100px}
.intro .lede{margin-top:18px}

/* ---------- bande d'images defilante ----------
   Les visuels sont repetes une fois : la piste se decale de la moitie de sa
   largeur, puis revient a zero sans que l'oeil voie la couture. */
.bande{overflow:hidden}
.bande__piste{display:flex;width:max-content;animation:defile 48s linear infinite}
.bande__piste img{display:block;height:clamp(200px,33vw,633px);width:auto;max-width:none}
.bande:hover .bande__piste{animation-play-state:paused}
@keyframes defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================================
   SECTIONS, PIED DE PAGE ET ADAPTATIONS ECRAN — Cap d'Antibes
   Le site d'origine alterne un bloc de texte cale sur une gouttiere et
   une photographie calee sur l'autre. Trois gabarits d'image reviennent :
   567 x 790 (le cas courant), 480 x 669 pour le Baba, 810 x 625 pour la
   plage. Ils sont rendus ici en rapports, pour suivre l'ecran.
   ============================================================ */

/* ------------------------------------------------------------
   Bloc texte / image, alterne
   ------------------------------------------------------------ */
.duo{display:grid;grid-template-columns:minmax(0,660px) minmax(0,567px);
  justify-content:space-between;align-items:center;gap:clamp(30px,5vw,90px)}
.duo--rev{grid-template-columns:minmax(0,567px) minmax(0,660px)}
.duo--rev .duo__media{order:-1}

/* Le Baba a une image plus courte, la plage une image plus large. */
.duo--court{grid-template-columns:minmax(0,660px) minmax(0,480px)}
.duo--large.duo--rev{grid-template-columns:minmax(0,810px) minmax(0,560px)}

.duo__body{text-align:left}
.duo__body .lede{text-align:left}

.duo__media{overflow:hidden}
.duo__media img{width:100%;height:auto;aspect-ratio:567 / 790;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.duo--court .duo__media img{aspect-ratio:480 / 669}
.duo--large .duo__media img{aspect-ratio:810 / 625}
.duo__media:hover img{transform:scale(1.03)}

/* Marque du restaurant, posee au-dessus de son titre. */
.marque{margin:0 0 16px}
.marque img{height:clamp(12px,1vw,14px);width:auto}

/* ------------------------------------------------------------
   Pied de page — trois colonnes de liens en capitales, releves a 12 px
   sur le site d'origine, sans interlettrage ajoute. Un filet le separe
   du dernier bloc.
   ------------------------------------------------------------ */
.footer{border-top:1px solid var(--line);padding-block:clamp(34px,4vw,56px) clamp(28px,3vw,44px)}
.footer__grille{display:grid;grid-template-columns:1fr auto 1fr;
  row-gap:clamp(12px,1.4vw,20px);column-gap:clamp(20px,4vw,70px);align-items:center;
  font-family:var(--font-display);font-size:clamp(11px,.7vw,12px);
  line-height:1.5;text-transform:uppercase}
.footer__grille p{margin:0}
.footer__l{text-align:left}
.footer__c{text-align:center}
.footer__r{text-align:right}
.footer__grille a{opacity:.85;transition:opacity .3s}
.footer__grille a:hover{opacity:1}
.footer__rc{display:inline-flex;align-items:center;gap:8px}
.footer__rc img{height:17px;width:auto}
.footer__c6 img{height:16px;width:auto}

/* ------------------------------------------------------------
   Mot-image dans le panneau de reservation
   Le fichier fourni est terracotta : pose sur l'aplat terracotta du
   panneau, il disparait. On le pousse au noir, comme le fait le module
   du site groupe, plutot que de demander une seconde version du logo.
   ------------------------------------------------------------ */
.bkg__mark img{filter:brightness(0)}

/* ------------------------------------------------------------
   Barre fixe du telephone — hors site d'origine, elle porte l'appel et
   la reservation la ou l'en-tete n'a plus la place.
   ------------------------------------------------------------ */
.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-size:12px;
  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(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ------------------------------------------------------------
   ADAPTATIONS ECRAN
   Le site d'origine est concu pour le bureau : ce qui suit est une
   proposition, a valider.
   ------------------------------------------------------------ */
@media (max-width:1100px){
  /* Les blocs passent l'un sous l'autre, image en premier : la
     photographie porte la section, le texte la commente. */
  .duo,.duo--rev,.duo--court,.duo--large.duo--rev{grid-template-columns:1fr}
  .duo__media{order:-1}
  .duo__media img,
  .duo--court .duo__media img,
  .duo--large .duo__media img{aspect-ratio:4 / 3}
  .footer__grille{grid-template-columns:1fr 1fr;row-gap:14px}
  .footer__c{text-align:left}
  .footer__r{text-align:right}
}
@media (max-width:760px){
  /* L'en-tete se resserre ; la reservation descend dans la barre fixe. */
  .header{height:66px;padding-inline:16px}
  body{padding-top:66px}
  html{scroll-padding-top:78px}
  .header .bmenu:not(.bmenu--nav){display:none}
  .wordmark img{width:min(62vw,300px)}
  /* Le hero passe des deux colonnes a deux bandes superposees. */
  .hero{grid-template-columns:1fr;grid-template-rows:1fr 1fr;
    height:min(640px, calc(100svh - 66px))}
  .bande__piste img{height:clamp(160px,46vw,280px)}
  .footer{padding-bottom:96px}
  .footer__grille{grid-template-columns:1fr;text-align:left;row-gap:11px}
  .footer__c,.footer__r{text-align:left}
  .mbar{display:flex}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero__alt{opacity:0}
  html{scroll-behavior:auto}
}

/* ============================================================
   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}
}