/* Habitation Bellevue — Guide de visite
   Pure HTML/CSS/JS, mobile-first, white-first for sun readability. */

@font-face {
  font-family: "Liberation Serif";
  src: url("../fonts/LiberationSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("../fonts/LiberationSerif-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("../fonts/LiberationSerif-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("../fonts/LiberationSerif-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  --bg:           #FFFFFF;
  --bg-alt:       #FAF7F0;
  --hb-ink:       #1F1610;
  --ink-2:        #2A2118;
  --ink-3:        #6B5E47;
  --hb-cream:     #EFE4CC;
  --hb-mahogany:  #6B4423;
  --hb-coral:     #C66B4A;
  --hb-cane:      #5A6B47;
  --hb-sun:       #D9A24A;
  --accent-amber: #FFD96B;
  --font-display: 'Liberation Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-script:  'Caveat', 'Liberation Serif', cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--hb-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: var(--font-body); cursor: pointer; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent-amber); color: var(--hb-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(31,22,16,0.18); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(31,22,16,0.32); }

/* App shell — centre le contenu sur tablette/desktop, plein écran sur mobile */
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  justify-content: center;
}
.screen {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ────── Eyebrow utility ────── */
.hb-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

/* ────── Photo placeholder ────── */
.photo {
  width: 100%;
  background: #0E0A06;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(217,162,74,0.08), transparent 60%);
  pointer-events: none;
}
.photo .caption {
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--hb-sun);
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* ────── Dark header (Sommaire + Station) ────── */
.dark-header {
  position: sticky;
  top: 0;
  background: var(--hb-ink);
  padding: 12px 18px 12px 96px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; min-height: 56px;
  z-index: 50;
}
.dark-header .logo-card {
  position: absolute;
  left: 14px; top: 4px;
  width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  cursor: pointer;
}
.dark-header .logo-card img { width: 85px; height: auto; }
.dark-header .left-slot,
.dark-header .menu-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.dark-header .menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0; color: #fff;
}

/* ════════════════════════════════════════════════════
   SCREEN 1 — Bienvenue
   ════════════════════════════════════════════════════ */
.screen--welcome {
  background: #FFFFFF url("../assets/bg-cannes.png") repeat;
  background-size: 320px auto;
  background-blend-mode: multiply;
  padding: 60px 28px 36px;
  padding-top: max(60px, calc(env(safe-area-inset-top) + 36px));
  padding-bottom: max(36px, env(safe-area-inset-bottom));
}

.welcome-badge {
  position: absolute;
  top: 60px; right: 18px;
  transform: rotate(6deg);
  border: 1.5px dashed var(--hb-ink);
  background: #FFFFFF;
  padding: 6px 12px 8px;
  text-align: center;
  line-height: 1.05;
  font-family: var(--font-script);
  font-size: 18px;
  color: var(--hb-ink);
  box-shadow: 0 2px 0 rgba(31,22,16,0.08);
  font-style: italic;
}
.welcome-badge .pin {
  position: absolute;
  top: -3px; left: -3px;
  width: 6px; height: 6px;
  border-radius: 6px;
  background: var(--accent-amber);
  border: 1px solid var(--hb-ink);
}

.welcome-logo {
  display: flex; justify-content: center;
  margin-top: 18px;
}
.welcome-logo img { width: 180px; height: auto; }

.welcome-eyebrow {
  text-align: center;
  margin-top: 18px;
  color: var(--ink-3);
}

.welcome-photo { margin: 22px 0; height: 170px; }
.welcome-photo--image { padding: 0; }
.welcome-photo--image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  position: relative; z-index: 1;
}

.welcome-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  text-align: center;
  color: var(--hb-ink);
  margin: 0 12px;
  text-wrap: balance;
  font-weight: 400;
}

.lang-grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lang-btn {
  height: 64px;
  border: 1.5px solid var(--hb-ink);
  background: #FFFFFF;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hb-ink);
  transition: transform 120ms ease;
}
.lang-btn[aria-pressed="true"] {
  background: var(--accent-amber);
  box-shadow: 0 2px 0 rgba(31,22,16,0.18);
}
.lang-btn .flag {
  display: block;
  width: 26px;
  height: calc(26px * 0.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}

/* ════════════════════════════════════════════════════
   SCREEN 2 — Sommaire
   ════════════════════════════════════════════════════ */
.summary-scroll { flex: 1; overflow: auto; padding-bottom: 40px; }
.summary-intro { padding: 24px 22px 8px; }
.summary-intro .hb-eyebrow { color: var(--hb-ink); margin-bottom: 14px; display: block; }
.summary-intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--hb-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.meta-row {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
  margin: 4px 0 24px;
}
.meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.meta-row svg { width: 11px; height: 11px; }
.summary-section-title { color: var(--ink-3); margin-bottom: 10px; display: block; }

.stop-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
}
.stop-row {
  display: grid;
  grid-template-columns: 52px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: #FFFFFF;
  border: 1px solid var(--hb-ink);
  border-top: none;
  margin-top: -1px;
  text-decoration: none;
  color: inherit;
  transition: background 160ms;
}
.stop-row:first-child { border-top: 1px solid var(--hb-ink); margin-top: 0; }
.stop-row:hover:not(.is-active) { background: rgba(255,217,107,0.18); }
.stop-row.is-active {
  background: var(--accent-amber);
  border: 2px solid var(--hb-ink);
}
.stop-row .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--hb-ink);
  letter-spacing: -0.02em;
}
.stop-row .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  color: var(--hb-ink);
}
.stop-row .cat {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.stop-row .arrow { display: flex; justify-content: flex-end; }
.stop-row .arrow svg { width: 18px; height: 18px; color: var(--hb-ink); }

.dark-header .menu-btn svg { width: 22px; height: 14px; }
.status-bar { height: 0; flex-shrink: 0; }
@supports (padding: env(safe-area-inset-top)) {
  .status-bar { height: env(safe-area-inset-top); background: var(--hb-ink); }
}


/* ════════════════════════════════════════════════════
   SCREEN 3 — Station / Arrêt
   ════════════════════════════════════════════════════ */
.station-scroll { flex: 1; overflow: auto; }
.station-photo { height: 200px; }
.station-photo--image,
.station-photo--video { padding: 0; }
.station-photo--image img,
.station-photo--video video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  position: relative; z-index: 1;
}

.boot-loader, .boot-error {
  margin: auto; padding: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}
.boot-error { color: var(--hb-coral); }
.station-content { padding: 24px 24px 28px; }
.station-content .hb-eyebrow {
  color: var(--ink-2);
  margin-bottom: 12px;
  display: block;
}
.station-rule {
  width: 48px; height: 3px;
  background: var(--hb-ink);
  margin-bottom: 16px;
}
.station-content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--hb-ink);
}

.audio-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--hb-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px 10px 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 22px;
  transition: opacity 120ms ease;
}
.audio-btn:active { opacity: 0.85; }
.audio-btn .pill {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--accent-amber);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hb-ink);
}
.audio-btn .pill svg { width: 9px; height: 11px; margin-right: 2px; }
.audio-btn.is-playing .pill svg { display: none; }
.audio-btn.is-playing .pill::after {
  content: "";
  width: 9px; height: 11px;
  background:
    linear-gradient(var(--hb-ink), var(--hb-ink)) left/3px 100% no-repeat,
    linear-gradient(var(--hb-ink), var(--hb-ink)) right/3px 100% no-repeat;
}

.station-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--hb-ink);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.station-paragraph {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.saviez-vous {
  background: var(--accent-amber);
  border: 2px solid var(--hb-ink);
  padding: 16px 18px;
  margin-top: 8px;
}
.saviez-vous .hb-eyebrow {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--hb-ink);
  display: block;
}
.saviez-vous p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hb-ink);
  margin: 0;
}

.station-nav {
  background: var(--hb-ink);
  padding: 14px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  flex-shrink: 0;
}
.nav-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  border-radius: 0;
  font-family: var(--font-body);
}
.nav-btn--prev {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.9);
  padding: 10px 6px;
  font-size: 14px;
  font-weight: 500;
}
.nav-btn--prev[disabled] { opacity: 0.35; cursor: not-allowed; }
.nav-btn--prev svg { width: 16px; height: 16px; color: #fff; }
.nav-btn--next {
  background: var(--accent-amber);
  color: var(--hb-ink);
  border: none;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
}
.nav-btn--next svg { width: 16px; height: 16px; color: var(--hb-ink); }

/* ────── Responsive (tablette) ────── */
@media (min-width: 600px) {
  .screen { box-shadow: 0 0 0 1px rgba(31,22,16,0.06); }
}