/* Fraunces, servie depuis notre domaine plutôt que par Google.
   Aucune requête vers un tiers, donc aucune transmission d'adresse IP, et
   une dépendance externe de moins au chargement.
   Licence SIL Open Font 1.1 — https://fonts.google.com/specimen/Fraunces */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   hotelbeauvais — feuille de style principale
   Approche mobile-first : les styles de base ciblent le petit écran,
   les media queries min-width enrichissent progressivement.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #f4f2ea;
  --surface: #ffffff;
  --surface-2: #ece7d9;
  --surface-3: #f9f8f4;
  --ink: #1e2227;
  --ink-soft: #4a5057;
  --ink-muted: #6b7178;
  --line: #ded8c8;
  --line-soft: #ebe6da;
  --accent: #1f5fa8;
  --accent-ink: #14406f;
  --accent-soft: #e3edf8;
  --accent-hover: #17497f;
  /* Couleur du texte posé SUR --accent. En thème sombre l'accent devient
     clair : garder du blanc y tomberait à 2,4:1, sous le seuil WCAG AA. */
  --on-accent: #ffffff;
  --good: #35745a;
  --good-soft: #e2efe8;
  --warn-soft: #fbf0dc;

  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(24, 22, 16, .06), 0 1px 1px rgba(24, 22, 16, .04);
  --shadow-md: 0 4px 12px rgba(24, 22, 16, .08), 0 2px 4px rgba(24, 22, 16, .04);
  --shadow-lg: 0 16px 40px rgba(24, 22, 16, .14), 0 4px 12px rgba(24, 22, 16, .06);

  --header-h: 60px;
  --gutter: 16px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; --header-h: 68px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131518;
    --surface: #1b1e23;
    --surface-2: #23272e;
    --surface-3: #191c21;
    --ink: #eceae4;
    --ink-soft: #b9bec4;
    --ink-muted: #939aa1;
    --line: #31363d;
    --line-soft: #262a30;
    --accent: #74aae9;
    --accent-ink: #a9cdf3;
    --accent-soft: #1b2a3b;
    --accent-hover: #8dbcf0;
    --on-accent: #0e2038;
    --good: #7cc6a0;
    --good-soft: #1a2c24;
    --warn-soft: #2c2618;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* Le tiroir de navigation fermé est décalé hors écran à droite. Comme il est
     en position:fixed, il se réfère au viewport et échappe au rognage du body :
     la règle doit donc porter sur la racine, sinon il élargit la zone
     scrollable et crée un défilement horizontal parasite sur mobile.
     `clip` plutôt que `hidden` : ne crée pas de conteneur de défilement,
     ce qui préserve le position:sticky de l'en-tête. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Doublon volontaire avec la racine : les deux sont nécessaires pour
     neutraliser la largeur du tiroir hors écran (vérifié en navigateur). */
  overflow-x: clip;
}

body.nav-open { overflow: hidden; }

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

a {
  color: var(--accent-ink);
  -webkit-tap-highlight-color: rgba(31, 95, 168, .12);
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

main { padding-bottom: 48px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  /* Au-dessus du voile (60) : l'en-tête crée un contexte d'empilement, donc
     le z-index du tiroir qu'il contient ne vaut qu'à l'intérieur de celui-ci.
     Sans cela, le voile recouvrait le menu et interceptait tous les appuis. */
  z-index: 80;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--surface); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  padding-block: 6px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  transform: rotate(45deg);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Bouton hamburger — mobile uniquement */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 14, 10, .48);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  z-index: 60;
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* Tiroir de navigation mobile */
.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  width: min(86vw, 340px);
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.nav-open .main-nav { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nav-close {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 50%;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.nav-item { position: relative; }

.nav-toggle {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 13px 10px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  text-align: left;
}
.nav-toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.nav-item.open > .nav-toggle::after { transform: rotate(225deg); margin-top: 3px; }
.nav-item.open > .nav-toggle,
.nav-item.section-active > .nav-toggle { color: var(--accent-ink); }

.nav-dropdown {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 8px 10px;
  margin-left: 6px;
  border-left: 2px solid var(--accent-soft);
}
.nav-item.open .nav-dropdown { display: flex; }

.nav-dropdown a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 15px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.nav-flat {
  text-decoration: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  padding: 13px 10px;
  border-radius: var(--r-sm);
  min-height: 46px;
  display: flex;
  align-items: center;
}
.nav-flat:hover,
.nav-flat[aria-current="page"] { background: var(--surface-2); color: var(--accent-ink); }

/* Navigation desktop : méga-menu horizontal */
@media (min-width: 900px) {
  .nav-burger, .nav-scrim, .nav-drawer-head { display: none; }

  .main-nav {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 2px;
  }

  .nav-toggle {
    width: auto;
    font-size: 15px;
    padding: 9px 12px;
    min-height: 40px;
  }
  .nav-toggle::after { width: 6px; height: 6px; border-width: 1.5px; }

  .nav-item:hover > .nav-toggle,
  .nav-item.open > .nav-toggle,
  .nav-item.section-active > .nav-toggle {
    background: var(--surface-2);
    color: var(--accent-ink);
  }

  .nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 232px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 8px;
    margin: 0;
    box-shadow: var(--shadow-lg);
    z-index: 30;
  }
  .nav-dropdown-wide { min-width: 264px; }
  .nav-dropdown a { font-size: 14.5px; padding: 9px 11px; min-height: 40px; }

  .nav-flat { font-size: 15px; padding: 9px 12px; min-height: 40px; }
}

/* ---------- Sélecteur de langue ---------- */
/* Bâti sur le motif .nav-item : le script de navigation gère déjà l'ouverture,
   la fermeture au clic extérieur et la touche Échap. On ne redéfinit ici que
   ce qui le sépare visuellement des rubriques de contenu. */

/* Mobile : en bas du tiroir, séparé du reste par un filet. */
.nav-item-lang {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* La langue active porte une coche plutôt qu'une couleur seule : le repère
   reste lisible pour un daltonien. */
.nav-dropdown-lang a[aria-current="page"] {
  font-weight: 600;
}
.nav-dropdown-lang a[aria-current="page"]::after {
  content: "✓";
  margin-left: auto;
  padding-left: 10px;
  opacity: .8;
}
.nav-dropdown-lang a {
  display: flex;
  align-items: center;
}

@media (min-width: 900px) {
  /* Desktop : poussé à droite de la barre, à l'écart des rubriques. */
  .nav-item-lang {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  /* Le menu s'ouvre vers la gauche pour ne pas déborder du bord de l'écran. */
  .nav-dropdown-lang {
    left: auto;
    right: 0;
    min-width: 176px;
  }
}

/* Drapeaux du sélecteur de langue.
   Les emoji drapeaux ne sont pas rendus sur Windows, qui affiche à la place le
   code du pays : on passe donc par des SVG intégrés, identiques partout et
   sans requête réseau. Le nom de la langue reste affiché, car un drapeau
   désigne un pays et l'anglais sert ici de langue de repli à une vingtaine
   de nationalités. */
.drapeau {
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  margin-right: 9px;
  border-radius: 2px;
  /* Un liseré évite que le blanc du drapeau se fonde dans le fond. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22);
  background-size: cover;
  background-position: center;
}
.drapeau-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3Crect x='2' width='1' height='2' fill='%23ed2939'/%3E%3C/svg%3E"); }
.drapeau-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Crect width='60' height='40' fill='%23012169'/%3E%3Cpath d='M0,0 L60,40 M60,0 L0,40' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,40 M60,0 L0,40' stroke='%23c8102e' stroke-width='2'/%3E%3Cpath d='M30,0 V40 M0,20 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V40 M0,20 H60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E"); }
.drapeau-it { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23008c45'/%3E%3Crect x='2' width='1' height='2' fill='%23cd212a'/%3E%3C/svg%3E"); }
.drapeau-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Crect width='3' height='2' fill='%23aa151b'/%3E%3Crect y='0.5' width='3' height='1' fill='%23f1bf00'/%3E%3C/svg%3E"); }

/* Drapeau et libellé forment un seul bloc, pour que le chevron reste à droite
   malgré le space-between du bouton. */
.lang-etiquette {
  display: inline-flex;
  align-items: center;
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  padding: 14px 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; opacity: .55; }
.breadcrumb .current { color: var(--ink-soft); }

/* ---------- Hero ---------- */
.hero { padding: 22px 0 6px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 10px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(29px, 7.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 19ch;
}

.lede {
  font-size: clamp(16.5px, 4.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 22px;
}

/* ---------- Sections ---------- */
section.block {
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
}
section.block:first-of-type { border-top: none; }

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 5.2vw, 27px);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  text-wrap: balance;
}

h3.sub {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  margin: 26px 0 10px;
}

p { max-width: 68ch; margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
  .hero { padding: 30px 0 8px; }
  section.block { padding: 38px 0; }
}

/* ---------- Grilles génériques ---------- */
.info-grid,
.sector-grid,
.hotel-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .info-grid  { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hotel-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (min-width: 900px) {
  .info-grid  { grid-template-columns: repeat(4, 1fr); }
  .sector-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hotel-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ---------- Cartes info ---------- */
.info-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.info-card h3,
.info-card h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 7px;
}
.info-card p {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  max-width: none;
  color: var(--ink-soft);
}

/* ---------- Cartes secteur ---------- */
.sector-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (hover: hover) {
  .sector-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}
.sector-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.sector-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 7px 0 8px;
}
.sector-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}
.sector-card .count {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

/* ---------- Cartes hôtel ---------- */
.hotel-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (hover: hover) {
  .hotel-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .hotel-card:hover .hotel-card-img img { transform: scale(1.04); }
}

/* <picture> ne sert qu à proposer le WebP : on l efface de la mise en
   page pour que l <img> reste l element cible du flex et de object-fit. */
picture { display: contents; }

.hotel-card-img {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
.hotel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.hotel-card-img-empty {
  background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px);
}

.hotel-card-body {
  padding: 15px 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.hotel-card h3 {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}
.hotel-card .desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}
.hotel-card .distance {
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  line-height: 1.45;
}

/* ---------- Pastilles ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  background: var(--surface-3);
}
.pill.stars { color: var(--accent-ink); border-color: transparent; background: var(--accent-soft); }
.pill.tier { color: var(--good); border-color: transparent; background: var(--good-soft); }
.pill.rating { color: var(--accent-ink); border-color: transparent; background: var(--accent-soft); font-weight: 700; }
.pill-link { text-decoration: none; min-height: 30px; display: inline-flex; align-items: center; }
@media (hover: hover) {
  .pill-link:hover { border-color: var(--accent); color: var(--accent-ink); }
}

/* ---------- Badges tarif ---------- */
.price-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(18, 17, 13, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  text-align: right;
  line-height: 1.15;
}
.price-badge .from {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .82;
}
.price-badge .amount {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

/* ---------- Galerie (carrousel scroll-snap) ---------- */
.gallery { margin: 18px 0 26px; }

.gallery-main {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

@media (min-width: 640px) {
  .gallery-slide { aspect-ratio: 16 / 9; }
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 17, 13, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.gallery-arrow:hover { background: rgba(18, 17, 13, .8); }
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.gallery-arrow:disabled { opacity: .3; cursor: default; }
.gallery-arrow:disabled:hover { background: rgba(18, 17, 13, .55); }

/* Les flèches n'apparaissent qu'au pointeur fin : au doigt, on swipe. */
@media (hover: hover) and (pointer: fine) {
  .gallery-arrow { display: flex; }
}

.gallery-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(18, 17, 13, .66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gallery-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 54px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--surface-2);
  opacity: .6;
  transition: opacity .15s ease, border-color .15s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.active { opacity: 1; border-color: var(--accent); }

/* Sur très petit écran, les vignettes mangent de la place : on les masque
   au profit du swipe + compteur, qui suffisent à la navigation. */
@media (max-width: 479px) {
  .gallery-thumbs { display: none; }
}

/* ---------- Fiche hôtel ---------- */
.fiche-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .fiche-layout { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 44px; }
}

.fiche-sidebar {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .fiche-sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
}

.fiche-sidebar dl { margin: 0; }
.fiche-sidebar dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-top: 15px;
}
.fiche-sidebar dt:first-child { margin-top: 0; }
.fiche-sidebar dd { margin: 4px 0 0; font-size: 15px; }
.fiche-sidebar dd a { color: var(--accent-ink); }

.fiche-price {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.fiche-price .amount {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.fiche-price .unit { font-size: 13.5px; color: var(--ink-muted); }
.fiche-price .note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .16s ease, transform .1s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-primary:active { transform: scale(.985); }
.btn-block { display: flex; width: 100%; }

.cta-note {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  text-align: center;
}

/* Barre de réservation collée en bas — mobile seulement */
.booking-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(24, 22, 16, .1);
}
@supports not (backdrop-filter: blur(1px)) {
  .booking-bar { background: var(--surface); }
}
.booking-bar-price { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
.booking-bar-price .from {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
}
.booking-bar-price .amount {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}
.booking-bar .btn { flex: 1; min-height: 46px; font-size: 15px; padding-inline: 14px; }

/* La barre étant fixée au bas du viewport, elle recouvre la fin du document.
   La réserve d'espace doit donc porter sur le dernier bloc de la page — le
   pied de page — et non sur <main>, sinon la ligne de copyright reste
   masquée une fois arrivé en bas. */
body.has-booking-bar .site-footer {
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .booking-bar { display: none; }
  body.has-booking-bar .site-footer { padding-bottom: 0; }
}

/* ---------- Listes de points forts ---------- */
ul.atouts {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}
ul.atouts li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.5;
}
ul.atouts li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Bloc avis ---------- */
.review-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  max-width: 62ch;
  box-shadow: var(--shadow-sm);
}
.review-score {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 9px 13px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.review-score small { font-size: 12.5px; font-weight: 400; opacity: .7; }
.review-count { margin: 2px 0 7px; font-size: 13px; color: var(--ink-muted); max-width: none; }
.review-synthese { margin: 0; font-size: 14.5px; line-height: 1.55; max-width: none; }

/* ---------- Encadré ---------- */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 16px 18px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: 68ch;
}
.callout p { margin: 0; color: var(--ink); font-size: 14.5px; max-width: none; }

/* ---------- Échelle des distances ---------- */
.echelle {
  margin: 0 0 24px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.echelle figcaption {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
}
.echelle-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.echelle-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nom val" "piste piste";
  gap: 3px 10px;
  align-items: center;
  padding: 7px 0;
}
@media (min-width: 560px) {
  .echelle-ligne {
    grid-template-columns: minmax(9rem, 12rem) 1fr auto;
    grid-template-areas: "nom piste val";
    gap: 12px;
  }
}
.echelle-nom {
  grid-area: nom;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.echelle-nom:hover { color: var(--accent-ink); text-decoration: underline; }
.echelle-piste {
  grid-area: piste;
  position: relative;
  display: block;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.echelle-barre {
  display: block;
  height: 100%;
  background: var(--ink-muted);
  border-radius: 999px;
}
.echelle-ligne.a-pied .echelle-barre { background: var(--accent); }
.echelle-val {
  grid-area: val;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  white-space: nowrap;
}
.echelle-ligne.a-pied .echelle-val { color: var(--accent-ink); font-weight: 700; }

/* Repère de la limite de marche, aligné sur la piste des barres */
@media (min-width: 560px) {
  .echelle-liste::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(12rem + 12px + var(--seuil, 0%));
    width: 1px;
    background: var(--accent);
    opacity: .45;
  }
}
.echelle-legende {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 12px 0 0;
  max-width: none;
}
.echelle-cle {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 4px;
}

/* ---------- Tableaux de données ---------- */
/* Enveloppe obligatoire : sur mobile le tableau défile dans son propre
   conteneur, jamais la page entière. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.data-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.data-table th,
.data-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.data-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  background: var(--surface-3);
  position: sticky;
  top: 0;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody th {
  font-weight: 600;
  white-space: normal;
  min-width: 190px;
}
.data-table td.heure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table tr.souligne th,
.data-table tr.souligne td { background: var(--accent-soft); }
.table-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: -8px 0 20px;
}

/* ---------- Encadré d'alerte ---------- */
.warn {
  border-left: 3px solid #c2853a;
  background: var(--warn-soft);
  padding: 16px 18px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: 68ch;
  margin: 0 0 20px;
}
.warn p { margin: 0; font-size: 15px; max-width: none; }
.warn p + p { margin-top: 10px; }

/* ---------- Sources ---------- */
.sources {
  font-size: 13px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  margin-top: 26px;
}
.sources a { color: var(--ink-muted); }

/* ---------- Signature de fiche ---------- */
.byline {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  max-width: none;
}

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  margin-top: 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: 34px 22px;
}
@media (min-width: 560px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  /* 4 colonnes de liens + une colonne « À propos » plus large pour le texte */
  .footer-grid { grid-template-columns: repeat(4, 1fr) 1.5fr; gap: 28px; padding-block: 44px 26px; }
}
.footer-about .footer-note + .footer-note { margin-top: 10px; }

.footer-grid h2 {
  font-family: var(--font-body);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  margin: 0 0 12px;
  font-weight: 700;
}
.footer-grid a {
  display: flex;
  align-items: center;
  min-height: 38px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.footer-grid a:hover { color: var(--accent-ink); text-decoration: underline; }

.footer-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: none;
  margin: 0;
}
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 16px;
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom p { margin: 0; max-width: none; font-size: 12px; }