/* =============================================================================
   KDESANTIAGO — Le Grimoire du Marchand
   Direction 01 portée en site statique (Spice & Wolf × Dark Souls).
   Tous les tokens de design sont centralisés ici (custom properties).
   ========================================================================== */

:root {
  /* — Encre & parchemin — */
  --ink: #2b2622;
  --paper: #f4efe4;
  --paper-alt: #efe7d4;
  --paper-alt2: #ece1c8;
  --paper-card: #faf6ec;
  --paper-chip: #f7f2e7;

  /* — Ambre (accent principal) — */
  --amber: #b07c2f;
  --amber-mid: #b88a4e;
  --amber-soft: #e3b873;

  /* — Rose poudré (accent secondaire) — */
  --rose-border: #c79296;
  --rose-bg: #f4e7e3;
  --rose-text: #6d3d44;
  --rose-title: #b06a72;
  --rose-pin: #bd8086;

  /* — Post-it — */
  --postit-bg: #fbf2dc;
  --postit-border: #d4a13c;

  /* — Sombre (footer / toolbar) — */
  --dark: #221d18;
  --dark-2: #120f0c;
  --dark-amber: #e3b873;
  --dark-muted: #a99a82;

  /* — Placeholders & traits — */
  --ph-1: #ddd2ba;
  --ph-2: #d8c9a6;
  --ph-3: #cbb892;
  --rule: #e0d5bd;
  --muted: #7a6a54;
  --muted-2: #7a6b4f;

  /* — Typo — */
  --f-hand: 'Kalam', cursive;
  --f-note: 'Caveat', cursive;
  --f-body: 'Spline Sans', system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* — Rayons & ombres — */
  --r-card: 6px;
  --r-chip: 20px;
  --r-btn: 5px;
  --shadow-card: 0 14px 40px rgba(40, 30, 15, .18);
  --shadow-soft: 0 6px 16px rgba(40, 30, 15, .12);
  --shadow-pop: 0 14px 30px rgba(40, 30, 15, .34);

  /* — Rythme — */
  --pad-x: 48px;
  --maxw: 1140px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* halo de parchemin derrière la carte */
  background:
    radial-gradient(60% 50% at 20% 0%, #efe7d6, transparent 60%),
    radial-gradient(70% 60% at 90% 100%, #e3dccb, transparent 60%),
    #e7e0d2;
  background-attachment: fixed;
}
::selection { background: var(--amber-soft); color: var(--ink); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--dark); color: var(--dark-amber);
  padding: 8px 14px; border-radius: var(--r-btn);
  font-family: var(--f-mono); font-size: 12px; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* Visibilité du focus clavier, partout, sans casser l'esthétique souris */
:focus-visible {
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Carte : double anneau (parchemin + ambre) pour rester visible sur le dégradé */
.pin:focus-visible,
.cart:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--amber);
}

/* =============================================================================
   ENVELOPPE — le grand parchemin
   ========================================================================== */
.grimoire {
  max-width: var(--maxw);
  margin: 40px auto 90px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.band {
  padding: 34px var(--pad-x);
  border-top: 2px solid var(--rule);
}
.band__head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 8px;
}

.section-title {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 14px;
  line-height: 1.1;
}
.section-title--amber { color: var(--amber); }
.section-title--rose { color: var(--rose-title); margin-bottom: 0; }
.muted-mono {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .02em;
}

/* =============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: 46px var(--pad-x) 30px;
  overflow: hidden;
  background:
    radial-gradient(95% 85% at 12% 120%, #ecdcd6, transparent 58%),
    radial-gradient(120% 95% at 84% -18%, #f6e8c9, #f1e7d2 52%, #ece1c8);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 30px;
  align-items: center;
}
.overline {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--amber);
  margin: 0;
}
.hero__name {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 66px);
  line-height: 1;
  margin: 10px 0 6px;
  letter-spacing: -.5px;
}
.hero__role {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--f-mono);
  letter-spacing: .04em;
  margin: 0;
  max-width: 560px;
}
.postit {
  display: inline-block;
  margin: 22px 0 0;
  transform: rotate(-1.4deg);
  font-family: var(--f-note);
  font-size: 19px;
  line-height: 1.32;
  color: #6f5226;
  background: var(--postit-bg);
  border: 1.5px dashed var(--postit-border);
  border-radius: var(--r-card);
  padding: 11px 15px;
  max-width: 320px;
  box-shadow: var(--shadow-soft);
}

/* Portrait kitsune (easter-egg) */
.hero__portrait-slot {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 40px;
}
.portrait {
  position: relative;
  width: 240px; height: 330px;
  padding: 0; margin: 0;
  background: none; border: none; cursor: pointer;
  animation: appear .5s cubic-bezier(.2, .7, .2, 1);
}
.portrait[hidden] { display: none; }
.portrait__halo {
  position: absolute; inset: 0;
  background: radial-gradient(56% 44% at 50% 38%, rgba(212, 150, 60, .22), transparent 70%);
}
.portrait__shadow {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  width: 150px; height: 24px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(50, 32, 16, .34), transparent);
}
.portrait__face {
  position: absolute; inset: 0;
  background: var(--portrait-src) center bottom / contain no-repeat;
  transition: opacity .12s ease;
}

/* Ligne du loup */
.wolf-lane {
  position: relative;
  height: 50px;
  margin-top: 14px;
  width: 560px;
  max-width: 100%;
}
.wolf-lane__rule {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--ph-3);
}
.wolf {
  position: absolute;
  bottom: -4px;
  left: 4%;
  padding: 0; background: none; border: none;
  cursor: pointer; z-index: 3;
  transition: left var(--wolf-dur, 0s) linear;
}
.wolf__sprite {
  display: block;
  width: 48px; height: 52px;
  transform: scaleX(var(--wolf-face, 1));
  background: url('../img/wolf-walk.png') 0 0 no-repeat;
  background-size: 192px 52px;
}
.wolf.is-walking .wolf__sprite {
  animation: walkH 1s steps(4) infinite;
}
.wolf__bubble {
  position: absolute;
  bottom: 58px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #faf6ec;
  border: 1.5px solid var(--ink);
  border-radius: 9px;
  padding: 5px 11px;
  font-family: var(--f-note);
  font-size: 16px;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(40, 30, 15, .22);
  animation: appear .22s ease;
}
.wolf__bubble[hidden] { display: none; }
.wolf__bubble::after {
  content: "";
  position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: #faf6ec;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

/* =============================================================================
   LE VOYAGEUR (bio)
   ========================================================================== */
.bio {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
}
.bio__drop {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 64px;
  line-height: .8;
  color: var(--ink);
}
.bio__body {
  margin: 0;
  padding-top: 6px;
  font-size: 16px;
  line-height: 1.7;
  color: #4a4036;
  max-width: 64ch;
}

/* =============================================================================
   L'INVENTAIRE
   ========================================================================== */
.band--inventory { background: var(--paper-alt); }
.inventory {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 6px;
}
.inv-group__label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.inv-group--rose .inv-group__label { color: var(--rose-title); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1.5px solid var(--ink);
  border-radius: var(--r-chip);
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--f-hand);
  background: var(--paper-chip);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.inv-group--rose .chip {
  border-color: var(--rose-border);
  background: var(--rose-bg);
  color: var(--rose-text);
}

/* =============================================================================
   LA ROUTE DES MARCHANDISES — carte + charriot
   ========================================================================== */
.map {
  position: relative;
  height: 150px;
  margin: 8px 0 16px;
  background: radial-gradient(110% 150% at 18% 0%, #ecdcd6, #f3e6d0 50%, #ecdfc6);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-card);
  overflow: visible;
}
.map__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pins { position: absolute; inset: 0; }

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; padding: 0;
  cursor: pointer; z-index: 3;
}
.pin__dot {
  width: 13px; height: 13px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--amber-mid);
  border: 1.5px solid var(--ink);
  transition: transform .2s ease, background .2s ease;
}
.pin:hover .pin__dot,
.pin:focus-visible .pin__dot,
.pin.is-active .pin__dot {
  transform: rotate(-45deg) scale(1.35);
  background: var(--rose-pin);
}
.pin__label {
  font-family: var(--f-hand);
  font-size: 10px;
  color: #5d5346;
  margin-top: 7px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* charriot du marchand */
.cart {
  position: absolute;
  left: 4%; top: 78px;
  width: 46px; height: 36px;
  padding: 0; background: none; border: none;
  cursor: pointer; z-index: 4;
  transition: left .85s cubic-bezier(.45, .05, .2, 1),
              top .85s cubic-bezier(.45, .05, .2, 1);
}
.cart__body {
  position: relative; display: block;
  width: 46px; height: 36px;
  animation: bob 1.3s ease-in-out infinite;
}
.cart__canopy {
  position: absolute; left: 7px; top: 0;
  width: 30px; height: 17px;
  border-radius: 13px 13px 3px 3px;
  background: repeating-linear-gradient(90deg, #cf9a9d, #cf9a9d 4px, #f1e2dd 4px, #f1e2dd 8px);
  border: 1.5px solid #b88a8d;
}
.cart__chassis {
  position: absolute; left: 5px; top: 16px;
  width: 34px; height: 8px;
  background: #9a6a3c; border: 1.5px solid #7c5430; border-radius: 2px;
}
.cart__shaft {
  position: absolute; left: 37px; top: 20px;
  width: 10px; height: 2px;
  background: #7c5430; transform: rotate(-8deg);
}
.cart__wheel {
  position: absolute; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #5e3f22; background: #8a5e35;
  animation: spin 1.3s linear infinite;
}
.cart__wheel--back { left: 9px; }
.cart__wheel--front { left: 25px; }

/* fiche de quête (pop-up) */
.fiche {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 214px; z-index: 8;
  background: #faf6ec;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  padding: 11px;
  animation: appear .22s ease;
}
.fiche[hidden] { display: none; }
.fiche__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.fiche__kicker {
  font-family: var(--f-mono);
  font-size: 8.5px; letter-spacing: .16em;
  color: var(--rose-title);
}
.fiche__close {
  background: none; border: none; cursor: pointer;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--muted); line-height: 1; padding: 0 3px;
}
.fiche__close:hover { color: var(--ink); }
.fiche__title {
  font-family: var(--f-hand); font-weight: 700;
  font-size: 16px; margin: 0 0 8px;
}
.fiche__body { display: flex; gap: 9px; }
.fiche__shot {
  width: 66px; height: 46px; flex: none;
  border: 1.5px dashed #b3a890;
  background: repeating-linear-gradient(45deg, #ece3d1, #ece3d1 6px, #e4d9c2 6px, #e4d9c2 12px);
  border-radius: 3px;
  background-size: cover; background-position: center;
}
.fiche__shot.has-img { border-style: solid; }
.fiche__blurb {
  flex: 1; min-width: 0; margin: 0;
  font-size: 11px; line-height: 1.45; color: #5d5346;
}
.fiche__actions { display: flex; gap: 6px; margin-top: 9px; }
.fiche__actions a {
  border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 3px 10px; font-size: 9px;
  font-family: var(--f-mono); background: var(--paper-chip);
  text-decoration: none; color: var(--ink);
  transition: background .15s ease;
}
.fiche__actions a:hover { background: var(--amber-soft); }
.fiche__beak {
  position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 13px; height: 13px; background: #faf6ec;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

/* cartes projet + animaux */
.cards-wrap { position: relative; }
.critters { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.critter {
  position: absolute;
  width: 40px;
  transform: translate(-50%, -50%) scaleX(var(--face, 1));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 160px auto;
  transition: left var(--dur, 0s) linear, top var(--dur, 0s) linear;
}
.critter.is-walking { animation: walkC .9s steps(4) infinite; }

.cards {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.card {
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: var(--paper-card);
  padding: 12px;
  display: flex; gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.card__shot {
  width: 78px; height: 62px; flex: none;
  border: 1.5px dashed #b3a890;
  background: repeating-linear-gradient(45deg, #ece3d1, #ece3d1 7px, #e4d9c2 7px, #e4d9c2 14px);
  border-radius: 3px;
  background-size: cover; background-position: center;
}
.card__shot.has-img { border-style: solid; }
.card__main { flex: 1; min-width: 0; }
.card__title {
  font-family: var(--f-hand); font-weight: 700;
  font-size: 15px; margin: 0 0 6px;
}
/* Titre de projet cliquable (carte + fiche) */
.title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.title-link::after {
  content: " \2197"; /* ↗ */
  font-size: .78em;
  color: var(--amber);
  vertical-align: .04em;
}
.title-link:hover,
.title-link:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
}
.card__blurb {
  margin: 0; font-size: 13px; line-height: 1.45;
  color: #5d5346;
}
.card__stack {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.card__tag {
  font-size: 9px; font-family: var(--f-mono);
  color: var(--muted-2);
  border: 1px solid #cbbfa6; border-radius: 3px;
  padding: 2px 6px;
}
.card__actions { display: flex; gap: 6px; margin-top: 9px; }
.card__actions a {
  border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 3px 9px; font-size: 10px;
  font-family: var(--f-mono); background: var(--paper-chip);
  text-decoration: none; color: var(--ink);
  transition: background .15s ease;
}
.card__actions a:hover { background: var(--amber-soft); }

/* =============================================================================
   LA ROUTE PARCOURUE + LE REGISTRE
   ========================================================================== */
.ledger {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.ledger__journey {
  padding: 30px 40px;
  border-right: 2px solid var(--rule);
}
.ledger__registry {
  padding: 30px 40px;
  background: var(--paper-alt);
}
.band--ledger { padding: 0; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.timeline li { display: flex; gap: 14px; }
.timeline__dot {
  width: 12px; height: 12px; border-radius: 50%;
  margin-top: 5px; flex: none;
  background: var(--ph-3);
  box-shadow: 0 0 0 3px rgba(203, 184, 146, .25);
}
.timeline li:first-child .timeline__dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(176, 124, 47, .22); }
.timeline__meta { flex: 1; }
.timeline__year {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--amber);
}
.timeline__title {
  font-family: var(--f-hand); font-weight: 700;
  font-size: 16px; margin: 2px 0 2px;
}
.timeline__desc { margin: 0; font-size: 13px; line-height: 1.5; color: #5d5346; }

.contrib {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  margin: 14px 0;
}
.contrib span {
  aspect-ratio: 1; border-radius: 2px;
  background: var(--ph-2);
}
.contrib span[data-lvl="0"] { background: #e7dcc4; }
.contrib span[data-lvl="1"] { background: #ddca9c; }
.contrib span[data-lvl="2"] { background: #cda85f; }
.contrib span[data-lvl="3"] { background: var(--amber); }
.registry__stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--muted-2); margin: 0;
}
.registry__stats strong { color: var(--amber); font-weight: 600; }

/* =============================================================================
   CONTACT (footer)
   ========================================================================== */
.contact {
  padding: 32px var(--pad-x) 56px;
  border-top: 2px solid var(--ink);
  background:
    radial-gradient(80% 120% at 90% 120%, #2c2419, transparent 60%),
    var(--dark);
  color: var(--paper);
}
.contact__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.contact__title {
  font-family: var(--f-hand); font-weight: 700;
  font-size: 22px; color: var(--dark-amber); margin: 0;
}
.contact__links { display: flex; gap: 16px; margin-top: 8px; }
.contact__links a {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--dark-muted); text-decoration: none;
  letter-spacing: .02em;
  transition: color .15s ease;
}
.contact__links a:hover { color: var(--dark-amber); }
.btn-cv {
  border: 1.5px solid var(--dark-amber);
  color: var(--dark-amber);
  border-radius: var(--r-btn);
  padding: 10px 20px;
  font-family: var(--f-hand); font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.btn-cv:hover { background: var(--dark-amber); color: var(--dark); }

/* =============================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appear { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes walkH { from { background-position-x: 0; } to { background-position-x: -192px; } }
@keyframes walkC { from { background-position-x: 0; } to { background-position-x: -160px; } }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  :root { --pad-x: 30px; }
  .grimoire { margin: 20px auto 60px; border-radius: 5px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__portrait-slot { order: -1; justify-content: flex-start; }
  .inventory { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .ledger__journey { border-right: none; border-bottom: 2px solid var(--rule); }
  .contrib { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 560px) {
  :root { --pad-x: 20px; }
  body { background-attachment: scroll; }
  .grimoire { margin: 0; border-left: none; border-right: none; border-radius: 0; }
  .hero { padding: 34px var(--pad-x) 24px; }
  .pin__label { font-size: 9px; max-width: 58px; }
  .fiche { width: min(214px, calc(100vw - 28px)); }
  .contact__inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   MOUVEMENT RÉDUIT — on fige les sprites & boucles, on garde le contenu
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wolf, .cart, .critter { transition: none; }
  .wolf.is-walking .wolf__sprite,
  .critter.is-walking,
  .cart__body, .cart__wheel,
  .portrait, .fiche, .wolf__bubble {
    animation: none !important;
  }
}