/* ═══════════════════════════════════════════════════════════════════
   Once Upon A Guest — feuille de style principale
   1. Jetons de design      5. Mise en page
   2. Base                  6. Composants
   3. Thèmes                7. Sections
   4. Utilitaires           8. Responsive / impression
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons de design ─────────────────────────────────────────── */
:root {
  /* Neutres — volontairement sans dominante : la page d'accueil montre
     les deux appartements, elle ne doit pencher ni vers le bleu d'Akela
     ni vers le sable de CasaSimba. Chaque thème les redéfinit. */
  --paper:        #FAFAF9;
  --paper-alt:    #F1F1EF;
  --surface:      #FFFFFF;
  --ink:          #17181A;
  --ink-soft:     #5A5C60;
  --line:         #E3E2DE;
  --line-strong:  #CBCAC5;

  /* Accent par défaut (pages neutres) — bleu nuit sobre */
  --brand:        #2A3B4D;
  --brand-deep:   #17222E;
  --brand-soft:   #EFF1F3;
  --brand-tint:   #DDE2E7;
  --on-brand:     #FFFFFF;

  /* Sémantique */
  --gold:         #B0821C;
  /* Rouge de la ligne A. Volontairement plus profond que le rouge RATP
     (#E2231A), qui ne dépasse pas 3,8 de contraste et échouerait pour du
     texte. Celui-ci reste au-dessus de 4,5 sur les trois fonds du site. */
  --rer:          #C8102E;
  --alert:        #A3241B;
  --alert-soft:   #FCF0EE;
  --whatsapp:     #1EA952;

  /* Typographie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Échelle fluide */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0313rem;
  --t-lg:   clamp(1.09rem, 1.02rem + 0.35vw, 1.25rem);
  --t-xl:   clamp(1.3rem,  1.18rem + 0.6vw,  1.6rem);
  --t-2xl:  clamp(1.6rem,  1.36rem + 1.2vw,  2.3rem);
  --t-3xl:  clamp(2.05rem, 1.6rem + 2.2vw,   3.4rem);

  /* Espacement */
  --gap:      1.25rem;
  --gutter:   1rem;
  --section:  clamp(3.25rem, 2.2rem + 4.5vw, 6rem);
  --maxw:     1180px;
  --maxw-txt: 68ch;

  /* Habillage */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(23,24,26,.06), 0 2px 6px rgba(23,24,26,.05);
  --sh:    0 2px 6px rgba(23,24,26,.06), 0 10px 26px rgba(23,24,26,.07);
  --sh-lg: 0 8px 20px rgba(23,24,26,.09), 0 24px 56px rgba(23,24,26,.11);
  --ease:  cubic-bezier(.22,.7,.3,1);
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* compense l'en-tête collant */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl);  }
h4 { font-size: var(--t-lg); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-deep); }

img, picture, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li + li { margin-top: .3em; }

strong, b { font-weight: 600; }
sup { font-size: .68em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }

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

::selection { background: var(--brand-tint); color: var(--ink); }

/* ── 3. Thèmes par appartement ───────────────────────────────────── */
/* Un thème ne redéfinit pas que la couleur d'accent : il redéfinit aussi
   les fonds neutres. Sans cela, la page Akela reste beige partout et seule
   la section « Avis » vire au bleu — l'identité de l'appartement ne se lit
   plus. Les fonds sont donc froids chez Akela, chauds chez CasaSimba. */
.theme-akela {
  --brand:       #1E5484;   /* bleu profond */
  --brand-deep:  #0F2E4C;
  --brand-soft:  #DCE9F5;
  --brand-tint:  #C6DCEE;
  --on-brand:    #FFFFFF;

  --paper:       #F8FAFC;
  --paper-alt:   #EDF2F7;
  --line:        #DEE5EB;
  --line-strong: #C2CCD6;
}
.theme-casasimba {
  --brand:       #7E5A2C;   /* sable / terre cuite */
  --brand-deep:  #4A3B28;
  --brand-soft:  #F0E6D3;
  --brand-tint:  #E5D6BA;
  --on-brand:    #FFFFFF;

  --paper:       #FBFAF7;
  --paper-alt:   #F5F1E9;
  --line:        #E6E1D6;
  --line-strong: #CEC7B8;
}

/* ── 4. Utilitaires ──────────────────────────────────────────────── */
.wrap    { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.prose   { max-width: var(--maxw-txt); }
.center  { text-align: center; }
.mx-auto { margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tint { background: var(--paper-alt); }
.section--brand { background: var(--brand-soft); }
.stack > * + * { margin-top: var(--gap); }

.visually-hidden {
  position: absolute !important; 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: 50%; translate: -50% -140%;
  z-index: 200; background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none; transition: translate .18s var(--ease);
}
.skip-link:focus { translate: -50% 0; color: #fff; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}
.lead { font-size: var(--t-lg); color: var(--ink-soft); }

/* ── 5. En-tête et navigation ────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,247,.86);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex; align-items: center; gap: var(--gap);
  min-height: 4.25rem;
}
/* La marque peut retrecir en dernier recours (le widget de traduction
   allonge parfois le nom) mais ne pousse jamais les actions de droite. */
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  min-width: 0; flex: 0 1 auto;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
  margin-right: auto;
}
.brand img { height: 38px; width: auto; object-fit: contain; flex-shrink: 0; }
.brand span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small {
  display: block; font-family: var(--font-body); font-size: .66rem;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1;
}

/* min-width:0 autorise la nav a retrecir sous la taille de son contenu :
   sans cela, un libelle traduit plus long (espagnol, allemand...) pousse
   le bouton de reservation hors de l'ecran. */
.nav {
  display: flex; align-items: center; gap: .15rem;
  min-width: 0; flex: 0 1 auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: block; padding: .5rem .7rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); }

.header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* ── Sélecteur de langue ─────────────────────────────────────────── */
.langpick { position: relative; }
.langpick > summary {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .4rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft);
  list-style: none; user-select: none; white-space: nowrap;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary:hover { border-color: var(--brand); color: var(--brand); }
.langpick[open] > summary { border-color: var(--brand); color: var(--brand); }
.langpick__caret { transition: rotate .18s var(--ease); }
.langpick[open] .langpick__caret { rotate: 180deg; }

.langpick__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 120;
  min-width: 11.5rem; margin: 0; padding: .35rem;
  list-style: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg);
}
.langpick__menu li { margin: 0; }
.langpick__menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink); text-decoration: none;
}
.langpick__menu a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.langpick__menu a[aria-current="true"] { font-weight: 700; background: var(--brand-soft); color: var(--brand-deep); }

/* Un liseré discret évite que les drapeaux clairs (Espagne, Pays-Bas)
   se fondent dans le fond blanc du menu. */
.flag {
  border-radius: 2px; flex-shrink: 0; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── 6. Boutons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.45rem; border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600;
  line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary   { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--brand-deep); color: var(--on-brand); box-shadow: var(--sh); }

.btn--ghost     { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }

.btn--light     { background: rgba(255,255,255,.94); color: var(--ink); box-shadow: var(--sh-sm); }
.btn--light:hover { background: #fff; color: var(--ink); }

.btn--whatsapp  { background: var(--whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #17843F; color: #fff; }

.btn--lg  { padding: .95rem 1.85rem; font-size: var(--t-base); }
.btn--sm  { padding: .5rem 1rem; font-size: var(--t-xs); }
.btn--block { display: flex; width: 100%; }
.btn svg  { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.booking-form { display: inline-block; margin: 0; }

/* ── 7. Héros ────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; background: var(--brand-deep); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media picture { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,14,20,.55) 0%, rgba(10,14,20,.25) 34%, rgba(10,14,20,.78) 100%);
}
.hero__inner {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(82svh, 720px); padding-block: 6rem 3rem; color: #fff;
}
.hero h1 { color: #fff; max-width: 17ch; margin-bottom: .45em; }
.hero__lead { font-size: var(--t-lg); color: rgba(255,255,255,.93); max-width: 54ch; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hero--home .hero__inner { min-height: min(88svh, 800px); }

/* Les etoiles se lisent d'un coup d'oeil, le detail chiffre vient dessous. */
.hero__badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem 1.1rem; margin-bottom: 1.2rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r); backdrop-filter: blur(8px);
  font-size: var(--t-sm); font-weight: 500; color: #fff; width: fit-content;
  line-height: 1.35;
}
.hero__badge .stars { font-size: 1.15em; }
.hero__badge strong { font-weight: 700; }
.hero__badge-text { white-space: nowrap; }

/* Bandeau de caractéristiques sous le héros */
.specbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.specbar__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.specbar li {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem var(--gutter); margin: 0;
  border-right: 1px solid var(--line);
}
.specbar li:last-child { border-right: 0; }
.specbar__k { display: block; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.3; }
.specbar__v { display: block; font-weight: 600; font-size: var(--t-sm); line-height: 1.3; }
.specbar img { flex-shrink: 0; opacity: .85; }

/* ── 8. Cartes ───────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card__body { padding: 1.5rem; }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }

/* Carte d'appartement (accueil) */
.aptcard { display: flex; flex-direction: column; height: 100%; }
.aptcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brand-tint); }
.aptcard:hover .card__media img { scale: 1.04; }
.aptcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem; }
.aptcard h3 { margin-bottom: .15rem; }
.aptcard__tag { font-size: var(--t-sm); color: var(--ink-soft); font-style: italic; margin-bottom: 1rem; }
.aptcard__facts {
  display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0 0 1.25rem;
}
.aptcard__facts li {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0;
  padding: .3rem .7rem; background: var(--brand-soft); color: var(--brand-deep);
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600;
}
.aptcard__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.aptcard__price { font-size: var(--t-sm); color: var(--ink-soft); }
.aptcard__price strong { font-size: var(--t-xl); font-family: var(--font-display); color: var(--ink); }

.card__ribbon {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .75rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.95); box-shadow: var(--sh-sm);
  font-size: var(--t-xs); font-weight: 700; color: var(--ink);
}
.card__ribbon .star { width: 14px; height: 14px; }

/* Grilles */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Carte « argument » */
.feature { text-align: left; }
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: .9rem;
  background: var(--brand-soft); border-radius: var(--r);
}
/* La taille des icônes vient du gabarit (fonction icon()), pas d'ici :
   plusieurs ne sont pas carrées et doivent garder leurs proportions. */
.feature h3 { font-size: var(--t-lg); font-family: var(--font-body); font-weight: 600; margin-bottom: .35rem; }
.feature p { color: var(--ink-soft); font-size: var(--t-sm); }

/* Carte entierement cliquable (guides). La cible fait toute la carte,
   ce qui vaut mieux qu'un lien de quelques mots sur un ecran tactile. */
.card--link {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none;
}
.card--link:hover, .card--link:focus-visible {
  transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brand-tint);
}
.card--link p { flex: 1; }
.card__more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem;
  color: var(--brand-deep); font-size: var(--t-sm); font-weight: 600;
}
.card__more::after { content: '\2192'; transition: translate .2s var(--ease); }
.card--link:hover .card__more::after { translate: 3px 0; }

/* ── 9. Galerie photo ────────────────────────────────────────────── */
/* La hauteur de ligne est calculee depuis la largeur reelle de la grille
   (unites de conteneur) : la tuile en vedette couvre exactement deux lignes,
   sans trou ni decalage, quelle que soit la largeur d'ecran. */
.gallery {
  --cols: 4; --g: .65rem;
  container-type: inline-size;
  display: grid; gap: var(--g);
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols) * 3 / 4);
}
.gallery__item {
  position: relative; margin: 0; padding: 0; border: 0; background: var(--paper-alt);
  height: 100%; overflow: hidden; border-radius: var(--r-sm); cursor: zoom-in;
}
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s var(--ease); }
.gallery__item:hover img { scale: 1.05; }
.gallery__more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,20,26,.62); color: #fff; font-weight: 600; font-size: var(--t-sm);
}

/* Visionneuse plein écran */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(12,14,17,.96); padding: 1rem;
}
.lightbox[open], .lightbox.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__top { display: flex; justify-content: space-between; align-items: center; color: #fff; }
.lightbox__count { font-size: var(--t-sm); color: rgba(255,255,255,.75); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.lightbox__cap { color: rgba(255,255,255,.82); text-align: center; font-size: var(--t-sm); padding-top: .75rem; min-height: 2.5rem; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
}
.lb-btn:hover { background: rgba(255,255,255,.2); }
.lb-btn svg { width: 22px; height: 22px; }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; display: flex; gap: 1rem; width: 100%;
  left: 0; padding-inline: 1rem; justify-content: space-between; pointer-events: none; }
.lightbox__nav .lb-btn { pointer-events: auto; }

/* ── 10. Équipements ─────────────────────────────────────────────── */
.equip { display: grid; gap: 1.6rem 2.2rem; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.equip__group { break-inside: avoid; }
.equip__head { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; }
.equip__head img { flex-shrink: 0; }
.equip__head h3 { font-size: var(--t-base); font-family: var(--font-body); font-weight: 700; margin: 0; }
.equip ul { list-style: none; padding: 0; margin: 0; }
.equip li {
  position: relative; padding-left: 1.5rem; margin: 0 0 .35rem;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.equip li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .72rem; height: .4rem; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  rotate: -45deg; border-radius: 1px;
}
.equip li strong { color: var(--ink); }

/* Couchages */
.beds { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.beds__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.25rem; }
.beds__item h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--brand); margin-bottom: .4rem; }
.beds__item ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }

/* ── 11. Accordéon (FAQ / conditions) ────────────────────────────── */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
  padding: 1.15rem .25rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-lg); font-family: var(--font-display);
  transition: color .16s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--brand); }
.acc summary::after {
  content: ""; flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: .18rem;
  background: var(--brand-soft); border-radius: 50%;
  position: relative; transition: rotate .22s var(--ease), background .22s var(--ease);
  background-image:
    linear-gradient(var(--brand), var(--brand)),
    linear-gradient(var(--brand), var(--brand));
  background-size: .7rem 2px, 2px .7rem;
  background-position: center, center;
  background-repeat: no-repeat;
}
.acc details[open] summary::after { rotate: 45deg; background-size: .7rem 2px, 0 0; }
.acc__body { padding: 0 .25rem 1.4rem; color: var(--ink-soft); max-width: var(--maxw-txt); }
.acc__body > :first-child { margin-top: 0; }

/* ── 12. Avis voyageurs ──────────────────────────────────────────── */
.stars { display: inline-flex; gap: 1px; vertical-align: -.16em; }
.star { width: 1.05em; height: 1.05em; fill: var(--line-strong); }
.star.is-full { fill: var(--gold); }
.star.is-half { fill: url(#half-gold); }

.ratingline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.ratingline__score { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1; }
.ratingline__meta  { color: var(--ink-soft); font-size: var(--t-sm); }

.reviews {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem .25rem 1.5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.reviews::-webkit-scrollbar { height: 6px; }
.reviews::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.review {
  flex: 0 0 min(420px, 86vw); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--sh-sm);
}
.review__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .85rem; }
.review__who { font-weight: 600; }
.review__date { font-size: var(--t-xs); color: var(--ink-soft); }
.review__text {
  font-size: var(--t-sm); color: var(--ink-soft); flex: 1; margin: 0 0 1.1rem;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.review__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border-top: 1px solid var(--line); padding-top: .85rem; }
.review__src { font-size: var(--t-xs); color: var(--ink-soft); }
.badge-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 .4rem;
  border-radius: var(--r-sm) var(--r-sm) var(--r-sm) 0;
  background: #003B95; color: #fff; font-size: var(--t-sm); font-weight: 700;
}
.badge-star { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: var(--t-sm); }
.badge-star .star { fill: var(--gold); }

.carousel-nav { display: flex; gap: .5rem; }
.carousel-nav button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel-nav button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.carousel-nav button:disabled { opacity: .35; cursor: default; }
.carousel-nav svg { width: 18px; height: 18px; }

/* ── 13. Encadrés d'information (guides) ─────────────────────────── */
.note {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border-radius: var(--r);
  background: var(--brand-soft); border-left: 4px solid var(--brand);
  font-size: var(--t-sm);
}
.note--alert { background: var(--alert-soft); border-left-color: var(--alert); color: #6E1A14; }
.note--alert strong, .note--alert u { color: #6E1A14; }
.note__icon { flex-shrink: 0; font-size: 1.25rem; line-height: 1.35; }

.kv {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.35rem; font-size: var(--t-sm);
}
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

.copybtn {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--r-sm); padding: .18rem .5rem; font-size: var(--t-xs); cursor: pointer;
  font-family: var(--font-body); margin-left: .5rem;
}
.copybtn:hover { border-color: var(--brand); color: var(--brand); }
.copybtn.is-done { border-color: var(--whatsapp); color: var(--whatsapp); }

/* Sommaire des guides */
.toc { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }
.toc a {
  display: inline-block; padding: .45rem .9rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); text-decoration: none;
}
.toc a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* Bloc de guide */
.guide-block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); margin-bottom: var(--gap);
  scroll-margin-top: 6rem;
}
.guide-block > h2 { display: flex; align-items: center; gap: .7rem; font-size: var(--t-xl); }

.guide-block figure { margin: 1.25rem 0 0; }
.guide-block figure img { border-radius: var(--r); margin-inline: auto; }
.guide-block figcaption { font-size: var(--t-xs); color: var(--ink-soft); text-align: center; margin-top: .5rem; }

/* Video d'aide (le store de la chambre). Filmee au telephone, donc en
   portrait : sans largeur maximale elle occuperait tout l'ecran en
   hauteur et pousserait la suite du guide hors de vue. */
.guide-video { max-width: 300px; }
.guide-video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); border: 1px solid var(--line);
  background: #000;
}

/* ── 14. Tableau comparatif ──────────────────────────────────────── */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  font-size: var(--t-sm); min-width: 520px;
}
.compare th, .compare td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--paper-alt); font-family: var(--font-display); font-size: var(--t-base); }
.compare tbody th { font-weight: 500; color: var(--ink-soft); width: 34%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare td { font-weight: 600; }
.compare .col-akela     { color: #1E5484; }
.compare .col-casasimba { color: #7E5A2C; }

/* ── 15. Accès et carte ──────────────────────────────────────────── */
.map-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-alt); aspect-ratio: 4/3;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.routes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.routes li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0;
  padding: .85rem 1.1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.routes__dest { font-weight: 600; }
.routes__sub  { display: block; font-size: var(--t-xs); color: var(--ink-soft); font-weight: 400; }
.routes__time { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: var(--brand); white-space: nowrap; }

/* ── 16. Appel à l'action final ──────────────────────────────────── */
.cta-band {
  background: var(--brand-deep); color: #fff; border-radius: var(--r-lg);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p  { color: rgba(255,255,255,.85); max-width: 56ch; margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }

/* ── 17. Pied de page ────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: 3.5rem 2rem; margin-top: var(--section); }
.site-footer a { color: rgba(255,255,255,.88); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 {
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.footer-grid li { margin-bottom: .5rem; }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand strong { font-family: var(--font-display); font-size: 1.15rem; color: #fff; font-weight: 600; }
.footer-note { font-size: var(--t-sm); line-height: 1.6; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: var(--t-xs); color: rgba(255,255,255,.55);
}
.platforms { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.platforms a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .45rem .8rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm);
}
.platforms img { height: 26px; width: auto; }

/* Barre d'action collante sur mobile */
.mobile-cta {
  position: fixed; inset: auto 0 0 0; z-index: 90; display: none;
  gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(251,250,247,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(0,0,0,.07);
}
.mobile-cta .btn, .mobile-cta .booking-form { flex: 1; }
.mobile-cta .booking-form button { width: 100%; }

/* ── 18. Fil d'Ariane ────────────────────────────────────────────── */
.crumbs { font-size: var(--t-xs); color: var(--ink-soft); padding-block: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: "›"; color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ── 19. Responsive ──────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 4.25rem 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .6rem var(--gutter) 1.2rem;
    box-shadow: var(--sh-lg);
    max-height: calc(100svh - 4.25rem); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem .6rem; font-size: var(--t-base); border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:last-child { border-bottom: 0; }
  .header-actions .btn--book { display: none; }

  .gallery { --cols: 3; }

  body.has-mobile-cta { padding-bottom: 4.75rem; }
  body.has-mobile-cta .mobile-cta { display: flex; }
}

@media (max-width: 620px) {
  :root { --gutter: 1rem; --gap: 1rem; }
  .hero__inner { min-height: min(76svh, 580px); padding-block: 4.5rem 2.25rem; }
  .hero h1 { max-width: none; }
  .specbar__list { grid-template-columns: 1fr 1fr; }
  .specbar li { border-bottom: 1px solid var(--line); padding: .85rem var(--gutter); }
  .specbar li:nth-child(2n) { border-right: 0; }
  .gallery { --cols: 2; --g: .5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .acc summary { font-size: var(--t-base); }
  .review { flex-basis: 88vw; }
  .kv { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .kv dt { margin-top: .5rem; }
}

/* ── 20. Impression (les voyageurs impriment les guides) ─────────── */
@media print {
  .site-header, .site-footer, .mobile-cta, .toc, .lightbox, .carousel-nav,
  .hero__actions, .btn, .booking-form { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .guide-block { break-inside: avoid; border-color: #bbb; box-shadow: none; }
  .note { border: 1px solid #999; background: #f6f6f6; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .map-frame, iframe { display: none; }
}

/* ── 21. Héros double (accueil) ──────────────────────────────────── */
.hero--split .hero__media { display: grid; grid-template-columns: 1fr 1fr; }
.hero--split .hero__media > * { position: relative; overflow: hidden; }
.hero--split .hero__media picture,
.hero--split .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero--split .hero__inner { justify-content: center; text-align: center; align-items: center; }
.hero--split h1 { max-width: 20ch; margin-inline: auto; }
.hero--split .hero__lead { margin-inline: auto; }
.hero--split .hero__actions { justify-content: center; }
.hero--split .hero__badge { margin-inline: auto; }
.hero__seam {
  position: absolute; inset: 0 auto 0 50%; width: 1px; z-index: -1;
  background: rgba(255,255,255,.28);
}
.hero__tag {
  position: absolute; bottom: 1.1rem; z-index: 2;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9); padding: .3rem .8rem;
  background: rgba(0,0,0,.35); border-radius: var(--r-pill); backdrop-filter: blur(4px);
}
.hero__tag--l { left: max(var(--gutter), calc(50% - var(--maxw)/2 + var(--gutter))); }
.hero__tag--r { right: max(var(--gutter), calc(50% - var(--maxw)/2 + var(--gutter))); }
@media (max-width: 620px) {
  .hero--split .hero__media { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .hero__seam { inset: 50% 0 auto 0; width: auto; height: 1px; }
  .hero__tag { display: none; }
}

/* ── 22. Bandeau de chiffres clés ────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.stats > div { background: var(--surface); padding: 1.6rem 1.25rem; text-align: center; }
.stats__n {
  display: block; font-family: var(--font-display); font-size: var(--t-2xl);
  font-weight: 700; line-height: 1.05; color: var(--brand); margin-bottom: .2rem;
}
.stats__l { display: block; font-size: var(--t-xs); color: var(--ink-soft); }

/* Rappel : carte d'appartement thématisée sur fond neutre */
.aptcard.theme-akela     { border-color: #C6DCEE; }
.aptcard.theme-casasimba { border-color: #E5D6BA; }

/* ── 24. En-tête des guides voyageurs ────────────────────────────── */
.page-head {
  background: var(--brand-soft);
  border-bottom: 1px solid var(--brand-tint);
  padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  text-align: center;
}
.page-head img { margin-inline: auto; margin-bottom: 1rem; }
.page-head h1 { color: var(--brand-deep); margin-bottom: .4rem; }
.page-head p { color: var(--ink-soft); max-width: 62ch; margin-inline: auto; }
.page-head .toc { justify-content: center; margin-top: 1.5rem; }

.guide-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.guide-nav ul {
  display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.guide-nav ul::-webkit-scrollbar { display: none; }
.guide-nav li { margin: 0; }
.guide-nav a {
  display: block; padding: .95rem .9rem; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.guide-nav a:hover { color: var(--brand); }
.guide-nav a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; border-bottom-color: var(--brand); }

/* Liste d'étapes numérotées (accès parking) */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps > li {
  counter-increment: s; position: relative; padding-left: 3rem; margin: 0 0 1.75rem;
}
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand); border-radius: 50%;
  font-weight: 700; font-size: var(--t-sm); font-family: var(--font-body);
}
.steps figure { margin: .9rem 0 0; }
.steps img { border-radius: var(--r); }

/* Bandeau d'aide en fin de guide */
.help-band {
  background: var(--brand-soft); border: 1px solid var(--brand-tint);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); text-align: center;
}
.help-band h2 { font-size: var(--t-xl); margin-bottom: .5rem; }

/* Photos des guides : on plafonne la hauteur pour que les portraits
   n'occupent pas tout l'écran sur mobile comme sur ordinateur. */
.guide-block figure img,
.steps figure img {
  max-height: 420px; width: auto; margin-inline: auto;
  object-fit: contain; border-radius: var(--r);
}

/* Sur deux colonnes, la 5e statistique occupe toute la largeur
   plutôt que de laisser une case vide. */
@media (max-width: 620px) {
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── 25. Très petits écrans (320 px) ─────────────────────────────── */
@media (max-width: 620px) {
  /* Un libellé long ne doit jamais élargir la page */
  .btn { white-space: normal; }
  .review { flex: 0 0 calc(100vw - 2.5rem); }
  .toc a, .guide-nav a { white-space: normal; }
  .kv dd { word-break: break-word; overflow-wrap: anywhere; }
  .routes li { flex-wrap: wrap; }
}

/* ── 26. Justification des textes descriptifs ────────────────────── */
/* Seuls les vrais paragraphes de lecture sont justifiés : présentation,
   réponses de la FAQ, règlement, guides voyageurs. Les listes, les cartes
   d'avis et les textes centrés restent alignés à gauche — justifier une
   ligne courte creuse des trous au lieu de les combler.

   hyphens:auto est indispensable, pas décoratif : sans césure, la
   justification étire les espaces et laisse des « rivières » blanches,
   très visibles en allemand et en néerlandais. Le dictionnaire de césure
   est choisi d'après l'attribut lang du <html>, renseigné sur chaque page. */
.prose p,
.acc__body p,
.guide-block p,
.guide-block dd {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Vérifié à 430 px : avec la césure, la justification tient sans rivières.
   On ne repasse à gauche que sous 360 px, où la colonne devient vraiment
   trop étroite pour répartir les espaces proprement. */
@media (max-width: 360px) {
  .prose p, .acc__body p, .guide-block p, .guide-block dd {
    text-align: left;
    hyphens: auto;
  }
}

/* ── 27. Sections éditoriales à deux colonnes ────────────────────── */
/* Texte d'un côté, cartes ou plan de l'autre. La gouttière doit être
   franche : un paragraphe justifié aligne son bord droit au pixel près,
   il vient donc buter pile sur la colonne voisine sans le moindre creux
   pour respirer. Une gouttière étroite devient alors très visible. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap) clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  align-items: start;
}
.split--center { align-items: center; }

/* Sections un peu plus resserrées que le rythme par défaut. */
.section--compact { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--gallery { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* ── 28. Pages éditoriales ───────────────────────────────────────── */
.article-section { margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.article-section > h2 { scroll-margin-top: 6rem; }
.article-section .prose { max-width: none; }
.article-section figure { margin: 1.5rem 0 0; }
.article-section figure img { border-radius: var(--r); margin-inline: auto; max-height: 460px; width: auto; }
.article-section figcaption { font-size: var(--t-xs); color: var(--ink-soft); text-align: center; margin-top: .5rem; }

/* ── 29. Schéma de la ligne RER ──────────────────────────────────── */
.rermap-wrap { margin: 1.75rem 0 0; }
/* Sur écran étroit le schéma défile plutôt que de devenir illisible :
   réduire un plan de ligne à 375 px rendrait les noms de stations
   indéchiffrables. Le conteneur est focusable pour rester accessible
   au clavier. */
.rermap {
  overflow-x: auto;
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
  border-radius: var(--r);
  padding: .5rem;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rermap:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.rermap__svg { display: block; width: 100%; min-width: 860px; height: auto; }
.rermap__name {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  fill: var(--ink);
}
.rermap__name.is-here { font-weight: 700; fill: var(--brand-deep); }
.rermap__sub {
  font-family: var(--font-body); font-size: 12.5px; fill: var(--ink-soft);
}
.rermap__sub.is-here { font-weight: 700; fill: var(--brand); }
.rermap__time {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  fill: var(--rer);
}
.rermap-wrap figcaption {
  font-size: var(--t-xs); color: var(--ink-soft); text-align: center; margin-top: .6rem;
}