/* Loft Fouras La Rochelle — mobile-first stylesheet */

:root {
  --bg: #0a0706;
  --bg-alt: #170f0d;
  --card: #1d1512;
  --card-alt: #211812;
  --text: #f5efec;
  --text-muted: #b79b92;
  --text-dim: #8a7269;
  --text-dim2: #6b5750;
  /* Between --text-dim and --text-muted — for real informational copy
     (payment-trust disclaimer, copyright line) that needs to stay quiet
     but still clear WCAG AA (~5.5:1 on --bg, vs --text-dim2's ~3:1). */
  --text-fine: #9a8177;
  --accent: #c81e3a;
  --accent-dark: #8c1023;
  --border: rgba(245, 239, 236, 0.12);
  --border-accent: rgba(200, 30, 58, 0.3);
  --serif: "Cormorant Garamond", serif;
  --sans: "Manrope", sans-serif;
  /* Dashboard chart categorical palette — dark-surface-validated (see
     dataviz skill: slots 1-3, worst-case contrast/CVD all pass against
     this site's --card, #1d1512). Fixed source -> hue mapping, never
     reassigned by filters. */
  --chart-website: #3987e5;
  --chart-airbnb: #d95926;
  --chart-booking: #199e70;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

::selection {
  background: var(--accent-dark);
  color: var(--text);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.accent {
  color: var(--accent);
}
.italic {
  font-style: italic;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  /* Capped at 100vw (rather than a flat 600px) so this decorative bleed
     can never itself become the widest thing on the page — on mobile,
     content wider than the viewport inflates the browser's layout
     viewport, which then misplaces every position:fixed element (e.g.
     the off-canvas nav menu) that's anchored to the screen edge. */
  width: min(600px, 100vw);
  height: 400px;
  background: radial-gradient(circle, rgba(140, 16, 35, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-dark);
  color: var(--text);
  cursor: pointer;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-accent);
  color: var(--text-muted);
  font-weight: 500;
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--text);
}
.btn--block {
  width: 100%;
}
.btn--small {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 8px;
}
.btn--danger {
  background: transparent;
  border-color: var(--text-dim2);
  color: var(--text-dim);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn.hero__btn {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.btn--ghost.hero__btn {
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 500;
}

.btn__arrow {
  display: inline-block;
  font-size: 19px;
  font-weight: 700;
  transform: translateY(-0.5px);
  transition: transform 0.2s ease;
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.link-arrow {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  gap: 8px;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  width: fit-content;
}

.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--sans);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  /* Mobile stays solid at all times, scroll state or not — only the
     desktop override below plays with transparency. */
  background: rgba(10, 7, 6, 0.85);
  border-bottom: 1px solid var(--border-accent);
  transition: background 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.1;
  text-decoration: none;
}
.nav__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
}
.nav__title {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text);
  white-space: nowrap;
}
.nav__subtitle {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
}

.nav__links {
  position: fixed;
  inset: 0 0 0 auto;
  top: 65px;
  width: 78vw;
  max-width: 320px;
  height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 32px 28px;
  background: var(--bg-alt);
  border-left: 1px solid var(--border-accent);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.nav__links.is-open {
  transform: translateX(0);
}
.nav__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  text-align: center;
}
.nav__links a:not(.nav__cta) {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__link-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.65;
}
.nav__links .nav__cta {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.nav__links-footer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 0;
}
.nav__links-logo {
  width: 55%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
}
.nav__links-footer .nav__brand-text {
  align-items: center;
  text-align: center;
}
.nav__links-footer .footer__social {
  margin-top: 16px;
}

@media (min-width: 760px) {
  /* Desktop only: nav starts transparent so the hero photo shows through
     at the top of the page, then switches to the solid mobile look once
     the visitor scrolls (class toggled by public/js/site.js). */
  .nav {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  .nav.is-scrolled {
    background: rgba(10, 7, 6, 0.9);
    border-bottom-color: var(--border-accent);
  }
  /* Links + icons (icons follow via stroke="currentColor") stand out in
     white over the photo, then drop back to their normal muted tone once
     the nav goes solid on scroll. */
  .nav__links a:not(.nav__cta) {
    color: #fff;
    transition: color 0.25s ease;
  }
  .nav.is-scrolled .nav__links a:not(.nav__cta) {
    color: var(--text-muted);
  }
  .nav__link-icon {
    transition: opacity 0.25s ease;
    opacity: 0.9;
  }
  .nav.is-scrolled .nav__link-icon {
    opacity: 0.65;
  }
}

@media (min-width: 1280px) {
  /* Backdrop blur is only safe here: .nav__links becomes position:static at
     this breakpoint (below it, .nav__links is position:fixed for the
     off-canvas mobile menu, and a non-none backdrop-filter on this ancestor
     would make it the containing block instead of the viewport, breaking
     the menu's positioning). */
  .nav {
    padding: 20px 32px;
  }
  .nav.is-scrolled {
    backdrop-filter: blur(10px);
  }
  .nav__toggle {
    display: none;
  }
  .nav__links-footer {
    display: none;
  }
  .nav__links {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: none;
    border: none;
    transform: none;
  }
  .nav__links a {
    font-size: 13px;
    white-space: nowrap;
  }
  .nav__links .nav__cta {
    margin-left: 8px;
  }
}

/* ---------- Layout helpers ---------- */

.section {
  position: relative;
  padding: 64px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.section--alt {
  max-width: none;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--alt > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section__head {
  margin-bottom: 40px;
}
.section__head--center {
  text-align: center;
}
.section__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 8vw, 44px);
  margin: 0;
  line-height: 1.1;
}
.section__note {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 14px 0 0;
}
.section__note--center {
  max-width: 480px;
  margin: 14px auto 0;
}

/* Section éditoriale "Love room à La Rochelle…" — bloc de texte centré. */
.love-intro {
  max-width: 760px;
  margin: 0 auto;
}
.love-intro .section__head {
  margin-bottom: 24px;
}
.love-intro__lead {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.love-intro__body p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.9;
  margin: 0 0 14px;
}
.love-intro__body p:last-child {
  margin-bottom: 0;
}
.love-intro strong {
  color: var(--accent);
  font-weight: 600;
}
.love-intro__tags {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.love-intro__tags li {
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 6px 12px;
}
.love-intro__cta {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
}

/* On mobile, "Nos appartements" reads better left-aligned like the other
   non-center sections — it re-centers with the rest from 760px up. */
#appartements .section__head--center {
  text-align: left;
}
#appartements .section__note--center {
  margin-left: 0;
}

@media (min-width: 760px) {
  .section {
    padding: 100px 48px;
  }
  .section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
  }
  .section__head--center {
    display: block;
  }
  .section__note {
    max-width: 340px;
    margin-top: 0;
  }

  #appartements .section__head--center {
    text-align: center;
  }
  #appartements .section__note--center {
    margin-left: auto;
  }
}

/* ---------- Hero ---------- */

/* One unified block at every size: the photo is always the full-bleed
   background, text always sits on top of it — never two separate columns.
   Only the gradient direction and text position adapt per breakpoint. */
.hero {
  position: relative;
  display: flex;
  min-height: 560px;
  overflow: hidden;
}
.hero__text {
  position: relative;
  z-index: 1;
  padding: 96px 20px 56px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 10vw, 58px);
  line-height: 1.05;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
}
/* Titre en 3 étages : accroche XXL, descripteur tracké, promesse en italique. */
.hero__title-main {
  font-size: 1em;
  line-height: 0.98;
  letter-spacing: -0.012em;
}
.hero__title-main em {
  font-style: italic;
}
.hero__title-tag {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.235em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.44em 0 0.32em;
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.hero__title-tag::before,
.hero__title-tag::after {
  content: "";
  flex: none;
  width: 2.4em;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.hero__title-accent {
  font-size: 0.52em;
  line-height: 1.15;
}
.hero__lead {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 460px;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
}
.hero__actions .hero__btn {
  width: 100%;
  padding: 16px 22px;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, #3a2622, #1c1211 70%);
  overflow: hidden;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 7, 6, 0.35) 0%,
    rgba(10, 7, 6, 0.55) 45%,
    rgba(10, 7, 6, 0.94) 100%
  );
  transition: background 0.2s ease;
}
.hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Narrow mobile crops cut a tall, narrow slice of the photo — shifted
     right so the couple stays centered in that slice instead of the
     default center crop, which pushed them off to the left. */
  object-position: 10% center;
  transform: scale(1.08);
}

@media (min-width: 760px) {
  .hero {
    /* Pull the section up behind the sticky nav (~77px tall at this size)
       and grow by the same amount, so the photo bleeds under the navbar
       at the top of the page instead of stopping at its bottom edge. */
    margin-top: -77px;
    min-height: calc(640px + 77px);
    justify-content: center;
  }
  .hero__text {
    flex: 0 0 auto;
    max-width: 600px;
    /* Top padding matches the nav-height bleed above, so the text still
       centers within the original visible (below-nav) area. */
    padding: 77px 56px 0;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hero__title {
    font-size: clamp(42px, 6vw, 72px);
    margin-bottom: 26px;
  }
  .hero__title-main {
    font-size: 1.08em;
  }
  .hero__title-tag {
    justify-content: center;
  }
  .hero__lead {
    font-size: 17px;
    line-height: 1.75;
    max-width: 500px;
    margin-bottom: 34px;
  }
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
    gap: 18px;
  }
  .hero__actions .hero__btn {
    width: auto;
    padding: 17px 32px;
  }
  /* Swap visual order only — markup stays "Réserver" then "Voir les
     appartements" so mobile is unaffected. */
  .hero__actions .btn--ghost.hero__btn {
    order: -1;
  }
  .hero__media-img {
    /* On this wide/short ratio, cover already fits the image edge-to-edge
       horizontally — object-position has no slack to shift within, so
       panning has to come from scale + translateX instead. */
    object-position: center;
    transform: scale(1.15) translateX(-5%);
  }
  /* Text is centered now, so the overlay is a centered vignette instead of
     the left-heavy gradient — dark behind the text, clearer at the edges. */
  .hero__media::after {
    background: radial-gradient(
      60% 65% at 50% 50%,
      rgba(10, 7, 6, 0.88) 0%,
      rgba(10, 7, 6, 0.55) 50%,
      rgba(10, 7, 6, 0.15) 85%
    );
  }
}

@media (min-width: 1280px) {
  .hero {
    /* Nav grows to ~97px tall at this breakpoint (bigger padding) — bleed
       amount has to grow with it. */
    margin-top: -97px;
    min-height: calc(760px + 97px);
  }
  .hero__text {
    max-width: 760px;
    padding: 97px 80px 0;
  }
  .hero__title {
    font-size: clamp(52px, 5.4vw, 88px);
  }
  /* Sur grand écran, on pousse l'accroche encore plus fort et on resserre
     le crénage du gros serif. */
  .hero__title-main {
    font-size: 1.24em;
    letter-spacing: -0.02em;
  }
  .hero__title-tag {
    font-size: 0.2em;
    letter-spacing: 0.3em;
    margin: 0.7em 0 0.5em;
  }
  .hero__title-accent {
    font-size: 0.46em;
  }
}

/* ---------- Apartments ---------- */

.apt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.apt-card {
  background: var(--card);
  border: 1px solid var(--border);
}
.apt-card__media {
  position: relative;
  min-height: 200px;
  background: repeating-linear-gradient(
    135deg,
    #1c1211,
    #1c1211 12px,
    #241614 12px,
    #241614 24px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 239, 236, 0.35);
  font-family: monospace;
  font-size: 11px;
  text-align: center;
  padding: 12px;
  overflow: hidden;
}
.apt-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Diaporama au survol : les photos sont empilées, seule .is-active est
   visible, fondu doux entre chacune. Hors carte concernée, l'image reste
   affichée normalement (ces règles sont scopées à .js-apt-slideshow). */
.js-apt-slideshow .apt-card__img {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.js-apt-slideshow .apt-card__img.is-active {
  opacity: 1;
}
.apt-card__body {
  padding: 26px 22px;
}
.apt-card__body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.apt-card__tagline {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 18px;
}
.apt-card__features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.apt-card__features li {
  color: #e8c9c0;
  font-size: 12.5px;
  padding-left: 14px;
  position: relative;
}
.apt-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

@media (min-width: 760px) {
  .apt-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
  }
  .apt-card__media {
    min-height: 320px;
  }
  .apt-card__body {
    padding: 40px 36px;
  }
}

/* ---------- Apartment detail ---------- */

.apt-detail__back {
  margin-bottom: 24px;
}
.apt-detail__head {
  margin-bottom: 24px;
}
.apt-detail__tagline {
  color: var(--text-muted);
  font-size: 15px;
  margin: 10px 0 0;
}

.apt-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
}
.apt-gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--card);
}
.apt-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apt-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.apt-gallery__thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--card);
}
.apt-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 7, 6, 0.6);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.apt-gallery__more:hover {
  background: rgba(10, 7, 6, 0.75);
}
.apt-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js-gallery-open {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 4, 3, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(245, 239, 236, 0.08);
  border: 1px solid var(--border-accent);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__nav--prev {
  left: 12px;
}
.lightbox__nav--next {
  right: 12px;
}
.lightbox__count {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 12.5px;
}

@media (min-width: 760px) {
  .lightbox__nav {
    width: 52px;
    height: 52px;
  }
  .lightbox__nav--prev {
    left: 24px;
  }
  .lightbox__nav--next {
    right: 24px;
  }
}

.apt-detail__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.apt-detail__section {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.apt-detail__section:first-child {
  border-top: none;
  padding-top: 0;
}
.apt-detail__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 14px;
}
.apt-detail__description {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  white-space: pre-line;
}
.apt-detail__description a,
.legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.apt-detail__description a:hover,
.legal-body a:hover {
  color: var(--text);
}
/* Pages légales (CGV, mentions) : vrais paragraphes et listes — la mise en
   forme ne dépend plus des retours à la ligne dans la source. */
.legal-body {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
}
.legal-body p {
  margin: 0 0 14px;
}
.legal-body > *:last-child {
  margin-bottom: 0;
}
.legal-body ul {
  margin: 6px 0 14px;
  padding-left: 1.25em;
  list-style: disc;
}
.legal-body li {
  margin: 5px 0;
}
.apt-detail__amenity-cat {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: #e8c9c0;
  margin: 28px 0 12px;
}
.apt-detail__amenity-cat:first-of-type {
  margin-top: 4px;
}
.apt-detail__amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.apt-detail__amenities li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}
.apt-detail__amenity-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #e8c9c0;
}
.apt-detail__amenity-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (min-width: 560px) {
  .apt-detail__amenities {
    grid-template-columns: 1fr 1fr;
  }
}

#amenitiesModalOpen {
  margin-top: 20px;
}

.amenities-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 4, 3, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.amenities-modal[hidden] {
  display: none;
}
.amenities-modal__panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.amenities-modal__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 20px;
}
.amenities-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

@media (min-width: 640px) {
  .amenities-modal__panel {
    padding: 40px;
  }
}

.apt-detail__price-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apt-detail__price {
  font-family: var(--serif);
  font-size: 26px;
}
.apt-detail__price-amount {
  color: var(--text);
}
.apt-detail__price-unit {
  color: var(--text-dim);
  font-size: 14px;
  margin-left: 4px;
}
.apt-detail__rates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.apt-detail__rate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
}
.apt-detail__rate-label {
  font-size: 13px;
  color: var(--text);
}
.apt-detail__rate-value {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
  text-align: right;
}
.apt-detail__rate-value small {
  font-size: 11px;
  color: var(--text-dim);
}
.apt-detail__rate-note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-dim);
}
.apt-detail__rates-text {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-fine);
}

@media (min-width: 640px) {
  .apt-gallery {
    grid-template-columns: 1.4fr 1fr;
  }
  .apt-gallery__main {
    aspect-ratio: auto;
  }
  .apt-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    /* Explicit, evenly-split rows (rather than rows auto-sized to the
       square thumbs) so the 2x2 grid always fills exactly the height the
       main photo stretches it to — a source photo taller than the thumbs'
       natural 1:1 total height used to leave a gap between the two rows. */
    grid-template-rows: repeat(2, 1fr);
    height: 100%;
  }
  .apt-gallery__thumb {
    aspect-ratio: auto;
  }
}

@media (min-width: 760px) {
  .apt-detail__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
  .apt-detail__main {
    flex: 1;
  }
  .apt-detail__booking {
    flex: 0 0 320px;
  }
}

/* ---------- Booking widget ---------- */

/* Choix du logement — gros boutons centrés qui déplient le calendrier dessous */
.apt-choices {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
/* Jeu de cartes : la carte-photo est posée DERRIÈRE le bouton (même
   empreinte). Le bouton, opaque, la masque ; au survol il se décale sur le
   côté comme une carte qu'on tire du dessus du paquet, dévoilant la photo. */
.apt-choice-slot {
  position: relative;
  display: flex;
}
.apt-choice {
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 26px;
  min-width: 240px;
  border: 1px solid var(--border-accent);
  background: var(--card);
  color: var(--text);
  border-radius: 16px;
  font-family: var(--sans);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease, background 0.4s ease, color 0.4s ease,
    box-shadow 0.3s ease;
}
/* Deux couches pour obtenir une sortie en arc : .apt-choice__preview porte le
   déplacement horizontal, .apt-choice__preview-img le déplacement vertical +
   la rotation. Durées/courbes différentes => la trajectoire se courbe au lieu
   d'être une diagonale droite. Réversible tout seul au relâchement. */
.apt-choice__preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateX(0) scale(0.985);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.apt-choice__preview-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-accent);
  box-shadow: none;
  transform: translateY(0) rotate(0deg);
  transition: transform 0.66s cubic-bezier(0.34, 1.12, 0.5, 1),
    box-shadow 0.4s ease;
}
.apt-choice__name {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.3px;
}
.apt-choice__price {
  font-size: 12.5px;
  color: var(--text-muted);
}
.apt-choice__price span {
  opacity: 0.7;
}
.apt-choice__cta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.apt-choice:hover,
.apt-choice:focus-visible {
  border-color: var(--accent);
  background: var(--accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  outline: none;
}
.apt-choice:hover .apt-choice__cta,
.apt-choice:focus-visible .apt-choice__cta {
  opacity: 1;
  transform: translateY(0);
}
/* Logement sélectionné : même rendu "rouge" que le survol. */
.apt-choice.is-active {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--text);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}
.apt-choice.is-active .apt-choice__cta {
  opacity: 1;
  transform: translateY(0);
}
/* Le bouton NE bouge PAS (il reste dans son axe, la cible de clic est
   stable). C'est la photo, posée derrière, qui coulisse sur le côté pour
   apparaître — Loft Spa vers la gauche, Studio Balnéo vers la droite —
   sans s'incliner. Uniquement là où le survol est fiable et où il y a la
   place de faire ressortir la photo. */
/* La photo se dévoile au survol OU quand le bouton est sélectionné
   (.is-active) — dans ce dernier cas elle reste affichée tant que le
   logement est le choix actif. */
@media (hover: hover) and (min-width: 880px) {
  .apt-choice:hover,
  .apt-choice:focus-visible {
    box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.75);
  }
  /* Loft Spa : la photo part en arc vers le haut-gauche. */
  .apt-choice-slot:hover .apt-choice--slide-left ~ .apt-choice__preview,
  .apt-choice--slide-left:focus-visible ~ .apt-choice__preview,
  .apt-choice--slide-left.is-active ~ .apt-choice__preview {
    transform: translateX(-52%) scale(1);
  }
  .apt-choice-slot:hover .apt-choice--slide-left ~ .apt-choice__preview .apt-choice__preview-img,
  .apt-choice--slide-left:focus-visible ~ .apt-choice__preview .apt-choice__preview-img,
  .apt-choice--slide-left.is-active ~ .apt-choice__preview .apt-choice__preview-img {
    transform: translateY(-34%) rotate(-8deg);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.82);
  }
  /* Studio Balnéo : la photo part en arc vers le haut-droite. */
  .apt-choice-slot:hover .apt-choice--slide-right ~ .apt-choice__preview,
  .apt-choice--slide-right:focus-visible ~ .apt-choice__preview,
  .apt-choice--slide-right.is-active ~ .apt-choice__preview {
    transform: translateX(52%) scale(1);
  }
  .apt-choice-slot:hover .apt-choice--slide-right ~ .apt-choice__preview .apt-choice__preview-img,
  .apt-choice--slide-right:focus-visible ~ .apt-choice__preview .apt-choice__preview-img,
  .apt-choice--slide-right.is-active ~ .apt-choice__preview .apt-choice__preview-img {
    transform: translateY(-34%) rotate(8deg);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.82);
  }
}
/* Mobile / tactile : aucun effet photo. La vignette est simplement masquée ;
   les boutons restent tels quels. L'effet reste réservé au grand écran. */
@media (hover: none), (max-width: 879px) {
  .apt-choice__preview {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .apt-choice__preview,
  .apt-choice__preview-img,
  .apt-choice-slot {
    transition-duration: 0.01ms;
  }
}
/* Mobile / tactile : pas de :hover fiable — on montre le CTA en continu et on
   donne un retour visuel au toucher. */
@media (hover: none) {
  .apt-choice__cta {
    opacity: 1;
    transform: none;
  }
  .apt-choice:active {
    transform: scale(0.97);
    background: var(--accent-dark);
    border-color: var(--accent);
  }
}
/* Grand écran : boutons plus imposants et bien centrés. */
@media (min-width: 700px) {
  .apt-choices {
    gap: 24px;
    margin-bottom: 12px;
  }
  .apt-choice {
    padding: 26px 46px;
    min-width: 300px;
  }
  .apt-choice__name {
    font-size: 23px;
  }
  .apt-choice__price {
    font-size: 13.5px;
  }
}

/* Section Agenda : fond rouge d'accroche au repos, puis retour au style
   sombre habituel dès que le client ouvre le calendrier (.is-engaged). Les
   règles rouges vivent toutes sous :not(.is-engaged) : quand la classe est
   posée, elles cessent simplement de s'appliquer et la section reprend son
   apparence .section--alt d'origine, en transition douce. */
.booking-cta {
  transition: background-color 0.45s ease;
}
.booking-cta .eyebrow,
.booking-cta .section__title,
.booking-cta .section__note {
  transition: color 0.4s ease;
}
/* Fond : le rouge d'origine (#8c1023). Les boutons sont rouge plein (même
   teinte que la section) : visuellement identiques à "transparents", mais
   opaques, ce qui leur permet de masquer la carte-photo posée derrière. */
.booking-cta:not(.is-engaged) {
  background-color: var(--accent-dark);
}
.booking-cta:not(.is-engaged) .eyebrow {
  color: #f5efec;
}
.booking-cta:not(.is-engaged) .section__title {
  color: #fff;
}
.booking-cta:not(.is-engaged) .section__note {
  color: rgba(245, 239, 236, 0.82);
}
.booking-cta:not(.is-engaged) .apt-choice {
  border-color: rgba(245, 239, 236, 0.3);
  background: var(--accent-dark);
  color: #f5efec;
}
.booking-cta:not(.is-engaged) .apt-choice__price {
  color: rgba(245, 239, 236, 0.7);
}
.booking-cta:not(.is-engaged) .apt-choice__cta {
  color: #fff;
}
.booking-cta:not(.is-engaged) .apt-choice:hover,
.booking-cta:not(.is-engaged) .apt-choice:focus-visible {
  background: var(--accent-dark);
  border-color: #fff;
}

/* Calendrier de réservation — bloc déplié/replié sous les boutons de choix.
   L'animation 0fr -> 1fr sur une grille anime la hauteur sans avoir à la
   connaître à l'avance (le calendrier est rendu en JS). */
.booking-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;
  margin-top: 0;
}
.booking-collapse.is-open {
  grid-template-rows: 1fr;
  margin-top: 24px;
}
/* Le cadre (bordure/fond) est porté par __card, entièrement à l'intérieur de
   __inner qui a overflow:hidden — ainsi, une fois replié (0fr) plus rien ne
   dépasse, pas même un filet de bordure. */
.booking-collapse__inner {
  overflow: hidden;
  min-height: 0;
}
.booking-collapse__card {
  border: 1px solid var(--border-accent);
  border-radius: 18px;
  background: var(--card);
}
.booking-collapse__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.booking-collapse__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
}
.booking-collapse__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-accent);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.booking-collapse__toggle svg {
  width: 16px;
  height: 16px;
}
.booking-collapse__toggle:hover {
  background: var(--accent-dark);
  color: var(--text);
}
.booking-collapse .booking {
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 20px;
}
@media (min-width: 700px) {
  .booking-collapse .booking {
    padding: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .booking-collapse {
    transition-duration: 0.01ms;
  }
}

.booking {
  /* Local aliases onto the site's regular dark palette, kept under the same
     --a-* names so every rule below still resolves without being rewritten. */
  --a-bg: var(--card);
  --a-bg-alt: var(--card-alt);
  --a-text: var(--text);
  --a-text-muted: var(--text-muted);
  --a-text-dim: var(--text-muted);
  --a-border: var(--border);

  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  background: var(--a-bg);
  color: var(--a-text);
  border-radius: 20px;
  border: 1px solid var(--border);
}

.booking__calendar {
  background: var(--a-bg-alt);
  border: 1px solid var(--a-border);
  border-radius: 14px;
  padding: 20px;
}
/* Carte du logement sous le calendrier : uniquement en disposition 2
   colonnes (grand écran), pour combler la colonne gauche. */
.booking__apt-card {
  display: none;
}
.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.calendar__nav button {
  cursor: pointer;
  color: var(--accent);
  font-size: 16px;
  padding: 6px 12px;
  border: 1px solid var(--a-border);
  background: transparent;
  border-radius: 6px;
}
.calendar__nav button:hover {
  border-color: var(--accent);
  background: rgba(200, 30, 58, 0.14);
}
.calendar__months {
  display: flex;
  gap: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  text-transform: capitalize;
}
.calendar__grids {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.calendar__hint {
  color: var(--a-text-dim);
  font-size: 11.5px;
  margin: 14px 0 0;
}

.month-grid__title {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  text-transform: capitalize;
  color: var(--accent);
  margin-bottom: 8px;
}
.month-grid__dow,
.month-grid__cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.month-grid__dow {
  margin-bottom: 6px;
}
.month-grid__dow span {
  text-align: center;
  font-size: 10.5px;
  color: var(--a-text-dim);
  letter-spacing: 0.5px;
}
.day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 6px;
  background: transparent;
  color: var(--a-text);
  border: 1px solid transparent;
  cursor: pointer;
}
.day-cell:hover:not(.is-disabled):not(.is-empty):not(.is-selected) {
  border-color: var(--a-border);
  background: rgba(200, 30, 58, 0.16);
}
.day-cell.is-empty {
  visibility: hidden;
  cursor: default;
}
.day-cell.is-disabled {
  color: var(--text-dim2);
  background: rgba(245, 239, 236, 0.04);
  text-decoration: line-through;
  opacity: 0.55;
  cursor: not-allowed;
}
.day-cell.is-selected {
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent);
}
.day-cell.is-inrange {
  background: rgba(200, 30, 58, 0.14);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--a-bg-alt);
  border: 1px solid var(--a-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.option-row__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}
.option-row__label small {
  display: block;
  color: var(--a-text-muted);
  font-size: 11.5px;
}
.option-row__price {
  color: var(--a-text-muted);
  font-size: 12.5px;
  white-space: nowrap;
}
/* Admin — colonne Photo de la table des options */
.admin-option-photo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.admin-option-photo img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--a-border, rgba(255, 255, 255, 0.12));
}
.admin-option-photo__remove {
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-option-photo input[type="file"] {
  font-size: 11px;
  max-width: 160px;
}
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty-stepper button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(200, 30, 58, 0.35);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.qty-stepper span {
  min-width: 16px;
  text-align: center;
  font-size: 13px;
}

.recap-card {
  background: var(--card-alt);
  border: 1px solid var(--border-accent);
  border-radius: 16px;
  padding: 24px 20px;
}
.booking .recap-card {
  background: var(--a-bg-alt);
  border-color: var(--a-border);
}
.recap-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--a-border);
  font-size: 13.5px;
}
.recap-row span:first-child {
  color: var(--a-text-muted);
}
.recap-row--total {
  border-bottom: none;
  padding-top: 14px;
  font-family: var(--serif);
  font-size: 20px;
}
.recap-row--total span:first-child {
  color: var(--a-text);
}
.recap-row--total span:last-child {
  color: var(--a-text);
}
/* Lignes de détail du tarif (nuits semaine / week-end) sous la ligne "Nuits" */
.recap-row--sub {
  padding: 6px 0;
  font-size: 12px;
}
.recap-row--sub span:first-child,
.recap-row--sub span:last-child {
  color: var(--a-text-muted);
}

.booking .guest-fields input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 30, 58, 0.15);
}

.guest-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.guest-fields input,
.admin-form input,
.admin-form select,
.admin-form textarea,
.contact-form input,
.contact-form textarea {
  background: var(--card);
  border: 1px solid rgba(245, 239, 236, 0.15);
  color: var(--text);
  padding: 13px 14px;
  font-size: 14px;
  font-family: var(--sans);
  border-radius: 8px;
  width: 100%;
}
.admin-form textarea {
  resize: vertical;
  min-height: 90px;
}
.admin-form select {
  cursor: pointer;
}
.admin-apt-card {
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.admin-manual-booking {
  margin-bottom: 24px;
}
.admin-manual-booking summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
}
.admin-manual-booking summary::-webkit-details-marker {
  display: none;
}
.admin-manual-booking__summary {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.admin-manual-booking .admin-form {
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 20px;
  margin-top: 14px;
}
.admin-apt-card h2,
.admin-apt-card__summary {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 18px;
}
.admin-apt-card--fold {
  padding-bottom: 4px;
}
.admin-apt-card__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}
.admin-apt-card__summary::-webkit-details-marker {
  display: none;
}
.admin-apt-card__summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 22px;
  color: var(--text-dim);
  font-family: var(--sans);
}
.admin-apt-card--fold[open] .admin-apt-card__summary::before {
  transform: rotate(90deg);
}
.admin-apt-card--fold[open] .admin-apt-card__summary {
  margin-bottom: 18px;
}
.admin-apt-card .admin-form {
  margin-bottom: 0;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.admin-form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

@media (min-width: 760px) {
  .admin-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-form-label--full {
    grid-column: 1 / -1;
  }
}

.admin-form input[type="file"] {
  padding: 9px 10px;
  cursor: pointer;
}

.admin-amenities-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 100;
  background: var(--accent-dark);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.admin-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.admin-section-fold {
  margin-top: 18px;
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 4px 16px;
  background: var(--card-alt);
}
.admin-section-fold summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.admin-section-fold summary::-webkit-details-marker {
  display: none;
}
.admin-section-fold summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 18px;
  color: var(--text-dim);
}
.admin-section-fold[open] summary::before {
  transform: rotate(90deg);
}
.admin-section-fold__body {
  padding-bottom: 16px;
}

.admin-amenities-category {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 14px;
}
.admin-amenities-category summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.admin-amenities-category summary::-webkit-details-marker {
  display: none;
}
.admin-amenities-category summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 16px;
  color: var(--text-dim);
}
.admin-amenities-category[open] summary::before {
  transform: rotate(90deg);
}
.admin-amenities-category__count {
  background: var(--accent-dark);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
.admin-amenities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 14px;
}
.admin-amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-alt);
  font-size: 13px;
  color: var(--text-muted);
}
.admin-amenity input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.admin-amenity__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #e8c9c0;
}
.admin-amenity__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (min-width: 560px) {
  .admin-amenities-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .admin-amenities-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.admin-photo-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.admin-photo-hint {
  color: var(--text-dim2);
  font-size: 11.5px;
  margin: 6px 0 12px;
}

.admin-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
}
@media (min-width: 640px) {
  .admin-gallery-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.admin-gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-alt);
  border: 1px solid transparent;
  cursor: grab;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease;
}
.admin-gallery-item.is-dragging {
  opacity: 0.4;
  border-color: var(--accent);
  cursor: grabbing;
}
.admin-gallery-item.is-cover {
  border-color: var(--accent-dark);
}
.admin-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.admin-gallery-item__badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--accent-dark);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: none;
  pointer-events: none;
}
.admin-gallery-item.is-cover .admin-gallery-item__badge {
  display: inline-block;
}

.admin-gallery-item__move {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  padding: 4px;
  pointer-events: none;
}
.admin-gallery-item__move button {
  pointer-events: auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(10, 7, 6, 0.72);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}
.admin-gallery-item__move button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.admin-gallery-item__bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 7, 6, 0.82);
  color: var(--text);
  font-size: 10.5px;
  padding: 5px 6px;
}
.admin-gallery-item__remove {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.admin-gallery-item__cover {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.admin-gallery-item__cover svg {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
}
.admin-gallery-item__cover input:checked ~ svg {
  color: #f0c419;
  fill: #f0c419;
}

.booking-error {
  color: #ff6b7f;
  font-size: 12.5px;
  margin: 10px 0 0;
}
.fine-print {
  color: var(--text-fine);
  font-size: 11px;
  margin: 12px 0 0;
  line-height: 1.6;
}

@media (min-width: 760px) {
  .booking {
    flex-direction: row;
    align-items: flex-start;
    padding: 40px;
    gap: 40px;
  }
  .booking__calendar {
    flex: 1;
  }
  .booking__recap {
    flex: 0 0 340px;
    position: sticky;
    top: 100px;
  }
  .calendar__grids {
    grid-template-columns: 1fr 1fr;
  }
  .booking__apt-card {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
    min-height: 220px;
    background: var(--a-bg-alt);
    border: 1px solid var(--a-border);
    border-radius: 14px;
    overflow: hidden;
  }
  .booking__apt-card-media {
    flex: 0 0 42%;
    background: #1c1211;
  }
  .booking__apt-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .booking__apt-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
  }
  .booking__apt-card-body h4 {
    font-family: var(--serif);
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--a-text);
  }
  .booking__apt-card-tag {
    font-size: 12.5px;
    color: var(--a-text-muted);
    margin: 0 0 12px;
  }
  .booking__apt-card-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 6px;
  }
  .booking__apt-card-feats li {
    position: relative;
    padding-left: 15px;
    font-size: 12.5px;
    color: var(--a-text-muted);
    line-height: 1.5;
  }
  .booking__apt-card-feats li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  .booking__apt-card-foot {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .booking__apt-card-price {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--a-text);
  }
  .booking__apt-card-price small {
    font-size: 12px;
    color: var(--a-text-muted);
  }
}

/* ---------- Options showcase ---------- */

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.option-card {
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.option-card__media {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    135deg,
    #1c1211,
    #1c1211 12px,
    #241614 12px,
    #241614 24px
  );
}
.option-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.option-card__body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.option-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  margin: 0 0 8px;
}
.option-card p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.option-card__price {
  font-family: var(--serif);
  font-size: 24px;
  color: #e8c9c0;
  margin-top: auto;
}

/* Mobile (1 colonne) : carte avec photo en ligne — image à gauche, texte à droite. */
.option-card--has-media {
  flex-direction: row;
  align-items: stretch;
  min-height: 132px;
}
.option-card--has-media .option-card__media {
  aspect-ratio: auto;
  flex: 0 0 40%;
  max-width: 150px;
}
.option-card--has-media .option-card__body {
  padding: 18px;
}

@media (min-width: 560px) {
  .options-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* En grille multi-colonnes, on repasse la carte en vertical (photo au-dessus). */
  .option-card--has-media {
    flex-direction: column;
    min-height: 0;
  }
  .option-card--has-media .option-card__media {
    flex: none;
    max-width: none;
    aspect-ratio: 4 / 3;
  }
  .option-card--has-media .option-card__body {
    padding: 24px 22px;
  }
}
@media (min-width: 960px) {
  .options-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Discretion ---------- */

.discretion {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.discretion__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.3;
  color: var(--text);
  margin: 16px 0 0;
}
.discretion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  text-align: left;
  margin-top: 36px;
}
.discretion-grid h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: #e8c9c0;
  margin: 0 0 8px;
}
.discretion-grid p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 760px) {
  .discretion-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Reviews ---------- */

.reviews-carousel-wrap {
  margin-top: 8px;
}

.reviews-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.reviews-carousel::-webkit-scrollbar {
  display: none;
}

.review-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}
.review-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: #e8c9c0;
  margin: 0 0 10px;
}
.review-card p.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__more {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0 0 14px;
  cursor: pointer;
  text-decoration: underline;
}
.review-card__more[hidden] {
  display: none;
}
.review-who {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  margin-top: auto;
}

@media (min-width: 640px) {
  .review-card {
    flex-basis: calc(50% - 9px);
  }
}
@media (min-width: 960px) {
  .review-card {
    flex-basis: calc(33.333% - 12px);
  }
}

.reviews-carousel-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.reviews-carousel-nav button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border-accent);
  background: var(--card);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
.reviews-carousel-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 22px;
}
.faq-item__question {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  position: relative;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
}
.faq-item__question::-webkit-details-marker {
  display: none;
}
.faq-item__question::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__question::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-item__answer {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 22px;
  padding-right: 32px;
  white-space: pre-line;
}

/* ---------- Location ---------- */

.location {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.location__text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.location__block h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: #e8c9c0;
  margin: 0 0 8px;
}
.location__block p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}
.location__map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  height: fit-content;
}
.location__map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}
.location__map-link {
  display: block;
  text-align: center;
  padding: 8px;
  background: var(--card);
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: none;
}
.location__map-link:hover {
  color: var(--text);
}

@media (min-width: 760px) {
  .location {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .location__map iframe {
    height: 340px;
  }
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}
.contact-detail {
  color: #e8c9c0;
  font-size: 14px;
  margin-bottom: 8px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-form textarea {
  resize: vertical;
}
/* Honeypot anti-spam : hors champ visuel plutot que display:none, que les
   bots un peu plus malins savent detecter et ignorer. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-status {
  font-size: 12.5px;
  margin: 0;
}
.contact-status--ok {
  color: #a9c99a;
}
.contact-status--error {
  color: #ff6b7f;
}

@media (min-width: 760px) {
  .contact {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
}

/* ---------- Footer ---------- */

.footer {
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer__brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
}
.footer__legal {
  color: var(--text-fine);
  font-size: 12px;
}
.footer__legal a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__legal a:hover {
  color: var(--text);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}
.footer__links a {
  color: var(--text-dim);
  text-decoration: none;
}
.footer__links a:hover {
  color: var(--text);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
}
.footer__social-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dark);
  box-shadow: 0 6px 16px -6px rgba(200, 30, 58, 0.55);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.footer__social-icon svg {
  width: 16px;
  height: 16px;
}
.footer__social:hover .footer__social-icon {
  background: var(--accent);
  transform: scale(1.07);
}
.footer__social:hover span:last-child {
  text-decoration: underline;
}

@media (min-width: 760px) {
  .footer {
    padding: 44px 48px;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .footer__col {
    align-items: flex-start;
  }
  .footer__links {
    justify-content: flex-start;
  }
}

/* ---------- Floating reservation CTA ---------- */

.floating-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--accent-dark);
  border: 1px solid var(--accent);
  color: var(--text);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px -8px rgba(200, 30, 58, 0.55);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    background-color 0.2s ease;
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta span:last-child {
  display: none;
}
.floating-cta:hover {
  background: var(--accent);
}
.floating-cta__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.floating-cta__pulse {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--accent);
  animation: floatingCtaPulse 2.4s ease-out infinite;
}

@keyframes floatingCtaPulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (min-width: 760px) {
  .floating-cta {
    right: 28px;
    bottom: 28px;
    width: auto;
    height: auto;
    padding: 15px 24px;
    font-size: 14.5px;
  }
  .floating-cta span:last-child {
    display: inline;
  }
}

/* ---------- Status pages ---------- */

.status-page {
  text-align: center;
  padding-top: 90px;
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.status-ref {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-dim);
}
.status-recap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  max-width: 360px;
}
.status-recap div {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.status-recap div span:first-child {
  color: var(--text-dim);
}
.status-page__download {
  margin-top: 8px;
}
.status-page__contact {
  color: var(--text);
  font-size: 13px;
  margin: 4px 0 0;
}

/* ---------- Admin ---------- */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-accent);
  position: sticky;
  top: 0;
  z-index: 20;
}
.admin-nav__brand {
  text-decoration: none;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
}
.admin-nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.admin-nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
}

.admin-nav__links {
  display: none;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  width: 100%;
}
.admin-nav__links.is-open {
  display: flex;
}
.admin-nav__links a,
.admin-nav__links .link-btn {
  text-decoration: none;
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: 8px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.admin-nav__links a.is-active,
.admin-nav__links a:hover {
  color: var(--text);
  background: rgba(245, 239, 236, 0.06);
}

@media (min-width: 760px) {
  .admin-nav {
    padding: 18px 20px;
  }
  .admin-nav__toggle {
    display: none;
  }
  .admin-nav__links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    gap: 18px;
  }
  .admin-nav__links a,
  .admin-nav__links .link-btn {
    padding: 0;
    min-height: 0;
    background: none !important;
  }
}

.admin-section {
  padding: 28px 16px;
}
.admin-login {
  max-width: 380px;
  margin: 0 auto;
  text-align: left;
  padding-top: 90px;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.admin-form--row {
  flex-direction: column;
}

@media (min-width: 760px) {
  .admin-section {
    padding: 40px 20px;
  }
  .admin-form--row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .admin-form--row input {
    flex: 1;
    min-width: 140px;
  }
}

/* Mobile-first: each row renders as a standalone card; becomes a real table from 760px up. */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table thead {
  display: none;
}
.admin-table tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-table tr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 16px;
}
/* Our own `display` above wins over the UA's default [hidden] rule (higher
   specificity), so filtered-out rows stayed visible until this reasserts
   it — needs to beat both the mobile and desktop .admin-table tr rules. */
.admin-table tr[hidden] {
  display: none;
}
/* Same specificity fight, for the dashboard's per-source column toggle. */
.admin-table th[hidden],
.admin-table td[hidden] {
  display: none;
}
.admin-table td {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border-bottom: none;
  text-align: left;
  word-break: break-word;
}
.admin-table td[data-label]::before {
  content: attr(data-label);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim2);
}
.admin-table input,
.admin-table textarea {
  background: var(--card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 8px;
  width: 100%;
  font-size: 14.5px;
  font-family: var(--sans);
}
.admin-table textarea {
  resize: vertical;
}
.admin-table__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
}
.admin-table__actions .btn {
  width: 100%;
}
.admin-table__actions .inline-form {
  display: block;
  width: 100%;
}

@media (min-width: 760px) {
  .admin-table {
    overflow-x: auto;
    display: block;
  }
  .admin-table thead,
  .admin-table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .admin-table thead {
    display: table-header-group;
  }
  .admin-table tbody {
    display: table-row-group;
  }
  .admin-table tr {
    display: table-row;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .admin-table th,
  .admin-table td {
    display: table-cell;
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  .admin-table td[data-label]::before {
    content: none;
  }
  .admin-table input,
  .admin-table textarea {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12.5px;
  }
  .admin-table__actions {
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
  }
  .admin-table__actions .btn {
    width: auto;
  }
  .admin-table__actions .inline-form {
    display: inline;
    width: auto;
  }
}

.inline-form {
  display: inline;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
}
.badge--on,
.badge--paid,
.badge--ok {
  background: rgba(140, 16, 35, 0.25);
  color: #f0a3ae;
}
.badge--off,
.badge--cancelled,
.badge--expired,
.badge--never {
  background: rgba(245, 239, 236, 0.08);
  color: var(--text-dim);
}
.badge--pending {
  background: rgba(200, 158, 30, 0.2);
  color: #e0c069;
}
.badge--refunded {
  background: rgba(107, 143, 94, 0.2);
  color: #a9c99a;
}
.badge--error {
  background: rgba(255, 107, 127, 0.18);
  color: #ff6b7f;
}
.badge--airbnb {
  background: rgba(255, 90, 95, 0.18);
  color: #ff8a8f;
}
.badge--booking {
  background: rgba(0, 61, 165, 0.22);
  color: #7ea8f0;
}
.badge--manual {
  background: rgba(245, 239, 236, 0.08);
  color: var(--text-dim);
}
.badge--website {
  background: rgba(140, 16, 35, 0.25);
  color: #f0a3ae;
}
.badge--hostblock {
  background: rgba(245, 239, 236, 0.08);
  color: var(--text-dim);
  font-style: italic;
}
.badge--arrival-today {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  margin-left: 6px;
}
.badge--arrival-tomorrow {
  background: rgba(200, 158, 30, 0.22);
  color: #e0c069;
  margin-left: 6px;
}
.admin-table tr.is-arriving-today {
  border-color: var(--accent);
  background: rgba(200, 30, 58, 0.1);
}
.admin-table tr.is-arriving-tomorrow {
  border-color: rgba(200, 158, 30, 0.4);
  background: rgba(200, 158, 30, 0.06);
}
@media (min-width: 760px) {
  .admin-table tr.is-arriving-today,
  .admin-table tr.is-arriving-tomorrow {
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .admin-table tr.is-arriving-tomorrow {
    box-shadow: inset 3px 0 0 rgba(200, 158, 30, 0.6);
  }
}
/* Possible double-booking (see SyncConflict) — takes priority over the
   arrival-soon highlighting above if a row happens to be both. Deliberately
   much stronger than the arrival highlighting: this needs to be spotted
   immediately in a long list, not just noticed on close inspection. */
.admin-table tr.is-conflict {
  border: 2px solid #ff6b7f !important;
  background: rgba(255, 107, 127, 0.22);
}
@media (min-width: 760px) {
  .admin-table tr.is-conflict {
    box-shadow: inset 5px 0 0 #ff6b7f;
  }
  .admin-table tr.is-conflict td {
    border-bottom-color: rgba(255, 107, 127, 0.35);
  }
}
.badge--apt-loft {
  background: rgba(196, 138, 42, 0.22);
  color: #e0b568;
}
.badge--apt-studio {
  background: rgba(35, 150, 150, 0.22);
  color: #7fd6d6;
}

.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;
}

.admin-filters {
  margin-bottom: 20px;
}
.filter-source-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(245, 239, 236, 0.15);
  border-radius: 8px;
  padding: 11px 14px;
  margin: 0;
}

#filterReset {
  border-color: var(--accent);
  color: var(--accent);
}
#filterReset:hover {
  background: rgba(200, 30, 58, 0.14);
  color: var(--text);
}

@media (min-width: 760px) {
  #exportCsv {
    margin-left: auto;
  }
}
.admin-filters__empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 20px 0;
}

/* ---------- Dashboard ---------- */

.dashboard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 220px;
  flex: 1 1 220px;
}
.stat-tile__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.stat-tile__value {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 6px;
}
.stat-tile__detail {
  font-size: 12.5px;
  color: var(--text-muted);
}

.chart-card {
  background: var(--card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
.chart-card__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.chart-card__title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.chart-card__subtitle {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 4px 0 0;
}
.chart-card__controls {
  margin: 0;
}
.chart-card__controls select {
  width: auto;
}

.chart-card__toggles {
  margin: 0 0 14px;
  gap: 18px;
}
.chart-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  width: auto;
}
.chart-toggle input {
  width: auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.chart-legend__item--ref {
  color: var(--text-dim);
}
.chart-legend__line {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--text-dim2);
  flex-shrink: 0;
}
.chart-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.chart-legend__item.is-dimmed {
  opacity: 0.4;
}

.chart-wrap {
  position: relative;
}
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-svg text {
  font-family: var(--sans);
}
.chart-axis-label {
  font-size: 10px;
  fill: var(--text-dim);
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  min-width: 150px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.chart-tooltip__title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}
.chart-tooltip__key {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}
.chart-tooltip__name {
  flex: 1;
  color: var(--text-muted);
}
.chart-tooltip__value {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-table-wrap {
  margin-top: 4px;
}

@media (min-width: 760px) {
  .chart-card__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}