/* ==========================================================================
   Quo Fuit · fiches publiques (/p/<slug>, /people)
   Même table de cartographe que la landing : papier chaud, encres, mono minuscule.
   Aucun script : ces pages doivent être lisibles et rapides pour tout le monde.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600&display=swap");

:root {
  color-scheme: light;
  --paper: #f5f3ec;
  --paper-deep: #edeae0;
  --card: #fffdf8;
  --ink: #23262a;
  --ink-2: #5b6167;
  --ink-3: #8b9096;
  --line: #00000018;
  --line-2: #00000030;
  --teal: #0e9d77;
  --teal-soft: #0e9d7714;
  --amber: #b8860b;
  --orange: #c65f2e;
  --serif: "Spectral", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow: 0 1px 2px #0000000a, 0 10px 28px -16px #00000038;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--paper);
  background-image: radial-gradient(#00000014 1px, transparent 1.1px);
  background-size: 26px 26px;
  color: var(--ink);
  font: 400 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
main a:not(.btn):not(.chip):not(.rel-card) { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
img { max-width: 100%; }

/* ===== barre ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 22px; background: #f5f3ecec; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand img { display: block; width: 116px; }
.topbar nav { display: flex; align-items: center; gap: 18px; font: 500 12px var(--mono); letter-spacing: 0.03em; }
.topbar nav a { color: var(--ink-2); }
.topbar nav a:hover { color: var(--teal); }
.btn {
  display: inline-block; padding: 8px 15px; border-radius: 7px;
  background: var(--teal); color: #fff !important; border: 1px solid #0b8a68;
  font: 500 12px var(--mono); letter-spacing: 0.03em; text-decoration: none !important;
}
.btn:hover { background: #0b8a68; }
.btn.ghost { background: transparent; color: var(--ink) !important; border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--teal); color: var(--teal) !important; }

/* ===== page ===== */
.wrap { max-width: 880px; margin: 0 auto; padding: 30px 22px 72px; }
.crumb { font: 500 11px var(--mono); letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 22px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--teal); }
h1 { font: 400 40px/1.15 var(--serif); letter-spacing: -0.015em; margin-bottom: 8px; }
h2 {
  font: 600 11px var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal); margin: 46px 0 14px; scroll-margin-top: 70px;
}
h3 { font: 500 17px var(--serif); margin-bottom: 6px; }
p { margin-bottom: 12px; color: var(--ink-2); }

.strip {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  font: 500 11px var(--mono); letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 20px;
}
.strip b { color: var(--ink); font-weight: 600; }
.strip span { display: inline-flex; align-items: center; gap: 5px; }
.strip span + span::before { content: "·"; color: var(--line-2); margin-right: 5px; }

.lede { font: 300 18px/1.6 var(--serif); color: var(--ink); margin-bottom: 18px; }
blockquote.wiki {
  border-left: 2px solid var(--teal); background: var(--teal-soft);
  padding: 13px 17px; border-radius: 0 7px 7px 0; margin-bottom: 8px;
  font: 300 15px/1.65 var(--serif); color: var(--ink-2);
}
blockquote.wiki cite {
  display: block; margin-top: 8px; font: 500 10px var(--mono);
  letter-spacing: 0.06em; color: var(--ink-3); font-style: normal;
}

/* ===== carte statique ===== */
figure.qmap { margin: 24px 0 8px; }
.qmap-frame {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #0b1a2b;
  /* Rapport 2:1 de la projection équirectangulaire, réservé d'avance : les tuiles
     arrivent sans faire sauter la page (le décalage de mise en page est mesuré). */
  aspect-ratio: 2 / 1;
}
.qmap-base { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; }
.qmap-base img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qmap-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.qmap-dots .trail { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-opacity: 0.34; stroke-linejoin: round; }
.qmap-dots .pin { fill: #16c795; stroke: #04231a; stroke-width: 1.2; }
.qmap-dots .halo { fill: #16c7952e; stroke: #16c795; stroke-width: 1.4; stroke-opacity: 0.6; }
figure.qmap figcaption { font: 400 12px var(--mono); color: var(--ink-3); margin-top: 9px; letter-spacing: 0.02em; }

/* ===== chronologie ===== */
.tl { display: grid; gap: 0; border-top: 1px solid var(--line); }
.tl-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 6px 18px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.tl-when { font: 500 12px var(--mono); color: var(--ink); letter-spacing: 0.02em; padding-top: 2px; }
.tl-when i { display: block; font: 400 10px var(--mono); font-style: normal; color: var(--ink-3); margin-top: 3px; letter-spacing: 0.05em; }
.tl-what .place { font: 500 15px var(--sans); color: var(--ink); }
.tl-what .quote { display: block; margin-top: 5px; font: 300 14px/1.55 var(--serif); color: var(--ink-2); }
.tl-what .src { display: block; margin-top: 5px; font: 400 11px var(--mono); color: var(--ink-3); }
.tl-what .src a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.tl-what .src a:hover { color: var(--teal); }
.tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 20px;
  border: 1px solid var(--line-2); font: 500 9px var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); vertical-align: 2px;
}
.tag.high { color: #0b8a68; border-color: #0e9d7755; background: var(--teal-soft); }
.tag.medium { color: var(--amber); border-color: #b8860b44; }
.tag.low { color: var(--ink-3); }
.more { margin-top: 16px; font: 400 13px var(--sans); color: var(--ink-2); }

/* ===== lieux ===== */
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; }
.place-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 12px 14px; text-decoration: none !important;
}
a.place-card:hover { border-color: var(--teal); box-shadow: var(--shadow); }
a.place-card b { color: var(--ink); }
.place-card b { display: block; font: 500 14px var(--sans); color: var(--ink); }
.place-card span { font: 400 11px var(--mono); color: var(--ink-3); letter-spacing: 0.03em; }

/* ===== voisins ===== */
.rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }
.rel-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 12px 14px; text-decoration: none !important;
}
.rel-card:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.rel-card b { display: block; font: 500 15px var(--serif); color: var(--ink); }
.rel-card span { font: 400 11px var(--mono); color: var(--ink-3); letter-spacing: 0.03em; }

/* ===== notes, doctrine, appel ===== */
.note { font: 400 13px/1.6 var(--sans); color: var(--ink-3); margin-top: 12px; }
.doctrine {
  margin-top: 46px; padding: 18px 20px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
}
.doctrine h2 { margin-top: 0; }
.doctrine p:last-child { margin-bottom: 0; }
.callout {
  margin-top: 34px; padding: 26px 24px; border-radius: 12px; text-align: center;
  background: var(--paper-deep); border: 1px solid var(--line);
}
.callout p { max-width: 46ch; margin: 0 auto 16px; }

/* ===== index ===== */
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip {
  display: inline-block; min-width: 30px; text-align: center; padding: 5px 9px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--card);
  font: 500 12px var(--mono); color: var(--ink-2); text-decoration: none !important;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.off { opacity: 0.35; pointer-events: none; }
.roster { columns: 3 210px; column-gap: 26px; }
.roster a { display: block; break-inside: avoid; padding: 4px 0; font-size: 14px; color: var(--ink) !important; text-decoration: none !important; }
.roster a:hover { color: var(--teal) !important; }
.roster a em { font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); }
.pager { display: flex; gap: 10px; margin-top: 24px; font: 500 12px var(--mono); }

/* ===== pied ===== */
footer { padding: 56px 22px 28px; border-top: 1px solid var(--line); margin-top: 60px; }
.foot-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand img { display: block; width: 168px; max-width: 62%; margin-bottom: 14px; }
.foot-brand p { color: var(--ink-2); font-size: 13px; max-width: 34ch; }
.foot-col h4 { font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 13px; }
.foot-col a, .foot-col .foot-muted { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 9px; }
.foot-col a:hover { color: var(--teal); }
.foot-muted { color: var(--ink-3); }
.foot-bottom {
  max-width: 1080px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font: 500 11px var(--mono); letter-spacing: 0.04em; color: var(--ink-3);
}

/* ==========================================================================
   Mouvement. Une règle : il sert à faire comprendre, jamais à décorer.
   Le tracé se dessine et les repères se posent dans l'ordre chronologique de la
   vie, parce que c'est exactement ce que la page raconte. Tout est court, tout
   décélère, rien ne rebondit. Et tout est enveloppé dans une préférence de
   mouvement : qui demande le calme obtient une page parfaitement immobile.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); }

  /* Le tracé se dessine d'un bout à l'autre (pathLength=1 → longueur normalisée). */
  .qmap-dots .trail {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: qf-draw 1.4s var(--ease-out) 0.15s forwards;
  }
  /* Les repères se posent l'un après l'autre, du plus ancien au plus récent. */
  .qmap-dots .pin {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: qf-land 0.5s var(--ease-out) forwards;
    /* plafonné : sur une vie très documentée, la cascade ne doit pas s'éterniser */
    animation-delay: calc(0.2s + min(var(--i) * 55ms, 2.2s));
  }
  @keyframes qf-draw { to { stroke-dashoffset: 0; } }
  @keyframes qf-land {
    from { opacity: 0; transform: scale(0.2); }
    60%  { opacity: 1; transform: scale(1.25); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Entrée de page : le titre et le chapeau montent de quelques pixels. */
  h1, .strip, .lede { animation: qf-rise 0.55s var(--ease-out) both; }
  .strip { animation-delay: 0.06s; }
  .lede { animation-delay: 0.12s; }
  @keyframes qf-rise { from { opacity: 0; transform: translateY(10px); } }

  /* Micro-interactions : la carte se soulève à peine sous le curseur. */
  .rel-card, a.place-card, .chip, .btn {
    transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out),
                box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
  }
  .rel-card:hover, a.place-card:hover { transform: translateY(-2px); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active, .rel-card:active, a.place-card:active { transform: translateY(0); }
  .tl-row { transition: background 160ms var(--ease-out); }
  .tl-row:hover { background: #0e9d770a; }
}

/* PAS de révélation au défilement sur ces pages, et c'est délibéré. Essayée avec
   `animation-timeline: view()` : après un défilement rapide, des lignes restées
   loin au-dessus du viewport gardaient une opacité de 0, définitivement. Du texte
   qui peut disparaître sur une page faite pour être lue et indexée ne vaut aucun
   effet visuel. Le mouvement de ces pages tient dans la carte, où il raconte
   quelque chose : le tracé se dessine, les lieux se posent dans l'ordre du temps. */

@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 640px) {
  .wrap { padding: 22px 15px 56px; }
  h1 { font-size: 31px; }
  .topbar { padding: 9px 13px; }
  .topbar .brand img { width: 96px; }
  .topbar nav { gap: 12px; font-size: 11px; }
  .topbar nav .hide-s { display: none; }
  .tl-row { grid-template-columns: 1fr; gap: 3px; }
  .tl-when { padding-top: 0; }
  .tl-when i { display: inline; margin-left: 8px; }
  .roster { columns: 1; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}