:root{
  --paper:#EDE6D3;--paper-2:#E2D8BE;--paper-3:#D6CAAA;
  --ink:#1C2A30;--petrol:#1E3941;--petrol-soft:#2f5461;
  --teal:#3F7D6C;--brass:#AE7F27;--brass-soft:#c9a34e;--gold-line:#c9a34e66;
  --rust:#A64B36;--muted:#7A7059;--line:#B7AC8E;
  --ok:#3F7D6C;--mid:#B0822A;--low:#A64B36;--verif:#2f7d5a;
  --shadow:0 10px 30px rgba(20,26,20,.18);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,'Segoe UI',sans-serif;overflow:hidden;
  display:flex;flex-direction:column}
.ar{font-family:'Amiri',"Noto Naskh Arabic",serif}
.fr{font-family:'Cormorant Garamond','Amiri',serif;direction:ltr}

/* ---------- header ---------- */
header.top{background:linear-gradient(175deg,var(--petrol),var(--petrol-soft));color:var(--paper);
  padding:12px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-bottom:3px solid var(--brass);z-index:12;position:relative}
header.top::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 6px,transparent 6px 12px);opacity:.55}
.brand{display:flex;align-items:center;gap:12px}
.crest{display:inline-block;width:34px;height:34px;flex:0 0 auto;color:var(--brass-soft);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.crest svg{width:100%;height:100%;fill:currentColor}
.crest-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:8px;transition:transform .15s}
.crest-btn:hover{transform:scale(1.08)}
.crest-btn:focus-visible{outline:2px solid var(--brass-soft);outline-offset:3px}
.titles h1{font-family:'Amiri',serif;font-size:22px;margin:0;line-height:1.1;white-space:nowrap}
.titles .sub{font-size:12px;color:#cfdbdc;margin-top:2px;font-style:italic}
.stats{direction:ltr;display:flex;gap:20px;margin-inline-start:auto;padding-inline:8px}
.stat{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:52px}
.stat b{font-family:'Cormorant Garamond',serif;font-size:21px;font-variant-numeric:tabular-nums;color:var(--brass-soft)}
.stat span{font-size:9.5px;letter-spacing:.4px;color:#cfdbdc;text-transform:uppercase}
.stat.verif b{color:#9fe3c4}
.admin-link{color:#cfdbdc;font-size:12px;text-decoration:none;border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:6px 11px;white-space:nowrap}
.admin-link:hover{background:rgba(255,255,255,.1);color:var(--paper)}

/* ---------- toolbar ---------- */
.toolbar{background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:9px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:11}
.toolbar-scroll{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tbtn-primary{font-weight:600}
.search-wrap{position:relative;flex:1 1 240px;max-width:360px}
.search-wrap input{width:100%;padding:9px 14px 9px 34px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);font-size:13.5px;font-family:inherit}
.search-wrap input:focus{outline:2px solid var(--gold-line);outline-offset:1px}
.search-wrap .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.sresults{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  max-height:340px;overflow-y:auto;z-index:25;display:none}
.sresults.open{display:block}
.sresults .sr{padding:9px 12px;cursor:pointer;border-bottom:1px dashed var(--line)}
.sresults .sr:last-child{border-bottom:none}
.sresults .sr:hover{background:var(--paper-3)}
.sresults .sr .nm{font-family:'Amiri',serif;font-size:16.5px;font-weight:700}
.sresults .sr .lin{font-family:'Amiri',serif;font-size:12px;color:var(--muted)}
.sresults .sr .meta{font-size:10px;color:var(--muted);direction:ltr}
select,.tbtn{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;
  padding:8px 12px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:background .15s}
.tbtn:hover{background:var(--paper-3)}
.tbtn.active{background:var(--rust);color:var(--paper);border-color:var(--rust)}
.seg-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg-btn{border:none;border-inline-start:1px solid var(--line);background:var(--paper);color:var(--ink);
  padding:8px 12px;font-size:12.5px;font-family:inherit;cursor:pointer}
.seg-btn:first-child{border-inline-start:none}
.seg-btn:hover{background:var(--paper-3)}
.seg-btn.active{background:var(--petrol);color:var(--paper)}

/* ---------- breadcrumb ---------- */
.breadcrumb{background:var(--paper);border-bottom:1px solid var(--line);padding:0 18px;
  font-family:'Amiri',serif;font-size:14px;color:var(--petrol);white-space:nowrap;overflow-x:auto;
  max-height:0;opacity:0;transition:max-height .25s ease,padding .25s ease,opacity .2s;z-index:8}
.breadcrumb.show{max-height:40px;opacity:1;padding:8px 18px}
.breadcrumb span{cursor:pointer;padding:2px 3px;border-radius:4px}
.breadcrumb span:hover{background:var(--paper-3);text-decoration:underline}
.breadcrumb .sep{color:var(--brass);cursor:default;padding:0 2px}
.breadcrumb span:hover.sep{background:none;text-decoration:none}
.breadcrumb .cur{font-weight:700;color:var(--rust)}

/* ---------- stage ---------- */
.stage{flex:1;display:flex;min-height:0;position:relative}
.treewrap{flex:1;position:relative;overflow:hidden;cursor:grab}
.treewrap:active{cursor:grabbing}
svg{width:100%;height:100%;
  background:radial-gradient(circle at 42% 22%,#f3eee0,var(--paper) 55%,var(--paper-3) 100%)}
#svg g.root-layer{opacity:0;transition:opacity .6s ease}
#svg g.root-layer.in{opacity:1}

.hint{position:absolute;top:12px;inset-inline:0;margin:auto;width:max-content;max-width:90%;
  background:rgba(30,57,65,.82);color:var(--paper);font-size:11.5px;padding:6px 14px;border-radius:20px;
  pointer-events:none;transition:opacity .6s ease;letter-spacing:.2px}
.hint.hide{opacity:0}

.link{fill:none;stroke:#8a7d5c;stroke-width:1.5px;opacity:.75}
.link.uncertain{stroke:var(--rust);stroke-dasharray:4 3;opacity:.9}
.node{cursor:pointer}
.node circle.core{stroke:var(--paper);stroke-width:1.5px;transition:r .15s}
.node circle.badge{stroke:var(--paper);stroke-width:1.3px}
.node .plaque{fill:var(--paper);stroke:var(--line);stroke-width:1px;
  filter:drop-shadow(0 1px 2px rgba(28,42,48,.16));transition:stroke .15s}
.node text.lbl{font-family:'Amiri',serif;font-size:14px;font-weight:600;fill:#0d1416;dominant-baseline:middle}
.node.founder circle.core{stroke:var(--brass);stroke-width:2.5px}
.node.founder .plaque{stroke:var(--brass-soft);stroke-width:1.4px}
.node.founder text.lbl{font-weight:700;fill:var(--petrol);font-size:16.5px}
.node.selected circle.core{stroke:var(--rust);stroke-width:2.6px}
.node.selected .plaque{stroke:var(--rust);stroke-width:1.6px}
.node.selected text.lbl{font-weight:700}
.node .kc{font-family:'Inter';font-size:9px;fill:var(--paper);stroke:none;text-anchor:middle;
  dominant-baseline:central;font-weight:600;pointer-events:none}
.node:hover circle.core{filter:drop-shadow(0 0 4px rgba(174,127,39,.7))}
.node:hover .plaque{stroke:var(--brass-soft)}
.node.dim{opacity:.2}

/* ---------- side panel ---------- */
.panel{width:350px;flex:0 0 350px;background:var(--paper);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:-6px 0 16px rgba(0,0,0,.05);
  transform:translateX(0);transition:transform .3s ease}
.panel-close{display:none}
.p-empty{margin:auto;color:var(--muted);text-align:center;padding:34px;font-size:13.5px;line-height:1.6}
.p-empty-crest{font-size:30px;color:var(--brass-soft);margin-bottom:10px}
.p-content{display:none;flex-direction:column;height:100%}
.p-content.show{display:flex}
.ph{background:linear-gradient(175deg,var(--petrol),var(--petrol-soft));color:var(--paper);padding:18px 18px 16px}
.pn{font-family:'Amiri',serif;font-size:28px;font-weight:700;line-height:1.1}
.plin{font-family:'Amiri',serif;font-size:14px;color:#dfe7cf;margin-top:6px;line-height:1.4}
.pb{padding:16px 18px;overflow-y:auto;flex:1}
.prow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px dashed var(--line);font-size:13px}
.prow .k{color:var(--muted)}
.prow .v{font-weight:600;direction:ltr}
.prow .v.ar{direction:rtl;font-family:'Amiri',serif;font-size:14.5px}
.fld{margin-top:16px}
.fld>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin-bottom:7px}
.parent-chip{background:var(--paper-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-family:'Amiri',serif;font-size:17px;cursor:pointer;display:flex;
  align-items:baseline;gap:8px;justify-content:space-between}
.parent-chip:hover{background:var(--paper-3)}
.parent-chip .lin{font-size:11.5px;color:var(--muted);font-family:'Amiri',serif}
.parent-chip.none{color:var(--muted);font-family:'Inter';font-size:12.5px;cursor:default}
.kids{display:flex;flex-direction:column;gap:6px}
.kidrow{display:flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .12s}
.kidrow:hover{background:var(--paper-3)}
.kidrow .nm{font-family:'Amiri',serif;font-size:16px;font-weight:700}
.kidrow .sub{font-size:10.5px;color:var(--muted);direction:ltr;font-family:'Inter';margin-inline-start:auto}
.kids .none{color:var(--muted);font-size:12px;font-style:italic}

/* ---------- zoom ---------- */
.zoom{position:absolute;bottom:16px;left:16px;display:flex;flex-direction:column;gap:7px}
.zoom button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--paper);
  font-size:18px;cursor:pointer;box-shadow:var(--shadow)}
.zoom button:hover{background:var(--paper-3)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--petrol);color:var(--paper);padding:11px 20px;border-radius:10px;font-size:13px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);transition:transform .3s;z-index:60}
.toast.show{transform:translateX(-50%) translateY(0)}

[hidden]{display:none!important}
.pnote{font-family:'Amiri',serif;font-size:14.5px;line-height:1.75;background:var(--paper-2);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}

/* ---------- landing ---------- */
.landing{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#f3eee0,var(--paper) 60%,var(--paper-3) 130%);
  transition:opacity .45s ease,visibility .45s;overflow:hidden}
.landing.hide{opacity:0;visibility:hidden;pointer-events:none}
/* parchemin : grain de papier (bruit SVG) + vignettage brun sur le pourtour */
.landing::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.landing::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(96,72,36,.30) 100%)}
/* arbre complet en filigrane, encre sépia, qui se dessine branche par branche puis respire lentement */
.landing-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.42;pointer-events:none}
.lbg-link{fill:none;stroke:#7d5f2a;stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1;
  animation:lbg-draw 2.4s ease-out forwards}
.lbg-node{fill:#a8822f;opacity:0;animation:lbg-pop .6s ease-out forwards}
.lbg-sway{transform-origin:0 0;animation:lbg-sway 9s ease-in-out 2.6s infinite}
@keyframes lbg-draw{to{stroke-dashoffset:0}}
@keyframes lbg-pop{to{opacity:.9}}
@keyframes lbg-sway{0%,100%{transform:rotate(-.35deg) scale(1)}50%{transform:rotate(.35deg) scale(1.012)}}
@media (prefers-reduced-motion:reduce){.lbg-sway{animation:none}.lbg-link,.lbg-node{animation-duration:.01s}}
.landing-inner{position:relative;z-index:1;text-align:center;width:min(540px,calc(100% - 32px));
  max-height:94vh;overflow-y:auto;padding:26px 26px 22px;
  background:rgba(240,232,211,.9);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid #b9a77a;border-radius:18px;
  box-shadow:inset 0 0 46px rgba(120,90,40,.17),var(--shadow);scrollbar-width:none}
.landing-inner::-webkit-scrollbar{display:none}
.crest.big{width:54px;height:54px;margin:0 auto 8px;color:var(--brass);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}
.landing-inner h2{font-family:'Amiri',serif;font-size:34px;margin:0 0 2px;color:var(--petrol)}
.landing-inner p.fr{margin:0 0 16px;color:var(--muted);font-size:16px;font-style:italic}
.lettrine{position:absolute;top:-22px;inset-inline-start:10px;font-family:'Amiri',serif;font-size:74px;
  line-height:1;color:var(--brass);opacity:.2;pointer-events:none;user-select:none}
.story{position:relative;text-align:start;background:var(--paper);border:1px solid var(--line);
  border-inline-start:3px solid var(--brass);border-radius:12px;padding:13px 16px;margin-bottom:14px;
  font-size:15.5px;line-height:1.8;color:var(--ink)}
.story p{margin:6px 0 0}
.story b{color:var(--petrol)}
.story-name{font-size:21px;font-weight:700;color:var(--rust);cursor:pointer;line-height:1.3}
.story-name:hover{text-decoration:underline}
.landing-stats{display:flex;justify-content:center;gap:28px;margin-bottom:10px}
.landing-stats div{display:flex;flex-direction:column;line-height:1.1}
.landing-stats b{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--brass)}
.landing-stats span{font-size:11px;color:var(--muted);letter-spacing:.3px}
.question{min-height:30px;font-size:19px;color:var(--petrol);margin:2px 0 12px;cursor:pointer;
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.question.in{opacity:1;transform:none}
.question::before{content:'✦ ';color:var(--brass);font-size:13px;vertical-align:middle}
.question:hover{text-decoration:underline;text-decoration-color:var(--brass)}
.landing-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.explore-btn.ghost{background:transparent;color:var(--petrol);border:1px solid var(--petrol);box-shadow:none}
.explore-btn.ghost:hover{background:rgba(30,57,65,.08)}
.landing-search{position:relative;margin-bottom:12px}
.landing-search input{width:100%;padding:14px 46px 14px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--paper);font-family:inherit;font-size:15px;text-align:center;
  box-shadow:var(--shadow)}
.landing-search input:focus{outline:2px solid var(--gold-line)}
.landing-search .ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.landing-results{max-height:220px;overflow-y:auto;text-align:start;margin-bottom:16px;border-radius:10px}
.landing-results .sr{background:var(--paper);border:1px solid var(--line);border-top:none;
  padding:9px 14px;cursor:pointer}
.landing-results .sr:first-child{border-top:1px solid var(--line);border-radius:10px 10px 0 0}
.landing-results .sr:last-child{border-radius:0 0 10px 10px}
.landing-results .sr:hover{background:var(--paper-3)}
.landing-results .sr .nm{font-family:'Amiri',serif;font-size:16px;font-weight:700}
.landing-results .sr .lin{font-family:'Amiri',serif;font-size:11.5px;color:var(--muted);display:block}
.explore-btn{background:var(--petrol);color:var(--paper);border:none;border-radius:10px;
  padding:12px 22px;font-family:'Amiri',serif;font-size:15px;cursor:pointer;box-shadow:var(--shadow)}
.explore-btn:hover{background:var(--petrol-soft)}

/* ---------- mode « خط أكبر » (texte plus grand partout, mémorisé) ---------- */
html.big-text{font-size:118%}
html.big-text .node text.lbl{font-size:19px}
html.big-text .node.founder text.lbl{font-size:22px}
html.big-text .node .kc{font-size:11px}
html.big-text .breadcrumb{font-size:18px}
html.big-text .breadcrumb.show{max-height:48px}
html.big-text .search-wrap input,html.big-text select,html.big-text .tbtn,html.big-text .seg-btn{font-size:15px}
html.big-text .sresults .sr .nm,html.big-text .landing-results .sr .nm{font-size:20px}
html.big-text .sresults .sr .lin,html.big-text .landing-results .sr .lin{font-size:14px}
html.big-text .pn{font-size:34px}
html.big-text .plin{font-size:17px}
html.big-text .prow{font-size:16px}
html.big-text .prow .v.ar,html.big-text .pnote{font-size:17.5px}
html.big-text .parent-chip{font-size:20px}
html.big-text .parent-chip .lin{font-size:14px}
html.big-text .kidrow .nm{font-size:19px}
html.big-text .kidrow .sub{font-size:12.5px}
html.big-text .fld>label{font-size:13px}
html.big-text .p-empty{font-size:16px}
html.big-text .story{font-size:18px}
html.big-text .story-name{font-size:24px}
html.big-text .question{font-size:22px}
html.big-text .landing-search input{font-size:17px}
html.big-text .explore-btn{font-size:17px}
html.big-text .hint{font-size:13.5px}
html.big-text .panel.peek{transform:translateY(calc(100% - 110px))}
html.big-text .stage:has(.panel.peek) .zoom,html.big-text .stage:has(.panel.open) .zoom{bottom:126px}
#big-text-btn.active{background:var(--petrol);color:var(--paper);border-color:var(--petrol)}

/* ---------- responsive ---------- */
@media print{
  @page{size:A3 landscape;margin:8mm}
  header.top,.toolbar,.breadcrumb,.panel,.hint,.zoom,.landing,.toast,.admin-link{display:none!important}
  body{overflow:visible;background:#fff}
  .stage,.treewrap{position:static;width:100%;height:100vh;overflow:visible}
  svg{background:#fff}
}
@media(max-width:820px){
  .stats{display:none}
  .titles .sub{display:none}
  .panel{position:fixed;inset:0;top:auto;height:78vh;width:100%;flex:none;z-index:40;
    border-radius:18px 18px 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.28);
    transform:translateY(100%)}
  /* Peek : seul le bandeau du nom (.ph) dépasse — taper un nœud n'ouvre que ça,
     jamais le plein écran, pour ne pas gêner la navigation dans l'arbre. */
  .panel.peek{transform:translateY(calc(100% - 96px))}
  .panel.open{transform:translateY(0)}
  .panel.peek .pb{visibility:hidden}
  .ph{cursor:pointer;position:relative}
  .ph::after{content:'▲';position:absolute;top:18px;right:18px;font-size:11px;color:#cfdbdc;
    transition:transform .25s}
  .panel.open .ph::after{transform:rotate(180deg)}
  .panel-close{display:block;position:absolute;top:8px;left:12px;background:none;border:none;
    font-size:26px;color:var(--muted);cursor:pointer;z-index:2}
  .panel.peek .panel-close{display:none}
  header.top{padding:10px 14px}
  header.top h1{font-size:17px}
  .admin-link{padding:6px 9px;font-size:11px}
  .toolbar{padding:8px 12px;flex-direction:column;align-items:stretch;overflow-x:hidden}
  /* flex:1 1 240px vient de la barre desktop (ligne) où 240px = largeur mini ;
     en colonne (mobile) ce même flex-basis serait repris comme HAUTEUR, d'où
     le grand vide observé sous le champ de recherche — on le neutralise. */
  .search-wrap{max-width:none;flex:none}
  .toolbar-scroll{flex-wrap:nowrap;overflow-x:auto;width:100%;min-width:0;padding-bottom:2px;margin:0 -12px;padding-inline:12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .toolbar-scroll::-webkit-scrollbar{display:none}
  .toolbar-scroll>*{flex:0 0 auto}
  .tbtn,.seg-btn,select{padding:10px 14px;font-size:13px;min-height:40px}
  .zoom button{width:42px;height:42px;font-size:19px}
  /* Ne pas laisser le bandeau compact du panneau (96px) cacher les boutons de zoom */
  .stage:has(.panel.peek) .zoom,.stage:has(.panel.open) .zoom{bottom:112px}
  .pn{font-size:24px}
  .landing-inner{padding:18px 15px 16px;max-height:96vh}
  .landing-inner h2{font-size:26px}
  .landing-inner p.fr{font-size:14px;margin-bottom:12px}
  .story{font-size:14.5px;line-height:1.7;padding:11px 13px}
  .story-name{font-size:18px}
  .question{font-size:16.5px}
  .landing-stats{gap:22px}
  .landing-stats b{font-size:22px}
}