* { box-sizing: border-box; }
:root {
  --vl-paper: #fbf6ec;
  --vl-paper-warm: #f5ecd9;
  --vl-ink: #3a2a14;
  --vl-ink-soft: #5a4426;
  --vl-gold: #8b6b1f;
  --vl-gold-soft: #b8923a;
  --vl-choice-bg: #fbf2dc;
  --vl-choice-bar: #b8923a;
  --vl-chip-bg: #efe2bf;
  --vl-chip-border: #d8c48a;
  --vl-rule: #e6dac0;
  --vl-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --vl-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
  font-family: var(--vl-serif);
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25em 1.2em 6.5em;
  line-height: 1.65;
  color: var(--vl-ink);
  background: var(--vl-paper);
}
body.sheet-open { overflow: hidden; }
button { font: inherit; }
/* Header minimal : juste le titre du livre, petit, centré. */
body > header.minimal {
  text-align: center;
  padding: .55em 1em;
  margin: 0 -1.2em 1.1em;
  border-bottom: 1px solid var(--vl-rule);
  background: var(--vl-paper);
}
body > header.minimal a {
  font-family: var(--vl-serif);
  font-style: italic;
  font-size: .9em;
  color: var(--vl-gold-soft);
  text-decoration: none;
  letter-spacing: .03em;
}
body > header.minimal a:hover { color: var(--vl-gold); }
.reader { position: relative; }
article h1.sectnum {
  font-size: 2.55em;
  text-align: center;
  margin: .65em 0 .85em;
  color: #5a3a10;
  letter-spacing: .08em;
}
article h2.sectname {
  font-size: 1.3em;
  text-align: center;
  margin-top: -0.4em;
  margin-bottom: 1.5em;
  font-style: italic;
  color: #5a3a10;
}
p { margin: .5em 0 .8em; }
p.choice { margin: .35em 0; }
ul.choices { list-style: none; padding-left: 0; margin: 1em 0; }
ul.choices li {
  border-left: 4px solid var(--vl-choice-bar);
  margin: .55em 0;
  background: var(--vl-choice-bg);
  border-radius: 4px;
  transition: opacity .2s, background .2s;
}
ul.choices li .choice-link {
  display: flex;
  align-items: center;
  gap: .6em;
  min-height: 48px;
  padding: .75em 1em;
  color: var(--vl-gold);
  font-weight: bold;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(90, 58, 16, .12);
}
ul.choices li .choice-body { flex: 1 1 auto; min-width: 0; }
ul.choices li .choice-chevron {
  flex: 0 0 auto;
  font-size: 1.5em;
  line-height: 1;
  color: var(--vl-gold-soft);
}
ul.choices li .choice-link:hover { background: var(--vl-chip-bg); }
ul.choices li .choice-link:active { background: var(--vl-chip-bg); transform: scale(.995); }
ul.choices li .choice-text { color: var(--vl-ink, #2a1f08); font-weight: 600; }

/* Choix verrouillé : grisé et désactivé */
ul.choices li.locked {
  opacity: .55;
  background: #ece5d0;
  border-left-color: #999;
  cursor: not-allowed;
}
ul.choices li.locked .choice-link {
  color: #7a6a4a;
  pointer-events: none;
  cursor: not-allowed;
}
ul.choices li.locked .choice-text { color: #7a6a4a; }
ul.choices li.locked .choice-chevron {
  font-size: 0;
  color: #806a3a;
}
ul.choices li.locked .choice-chevron::before {
  content: "⛔";
  font-size: 18px;
  line-height: 1;
}

ul.choices .req-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25em;
  margin-left: .5em;
  vertical-align: middle;
}
ul.choices .req {
  display: inline-block;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .1em .55em;
  border-radius: 10px;
  border: 1px solid var(--vl-chip-border);
  background: var(--vl-chip-bg);
  color: var(--vl-ink-soft);
  white-space: nowrap;
}
ul.choices .req-skill   { border-color: #b9842f; color: #6a4310; }
ul.choices .req-object  { border-color: #6a8a3a; color: #3d5710; }
ul.choices .req-keyword { border-color: #8a5a8a; color: #4a2a55; }

.keyword { font-weight: bold; color: #5a3a0a; }
blockquote {
  font-style: italic;
  margin: 1em 1.5em;
  padding: .4em 1em;
  border-left: 3px solid var(--vl-gold-soft);
  background: var(--vl-paper-warm);
  color: var(--vl-ink-soft);
}

nav.bottom {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--vl-rule);
  display: flex;
  justify-content: space-between;
  font-size: .95em;
}
nav.bottom a {
  color: var(--vl-gold);
  text-decoration: none;
  padding: .3em .6em;
  border: 1px solid var(--vl-chip-border);
  border-radius: 3px;
  background: var(--vl-choice-bg);
}
nav.bottom a:hover { background: var(--vl-chip-bg); }
nav.bottom .center { text-align: center; flex-grow: 1; padding: 0 .5em; }

a { color: var(--vl-gold); }

table { border-collapse: collapse; margin: 1em 0; width: 100%; }
th, td { border: 1px solid var(--vl-chip-border); padding: .4em .6em; text-align: left; }
th { background: var(--vl-chip-bg); }

.fab-sheet {
  position: fixed;
  right: 18px;
  bottom: max(22px, calc(16px + env(safe-area-inset-bottom, 0px)));
  z-index: 70;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--vl-ink);
  color: var(--vl-paper);
  box-shadow: 0 10px 24px rgba(58,42,20,.35), 0 2px 4px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.fab-sheet:active {
  transform: scale(.96);
  box-shadow: 0 5px 14px rgba(58,42,20,.3), 0 1px 3px rgba(0,0,0,.18);
}
.fab-sheet svg { display: block; }

.sheet-layer[hidden] { display: none; }
.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.sheet-layer.is-open { pointer-events: auto; }
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20,15,8,.45);
  opacity: 0;
  transition: opacity 180ms linear;
}
.sheet-layer.is-open .sheet-scrim { opacity: 1; }
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--vl-paper);
  color: var(--vl-ink);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 14px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  outline: none;
}
.sheet-layer.is-open .sheet { transform: translateY(0); }
.sheet-grabber {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--vl-rule);
  margin: 0 auto 14px;
  touch-action: none;
  cursor: grab;
}
.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sheet-title-wrap { flex: 1; min-width: 0; }
.sheet-title {
  font-size: 1.45em;
  line-height: 1.15;
  margin: 0;
  color: var(--vl-ink);
  font-weight: 700;
}
.sheet-context {
  margin: .15em 0 0;
  font-size: .95em;
  line-height: 1.3;
  color: var(--vl-gold-soft);
  font-style: italic;
}
.sheet-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--vl-rule);
  background: transparent;
  color: var(--vl-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sheet-rule {
  height: 1px;
  background: var(--vl-rule);
  margin-bottom: 14px;
}
.sheet-block { margin-bottom: 14px; }
.sheet-block h3 {
  margin: 0 0 6px;
  font-family: var(--vl-ui);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vl-gold-soft);
  font-weight: 600;
}
.sheet-chips,
.sheet-keywords,
.sheet-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sheet-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--vl-chip-bg);
  border: 1px solid var(--vl-chip-border);
  color: #5a3a10;
  font-weight: 600;
  line-height: 1.25;
}
.sheet-empty {
  color: var(--vl-gold-soft);
  font-style: italic;
  font-size: 1em;
}
.sheet-object-list {
  display: grid;
  gap: 7px;
}
.sheet-object {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--vl-ink-soft);
  line-height: 1.35;
}
.sheet-leaf {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: .1em;
  color: var(--vl-gold);
}
.sheet-object-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.sheet-object-kind {
  font-family: var(--vl-ui);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vl-gold);
  border: 1px solid var(--vl-chip-border);
  border-radius: 4px;
  padding: 2px 5px;
}
.sheet-keyword {
  font-family: var(--vl-ui);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(184,146,58,.15);
  border: 1px solid var(--vl-chip-border);
  color: #5a3a10;
}
.sheet-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--vl-rule);
  color: var(--vl-ink-soft);
  font-family: var(--vl-ui);
  font-size: 14px;
  line-height: 1.25;
}
.sheet-state.is-active {
  background: var(--vl-chip-bg);
  border-color: var(--vl-chip-border);
  color: #5a3a10;
}
.sheet-state-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid var(--vl-rule);
  flex: 0 0 10px;
}
.sheet-state.is-active .sheet-state-box {
  background: #5a3a10;
  border-color: #5a3a10;
}
.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.sheet-actions button {
  min-width: 0;
  min-height: 48px;
  flex: 1 1 0;
  padding: 11px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--vl-serif);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.sheet-menu {
  border: 1px solid var(--vl-ink);
  background: var(--vl-ink);
  color: var(--vl-paper);
}
.sheet-resume {
  border: 1px solid var(--vl-gold);
  background: transparent;
  color: #5a3a10;
}

@media (min-width: 760px) {
  .sheet {
    left: 50%;
    right: auto;
    max-width: 760px;
    transform: translate(-50%, 100%);
  }
  .sheet-layer.is-open .sheet { transform: translate(-50%, 0); }
  .fab-sheet { right: max(18px, calc((100vw - 760px) / 2 + 18px)); }
}

@media (prefers-reduced-motion: reduce) {
  .fab-sheet,
  .sheet-scrim,
  .sheet {
    transition: none;
  }
}

.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: .35em;
  margin: 1em 0;
}
.toc-grid a {
  display: block;
  text-align: center;
  padding: .35em 0;
  border: 1px solid var(--vl-chip-border);
  border-radius: 3px;
  background: var(--vl-choice-bg);
  color: var(--vl-gold);
  text-decoration: none;
  font-weight: bold;
}
.toc-grid a:hover { background: var(--vl-chip-bg); }
.toc-grid a.ending { background: #ead9a6; border-color: var(--vl-gold-soft); }
.toc-grid a.visited { background: #d8c987; }

hr { border: none; border-top: 1px solid var(--vl-rule); margin: 1.5em 0; }

/* Setup page */
#setup-skill-list { list-style: none; padding: 0; }
#setup-skill-list li {
  padding: .8em 1em;
  margin: .4em 0;
  background: var(--vl-choice-bg);
  border: 1px solid var(--vl-chip-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
}
#setup-skill-list li:hover { background: var(--vl-chip-bg); }
#setup-skill-list li.selected {
  background: var(--vl-chip-bg);
  border-color: var(--vl-gold);
  border-width: 2px;
  padding: calc(.8em - 1px) calc(1em - 1px);
}
#setup-skill-list label { cursor: pointer; display: block; }
#setup-skill-list input { margin-right: .8em; }
#setup-skill-list small { display: block; margin-top: .3em; color: var(--vl-ink-soft); font-style: italic; }
.big-btn {
  display: inline-block;
  padding: .7em 1.5em;
  background: var(--vl-ink);
  color: var(--vl-paper) !important;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1.1em;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin: .4em;
}
.big-btn:hover { background: #5a3a10; }
.big-btn:disabled { background: #aaa; cursor: not-allowed; }
.big-btn.secondary { background: transparent; color: var(--vl-gold) !important; border: 2px solid var(--vl-gold); }
.big-btn.secondary:hover { background: var(--vl-chip-bg); }
.center { text-align: center; }

/* Splash d'accueil */
/* On masque le header sur la page splash : le titre est dans la couverture. */
body.splash-page > header { display: none; }
body.splash-page > article { padding-top: 0; }

/* Carte (page dédiée) */
.carte-figure {
  margin: 0;
  text-align: center;
}
.carte-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 8px 26px rgba(58,42,20,.18);
}

/* Bloc Carte des Jardins dans la fiche d'aventure */
.sheet-map-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 2px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--vl-choice-bg) 0%, var(--vl-chip-bg) 100%);
  border: 1px solid var(--vl-chip-border);
  color: var(--vl-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(90, 58, 16, .12);
  transition: transform .08s ease, background .15s ease;
}
.sheet-map-card:hover { background: linear-gradient(135deg, var(--vl-chip-bg) 0%, var(--vl-choice-bg) 100%); }
.sheet-map-card:active { transform: scale(.995); }
.sheet-map-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--vl-paper);
  border: 1px solid var(--vl-chip-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vl-gold);
}
.sheet-map-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sheet-map-title {
  font-family: var(--vl-serif);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--vl-ink);
  line-height: 1.2;
}
.sheet-map-subtitle {
  font-family: var(--vl-serif);
  font-style: italic;
  font-size: .85em;
  color: var(--vl-gold-soft);
  line-height: 1.2;
}
.sheet-map-chevron {
  flex: 0 0 auto;
  font-family: var(--vl-serif);
  font-size: 1.3em;
  color: var(--vl-gold-soft);
  line-height: 1;
}

.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding-top: .5em;
}
.splash-cover {
  margin: 0 0 .25em;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #efe2bf 0%, #d8c48a 50%, #8b6b1f 100%);
  box-shadow: 0 10px 30px rgba(58,42,20,.25), inset 0 0 0 1px rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.splash-title {
  font-family: var(--vl-serif);
  font-size: 2.1em;
  text-align: center;
  margin: .3em 0 0;
  color: #5a3a10;
  font-variant: small-caps;
  letter-spacing: .04em;
  line-height: 1.1;
}
.splash-subtitle {
  margin: .15em 0 .4em;
  font-style: italic;
  color: var(--vl-gold-soft);
  text-align: center;
}
.splash-status {
  text-align: center;
  font-size: .95em;
  color: var(--vl-ink-soft);
  margin: .3em 0 .5em;
  min-height: 1.2em;
}
.splash-actions {
  display: flex;
  flex-direction: column;
  gap: .55em;
  width: 100%;
  max-width: 360px;
}
.splash-actions .big-btn {
  margin: 0;
  text-align: center;
  font-size: 1.05em;
  padding: .85em 1em;
}
.profile-list {
  list-style: none;
  padding: 0;
}
.profile-list li {
  padding: .6em .9em;
  margin: .35em 0;
  background: var(--vl-choice-bg);
  border-left: 3px solid var(--vl-choice-bar);
}
.profile-list li.locked-skill {
  background: #ece5d0;
  opacity: .6;
  border-left-color: #999;
}
.profile-list li.locked-skill::after {
  content: " — à acquérir";
  font-style: italic;
  font-size: .9em;
  color: var(--vl-ink-soft);
}
.profile-list li.acquired::before {
  content: "✓ ";
  color: #4a7a08;
  font-weight: bold;
}
.notice {
  background: var(--vl-chip-bg);
  border: 1px solid var(--vl-chip-border);
  padding: .8em 1em;
  border-radius: 4px;
  margin: 1em 0;
}