/* ───────── Couleurs et typo ───────── */
:root {
  --bg: #F4EFE6;
  --bg-dot: #E2D9CA;
  --paper: #FFFCF7;
  --paper-soft: #FAF6EE;
  --ink: #2B2620;
  --ink-2: #5C5247;
  --muted: #8A7E70;
  --rule: #E6DDCE;
  --line: #B9AC99;            /* trait « probable » */
  --line-strong: #9C8F7C;     /* trait « prouvé » et traits du couple */
  --accent: #C4673F;          /* terracotta */
  --gold: #B08A4F;            /* bague de mariage */
  --claude: #D97757;          /* orange Claude */
  --claude-ink: #B5573A;
  --claude-tint: #FBEDE6;

  --m: #4F7193;  --m-tint: #E3EAF1;   /* homme : bleu ardoise */
  --f: #B0566B;  --f-tint: #F5E4E6;   /* femme : vieux rose */
  --u: #8A7E70;  --u-tint: #EEE8DD;   /* inconnu */

  --c-prouve: #4E8A5B;
  --c-probable: #93AE5C;
  --c-possible: #D29B35;
  --c-hypothese: #C4553A;

  --shadow: 0 1px 2px rgba(70, 50, 25, .06), 0 6px 18px rgba(70, 50, 25, .07);
  --shadow-lg: 0 2px 6px rgba(70, 50, 25, .08), 0 18px 48px rgba(70, 50, 25, .14);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.3, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ───────── Le plan (zone déplaçable) ───────── */
.viewport {
  position: fixed; inset: 0;
  touch-action: none;
  cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;   /* le glisser ne sélectionne pas de texte */
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
}
.viewport.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.world.anim { transition: transform .5s var(--ease); }
svg.links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

.links path { fill: none; }
.links .couple      { stroke: var(--line-strong); stroke-width: 1.8; }
.links .ghostl      { stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .8; }
.links .k-prouve    { stroke: var(--line-strong); stroke-width: 1.8; stroke-linecap: square; }
.links .k-probable  { stroke: var(--line); stroke-width: 1.8; stroke-linecap: square; }
.links .k-possible  { stroke: var(--c-possible); stroke-width: 1.8; stroke-dasharray: 7 5; }
.links .k-hypothese { stroke: var(--c-hypothese); stroke-width: 1.8; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.links .busyl       { stroke: var(--claude); stroke-width: 1.8; opacity: 1; stroke-dasharray: 5 5; animation: march 1s linear infinite; }
.links .dot { stroke: var(--bg); stroke-width: 2; }

/* Étiquettes de génération : une seule ligne, alignées à droite */
.genlabel {
  position: absolute; transform: translateX(-100%); text-align: right; white-space: nowrap;
  font-family: var(--serif); color: var(--muted); pointer-events: none;
}
.genlabel b { display: block; font-weight: 500; font-size: 19px; color: var(--ink-2); }
.genlabel span { display: block; margin-top: 5px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* ───────── Cartes ───────── */
.card {
  position: absolute; width: 196px; height: 88px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-align: left; cursor: pointer;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card::before {                       /* liseré coloré homme / femme */
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sx);
}
.card.m { --sx: var(--m); --sx-tint: var(--m-tint); }
.card.f { --sx: var(--f); --sx-tint: var(--f-tint); }
.card.u { --sx: var(--u); --sx-tint: var(--u-tint); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 103, 63, .18), var(--shadow-lg); }

/* Fratries et conjoints secondaires : plus discrets que la lignée directe */
.card.sib, .card.half, .card.spouse { background: var(--paper-soft); box-shadow: none; }
.card.sib .avatar, .card.half .avatar, .card.spouse .avatar { opacity: .85; }

.card.ghost {
  background: transparent; border: 1.5px dashed var(--line); box-shadow: none;
  justify-content: center; color: var(--muted); font-size: 13px;
}
.card.ghost::before { display: none; }
.card.inconnu { background: transparent; box-shadow: none; }
.card.inconnu .surname { font-style: italic; font-weight: 400; color: var(--ink-2); }

/* Fiche sur laquelle Claude travaille */
.card.busy { border-color: var(--claude); animation: glow 2.6s ease-in-out infinite; }
.card.ghost.busy { border: 1.5px solid var(--claude); background: rgba(251, 237, 230, .75); color: var(--claude-ink); }
.busy-tag {                           /* centré sur le bord du haut */
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 5px; border-radius: 99px; background: var(--paper); border: 1px solid #F0CDBF;
  color: var(--claude-ink); font-size: 10.5px; font-weight: 500; white-space: nowrap; line-height: 1.5;
}
.busy-tag .spark svg { width: 12px; height: 12px; }
.ring.ghost.busy { border: 1.5px solid var(--claude); background: var(--claude-tint); }

.avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--sx-tint); color: var(--sx);
  display: grid; place-items: center; overflow: hidden;
}
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar .q { font-family: var(--serif); font-size: 24px; color: var(--u); }

/* Les lignes sont espacées également : la hiérarchie vient des tailles, du gras et des capitales */
.info { min-width: 0; flex: 1; line-height: 1.15; display: flex; flex-direction: column; gap: 3px; }
/* Prénom puis NOM, à la même hauteur : le NOM ressort par le gras et le noir, le prénom est plus léger */
.given, .surname { font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.given { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.surname { font-size: 14px; font-weight: 650; letter-spacing: .03em; }
.card.has-star .given { padding-right: 12px; }       /* la place de l'étoile */
.years { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Compensation mesurée : le serif a plus d'espace sous les lettres qu'Inter. Sans elle, l'écart visuel
   prénom → NOM faisait 10 px contre 8 px pour NOM → dates. Avec : 8 px partout (de la ligne de base au haut des capitales). */
.surname { margin-top: -2px; }
.meta { margin-top: -.5px; }

/* Avec un badge en bas : lignes un peu resserrées, contenu remonté. Claude en haut : contenu descendu. */
.card.has-badge { padding-bottom: 17px; }
.card.busy { padding-top: 17px; }
.card.has-badge .info, .card.busy .info { gap: 1.5px; }
/* Étoile : on sait sur cette personne plus que l'état civil et les recensements */
.star { position: absolute; top: 7px; right: 8px; width: 13px; height: 13px; color: var(--gold); }
.star svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.badge {                              /* centré sur le bord du bas */
  position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%);
  font-size: 9.5px; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2);
  white-space: nowrap;
}
.badge.mpf { color: #7A4B2E; border-color: #E5CDB5; background: #FBF1E6; }

/* Vue de loin : on garde le nom, le prénom et les années, en plus gros */
.far .meta, .far .badge, .far .busy-tag .lbl { display: none; }
.far .busy-tag { padding: 3px; }
.far .busy-tag .spark svg { width: 20px; height: 20px; }
.far .given { font-size: 18px; }
.far .surname { font-size: 17px; }
.far .star { width: 20px; height: 20px; }
.far .card.has-star .given { padding-right: 20px; }
.far .years { font-size: 16px; margin-top: -1.5px; }   /* même compensation mesurée, aux tailles de la vue de loin */
.far .card.has-badge, .far .card.busy { padding: 10px 12px; }
.far .genlabel b { font-size: 30px; }

/* ───────── Bague (union) ───────── */
.ring {
  position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 50%; border: 1px solid var(--rule); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 1px 3px rgba(70, 50, 25, .1);
  transition: transform .15s, box-shadow .15s;
}
.ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ring svg { width: 20px; height: 20px; }
.ring.inconnue { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--line); border: 0; }
.ring.ghost { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--bg); border: 1.5px dashed var(--line); box-shadow: none; cursor: default; }
.ring.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 103, 63, .2); }
.ring .yr {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.far .ring .yr { font-size: 16px; bottom: 40px; }

/* ───────── Barre du haut ───────── */
.topbar {
  position: fixed; top: 16px; left: 16px; right: 16px;
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px;
  pointer-events: none; z-index: 5;
}
.topbar > * { pointer-events: auto; }
.tools { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 99px; border: 1px solid var(--rule); background: rgba(255, 252, 247, .9);
  box-shadow: var(--shadow); cursor: pointer; font-size: 13px; white-space: nowrap;
}
.pill .lbl-short { display: none; }
.switch { width: 30px; height: 18px; border-radius: 99px; background: var(--rule); position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pill[aria-pressed="true"] .switch { background: var(--accent); }
.pill[aria-pressed="true"] .switch::after { left: 14px; }

/* ───────── Boutons des coins (légende, Claude, zoom) ───────── */
.dock { position: fixed; bottom: 16px; z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.dock-left { left: 16px; align-items: flex-start; }
.dock-right { right: 16px; align-items: flex-end; transition: right .35s var(--ease); }
body.panel-open .dock-right { right: 436px; }       /* un panneau est ouvert : les boutons se décalent */
.group {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255, 252, 247, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow);
}
.ctl {
  position: relative; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2); transition: background .15s, color .15s;
}
.ctl + .ctl { border-top: 1px solid var(--rule); }
.ctl svg { width: 18px; height: 18px; }
.ctl#btn-legend svg { width: 21px; height: 21px; }
.ctl[aria-expanded="true"], .ctl[aria-pressed="true"] { background: var(--paper-soft); color: var(--ink); }
.ctl.claude[aria-pressed="true"] { background: var(--claude-tint); }
.ctl.claude .spark svg { width: 22px; height: 22px; }
.ctl .unread {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--claude); box-shadow: 0 0 0 2px var(--paper);
}
.ctl .unread[hidden] { display: none; }

/* Logo Claude (étoile) et animations */
.spark { display: inline-grid; place-items: center; color: var(--claude); flex: none; }
.spark svg { display: block; fill: currentColor; }
.spark.spin svg, .busy-tag .spark svg { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes march { to { stroke-dashoffset: -10; } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 87, .14), var(--shadow); }
  50%      { box-shadow: 0 0 0 3px rgba(217, 119, 87, .26), 0 0 26px 4px rgba(217, 119, 87, .22); }
}

/* ───────── Légende ───────── */
.legend {
  width: 290px; max-width: calc(100vw - 32px); padding: 12px 14px 13px;
  background: rgba(255, 252, 247, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lg);
  font-size: 12px; color: var(--ink-2); transform-origin: 0 100%; animation: pop .18s var(--ease);
}
.legend[hidden] { display: none; }
.legend h2 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legend .pairs { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--rule); }
.legend .rows { display: grid; gap: 7px; }
.legend .it { display: flex; align-items: center; gap: 8px; }
.legend .ico { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.legend .ico svg { width: 20px; height: 20px; display: block; }
.legend .sw { width: 12px; height: 12px; border-radius: 50%; }
.legend .ln { width: 34px; flex: none; display: grid; place-items: center; }
.legend .ln svg { display: block; }
.legend .note { color: var(--muted); padding-top: 2px; }
.busy-sample { width: 30px; height: 14px; border-radius: 5px; border: 1.5px solid var(--claude); background: var(--claude-tint); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ───────── Panneaux latéraux (détail et activité) ───────── */
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 10;
  background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  transform: translateX(105%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column;
}
.sheet.open { transform: none; }
.sheet.activity { z-index: 9; }     /* le détail d'une personne passe par-dessus */
.sheet .grab { display: none; }
.sheet .close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer; display: grid; place-items: center; z-index: 2;
}
.sheet-body { overflow-y: auto; padding: 26px 26px 40px; -webkit-overflow-scrolling: touch; }

.s-head { display: flex; gap: 16px; align-items: center; padding-right: 40px; }
.s-head .avatar { width: 72px; height: 72px; }
.s-rel { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.s-given { font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.15; color: var(--ink-2); }
.s-name { font-family: var(--serif); font-size: 21px; font-weight: 650; letter-spacing: .04em; line-height: 1.15; margin: 0; }
.s-txt { display: flex; flex-direction: column; gap: 2px; }
/* Tous les prénoms de l'acte, quand ils diffèrent du prénom usuel affiché au-dessus */
.s-prenoms { font-size: 12.5px; color: var(--muted); }
.s-dates { margin-top: 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.notice {
  margin-top: 18px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  background: var(--paper-soft); border: 1px solid var(--rule); color: var(--ink-2);
}
.notice.busy-note { background: var(--claude-tint); border-color: #F0CDBF; color: var(--claude-ink); display: flex; gap: 8px; align-items: center; }
.notice.busy-note .spark svg { width: 16px; height: 16px; }
.sec { margin-top: 26px; }
.sec h3 {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.sec h3::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.sec p { margin: 0 0 8px; line-height: 1.55; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; line-height: 1.45; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* Frise : le trait vertical passe au centre des pastilles (centre à 5,5 px) */
.timeline { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 4.75px; top: 6px; bottom: 6px; width: 1.5px; background: var(--rule); }
.timeline li { position: relative; padding: 0 0 14px; line-height: 1.4; }
.timeline li::before {
  content: ""; position: absolute; left: -20px; top: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ev, var(--line));
}
.timeline .d { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .t { font-weight: 500; }
.timeline .l { color: var(--ink-2); font-size: 13px; }
.timeline .x { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px;
  border-radius: 99px; border: 1px solid var(--rule); background: var(--paper-soft);
  cursor: pointer; font-size: 13px;
}
.pchip i { width: 18px; height: 18px; border-radius: 50%; background: var(--sx-tint); border: 1.5px solid var(--sx); flex: none; }
.pchip.m { --sx: var(--m); --sx-tint: var(--m-tint); }
.pchip.f { --sx: var(--f); --sx-tint: var(--f-tint); }
.pchip.u { --sx: var(--u); --sx-tint: var(--u-tint); }
.pchip small { color: var(--muted); font-variant-numeric: tabular-nums; }
.subl { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); margin: 18px 0 8px; }
.sec h3 + .subl { margin-top: 4px; }

.ucard {
  display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: 8px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-soft);
}
.ucard .top { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ucard .sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

.conf {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  padding: 2px 9px 2px 7px; border-radius: 99px; background: var(--cc-tint); color: var(--cc);
}
.conf::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc); }
.conf.prouve    { --cc: var(--c-prouve);    --cc-tint: #E6F0E7; }
.conf.probable  { --cc: #6E8A3A;            --cc-tint: #EEF3E2; }
.conf.possible  { --cc: #A87516;            --cc-tint: #FBF0DC; }
.conf.hypothese { --cc: var(--c-hypothese); --cc-tint: #F8E6E1; }
.reason { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.45; }
.linkrow { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.linkrow:last-child { border-bottom: 0; }
.linkrow .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.doc {
  aspect-ratio: 3 / 4; border-radius: 8px; border: 1px solid var(--rule); padding: 8px;
  background: linear-gradient(#FBF6EA, #F3EAD8); display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 11px; color: var(--ink-2); position: relative; overflow: hidden;
}
.doc::before {   /* fausses lignes d'écriture */
  content: ""; position: absolute; left: 10px; right: 10px; top: 12px; height: 46%;
  background: repeating-linear-gradient(transparent 0 7px, rgba(120, 95, 60, .16) 7px 8px);
}
.doc.photo { background: linear-gradient(#D9CDB8, #B9AA90); color: #3D3428; }
.doc.photo::before { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.35) 0 18%, transparent 19%); height: 60%; }
.doc b { font-weight: 600; position: relative; }
button.doc { font: inherit; font-size: 11px; text-align: left; cursor: zoom-in; }
.doc small { position: relative; margin-top: 3px; color: var(--accent); font-size: 10.5px; }
.doc.presse { background: linear-gradient(#F4F0E6, #E6DFCF); }
.doc.militaire { background: linear-gradient(#F1EEE4, #E2DCCB); }

/* Statut de la recherche */
.s-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 30px; padding-top: 14px;
  border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.status { display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.status.st-terminee::before { background: var(--c-prouve); }
.status.st-en_cours::before { background: var(--claude); }
.status.st-legere::before { background: var(--bg-dot); border: 1px solid var(--line); }

/* Le récit */
.recit p { font-family: var(--serif); font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.recit p:last-child { margin-bottom: 0; }

/* Les faits, par thème */
.faits { display: grid; grid-template-columns: 112px 1fr; gap: 9px 14px; margin: 0; line-height: 1.4; }
.faits dt { color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.faits dd { margin: 0; min-width: 0; }
.faits .v { color: var(--ink); }
.f-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-x { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.f-ctx { margin-top: 6px; border-left: 2px solid var(--accent); padding-left: 10px; }
.f-ctx summary { cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; }
.f-ctx summary::-webkit-details-marker { display: none; }
.f-ctx summary::before { content: "+ "; }
.f-ctx[open] summary::before { content: "– "; }
.f-ctx p { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.5; }

/* Ses lieux */
.lieux { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lieux li { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; }
.lieux .pin { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.lieux .pin svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.lieux .q { display: block; color: var(--ink-2); font-size: 12px; }
.lieux .prec { font-size: 10.5px; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; }

/* Tâches pour Valentin */
.todo .pour { font-size: 10.5px; color: var(--accent); border: 1px solid #EBC9B8; background: #FBEFE8; border-radius: 999px; padding: 0 6px; white-space: nowrap; }

.srcs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.srcs li { font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; background: var(--paper-soft); border: 1px solid var(--rule); }
.srcs .k { color: var(--muted); }
.srcs a { color: var(--accent); text-decoration: none; }
.todo { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.todo li { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); }
.todo li::before { content: ""; flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 4px; border: 1.5px solid var(--line); }

/* ───────── Panneau d'activité ───────── */
.act-head { flex: none; padding: 22px 24px 16px; border-bottom: 1px solid var(--rule); }
.act-title { padding-right: 44px; }
.act-title h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.1; }
.act-title p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.act-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 22px calc(18px + env(safe-area-inset-bottom)); }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-day {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.act-day::before, .act-day::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.al { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 6px 0; }
.al .ai { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); margin-top: -1px; }
.al .ai svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.al.t-etape .ai::before, .al.t-pense .ai::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.al .at { line-height: 1.45; color: var(--ink); }
.al .at b { font-weight: 600; }
.al time { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.al.t-trouve .ai { background: #E6F0E7; color: var(--c-prouve); }
.al.t-rien .ai { color: #B5AA9A; }
.al.t-base .ai { background: #EAF0F6; color: var(--m); }
.al.t-base .ai svg { width: 13px; height: 13px; }
/* La ligne en cours : icône de Claude et points animés au bout de la phrase */
.al.now .ai .spark svg { width: 15px; height: 15px; }
.al.now .dots { margin-left: 3px; vertical-align: baseline; }

.al-person {
  display: flex; align-items: center; gap: 11px; margin: 14px 0 6px; padding: 9px 12px 9px 9px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--paper-soft); transition: border-color .15s, background .15s;
}
.al-person .avatar { width: 36px; height: 36px; }
.al-person .pinfo { flex: 1; min-width: 0; line-height: 1.25; }
.al-person small { display: block; font-size: 11.5px; color: var(--muted); }
.al-person b { font-family: var(--serif); font-size: 16.5px; font-weight: 600; }
.al-person .pside { text-align: right; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.al.new, .al-person.new { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Image d'acte (maquette : un gris qui imite une photo) */
.shot {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 270px; aspect-ratio: 3 / 2;
  margin-top: 8px; padding: 0; border: 1px solid #D6D1C8; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: linear-gradient(140deg, #E7E3DC, #CFCAC1); color: #A39D93;
}
.shot svg { width: 30px; height: 30px; }
.shot span {
  position: absolute; left: 7px; right: 7px; bottom: 7px; padding: 3px 8px; border-radius: 6px;
  background: rgba(255, 252, 247, .82); color: var(--ink-2); font-size: 11px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot.big { max-width: none; aspect-ratio: 4 / 3; margin: 0; cursor: default; border: 0; }
.shot.big svg { width: 64px; height: 64px; }

.dots { display: inline-flex; gap: 3px; flex: none; }
.dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite both; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* Agrandissement d'une image */
.lightbox {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px;
  background: rgba(43, 38, 32, .74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade .2s ease-out;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.lightbox .shot.big { flex: 0 1 auto; max-height: 48vh; }
.lightbox .transcript {
  margin-top: 12px; padding: 14px 18px; border-radius: 12px; background: var(--paper); color: var(--ink);
  max-height: 36vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lightbox .transcript[hidden] { display: none; }
.lightbox .transcript h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lightbox .transcript p { margin: 0 0 8px; font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.lightbox figcaption { margin-top: 12px; text-align: center; color: #F4EFE6; font-size: 13.5px; }
.lightbox .close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255, 252, 247, .92); display: grid; place-items: center;
}
@keyframes fade { from { opacity: 0; } }

/* ───────── Survol : seulement avec une souris ou un trackpad (pas sur écran tactile) ───────── */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
  .card.ghost:hover { border-color: var(--accent); color: var(--accent); transform: none; }
  .card.busy:hover { border-color: var(--claude); color: var(--claude-ink); }
  .ring:not(.ghost):hover { transform: scale(1.12); box-shadow: var(--shadow); }
  .pill:hover { border-color: var(--line); }
  .ctl:hover { background: var(--paper-soft); color: var(--ink); }
  .ctl.claude:hover { background: var(--claude-tint); }
  .sheet .close:hover, .lightbox .close:hover { background: var(--paper-soft); }
  .pchip:hover { border-color: var(--line); background: #fff; }
  .ucard:hover { border-color: var(--line); background: #fff; }
  .al-person:hover { border-color: var(--line); background: #fff; }
  .shot:hover { border-color: #BDB6AA; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ───────── Mobile ───────── */
@media (max-width: 720px) {
  .pill .lbl-long { display: none; }
  .pill .lbl-short { display: inline; }
  body.panel-open .dock-right { right: 16px; }
  .sheet {
    top: auto; left: 0; width: 100%; height: 78vh; border-left: 0; border-top: 1px solid var(--rule);
    border-radius: 20px 20px 0 0; transform: translateY(105%);
  }
  .sheet .grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--rule); margin: 10px auto 0; flex: none; }
  .sheet-body { padding: 18px 18px 40px; }
  .faits { grid-template-columns: 100px 1fr; }
  .act-head { padding: 14px 18px 14px; }
  .act-scroll { padding: 4px 18px 12px; }
}

/* ───────── Site réel : photos, images, états vides ───────── */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-head .avatar.zoom { cursor: zoom-in; }
.lightbox .big-img { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; border-radius: 10px; object-fit: contain; background: #fff; }
.lightbox .big-img[hidden], .lightbox .shot[hidden] { display: none; }
.shot.has-img { background: #EDE8DF; }
.shot.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-empty { padding: 24px 4px; color: var(--muted); font-size: 13.5px; text-align: center; list-style: none; }
.boot-error { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--ink-2); font-family: var(--serif); font-size: 18px; }