/* ============================================================
   Road Book — Figeac → Cahors
   « Voyages Extraordinaires » · Hetzel-binding revival
   Mobile-first · container-query driven · offline-first
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  /* aged paper */
  --paper: #f6edd6;
  --paper2: #efe3c6;
  --plate: #f9f2e0;
  --line: #d8c49a;

  /* inks */
  --ink: #3a2a17;
  --ink-90: color-mix(in srgb, var(--ink) 90%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-06: color-mix(in srgb, var(--ink) 6%, transparent);
  --inksoft: #7c6039;

  /* heraldry */
  --oxblood: #6e1b1b;
  --oxblood-dk: #521212;
  --oxblood-lt: #8a2a24;
  --gilt: #b8912f;
  --gilt-lt: #dcb44a;
  --gilt-dk: #8f6f22;
  --verd: #4a6b3a;
  --sea: #5f7f8c;
  --link: #7a4a1f;

  /* derived accents */
  --zebra: color-mix(in srgb, var(--ink) 5%, transparent);
  --row-hover: color-mix(in srgb, var(--gilt) 14%, transparent);

  /* elevation */
  --sh-1: 0 1px 2px rgba(58, 42, 23, .12);
  --sh-2: 0 5px 16px rgba(58, 42, 23, .16);
  --sh-3: 0 16px 40px rgba(40, 20, 12, .34);

  --radius: 3px;
  --tap: 44px;
  --measure: 66ch;      /* reading column */

  /* fluid modular scale (1.20 ratio, viewport-aware) */
  --fs-xs:   clamp(.68rem, .65rem + .12vw, .74rem);
  --fs-sm:   clamp(.82rem, .78rem + .2vw,  .9rem);
  --fs-base: clamp(.96rem, .92rem + .28vw, 1.04rem);
  --fs-md:   clamp(1.05rem, .99rem + .4vw, 1.22rem);
  --fs-lg:   clamp(1.3rem, 1.1rem + 1vw,   1.7rem);
  --fs-xl:   clamp(2.2rem, 1.4rem + 4vw,   3.3rem);

  /* fluid spacing scale */
  --sp-1: clamp(.4rem, .35rem + .2vw, .55rem);
  --sp-2: clamp(.7rem, .6rem + .4vw, 1rem);
  --sp-3: clamp(1rem, .85rem + .7vw, 1.5rem);
  --sp-4: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  --sp-5: clamp(2rem, 1.5rem + 2vw, 3.2rem);

  /* serif stacks — antique faces w/ safe fallbacks */
  --serif-display: "Didot", "Bodoni 72", "Hoefler Text", Georgia, "Times New Roman", serif;
  --serif-body: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 3 L25.5 18.5 L41 22 L25.5 25.5 L22 41 L18.5 25.5 L3 22 L18.5 18.5 Z' fill='%23b8912f'/%3E%3Ccircle cx='22' cy='22' r='3' fill='%236e1b1b'/%3E%3Cpath d='M22 9 L23.5 20.5 L35 22 L23.5 23.5 L22 35 L20.5 23.5 L9 22 L20.5 20.5 Z' fill='%23dcb44a'/%3E%3C/svg%3E");
}

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
:where(h1, h2, p, dl, dd, figure, table) { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: var(--fs-base);
  line-height: 1.66;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
  background:
    radial-gradient(140% 90% at 50% -20%, #7f2320 0%, var(--oxblood) 46%, var(--oxblood-dk) 100%) fixed,
    var(--oxblood-dk);
}

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

::selection { background: color-mix(in srgb, var(--gilt) 34%, transparent); color: var(--ink); }

/* ---- Accessibility ---------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: 12px;
  z-index: 100;
  background: var(--oxblood);
  color: var(--gilt-lt);
  padding: 10px 16px;
  border: 1px solid var(--gilt);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--sh-2);
  transition: inset-block-start .18s var(--ease);
}
.skip-link:focus { inset-block-start: 12px; }

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

/* ---- The page (bound plate) ------------------------------- */
.sheet {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  margin-block: clamp(10px, 3vw, 34px);
  padding: var(--sp-4) clamp(18px, 5vw, 52px) var(--sp-5);
  color: var(--ink);
  background:
    var(--fleuron) top 12px left 12px / 24px no-repeat,
    var(--fleuron) top 12px right 12px / 24px no-repeat,
    var(--fleuron) bottom 12px left 12px / 24px no-repeat,
    var(--fleuron) bottom 12px right 12px / 24px no-repeat,
    radial-gradient(circle at 18% 26%, rgba(150, 110, 50, .06), transparent 9%),
    radial-gradient(circle at 82% 68%, rgba(150, 110, 50, .05), transparent 8%),
    radial-gradient(circle at 60% 88%, rgba(150, 110, 50, .045), transparent 7%),
    repeating-linear-gradient(0deg, transparent 0 5px, var(--ink-06) 5px 6px),
    linear-gradient(var(--paper), var(--paper2));
  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, multiply, normal;
  border: 2px solid var(--gilt);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--gilt-dk),
    var(--sh-3);
}

/* centred reading measure for prose blocks */
.intro, .lead { max-inline-size: var(--measure); margin-inline: auto; }

/* ---- Ornamental divider ----------------------------------- */
.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-block: var(--sp-3);
  color: var(--gilt);
}
.orn::before, .orn::after {
  content: "";
  block-size: 1px;
  flex: 1;
  max-inline-size: 120px;
  background: linear-gradient(90deg, transparent, var(--gilt-dk));
}
.orn::after { transform: scaleX(-1); }

/* ---- Header / title page ---------------------------------- */
header { text-align: center; }

.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  letter-spacing: .34em;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-block: 4px 10px;
}
.kicker::before, .kicker::after {
  content: "";
  block-size: 1px;
  inline-size: clamp(22px, 12vw, 72px);
  background: linear-gradient(90deg, transparent, var(--gilt));
}
.kicker::after { transform: scaleX(-1); }

h1 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.04;
  letter-spacing: .01em;
  margin-block-end: 6px;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.sub {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--oxblood-lt);
  text-wrap: balance;
}
.sub::after {
  content: "❦";
  display: block;
  margin-block-start: 10px;
  color: var(--gilt);
  font-style: normal;
  font-size: 1.2rem;
}

.lead {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-90);
  padding-block: 18px;
  padding-inline: 12px;
  margin-block: 12px 4px;
  border-block: 1px solid var(--line);
  text-wrap: pretty;
}

/* ---- Intro ------------------------------------------------- */
.intro { margin-block-start: var(--sp-4); }
.intro p { margin-block: 13px; text-wrap: pretty; }
.intro b { color: var(--oxblood); font-variant: small-caps; letter-spacing: .02em; }

/* ---- Map plate -------------------------------------------- */
figure { margin-block: var(--sp-4) var(--sp-2); }
.map {
  inline-size: 100%;
  border: 1px solid var(--gilt-dk);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px var(--plate), var(--sh-2);
  background: var(--paper2);
}

/* ---- Recap — "Index des étapes" --------------------------- */
.recap-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--sp-4) var(--sp-2);
  border: 1px solid var(--gilt-dk);
  border-radius: var(--radius);
  box-shadow: var(--sh-1);
  scrollbar-width: thin;
  scrollbar-color: var(--gilt) transparent;
}
.recap-wrap::-webkit-scrollbar { block-size: 8px; }
.recap-wrap::-webkit-scrollbar-thumb { background: var(--gilt); border-radius: 8px; }

.recap {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-inline-size: 480px;
  background: var(--plate);
}
.recap caption {
  caption-side: top;
  font-family: var(--serif-display);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .06em;
  font-size: var(--fs-md);
  text-align: center;
  padding: 12px 14px 10px;
  color: var(--oxblood);
  background: var(--plate);
}
.recap thead th {
  background: linear-gradient(180deg, #47341d, var(--ink));
  color: var(--gilt-lt);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: start;
  padding: 11px 12px;
  border-block-end: 2px solid var(--gilt);
  box-shadow: inset 0 -1px 0 var(--gilt-dk);
  position: sticky;
  inset-block-start: 0;
  white-space: nowrap;
}
.recap td {
  padding: 10px 12px;
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}
.recap tbody tr:nth-child(even) td { background: var(--zebra); }
.recap tbody tr:hover td { background: var(--row-hover); }
.recap tbody tr:last-child td { border-block-end: none; }
.recap td:first-child {
  font-family: var(--serif-display);
  color: var(--gilt-dk);
  font-weight: 700;
  font-size: var(--fs-md);
  text-align: center;
}
.recap td:nth-child(2) b { color: var(--oxblood); }

/* ---- Stage plates ----------------------------------------- */
#etapes { margin-block-start: var(--sp-2); }

.card {
  margin-block: var(--sp-4);
  background: var(--plate);
  border: 1px solid var(--gilt-dk);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: inset 0 0 0 3px var(--plate), var(--sh-1);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  /* skip offscreen render work on a long document */
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
@media (hover: hover) {
  .card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
  .card:hover .banner { filter: none; }
}

.banner {
  inline-size: 100%;
  aspect-ratio: 5 / 2;          /* matches 1200×480 → zero CLS */
  object-fit: cover;
  margin-block-end: var(--sp-2);
  border: 1px solid var(--gilt-dk);
  border-radius: var(--radius);
  background: var(--paper2);
  filter: sepia(.42) saturate(.85) contrast(.96) brightness(1.02);
  transition: filter .4s var(--ease);
}

/* engraved title plate — set on the parchment, not a coloured bar */
.head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-2) + 7px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(184, 145, 47, .1), transparent 60%),
    linear-gradient(180deg, var(--plate), color-mix(in srgb, var(--plate) 84%, var(--paper2)));
}
/* gilt double-rule with a centred lozenge, drawn under the plate */
.head::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: 0;
  block-size: 3px;
  background:
    linear-gradient(var(--gilt), var(--gilt)) top / 100% 1px no-repeat,
    linear-gradient(var(--gilt-dk), var(--gilt-dk)) bottom / 100% 1px no-repeat;
}
.head > :not(.num) { display: flex; flex-direction: column; min-inline-size: 0; }

/* numeral struck like a coin / wax seal */
.num {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  padding: 4px;                       /* ring thickness */
  font-family: var(--serif-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--oxblood);
  background:
    radial-gradient(circle at 40% 32%, #fffbf0, var(--plate) 70%) content-box,
    conic-gradient(from 210deg, var(--gilt-dk), var(--gilt-lt) 25%, var(--gilt-dk) 50%, var(--gilt-lt) 75%, var(--gilt-dk)) border-box;
  box-shadow:
    inset 0 0 0 1px var(--gilt-dk),
    0 1px 2px rgba(58, 42, 23, .3),
    0 0 0 1px color-mix(in srgb, var(--gilt) 50%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.htag {
  order: -1;                          /* eyebrow above the title */
  font-size: var(--fs-xs);
  font-weight: 700;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood-lt);
  margin-block-end: 2px;
}
.htitle {
  font-family: var(--serif-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.14;
  color: var(--ink);
}

/* body is a query container so inner components adapt to the
   card width, not the viewport */
.body {
  padding: var(--sp-3);
  container-type: inline-size;
  container-name: plate;
}

/* ---- Stats ledger ----------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-block-end: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
  background: var(--paper);
}
.stat {
  padding: 11px 12px;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}
.stat:nth-child(2n) { border-inline-end: none; }
.stat dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inksoft);
  margin-block-end: 3px;
}
.stat dd {
  font-family: var(--serif-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}
@container plate (min-width: 440px) {
  .stats { grid-template-columns: repeat(5, 1fr); }
  .stat { border-block-end: none; border-inline-end: 1px solid var(--line); }
  .stat:last-child { border-inline-end: none; }
}

/* ---- Difficulty seal -------------------------------------- */
.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .03em;
  color: #f7ecd2;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .25);
  white-space: nowrap;
}
.badge.hard { background: linear-gradient(180deg, var(--oxblood-lt), var(--oxblood)); }
.badge.med  { background: linear-gradient(180deg, #b98327, var(--gilt-dk)); }
.badge.easy { background: linear-gradient(180deg, #5a7d47, var(--verd)); }

/* ---- Narrative + ornate drop cap -------------------------- */
.narr { margin-block: 4px var(--sp-3); text-wrap: pretty; }
.narr b { color: var(--oxblood); font-variant: small-caps; letter-spacing: .02em; }
.narr::first-letter {
  float: inline-start;
  font-family: var(--serif-display);
  font-size: 3.6em;
  line-height: .68;
  font-weight: 700;
  color: var(--oxblood);
  padding: .06em .12em 0 0;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--gilt) 40%, transparent);
}

/* ---- Field notes ------------------------------------------ */
.rows { font-size: var(--fs-sm); }
.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-block: 10px;
  border-block-start: 1px dotted var(--line);
}
.row:first-child { border-block-start: none; }
.row .ic {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--paper2);
  border: 1px solid var(--line);
  font-size: .95rem;
  line-height: 1;
}
.row b { color: var(--oxblood); }

/* ---- Callouts --------------------------------------------- */
.safety {
  display: flex;
  gap: 9px;
  margin-block: var(--sp-2);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: #641818;
  background: linear-gradient(180deg, #f4e0d3, #efd4c4);
  border: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent);
  border-inline-start: 4px solid var(--oxblood);
  border-radius: var(--radius);
}
.see {
  margin-block: var(--sp-2);
  padding: 13px 15px;
  font-size: var(--fs-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gilt) 14%, transparent), color-mix(in srgb, var(--gilt) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--gilt-dk) 30%, transparent);
  border-inline-start: 4px solid var(--gilt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.see .lbl { font-weight: 700; color: var(--gilt-dk); font-variant: small-caps; letter-spacing: .04em; }

/* ---- Links ------------------------------------------------- */
.link { margin-block-start: 8px; }
.link a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--link);
  font-style: italic;
  font-size: var(--fs-sm);
  text-decoration: none;
  word-break: break-word;
  background-image: linear-gradient(var(--gilt), var(--gilt));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
}
.link a:hover, .link a:focus-visible { background-size: 100% 1.5px; }

/* ---- GR blanc-rouge blaze --------------------------------- */
.flag {
  display: inline-flex;
  flex-direction: column;
  block-size: 16px;
  inline-size: 27px;
  border: 1px solid var(--ink);
  vertical-align: -3px;
  margin-inline: 4px;
  border-radius: 2px;
  overflow: clip;
  box-shadow: var(--sh-1);
}
.flag span { flex: 1; }
.fw { background: #f7f1e2; }
.fr { background: #b3241f; }

/* ---- Footer ----------------------------------------------- */
.endnote {
  font-family: var(--serif-display);
  text-align: center;
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--oxblood-lt);
  max-inline-size: 46ch;
  margin: var(--sp-5) auto var(--sp-1);
  text-wrap: balance;
}
.endnote::before, .endnote::after {
  content: "❧"; color: var(--gilt); margin-inline: .5em; font-style: normal;
}
.foot {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--inksoft);
  font-style: italic;
  margin: 10px auto 0;
  max-inline-size: 60ch;
}
.credits {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--inksoft);
  margin: 10px auto 0;
  max-inline-size: 62ch;
  line-height: 1.75;
}
.credits a { color: var(--inksoft); text-decoration: underline; text-underline-offset: 2px; }
.credits a:hover, .credits a:focus-visible { color: var(--oxblood); }

/* ---- Install seal ----------------------------------------- */
.install {
  display: none;
  margin: 6px auto 14px;
  padding-inline: 22px;
  min-block-size: var(--tap);
  color: var(--gilt-lt);
  background: linear-gradient(180deg, var(--oxblood-lt), var(--oxblood));
  border: 1px solid var(--gilt);
  border-radius: 999px;
  font-family: var(--serif-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: var(--sh-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.install.show { display: inline-flex; align-items: center; }
.install:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.install:active { transform: translateY(0); }

/* ---- Scroll-driven reveal (progressive enhancement) ------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* only the stage plates (well below the fold) reveal on scroll,
       so above-the-fold content is never caught mid-animation */
    #etapes .card {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover { transform: none; }
}

/* ---- Print ------------------------------------------------- */
@media print {
  body { background: #fff; }
  .sheet {
    box-shadow: none; margin: 0; max-inline-size: none;
    border: none; padding: 10mm; background: #fff;
  }
  .card {
    break-inside: avoid; box-shadow: none;
    border: 1px solid #bbb; transform: none;
    content-visibility: visible;
  }
  .banner { filter: none; }
  .head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip-link, .install { display: none !important; }
  .recap-wrap { overflow: visible; box-shadow: none; }
  .recap { min-inline-size: 0; }
  h1 { font-size: 32px; }
}