/* 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)}
/* Le bouton de thème : un glyphe dans un cadre fin, au ton des liens de la barre.
   ◐ l'appareil décide · ☀ clair · ☾ sombre. */
.topbar .theme{width:34px;height:34px;border:1px solid var(--rule);border-radius:2px;
  background:var(--ground);color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
  flex:none;padding:0}
.topbar .theme:hover{border-color:var(--accent);color: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}
.chapitre .autour{text-transform:none;letter-spacing:.02em;margin:14px 0 0}
.chapitre .autour a{color:inherit;text-decoration-color:var(--rule)}
.chapitre .autour a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* 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}
.graphies{color:var(--muted);font-size:13.5px;letter-spacing:.02em;margin:8px 0 0}
.graphies b{font-weight:500;color:var(--ink);font-style:italic}
.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}

/* ⭐ Le tableau des faits se lit en FILETS, comme le reste de la fiche.
   ⚠️ Il était fait de cellules pleines cernées d'un cadre — un damier qui
   jurait dès que le mini-arbre a perdu ses cases *(Didier, 06/09/2026)*.
   La colonne se dit maintenant par l'espace, la ligne par un filet.        */
.fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 30px;background:none;border:0;border-top:1px solid var(--rule);margin-top:30px;
  /* ⭐ Même mesure que le diagramme et les transcriptions : la fiche n'a qu'un axe.
     ⚠️ 200 px et non 230 : à 72ch la colonne ne tient plus trois faits de front
     au-delà, et le tableau retombait à deux — on perdait le rythme de la page. */
  max-width:72ch}
.fait{background:none;padding:15px 0 16px;border-bottom:1px solid var(--rule-soft)}
.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:15.5px;line-height:1.5}
.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 --- */
/* ⭐ Plein cadre (Didier, 14/09/2026 : « le laisser dans une petite fenêtre au
   centre de la page le rend plus difficile à utiliser »). La page sort de la
   colonne : sous la barre de navigation, une ligne de titre et de légende, puis
   le cadre prend toute la largeur et TOUT le reste de la hauteur de l'écran.
   Le pied de page passe sous le pli. `--haut-barre` est la hauteur mesurée de
   la barre de navigation (arbre.js la pose ; 63 px à défaut, sa valeur sur
   écran large) — `dvh` là où il existe, sinon `vh`. L'explication ne s'affiche
   plus : elle attend derrière le bouton « ? ». */
.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-tete` et `.arbre-cadre` servent aussi à l'éventail, à la frise et aux
   noms : ce qui suit ne vaut que sous `body.plein`, la page de l'arbre.) */
body.plein main.wrap{max-width:none;padding:0 clamp(12px,1.6vw,24px);
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--haut-barre,63px));
  min-height:calc(100dvh - var(--haut-barre,63px))}
body.plein .colophon{margin-top:28px}
.arbre-barre{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;
  padding:12px 0 10px;flex:none}
.arbre-barre h1{font-size:clamp(22px,2.6vw,28px);line-height:1.1;margin:0}
.arbre-barre .legende{margin:0;gap:6px 18px}
body.plein .arbre-cadre{margin-top:0;flex:1;min-height:380px;
  margin-bottom:clamp(12px,1.6vw,24px)}
#arbre-svg{display:block;width:100%;height:100%;position:absolute;inset:0;
  cursor:grab;touch-action:none}
/* ⚠️ Le SVG est posé en absolu dans le cadre : sinon sa hauteur « 100 % »
   participe au calcul de la hauteur du cadre et le cadre s'étire sans fin. */
#arbre-svg.drag{cursor:grabbing}
.arbre-outils{position:absolute;bottom:12px;right:12px;display:flex;gap:6px}
/* ⚠️ En haut à droite, ces boutons masquaient l'en-tête de la dernière
   colonne dès que l'arbre s'est affiché à taille réelle (07/09/2026). */
.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)}
.arbre-outils button[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
/* L'aide : un feuillet posé sur le dessin, à droite de la bande des générations,
   au ton de la légende ; « Fermer » ou Échap le retire. */
.arbre-aide{position:absolute;top:12px;left:44px;max-width:min(52ch,calc(100% - 56px));
  background:var(--raised);border:1px solid var(--rule);border-radius:2px;
  padding:14px 16px 12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.arbre-aide p{margin:0 0 10px}
.arbre-aide b{color:var(--ink);font-weight:600}
.arbre-aide button{border:1px solid var(--rule);background:var(--ground);color:var(--ink);
  font:inherit;font-size:12.5px;padding:5px 12px;border-radius:2px;cursor:pointer}
.arbre-aide 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}
/* L'arbre recentrable (arbre.js) : la case du centre est la seule en
   rouge de cire, la seule à porter un lien en clair ; un collatéral se
   distingue par son étiquette (rôle au lieu de sosa), non par un ornement. */
#arbre-svg{user-select:none;-webkit-user-select:none}
.noeud.actif{cursor:pointer}
.noeud.inerte{cursor:default}
.noeud:focus{outline:none}
/* La carte (11/09 au soir) : arrondie, bord neutre et fin, la couleur de branche
   en liseré vertical — un signal, pas un contour. Le centre seul est teinté de
   rouge de cire. Pas d'ombre : la charte veut des filets, pas des reliefs, et
   le thème sombre l'effacerait de toute façon. */
.noeud .carte{rx:10;stroke:var(--rule);stroke-width:1;stroke-opacity:.8}
/* Le cachet sosa : rouge de cire, le numéro en réserve. */
.noeud .sceau rect{fill:var(--accent);stroke:none;rx:9}
.noeud .sceau .num{fill:var(--ground);font-size:9.5px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.noeud .rail{stroke:none;fill:var(--rule-soft)}
.noeud.br-4 .rail{fill:var(--br-heyvaert)}
.noeud.br-5 .rail{fill:var(--br-winkel)}
.noeud.br-6 .rail{fill:var(--br-warnant)}
.noeud.br-7 .rail{fill:var(--br-defleur)}
.noeud.actif .carte,.noeud.inerte .carte{stroke:var(--rule)}
.noeud.actif:hover .carte,.noeud.actif:focus-visible .carte{stroke:var(--accent);stroke-width:1.6;stroke-opacity:1}
.noeud.centre .carte{stroke:var(--accent);stroke-width:1.4;stroke-opacity:1;fill:var(--accent);fill-opacity:.06}
.noeud.centre .rail{fill:var(--accent)}
.noeud.centre .sosa-tag{fill:var(--accent)}
.noeud.vivant .carte{stroke-dasharray:3 3}
/* Vertical : cases étroites, prénoms et nom sur deux lignes ; la bande des
   générations se lit de bas en haut, au bord gauche du cadre. */
.rang-titre{font-size:9px;letter-spacing:.05em}
.noeud.actif .nom,.noeud.inerte .nom{font-size:12.5px}
.noeud .nomf{font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;fill:var(--ink)}
.noeud.actif .ans,.noeud.inerte .ans{font-size:11px}
.noeud .page{font-size:11px;fill:var(--accent);font-weight:600;letter-spacing:.02em}
a.noeud.centre:hover .page,a.noeud.centre:focus-visible .page{text-decoration:underline}
.lien.proche{stroke-width:1.2}
/* L'union : un double filet — le même tracé deux fois, un trait de règle
   large et, par-dessus, un trait de papier plus fin qui le creuse. */
.lien.union{stroke-width:4.4}
.lien.union-creux{stroke:var(--raised);stroke-width:2.2}
.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}
/* Le bandeau qui porte les en-têtes de génération : il reste au haut du cadre
   pendant qu'on descend, et masque ce qui passerait dessous. */
.bandeau{fill:var(--raised);fill-opacity:.94}

/* ------------------------------------------------------------- éventail ---
   Même papier, mêmes couleurs de branche que l'arbre : c'est la même famille
   vue autrement. ⚠️ Aucun cadre autour des secteurs — les filets sont ceux du
   dessin, la couleur porte la branche, et le vide porte le reste. */
.eventail-cadre{margin-top:26px}
/* ⚠️ Le cadre épouse la forme du dessin (demi-disque, 1,74:1) au lieu d'une
   hauteur fixe : sinon un grand vide s'ouvrait sous le centre, et le dessin
   restait bridé par la largeur sans profiter de la hauteur offerte. */
/* ⛔ Pas de `min-height` : elle se battait avec le rapport de forme et ouvrait,
   sur téléphone, un grand vide au-dessus et au-dessous du dessin. Le cadre
   épouse la forme du demi-disque, un point c'est tout — quitte à n'être qu'une
   bande sur un petit écran, où de toute façon on zoome pour lire. */
#eventail-svg{display:block;width:100%;aspect-ratio:1.74;
  max-height:min(78vh,820px);cursor:grab;touch-action:none}
#eventail-svg.drag{cursor:grabbing}
.couronne{fill:var(--sunken);fill-opacity:.5;stroke:none}
.couronne.impaire{fill-opacity:.28}
/* ⚠️ `non-scaling-stroke` : sans lui, les filets grossissent avec le zoom et
   le dessin vire au graphique épais. Le trait garde sa finesse comme la
   lettre garde sa taille — c'est la même règle. */
.part .secteur{fill:var(--raised);stroke:var(--rule);stroke-width:1;
  vector-effect:non-scaling-stroke}
.part .etiq text{fill:var(--ink);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  pointer-events:none}
.part.vivant .secteur{stroke-dasharray:3 3}
.part.br-4 .secteur{fill:var(--br-heyvaert);fill-opacity:.10;stroke:var(--br-heyvaert);stroke-opacity:.55}
.part.br-5 .secteur{fill:var(--br-winkel);fill-opacity:.10;stroke:var(--br-winkel);stroke-opacity:.6}
.part.br-6 .secteur{fill:var(--br-warnant);fill-opacity:.10;stroke:var(--br-warnant);stroke-opacity:.6}
.part.br-7 .secteur{fill:var(--br-defleur);fill-opacity:.10;stroke:var(--br-defleur);stroke-opacity:.6}
a.part:hover .secteur,a.part:focus-visible .secteur{fill-opacity:.26;stroke-opacity:1;stroke-width:2}
a.part:focus{outline:none}
.compte-manque{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:72ch;
  border-left:2px solid var(--accent);padding-left:14px}

/* La pastille de dépliage — « +6 » : six ancêtres attendent derrière ce nom.
   Discrète au repos (l'arbre reste un dessin, pas un tableau de bord), elle
   prend l'encre de sa branche au survol. La zone tactile fait 44 px et reste
   invisible : au doigt on vise large, à l'œil on ne voit que la pastille. */
.depli{cursor:pointer}
.depli .zone{fill:transparent}
.depli .cadre{fill:var(--ground);stroke:var(--rule);stroke-width:1.1}
.depli .compte{font-family:"Archivo",Arial,sans-serif;font-size:11px;
  font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.depli:hover .cadre,.depli:focus-visible .cadre{stroke:var(--accent);stroke-width:1.6}
.depli:hover .compte,.depli:focus-visible .compte{fill:var(--accent)}
.depli:focus{outline:none}
.depli:focus-visible .cadre{stroke-width:2}
.depli.ouvert .cadre{fill:var(--sunken);stroke:var(--rule-soft)}
.depli.ouvert .compte{fill:var(--faint)}
/* La carte fantôme des proches (14/09/2026) : le gabarit d'une carte, en
   pointillé, sans liseré ni cachet — la place de ceux qu'on ne montre pas.
   « +2 » et le mot (aînés, cadets, enfants) ; ouverte, « − » et « replier ». */
.fantome .carte-f{fill:var(--raised);fill-opacity:.5;stroke:var(--rule);stroke-width:1;
  stroke-dasharray:4 4}
.fantome .plusn{font-family:"Archivo",Arial,sans-serif;font-size:19px;font-weight:600;
  fill:var(--muted);font-variant-numeric:tabular-nums}
.fantome .quoi{font-family:"Archivo",Arial,sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;fill:var(--faint)}
.fantome:hover .carte-f,.fantome:focus-visible .carte-f{stroke:var(--accent);stroke-width:1.6}
.fantome:hover .plusn,.fantome:focus-visible .plusn{fill:var(--accent)}
.fantome.ouvert .plusn{fill:var(--faint)}
.depli.br-4:hover .cadre,.depli.br-4:focus-visible .cadre{stroke:var(--br-heyvaert)}
.depli.br-5:hover .cadre,.depli.br-5:focus-visible .cadre{stroke:var(--br-winkel)}
.depli.br-6:hover .cadre,.depli.br-6:focus-visible .cadre{stroke:var(--br-warnant)}
.depli.br-7:hover .cadre,.depli.br-7:focus-visible .cadre{stroke:var(--br-defleur)}

/* ------------------------------------------------------------ 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}
  .topbar .theme{width:2.75rem; height:2.75rem}
  .v-barre button,.v-barre .v-brut{min-width:2.75rem; min-height:2.75rem; padding:.6rem .8rem}
}

/* ── Le mini-arbre d'une fiche ────────────────────────────────────────────
   La parenté proche, dessinée à la manière du reste de la fiche : pas de
   cadres, des FILETS et de la typographie. Les noms sont en Bodoni, comme
   partout ailleurs sur ce site quand un nom compte ; le sujet prend l'encre
   rouge et un souligné court. ⚠️ Une première version encadrait chaque
   personne : ça faisait organigramme, étranger à une charte de papier de
   registre — ne pas y revenir *(Didier, 06/09/2026)*.

   ⭐ Le tracé repose sur deux invariants :
      1. les cases ont une largeur FIXE (--bw), donc un pas connu (--step) ;
      2. c'est la COMPOSITION qui est centrée : le couple se centre comme un
         bloc, et les étages du dessus et du dessous se décalent de --dx pour
         retomber sur le sujet.
   ⚠️ Une version précédente centrait le SUJET en calant des cases invisibles à
   sa gauche : le tracé devenait simple, mais tout le dessin penchait à droite,
   le conjoint restant seul d'un côté *(vu par Didier, 06/09/2026)*.
   Une barre reliant n cases centrées va de −(n−1)·pas/2 à +(n−1)·pas/2 autour
   de son propre centre. `--n` vient du gabarit : CSS ne compte pas ses enfants. */
.mini-arbre{
  --bw:11.5rem; --gap:2rem; --step:calc(var(--bw) + var(--gap));
  /* ⚠️ Pas de filet en tête : la dernière ligne du tableau des faits en pose
     déjà un, et les deux se doublaient. C'est l'espace qui sépare ici. */
  margin:14px 0 0; padding:30px 0 4px; overflow-x:auto;
  /* ⭐⭐ MÊME MESURE que le texte, et c'est tout le sujet du centrage.
     La colonne fait 1000 px, mais la prose est plafonnée à 66-72 caractères —
     au-delà, l'œil perd la ligne suivante en revenant à la marge. Un dessin
     centré sur la COLONNE tombait donc à côté de l'axe que le lecteur voit,
     celui du TEXTE *(Didier, 06/09/2026)*. Le tableau des faits et le diagramme
     partagent désormais la mesure des transcriptions : la fiche n'a plus qu'un
     axe. ⛔ Ne pas les rendre à la pleine colonne. */
  max-width:72ch;
}
/* ⚠️ La petite capitale des libellés du tableau était trop fade pour un titre
   de section *(Didier, 06/09/2026)*. Bodoni italique, comme les années sous un
   nom : du caractère, sans venir concurrencer les h2 de la page. */
.mini-arbre figcaption{
  font-family:"Bodoni Moda",Georgia,serif; font-style:italic;
  font-size:17px; color:var(--muted); margin-bottom:30px; text-align:center;
}
.ma-etage{
  display:flex; justify-content:center; align-items:flex-start;
  gap:var(--gap); position:relative; width:max-content; margin:0 auto;
}
/* ⭐ Les parents s'alignent par le BAS, les enfants par le HAUT : c'est du côté
   de la fourche que les cases doivent coïncider, sans quoi la dent d'un nom
   court n'atteint pas la barre *(Didier, 06/09/2026)*. La réserve de 15 px
   accueille les dents ; la barre se pose au ras de la rangée, pour que la
   descente parte d'elle et ne dépasse pas au-dessus. */
.ma-parents{ align-items:flex-end; padding-bottom:15px; }
.ma-enfants{ padding-top:15px; }
.ma-case{
  flex:0 0 var(--bw); width:var(--bw);
  display:flex; flex-direction:column; gap:2px;
  padding:2px 4px; position:relative; text-align:center;
}
/* ⭐ Deux décalages qui se composent :
   --dx    met les parents et les enfants au-dessus et au-dessous du SUJET,
           pendant que le couple se centre comme un bloc ;
   --shift recentre ensuite la MASSE du dessin dans la colonne de texte.
   ⚠️ Sans --shift, le dessin paraît de travers, la rangée des parents
   débordant d'un côté seulement *(Didier, 06/09/2026)*. */
.ma-etage, .ma-descente{ transform:translateX(var(--shift,0px)); }
.ma-parents, .ma-enfants, .ma-descente{
  transform:translateX(calc(var(--dx,0px) + var(--shift,0px)));
}

/* les filets : une barre par étage, de centre à centre */
.ma-parents::after,
.ma-enfants::before{
  content:""; position:absolute; height:1px; background:var(--rule);
  left:calc(50% - (var(--n) - 1) * var(--step) / 2);
  width:calc((var(--n) - 1) * var(--step));
}
.ma-parents::after{ bottom:0; }
.ma-enfants::before{ top:0; }

/* le tenon qui rattache une personne à la barre de son étage.
   ⛔ Le sujet n'en a pas : la descente qui vient des parents tombe déjà sur lui,
   et le doubler dessinait une troisième dent au milieu de la fourche. */
.ma-parents .ma-case::after,
.ma-enfants .ma-case::before{
  content:""; position:absolute; left:calc(50% - .5px);
  width:1px; height:15px; background:var(--rule);
}
.ma-parents .ma-case::after{ bottom:-15px; }
.ma-enfants .ma-case::before{ top:-15px; }

/* ⭐ l'incertitude vit dans le TRAIT : le filet d'un parent inconnu se pointille */
.ma-parents .ma-vide::after{
  background:none;
  border-left:1px dotted var(--rule);
}
.ma-parents:has(.ma-vide)::after{ background:none; border-top:1px dotted var(--rule); }

/* ⭐ Le trait d'union occupe EXACTEMENT la gouttière entre les deux cases.
   ⚠️ Il était posé à une distance devinée du centre et mordait sur les deux
   noms *(Didier, 06/09/2026)* : il se calcule maintenant sur --bw et --gap. */
.ma-avec-conjoint::before{
  content:""; position:absolute; top:13px; height:1px; background:var(--rule);
  left:calc(50% + var(--ux,0px) - var(--gap) / 2); width:var(--gap);
}

.ma-descente{ width:1px; height:30px; margin:0 auto; background:var(--rule); }

.ma-nom{
  font-family:"Bodoni Moda",Georgia,serif; font-size:17px; line-height:1.3;
}
/* prénoms sur la première ligne, patronyme sur la seconde — jamais l'inverse */
.ma-p, .ma-n{ display:block; }
.ma-n{ letter-spacing:.01em; }
/* ⚠️ Les noms sont des LIENS : ils gardent le souligné, comme dans le tableau
   des faits. Les en priver les rendait illisibles comme tels. */
.ma-nom a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--muted); }
.ma-nom a:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.ma-ans{
  font-family:"Bodoni Moda",Georgia,serif; font-style:italic;
  font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums;
}

/* ⭐ Le sujet de la fiche : l'encre rouge, et RIEN de plus. Un souligné court
   avait d'abord été ajouté sous son nom : il tombait juste au-dessus de la
   descente et se lisait comme un filet cassé. Règle Chanel — on retire. */
.ma-moi .ma-nom{ color:var(--accent); }

/* ce qui manque encore : le mot reste sobre, c'est le filet qui doute */
.ma-vide .ma-nom{ color:var(--muted); font-style:italic; font-size:15.5px; }

@media (max-width:640px){
  .mini-arbre{ --bw:8.5rem; --gap:1.4rem; }
  .ma-nom{ font-size:15px; }
  .ma-ans{ font-size:12.5px; }
}