/* =========================================================
   GUIDE — HÔTEL MONCEAU ÉLYSÉES
   Base propre / premium / mobile-first
   ========================================================= */

/* =========================================================
   1) Root scope + design tokens
   ========================================================= */
.hme-guide {
  --hme-accent: #3D6B70;
  --hme-accent-strong: #2F555A;
  --hme-accent-soft: #6E8E91;

  --hme-bg: #EEF3F2;
  --hme-bg2: #E6EEEC;

  --hme-text: #1C2527;
  --hme-muted: rgba(28, 37, 39, 0.78);
  --hme-soft: rgba(28, 37, 39, 0.62);

  --hme-line: rgba(61, 107, 112, 0.14);
  --hme-panel: rgba(61, 107, 112, 0.06);
  --hme-panel-strong: rgba(61, 107, 112, 0.09);

  --hme-shadow-xs: 0 4px 12px rgba(21, 34, 36, 0.04);
  --hme-shadow-sm: 0 8px 18px rgba(21, 34, 36, 0.06);
  --hme-shadow-md: 0 10px 24px rgba(21, 34, 36, 0.08);
  --hme-shadow-lg: 0 14px 30px rgba(21, 34, 36, 0.10);

  --hme-radius: 16px;
  --hme-radius-sm: 12px;
  --hme-radius-xs: 10px;

  --hme-fs-body: 15px;
  --hme-lh-body: 1.68;
  --hme-fs-h1: 30px;
  --hme-fs-section: 22px;
  --hme-fs-cardtitle: 17px;
  --hme-fs-meta: 13px;
  --hme-fs-en: 12.5px;
  --hme-fs-time: 20px;
  --hme-fs-price: 20px;
  --hme-fs-subtitle: 13px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, var(--hme-bg), var(--hme-bg2));

  color: var(--hme-text);
  min-height: 100vh;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

/* =========================================================
   2) Resets / isolation
   ========================================================= */
.hme-guide * {
  box-sizing: border-box;
}

.hme-guide a {
  color: inherit;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

.hme-guide a:hover,
.hme-guide a:focus,
.hme-guide a:visited {
  text-decoration: none !important;
}

.hme-guide img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hme-guide h1,
.hme-guide h2,
.hme-guide h3,
.hme-guide h4 {
  color: var(--hme-text) !important;
}

/* =========================================================
   3) Layout
   ========================================================= */
.hme-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 22px 14px 28px;
}

.hme-content {
  display: block;
}

.hme-section {
  margin: 28px 0;
}

.hme-stack {
  display: grid;
  gap: 16px;
}

.hme-guide .hme-sectiontitle {
  margin: 0 0 22px;
  font-size: var(--hme-fs-section);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--hme-text) !important;
}

/* =========================================================
   4) SVG system
   ========================================================= */
.hme-svg {
  width: 22px;
  height: 22px;
  display: block;
}

.hme-svg--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hme-svg--stroke * {
  fill: none;
  stroke: inherit;
  vector-effect: non-scaling-stroke;
}

.hme-svg--fill {
  fill: currentColor;
  stroke: none;
}

.hme-svg--fill * {
  fill: currentColor;
  stroke: none;
}

/* =========================================================
   5) Header
   ========================================================= */
.hme-header {
  text-align: center;
  padding: 12px 10px 22px;
}

.hme-logo {
  width: 80px !important;
  max-width: 80px !important;
  height: auto !important;
  margin: 0 auto 10px !important;
  display: block;
}

.hme-kicker {
  display: inline-block;
  margin: 10px 0 10px !important;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(61, 107, 112, 0.08);
  color: var(--hme-accent-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hme-h1 {
  margin: 0 0 10px;
  font-size: var(--hme-fs-h1);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hme-sub {
  max-width: 430px;
  margin: 0 auto;
  color: var(--hme-soft) !important;
  font-style: normal;
  line-height: 1.5;
  font-size: 15px;
}

/* =========================================================
   6) Quick actions
   ========================================================= */
.hme-quickactions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px 0 24px;
}

.hme-quickbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 78px;
  padding: 14px 10px 13px;

  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--hme-line);
  border-radius: 15px;
  box-shadow: var(--hme-shadow-xs);

  color: var(--hme-text);
  font-size: 10px;
  font-weight: 700;
  text-align: center;

  will-change: transform;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.hme-quickbtn::before,
.hme-quickbtn::after {
  display: none;
}

.hme-quickbtn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(61, 107, 112, 0.24);
  box-shadow: var(--hme-shadow-sm);
}

.hme-quickbtn:active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--hme-shadow-xs);
  border-color: rgba(61, 107, 112, 0.22);
  background: rgba(255, 255, 255, 0.96);
}

.hme-quickbtn:focus-visible {
  outline: 2px solid rgba(61, 107, 112, 0.28);
  outline-offset: 3px;
}

.hme-quickbtn .hme-svg,
.hme-quickbtn .hme-wa {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--hme-accent-strong);
  fill: currentColor;
}

.hme-quickbtn .hme-ctasvg {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.hme-quickbtn span:last-child {
  display: block;
  line-height: 1.15;
}
/* =========================================================
   7) Cards
   ========================================================= */
.hme-card {
  position: relative;
  overflow: hidden;

  display: flex;
  gap: 16px;
  align-items: flex-start;

  padding: 22px;

  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hme-line);
  border-radius: var(--hme-radius);
  box-shadow: var(--hme-shadow-md);

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.hme-card::before {
  display: none;
}

.hme-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--hme-shadow-lg);
  border-color: rgba(61, 107, 112, 0.20);
}

.hme-card:active {
  transform: translateY(0) scale(0.996);
}

.hme-ico,
.hme-body {
  position: relative;
}

.hme-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--hme-accent), var(--hme-accent-strong));
  color: #fff;
  box-shadow: 0 8px 16px rgba(61, 107, 112, 0.16);
}

.hme-ico .hme-svg--stroke {
  stroke: currentColor !important;
}

.hme-ico .hme-svg--fill {
  fill: currentColor !important;
}

.hme-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.hme-cardtitle {
  margin: 0 !important;
  font-size: var(--hme-fs-cardtitle);
  line-height: 1.22;
  font-weight: 700;
}

.hme-guide .hme-text {
  margin: 0;
  font-size: var(--hme-fs-body);
  line-height: var(--hme-lh-body);
  color: rgba(28, 37, 39, 0.92);
}

.hme-meta {
  margin: 0;
  font-size: var(--hme-fs-meta);
  color: var(--hme-soft);
}

.hme-en {
  display: block;
  margin: 0 !important;
  font-size: var(--hme-fs-en);
  line-height: 1.45;
  color: rgba(28, 37, 39, 0.56);
  font-style: italic;
}

.hme-en--divided {
  position: relative;
  padding-top: 12px;
}

.hme-en--divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(61, 107, 112, 0.08) 10%,
    rgba(61, 107, 112, 0.14) 50%,
    rgba(61, 107, 112, 0.08) 90%,
    transparent 100%
  );
}

.hme-body .hme-phonelist,
.hme-body .hme-transit-list,
.hme-body .hme-journey-list,
.hme-body .hme-schedule,
.hme-body .hme-box,
.hme-body .hme-times {
  margin: 0;
}

/* =========================================================
   8) Alerts
   ========================================================= */
.hme-alert {
  position: relative;
  overflow: hidden;

  display: flex;
  gap: 14px;
  align-items: flex-start;

  margin: 18px 0;
  padding: 18px;

  border-radius: var(--hme-radius);
  border: 1px solid var(--hme-line);
  border-left: 4px solid var(--hme-accent);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--hme-shadow-md);
}

.hme-alert::before {
  display: none;
}

.hme-alertico,
.hme-alert .hme-body {
  position: relative;
}

.hme-alertico {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--hme-accent), var(--hme-accent-strong));
  color: #fff;
  box-shadow: 0 8px 16px rgba(61, 107, 112, 0.14);
}

.hme-alertico .hme-svg--stroke {
  stroke: currentColor !important;
}

.hme-foot {
  margin-top: 10px;
  font-size: 13px;
  color: var(--hme-soft);
}

/* =========================================================
   9) Inline links / secondary buttons
   ========================================================= */
.hme-link {
  color: var(--hme-accent-strong);
  text-decoration: none !important;
  border-bottom: 1px solid rgba(61, 107, 112, 0.22);
  padding-bottom: 1px;
  transition: border-color 0.18s ease, opacity 0.18s ease;
}

.hme-link:hover,
.hme-link:focus-visible {
  border-color: rgba(61, 107, 112, 0.5);
  opacity: 0.95;
}

.hme-mapbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;

  padding: 10px 15px;
  border-radius: 999px;

  background: rgba(61, 107, 112, 0.10);
  border: 1px solid rgba(61, 107, 112, 0.16);
  box-shadow: none;

  color: var(--hme-accent-strong) !important;
  font-size: 14px;
  font-weight: 800;

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.hme-mapbtn:hover {
  background: rgba(61, 107, 112, 0.14);
  border-color: rgba(61, 107, 112, 0.22);
  transform: translateY(-1px);
}

.hme-mapbtn:active {
  transform: translateY(0) scale(0.98);
}

.hme-mapbtn .hme-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.hme-mapbtn--plain {
  align-self: flex-start;
}

/* =========================================================
   10) Times
   ========================================================= */
.hme-times {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  border-radius: 12px;
}

.hme-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hme-timelabel {
  font-size: 12px;
  color: rgba(28, 37, 39, 0.56);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.hme-timeval {
  font-size: var(--hme-fs-time);
  font-weight: 800;
  color: var(--hme-text);
  line-height: 1.05;
}

.hme-timesep {
  flex: 0 0 auto;
  font-size: 17px;
  color: var(--hme-accent);
  opacity: 0.95;
}

/* =========================================================
   11) Schedule
   ========================================================= */
.hme-schedule {
  display: grid;
  gap: 8px;
}

.hme-scheditem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 10px;

  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  border-left: 3px solid var(--hme-accent);
}

.hme-schedday {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hme-text);
}

.hme-schedhours {
  font-size: 15px;
  font-weight: 800;
  color: var(--hme-text);
  white-space: nowrap;
}

/* =========================================================
   12) Wi-Fi box
   ========================================================= */
.hme-box {
  padding: 12px;
  border-radius: 12px;
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
}

.hme-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(61, 107, 112, 0.10);
}

.hme-row + .hme-row {
  margin-top: 10px;
}

.hme-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 37, 39, 0.58);
  font-weight: 700;
}

.hme-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(61, 107, 112, 0.08);
  border: 1px solid rgba(61, 107, 112, 0.14);
  color: var(--hme-text);
}

/* =========================================================
   13) Phone list
   ========================================================= */
.hme-phonelist {
  display: grid;
  gap: 10px;
}

.hme-phoneitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 10px;

  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  border-left: 3px solid var(--hme-accent);
}

.hme-phonelabel {
  font-size: 13px;
  font-weight: 700;
  color: rgba(28, 37, 39, 0.88);
}

.hme-phonevalue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(61, 107, 112, 0.08);
  border: 1px solid rgba(61, 107, 112, 0.14);
  color: var(--hme-text);
}

/* =========================================================
   14) CTA WhatsApp
   ========================================================= */
.hme-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 54px;
  padding: 14px 22px;
  margin: 6px 0;

  border-radius: 14px;
  background: var(--hme-accent-strong) !important;
  color: #fff !important;

  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;

  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 22px rgba(61, 107, 112, 0.18);

  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.hme-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(61, 107, 112, 0.20);
}

.hme-cta:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 8px 18px rgba(61, 107, 112, 0.16);
}

.hme-ctasvg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hme-cta svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

/* =========================================================
   15) Footer
   ========================================================= */
.hme-footer {
  margin: 28px 0 8px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(28, 37, 39, 0.70);
}

.hme-footnote {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(28, 37, 39, 0.68);
}

/* =========================================================
   16) Bottom nav
   ========================================================= */
.hme-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 6px;

  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: transparent;
}

.hme-nav::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  height: 68px;

  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 24px;
  border: 1px solid rgba(61, 107, 112, 0.14);

  box-shadow:
    0 8px 24px rgba(21, 34, 36, 0.10),
    0 14px 36px rgba(21, 34, 36, 0.06);
}

.hme-nav a,
.hme-nav a:hover,
.hme-nav a:visited {
  text-decoration: none !important;
}

.hme-nav .hme-navlink {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  height: 56px;
  margin-bottom: 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border-radius: 16px;

  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  color: rgba(28, 37, 39, 0.68);

  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;

  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.hme-navico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.hme-navico .hme-svg {
  width: 22px;
  height: 22px;
}

.hme-navtxt {
  display: block;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.hme-navlink[aria-current="page"] {
  color: var(--hme-accent);
  background: rgba(61, 107, 112, 0.14);
}

.hme-navlink[aria-current="page"] .hme-svg--stroke {
  stroke: currentColor !important;
}

.hme-nav .hme-navlink:hover {
  background: rgba(61, 107, 112, 0.06);
}

.hme-nav .hme-navlink:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 12px;
}

.hme-nav .hme-navlink:focus:not(:focus-visible) {
  outline: none;
}

.hme-nav .hme-navlink:active {
  background: rgba(61, 107, 112, 0.12);
  transform: scale(0.97);
  border-radius: 14px;
}

/* =========================================================
   17) Media cards
   ========================================================= */
.hme-card--media {
  flex-direction: column;
  align-items: stretch;
}

.hme-card--media .hme-body {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hme-media {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(61, 107, 112, 0.10);
}

.hme-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   18) TV accordion
   ========================================================= */
.hme-tvdetails {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hme-line);
}

.hme-tvsummary {
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 14px 16px;
  font-weight: 700;

  background: var(--hme-panel);
  border-left: 3px solid var(--hme-accent);
}

.hme-tvsummary::-webkit-details-marker {
  display: none;
}

.hme-tvsumen {
  opacity: 0.6;
  font-weight: 400;
  margin-left: 6px;
}

.hme-tvchev {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: 0.25s;
}

.hme-tvdetails[open] .hme-tvchev {
  transform: rotate(225deg);
}

.hme-tvpanel {
  display: grid;
  gap: 18px;

  padding: 16px;
  background: rgba(61, 107, 112, 0.04);
  border-top: 1px solid rgba(61, 107, 112, 0.10);
}

.hme-tvtitle {
  margin-bottom: 10px;
  font-size: var(--hme-fs-subtitle);
  font-weight: 800;
}

.hme-tvtitleen {
  font-size: calc(var(--hme-fs-subtitle) - 1px);
  font-weight: 400;
  opacity: 0.6;
}

.hme-tvlist {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 16px;
}

.hme-tvitem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
}

.hme-tvnum {
  flex: 0 0 34px;
  width: 34px;
  opacity: 0.7;
}

.hme-tvname {
  flex: 1;
  min-width: 0;
}

/* =========================================================
   18bis) TV card add-ons — Chromecast
   ========================================================= */
.hme-cast{
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(61, 107, 112, 0.07), rgba(61, 107, 112, 0.04));
  border: 1px solid rgba(61, 107, 112, 0.10);
}

.hme-subtitle{
  margin: 0 !important;
  font-size: var(--hme-fs-subtitle);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--hme-text) !important;
}

.hme-tvsummary--sub{
  font-size: 14px;
  line-height: 1.35;
}

.hme-tvsummary--sub .hme-tvsumen{
  font-size: 12px;
}

.hme-tvgroup{
  display: grid;
  gap: 10px;
}

.hme-tvpanel .hme-list{
  margin: 0;
}

.hme-tvpanel .hme-en{
  margin-top: 2px !important;
}

.hme-tvpanel .hme-en--divided{
  padding-top: 10px;
}

.hme-tvpanel .hme-en--divided::before{
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(61, 107, 112, 0.06) 10%,
    rgba(61, 107, 112, 0.12) 50%,
    rgba(61, 107, 112, 0.06) 90%,
    transparent 100%
  );
}

/* =========================================================
   19) PDJ — price grid / buffet / info card
   ========================================================= */
.hme-pricegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 6px;
}

.hme-priceitem {
  padding: 12px;
  border-radius: 12px;
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  text-align: center;
}

.hme-priceitem--main {
  border-left: 3px solid var(--hme-accent);
}

.hme-pricelabel {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 37, 39, 0.65);
  font-weight: 700;
}

.hme-priceval {
  display: block;
  margin-top: 6px;
  font-size: var(--hme-fs-price);
  font-weight: 900;
  color: var(--hme-text);
  line-height: 1.05;
}

.hme-priceval--small {
  font-size: calc(var(--hme-fs-price) - 3px);
}

.hme-pricesub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(28, 37, 39, 0.60);
}

.hme-buffetlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.hme-buffetitem {
  padding: 12px;
  border-radius: 12px;
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  color: rgba(28, 37, 39, 0.88);
  font-weight: 700;
  line-height: 1.35;
  font-size: 14px;
}

.hme-buffetitem small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(28, 37, 39, 0.58);
  font-style: italic;
}

.hme-buffetitem--wide {
  grid-column: 1 / -1;
}

.hme-infocard {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--hme-radius);
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  border-left: 4px solid var(--hme-accent);
}

.hme-infocard__ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--hme-accent);
  color: #fff;
}

.hme-infocard__ico .hme-svg--stroke {
  stroke: currentColor !important;
}

.hme-infocard__title {
  margin: 0 0 6px;
  font-weight: 900;
  color: var(--hme-text);
}

.hme-infocard__text {
  margin: 0;
  color: rgba(28, 37, 39, 0.85);
  line-height: 1.5;
}

/* =========================================================
   20) Transit badges + journeys
   ========================================================= */
.hme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;

  font-family: "DIN", "DIN Next", "DIN 2014", "FF DIN", "Bahnschrift", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.hme-transit-list {
  display: grid;
  gap: 10px;
}

.hme-transit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  border-left: 3px solid var(--hme-accent);
}

.hme-transit-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  width: 110px;
  min-width: 110px;
}

.hme-transit-stop {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(28, 37, 39, 0.90);
}

/* Métro */
.hme-badge--m1  { background: #FFCD00; color: #1a1a1a; }
.hme-badge--m2  { background: #003CA6; color: #fff; }
.hme-badge--m3  { background: #837902; color: #fff; }
.hme-badge--m4  { background: #CF009E; color: #fff; }
.hme-badge--m5  { background: #FF7E2E; color: #fff; }
.hme-badge--m6  { background: #6ECA97; color: #1a1a1a; }
.hme-badge--m7  { background: #FA9ABA; color: #1a1a1a; }
.hme-badge--m8  { background: #E19BDF; color: #1a1a1a; }
.hme-badge--m9  { background: #B6BD00; color: #1a1a1a; }
.hme-badge--m10 { background: #C9910A; color: #1a1a1a; }
.hme-badge--m11 { background: #704B1C; color: #fff; }
.hme-badge--m12 { background: #007852; color: #fff; }
.hme-badge--m13 { background: #6EC4E8; color: #1a1a1a; }
.hme-badge--m14 { background: #62259D; color: #fff; }

/* RER */
.hme-badge--rera,
.hme-badge--rerb,
.hme-badge--rerc,
.hme-badge--rerd,
.hme-badge--rere {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 13px;
}

.hme-badge--rera { background: #F03D3D; color: #fff; }
.hme-badge--rerb { background: #4F9ED3; color: #fff; }
.hme-badge--rerc { background: #FFCD00; color: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.hme-badge--rerd { background: #00A961; color: #fff; }
.hme-badge--rere { background: #CF009E; color: #fff; }

/* Bus */
.hme-badge--bus {
  width: auto;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.hme-badge--bus30 { background: #6A3393; color: #fff; }
.hme-badge--bus31 { background: #FFCF0A; color: #1a1a1a; }
.hme-badge--bus73 { background: #916A40; color: #fff; }
.hme-badge--bus83 { background: #FFD108; color: #1a1a1a; }
.hme-badge--bus84 { background: #C6A6D1; color: #1a1a1a; }
.hme-badge--bus43 { background: #EE2231; color: #fff; }
.hme-badge--bus22 { background: #088F5F; color: #fff; }
.hme-badge--bus93 { background: #77C695; color: #1a1a1a; }

/* Journeys */
.hme-journey-list {
  display: grid;
  gap: 10px;
}

.hme-journey {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--hme-panel);
  border: 1px solid rgba(61, 107, 112, 0.10);
  border-left: 3px solid var(--hme-accent);
}

.hme-journey-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hme-journey-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hme-journey-icon .hme-svg {
  width: 16px;
  height: 16px;
}

.hme-journey-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--hme-text);
}

.hme-journey-sub {
  margin-left: 2px;
  font-size: 12px;
  color: rgba(28, 37, 39, 0.55);
}

.hme-journey-time {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--hme-accent);
  white-space: nowrap;
}

.hme-journey-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hme-journey-arrow {
  font-size: 12px;
  color: rgba(28, 37, 39, 0.35);
}

.hme-journey-via {
  font-size: 12.5px;
  color: rgba(28, 37, 39, 0.70);
}

.hme-journey-dest {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(28, 37, 39, 0.90);
}

/* =========================================================
   21) Lists / helpers
   ========================================================= */
.hme-list {
  margin: 10px 0 6px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.hme-list li {
  position: relative;
  padding-left: 18px;
  margin: 3px 0;
  color: rgba(28, 37, 39, 0.90);
  line-height: 1.55;
}

.hme-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(61, 107, 112, 0.82);
}

.hme-guide hr.hme-divider {
  height: 1px;
  margin: 10px 0 !important;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(61, 107, 112, 0.08) 12%,
    rgba(61, 107, 112, 0.14) 50%,
    rgba(61, 107, 112, 0.08) 88%,
    transparent 100%
  );
}

.hme-entry {
  display: grid;
  gap: 10px;
}

.hme-text--spaced {
  margin-top: 12px !important;
}

.hme-meta--spaced {
  margin-top: 12px !important;
}

/* =========================================================
   22) Weather
   ========================================================= */
.hme-card--weather {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.hme-weatherhead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hme-weatherhead .hme-ico {
  flex: 0 0 auto;
}

.hme-weathercontent {
  display: grid;
  gap: 20px;
}

.hme-weathercontent .weatherwidget-io {
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

/* =========================================================
   23) BAR
   ========================================================= */
.hme-bar-hours {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(28, 37, 39, 0.56);
  font-style: italic;
}

.hme-header .hme-bar-hours {
  margin-bottom: 0;
}

.hme-bar-hours strong {
  color: rgba(28, 37, 39, 0.78);
  font-style: normal;
}

.hme-bar-hours__ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.6;
}

.hme-menu-section {
  margin: 30px 0;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hme-line);
}

.hme-menu-section:last-of-type {
  border-bottom: none;
}

.hme-menu-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.hme-menu-heading__icon {
  font-size: 20px;
  line-height: 1;
}

.hme-menu-heading__title {
  margin: 0 !important;
  font-size: var(--hme-fs-section);
  font-weight: 800;
  color: var(--hme-text) !important;
}

.hme-menu-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(61, 107, 112, 0.08);
}

.hme-menu-item:last-of-type {
  border-bottom: none;
}

.hme-menu-item__left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  max-width: 64%;
}

.hme-menu-item__name {
  font-size: 15.5px;
  font-weight: 700;
  color: rgba(28, 37, 39, 0.96);
  line-height: 1.32;
}

.hme-menu-item__vol {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(28, 37, 39, 0.42);
  text-transform: uppercase;
}

.hme-menu-item__desc {
  margin: 2px 0 0;
  font-size: 12.75px;
  color: rgba(28, 37, 39, 0.62);
  font-style: italic;
  line-height: 1.4;
}

.hme-menu-note {
  display: block;
  margin: 2px 0 0 !important;
  font-size: 12.25px;
  line-height: 1.4;
  color: rgba(28, 37, 39, 0.50);
  text-align: center;
}

.hme-menu-item__left .hme-en,
.hme-menu-section > .hme-en.hme-menu-note {
  display: block;
  margin: 2px 0 0 !important;
  padding-top: 0;
  font-size: 12.25px;
  line-height: 1.4;
  color: rgba(28, 37, 39, 0.50);
  font-style: italic;
}

.hme-menu-item__left .hme-en::before,
.hme-menu-section > .hme-en.hme-menu-note::before {
  display: none;
}

.hme-menu-item__dots {
  flex: 1;
  min-width: 16px;
  height: 1px;
  margin: 10px 10px 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(28, 37, 39, 0.20) 0px,
    rgba(28, 37, 39, 0.20) 2px,
    transparent 2px,
    transparent 8px
  );
}

.hme-menu-item__price {
  flex-shrink: 0;
  margin-top: -1px;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--hme-accent);
  white-space: nowrap;
}

/* =========================================================
   24) Responsive
   ========================================================= */
@media (min-width: 640px) {
  .hme-guide {
    --hme-fs-h1: 34px;
    --hme-fs-section: 24px;
    --hme-fs-cardtitle: 18px;
  }

  .hme-wrap {
    padding: 26px 18px 34px;
  }

  .hme-header {
    padding: 16px 10px 24px;
  }

  .hme-card {
    padding: 24px;
  }

  .hme-card--media {
    flex-direction: row;
  }

  .hme-media {
    flex: 0 0 clamp(140px, 36%, 200px);
    max-width: clamp(140px, 36%, 200px);
    width: auto;
    height: auto;
    min-height: 160px;
  }

  .hme-pricegrid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .hme-buffetlist {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   25) Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hme-card,
  .hme-quickbtn,
  .hme-cta,
  .hme-navlink,
  .hme-mapbtn {
    transition: none !important;
  }
}