/* La petite histoire — charte du site.
   Hérite de Publication/ascendance.html : papier gris-vert, encre, rouge de
   cire, Bodoni Moda (la lettre des faire-parts belges) + Archivo. */

:root{
  --ground:#F0F1EE;
  --raised:#F8F9F6;
  --sunken:#E7E9E4;
  --ink:#191B18;
  --muted:#6C716B;
  --faint:#8C8F88;
  --rule:#D6D8D2;
  --rule-soft:#E4E6E0;
  --accent:#9C2B1F;
  --accent-soft:#F0E2DF;
  --ok:#2E5B47;
  --mid:#8A6516;
  --open:#8C8F88;
  --br-heyvaert:#9C2B1F;
  --br-winkel:#3E5C76;
  --br-warnant:#4C6B3C;
  --br-defleur:#8A6516;
  --shadow:0 1px 2px rgba(25,27,24,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141614; --raised:#1C1F1C; --sunken:#101210;
    --ink:#E8EAE5; --muted:#9DA298; --faint:#7E8279;
    --rule:#2E322D; --rule-soft:#242723;
    --accent:#D9564A; --accent-soft:#2C1C19;
    --ok:#6FAF90; --mid:#C9A24D; --open:#7E8279;
    --br-heyvaert:#D9564A; --br-winkel:#7FA3C4; --br-warnant:#8CB077; --br-defleur:#C9A24D;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#141614; --raised:#1C1F1C; --sunken:#101210;
  --ink:#E8EAE5; --muted:#9DA298; --faint:#7E8279;
  --rule:#2E322D; --rule-soft:#242723;
  --accent:#D9564A; --accent-soft:#2C1C19;
  --ok:#6FAF90; --mid:#C9A24D; --open:#7E8279;
  --br-heyvaert:#D9564A; --br-winkel:#7FA3C4; --br-warnant:#8CB077; --br-defleur:#C9A24D;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.62; margin:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px;margin:0 auto;padding:0 clamp(18px,5vw,48px)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,*:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
img{max-width:100%;height:auto}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86em;background:var(--sunken);padding:1px 5px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--raised);padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* ------------------------------------------------------------- topbar --- */
.topbar{border-bottom:1px solid var(--rule);background:var(--ground)}
.topbar-in{max-width:1000px;margin:0 auto;padding:14px clamp(18px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;
  font-family:"Bodoni Moda",Georgia,serif;font-weight:700;font-size:19px;letter-spacing:.01em}
.brand-fil{width:11px;height:24px;color:var(--accent);flex:none}
.topbar nav{display:flex;gap:4px 20px;flex-wrap:wrap}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:13.5px;
  letter-spacing:.07em;text-transform:uppercase;font-weight:500;padding:4px 0}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a[aria-current="page"]{color:var(--accent);border-bottom:2px solid var(--accent)}

/* ------------------------------------------------------------ masthead --- */
.ouverture{padding:clamp(52px,9vw,96px) 0 0}
.stamp{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--accent);border:1.5px solid var(--accent);border-radius:2px;
  padding:5px 10px 4px;transform:rotate(-1.4deg);margin:0}
h1{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;
  font-size:clamp(42px,9vw,82px);line-height:.98;letter-spacing:-.012em;
  text-wrap:balance;margin:26px 0 0}
h1 em{font-style:italic;font-weight:500;color:var(--accent)}
.standfirst{font-size:clamp(17px,2.3vw,20px);color:var(--muted);max-width:58ch;
  margin:22px 0 0;text-wrap:pretty}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;margin:30px 0 0;padding:14px 0 0;
  border-top:1px solid var(--rule);font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.byline b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------ sections --- */
section{margin:clamp(56px,8vw,88px) 0 0}
h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;
  font-size:clamp(26px,4vw,36px);line-height:1.12;letter-spacing:-.01em;
  margin:0;text-wrap:balance}
.lede{color:var(--muted);max-width:64ch;margin:12px 0 0;text-wrap:pretty}
.rule{height:1px;background:var(--rule);margin:26px 0 0}

/* marques de preuve */
.mark{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.mark::before{content:"";width:9px;height:9px;border-radius:1px;flex:none}
.m-ok{color:var(--ok)}   .m-ok::before{background:var(--ok)}
.m-mid{color:var(--mid)} .m-mid::before{background:linear-gradient(90deg,var(--mid) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--mid)}
.m-open{color:var(--open)} .m-open::before{box-shadow:inset 0 0 0 1.5px var(--open)}

/* --------------------------------------------------- le fil (accueil) --- */
.fil{position:relative;margin-top:34px}
.fil::before{content:"";position:absolute;top:6px;bottom:6px;left:7px;width:2px;
  background:linear-gradient(var(--accent) 0 62%,var(--rule) 96%,transparent);opacity:.55}
.chapitre{position:relative;display:grid;grid-template-columns:118px 1fr;
  gap:0 26px;padding:34px 0 34px 34px;border-bottom:1px solid var(--rule-soft)}
.chapitre::before{content:"";position:absolute;left:2px;top:44px;width:12px;height:12px;
  border-radius:50%;background:var(--ground);border:2.5px solid var(--accent)}
.chapitre:last-child{border-bottom:0}
.rail{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding-top:6px}
.rail .gen{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:34px;
  line-height:1;letter-spacing:.02em;text-transform:none;color:var(--accent);
  font-weight:500;margin-bottom:6px}
.rail .sosa-range{display:block;font-variant-numeric:tabular-nums;margin-top:3px}
.chapitre h2{font-size:clamp(23px,3.4vw,30px)}
.chapitre .lieux{color:var(--faint);font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;margin:8px 0 0}
.couples{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.couple{display:flex;flex-direction:column;gap:3px}
.names{font-size:clamp(17px,2.2vw,19.5px);font-weight:600;line-height:1.35;
  text-wrap:balance;margin:0}
.names a{color:inherit;text-decoration-color:var(--rule);text-decoration-thickness:1.5px}
.names a:hover{text-decoration-color:var(--accent);color:var(--accent)}
.names .amp{color:var(--faint);font-weight:400;padding:0 3px}
.names .vivant{font-weight:500}
.facts{color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums;margin:0}
.facts .sep{color:var(--faint);padding:0 6px}
.teaser{color:var(--muted);font-size:14.5px;max-width:66ch;margin:5px 0 0;text-wrap:pretty}
.couple .mark{margin-top:4px}
.note-vivants{color:var(--faint);font-size:13px;font-style:italic;margin:8px 0 0}

/* révélation au scroll */
@media (prefers-reduced-motion:no-preference){
  .js .chapitre,.js .entree{opacity:0;transform:translateY(14px);
    transition:opacity .6s ease,transform .6s ease}
  .js .chapitre.vu,.js .entree.vu{opacity:1;transform:none}
}

/* ----------------------------------------------------------- journal ---- */
.entrees{display:flex;flex-direction:column;margin-top:8px}
.entree{padding:30px 0;border-bottom:1px solid var(--rule-soft)}
.entree:last-child{border-bottom:0}
.entree .date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0}
.entree h3,.entree h2.titre{margin:6px 0 0;font-family:"Bodoni Moda",Georgia,serif;
  font-weight:500;font-style:italic;font-size:clamp(20px,2.8vw,25px);line-height:1.25;
  text-wrap:balance}
.entree h3 a,.entree h2.titre a{color:inherit;text-decoration:none}
.entree h3 a:hover,.entree h2.titre a:hover{color:var(--accent)}
.entree p{margin:10px 0 0;color:var(--muted);max-width:68ch;text-wrap:pretty}
.entree p strong{color:var(--ink)}
.entree ul{margin:10px 0 0;padding-left:20px;color:var(--muted)}
.suite{display:inline-block;margin-top:18px;font-size:13.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;text-decoration:none}
.suite:hover{text-decoration:underline}

/* ------------------------------------------------------ page personne --- */
.eyebrow{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:0 0 4px}
.eyebrow .sosa-n{color:var(--accent);font-family:"Bodoni Moda",Georgia,serif;
  font-size:17px;letter-spacing:.02em}
.personne-tete{padding:clamp(40px,7vw,70px) 0 0}
.personne-tete h1{font-size:clamp(34px,6.5vw,58px)}
.annees{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:400;
  color:var(--muted);font-size:clamp(18px,2.6vw,23px);margin:10px 0 0}
.personne-tete .mark{margin-top:14px}
.recit{font-size:clamp(16.5px,2.1vw,18.5px);max-width:66ch;margin:26px 0 0;text-wrap:pretty}
.recit p{margin:0 0 12px}

.fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);margin-top:30px}
.fait{background:var(--raised);padding:16px 18px}
.fait .lbl{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:4px}
.fait .val{font-size:15px;line-height:1.45}
.fait .val a{color:inherit}
.fait .val .detail{color:var(--muted)}

h2.section-t{font-size:clamp(22px,3.2vw,29px);margin-top:clamp(46px,7vw,70px)}
.section-t + .rule{margin-top:18px}

/* galerie de documents */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;margin-top:24px}
.piece{margin:0;background:var(--raised);border:1px solid var(--rule-soft);
  box-shadow:var(--shadow)}
.piece a{display:block;line-height:0;background:var(--sunken)}
.piece img{width:100%;display:block}
.piece figcaption{padding:12px 14px 14px;font-size:13.5px;color:var(--muted);line-height:1.5}
.piece figcaption b{color:var(--ink);font-weight:600}
.piece .fichier{display:block;margin-top:3px;font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}

/* corps des notes (transcriptions) */
.notes{max-width:72ch;margin-top:10px}
.notes h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(20px,2.8vw,26px);line-height:1.2;margin:38px 0 0;text-wrap:balance}
.notes h4{font-size:16px;font-weight:600;margin:26px 0 0;letter-spacing:.01em}
.notes p{margin:12px 0 0;color:var(--ink)}
.notes p,.notes li{text-wrap:pretty}
.notes ul{margin:12px 0 0;padding-left:20px}
.notes li{margin:6px 0 0}
.notes blockquote{margin:18px 0 0;padding:18px 22px;background:var(--raised);
  border-left:3px solid var(--accent);font-family:"Bodoni Moda",Georgia,serif;
  font-style:italic;font-size:17px;line-height:1.7}
.notes blockquote p{margin:0 0 10px;color:var(--ink)}
.notes blockquote p:last-child{margin-bottom:0}
.notes blockquote strong{font-weight:700}
.notes .sep{border:0;height:1px;background:var(--rule);margin:34px 0 0}
.table-scroll{overflow-x:auto;margin:16px 0 0}
.notes table,.table-scroll table{border-collapse:collapse;font-size:14px;min-width:420px}
.notes th,.notes td{padding:8px 12px;border:1px solid var(--rule-soft);
  text-align:left;vertical-align:top}
.notes th{background:var(--sunken);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

/* sources */
.sources-liste{list-style:none;padding:0;margin:20px 0 0;max-width:76ch}
.sources-liste li{padding:12px 0;border-bottom:1px solid var(--rule-soft);
  font-size:14.5px;color:var(--muted);display:grid;grid-template-columns:20px 1fr;gap:0 12px}
.sources-liste li::before{content:"›";color:var(--accent);font-weight:700}

.retours{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(46px,7vw,70px);
  padding-top:20px;border-top:1px solid var(--rule);font-size:13.5px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.retours a{text-decoration:none}
.retours a:hover{text-decoration:underline}

/* -------------------------------------------------------------- arbre --- */
.arbre-tete{padding:clamp(36px,6vw,60px) 0 0}
.arbre-cadre{margin-top:26px;border:1px solid var(--rule);background:var(--raised);
  position:relative;overflow:hidden;border-radius:2px}
#arbre-svg{display:block;width:100%;height:min(74vh,760px);cursor:grab;touch-action:none}
#arbre-svg.drag{cursor:grabbing}
.arbre-outils{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.arbre-outils button{width:34px;height:34px;border:1px solid var(--rule);
  background:var(--ground);color:var(--ink);font-size:17px;line-height:1;
  cursor:pointer;border-radius:2px}
.arbre-outils button:hover{border-color:var(--accent);color:var(--accent)}
.legende{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;
  font-size:12.5px;color:var(--muted)}
.legende span{display:inline-flex;align-items:center;gap:7px}
.legende i{width:16px;height:3px;border-radius:2px;flex:none}
.l-heyvaert{background:var(--br-heyvaert)}
.l-winkel{background:var(--br-winkel)}
.l-warnant{background:var(--br-warnant)}
.l-defleur{background:var(--br-defleur)}
.astuce{color:var(--faint);font-size:13px;margin-top:10px}

/* nœuds SVG */
.noeud rect{fill:var(--raised);stroke:var(--rule);stroke-width:1.2;rx:2}
.noeud text{fill:var(--ink);font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
.noeud .nom{font-size:13px;font-weight:600}
.noeud .ans{font-size:11.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.noeud .sosa-tag{font-size:10px;fill:var(--faint);letter-spacing:.08em}
a.noeud:hover rect,a.noeud:focus rect{stroke:var(--accent);stroke-width:1.8}
.noeud.vivant rect{stroke-dasharray:3 3}
.noeud.br-4 rect{stroke:var(--br-heyvaert);stroke-opacity:.6}
.noeud.br-5 rect{stroke:var(--br-winkel);stroke-opacity:.7}
.noeud.br-6 rect{stroke:var(--br-warnant);stroke-opacity:.7}
.noeud.br-7 rect{stroke:var(--br-defleur);stroke-opacity:.7}
a.noeud.br-4:hover rect,a.noeud.br-4:focus rect{stroke:var(--br-heyvaert);stroke-opacity:1}
a.noeud.br-5:hover rect,a.noeud.br-5:focus rect{stroke:var(--br-winkel);stroke-opacity:1}
a.noeud.br-6:hover rect,a.noeud.br-6:focus rect{stroke:var(--br-warnant);stroke-opacity:1}
a.noeud.br-7:hover rect,a.noeud.br-7:focus rect{stroke:var(--br-defleur);stroke-opacity:1}
.lien{fill:none;stroke:var(--rule);stroke-width:1.6}
.lien.br-4{stroke:var(--br-heyvaert);stroke-opacity:.5}
.lien.br-5{stroke:var(--br-winkel);stroke-opacity:.55}
.lien.br-6{stroke:var(--br-warnant);stroke-opacity:.55}
.lien.br-7{stroke:var(--br-defleur);stroke-opacity:.55}
.col-titre{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--faint);font-weight:600;font-family:"Archivo",Arial,sans-serif}

/* ------------------------------------------------------------ colophon --- */
.colophon{margin-top:clamp(64px,9vw,110px);border-top:1px solid var(--rule);
  padding:26px 0 60px;background:var(--ground)}
.colophon-in p{color:var(--faint);font-size:13.5px;max-width:80ch;margin:0 0 10px;
  text-wrap:pretty}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:640px){
  .chapitre{grid-template-columns:1fr;gap:10px;padding-left:28px}
  .rail{display:flex;align-items:baseline;gap:12px;padding-top:0}
  .rail .gen{margin:0;font-size:26px}
  .fiche{grid-template-columns:1fr 1fr}
}
@media (max-width:430px){.fiche{grid-template-columns:1fr}}
@media print{.topbar,.arbre-outils,.skip{display:none}}

/* --- Visionneuse de documents --------------------------------------------
   Ouverte par-dessus la page : on referme et l'on reprend sa lecture là où
   on l'avait laissée. Fond sombre dans les deux thèmes — c'est l'usage, et
   un acte se lit mieux détaché de son papier. */
body.v-ouverte{overflow:hidden}

.visionneuse{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; gap:.75rem;
  padding:clamp(.6rem,2vw,1.25rem);
  background:#0C0E0C;          /* plein : un acte se lit mieux détaché de la page */
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.visionneuse.ouverte{opacity:1; pointer-events:auto}
@media (prefers-reduced-motion:reduce){ .visionneuse{transition:none} }

.v-barre{
  display:flex; align-items:center; gap:.5rem;
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.v-barre button,
.v-barre .v-brut{
  appearance:none; border:1px solid rgba(255,255,255,.22); background:transparent;
  color:#F0F1EE; border-radius:2px; cursor:pointer; line-height:1;
  font:inherit; font-size:.9rem; padding:.42rem .7rem; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.v-barre button:hover,
.v-barre .v-brut:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}
.v-barre button:focus-visible,
.v-barre .v-brut:focus-visible{outline:2px solid #D9564A; outline-offset:2px}
.v-prec,.v-suiv{font-size:1.15rem; padding:.28rem .68rem}
.v-compte{
  color:rgba(240,241,238,.66); font-size:.82rem; letter-spacing:.06em;
  min-width:3.5rem; text-align:center;
}
.v-brut{margin-left:auto}
.v-fermer{font-size:.95rem}

.v-scene{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
}
.v-scene img{
  max-width:100%; max-height:100%; object-fit:contain;
  background:#F8F9F6; box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.v-legende{
  color:rgba(240,241,238,.82); text-align:center; font-size:.94rem;
  max-width:52rem; margin:0 auto; line-height:1.5;
}
.v-legende .fichier{
  display:block; color:rgba(240,241,238,.48); font-size:.78rem;
  letter-spacing:.04em; margin-top:.3rem;
}

@media (max-width:520px){
  .v-brut{display:none}          /* la place manque, le ✕ prime */
  .v-legende{font-size:.86rem}
}

/* --- La frise chronologique ----------------------------------------------
   Une couleur par génération ; l'incertitude des dates se lit dans le fondu
   des extrémités. Les tokens vivent sur :root pour suivre les deux thèmes. */
:root{
  --gen1:#191B18; --gen2:#9C2B1F; --gen3:#3E5C76; --gen4:#4C6B3C;
  --gen5:#8A6516; --gen6:#7A4E7E; --gen7:#2F6F6A; --gen8:#8C5A3C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --gen1:#E8EAE5; --gen2:#D9564A; --gen3:#7FA3C4; --gen4:#8CB077;
    --gen5:#C9A24D; --gen6:#B08AB8; --gen7:#6FB3AD; --gen8:#C08A62;
  }
}
:root[data-theme="dark"]{
  --gen1:#E8EAE5; --gen2:#D9564A; --gen3:#7FA3C4; --gen4:#8CB077;
  --gen5:#C9A24D; --gen6:#B08AB8; --gen7:#6FB3AD; --gen8:#C08A62;
}

.frise-cadre{
  border:1px solid var(--rule); border-radius:3px; background:var(--raised);
  box-shadow:var(--shadow); margin:1.5rem 0 1rem;
}
.frise-scroll{
  overflow-x:auto; overflow-y:hidden; position:relative;
  -webkit-overflow-scrolling:touch;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.frise-scroll.grab{cursor:grabbing}
.frise-scroll.grab .f-vie{cursor:grabbing}
#frise-svg{display:block}

.f-era{fill:var(--sunken); opacity:.55}
.f-era-t{
  fill:var(--faint); font:500 10px Archivo,sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
}
.f-grille{stroke:var(--rule-soft); stroke-width:1}
.f-grille-maj{stroke:var(--rule)}
.f-an{
  fill:var(--muted); font:500 11px Archivo,sans-serif; text-anchor:middle;
  letter-spacing:.05em;
}
.f-curseur{stroke:var(--accent); stroke-width:1; stroke-dasharray:3 3;
  pointer-events:none}
.f-curseur-t{fill:var(--accent); font:600 12px Archivo,sans-serif;
  text-anchor:middle; pointer-events:none}

.f-fil{stroke:var(--faint); stroke-width:1; stroke-dasharray:2 3; opacity:.55}
.f-noce{stroke:currentColor; stroke-width:1.4; opacity:.5}

.f-vie{cursor:pointer; text-decoration:none}
.f-nom{
  fill:var(--ink); font:500 11.5px Archivo,sans-serif; white-space:pre;
}
.f-vie:hover .f-nom,
.f-vie:focus-visible .f-nom{text-decoration:underline}
.f-trait{opacity:.85}
.f-vie:hover .f-trait{opacity:1}
.f-stop{stop-color:currentColor}

/* La couleur de génération porte tout : trait, repères, étiquette. */
.f-g1{color:var(--gen1)} .f-g2{color:var(--gen2)} .f-g3{color:var(--gen3)}
.f-g4{color:var(--gen4)} .f-g5{color:var(--gen5)} .f-g6{color:var(--gen6)}
.f-g7{color:var(--gen7)} .f-g8{color:var(--gen8)}
.f-trait{fill:currentColor}
.f-ev-n{fill:currentColor}
.f-ev-d{fill:currentColor}
.f-ev-m{fill:var(--raised); stroke:currentColor; stroke-width:2}
.f-ev-e{stroke:currentColor; stroke-width:1.6}

.frise-bulle{
  position:absolute; z-index:5; transform:translate(-50%,-100%);
  max-width:20rem; padding:.45rem .65rem; border-radius:3px;
  background:var(--ink); color:var(--ground);
  font:400 .82rem/1.45 Archivo,sans-serif; pointer-events:none;
  box-shadow:0 3px 14px rgba(0,0,0,.25);
}

.legende-gens{flex-wrap:wrap}
.legende-gens i{
  display:inline-block; width:14px; height:4px; border-radius:2px;
  vertical-align:middle; margin-right:.3rem;
}
.lg-g1{background:var(--gen1)} .lg-g2{background:var(--gen2)}
.lg-g3{background:var(--gen3)} .lg-g4{background:var(--gen4)}
.lg-g5{background:var(--gen5)} .lg-g6{background:var(--gen6)}
.lg-g7{background:var(--gen7)} .lg-g8{background:var(--gen8)}

/* --- Index alphabétique des noms ----------------------------------------- */
.alpha-nav{
  display:flex; flex-wrap:wrap; gap:.3rem; margin:1.5rem 0 2rem;
  padding-bottom:1.2rem; border-bottom:1px solid var(--rule);
}
.alpha-nav a{
  display:inline-grid; place-items:center; min-width:2rem; height:2rem;
  border:1px solid var(--rule); border-radius:2px; text-decoration:none;
  color:var(--accent); font:600 .82rem Archivo,sans-serif; letter-spacing:.04em;
  transition:background .15s ease, border-color .15s ease;
}
.alpha-nav a:hover{background:var(--accent-soft); border-color:var(--accent)}

.alpha-bloc{margin:0 0 2.2rem}
.alpha-t{
  font:600 .78rem Archivo,sans-serif; letter-spacing:.16em; color:var(--accent);
  margin:0 0 .5rem; padding-bottom:.3rem; border-bottom:1px solid var(--rule-soft);
}
.alpha-liste{list-style:none; margin:0; padding:0}
.alpha-liste li{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:.42rem 0; border-bottom:1px solid var(--rule-soft);
}
.alpha-liste a{text-decoration:none; color:inherit; flex:1 1 18rem; min-width:0}
.alpha-liste a:hover .alpha-nom,
.alpha-liste a:focus-visible .alpha-nom{text-decoration:underline}
.alpha-nom{
  font:600 .95rem Archivo,sans-serif; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink);
}
.alpha-prenoms{color:var(--muted); font-size:.95rem; margin-left:.4rem}
.alpha-ans{color:var(--faint); font-size:.85rem; font-variant-numeric:tabular-nums}
.alpha-sosa{
  font:500 .7rem Archivo,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  padding:.12rem .42rem; border-radius:2px; white-space:nowrap;
}
.alpha-coll{color:var(--faint); background:var(--sunken)}

/* --- Cibles tactiles (checklist n° 5) ------------------------------------
   Au doigt, tout contrôle atteint 44 px ; à la souris, les tailles fines de
   la charte restent. `pointer:coarse` cible l'appareil, pas la largeur. */
@media (pointer:coarse){
  .alpha-nav a{min-width:2.75rem; height:2.75rem}
  .arbre-outils button{width:2.75rem; height:2.75rem}
  .v-barre button,.v-barre .v-brut{min-width:2.75rem; min-height:2.75rem; padding:.6rem .8rem}
}