/* ============================================================
   Il y a 10 ans — design tokens
   paper & ink & the red route line of adventure maps
   ============================================================ */
:root {
  --paper: #F7F4EE;        /* warm paper, cooler than cream */
  --paper-deep: #EFEAE0;   /* cards, wells */
  --ink: #22303F;          /* deep ink navy — text */
  --ink-soft: #5A6675;     /* secondary text */
  --ink-faint: #98A0AB;    /* captions, hints */
  --route: #C0392B;        /* the red route line */
  --sea: #2F6B60;          /* map sea-green, links & accents */
  --line: #DDD6C9;         /* hairlines */

  --font-display: "Fraunces", Georgia, serif;
  --font-journal: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pad: 20px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  padding-bottom: env(safe-area-inset-bottom);
}
.hidden { display: none !important; }
img { max-width: 100%; }
button { font-family: var(--font-ui); cursor: pointer; }

/* ---------- shared ---------- */
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 15px;
}
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- passcode gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
}
.gate-card { width: 100%; max-width: 340px; text-align: center; }
.gate-mark {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px dashed var(--route);
  position: relative;
}
.gate-mark::after {
  content: ""; position: absolute; right: -5px; top: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--route);
}
.gate-title {
  font-family: var(--font-display);
  font-weight: 600; font-size: 32px; margin: 0 0 6px;
}
.gate-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 28px; }
.gate-label {
  display: block; text-align: left;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
#gate-input {
  width: 100%; padding: 12px 14px; font-size: 17px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); margin-bottom: 12px;
}
#gate-input:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
.gate .btn-primary { width: 100%; padding: 12px; font-size: 16px; }
.gate-error { color: var(--route); font-size: 14px; }

/* ---------- day view ---------- */
.day-head { padding: 18px var(--pad) 10px; max-width: 560px; margin: 0 auto; }
.day-eyebrow {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; justify-content: space-between; align-items: baseline;
}
.day-date {
  font-family: var(--font-display); font-weight: 600;
  font-size: 30px; line-height: 1.15; margin: 4px 0 2px;
}
.day-city { color: var(--ink-soft); font-size: 15px; margin: 0; }
.day-city .borrowed { color: var(--ink-faint); font-size: 13px; }

/* the signature: dotted route progress line */
.route-progress {
  position: relative; height: 14px; margin-top: 14px;
}
.route-progress .track {
  position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background-image: linear-gradient(90deg, var(--ink-faint) 33%, transparent 0);
  background-size: 9px 2px; opacity: 0.55;
}
.route-progress .done {
  position: absolute; left: 0; top: 6px; height: 2px;
  background-image: linear-gradient(90deg, var(--route) 33%, transparent 0);
  background-size: 9px 2px;
}
.route-progress .dot {
  position: absolute; top: 1px; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%;
  background: var(--route); border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--route);
}

/* photo carousel */
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 8px; padding: 8px var(--pad); -webkit-overflow-scrolling: touch;
  max-width: 560px; margin: 0 auto; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel img {
  scroll-snap-align: center;
  flex: 0 0 min(86%, 460px);
  height: min(62vw, 340px);
  object-fit: cover; border-radius: var(--radius);
  background: var(--paper-deep);
}
.carousel img:only-child { flex-basis: 100%; }
.dots { display: flex; gap: 5px; justify-content: center; padding: 4px 0 2px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots span.on { background: var(--route); }

/* journal entry */
.entry {
  font-family: var(--font-journal);
  font-size: 17px; line-height: 1.7;
  white-space: pre-line;
  padding: 10px 0 4px;
}
.entry.empty { color: var(--ink-faint); font-style: italic; }

/* rencontre + nuit cards */
.card {
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 12px 14px; margin: 10px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
.card .glyph { font-size: 17px; line-height: 1.4; }
.card .k {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 2px;
}
.card p { margin: 0; font-size: 14px; line-height: 1.5; }
.stay { display: flex; gap: 8px; align-items: center;
  color: var(--ink-soft); font-size: 14px; margin: 8px 0; }

/* mini map */
.mini-map {
  height: 180px; border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 12px 0 4px; overflow: hidden;
  position: relative; z-index: 0;
}
.map-link {
  display: block; text-align: center;
  color: var(--sea); font-size: 14px;
  padding: 6px 0 14px; background: none; border: none; width: 100%;
}

/* day navigation */
.day-nav {
  position: sticky; bottom: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom));
}
.day-nav .row { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.day-nav .btn { flex: 1; padding: 10px 0; font-size: 14px; }
.day-nav .btn:disabled { opacity: 0.35; cursor: default; }
.scrubber { max-width: 560px; margin: 0 auto 6px; display: block; width: 100%;
  accent-color: var(--route); }

/* ---------- countdown / locked / end states ---------- */
.state { min-height: 82vh; display: flex; align-items: center; }
.state-inner { text-align: center; width: 100%; }
.state .big {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; margin: 8px 0 0; color: var(--route);
}
.state h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; margin: 14px 0 8px;
}
.state p { color: var(--ink-soft); font-size: 16px; margin: 0 0 22px; line-height: 1.55; }

/* ---------- full map view ---------- */
.map-full { position: fixed; inset: 0; z-index: 10; }
#bigmap { position: absolute; inset: 0; }
.map-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
}
.map-top .btn { pointer-events: auto; box-shadow: 0 1px 6px rgba(34,48,63,.14); }
.map-title {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  background: var(--paper); padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 1px 6px rgba(34,48,63,.14);
}

/* leaflet marker */
.pin {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--route); border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px var(--route);
}
.pin-small {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--route);
}

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 26, 33, 0.94);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  .day-content { animation: rise .28s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
}
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }